Merge pull request #283 from US-CBP/feature/inline-drawer

Feature/inline drawer

Author: dgibson666

packages/web-components/src/components/cbp-dialog/cbp-dialog.stories.tsx

@@ -77,7 +77,8 @@ const Template = ({ title, content, color, open, uid, accessibilityText, actions
     <cbp-button
       type="button"
       color="secondary"
-      accessibility-text="Open Drawer"
+      variant="square"
+      accessibility-text="Open Dialog"
       target-prop="open"
       controls=${uid}
     >

packages/web-components/src/components/cbp-drawer/cbp-drawer.scss

@@ -12,37 +12,36 @@
 [data-cbp-theme=dark] cbp-drawer:not([context=dark-inverts]):not([context=light-always]) {
   --cbp-drawer-color-bg: var(--cbp-color-gray-cool-70);
 }
- 
+
 
 cbp-drawer {
   all: unset;
   display: none;
-  --cbp-panel-border-radius: 0;
-  --cbp-panel-border-width: 0;
-  // Use the panel CSS API to override the colors in dark mode for a specific drawer variant
-  --cbp-panel-header-color-dark: var(--cbp-color-text-lighter);
-  --cbp-panel-header-color-bg-dark: var(--cbp-color-branding-dhs-blue);
-  --cbp-panel-header-color-bottom-border-dark: var(--cbp-color-gray-cool-50);
-  --cbp-panel-content-color-dark: var(--cbp-color-text-lightest);
-  --cbp-panel-content-color-bg-dark: var(--cbp-color-gray-cool-70);
-  --cbp-panel-content-color-border-dark: var(--cbp-color-gray-cool-60);
-}
+  position: relative;
 
-cbp-drawer[open] {
-  display: block;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: calc(var(--cbp-z-index-level-top) - 1);
-  overflow-y: auto;
-  background-color: rgba(0, 0, 0, 0.3); // backdrop
+  &:not(.cbp-drawer--persistent) {
+    --cbp-panel-border-radius: 0;
+    --cbp-panel-border-width: 0;
+    // Use the panel CSS API to override the colors in dark mode for a specific drawer variant
+    --cbp-panel-header-color-dark: var(--cbp-color-text-lighter);
+    --cbp-panel-header-color-bg-dark: var(--cbp-color-branding-dhs-blue);
+    --cbp-panel-header-color-bottom-border-dark: var(--cbp-color-gray-cool-50);
+    --cbp-panel-content-color-dark: var(--cbp-color-text-lightest);
+    --cbp-panel-content-color-bg-dark: var(--cbp-color-gray-cool-70);
+    --cbp-panel-content-color-border-dark: var(--cbp-color-gray-cool-60);
+  }
+
+  &.cbp-drawer--persistent {
+    display: block;
+
+    .cbp-drawer__content {
+      height: auto;
+    }
+  }
 
   .cbp-drawer__content {
     display: flex;
     flex-direction: column;
-    position: fixed;
     top: 0;
     overflow-y: auto;
     z-index: var(--cbp-z-index-level-4);
@@ -65,6 +64,18 @@ cbp-drawer[open] {
       top: 1em;
     }
   }
+}
+
+cbp-drawer[open] {
+  display: block;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: calc(var(--cbp-z-index-level-top) - 1);
+  overflow-y: auto;
+  background-color: rgba(0, 0, 0, 0.3); // backdrop
 
   &[position='left'] {
     .cbp-drawer__content {
@@ -87,10 +98,15 @@ cbp-drawer[open] {
       }
     }
   }
+  
+  .cbp-drawer__content {
+    position: fixed;
+  }
 
   @media (min-width: 37.5em) {
     .cbp-drawer__content {
       width: 25rem;
     }
   }
-}
+}
+

packages/web-components/src/components/cbp-drawer/cbp-drawer.specs.mdx

@@ -16,6 +16,9 @@ The Drawer is a container that may be hidden and revealed, sliding in from eithe
 * The Drawer may slide in from either the left or right side of the viewport, taking up the full height of the viewport.
 * A backdrop covers the visible portion of the page behind the drawer.
 * Clicking the backdrop or the designated close button will close (hide) the drawer.
+* In some instances, it may be desirable for a panel to "mobilize" into a drawer at a certain smaller screen size. 
+  * In this case the drawer acts as a block element while persistent.
+  * While persistent, the Drawer cannot be closed.
 
 ## Technical Specifications
 
@@ -29,6 +32,10 @@ The Drawer is a container that may be hidden and revealed, sliding in from eithe
 
 * Under 600px (37.5rem), the Drawer takes 100% of the width of the viewport.
 * At larger viewport sizes, the Drawer renders at 25rem (400px at default font sizing) wide.
+* In some instances, it may be desirable for a panel to "mobilize" into a drawer at a certain smaller screen size.
+  * In this case, the drawer is considered "persistent" above a specified media query breakpoint and rendered as a block-level element..
+  * The media query breakpoint is set via the `persistAt` property.
+  * When this functionality is implemented, the drawer control should be hidden using the `cbp-hide` component with the same breakpoint as the `hideAt` value.
 
 ### Accessibility
 
@@ -39,6 +46,10 @@ The Drawer is a container that may be hidden and revealed, sliding in from eithe
 * When the drawer appears on the screen, keyboard focus should be moved to the default focusable control inside the drawer.
 * After the drawer is dismissed, keyboard focus should be moved back to where it was before it moved into the drawer. 
 * The expected behavior is that the drawer's tab order wraps.
+* When a drawer is persistent on-screen (not an overlay):
+  * Its `role` is changed to "region"
+  * The `aria-modal` attribute is removed.
+  * The "close" button is not rendered (and the drawer cannot be closed).
 
 ### Additional Notes and Considerations
 

packages/web-components/src/components/cbp-drawer/cbp-drawer.stories.tsx

@@ -10,6 +10,9 @@ export default {
     open: {
       description: 'Specifies whether the drawer is open or closed.',
       control: 'boolean',
+    },    
+    persistAt: {
+      control: 'text',
     },
     uid: {
       description: 'A unique `id` applied to the drawer and referenced by the control.',
@@ -19,6 +22,7 @@ export default {
       description: 'Accessibility text is required to label the drawer (dialog) and is applied as an `aria-label`.',
       control: 'text',
     },
+
     withIcon: {
       control: 'boolean',
     },
@@ -33,21 +37,27 @@ export default {
   },
 };
 
-const Template = ({ position, withIcon, open, uid, accessibilityText, context, sx }) => {
+const Template = ({ position, withIcon, open, persistAt, uid, accessibilityText, context, sx }) => {
   return `
-    <cbp-button
-      type="button"
-      color="secondary"
-      accessibility-text="Open Drawer"
-      target-prop="open"
-      controls=${uid}
+    <cbp-hide 
+      ${persistAt ? `hide-at=${persistAt}` : ''}
     >
-      <cbp-icon name="bars"></cbp-icon>
-    </cbp-button>
+      <cbp-button
+        type="button"
+        color="secondary"
+        variant="square"
+        accessibility-text="Open Drawer"
+        target-prop="open"
+        controls=${uid}
+      >
+        <cbp-icon name="bars"></cbp-icon>
+      </cbp-button>
+    </cbp-hide>
 
     <cbp-drawer
       ${position ? `position=${position}` : ''}
       ${open ? `open=${open}` : ''}
+      ${persistAt ? `persist-at=${persistAt}` : ''}
       ${accessibilityText ? `accessibility-text=${accessibilityText}` : ''}
       ${context && context != 'light-inverts' ? `context=${context}` : ''}
       ${sx ? `sx=${JSON.stringify(sx)}` : ''}
@@ -77,15 +87,17 @@ export const Drawer = Template.bind({});
 Drawer.args = {
   position: 'left',
   uid: 'drawer',
+  //persistAt: 'min-width:64rem',
   context: 'light-always'
 };
 
 
-const UserPreferencesTemplate = ({ position, open, uid, accessibilityText, withIcon, context, sx }) => {
+const UserPreferencesTemplate = ({ position, open, persistAt, uid, accessibilityText, withIcon, context, sx }) => {
   return `
     <cbp-button
       type="button"
       color="secondary"
+      variant="square"
       accessibility-text="Open Drawer"
       target-prop="open"
       controls=${uid}
@@ -96,6 +108,7 @@ const UserPreferencesTemplate = ({ position, open, uid, accessibilityText, withI
     <cbp-drawer
       ${position ? `position=${position}` : ''}
       ${open ? `open=${open}` : ''}
+      ${persistAt ? `persist-at="${persistAt}"` : ''}
       ${accessibilityText ? `accessibility-text=${accessibilityText}` : ''}
       ${context && context != 'light-inverts' ? `context=${context}` : ''}
       ${sx ? `sx=${JSON.stringify(sx)}` : ''}

packages/web-components/src/components/cbp-drawer/cbp-drawer.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop, Element, Event, EventEmitter, Method, Watch, Host, h } from '@stencil/core';
+import { Component, Prop, Element, Event, EventEmitter, Method, Watch, Host, h, State } from '@stencil/core';
 import { setCSSProps, getFocusableElements } from '../../utils/utils';
 
 @Component({
@@ -23,17 +23,23 @@ export class CbpDrawer {
   /** Creates an accessible label for the drawer (dialog). */
   @Prop() accessibilityText: string;
 
+  /** Specifies a valid CSS media query (preferably using relative units), when met will hide the wrapped content using display: none. E.g., `min-width:64em` */
+  @Prop() persistAt: string;
+
   /** Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified. */
   @Prop({ reflect: true }) context: 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
 
   /** Supports adding inline styles as an object */
   @Prop() sx: any = {};
 
+  @State() persistent: boolean = false;
+
   /** Custom event fired when the drawer is opened. */
   @Event() drawerOpen!: EventEmitter;
   /** Custom event fired when the drawer is closed. */
   @Event() drawerClose!: EventEmitter;
 
+
   @Watch('open')
   watchOpenHandler(newValue: boolean) {
     newValue == true ? this.setFocus() : this.closeDrawer();
@@ -65,7 +71,6 @@ export class CbpDrawer {
         this.focusableElements = getFocusableElements(this.host);
       }
       this.focusableElements[0]?.focus();
-      //console.log(this.focusableElements,document.activeElement);
     }, 100);
   }
 
@@ -77,7 +82,27 @@ export class CbpDrawer {
     e.key == 'Escape' && this.closeDrawer();
   }
 
+
+  // Callback functions for the media query event listeners
+  doPersistAt(mql) {
+    if (mql.matches) {
+      this.persistent = true;
+    }
+    else {  
+      this.persistent = false;
+    }
+  }
+
+
   componentDidLoad() {
+    if (this.persistAt) {
+      const MQ = window?.matchMedia(`(${this.persistAt})`);
+      if (MQ) {
+        MQ.addEventListener('change', mql => this.doPersistAt(mql)); // Add an event listener to the media query
+        this.doPersistAt(MQ); // Run the breakpoint change handler once on load
+      }
+    }
+
     if (typeof this.sx == 'string') {
       this.sx = JSON.parse(this.sx) || {};
     }
@@ -89,23 +114,29 @@ export class CbpDrawer {
   }
 
   componentDidRender() {
+    // Support animation by doing it this way
     setTimeout(() => {
       this.open ? this.drawer.classList.add('cbp-drawer--open') : this.drawer.classList.remove('cbp-drawer--open');
     }, 10);
   }
 
+
   render() {
     return (
-      <Host onClick={e => this.handleBackdropClick(e)} onKeyUp={e => this.handleKeyUp(e)} id={this.uid}>
+      <Host 
+        class={this.persistent ? "cbp-drawer--persistent" : ""}
+        onClick={e => this.handleBackdropClick(e)} 
+        onKeyUp={e => this.handleKeyUp(e)} id={this.uid}
+      >
         <div
           ref={el => (this.drawer = el)}
-          role="dialog"
-          aria-modal="true"
+          role={this.persistent ? "region" : "dialog"}
+          aria-modal={!this.persistent ? "true" : false}
           class="cbp-drawer__content"
           aria-label={this.accessibilityText}
           tabindex="-1"
         >
-          <cbp-button
+          {!this.persistent && <cbp-button
             class="cbp-drawer__close-button"
             variant="square"
             type="button"
@@ -117,7 +148,7 @@ export class CbpDrawer {
             context="dark-always"
           >
             <cbp-icon name="circle-xmark" size="1rem"></cbp-icon>
-          </cbp-button>
+          </cbp-button>}
 
           <slot />
         </div>