@hyphen/hyphen-components 6.1.1 → 6.2.0

package/dist/lib/tokens.d.ts

@@ -1,5 +1,5 @@
 import { BorderRadiusSize, Breakpoint, BreakpointSizeWithBase } from '../types';
-export declare const ICON_NAMES: ("add" | "alarm-disable" | "alarm" | "analytics" | "app-window" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrows-maximize" | "at" | "ban" | "block" | "blocks" | "book-open" | "c-add" | "c-check" | "c-delete" | "c-in-progress" | "c-info" | "c-question" | "c-remove" | "c-user" | "c-warning" | "calendar-create" | "calendar" | "camera" | "caret-down" | "caret-left" | "caret-right" | "caret-sm-down" | "caret-sm-left" | "caret-sm-right" | "caret-sm-up" | "caret-up-down" | "caret-up" | "chart-bar" | "chart-line" | "chat" | "check" | "checkbox-btn-checked" | "checkbox-btn-indeterminate" | "checkbox-btn" | "circle-filled" | "circle" | "clipboard" | "cloud" | "code" | "command-line" | "computer" | "contact" | "copy-document" | "dashboard" | "database" | "dock-left" | "document" | "dots" | "download" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "filter" | "flag" | "folder" | "gear" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "info" | "integrations" | "key" | "launch-app" | "lightbulb" | "link" | "list" | "lock" | "logo-deploy" | "logo-env" | "logo-link" | "logo-netinfo" | "logo-toggle" | "logout" | "mail" | "memory" | "menu" | "minus" | "moon" | "paperclip" | "path-intersect" | "pause" | "pc" | "pencil" | "phone" | "photo" | "play" | "qr-code" | "radio-btn-checked" | "radio-btn-unchecked" | "refresh" | "remove" | "rewind" | "search" | "send" | "settings" | "skip" | "ssd" | "stack" | "star-o" | "star" | "stopwatch" | "subtract" | "sun" | "t-warning" | "tag" | "terminal" | "time-alarm" | "time-clock" | "trash" | "unlocked" | "upload" | "user-create" | "user" | "users" | "wifi-off" | "wifi" | "zoom-in" | "zoom-out")[];
+export declare const ICON_NAMES: ("add" | "alarm-disable" | "alarm" | "analytics" | "app-window" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrows-maximize" | "at" | "ban" | "block" | "blocks" | "book-open" | "c-add" | "c-check" | "c-delete" | "c-in-progress" | "c-info" | "c-question" | "c-remove" | "c-user" | "c-warning" | "calendar-create" | "calendar" | "camera" | "caret-down" | "caret-left" | "caret-right" | "caret-sm-down" | "caret-sm-left" | "caret-sm-right" | "caret-sm-up" | "caret-up-down" | "caret-up" | "chart-bar" | "chart-line" | "chat" | "check" | "checkbox-btn-checked" | "checkbox-btn-indeterminate" | "checkbox-btn" | "circle-filled" | "circle" | "clipboard" | "cloud" | "code" | "command-line" | "computer" | "contact" | "copy-document" | "cpu" | "dashboard" | "database" | "dock-left" | "document" | "dots" | "download" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "filter" | "flag" | "folder" | "gear" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "info" | "integrations" | "key" | "launch-app" | "lightbulb" | "link" | "list" | "lock" | "logo-deploy" | "logo-env" | "logo-github" | "logo-link" | "logo-netinfo" | "logo-toggle" | "logout" | "mail" | "memory" | "menu" | "microphone" | "minus" | "moon" | "paperclip" | "path-intersect" | "pause" | "pc" | "pencil" | "phone" | "photo" | "play" | "qr-code" | "radio-btn-checked" | "radio-btn-unchecked" | "refresh" | "remove" | "rewind" | "search" | "send" | "settings" | "skip" | "ssd" | "stack" | "star-o" | "star" | "stopwatch" | "subtract" | "sun" | "t-warning" | "tag" | "terminal" | "time-alarm" | "time-clock" | "trash" | "unlocked" | "upload" | "user-create" | "user" | "users" | "wifi-off" | "wifi" | "zoom-in" | "zoom-out")[];
 export declare const BORDER_RADIUS_OPTIONS: BorderRadiusSize[];
 export declare const BORDER_SIZE_OPTIONS: ("0" | "sm" | "md" | "lg")[];
 export declare const BREAKPOINT_OPTIONS: BreakpointSizeWithBase[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "6.1.1",
+  "version": "6.2.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -62,7 +62,7 @@
   ],
   "dependencies": {
     "@emotion/react": "^11.14.0",
-    "@hyphen/hyphen-design-tokens": "^5.1.0",
+    "@hyphen/hyphen-design-tokens": "^5.2.0",
     "@radix-ui/react-aspect-ratio": "^1.1.7",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dropdown-menu": "^2.1.16",

package/src/components/AspectRatio/AspectRatio.test.tsx

@@ -0,0 +1,18 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { AspectRatio } from './AspectRatio';
+
+describe('AspectRatio', () => {
+  test('renders children within the aspect ratio box', () => {
+    const { container } = render(
+      <AspectRatio ratio={16 / 9}>
+        <div data-testid="child" />
+      </AspectRatio>
+    );
+
+    const wrapper = container.firstChild as HTMLElement;
+    expect(wrapper).toBeInTheDocument();
+    expect(wrapper.querySelector('[data-testid="child"]')).toBeInTheDocument();
+    expect(wrapper.style.position).toBe('relative');
+  });
+});

package/src/components/Collapsible/Collapsible.test.tsx

@@ -0,0 +1,22 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from './Collapsible';
+
+describe('Collapsible', () => {
+  test('toggles content visibility when trigger is clicked', async () => {
+    render(
+      <Collapsible>
+        <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+        <CollapsibleContent>Hidden content</CollapsibleContent>
+      </Collapsible>
+    );
+
+    expect(screen.queryByText('Hidden content')).not.toBeInTheDocument();
+    fireEvent.click(screen.getByText('Toggle'));
+    expect(await screen.findByText('Hidden content')).toBeInTheDocument();
+  });
+});

package/src/components/DropdownMenu/DropdownMenu.test.tsx

@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from './DropdownMenu';
+
+describe('DropdownMenu', () => {
+  test('renders item when menu is open', () => {
+    render(
+      <DropdownMenu open>
+        <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Item</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+
+    expect(screen.getByText('Item')).toBeInTheDocument();
+  });
+});

package/src/components/FormControl/FormControl.test.tsx

@@ -0,0 +1,26 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { FormControl } from './FormControl';
+
+describe('FormControl', () => {
+  test('renders label and error message', () => {
+    render(
+      <FormControl id="input" label="Label" error="Error">
+        <input id="input" />
+      </FormControl>
+    );
+
+    expect(screen.getByText('Label')).toBeInTheDocument();
+    expect(screen.getByText('Error')).toBeInTheDocument();
+  });
+
+  test('hides label when hideLabel is true', () => {
+    render(
+      <FormControl id="input" label="Label" hideLabel>
+        <input id="input" />
+      </FormControl>
+    );
+
+    expect(screen.queryByText('Label')).not.toBeInTheDocument();
+  });
+});

package/src/components/HelpText/HelpText.test.tsx

@@ -0,0 +1,12 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { HelpText } from './HelpText';
+
+describe('HelpText', () => {
+  test('renders children with correct class', () => {
+    render(<HelpText>Helpful</HelpText>);
+    const text = screen.getByText('Helpful');
+    expect(text).toBeInTheDocument();
+    expect(text).toHaveClass('help-text');
+  });
+});

package/src/components/InputValidationMessage/InputValidationMessage.test.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { InputValidationMessage } from './InputValidationMessage';
+
+describe('InputValidationMessage', () => {
+  test('renders message with default size', () => {
+    render(<InputValidationMessage>Oops</InputValidationMessage>);
+    const msg = screen.getByText('Oops');
+    expect(msg).toBeInTheDocument();
+    expect(msg).toHaveClass('font-size-sm');
+  });
+
+  test('supports different sizes', () => {
+    render(<InputValidationMessage size="md">Big</InputValidationMessage>);
+    const msg = screen.getByText('Big');
+    expect(msg).toHaveClass('font-size-md');
+  });
+});

package/src/components/Sidebar/Sidebar.test.tsx

@@ -0,0 +1,26 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import { Sidebar, SidebarProvider, SidebarTrigger } from './Sidebar';
+
+jest.mock('../../hooks/useIsMobile/useIsMobile', () => ({
+  useIsMobile: () => false,
+}));
+
+describe('Sidebar', () => {
+  test('toggles open state with trigger', () => {
+    render(
+      <SidebarProvider>
+        <Sidebar data-testid="sidebar">
+          <div>Content</div>
+        </Sidebar>
+        <SidebarTrigger />
+      </SidebarProvider>
+    );
+
+    const sidebar = document.querySelector('[data-state]') as HTMLElement;
+    expect(sidebar).toHaveAttribute('data-state', 'expanded');
+
+    fireEvent.click(screen.getByLabelText('toggle sidebar'));
+    expect(sidebar).toHaveAttribute('data-state', 'collapsed');
+  });
+});

package/src/components/Sidebar/Sidebar.tsx

@@ -99,7 +99,7 @@ const SidebarProvider = forwardRef<
           localStorage.setItem(storageKey, `${newOpenState}`);
         }
       },
-      [setOpenProp, open]
+      [setOpenProp, open, storageKey]
     );
 
     // Toggle sidebar based on screen type

package/src/components/ThemeProvider/ThemeProvider.test.tsx

@@ -0,0 +1,49 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { ThemeProvider, ThemeProviderContext } from './ThemeProvider';
+
+beforeAll(() => {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation(() => ({
+      matches: false,
+      media: '',
+      onchange: null,
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+});
+
+describe('ThemeProvider', () => {
+  test('applies default theme to document element', () => {
+    render(
+      <ThemeProvider defaultTheme="light">
+        <div />
+      </ThemeProvider>
+    );
+    expect(document.documentElement.classList.contains('light')).toBe(true);
+  });
+
+  test('setTheme updates class and localStorage', () => {
+    const Consumer = () => {
+      const { setTheme } = React.useContext(ThemeProviderContext);
+      React.useEffect(() => {
+        setTheme('dark');
+      }, [setTheme]);
+      return null;
+    };
+
+    render(
+      <ThemeProvider defaultTheme="light">
+        <Consumer />
+      </ThemeProvider>
+    );
+
+    expect(document.documentElement.classList.contains('dark')).toBe(true);
+    expect(localStorage.getItem('hyphen-ui-theme')).toBe('dark');
+  });
+});

package/src/components/Toggle/Toggle.test.tsx

@@ -0,0 +1,13 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import { Toggle } from './Toggle';
+
+describe('Toggle', () => {
+  test('changes state when clicked', () => {
+    render(<Toggle>Bold</Toggle>);
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('data-state', 'off');
+    fireEvent.click(button);
+    expect(button).toHaveAttribute('data-state', 'on');
+  });
+});

package/src/components/ToggleGroup/ToggleGroup.test.tsx

@@ -0,0 +1,19 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import { ToggleGroup, ToggleGroupItem } from './ToggleGroup';
+
+describe('ToggleGroup', () => {
+  test('handles selection and displays error message', () => {
+    render(
+      <ToggleGroup type="single" variant="outline" error="Error">
+        <ToggleGroupItem value="a">A</ToggleGroupItem>
+      </ToggleGroup>
+    );
+
+    const item = screen.getByText('A');
+    expect(item).toHaveClass('outline');
+    fireEvent.click(item);
+    expect(item).toHaveAttribute('data-state', 'on');
+    expect(screen.getByText('Error')).toBeInTheDocument();
+  });
+});

package/src/components/Tooltip/Tooltip.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+} from './Tooltip';
+
+describe('Tooltip', () => {
+  test('renders content when open', () => {
+    render(
+      <TooltipProvider>
+        <Tooltip open>
+          <TooltipTrigger>Hover me</TooltipTrigger>
+          <TooltipContent>Tip content</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+
+    const contents = screen.getAllByText('Tip content');
+    expect(contents.length).toBeGreaterThan(0);
+  });
+});