feat: Drawer

.changeset/lucky-bobcats-hope.md

@@ -0,0 +1,5 @@
+---
+"@scouterna/ui-webc": major
+---
+
+New component Drawer

packages/storybook/src/stories/drawer.stories.tsx

@@ -0,0 +1,33 @@
+import { ScoutDrawer } from "@scouterna/ui-react";
+import { fn } from "storybook/test";
+import preview from "#.storybook/preview";
+
+const meta = preview.meta({
+  title: "Containers/Drawer",
+  component: ScoutDrawer,
+  parameters: {
+    layout: "centered",
+  },
+});
+
+export default meta;
+
+export const BasicExample = meta.story({
+  args: {
+    open: false,
+    heading: "Drawer Heading",
+    showBackButton: true,
+    showExitButton: true,
+    onBackButtonClicked: fn(),
+    onExitButtonClicked: fn(),
+  },
+  render: (args) => (
+    <div>
+      <p>some content within the page.</p>
+      <p>Make sure the Drawer is placed in the root.</p>
+      <ScoutDrawer {...args}>
+        <p>Content inside the drawer</p>
+      </ScoutDrawer>
+    </div>
+  ),
+});

packages/ui-webc/package.json

@@ -55,6 +55,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "iconoir": "^7.11.0",
+    "dom-focus-lock": "^1.1.0",
     "@tabler/icons": "^3.36.1"
   },
   "devDependencies": {

packages/ui-webc/src/components/drawer/drawer.css

@@ -0,0 +1,168 @@
+.drawer {
+  width: 100%;
+}
+/**
+ * Mobile style
+ */
+.drawer--container {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  height: 90%;
+  width: 100%;
+  transform: translateY(100%);
+  background-color: #fefefe;
+  box-shadow: 0 0 20px 3px var(--color-gray-200);
+  border-top-left-radius: var(--spacing-5);
+  border-top-right-radius: var(--spacing-5);
+  overflow: hidden;
+  margin: 0;
+  z-index: 101;
+}
+
+@keyframes drawerOpen {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes drawerClose {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+
+.open {
+  animation: drawerOpen 0.3s ease-in-out forwards;
+}
+.close {
+  animation: drawerClose 0.3s ease-in-out forwards;
+}
+
+/**
+ * Desktop style
+ */
+@media screen and (min-width: 901px) {
+  @keyframes drawerOpen {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+  @keyframes drawerClose {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(100%);
+    }
+  }
+
+  .drawer--container {
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: unset;
+    height: 100%;
+    max-height: 100%;
+    max-width: 90%;
+    min-height: 600px;
+    width: 430px;
+    transform: translateX(100%);
+    border-top-left-radius: var(--spacing-5);
+    border-bottom-left-radius: var(--spacing-5);
+    border-top-right-radius: 0;
+  }
+  .open {
+    animation: drawerOpen 0.3s ease-in-out forwards;
+  }
+  .close {
+    animation: drawerClose 0.3s ease-in-out forwards;
+  }
+}
+
+/* Backdrop styles */
+.backdrop {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  transition: opacity 0.2s;
+  z-index: 100;
+}
+
+.backdrop-hidden {
+  opacity: 0;
+}
+
+.backdrop-visible {
+  opacity: 0.6;
+  pointer-events: all;
+  background-color: var(--color-gray-200);
+}
+
+/**
+ * Header styles
+ */
+.header--wrapper {
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: var(--spacing-20);
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.heading {
+  font: var(--type-body-lg);
+  font-weight: 600;
+  color: var(--color-text-base);
+}
+
+.content--wrapper {
+  padding: 0 var(--spacing-7);
+}
+
+button {
+  z-index: 2;
+  pointer-events: all;
+  cursor: pointer;
+  background: none;
+  box-shadow: none;
+  position: absolute;
+  border: none;
+  /*top: calc(50% - 24px);*/
+  width: 24px;
+  height: 24px;
+  padding: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.exit-button {
+  right: var(--spacing-3);
+}
+.back-button {
+  left: var(--spacing-3);
+}
+
+.visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

packages/ui-webc/src/components/drawer/drawer.tsx

@@ -0,0 +1,175 @@
+import {
+  Component,
+  type ComponentInterface,
+  Element,
+  Event,
+  type EventEmitter,
+  h,
+  Prop,
+  State,
+  Watch,
+} from "@stencil/core";
+import focusLock from "dom-focus-lock";
+
+const backIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-left"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l14 0" /><path d="M5 12l6 6" /><path d="M5 12l6 -6" /></svg>';
+const exitIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>';
+
+@Component({
+  tag: "scout-drawer",
+  styleUrl: "drawer.css",
+  shadow: {
+    delegatesFocus: true,
+  },
+})
+export class ScoutDrawer implements ComponentInterface {
+  @Element() rootElement: HTMLElement;
+  /**
+   * Open/close state of the drawer.
+   */
+  @Prop() open: boolean = false;
+  /**
+   * Heading within the sheet.
+   */
+  @Prop() heading: string = "";
+  /**
+   * Render back button.
+   */
+  @Prop() showBackButton: boolean = false;
+  /**
+   * Back button label.
+   */
+  @Prop() backButtonLabel: string = "";
+  /**
+   * Render exit button.
+   */
+  @Prop() showExitButton: boolean = false;
+  /**
+   * Exit button label.
+   */
+  @Prop() exitButtonLabel: string = "";
+  /**
+   * Disable backdrop for the drawer.
+   */
+  @Prop() disableBackdrop: boolean = false;
+
+  /**
+   * Disable drawer content padding. Use only if you have specific use case and you need to use full width.
+   */
+  @Prop() disableContentPadding: boolean = false;
+
+  @State() drawerState: "opening" | "closing" | "open" | "closed" = "closed";
+  @State() focusedNode: Element = null;
+
+  componentWillLoad(): Promise<void> | void {
+    this.focusedNode = document.activeElement;
+  }
+  componentDidLoad(): void {
+    if (this.open) {
+      this.setDrawerOpenState(true);
+    }
+  }
+  disconnectedCallback(): void {
+    this.focusedNode;
+  }
+  /**
+   * Fired when clicking backButton (<-)
+   */
+  @Event() backButtonClicked: EventEmitter<void>;
+
+  /**
+   * Fired when clicking backButton (X). Also sent when clicking the backdrop.
+   */
+  @Event() exitButtonClicked: EventEmitter<void>;
+
+  onBackButtonClick() {
+    this.backButtonClicked.emit();
+  }
+  onExitButtonClick() {
+    this.exitButtonClicked.emit();
+  }
+
+  @Watch("open")
+  setDrawerOpenState(open: boolean) {
+    const drawer = this.rootElement.shadowRoot.querySelector(
+      ".drawer--container",
+    ) as HTMLElement | null;
+
+    if (!drawer) {
+      this.drawerState = open ? "opening" : "closing";
+    }
+    if (open) {
+      this.drawerState = "opening";
+      focusLock.on(drawer);
+    } else {
+      focusLock.off(drawer);
+      this.drawerState = "closing";
+    }
+  }
+
+  render() {
+    const shouldRenderHeader =
+      this.heading || this.showBackButton || this.showExitButton;
+
+    const getDrawerStateClass = (state: string) => {
+      switch (state) {
+        case "opening":
+        case "open":
+          return "open";
+        case "closing":
+          return "close";
+      }
+    };
+
+    return (
+      <div class="drawer">
+        {!this.disableBackdrop && (
+          // biome-ignore lint/a11y/noStaticElementInteractions: <closable backdrop>
+          // biome-ignore lint/a11y/useKeyWithClickEvents: <closable backdrop>
+          <div
+            onClick={() => {
+              this.onExitButtonClick();
+            }}
+            class={`backdrop ${this.drawerState !== "closed" ? "backdrop-visible" : "backdrop-hidden"}`}
+          ></div>
+        )}
+        <div
+          class={`drawer--container ${getDrawerStateClass(this.drawerState)}`}
+          onAnimationEnd={() => {
+            this.drawerState = this.open ? "open" : "closed";
+          }}
+        >
+          {shouldRenderHeader && (
+            <div class="header--wrapper">
+              {this.showBackButton && (
+                <button
+                  type="button"
+                  class="back-button"
+                  onClick={() => this.onBackButtonClick()}
+                >
+                  <span class="icon" innerHTML={backIcon}></span>
+                  <span class="visually-hidden">{this.backButtonLabel}</span>
+                </button>
+              )}
+              {this.showExitButton && (
+                <button
+                  type="button"
+                  class="exit-button"
+                  onClick={() => this.onExitButtonClick()}
+                >
+                  <span class="icon" innerHTML={exitIcon}></span>
+                  <span class="visually-hidden">{this.exitButtonLabel}</span>
+                </button>
+              )}
+              {this.heading && <h3 class="heading">{this.heading}</h3>}
+            </div>
+          )}
+          <div class={!this.disableContentPadding && `content--wrapper`}>
+            <slot />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}