feat(modal): add custom modal with scrolling content variant

style(modal): add quotes to backgroundimage

style(modal): linter fixes and docs cleanup

fix(modal): update image

style(modal): add double quotes

packages/sage-assets/lib/stylesheets/components/_modal.scss

@@ -347,3 +347,120 @@ $-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;
+}

packages/sage-react/lib/Modal/Modal.story.jsx

@@ -6,6 +6,7 @@ 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 }) => (
   <>
@@ -274,3 +275,87 @@ 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 (
+    <>
+      <Button
+        color={Button.COLORS.PRIMARY}
+        onClick={() => setActive(true)}
+      >
+        Take An Action
+      </Button>
+      <ModalScrollableCols
+        {...args}
+        active={active}
+        headerActions={(
+          <>
+            <Button.Group gap={Button.Group.GAP_OPTIONS.MD}>
+              <Button
+                color={Button.COLORS.SECONDARY}
+                icon={SageTokens.ICONS.PREVIEW_ON}
+                onClick={onExit}
+              >
+                Preview
+              </Button>
+              <Button
+                color={Button.COLORS.SECONDARY}
+                iconOnly={true}
+                icon={SageTokens.ICONS.REMOVE}
+                onClick={onExit}
+                subtle={true}
+              >
+                Menu
+              </Button>
+            </Button.Group>
+          </>
+        )}
+        form={(
+          <>
+            <p>form side</p>
+            <p>form side</p>
+            <p>form side</p>
+            <p>form side</p>
+            <p>form side</p>
+            <p>form side</p>
+            <p>form side</p>
+            <p>form side</p>
+            <p>form side</p>
+            <p>form side</p>
+            <p>form side</p>
+          </>
+        )}
+        // headerImage="" - find way to add asset
+        preview={(
+          <>
+            <p>preview side</p>
+            <p>preview side</p>
+            <p>preview side</p>
+            <p>preview side</p>
+            <p>preview side</p>
+            <p>preview side</p>
+            <p>preview side</p>
+            <p>preview side</p>
+            <p>preview side</p>
+            <p>preview side</p>
+            <p>preview side</p>
+          </>
+        )}
+        isClosing={isClosing}
+        onExit={onExit}
+        title="My Modal"
+      />
+    </>
+  );
+};

packages/sage-react/lib/Modal/ModalScrollableCols.jsx

@@ -0,0 +1,80 @@
+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 (
+    <Modal
+      active={active}
+      className={classNames}
+      size={Modal.SIZES.LG}
+      {...rest}
+    >
+      <Modal.Header
+        image={headerImage}
+        title={title}
+        aside={headerActions}
+      />
+      <Modal.Body>
+        <Grid.Row className="modal-scrollable-cols__container">
+          <Grid.Col className="modal-scrollable-cols__sidebar modal-scrollable-cols__fixed-column">
+            {form && (
+              <div className="modal-scrollable-cols__fixed-column-scroll">
+                { form }
+              </div>
+            )}
+          </Grid.Col>
+          <Grid.Col className="modal-scrollable-cols__preview modal-scrollable-cols__fixed-column">
+            {preview && (
+              <div className="modal-scrollable-cols__fixed-column-scroll">
+                { preview }
+              </div>
+            )}
+          </Grid.Col>
+        </Grid.Row>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+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,
+};