uikit-react-public 0.30.1 → 0.32.3

package/lib/components/Sidebar/__tests__/__snapshots__/Sidebar.test.tsx.snap

@@ -0,0 +1,272 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Sidebar > snapshot: defaultCollapsed prop true 1`] = `
+<aside
+  class="ucl-uikit-sidebar css-1r5qfp0"
+  data-collapsed="true"
+  data-testid="ucl-uikit-sidebar"
+>
+  <nav
+    class="css-17d0xaj"
+    data-testid="ucl-uikit-menu"
+    id="_r_1_"
+    role="menu"
+  >
+    <section
+      class="ucl-uikit-menu__section css-1lqjxmd"
+      data-testid="ucl-uikit-menu__section"
+    >
+      <div
+        aria-current="page"
+        class="ucl-uikit-menu__primary-item css-q3xv9x"
+        role="button"
+        tabindex="0"
+      >
+        <svg
+          class="ucl-uikit-icon css-148hpxb"
+          data-testid="ucl-uikit-icon"
+          fill="none"
+          focusable="false"
+          height="24"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+          />
+          <path
+            d="M9 22V12h6v10"
+          />
+        </svg>
+        <span
+          class="css-fsjij5"
+        >
+          <span
+            class="ucl-uikit-text ucl-uikit-menu__item-text css-1p0ghou"
+            data-testid="ucl-uikit-text"
+          >
+            Home
+          </span>
+        </span>
+      </div>
+      <div
+        class="ucl-uikit-menu__primary-item css-1ukjxb7"
+        role="button"
+        tabindex="0"
+      >
+        <svg
+          class="ucl-uikit-icon css-148hpxb"
+          data-testid="ucl-uikit-icon"
+          fill="none"
+          focusable="false"
+          height="24"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="11"
+            cy="11"
+            r="8"
+          />
+          <path
+            d="m21 21-4.35-4.35"
+          />
+        </svg>
+        <span
+          class="css-fsjij5"
+        >
+          <span
+            class="ucl-uikit-text ucl-uikit-menu__item-text css-1p0ghou"
+            data-testid="ucl-uikit-text"
+          >
+            Search
+          </span>
+        </span>
+      </div>
+    </section>
+  </nav>
+  <div
+    class="css-1uv1uf"
+  >
+    <button
+      aria-controls="_r_1_"
+      aria-expanded="false"
+      aria-label="Expand sidebar"
+      class="ucl-uikit-icon-button css-hfinxr"
+      data-testid="ucl-uikit-icon-button"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        class="ucl-uikit-icon css-148hpxb"
+        data-testid="ucl-uikit-icon"
+        fill="none"
+        focusable="false"
+        height="20"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="m13 17 5-5-5-5M6 17l5-5-5-5"
+        />
+      </svg>
+    </button>
+  </div>
+</aside>
+`;
+
+exports[`Sidebar > snapshot: no props 1`] = `
+<aside
+  class="ucl-uikit-sidebar css-syj6vq"
+  data-collapsed="false"
+  data-testid="ucl-uikit-sidebar"
+>
+  <nav
+    class="css-1ca5xb9"
+    data-testid="ucl-uikit-menu"
+    id="_r_0_"
+    role="menu"
+  >
+    <section
+      class="ucl-uikit-menu__section css-4ikjcu"
+      data-testid="ucl-uikit-menu__section"
+    >
+      <div
+        class="ucl-uikit-menu__heading css-zvrw4a"
+        data-testid="ucl-uikit-menu__heading"
+      >
+        <h3
+          class="ucl-uikit-heading css-d6quz8"
+          data-testid="ucl-uikit-heading"
+        >
+          Application
+        </h3>
+      </div>
+      <div
+        aria-current="page"
+        class="ucl-uikit-menu__primary-item css-18nh1y3"
+        role="button"
+        tabindex="0"
+      >
+        <svg
+          class="ucl-uikit-icon css-148hpxb"
+          data-testid="ucl-uikit-icon"
+          fill="none"
+          focusable="false"
+          height="24"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+          />
+          <path
+            d="M9 22V12h6v10"
+          />
+        </svg>
+        <span
+          class="css-fsjij5"
+        >
+          <span
+            class="ucl-uikit-text ucl-uikit-menu__item-text css-9z56wx"
+            data-testid="ucl-uikit-text"
+          >
+            Home
+          </span>
+        </span>
+      </div>
+      <div
+        class="ucl-uikit-menu__primary-item css-1o5khet"
+        role="button"
+        tabindex="0"
+      >
+        <svg
+          class="ucl-uikit-icon css-148hpxb"
+          data-testid="ucl-uikit-icon"
+          fill="none"
+          focusable="false"
+          height="24"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="11"
+            cy="11"
+            r="8"
+          />
+          <path
+            d="m21 21-4.35-4.35"
+          />
+        </svg>
+        <span
+          class="css-fsjij5"
+        >
+          <span
+            class="ucl-uikit-text ucl-uikit-menu__item-text css-9z56wx"
+            data-testid="ucl-uikit-text"
+          >
+            Search
+          </span>
+        </span>
+      </div>
+    </section>
+  </nav>
+  <div
+    class="css-vzvd2u"
+  >
+    <button
+      aria-controls="_r_0_"
+      aria-expanded="true"
+      aria-label="Collapse sidebar"
+      class="ucl-uikit-icon-button css-hfinxr"
+      data-testid="ucl-uikit-icon-button"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        class="ucl-uikit-icon css-148hpxb"
+        data-testid="ucl-uikit-icon"
+        fill="none"
+        focusable="false"
+        height="20"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="m11 17-5-5 5-5m7 10-5-5 5-5"
+        />
+      </svg>
+    </button>
+  </div>
+</aside>
+`;

package/lib/components/Sidebar/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Sidebar';
+export type { SidebarProps } from './Sidebar';

package/lib/components/Snackbar/Snackbar.stories.tsx

@@ -38,6 +38,17 @@ export const Undo: Story = {
   },
 };
 
+export const Error: Story = {
+  name: 'Variant: Error',
+  args: {
+    action: 'close',
+    children: 'This is an error snackbar',
+    size: 'small',
+    variant: 'error',
+    onClose: () => alert('Close action triggered'),
+  },
+};
+
 export const LongText: Story = {
   name: 'With long text',
   args: {

package/lib/components/Snackbar/Snackbar.tsx

@@ -1,136 +1,180 @@
-import { memo, forwardRef, OutputHTMLAttributes } from 'react';
+import { memo, HTMLAttributes, Ref } from 'react';
 import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
-import { IconButton, Icon } from '..';
+import { IconButton, Icon, Text } from '..';
 import marginsStyle, { MarginProps } from '../common/marginsStyle';
 
 export const NAME = 'ucl-uikit-snackbar';
 
-export interface SnackbarBaseProps
-  extends OutputHTMLAttributes<HTMLOutputElement> {
-  action: 'close' | 'undo';
+export interface SnackbarBaseProps extends HTMLAttributes<HTMLDivElement> {
+  action?: 'close' | 'undo';
+  actionDisabled?: boolean;
+  closeButtonAriaLabel?: string;
   onClose?: () => void;
   onUndo?: () => void;
+  size?: 'small' | 'large';
   testId?: string;
+  variant?: 'default' | 'error';
+  ref?: Ref<HTMLDivElement>;
 }
 
 export type SnackbarProps = SnackbarBaseProps & MarginProps;
 
-export type Ref = HTMLOutputElement;
-
-// Should this component be a <div> instead of an <output>?
-const Snackbar = forwardRef<Ref, SnackbarProps>(
-  (
-    {
-      action = 'close',
-      onClose,
-      onUndo,
-      children,
-      testId = NAME,
-      className,
-      ...props
-    },
-    ref
-  ) => {
-    const [theme] = useTheme();
-
-    const baseStyles = css`
-      display: flex;
-      justify-content: start;
-      align-items: center;
-      gap: 16px;
-      box-sizing: border-box;
-      position: fixed;
-      width: 375px;
-      height: ${theme.height.h80};
-      z-index: 9999;
-      padding-left: ${theme.padding.p24};
-      padding-right: ${theme.padding.p24};
-      color: ${theme.color.text.inverted};
-      background-color: ${theme.color.neutral.grey90};
-      font-size: ${theme.font.size.f16};
-      font-family: ${theme.font.family.primary};
-      font-weight: ${theme.font.weight.regular};
-      line-height: ${theme.font.lineHeight.h140};
-    `;
-
-    const style = cx(NAME, baseStyles, marginsStyle(props, theme), className);
-
-    const checkCircleIconStyle = css`
-      min-width: 24px;
-      min-height: 24px;
-    `;
-
-    const actionButtonStyle = css`
-      margin-left: auto;
-    `;
-
-    const undoButtonStyle = css`
-      padding: ${theme.padding.p4};
-      border: none;
-      background-color: transparent;
-      color: ${theme.color.text.inverted};
-      font-size: ${theme.font.size.f16};
-      font-family: ${theme.font.family.primary};
-      font-weight: 700;
-      cursor: pointer;
-
-      &:hover {
-        color: ${theme.color.neutral.grey20}; // This is a guess
-      }
-
-      &:focus-visible {
-        outline: none;
-        box-shadow: ${theme.boxShadow.focus};
-      }
-    `;
-
-    return (
-      <output
-        ref={ref}
-        className={style}
-        data-testid={testId}
-        {...props}
+const Snackbar = ({
+  action = 'close',
+  actionDisabled = false,
+  closeButtonAriaLabel = 'Dismiss notification',
+  onClose,
+  onUndo,
+  children,
+  size = 'large',
+  testId = NAME,
+  className,
+  variant = 'default',
+  ref,
+  ...props
+}: SnackbarProps) => {
+  const [theme] = useTheme();
+  const IconComponent =
+    variant === 'error' ? Icon.AlertTriangle : Icon.CheckCircle;
+  const role = variant === 'error' ? 'alert' : 'status';
+  const iconSize = size === 'small' ? 20 : 32;
+  const padding = size === 'small' ? theme.padding.p16 : theme.padding.p24;
+  const textLevel = size === 'small' ? 'md' : 'lg-medium';
+  const minHeight = size === 'small' ? '56px' : theme.height.h80;
+
+  const baseStyles = css`
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    gap: ${theme.margin.m8};
+    box-sizing: border-box;
+    position: fixed;
+    width: 375px;
+    max-width: calc(100vw - ${theme.margin.m48});
+    min-height: ${minHeight};
+    z-index: 9999;
+    padding: ${padding};
+    color: ${theme.colour.text.inverse};
+    background-color: ${
+      variant === 'error'
+        ? theme.primitiveColour.red['10'].$value.hex
+        : theme.colour.bg.inversePrimary
+    };
+  `;
+
+  const style = cx(NAME, baseStyles, marginsStyle(props, theme), className);
+
+  const iconStyle = css`
+    min-width: ${iconSize}px;
+    min-height: ${iconSize}px;
+    flex-shrink: 0;
+  `;
+
+  const messageStyle = css`
+    flex: 1;
+    min-width: 0;
+    color: inherit;
+    overflow-wrap: anywhere;
+  `;
+
+  const actionButtonStyle = css`
+    margin-left: auto;
+    flex-shrink: 0;
+  `;
+
+  const closeButtonStyle = css`
+    &:hover {
+      color: ${theme.colour.icon.inverseHover};
+    }
+  `;
+
+  const undoButtonStyle = css`
+    padding: ${theme.padding.p4};
+    border: none;
+    background-color: transparent;
+    color: ${theme.colour.text.inverse};
+    cursor: pointer;
+
+    &:hover {
+      color: ${theme.colour.icon.inverseHover};
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: ${theme.boxShadow.focus};
+    }
+  `;
+
+  const undoButtonTextStyle = css`
+    color: inherit;
+  `;
+
+  return (
+    <div
+      ref={ref}
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      <IconComponent
+        aria-hidden='true'
+        className={iconStyle}
+        size={iconSize}
+      />
+
+      <Text
+        level={textLevel}
+        className={messageStyle}
+        role={role}
       >
-        <Icon.CheckCircle className={checkCircleIconStyle} />
-
-        <span>{children}</span>
-
-        <span className={actionButtonStyle}>
-          {action === 'close' && (
-            <IconButton
-              onClick={
-                onClose ??
-                (() =>
-                  console.warn(
-                    '<Snackbar> close action triggered but unassigned'
-                  ))
-              }
-              data-testid={`${testId}-close-button`}
-            >
-              <Icon.X size={24} />
-            </IconButton>
-          )}
-
-          {action === 'undo' && (
-            <button
-              onClick={
-                onUndo ??
-                (() =>
-                  console.warn(
-                    '<Snackbar> undo action triggered but unassigned'
-                  ))
-              }
-              className={undoButtonStyle}
-              data-testid={`${testId}-undo-button`}
+        {children}
+      </Text>
+
+      <span className={actionButtonStyle}>
+        {action === 'close' && (
+          <IconButton
+            aria-label={closeButtonAriaLabel}
+            onClick={
+              onClose ??
+              (() =>
+                console.warn(
+                  '<Snackbar> close action triggered but unassigned'
+                ))
+            }
+            data-testid={`${testId}-close-button`}
+            className={closeButtonStyle}
+            disabled={actionDisabled}
+          >
+            <Icon.X
+              aria-hidden='true'
+              size={24}
+            />
+          </IconButton>
+        )}
+
+        {action === 'undo' && (
+          <button
+            onClick={
+              onUndo ??
+              (() =>
+                console.warn('<Snackbar> undo action triggered but unassigned'))
+            }
+            className={undoButtonStyle}
+            data-testid={`${testId}-undo-button`}
+            disabled={actionDisabled}
+          >
+            <Text
+              level='lg-semibold'
+              className={undoButtonTextStyle}
             >
               UNDO
-            </button>
-          )}
-        </span>
-      </output>
-    );
-  }
-);
+            </Text>
+          </button>
+        )}
+      </span>
+    </div>
+  );
+};
 
 export default memo(Snackbar);