@hyphen/hyphen-components 2.23.0 → 2.24.0

package/dist/lib/tokens.d.ts

@@ -14,7 +14,7 @@ export declare const FONT_FAMILY_OPTIONS: ("monospace" | "body" | "brand")[];
 export declare const FONT_WEIGHT_OPTIONS: ("light" | "normal" | "medium" | "semibold" | "bold")[];
 export declare const HEADING_SIZE_OPTIONS: ("sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl")[];
 export declare const HEIGHT_OPTIONS: ("0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "2xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | "10" | "15" | "20" | "25" | "30" | "33" | "34" | "40" | "50" | "60" | "70" | "75" | "80" | "90" | "100")[];
-export declare const LINE_HEIGHT_OPTIONS: ("base" | "input" | "heading" | "text")[];
+export declare const LINE_HEIGHT_OPTIONS: ("base" | "none" | "input" | "heading" | "text")[];
 export declare const SPACING_OPTIONS: ("0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "2xs" | "4xl" | "5xl" | "auto")[];
 export declare const WIDTH_OPTIONS: ("0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "2xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | "10" | "15" | "20" | "25" | "30" | "33" | "34" | "40" | "50" | "60" | "70" | "75" | "80" | "90" | "100")[];
 export declare const Z_INDEX_OPTIONS: ("0" | "modal" | "popover" | "overlay" | "drawer" | "sticky")[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "2.23.0",
+  "version": "2.24.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -122,9 +122,10 @@
     "@rollup/rollup-linux-x64-gnu": "^4.21.2"
   },
   "dependencies": {
-    "@hyphen/hyphen-design-tokens": "^4.17.0",
+    "@hyphen/hyphen-design-tokens": "^4.18.0",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-collapsible": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@types/react-modal": "^3.16.3",
     "classnames": "^2.5.1",
     "date-fns": "^2.16.1",

package/src/components/Collapsible/Collapsible.mdx

@@ -16,6 +16,6 @@ This component is extended from [Radix](https://www.radix-ui.com/primitives/docs
 
 ## Controlled
 
-The `isOpen` prop can be used to control the state of the collapsible component.
+The `open` prop can be used to control the state of the collapsible component.
 
 <Canvas of={Stories.Controlled} />

package/src/components/Collapsible/Collapsible.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 
 const Collapsible = CollapsiblePrimitive.Root;

package/src/components/DropdownMenu/DropdownMenu.mdx

@@ -0,0 +1,21 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import { DropdownMenu } from './DropdownMenu';
+import * as Stories from './DropdownMenu.stories';
+
+<Meta of={Stories} />
+
+# DropdownMenu
+
+DropdownMenu components are used to hide or show content based on user interaction. 
+
+This component is extended from [Radix](https://www.radix-ui.com/primitives/docs/components/dropdown-menu).
+
+[API Reference](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#api-reference)
+
+<Canvas of={Stories.Uncontrolled} />
+
+## Controlled
+
+The `open` prop can be used to control the state of the DropdownMenu component.
+
+<Canvas of={Stories.Controlled} />

package/src/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '../Button/Button';
+import { userEvent, within, expect } from '@storybook/test';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuPortal,
+} from './DropdownMenu';
+import { DropdownMenuShortcut } from './DropdownMenu';
+
+const meta: Meta<typeof DropdownMenu> = {
+  title: 'Components/DropdownMenu',
+  component: DropdownMenu,
+};
+
+export default meta;
+type Story = StoryObj<typeof DropdownMenu>;
+
+export const Uncontrolled = () => (
+  <DropdownMenu>
+    <DropdownMenuTrigger asChild>
+      <Button variant="secondary">Open</Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent
+      className="w-9xl"
+      align="start"
+      side="bottom"
+      sideOffset={4}
+    >
+      <DropdownMenuLabel>My Account</DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      <DropdownMenuGroup>
+        <DropdownMenuItem>
+          <span>Profile</span>
+          <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <span>Billing</span>
+          <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <span>Settings</span>
+          <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <span>Keyboard shortcuts</span>
+          <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+      <DropdownMenuSeparator />
+      <DropdownMenuGroup>
+        <DropdownMenuItem>
+          <span>Team</span>
+        </DropdownMenuItem>
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>
+            <span>Invite users</span>
+          </DropdownMenuSubTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem>
+                <span>Email</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <span>Message</span>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>
+                <span>More...</span>
+              </DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuPortal>
+        </DropdownMenuSub>
+        <DropdownMenuItem>
+          <span>New Team</span>
+          <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem>
+        <span>Support</span>
+      </DropdownMenuItem>
+      <DropdownMenuItem disabled>
+        <span>API</span>
+      </DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem>
+        <span>Log out</span>
+        <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+);
+
+export const Controlled = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <div>
+      <p>{`Dropdown is ${isOpen ? 'open' : 'closed'}`}</p>
+      <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button variant="secondary">Dropdown</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          className="w-9xl"
+          align="start"
+          side="bottom"
+          sideOffset={4}
+        >
+          <DropdownMenuItem>
+            <span>Profile</span>
+            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <span>Billing</span>
+            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <span>Settings</span>
+            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <span>Keyboard shortcuts</span>
+            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+};
+
+export const ClickOpenDropdown: Story = {
+  play: async ({ canvasElement, mount }) => {
+    await mount(<Controlled />);
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('Dropdown is closed')).toBeInTheDocument();
+    await userEvent.click(canvas.getByText('Dropdown'));
+    await expect(canvas.getByText('Dropdown is open')).toBeInTheDocument();
+  },
+};

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -0,0 +1,164 @@
+import React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+import classNames from 'classnames';
+import { Icon } from '../Icon/Icon';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={classNames(
+      'font-size-sm position-relative cursor-default display-flex br-sm align-items-center p-sm g-sm  outline-none hover:background-color-secondary focus:background-color-secondary',
+      inset && 'p-left-md',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={classNames(
+        'z-index-popover p-xs minw-7xl overflow-hidden br-sm bw-sm border-color-subtle background-color-primary font-color-base shadow-md',
+        className
+      )}
+      style={{
+        width: 'var(--radix-dropdown-menu-trigger-width)',
+      }}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={classNames(
+      'display-flex align-items-center br-sm p-h-sm p-v-xs font-color-secondary font-size-xs font-weight-medium outline-none',
+      inset && 'p-left-md',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={classNames(
+      'h-2xs m-v-xs bw-top-sm border-color-subtle',
+      className
+    )}
+    style={{
+      marginLeft: 'calc(var(--size-spacing-md)*-1)',
+      marginRight: 'calc(var(--size-spacing-md)*-1)',
+    }}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={classNames(
+        'm-left-auto font-size-xs font-color-tertiary',
+        className
+      )}
+      style={{ letterSpacing: '0.5px' }}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={classNames(
+      'display-flex cursor-default gap-xl align-items-center br-sm p-sm g-sm font-size-sm outline-none focus:background-color-secondary',
+      inset && 'p-left-md',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <Icon name="caret-sm-right" className="m-left-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={classNames(
+      'z-index-popover minw-7xl overflow-hidden br-sm border-color-subtle bw-sm background-color-primary p-xs font-color-primary shadow-lg',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuRadioGroup,
+};

package/src/styles/utilities.scss

@@ -7,3 +7,7 @@
 @import './text-align';
 @import './white-space';
 @import './position';
+
+.outline-none {
+    outline: none;
+}