Merge pull request #1748 from Kajabi/DSS-422/ai-drawer

[DSS-422] compact drawer variation
Kajabi · Jun 14, 2023 · c09b52f · c09b52f
2 parents 09559e4 + 22f835f
commit c09b52f
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 1 deletion.
diff --git a/packages/sage-assets/lib/stylesheets/components/_drawer.scss b/packages/sage-assets/lib/stylesheets/components/_drawer.scss
@@ -4,7 +4,7 @@
 /// @group sage
 ////
 
-// The Drawer component is an extension of the Modal component. 
+// The Drawer component is an extension of the Modal component.
 // This file is used to isolate the Drawer specific styles.
 
 .sage-drawer {
@@ -13,6 +13,12 @@
 
   justify-content: flex-end;
   padding: 0;
+
+  .sage-modal__footer {
+    input {
+      width: 100%;
+    }
+  }
 }
 
 [data-js-drawer-expanded-content].sage-drawer__hidden-content,
@@ -31,3 +37,35 @@
 .sage-drawer__close {
   margin-left: auto; // preserves alignment when only close button is present
 }
+
+.sage-drawer-compact__input-wrapper {
+  display: flex;
+  position: relative;
+  margin: 0;
+
+  input {
+    width: 100%;
+    margin-bottom: 0;
+    padding: rem(20px) 1rem;
+    padding-right: rem(60px);
+    font-size: sage-font-size(body-sm);
+    border-bottom-left-radius: sage-border(radius-large);
+    border-bottom-right-radius: sage-border(radius-large);
+    border: 0;
+
+    &:focus {
+      border: 0;
+      outline: none;
+    }
+  }
+
+  .sage-btn {
+    flex-shrink: 0;
+    position: absolute;
+    right: sage-spacing(sm);
+
+    &:not(.sage-btn--subtle) {
+      padding: sage-spacing(xs);
+    }
+  }
+}
diff --git a/packages/sage-assets/lib/stylesheets/components/_modal.scss b/packages/sage-assets/lib/stylesheets/components/_modal.scss
@@ -95,6 +95,17 @@ $-modal-inner-size: sage-container(md);
     @media (max-width: sage-breakpoint(md-min)) {
       max-width: var(--sage-drawer-mobile-size);
     }
+
+  }
+
+  .sage-drawer.sage-drawer--compact & {
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 97px);
+    max-width: var(--sage-drawer-compact-width, rem(400px));
+    margin-block-start: rem(79px);
+    margin-inline-end: sage-spacing(sm);
+    border-radius: sage-border(radius-large);
   }
 
   .sage-drawer--expanded & {
@@ -269,6 +280,15 @@ $-modal-inner-size: sage-container(md);
     margin: 0 calc(#{sage-spacing(card)} / 2);
   }
 
+  .sage-drawer--compact & {
+    margin-left: 0;
+    margin-right: 0;
+    padding-left: rem(20px);
+    padding-right: rem(20px);
+    padding-bottom: sage-spacing();
+    border-bottom: sage-border(default);
+  }
+
   > :last-child {
     margin-bottom: 0;
   }

diff --git a/packages/sage-react/lib/Drawer/Drawer.jsx b/packages/sage-react/lib/Drawer/Drawer.jsx
@@ -15,10 +15,13 @@ export const Drawer = ({
   active,
   children,
   className,
+  compact,
   customHeader,
+  customWidth,
   disableBackgroundDismiss,
   expanded,
   expandedSize,
+  footer,
   onExpandChange,
   id,
   onExit,
@@ -43,6 +46,7 @@ export const Drawer = ({
     className,
     {
       'sage-drawer--expanded': expanded,
+      'sage-drawer--compact': compact,
     }
   );
 
@@ -65,6 +69,9 @@ export const Drawer = ({
       id={id}
       onExit={onExit}
       styles={{ ...localStyles }}
+      style={{
+        '--sage-drawer-compact-width': `${customWidth}px`
+      }}
     >
       {(customHeader || title || showClose) && (
         <Modal.Header
@@ -89,6 +96,11 @@ export const Drawer = ({
       <Modal.Body spacing={Modal.Body.SPACINGS.PANEL}>
         {children}
       </Modal.Body>
+      {footer && (
+        <Modal.Footer className="sage-drawer-compact__input-wrapper">
+          {footer}
+        </Modal.Footer>
+      )}
     </Modal>
   );
 };
@@ -102,10 +114,13 @@ Drawer.defaultProps = {
   active: false,
   children: null,
   className: null,
+  compact: false,
   customHeader: null,
+  customWidth: null,
   disableBackgroundDismiss: true,
   expanded: false,
   expandedSize: null,
+  footer: null,
   onExit: (val) => val,
   onExpandChange: (expanded) => expanded,
   showClose: true,
@@ -117,10 +132,13 @@ Drawer.propTypes = {
   active: PropTypes.bool,
   children: PropTypes.node,
   className: PropTypes.string,
+  compact: PropTypes.bool,
   customHeader: PropTypes.node,
+  customWidth: PropTypes.number,
   disableBackgroundDismiss: PropTypes.bool,
   expanded: PropTypes.bool,
   expandedSize: PropTypes.string,
+  footer: PropTypes.node,
   id: PropTypes.string.isRequired,
   onExit: PropTypes.func,
   onExpandChange: PropTypes.func,

diff --git a/packages/sage-react/lib/Drawer/Drawer.story.jsx b/packages/sage-react/lib/Drawer/Drawer.story.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Drawer } from './Drawer';
 import { SageClassnames, SageTokens } from '../configs';
 import { Button } from '../Button';
+import { Icon } from '../Icon';
 import { Grid } from '../Grid';
 
 const drawerChildren = (
@@ -24,6 +25,21 @@ const drawerChildren = (
   </>
 );
 
+const drawerFooter = (
+  <>
+    <input
+      placeholder="Ask anything or get started with a suggestion..."
+    />
+    <Button
+      color={Button.COLORS.PRIMARY}
+      icon={Icon.ICONS.SEND_MESSAGE}
+      iconOnly
+    >
+      Set
+    </Button>
+  </>
+);
+
 export default {
   title: 'Sage/Drawer',
   component: Drawer,
@@ -56,6 +72,26 @@ const Template = (args) => <Drawer {...args} />;
 
 export const Default = Template.bind({});
 
+export const Compact = Template.bind({});
+Compact.args = {
+  active: true,
+  children: drawerChildren,
+  compact: true,
+  customHeader: (
+    <Button
+      color={Button.COLORS.SECONDARY}
+      subtle={true}
+      icon={SageTokens.ICONS.EXPAND}
+      iconPosition={Button.ICON_POSITIONS.LEFT}
+    >
+      Open full profile
+    </Button>
+  ),
+  footer: drawerFooter,
+  showClose: true,
+  customWidth: 425
+};
+
 export const WiredExample = () => {
   const [drawerContents, setDrawerContents] = React.useState(null);
   const [drawerActive, setDrawerActive] = React.useState(true);