@tcn/ui 0.3.0 → 0.3.2

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

@@ -0,0 +1,481 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+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';
+
+/**
+ * These stories are used exclusively by the MDX documentation.
+ * They are hidden from the Storybook sidebar using tags.
+ */
+const meta: Meta<typeof Button> = {
+  title: 'Catalog/Actions',
+  component: Button,
+  parameters: {
+    docs: {
+      story: { exclude: ['style'] },
+    },
+  },
+
+  // Hide these stories from the sidebar - they're only for MDX docs
+  tags: ['!autodocs', '!dev'],
+};
+
+export default meta;
+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',
+    severity: 'dangerous',
+  },
+  {
+    name: 'Cautious',
+    severity: 'cautious',
+  },
+  {
+    name: 'Neutral',
+    severity: 'neutral',
+  },
+  {
+    name: 'Suggested',
+    severity: 'suggested',
+  },
+  {
+    name: 'Encouraged',
+    severity: 'encouraged',
+  },
+];
+
+// ============================================================================
+// BASELINE
+// ============================================================================
+
+export const ButtonBaselineShowcase: Story = {
+  render: () => (
+    <HStack gap="12px" vAlign="center">
+      <Button>Baseline</Button>
+    </HStack>
+  ),
+};
+
+// ============================================================================
+// HIERARCHY EXAMPLES
+// ============================================================================
+
+export const HierarchyShowcase: Story = {
+  render: () => (
+    <HStack gap="12px" vAlign="center">
+      <Button hierarchy="tertiary">Tertiary</Button>
+      <Button hierarchy="secondary">Secondary</Button>
+      <Button hierarchy="primary">Primary</Button>
+    </HStack>
+  ),
+};
+
+// ============================================================================
+// SIZE EXAMPLES
+// ============================================================================
+
+export const SizeShowcase: Story = {
+  render: () => (
+    <HStack gap="12px" vAlign="center">
+      <Button size="sm">Small</Button>
+      <Button size="md">Medium</Button>
+      <Button size="lg">Large</Button>
+    </HStack>
+  ),
+};
+
+// ============================================================================
+// DISABLED EXAMPLES
+// ============================================================================
+
+export const DisabledShowcase: Story = {
+  render: () => (
+    <HStack gap="12px" vAlign="center">
+      <VStack gap="12px" vAlign="center" width="200px">
+        <Button hierarchy="tertiary" disabled width="100%">
+          Tertiary Disabled
+        </Button>
+        <Button hierarchy="secondary" disabled width="100%">
+          Secondary Disabled
+        </Button>
+        <Button hierarchy="primary" disabled width="100%">
+          Primary Disabled
+        </Button>
+      </VStack>
+    </HStack>
+  ),
+};
+
+// ============================================================================
+// WITH ICONS
+// ============================================================================
+
+export const IconShowcase: Story = {
+  render: () => (
+    <VStack gap="12px" vAlign="center">
+      <HStack gap="12px" vAlign="center">
+        <Button hierarchy="tertiary">
+          Cancel
+          <Spacer width="6px" />
+          <CrossIcon size="sm" />
+        </Button>
+        <Button hierarchy="secondary">
+          Search
+          <Spacer width="6px" />
+          <SearchIcon size="sm" />
+        </Button>
+        <Button hierarchy="primary">
+          Add
+          <Spacer width="6px" />
+          <PlusIcon size="sm" />
+        </Button>
+      </HStack>
+      <HStack gap="12px" vAlign="center">
+        <Button hierarchy="tertiary">
+          <CrossIcon size="sm" />
+          <Spacer width="6px" />
+          Cancel
+        </Button>
+        <Button hierarchy="secondary">
+          <SearchIcon size="sm" />
+          <Spacer width="6px" />
+          Search
+        </Button>
+        <Button hierarchy="primary">
+          <PlusIcon size="sm" />
+          <Spacer width="6px" />
+          Add
+        </Button>
+      </HStack>
+    </VStack>
+  ),
+};
+
+// ============================================================================
+// CUSTOM COLORS
+// ============================================================================
+
+export const ColorShowcase: 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>
+        ))}
+      </VStack>
+    </HStack>
+  ),
+};
+
+// ============================================================================
+// FULL WIDTH
+// ============================================================================
+
+export const FullWidth: Story = {
+  render: () => (
+    <HStack vAlign="center">
+      <VStack gap="12px" vAlign="center" width="200px">
+        <Button hierarchy="tertiary" width="100%">
+          Full Width Tertiary
+        </Button>
+        <Button hierarchy="secondary" width="100%">
+          Full Width Secondary
+        </Button>
+        <Button hierarchy="primary" width="100%">
+          Full Width Primary
+        </Button>
+      </VStack>
+    </HStack>
+  ),
+};
+
+export const SeverityShowcase: Story = {
+  render: () => (
+    <HStack vAlign="center" gap="12px">
+      <VStack gap="12px" vAlign="center" width="120px">
+        {severityOptions.map(({ name, severity }) => (
+          <Button key={name} hierarchy="tertiary" severity={severity} width="100%">
+            {name}
+          </Button>
+        ))}
+      </VStack>
+      <VStack gap="12px" vAlign="center" width="120px">
+        {severityOptions.map(({ name, severity }) => (
+          <Button key={name} hierarchy="secondary" severity={severity} width="100%">
+            {name}
+          </Button>
+        ))}
+      </VStack>
+      <VStack gap="12px" vAlign="center" width="120px">
+        {severityOptions.map(({ name, severity }) => (
+          <Button key={name} hierarchy="primary" severity={severity} width="100%">
+            {name}
+          </Button>
+        ))}
+      </VStack>
+    </HStack>
+  ),
+};
+
+// ============================================================================
+// SLIM BUTTON EXAMPLES
+// ============================================================================
+
+export const SlimButtonBaselineShowcase: Story = {
+  render: () => (
+    <HStack gap="12px" vAlign="center">
+      <SlimButton>
+        <SearchIcon />
+      </SlimButton>
+    </HStack>
+  ),
+};
+
+export const SlimButtonHierarchy: Story = {
+  render: () => (
+    <HStack gap="12px" vAlign="center">
+      <SlimButton hierarchy="tertiary">
+        <CrossIcon />
+      </SlimButton>
+      <SlimButton hierarchy="secondary">
+        <SearchIcon />
+      </SlimButton>
+      <SlimButton hierarchy="primary">
+        <PlusIcon />
+      </SlimButton>
+    </HStack>
+  ),
+};
+
+export const SlimButtonSizes: Story = {
+  render: () => (
+    <HStack gap="12px" vAlign="center">
+      <SlimButton size="sm" hierarchy="primary">
+        <PlusIcon />
+      </SlimButton>
+      <SlimButton size="md" hierarchy="primary">
+        <PlusIcon />
+      </SlimButton>
+      <SlimButton size="lg" hierarchy="primary">
+        <PlusIcon />
+      </SlimButton>
+    </HStack>
+  ),
+};
+
+export const SlimButtonDisabled: Story = {
+  render: () => (
+    <HStack gap="12px" vAlign="center">
+      <SlimButton hierarchy="tertiary" disabled>
+        <CrossIcon />
+      </SlimButton>
+      <SlimButton hierarchy="secondary" disabled>
+        <SearchIcon />
+      </SlimButton>
+      <SlimButton hierarchy="primary" disabled>
+        <PlusIcon />
+      </SlimButton>
+    </HStack>
+  ),
+};
+
+export const SlimButtonColors: Story = {
+  render: () => (
+    <HStack gap="12px" vAlign="center">
+      {tcnBrandedColors.map(({ name, action }) => (
+        <SlimButton key={name} hierarchy="primary" color={action}>
+          <SearchIcon />
+        </SlimButton>
+      ))}
+    </HStack>
+  ),
+};
+
+export const SlimButtonSeverity: Story = {
+  render: () => (
+    <HStack gap="12px" vAlign="center">
+      {severityOptions.map(({ name, severity }) => (
+        <SlimButton key={name} hierarchy="primary" severity={severity}>
+          <CrossIcon />
+        </SlimButton>
+      ))}
+    </HStack>
+  ),
+};
+
+// ============================================================================
+// BUTTON GROUP EXAMPLES
+// ============================================================================
+
+export const ButtonGroupBaselineShowcase: Story = {
+  render: () => (
+    <HStack gap="12px" vAlign="center">
+      <ButtonGroup>
+        <Button>First</Button>
+        <Button>Second</Button>
+        <Button>Third</Button>
+      </ButtonGroup>
+    </HStack>
+  ),
+};
+
+export const ButtonGroupHierarchy: Story = {
+  render: () => (
+    <VStack gap="12px" hAlign="start">
+      <ButtonGroup hierarchy="tertiary">
+        <Button>First</Button>
+        <Button>Second</Button>
+        <Button>Third</Button>
+      </ButtonGroup>
+      <ButtonGroup hierarchy="secondary">
+        <Button>First</Button>
+        <Button>Second</Button>
+        <Button>Third</Button>
+      </ButtonGroup>
+      <ButtonGroup hierarchy="primary">
+        <Button>First</Button>
+        <Button>Second</Button>
+        <Button>Third</Button>
+      </ButtonGroup>
+    </VStack>
+  ),
+};
+
+export const ButtonGroupSeverity: Story = {
+  render: () => (
+    <VStack gap="12px" hAlign="start">
+      <ButtonGroup hierarchy="tertiary">
+        <Button>First</Button>
+        <Button>Second</Button>
+        <Button severity="dangerous">Dangerous</Button>
+      </ButtonGroup>
+      <ButtonGroup hierarchy="secondary">
+        <Button>First</Button>
+        <Button>Second</Button>
+        <Button severity="cautious">Cautious</Button>
+      </ButtonGroup>
+      <ButtonGroup hierarchy="tertiary">
+        <Button>First</Button>
+        <Button>Second</Button>
+        <Button severity="neutral">Neutral</Button>
+      </ButtonGroup>
+      <ButtonGroup hierarchy="secondary">
+        <Button>First</Button>
+        <Button>Second</Button>
+        <Button severity="suggested">Suggested</Button>
+      </ButtonGroup>
+      <ButtonGroup hierarchy="primary">
+        <Button>First</Button>
+        <Button>Second</Button>
+        <Button severity="encouraged">Encouraged</Button>
+      </ButtonGroup>
+    </VStack>
+  ),
+};
+
+export const ButtonGroupSizes: Story = {
+  render: () => (
+    <VStack gap="12px" hAlign="start">
+      <ButtonGroup size="sm">
+        <Button>Small</Button>
+        <Button>Group</Button>
+      </ButtonGroup>
+      <ButtonGroup size="md">
+        <Button>Medium</Button>
+        <Button>Group</Button>
+      </ButtonGroup>
+      <ButtonGroup size="lg">
+        <Button>Large</Button>
+        <Button>Group</Button>
+      </ButtonGroup>
+    </VStack>
+  ),
+};
+
+export const ButtonGroupDisabled: Story = {
+  render: () => (
+    <VStack gap="12px" hAlign="start">
+      <ButtonGroup hierarchy="tertiary">
+        <Button>Active</Button>
+        <Button disabled>Disabled</Button>
+        <Button>Active</Button>
+      </ButtonGroup>
+      <ButtonGroup hierarchy="secondary">
+        <Button>Active</Button>
+        <Button disabled>Disabled</Button>
+        <Button>Active</Button>
+      </ButtonGroup>
+      <ButtonGroup hierarchy="primary">
+        <Button>Active</Button>
+        <Button disabled>Disabled</Button>
+        <Button>Active</Button>
+      </ButtonGroup>
+    </VStack>
+  ),
+};
+
+export const ButtonGroupWithIcons: Story = {
+  render: () => (
+    <VStack gap="12px" hAlign="start">
+      <ButtonGroup>
+        <Button>
+          First
+          <Spacer width="6px" />
+          <PlusIcon />
+        </Button>
+        <Button>
+          Second
+          <Spacer width="6px" />
+          <SearchIcon />
+        </Button>
+        <Button>
+          Third
+          <Spacer width="6px" />
+          <PlusIcon />
+        </Button>
+      </ButtonGroup>
+    </VStack>
+  ),
+};

