@hubspot/cms-component-library 0.1.0 → 0.2.0

package/components/componentLibrary/Divider/index.module.scss

@@ -11,21 +11,21 @@
 
 // Horizontal divider (hr element)
 .horizontal {
-  width: var(--hscl-divider-length, 100%);
+  width: var(--hscl-divider-width, 100%);
   height: 0;
   border: 0;
-  border-top: var(--hscl-divider-thickness, 1px) var(--hscl-divider-borderStyle, solid) var(--hscl-divider-borderColor, currentColor);
+  border-top: var(--hscl-divider-borderWidth, 1px) var(--hscl-divider-borderStyle, solid) var(--hscl-divider-borderColor, currentColor);
   align-self: var(--hscl-divider-alignment, stretch);
-  margin-block: var(--hscl-divider-spacing, 16px);
+  margin-block: var(--hscl-divider-marginBlock, 16px);
 }
 
 // Vertical divider (div element)
 .vertical {
   width: 0;
-  height: var(--hscl-divider-length, 100%);
+  height: var(--hscl-divider-height, 100%);
   border: 0;
-  border-left: var(--hscl-divider-thickness, 1px) var(--hscl-divider-borderStyle, solid) var(--hscl-divider-borderColor, currentColor);
+  border-left: var(--hscl-divider-borderWidth, 1px) var(--hscl-divider-borderStyle, solid) var(--hscl-divider-borderColor, currentColor);
   display: inline-block;
   align-self: var(--hscl-divider-alignment, stretch);
-  margin-inline: var(--hscl-divider-spacing, 16px);
+  margin-inline: var(--hscl-divider-marginInline, 16px);
 }

package/components/componentLibrary/Divider/index.tsx

