uikit-react-public 0.11.13

package/lib/components/Accordion/Accordion.stories.tsx.NOT_READY

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Accordion from './Accordion';
+import { ThemeContextProvider } from '../../theme/useTheme';
+
+const meta: Meta<typeof Accordion> = {
+  title: 'Components/Accordion',
+  component: Accordion,
+  decorators: [
+    (Story: React.FC) => (
+      <ThemeContextProvider>
+        <Story />
+      </ThemeContextProvider>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    isOpen: false,
+    disabled: false,
+    size: 'medium',
+  },
+  render: (args) => (
+    <Accordion {...args}>
+      <Accordion.Heading>Heading</Accordion.Heading>
+      <Accordion.Panel>Panel Content</Accordion.Panel>
+    </Accordion>
+  ),
+};
+
+export const OpenByDefault: Story = {
+  args: {
+    isOpen: true,
+    disabled: false,
+    size: 'medium',
+  },
+  render: (args) => (
+    <Accordion {...args}>
+      <Accordion.Heading>Heading</Accordion.Heading>
+      <Accordion.Panel>Panel Content</Accordion.Panel>
+    </Accordion>
+  ),
+};
+
+export const Disabled: Story = {
+  args: {
+    isOpen: false,
+    disabled: true,
+    size: 'medium',
+  },
+  render: (args) => (
+    <Accordion {...args}>
+      <Accordion.Heading>Heading</Accordion.Heading>
+      <Accordion.Panel>Panel Content</Accordion.Panel>
+    </Accordion>
+  ),
+};
+
+export const SmallSize: Story = {
+  args: {
+    isOpen: false,
+    disabled: false,
+    size: 'small',
+  },
+  render: (args) => (
+    <Accordion {...args}>
+      <Accordion.Heading>Heading</Accordion.Heading>
+      <Accordion.Panel>Panel Content</Accordion.Panel>
+    </Accordion>
+  ),
+};
+
+export const CustomHeadingElement: Story = {
+  args: {
+    isOpen: false,
+    disabled: false,
+    size: 'medium',
+  },
+  render: (args) => (
+    <Accordion {...args}>
+      <Accordion.Heading as='h2'>
+        Custom Heading as H2
+      </Accordion.Heading>
+      <Accordion.Panel>
+        <p>This is the content of the accordion.</p>
+      </Accordion.Panel>
+    </Accordion>
+  ),
+};

package/lib/components/Accordion/Accordion.tsx

@@ -0,0 +1,114 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  HTMLAttributes,
+} from 'react';
+import AccordionHeading from './Accordion.Heading';
+import AccordionPanel from './Accordion.Panel';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+
+export const NAME = 'ucl-accordion';
+
+interface AccordionContextProps {
+  isOpen: boolean;
+  toggleAccordion: () => void;
+  disabled: boolean;
+  size: 'small' | 'medium';
+}
+
+const AccordionContext = createContext<
+  AccordionContextProps | undefined
+>(undefined);
+
+export const useAccordionContext = () => {
+  const context = useContext(AccordionContext);
+  if (!context) {
+    throw new Error(
+      'useAccordionContext must be used within an AccordionProvider'
+    );
+  }
+  return context;
+};
+
+export interface AccordionProps
+  extends HTMLAttributes<HTMLDivElement> {
+  testId?: string;
+  size?: 'small' | 'medium';
+  disabled?: boolean;
+  isOpen?: boolean;
+}
+
+const Accordion: React.FC<AccordionProps> & {
+  Heading: typeof AccordionHeading;
+  Panel: typeof AccordionPanel;
+} = ({
+  size = 'medium',
+  disabled = false,
+  isOpen = false,
+  children,
+  className,
+  testId = NAME,
+}) => {
+  const [open, setOpen] = useState(isOpen);
+  const [theme] = useTheme();
+
+  const toggleAccordion = () => {
+    if (!disabled) {
+      setOpen((prev) => !prev);
+    }
+  };
+
+  const accordionStyle = cx(
+    NAME,
+    css`
+      max-width: 600px;
+      border: 1px solid ${theme.color.neutral.grey10};
+      background-color: ${theme.color.neutral.white};
+      font-family: ${theme.font.family.primary};
+      font-size: ${theme.font.size.f16};
+    `,
+    size === 'small' &&
+      css`
+        font-size: ${theme.font.size.f16};
+        line-height: ${theme.height.h24};
+      `,
+    size === 'medium' &&
+      css`
+        font-size: ${theme.font.size.f20};
+      `,
+    disabled &&
+      css`
+        pointer-events: none;
+        background-color: ${theme.color.link.disabled};
+        color: ${theme.color.text.muted};
+        // border-color: ${theme.color.text.muted};
+      `,
+    className
+  );
+
+  return (
+    <AccordionContext.Provider
+      value={{
+        isOpen: open,
+        toggleAccordion,
+        disabled,
+        size,
+      }}
+    >
+      <div
+        className={accordionStyle}
+        aria-disabled={disabled}
+        data-testid={testId}
+      >
+        {children}
+      </div>
+    </AccordionContext.Provider>
+  );
+};
+
+Accordion.Heading = AccordionHeading;
+Accordion.Panel = AccordionPanel;
+
+export default Accordion;