package/src/actions/__docs__/components/gallery.module.css

@@ -0,0 +1,6 @@
+.container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
+  gap: 20px;
+  max-width: var(--max-gallery-width);
+}

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import styles from './gallery.module.css';
+
+export interface GalleryProps {
+  children: React.ReactNode;
+  minColumnWidth?: string;
+  maxGalleryWidth?: string;
+}
+
+export const Gallery: React.FC<GalleryProps> = ({
+  children,
+  minColumnWidth = '300px',
+  maxGalleryWidth = '1200px',
+}) => {
+  return (
+    <section
+      className={styles.container}
+      style={
+        {
+          '--min-column-width': minColumnWidth,
+          '--max-gallery-width': maxGalleryWidth,
+        } as React.CSSProperties
+      }
+    >
+      {children}
+    </section>
+  );
+};

package/src/actions/__docs__/components/showcase.module.css

@@ -0,0 +1,55 @@
+.showcase {
+  border: 1px solid var(--docs-border-color, #e5e7eb);
+  background-color: var(--docs-card-bg, #fff);
+  border-radius: 8px;
+  overflow: hidden;
+  height: fit-content;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+}
+
+.header {
+  min-height: 48px;
+  background-color: var(--docs-header-bg, #fafafa);
+}
+
+.title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--docs-text-color, #1f2937);
+  margin: 0px !important;
+}
+
+.subtitle {
+  background-color: var(--docs-header-bg, #fafafa);
+  flex-grow: 1;
+}
+
+.documentation {
+  color: var(--docs-text-muted, #6b7280);
+  padding: 0px 16px;
+}
+
+.description {
+  font-size: 12px;
+  color: var(--docs-text-muted, #6b7280);
+}
+
+.content {
+  min-height: 200px;
+  background-color: red;
+  width: 100%;
+  border: none !important;
+  box-shadow: none !important;
+  margin: 0px !important;
+  border-radius: 0px !important;
+
+  :global(.docs-story) {
+    min-height: 200px !important;
+  }
+}

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

@@ -0,0 +1,121 @@
+import React from 'react';
+import { Canvas } from '@storybook/addon-docs/blocks';
+import { HStack } from '../../../stacks/index.js';
+import styles from './showcase.module.css';
+import clsx from 'clsx';
+
+export interface ShowcaseProps {
+  /** Title displayed at the top of the card */
+  title?: string;
+  // A concise description of the showcase
+  description?: React.ReactNode;
+  /** The story to render */
+  of: any;
+  /** Width of the card */
+  minWidth?: string;
+  maxWidth?: string;
+  // Addition documentation for the showcase
+  children?: React.ReactNode;
+}
+
+/**
+ * Example card component for MDX documentation.
+ * Displays as a cohesive card with header, content, and footer.
+ */
+export const Showcase: React.FC<ShowcaseProps> = ({
+  title,
+  description,
+  of,
+  minWidth = '300px',
+  maxWidth = '600px',
+  children,
+}: ShowcaseProps) => (
+  <div
+    style={{
+      minWidth,
+      maxWidth,
+      height: 'fit-content',
+    }}
+    className={styles.showcase}
+  >
+    <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>
+    <Canvas
+      className={styles.content}
+      layout="centered"
+      of={of}
+      sourceState={'hidden'}
+      story={{
+        inline: true,
+      }}
+    />
+  </div>
+);
+
+/**
+ * Section component - displays examples in a flex row that wraps.
+ */
+export const Section = ({
+  title,
+  description,
+  children,
+  maxWidth = '100%',
+}: {
+  title: string;
+  description?: React.ReactNode;
+  children: React.ReactNode;
+  maxWidth?: string;
+}) => {
+  return (
+    <section
+      style={{
+        maxWidth,
+        marginBottom: '48px',
+      }}
+    >
+      {/* Section Header */}
+      <div style={{ marginBottom: '24px' }}>
+        <h2
+          style={{
+            margin: '0 0 8px 0',
+            fontSize: '20px',
+            fontWeight: 600,
+            color: 'var(--docs-text-color, #1f2937)',
+          }}
+        >
+          {title}
+        </h2>
+        {description && (
+          <p
+            style={{
+              margin: 0,
+              fontSize: '14px',
+              color: 'var(--docs-text-muted, #6b7280)',
+              lineHeight: 1.6,
+            }}
+          >
+            {description}
+          </p>
+        )}
+      </div>
+
+      {/* Cards Grid - Flex row with wrap */}
+      <div
+        style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: '20px',
+        }}
+      >
+        {children}
+      </div>
+    </section>
+  );
+};