@tcn/ui 0.3.0 → 0.3.1

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

@@ -0,0 +1,309 @@
+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 { 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',
+  },
+];
+
+// ============================================================================
+// 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">
+      <VStack gap="12px" vAlign="center" width="200px">
+        {severityOptions.map(({ name, severity }) => (
+          <Button key={name} hierarchy="primary" severity={severity} width="100%">
+            {name}
+          </Button>
+        ))}
+      </VStack>
+    </HStack>
+  ),
+};
+
+// ============================================================================
+// SLIM BUTTON EXAMPLES
+// ============================================================================
+
+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>
+  ),
+};

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>
+  );
+};

package/src/actions/button/base_button/base_button.tsx

@@ -5,11 +5,13 @@ import { HStack } from '../../../stacks/h_stack.js';
 import type { HStackOwnProps } from '../../../stacks/h_stack.js';
 import styles from './base_button.module.css';
 import type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';
+import type { ActionSeverity } from '../../types.js';
 
 export interface BaseButtonOwnProps {
   hierarchy?: Hierarchy;
   size?: Size;
   color?: string;
+  severity?: ActionSeverity;
 }
 
 export type BaseButtonWithStackProps = BaseButtonOwnProps &
@@ -27,6 +29,7 @@ export const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(
       style,
       color,
       hierarchy = 'secondary',
+      severity = 'neutral',
       size = 'md',
       onTouchStart,
       onContextMenu,
@@ -55,7 +58,7 @@ export const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(
     };
 
     if (color) {
-      finalStyle['--button-color'] = color;
+      finalStyle['--interactive-color'] = color;
     }
 
     return (
@@ -65,6 +68,7 @@ export const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(
         inline
         vAlign="center"
         hAlign="center"
+        data-severity={severity}
         data-hierarchy={hierarchy}
         data-size={size}
         data-is-disabled={Boolean(props.disabled)}

package/src/actions/types.ts

@@ -0,0 +1,6 @@
+export type ActionSeverity =
+  | 'dangerous'
+  | 'cautious'
+  | 'neutral'
+  | 'suggested'
+  | 'encouraged';

package/src/themes/themes/ergo/ergo_theme.css

@@ -205,6 +205,12 @@ legend {
   --on-action: 0, 0%, 100%;
   --material: 0, 0%, 100%;
   --on-material: 213, 35.6%, 34.7%;
+
+  --action-dangerous: 0, 90%, 50%;
+  --action-cautious: 53, 90%, 60%;
+  --action-neutral: var(--action);
+  --action-suggested: 202, 90%, 40%;
+  --action-encouraged: 120, 90%, 40%;
 }
 
 * {
@@ -221,7 +227,7 @@ legend {
     background 0.1s,
     color 0.1s;
 
-  --act: hsl(var(--action));
+  --act: hsl(var(--interactive-color, var(--action)));
   --on-act: hsl(var(--on-action));
   /* Could use hsl here if we made three color variables for each of the hsl values */
   --act-down: color-mix(in srgb, var(--act), black 8%);
@@ -314,6 +320,32 @@ legend {
 }
 
 /* Button */
+
+.tcn-base-button {
+  --action: var(var(--button-color), var(--action));
+}
+
+.tcn-base-button[data-severity="dangerous"] {
+  --action: var(--action-dangerous);
+}
+
+.tcn-base-button[data-severity="cautious"] {
+  --action: var(--action-cautious);
+  --on-action: var(--on-material);
+}
+
+/* .tcn-base-button[data-severity="neutral"] {
+  --action: var(--action-neutral);
+} */
+
+.tcn-base-button[data-severity="suggested"] {
+  --action: var(--action-suggested);
+}
+
+.tcn-base-button[data-severity="encouraged"] {
+  --action: var(--action-encouraged);
+}
+
 .tcn-button {
   border-radius: 4px;
 }