package/lib/components/Accordion/__tests__/Accordion.test.tsx

@@ -0,0 +1,64 @@
+import { describe, expect, test } from 'vitest';
+import {
+  render,
+  screen,
+  fireEvent,
+} from '@testing-library/react';
+import Accordion from '../Accordion';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+
+describe('Accordion', () => {
+  // Snapshot tests
+
+  test('snapshot: no props', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Accordion>
+          <Accordion.Heading>Heading</Accordion.Heading>
+          <Accordion.Panel>Panel Content</Accordion.Panel>
+        </Accordion>
+      </ThemeContextProvider>
+    );
+    expect(
+      renderResult.container.firstChild
+    ).toMatchSnapshot();
+  });
+
+  test('snapshot: testId prop', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Accordion testId='abc'>
+          <Accordion.Heading>Heading</Accordion.Heading>
+          <Accordion.Panel>Panel Content</Accordion.Panel>
+        </Accordion>
+      </ThemeContextProvider>
+    );
+    expect(
+      renderResult.container.firstChild
+    ).toMatchSnapshot();
+  });
+
+  // Interaction tests
+
+  test('should open and close the accordion', () => {
+    render(
+      <ThemeContextProvider>
+        <Accordion>
+          <Accordion.Heading>Heading</Accordion.Heading>
+          <Accordion.Panel>Panel Content</Accordion.Panel>
+        </Accordion>
+      </ThemeContextProvider>
+    );
+
+    const heading = screen.getByText('Heading');
+    expect(screen.queryByText('Panel Content')).toBeNull();
+
+    fireEvent.click(heading);
+    expect(
+      screen.getByText('Panel Content')
+    ).toBeInTheDocument();
+
+    fireEvent.click(heading);
+    expect(screen.queryByText('Panel Content')).toBeNull();
+  });
+});

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

@@ -0,0 +1,71 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Accordion > snapshot: no props 1`] = `
+<div
+  aria-disabled="false"
+  class="ucl-accordion css-1czwoas"
+  data-testid="ucl-accordion"
+>
+  <div
+    aria-expanded="false"
+    class="ucl-accordion__heading css-11x7r0n"
+    data-testid="ucl-accordion__heading"
+    role="button"
+    tabindex="0"
+  >
+    Heading
+    <svg
+      class="ucl-uikit-icon css-oi0ukk"
+      data-testid="ucl-uikit-icon"
+      fill="none"
+      height="32"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      viewBox="0 0 24 24"
+      width="32"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <polyline
+        points="6 9 12 15 18 9"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`Accordion > snapshot: testId prop 1`] = `
+<div
+  aria-disabled="false"
+  class="ucl-accordion css-1czwoas"
+  data-testid="abc"
+>
+  <div
+    aria-expanded="false"
+    class="ucl-accordion__heading css-11x7r0n"
+    data-testid="ucl-accordion__heading"
+    role="button"
+    tabindex="0"
+  >
+    Heading
+    <svg
+      class="ucl-uikit-icon css-oi0ukk"
+      data-testid="ucl-uikit-icon"
+      fill="none"
+      height="32"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      viewBox="0 0 24 24"
+      width="32"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <polyline
+        points="6 9 12 15 18 9"
+      />
+    </svg>
+  </div>
+</div>
+`;

package/lib/components/Accordion/__tests__/__snapshots__/IconButton.test.tsx.snap