@@ -38,10 +38,14 @@ const DividerComponent = ({
 
   const cssVariables: CSSVariables = {
     '--hscl-divider-alignment': getAlignmentCSSVar(alignment),
-    '--hscl-divider-spacing': spacing,
     '--hscl-divider-borderStyle': borderStyle,
-    '--hscl-divider-length': `${length}%`,
-    '--hscl-divider-thickness': `${thickness}px`,
+    [`--hscl-divider-margin${
+      orientation === 'horizontal' ? 'Block' : 'Inline'
+    }`]: spacing,
+    [`--hscl-divider-${
+      orientation === 'horizontal' ? 'width' : 'height'
+    }`]: `${length}%`,
+    '--hscl-divider-borderWidth': `${thickness}px`,
     ...style,
   };
 

package/components/componentLibrary/Divider/stories/Divider.stories.tsx

@@ -4,6 +4,7 @@ import { DividerProps } from '../types.js';
 import { withDividerStyles } from './DividerDecorator.js';
 import { SBContainer } from '@sb-utils/SBContainer.js';
 import { SBCard } from '@sb-utils/SBCard.js';
+import type { CSSVariables } from '../../utils/types.js';
 
 const meta: Meta<DividerProps> = {
   title: 'Component Library/Divider',
@@ -53,61 +54,54 @@ export const Default: Story = {
 
 export const Colors: Story = {
   name: 'Colors',
-  render: () => (
-    <SBContainer flex direction="column" gap="large" minWidth="400px">
-      <SBContainer addBackground>
-        <h4>Default (currentColor)</h4>
-        <p>Inherits text color from parent</p>
-        <Divider thickness={2} />
-      </SBContainer>
+  render: () => {
+    const blueColor: CSSVariables = {
+      '--hscl-divider-borderColor': '#3b82f6',
+    };
+    const greenColor: CSSVariables = {
+      '--hscl-divider-borderColor': '#10b981',
+    };
+    const redColor: CSSVariables = {
+      '--hscl-divider-borderColor': '#ef4444',
+    };
+    const transparentColor: CSSVariables = {
+      '--hscl-divider-borderColor': 'rgba(0, 0, 0, 0.2)',
+    };
+
+    return (
+      <SBContainer flex direction="column" gap="large" minWidth="400px">
+        <SBContainer addBackground>
+          <h4>Default (currentColor)</h4>
+          <p>Inherits text color from parent</p>
+          <Divider thickness={2} />
+        </SBContainer>
 
-      <SBContainer addBackground>
-        <h4>Custom Color (Blue)</h4>
-        <p>Use CSS variables to customize color</p>
-        <Divider
-          thickness={2}
-          style={
-            { '--hscl-divider-borderColor': '#3b82f6' } as React.CSSProperties
-          }
-        />
-      </SBContainer>
+        <SBContainer addBackground>
+          <h4>Custom Color (Blue)</h4>
+          <p>Use CSS variables to customize color</p>
+          <Divider thickness={2} style={blueColor} />
+        </SBContainer>
 
-      <SBContainer addBackground>
-        <h4>Custom Color (Green)</h4>
-        <p>Any valid CSS color value works</p>
-        <Divider
-          thickness={2}
-          style={
-            { '--hscl-divider-borderColor': '#10b981' } as React.CSSProperties
-          }
-        />
-      </SBContainer>
+        <SBContainer addBackground>
+          <h4>Custom Color (Green)</h4>
+          <p>Any valid CSS color value works</p>
+          <Divider thickness={2} style={greenColor} />
+        </SBContainer>
 
-      <SBContainer addBackground>
-        <h4>Custom Color (Red)</h4>
-        <p>Great for error states or warnings</p>
-        <Divider
-          thickness={2}
-          style={
-            { '--hscl-divider-borderColor': '#ef4444' } as React.CSSProperties
-          }
-        />
-      </SBContainer>
+        <SBContainer addBackground>
+          <h4>Custom Color (Red)</h4>
+          <p>Great for error states or warnings</p>
+          <Divider thickness={2} style={redColor} />
+        </SBContainer>
 
-      <SBContainer addBackground>
-        <h4>Semi-transparent</h4>
-        <p>Use rgba for transparency effects</p>
-        <Divider
-          thickness={2}
-          style={
-            {
-              '--hscl-divider-borderColor': 'rgba(0, 0, 0, 0.2)',
-            } as React.CSSProperties
-          }
-        />
+        <SBContainer addBackground>
+          <h4>Semi-transparent</h4>
+          <p>Use rgba for transparency effects</p>
+          <Divider thickness={2} style={transparentColor} />
+        </SBContainer>
       </SBContainer>
-    </SBContainer>
-  ),
+    );
+  },
 };
 
 export const BorderStyles: Story = {

package/components/componentLibrary/Divider/stories/{DividerDecorator.module.css → DividerDecorator.module.scss}

@@ -7,8 +7,9 @@
   min-width: 400px;
   --hscl-divider-borderColor: #cbd5e1;
   --hscl-divider-borderStyle: solid;
-  --hscl-divider-thickness: 1px;
-  --hscl-divider-length: 100%;
-  --hscl-divider-spacing: 16px;
-  --hscl-divider-alignment: stretch;
+  --hscl-divider-borderWidth: 1px;
+  --hscl-divider-width: 100%;
+  --hscl-divider-marginBlock: 16px;
+  --hscl-divider-marginInline: 16px;
+  --hscl-divider-alignSelf: stretch;
 }

package/components/componentLibrary/Divider/stories/DividerDecorator.tsx

@@ -1,5 +1,5 @@
 import type { Decorator } from '@storybook/react';
-import styles from './DividerDecorator.module.css';
+import styles from './DividerDecorator.module.scss';
 
 export const withDividerStyles: Decorator = Story => (
   <div className={styles.decoratorContainer}>

package/components/componentLibrary/Divider/types.ts

@@ -1,3 +1,5 @@
+import type { CSSVariables } from '../utils/types.js';
+
 export type DividerOrientation = 'horizontal' | 'vertical';
 
 export type DividerAlignment = 'stretch' | 'start' | 'center' | 'end';
@@ -15,7 +17,7 @@ export type DividerProps = {
   thickness?: number;
   variant?: 'primary' | 'secondary' | 'tertiary';
   className?: string;
-  style?: React.CSSProperties;
+  style?: CSSVariables;
 };
 
 export type ContentFieldsProps = {

package/components/componentLibrary/Drawer/hooks/index.tsx

@@ -0,0 +1,13 @@
+import { useState } from 'react';
+import { UseDrawerReturn } from '../types.js';
+
+export const useDrawer = (): UseDrawerReturn => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return {
+    isOpen,
+    open: () => setIsOpen(true),
+    close: () => setIsOpen(false),
+    toggle: () => setIsOpen(prev => !prev),
+  };
+};

package/components/componentLibrary/Drawer/index.module.scss

@@ -0,0 +1,94 @@
+.drawer {
+  position: fixed;
+  background-color: var(--hscl-drawer-backgroundColor, white);
+  box-shadow: var(--hscl-drawer-boxShadow, 0 2px 8px rgba(0, 0, 0, 0.15));
+  z-index: var(--hscl-drawer-zIndex, 1000);
+  overflow: auto;
+  transition: transform 0.3s ease-in-out, visibility 0s 0.3s;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.drawer.open {
+  visibility: visible;
+  pointer-events: auto;
+  transition-delay: 0s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .drawer {
+    transition: visibility 0s 0.3s;
+  }
+}
+
+.left {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: var(--hscl-drawer-width);
+  transform: translateX(-100%);
+}
+
+.right {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: var(--hscl-drawer-width);
+  transform: translateX(100%);
+}
+
+.top {
+  top: 0;
+  left: 0;
+  right: 0;
+  height: var(--hscl-drawer-height);
+  transform: translateY(-100%);
+}
+
+.bottom {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: var(--hscl-drawer-height);
+  transform: translateY(100%);
+}
+
+.open.left {
+  transform: translateX(0);
+}
+
+.open.right {
+  transform: translateX(0);
+}
+
+.open.top {
+  transform: translateY(0);
+}
+
+.open.bottom {
+  transform: translateY(0);
+}
+
+.fullScreen {
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--hscl-drawer-overlay-backgroundColor, rgba(0, 0, 0, 0.5));
+  backdrop-filter: var(--hscl-drawer-overlay-backdropFilter, blur(3px));
+  z-index: var(--hscl-drawer-overlay-zIndex, 999);
+}
+
+:global(body.drawerOpen) {
+  overflow: hidden;
+}

package/components/componentLibrary/Drawer/index.tsx

@@ -0,0 +1,131 @@
+import { useEffect, useRef, useId } from 'react';
+import styles from './index.module.scss';
+import cx from '../utils/classname.js';
+import { DrawerProps } from './types.js';
+
+const drawerStack: string[] = [];
+
+const Drawer = ({
+  open,
+  direction = 'right',
+  variant = 'primary',
+  className = '',
+  style = {},
+  children,
+  showOverlay = true,
+  onOverlayClick = () => {},
+  fullScreen = false,
+  size = '300px',
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
+  ...rest
+}: DrawerProps) => {
+  const drawerRef = useRef<HTMLDivElement>(null);
+  const drawerId = useId();
+  const isInStackRef = useRef(false);
+
+  const removeDrawerFromStack = () => {
+    const index = drawerStack.indexOf(drawerId);
+    if (index > -1) {
+      drawerStack.splice(index, 1);
+    }
+    isInStackRef.current = false;
+    // Only remove class if no drawers remain
+    if (drawerStack.length === 0) {
+      document.body.classList.remove('drawerOpen');
+    }
+  };
+
+  useEffect(() => {
+    // Add this drawer to the stack when it opens (if not already added)
+    if (open && !isInStackRef.current) {
+      drawerStack.push(drawerId);
+      isInStackRef.current = true;
+      document.body.classList.add('drawerOpen');
+    } else if (!open && isInStackRef.current) {
+      removeDrawerFromStack();
+    }
+
+    if (!open) {
+      return;
+    }
+
+    // Only close the topmost drawer when Escape is pressed
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        const topmostDrawerId = drawerStack[drawerStack.length - 1];
+        if (topmostDrawerId === drawerId) {
+          onOverlayClick();
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [open, onOverlayClick, drawerId]);
+
+  // Cleanup: ensure drawer is removed from stack on unmount
+  useEffect(() => {
+    return () => {
+      if (isInStackRef.current) {
+        removeDrawerFromStack();
+      }
+    };
+  }, [drawerId]);
+
+  const variantClass = styles[`hscl-drawer-${variant}`]; // !todo: not used atm but keeping for when we need to add variant system.
+  const directionClass = styles[direction];
+  const openClass = open ? styles.open : '';
+  const fullScreenClass = fullScreen ? styles.fullScreen : '';
+
+  const defaultClasses = cx(
+    styles.drawer,
+    variantClass,
+    directionClass,
+    openClass,
+    fullScreenClass
+  );
+  const combinedClasses = cx(defaultClasses, className);
+
+  const cssVars = fullScreen
+    ? {}
+    : direction === 'left' || direction === 'right'
+    ? { '--hscl-drawer-width': size }
+    : { '--hscl-drawer-height': size };
+
+  const drawerStyle = {
+    ...cssVars,
+    ...style,
+  };
+
+  return (
+    <>
+      {showOverlay && open && (
+        <div
+          className={styles.overlay}
+          onClick={onOverlayClick}
+          aria-hidden="true"
+        />
+      )}
+      <div
+        ref={drawerRef}
+        className={combinedClasses}
+        style={drawerStyle}
+        role="dialog"
+        aria-modal="true"
+        aria-hidden={!open}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledby}
+        {...rest}
+      >
+        {children}
+      </div>
+    </>
+  );
+};
+
+export default Drawer;
+export { useDrawer } from './hooks/index.js';