diff --git a/packages/sage-assets/lib/images/system/dot.png b/packages/sage-assets/lib/images/system/dot.png
deleted file mode 100644
index d942c9f1bf..0000000000
Binary files a/packages/sage-assets/lib/images/system/dot.png and /dev/null differ
diff --git a/packages/sage-assets/lib/stylesheets/components/_modal.scss b/packages/sage-assets/lib/stylesheets/components/_modal.scss
index 34665338da..251c675723 100644
--- a/packages/sage-assets/lib/stylesheets/components/_modal.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_modal.scss
@@ -347,120 +347,3 @@ $-modal-inner-size: sage-container(md);
transition: none;
}
}
-
-
-$-modal-fixed-fullscreen-top-spacing: 8rem;
-$-modal-fixed-fullscreen-column-top-spacing: rem(60px);
-$-modal-fixed-fullscreen-column-height: rem(74px);
-$-modal-fixed-column-offset: 14rem;
-$-modal-fixed-fullscreen-column-scroll-height: rem(140px);
-
-$-modal-scrollable-cols-sidebar-width: 36%;
-$-modal-scrollable-cols-preview-width: 919px;
-$-modal-scrollable-cols-preview-visible-breakpoint: 1359px;
-$-modal-scrollable-cols-mobile-fixed-column-padding-top: rem(32px);
-
-$-modal-scrollable-cols-xsmall-mobile-fixed-column-padding-top: rem(90px);
-
-.modal-scrollable-cols__modal {
- .sage-modal__header {
- position: relative;
- z-index: 2;
- margin: 0;
- padding: rem(12px) 0;
- border-start-start-radius: sage-spacing(sm);
- border-start-end-radius: sage-spacing(sm);
- box-shadow: sage-shadow(md);
- }
-
- .sage-modal__header-text {
- padding: sage-spacing(2xs) sage-spacing(md);
-
- /* stylelint-disable max-nesting-depth */
- > {
- .sage-card__row {
- display: flex;
- justify-content: space-between;
- }
- }
- /* stylelint-enable max-nesting-depth */
- }
-
- .sage-modal__content {
- margin: 0;
- }
-
- .modal-scrollable-cols__fixed-column {
- display: flex;
- flex-direction: column;
- overflow: hidden;
- height: calc(100vh - #{$-modal-fixed-column-offset});
- background-color: #fff;
- }
-
- .modal-scrollable-cols__fixed-column-scroll {
- display: flex;
- flex-direction: column;
- flex-grow: 1;
- overflow: scroll;
- height: 100%;
- padding: sage-spacing(sm);
- }
-}
-
-.modal-scrollable-cols__sidebar {
- z-index: 2;
- flex-grow: 0;
- flex-basis: $-modal-scrollable-cols-sidebar-width;
- overflow-y: auto;
- position: relative;
- background-color: sage-color(white);
- border-block-start: sage-border(default);
- border-inline-end: sage-border(default);
- box-shadow: 6px 0 7px -6px rgba(sage-color(black), 0.16);
-
- &.modal-scrollable-cols__fixed-column {
- border-end-start-radius: sage-spacing(sm);
- }
-}
-
-.modal-scrollable-cols__preview {
- background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAALklEQVR4AdXPsQoAAASEYbz/syqLuomyi0n56rZ/OQYQtCC0dBCqeW0MO/zgdQLEyQ2Rj7XXawAAAABJRU5ErkJggg==");
-
- &.modal-scrollable-cols__fixed-column {
- border-end-end-radius: sage-spacing(sm);
- }
-
- .modal-scrollable-cols__fixed-column-scroll {
- padding: sage-spacing(xl);
- }
-}
-
-// TODO: update to use image and not icon
-.modal-scrollable-cols-header-text {
- min-width: 0;
- padding-left: sage-spacing(sm);
- border-left: sage-border();
-
- @media (max-width: sage-breakpoint(sm-max)) {
- padding-left: sage-spacing(xs);
- }
-
- h1 {
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
-
- img {
- max-width: 40px;
- }
-}
-
-.modal-scrollable-cols-header-content {
- width: 100%;
-}
-
-.modal-scrollable-cols-header-actions {
- flex-shrink: 0;
-}
diff --git a/packages/sage-react/lib/Modal/Modal.story.jsx b/packages/sage-react/lib/Modal/Modal.story.jsx
index 5c459f41b4..11e03c30e9 100644
--- a/packages/sage-react/lib/Modal/Modal.story.jsx
+++ b/packages/sage-react/lib/Modal/Modal.story.jsx
@@ -6,7 +6,6 @@ import { Icon } from '../Icon';
import { SageTokens, SageClassnames } from '../configs';
import { disableArgs, selectArgs } from '../story-support/helpers';
import { Modal } from './Modal';
-import { ModalScrollableCols } from './ModalScrollableCols';
const DefaultBody = ({ onExit }) => (
<>
@@ -275,87 +274,3 @@ export const ModalWithCustomSize = (args) => {
>
);
};
-
-export const ModalWithScrollingColumns = (args) => {
- const [active, setActive] = useState(false);
- const [isClosing, setIsClosing] = useState(false);
-
- const onExit = () => {
- setIsClosing(true);
- setTimeout(() => {
- setActive(false);
- setIsClosing(false);
- }, 1000);
- };
-
- return (
- <>
-
-
-
-
-
-
- >
- )}
- form={(
- <>
- form side
- form side
- form side
- form side
- form side
- form side
- form side
- form side
- form side
- form side
- form side
- >
- )}
- // headerImage="" - find way to add asset
- preview={(
- <>
- preview side
- preview side
- preview side
- preview side
- preview side
- preview side
- preview side
- preview side
- preview side
- preview side
- preview side
- >
- )}
- isClosing={isClosing}
- onExit={onExit}
- title="My Modal"
- />
- >
- );
-};
diff --git a/packages/sage-react/lib/Modal/ModalScrollableCols.jsx b/packages/sage-react/lib/Modal/ModalScrollableCols.jsx
deleted file mode 100644
index 9e71b9aa66..0000000000
--- a/packages/sage-react/lib/Modal/ModalScrollableCols.jsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { Modal } from './Modal';
-import { Grid } from '../Grid';
-
-export const ModalScrollableCols = ({
- active,
- className,
- headerActions,
- headerImage,
- form,
- isClosing,
- onExit,
- preview,
- title,
- ...rest
-}) => {
- const classNames = classnames(
- 'modal-scrollable-cols__modal',
- className,
- );
-
- return (
-
-
-
-
-
- {form && (
-
- { form }
-
- )}
-
-
- {preview && (
-
- { preview }
-
- )}
-
-
-
-
- );
-};
-
-ModalScrollableCols.defaultProps = {
- active: false,
- className: '',
- headerActions: null,
- headerImage: null,
- form: null,
- isClosing: PropTypes.bool,
- onExit: (val) => val,
- preview: null,
- title: '',
-};
-
-ModalScrollableCols.propTypes = {
- active: PropTypes.bool,
- className: PropTypes.string,
- headerActions: PropTypes.node,
- headerImage: PropTypes.string,
- form: PropTypes.node,
- isClosing: PropTypes.bool,
- onExit: PropTypes.func,
- preview: PropTypes.node,
- title: PropTypes.string,
-};
diff --git a/packages/sage-react/public/dot.png b/packages/sage-react/public/dot.png
deleted file mode 100644
index d942c9f1bf..0000000000
Binary files a/packages/sage-react/public/dot.png and /dev/null differ