@@ -0,0 +1,74 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`IconButton > snapshot: disabled prop 1`] = `
+<button
+  class="ucl-icon-button css-1mqrsm9"
+  data-testid="ucl-icon-button"
+  disabled=""
+>
+  <svg
+    class="ucl-icon css-1isldpa"
+    fill="none"
+    height="24"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="3"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <polyline
+      points="20 6 9 17 4 12"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButton > snapshot: no props 1`] = `
+<button
+  class="ucl-icon-button css-119433c"
+  data-testid="ucl-icon-button"
+>
+  <svg
+    class="ucl-icon css-1isldpa"
+    fill="none"
+    height="24"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="3"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <polyline
+      points="20 6 9 17 4 12"
+    />
+  </svg>
+</button>
+`;
+
+exports[`IconButton > snapshot: testId prop 1`] = `
+<button
+  class="ucl-icon-button css-119433c"
+  data-testid="abc"
+>
+  <svg
+    class="ucl-icon css-1isldpa"
+    fill="none"
+    height="24"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="3"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <polyline
+      points="20 6 9 17 4 12"
+    />
+  </svg>
+</button>
+`;

package/lib/components/Accordion/index.ts

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

package/lib/components/Alert/Alert.mdx

@@ -0,0 +1,43 @@
+import * as AlertStories from './Alert.stories';
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/blocks';
+
+<Meta of={AlertStories} />
+<Title />
+<Subtitle>
+  A styled message component for displaying alerts of different types: info,
+  success, warning, or error.
+</Subtitle>
+
+The `<Alert>` component is used to convey contextual messages with visual hierarchy and appropriate semantics. It includes default styling and icons, and supports margin props via the Design System.
+
+## Usage
+
+Use the component with `Alert.Title` and `Alert.Message` as children to maintain semantic separation of content.
+
+## Variants
+
+### Info
+
+<Canvas of={AlertStories.Info} />
+
+### Success
+
+<Canvas of={AlertStories.Success} />
+
+### Warning
+
+<Canvas of={AlertStories.Warning} />
+
+### Error
+
+<Canvas of={AlertStories.Error} />
+
+## Margins
+
+You can pass common margin props (`m`, `mv`, `mt`, etc.) to control spacing.
+
+<Canvas of={AlertStories.CommonMargins} />
+
+## Props
+
+<Controls />

