@hyphen/hyphen-components 7.7.0 → 7.8.1

package/src/components/Sidebar/Sidebar.tsx

@@ -243,9 +243,26 @@ function useSidebar(sideOverride?: SidebarSide) {
 const SidebarProvider = forwardRef<
   HTMLDivElement,
   React.ComponentProps<'div'> & {
+    /**
+     * Initial open state for uncontrolled usage. Pass a boolean for both
+     * sides, or `{ left, right }` to set each side independently.
+     */
     defaultOpen?: SidebarOpenValue;
+    /**
+     * Controlled open state. Pass a boolean for both sides, or
+     * `{ left, right }` to control each side independently.
+     */
     open?: SidebarOpenValue;
+    /**
+     * localStorage key(s) the open state is written to when a sidebar is
+     * toggled. A string applies to the left sidebar, with `_right` appended
+     * for the right sidebar; pass `{ left, right }` to set each explicitly.
+     */
     storageKey?: SidebarStorageKey;
+    /**
+     * Called when a sidebar is toggled, with the new open state and which
+     * side was toggled.
+     */
     onOpenChange?: (open: boolean, side?: SidebarSide) => void;
   }
 >(
@@ -368,7 +385,15 @@ SidebarProvider.displayName = 'SidebarProvider';
 const Sidebar = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<'div'> & {
+    /**
+     * Which edge of the viewport the sidebar is attached to.
+     */
     side?: 'left' | 'right';
+    /**
+     * Collapse behavior when the sidebar is toggled closed: slide fully out
+     * of view (`offcanvas`), collapse to a narrow icon strip (`icon`), or
+     * stay at full width (`none`).
+     */
     collapsible?: 'offcanvas' | 'icon' | 'none';
   }
 >(
@@ -498,7 +523,14 @@ Sidebar.displayName = 'Sidebar';
 const SidebarTrigger = React.forwardRef<
   React.ElementRef<typeof Button>,
   React.ComponentProps<typeof Button> & {
+    /**
+     * Which sidebar to toggle. Defaults to the side of the containing
+     * Sidebar, or `left` outside of one.
+     */
     side?: SidebarSide;
+    /**
+     * Icon shown on the trigger button.
+     */
     iconName?: IconName;
   }
 >(({ className, onClick, side, iconName = 'dock-left', ...props }, ref) => {
@@ -642,8 +674,18 @@ SidebarMenuItem.displayName = 'SidebarMenuItem';
 const SidebarMenuButton = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<'button'> & {
+    /**
+     * Render the child element (e.g. a router link) instead of a `button`.
+     */
     asChild?: boolean;
+    /**
+     * Marks the item as the current page.
+     */
     isActive?: boolean;
+    /**
+     * Tooltip shown when the sidebar is collapsed to icons (desktop only).
+     * Pass a string, or TooltipContent props for full control.
+     */
     tooltip?: string | React.ComponentProps<typeof TooltipContent>;
   }
 >(

package/src/docs/Brands.mdx

@@ -1,17 +1,19 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 
-import HyphenLogoHorizontalRgbPositive from '@hyphen/hyphen-design-tokens/build/assets/images/react/HyphenLogoHorizontalRgbPositive';
-import HyphenLogoHorizontalRgbNegative from '@hyphen/hyphen-design-tokens/build/assets/images/react/HyphenLogoHorizontalRgbNegative';
-import HyphenLogoHorizontalBlack from '@hyphen/hyphen-design-tokens/build/assets/images/react/HyphenLogoHorizontalBlack';
-import HyphenLogoHorizontalWhite from '@hyphen/hyphen-design-tokens/build/assets/images/react/HyphenLogoHorizontalWhite';
-import EnvLogoRgbPositive from '@hyphen/hyphen-design-tokens/build/assets/images/react/EnvLogoRgbPositive';
-import EnvLogoRgbNegative from '@hyphen/hyphen-design-tokens/build/assets/images/react/EnvLogoRgbNegative';
-import LinkLogoRgbPositive from '@hyphen/hyphen-design-tokens/build/assets/images/react/LinkLogoRgbPositive';
-import LinkLogoRgbNegative from '@hyphen/hyphen-design-tokens/build/assets/images/react/LinkLogoRgbNegative';
-import ToggleLogoHorizontalRgbPositive from '@hyphen/hyphen-design-tokens/build/assets/images/react/ToggleLogoHorizontalRgbPositive';
-import ToggleLogoHorizontalRgbNegative from '@hyphen/hyphen-design-tokens/build/assets/images/react/ToggleLogoHorizontalRgbNegative';
-import DeployLogoHorizontalPositive from '@hyphen/hyphen-design-tokens/build/assets/images/react/DeployLogoHorizontalPositive';
-import DeployLogoHorizontalNegative from '@hyphen/hyphen-design-tokens/build/assets/images/react/DeployLogoHorizontalNegative';
+import logos from '@hyphen/hyphen-design-tokens/build/assets/images/react';
+
+export const HyphenLogoHorizontalRgbPositive = logos['hyphen-logo-horizontal-rgb-positive'];
+export const HyphenLogoHorizontalRgbNegative = logos['hyphen-logo-horizontal-rgb-negative'];
+export const HyphenLogoHorizontalBlack = logos['hyphen-logo-horizontal-black'];
+export const HyphenLogoHorizontalWhite = logos['hyphen-logo-horizontal-white'];
+export const EnvLogoRgbPositive = logos['env-logo-rgb-positive'];
+export const EnvLogoRgbNegative = logos['env-logo-rgb-negative'];
+export const LinkLogoRgbPositive = logos['link-logo-rgb-positive'];
+export const LinkLogoRgbNegative = logos['link-logo-rgb-negative'];
+export const ToggleLogoHorizontalRgbPositive = logos['toggle-logo-horizontal-rgb-positive'];
+export const ToggleLogoHorizontalRgbNegative = logos['toggle-logo-horizontal-rgb-negative'];
+export const DeployLogoHorizontalPositive = logos['deploy-logo-horizontal-positive'];
+export const DeployLogoHorizontalNegative = logos['deploy-logo-horizontal-negative'];
 
 
 import { Box } from '../components/Box/Box';

package/src/docs/DesignTokens.mdx

@@ -13,7 +13,7 @@ We use [Style Dictionary](https://amzn.github.io/style-dictionary/) to generate
 
 ## Source on Github
 
-[Hyphen Design Tokens](https://github.com/hyphen/hyphen-design-tokens) are available as an [npm package](https://www.npmjs.com/package/@hyphen/hyphen-design-tokens) so that you can create a Hyphen unified product experience for your platform of choice.
+[Hyphen Design Tokens](https://github.com/Hyphen/hyphen-components/tree/main/packages/design-tokens) are available as an [npm package](https://www.npmjs.com/package/@hyphen/hyphen-design-tokens) so that you can create a Hyphen unified product experience for your platform of choice.
 
 ## Border Radius
 

package/src/docs/intro.mdx

@@ -7,6 +7,6 @@ import { Meta } from '@storybook/addon-docs/blocks';
 Welcome to the Hyphen Design System, whose purpose is to help us deliver high quality Hyphen branded applications, faster and better. It consists of the following:
 
 - [Hyphen Components](https://github.com/hyphen/hyphen-components) - an open source, react-based, component library for Hyphen applications and websites.
-- [Hyphen Design Tokens](https://github.com/hyphen/hyphen-design-tokens) - A central location to store shared attributes of the Hyphen Design System. These include things like color, fonts, spacing, and more.
+- [Hyphen Design Tokens](https://github.com/Hyphen/hyphen-components/tree/main/packages/design-tokens) - A central location to store shared attributes of the Hyphen Design System. These include things like color, fonts, spacing, and more.
 
 ❤️ The Hyphen Team