@tcn/ui 0.3.3 → 0.4.0

package/src/actions/__docs__/actions.stories.tsx

@@ -3,12 +3,14 @@ import { HStack } from '../../stacks/h_stack.js';
 import { VStack } from '../../stacks/v_stack.js';
 import { Spacer } from '../../stacks/spacer.js';
 import { Button } from '../button/button/button.js';
-import { SlimButton } from '../button/slim_button/slim_button.js';
 import { ButtonGroup } from '../button/button_group/button_group.js';
 import { SearchIcon } from '@tcn/icons/search_icon.js';
 import { PlusIcon } from '@tcn/icons/plus_icon.js';
 import { CrossIcon } from '@tcn/icons/cross_icon.js';
 import type { ActionSeverity } from '../types.js';
+import { BodyText } from '../../typography/index.js';
+import { Toggle, type ToggleProps } from '../toggle/toggle.js';
+import { useState } from 'react';
 
 /**
  * These stories are used exclusively by the MDX documentation.
@@ -34,33 +36,6 @@ type Story = StoryObj<typeof Button>;
 // Utility Code
 // ============================================================================
 
-const tcnBrandedColors = [
-  {
-    name: 'Integrated Infrastructure',
-    action: '27, 15%, 43%',
-  },
-  {
-    name: 'Omnichannel Communications',
-    action: '197, 34%, 40%',
-  },
-  {
-    name: 'Workforce Engagement',
-    action: '23, 65%, 42%',
-  },
-  {
-    name: 'Integration and Automation',
-    action: '139, 21%, 39%',
-  },
-  {
-    name: 'Compliance and Data Management',
-    action: '49, 50%, 34%',
-  },
-  {
-    name: 'Intelligence, Reporting, and Analytics',
-    action: '214, 14%, 45%',
-  },
-];
-
 const severityOptions: { name: string; severity: ActionSeverity }[] = [
   {
     name: 'Dangerous',
@@ -85,10 +60,10 @@ const severityOptions: { name: string; severity: ActionSeverity }[] = [
 ];
 
 // ============================================================================
-// BASELINE
+// BUTTON EXAMPLES
 // ============================================================================
 
-export const ButtonBaselineShowcase: Story = {
+export const ButtonBaseline: Story = {
   render: () => (
     <HStack gap="12px" vAlign="center">
       <Button>Baseline</Button>
@@ -96,11 +71,7 @@ export const ButtonBaselineShowcase: Story = {
   ),
 };
 
-// ============================================================================
-// HIERARCHY EXAMPLES
-// ============================================================================
-
-export const HierarchyShowcase: Story = {
+export const ButtonHierarchy: Story = {
   render: () => (
     <HStack gap="12px" vAlign="center">
       <Button hierarchy="tertiary">Tertiary</Button>
@@ -110,11 +81,7 @@ export const HierarchyShowcase: Story = {
   ),
 };
 
-// ============================================================================
-// SIZE EXAMPLES
-// ============================================================================
-
-export const SizeShowcase: Story = {
+export const ButtonSize: Story = {
   render: () => (
     <HStack gap="12px" vAlign="center">
       <Button size="sm">Small</Button>
@@ -124,11 +91,7 @@ export const SizeShowcase: Story = {
   ),
 };
 
-// ============================================================================
-// DISABLED EXAMPLES
-// ============================================================================
-
-export const DisabledShowcase: Story = {
+export const ButtonDisabled: Story = {
   render: () => (
     <HStack gap="12px" vAlign="center">
       <VStack gap="12px" vAlign="center" width="200px">
@@ -146,11 +109,7 @@ export const DisabledShowcase: Story = {
   ),
 };
 
-// ============================================================================
-// WITH ICONS
-// ============================================================================
-
-export const IconShowcase: Story = {
+export const ButtonWithIcons: Story = {
   render: () => (
     <VStack gap="12px" vAlign="center">
       <HStack gap="12px" vAlign="center">
@@ -191,29 +150,25 @@ export const IconShowcase: Story = {
   ),
 };
 
-// ============================================================================
-// CUSTOM COLORS
-// ============================================================================
-
-export const ColorShowcase: Story = {
+export const ButtonCustomColors: Story = {
   render: () => (
     <HStack vAlign="center" gap="12px">
       <VStack gap="12px" vAlign="center" width="200px">
-        {tcnBrandedColors.map(({ name, action }) => (
-          <Button key={name} hierarchy="primary" color={action} width="100%">
-            {name}
-          </Button>
-        ))}
+        <Button hierarchy="tertiary" color={'#82722B'} width="100%">
+          Compliance and Data Management
+        </Button>
+        <Button hierarchy="secondary" color={'#82722B'} width="100%">
+          Compliance and Data Management
+        </Button>
+        <Button hierarchy="primary" color={'#82722B'} width="100%">
+          Compliance and Data Management
+        </Button>
       </VStack>
     </HStack>
   ),
 };
 
-// ============================================================================
-// FULL WIDTH
-// ============================================================================
-
-export const FullWidth: Story = {
+export const ButtonFullWidth: Story = {
   render: () => (
     <HStack vAlign="center">
       <VStack gap="12px" vAlign="center" width="200px">
@@ -231,7 +186,7 @@ export const FullWidth: Story = {
   ),
 };
 
-export const SeverityShowcase: Story = {
+export const ButtonSeverity: Story = {
   render: () => (
     <HStack vAlign="center" gap="12px">
       <VStack gap="12px" vAlign="center" width="120px">
@@ -259,92 +214,452 @@ export const SeverityShowcase: Story = {
   ),
 };
 
+export const ButtonInteractiveStates: Story = {
+  render: () => (
+    <HStack
+      gap="24px"
+      style={{
+        pointerEvents: 'none',
+      }}
+    >
+      <VStack gap="12px" vAlign="center" width="80px">
+        <BodyText>Tertiary</BodyText>
+        <Button hierarchy="tertiary" width="100%">
+          Baseline
+        </Button>
+        <Button hierarchy="tertiary" width="100%" data-focus-visible>
+          Focus
+        </Button>
+        <Button hierarchy="tertiary" width="100%" data-hover>
+          Hover
+        </Button>
+        <Button hierarchy="tertiary" width="100%" data-active>
+          Active
+        </Button>
+      </VStack>
+      <VStack gap="12px" vAlign="center" width="80px">
+        <BodyText>Secondary</BodyText>
+        <Button hierarchy="secondary" width="100%">
+          Baseline
+        </Button>
+        <Button hierarchy="secondary" width="100%" data-focus-visible>
+          Focus
+        </Button>
+        <Button hierarchy="secondary" width="100%" data-hover>
+          Hover
+        </Button>
+        <Button hierarchy="secondary" width="100%" data-active>
+          Active
+        </Button>
+      </VStack>
+      <VStack gap="12px" vAlign="center" width="80px">
+        <BodyText>Primary</BodyText>
+        <Button hierarchy="primary" width="100%">
+          Baseline
+        </Button>
+        <Button hierarchy="primary" width="100%" data-focus-visible>
+          Focus
+        </Button>
+        <Button hierarchy="primary" width="100%" data-hover>
+          Hover
+        </Button>
+        <Button hierarchy="primary" width="100%" data-active>
+          Active
+        </Button>
+      </VStack>
+    </HStack>
+  ),
+};
+
 // ============================================================================
-// SLIM BUTTON EXAMPLES
+// Utility Button EXAMPLES
 // ============================================================================
 
-export const SlimButtonBaselineShowcase: Story = {
+export const UtilityButtonBaseline: Story = {
   render: () => (
     <HStack gap="12px" vAlign="center">
-      <SlimButton>
+      <Button utility>
         <SearchIcon />
-      </SlimButton>
+      </Button>
     </HStack>
   ),
 };
 
-export const SlimButtonHierarchy: Story = {
+export const UtilityButtonHierarchy: Story = {
   render: () => (
     <HStack gap="12px" vAlign="center">
-      <SlimButton hierarchy="tertiary">
+      <Button utility hierarchy="tertiary">
         <CrossIcon />
-      </SlimButton>
-      <SlimButton hierarchy="secondary">
+      </Button>
+      <Button utility hierarchy="secondary">
         <SearchIcon />
-      </SlimButton>
-      <SlimButton hierarchy="primary">
+      </Button>
+      <Button utility hierarchy="primary">
         <PlusIcon />
-      </SlimButton>
+      </Button>
     </HStack>
   ),
 };
 
-export const SlimButtonSizes: Story = {
+export const UtilityButtonSizes: Story = {
   render: () => (
     <HStack gap="12px" vAlign="center">
-      <SlimButton size="sm" hierarchy="primary">
+      <Button utility size="sm" hierarchy="primary">
         <PlusIcon />
-      </SlimButton>
-      <SlimButton size="md" hierarchy="primary">
+      </Button>
+      <Button utility size="md" hierarchy="primary">
         <PlusIcon />
-      </SlimButton>
-      <SlimButton size="lg" hierarchy="primary">
+      </Button>
+      <Button utility size="lg" hierarchy="primary">
         <PlusIcon />
-      </SlimButton>
+      </Button>
     </HStack>
   ),
 };
 
-export const SlimButtonDisabled: Story = {
+export const UtilityButtonDisabled: Story = {
   render: () => (
     <HStack gap="12px" vAlign="center">
-      <SlimButton hierarchy="tertiary" disabled>
+      <Button utility hierarchy="tertiary" disabled>
         <CrossIcon />
-      </SlimButton>
-      <SlimButton hierarchy="secondary" disabled>
+      </Button>
+      <Button utility hierarchy="secondary" disabled>
         <SearchIcon />
-      </SlimButton>
-      <SlimButton hierarchy="primary" disabled>
+      </Button>
+      <Button utility hierarchy="primary" disabled>
         <PlusIcon />
-      </SlimButton>
+      </Button>
     </HStack>
   ),
 };
 
-export const SlimButtonColors: Story = {
+export const UtilityButtonColors: Story = {
   render: () => (
-    <HStack gap="12px" vAlign="center">
-      {tcnBrandedColors.map(({ name, action }) => (
-        <SlimButton key={name} hierarchy="primary" color={action}>
-          <SearchIcon />
-        </SlimButton>
-      ))}
+    <HStack vAlign="center" gap="12px">
+      <Button hierarchy="tertiary" color={'#82722B'} utility>
+        <SearchIcon />
+      </Button>
+      <Button hierarchy="secondary" color={'#82722B'} utility>
+        <SearchIcon />
+      </Button>
+      <Button hierarchy="primary" color={'#82722B'} utility>
+        <SearchIcon />
+      </Button>
     </HStack>
   ),
 };
 
-export const SlimButtonSeverity: Story = {
+export const UtilityButtonSeverity: Story = {
   render: () => (
     <HStack gap="12px" vAlign="center">
       {severityOptions.map(({ name, severity }) => (
-        <SlimButton key={name} hierarchy="primary" severity={severity}>
+        <Button utility key={name} hierarchy="primary" severity={severity}>
           <CrossIcon />
-        </SlimButton>
+        </Button>
       ))}
     </HStack>
   ),
 };
 
+export const UtilityButtonInteractiveStates: Story = {
+  render: () => (
+    <HStack
+      gap="24px"
+      style={{
+        pointerEvents: 'none',
+      }}
+    >
+      <VStack gap="12px" vAlign="center">
+        <BodyText>Tertiary</BodyText>
+        <Button utility hierarchy="tertiary">
+          <SearchIcon />
+        </Button>
+        <Button utility hierarchy="tertiary" data-focus-visible>
+          <SearchIcon />
+        </Button>
+        <Button utility hierarchy="tertiary" data-hover>
+          <SearchIcon />
+        </Button>
+        <Button utility hierarchy="tertiary" data-active>
+          <SearchIcon />
+        </Button>
+      </VStack>
+      <VStack gap="12px" vAlign="center">
+        <BodyText>Secondary</BodyText>
+        <Button utility hierarchy="secondary">
+          <SearchIcon />
+        </Button>
+        <Button utility hierarchy="secondary" data-focus-visible>
+          <SearchIcon />
+        </Button>
+        <Button utility hierarchy="secondary" data-hover>
+          <SearchIcon />
+        </Button>
+        <Button utility hierarchy="secondary" data-active>
+          <SearchIcon />
+        </Button>
+      </VStack>
+      <VStack gap="12px" vAlign="center">
+        <BodyText>Primary</BodyText>
+        <Button utility hierarchy="primary">
+          <SearchIcon />
+        </Button>
+        <Button utility hierarchy="primary" data-focus-visible>
+          <SearchIcon />
+        </Button>
+        <Button utility hierarchy="primary" data-hover>
+          <SearchIcon />
+        </Button>
+        <Button utility hierarchy="primary" data-active>
+          <SearchIcon />
+        </Button>
+      </VStack>
+    </HStack>
+  ),
+};
+
+// ============================================================================
+// TOGGLE EXAMPLES
+// ============================================================================
+
+export const ToggleBaseline: Story = {
+  render: () => {
+    const [selected, setSelected] = useState(false);
+    return (
+      <HStack gap="12px" vAlign="center">
+        <Toggle selected={selected} onClick={() => setSelected(!selected)}>
+          Baseline
+        </Toggle>
+      </HStack>
+    );
+  },
+};
+
+const ToggleWithState: React.FC<Omit<ToggleProps, 'selected' | 'onClick'>> = ({
+  ...props
+}) => {
+  const [selected, setSelected] = useState(false);
+  return <Toggle selected={selected} onClick={() => setSelected(!selected)} {...props} />;
+};
+
+export const ToggleSize: Story = {
+  render: () => (
+    <HStack gap="12px" vAlign="center">
+      <ToggleWithState size="sm">Small</ToggleWithState>
+      <ToggleWithState size="md">Medium</ToggleWithState>
+      <ToggleWithState size="lg">Large</ToggleWithState>
+    </HStack>
+  ),
+};
+
+export const ToggleDisabled: Story = {
+  render: () => (
+    <HStack gap="12px" vAlign="center">
+      <VStack gap="12px" vAlign="center" width="200px">
+        <Toggle disabled width="100%">
+          Disabled
+        </Toggle>
+        <Toggle selected disabled width="100%">
+          Selected Disabled
+        </Toggle>
+      </VStack>
+    </HStack>
+  ),
+};
+
+export const ToggleWithIcons: Story = {
+  render: () => (
+    <VStack gap="12px" vAlign="center">
+      <ToggleWithState>
+        Icon End
+        <Spacer width="6px" />
+        <CrossIcon size="sm" />
+      </ToggleWithState>
+      <ToggleWithState>
+        <PlusIcon size="sm" />
+        <Spacer width="6px" />
+        Icon Start
+      </ToggleWithState>
+    </VStack>
+  ),
+};
+
+export const ToggleCustomColors: Story = {
+  render: () => (
+    <HStack vAlign="center" gap="12px">
+      <VStack gap="12px" vAlign="center" width="200px">
+        <ToggleWithState color={'#4F785C'} width="100%">
+          Integrated and Automation
+        </ToggleWithState>
+      </VStack>
+    </HStack>
+  ),
+};
+
+export const ToggleInteractiveStates: Story = {
+  render: () => (
+    <HStack
+      gap="24px"
+      style={{
+        pointerEvents: 'none',
+      }}
+    >
+      <VStack gap="12px" vAlign="center" width="100px">
+        <BodyText>Not Selected</BodyText>
+        <Toggle width="100%">Baseline</Toggle>
+        <Toggle width="100%" data-focus-visible>
+          Focus
+        </Toggle>
+        <Toggle width="100%" data-hover>
+          Hover
+        </Toggle>
+        <Toggle width="100%" data-active>
+          Active
+        </Toggle>
+      </VStack>
+      <VStack gap="12px" vAlign="center" width="100px">
+        <BodyText>Selected</BodyText>
+        <Toggle selected width="100%">
+          Baseline
+        </Toggle>
+        <Toggle selected width="100%" data-focus-visible>
+          Focus
+        </Toggle>
+        <Toggle selected width="100%" data-hover>
+          Hover
+        </Toggle>
+        <Toggle selected width="100%" data-active>
+          Active
+        </Toggle>
+      </VStack>
+    </HStack>
+  ),
+};
+
+// ============================================================================
+// TOGGLE UTILITY EXAMPLES
+// ============================================================================
+
+const UtilityToggleWithState: React.FC<
+  Omit<ToggleProps, 'selected' | 'onClick' | 'utility'>
+> = ({ ...props }) => {
+  const [selected, setSelected] = useState(false);
+  return (
+    <Toggle
+      utility
+      selected={selected}
+      onClick={() => setSelected(!selected)}
+      {...props}
+    />
+  );
+};
+
+export const UtilityToggleBaseline: Story = {
+  render: () => {
+    const [selected, setSelected] = useState(false);
+    return (
+      <HStack gap="12px" vAlign="center">
+        <Toggle utility selected={selected} onClick={() => setSelected(!selected)}>
+          <SearchIcon />
+        </Toggle>
+      </HStack>
+    );
+  },
+};
+
+export const UtilityToggleSize: Story = {
+  render: () => (
+    <HStack gap="12px" vAlign="center">
+      <UtilityToggleWithState size="sm">
+        <SearchIcon />
+      </UtilityToggleWithState>
+      <UtilityToggleWithState size="md">
+        <SearchIcon />
+      </UtilityToggleWithState>
+      <UtilityToggleWithState size="lg">
+        <SearchIcon />
+      </UtilityToggleWithState>
+    </HStack>
+  ),
+};
+
+export const UtilityToggleDisabled: Story = {
+  render: () => (
+    <HStack gap="12px" vAlign="center">
+      <Toggle utility disabled>
+        <SearchIcon />
+      </Toggle>
+      <Toggle utility selected disabled>
+        <SearchIcon />
+      </Toggle>
+    </HStack>
+  ),
+};
+
+export const UtilityToggleCustomColors: Story = {
+  render: () => (
+    <HStack vAlign="center" gap="12px">
+      <UtilityToggleWithState color={'#4F785C'}>
+        <SearchIcon />
+      </UtilityToggleWithState>
+    </HStack>
+  ),
+};
+
+export const UtilityToggleInteractiveStates: Story = {
+  render: () => (
+    <HStack
+      gap="24px"
+      style={{
+        pointerEvents: 'none',
+      }}
+    >
+      <VStack gap="24px" vAlign="center">
+        <HStack gap="16px" minWidth="150px">
+          <BodyText>Baseline</BodyText>
+          <Spacer />
+          <Toggle utility>
+            <SearchIcon />
+          </Toggle>
+          <Toggle utility selected>
+            <SearchIcon />
+          </Toggle>
+        </HStack>
+        <HStack gap="16px" minWidth="150px">
+          <BodyText>Focus</BodyText>
+          <Spacer />
+          <Toggle utility data-focus-visible>
+            <SearchIcon />
+          </Toggle>
+          <Toggle utility data-focus-visible selected>
+            <SearchIcon />
+          </Toggle>
+        </HStack>
+        <HStack gap="16px" minWidth="150px">
+          <BodyText>Hover</BodyText>
+          <Spacer />
+          <Toggle utility data-hover>
+            <SearchIcon />
+          </Toggle>
+          <Toggle utility data-hover selected>
+            <SearchIcon />
+          </Toggle>
+        </HStack>
+        <HStack gap="16px" vAlign="center">
+          <BodyText>Active</BodyText>
+          <Spacer />
+          <Toggle utility data-active>
+            <SearchIcon />
+          </Toggle>
+          <Toggle utility data-active selected>
+            <SearchIcon />
+          </Toggle>
+        </HStack>
+      </VStack>
+    </HStack>
+  ),
+};
+
 // ============================================================================
 // BUTTON GROUP EXAMPLES
 // ============================================================================

package/src/actions/__docs__/components/showcase.tsx

@@ -41,12 +41,16 @@ export const Showcase: React.FC<ShowcaseProps> = ({
     <HStack className={clsx(styles.header, styles.toolbar)}>
       <h4 className={styles.title}>{title}</h4>
     </HStack>
-    <HStack className={clsx(styles.subtitle, styles.toolbar)} vAlign="start">
-      <div className={styles.description}>{description}</div>
-    </HStack>
-    <HStack className={clsx(styles.subtitle, styles.toolbar)} vAlign="start">
-      <div className={styles.documentation}>{children}</div>
-    </HStack>
+    {description && (
+      <HStack className={clsx(styles.subtitle, styles.toolbar)} vAlign="start">
+        <div className={styles.description}>{description}</div>
+      </HStack>
+    )}
+    {children && (
+      <HStack className={clsx(styles.subtitle, styles.toolbar)} vAlign="start">
+        <div className={styles.documentation}>{children}</div>
+      </HStack>
+    )}
     <Canvas
       className={styles.content}
       layout="centered"