package/lib/components/Alert/Alert.stories.tsx

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Alert from './Alert';
+import { theme } from '../../theme';
+
+const marginKeys = Object.keys(theme.margin) as Array<
+  keyof typeof theme.margin
+>;
+const marginKeysAsString = marginKeys
+  .map((key) => `'${key.replace('m', '')}'`)
+  .join(', ');
+
+const commonMarginPropsInfo = {
+  table: {
+    type: {
+      summary: 'string',
+      detail: marginKeysAsString,
+    },
+    defaultValue: { summary: 'undefined' },
+    disable: true,
+  },
+};
+
+const meta = {
+  title: 'Components/Ready to use/Alert',
+  component: Alert,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    type: {
+      options: ['info', 'success', 'warning', 'error'],
+      control: { type: 'select' },
+      type: 'string',
+    },
+    className: { control: { type: 'text' } },
+    testId: { control: { type: 'text' } },
+    children: { control: false },
+    m: commonMarginPropsInfo,
+    mv: commonMarginPropsInfo,
+    mh: commonMarginPropsInfo,
+    mt: commonMarginPropsInfo,
+    mb: commonMarginPropsInfo,
+    ml: commonMarginPropsInfo,
+    mr: commonMarginPropsInfo,
+    noMargins: {
+      control: { type: 'boolean' },
+      type: 'boolean',
+      default: false,
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        disable: true,
+      },
+    },
+  },
+  args: {
+    type: 'info',
+    testId: 'ucl-uikit-alert',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Alert>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const Template = (args: any) => (
+  <Alert {...args}>
+    <Alert.Title>Title of {args.type} alert</Alert.Title>
+    <Alert.Message>This is a {args.type} alert message.</Alert.Message>
+  </Alert>
+);
+
+export const Info: Story = {
+  render: Template,
+  args: {
+    type: 'info',
+  },
+};
+
+export const Success: Story = {
+  render: Template,
+  args: {
+    type: 'success',
+  },
+};
+
+export const Warning: Story = {
+  render: Template,
+  args: {
+    type: 'warning',
+  },
+};
+
+export const Error: Story = {
+  render: Template,
+  args: {
+    type: 'error',
+  },
+};
+
+export const CommonMargins: Story = {
+  render: Template,
+  name: 'With common margins',
+  args: {
+    type: 'info',
+    m: '24',
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+};

package/lib/components/Alert/Alert.tsx

@@ -0,0 +1,137 @@
+import { createContext, useContext, HTMLAttributes } from 'react';
+import { css, cx } from '@emotion/css';
+import Icon from '../Icon';
+import AlertMessage from './AlertMessage';
+import AlertTitle from './AlertTitle';
+import marginsStyle, { MarginProps } from '../common/marginsStyle';
+import { useTheme } from '../../theme';
+
+export const NAME = 'ucl-uikit-alert';
+
+export type AlertType = 'info' | 'success' | 'warning' | 'error';
+
+export interface AlertContextProps {
+  type: AlertType;
+}
+
+export const AlertContext = createContext<AlertContextProps | null>(null);
+
+export function useAlertContext() {
+  const context = useContext(AlertContext);
+  if (!context) {
+    throw new Error('useAlertContext must be used within an Alert');
+  }
+  return context;
+}
+
+export interface AlertBaseProps extends HTMLAttributes<HTMLDivElement> {
+  type: AlertType;
+  testId?: string;
+}
+
+export type AlertProps = AlertBaseProps & MarginProps;
+
+const Alert = ({
+  type,
+  children,
+  testId = NAME,
+  className,
+  ...props
+}: AlertProps) => {
+  const [theme] = useTheme();
+
+  const { padding } = theme;
+
+  const baseStyles = css`
+    display: flex;
+    font-family: ${theme.font.family.primary};
+    align-items: flex-start;
+    gap: ${theme.margin.m8};
+    padding: ${padding.p16} ${padding.p12} ${padding.p16} ${padding.p8};
+    border-left-width: 4px;
+    border-left-style: solid;
+  `;
+
+  const infoStyle = css`
+    background-color: ${theme.color.interaction.blue10};
+    border-color: ${theme.color.interaction.blue70};
+  `;
+
+  const successStyle = css`
+    background-color: ${theme.color.system.green10};
+    border-color: ${theme.color.system.green70};
+  `;
+
+  const warningStyle = css`
+    background-color: ${theme.color.system.orange10};
+    border-color: ${theme.color.system.orange70};
+  `;
+
+  const errorStyle = css`
+    background-color: ${theme.color.system.red10};
+    border-color: ${theme.color.system.red70};
+  `;
+
+  const style = cx(
+    NAME,
+    baseStyles,
+    marginsStyle(props, theme),
+    type === 'info' && infoStyle,
+    type === 'success' && successStyle,
+    type === 'warning' && warningStyle,
+    type === 'error' && errorStyle,
+    className
+  );
+
+  const iconStyle = cx(
+    type === 'info' &&
+      css`
+        color: ${theme.color.interaction.blue70};
+      `,
+    type === 'success' &&
+      css`
+        color: ${theme.color.system.green70};
+      `,
+    type === 'warning' &&
+      css`
+        color: ${theme.color.system.orange70};
+      `,
+    type === 'error' &&
+      css`
+        color: ${theme.color.system.red70};
+      `
+  );
+
+  const IconComp = {
+    info: Icon.Info,
+    success: Icon.CheckCircle,
+    warning: Icon.AlertTriangle,
+    error: Icon.XCircle,
+  }[type];
+
+  return (
+    <AlertContext.Provider value={{ type }}>
+      <div
+        className={style}
+        data-testid={testId}
+        role='alert'
+        {...props}
+      >
+        <IconComp className={iconStyle} />
+        <div>{children}</div>
+      </div>
+    </AlertContext.Provider>
+  );
+};
+
+export interface IAlertSubComponents {
+  Title: typeof AlertTitle;
+  Message: typeof AlertMessage;
+}
+
+const AlertWithSubComponents = Alert as typeof Alert & IAlertSubComponents;
+
+Alert.Title = AlertTitle;
+Alert.Message = AlertMessage;
+
+export default AlertWithSubComponents;