@tcn/ui 0.0.4 → 0.1.1

package/src/layouts/list/item.tsx

@@ -4,14 +4,22 @@ import { clsx } from 'clsx';
 
 export interface ItemProps extends Omit<HStackProps, 'as' | 'children'> {
   children?: React.ReactNode;
+  selected?: boolean;
 }
 
 export const Item = React.forwardRef<HTMLDivElement, ItemProps>(function Item(
-  { children, className, ...props }: ItemProps,
+  { children, className, selected = false, ...props }: ItemProps,
   ref
 ) {
   return (
-    <HStack ref={ref} as="li" className={clsx('item', className)} {...props}>
+    <HStack
+      ref={ref}
+      as="li"
+      data-hierarchy={selected ? 'primary' : 'tertiary'}
+      data-is-selected={selected}
+      className={clsx('tcn-item', 'tcn-interactive', className)}
+      {...props}
+    >
       {children}
     </HStack>
   );

package/src/layouts/list/list.tsx

@@ -6,7 +6,7 @@ export interface ListProps extends Omit<VStackProps, 'as'> {
   isOrdered?: boolean;
 }
 
-export const List = React.forwardRef<HTMLDivElement, ListProps>(function Item(
+export const List = React.forwardRef<HTMLDivElement, ListProps>(function List(
   { children, className, isOrdered = false, ...props }: ListProps,
   ref
 ) {
@@ -14,7 +14,7 @@ export const List = React.forwardRef<HTMLDivElement, ListProps>(function Item(
     <VStack
       ref={ref}
       as={isOrdered ? 'ol' : 'ul'}
-      className={clsx('list', className)}
+      className={clsx('tcn-list', className)}
       {...props}
     >
       {children}

package/src/surfaces/card/card.tsx

@@ -1,23 +1,17 @@
 import { VStack, type VStackProps } from '../../stacks/v_stack.js';
 import { clsx } from 'clsx';
 import React from 'react';
-import styles from './card.module.css';
 
 export interface CardProps extends Omit<VStackProps, 'as' | 'children'> {
   children?: React.ReactNode;
 }
 
-export const Card = React.forwardRef<HTMLElement, CardProps>(function VPanel(
+export const Card = React.forwardRef<HTMLElement, CardProps>(function Card(
   { children, className, ...props }: CardProps,
   ref
 ) {
   return (
-    <VStack
-      ref={ref}
-      as="section"
-      className={clsx(className, styles.card, 'card')}
-      {...props}
-    >
+    <VStack ref={ref} as="section" className={clsx(className, 'tcn-card')} {...props}>
       {children}
     </VStack>
   );

package/src/surfaces/modal/__stories__/modal.stories.tsx

@@ -32,7 +32,7 @@ export const ModalStory = () => {
                 <Header>
                   <Title>Modal Title</Title>
                   <Spacer />
-                  <SlimButton hierarchy="tertiary" onClick={toggle}>
+                  <SlimButton hierarchy="tertiary" size="md" onClick={toggle}>
                     <CrossIcon />
                   </SlimButton>
                 </Header>

package/src/surfaces/panel/__stories__/panel.stories.tsx

@@ -11,6 +11,7 @@ import { Title } from '../../../typography/title/title.js';
 import { VPanel } from '../v_panel.js';
 // Styles
 import styles from './panel_stories.module.css';
+import { SlimButton } from '../../../actions/index.js';
 
 export default {
   title: 'Surfaces/Panel',
@@ -25,29 +26,29 @@ export const Default = () => {
         <Header>
           <Title>Panel Primary Header</Title>
           <Spacer />
-          <Button hierarchy="tertiary">
+          <SlimButton hierarchy="tertiary">
             <GridOneIcon />
-          </Button>
+          </SlimButton>
           <Divider length="md" vertical />
-          <Button hierarchy="tertiary">
+          <SlimButton hierarchy="tertiary">
             <CrossIcon />
-          </Button>
+          </SlimButton>
         </Header>
         <UtilityBar>
           <Title>Utility Bar</Title>
           <Spacer />
-          <Button hierarchy="tertiary">
+          <SlimButton hierarchy="tertiary">
             <BugIcon />
-          </Button>
-          <Button hierarchy="tertiary">
+          </SlimButton>
+          <SlimButton hierarchy="tertiary">
             <BugIcon />
-          </Button>
-          <Button hierarchy="tertiary">
+          </SlimButton>
+          <SlimButton size="md" hierarchy="tertiary">
             <BugIcon />
-          </Button>
-          <Button hierarchy="tertiary">
+          </SlimButton>
+          <SlimButton hierarchy="tertiary">
             <BugIcon />
-          </Button>
+          </SlimButton>
         </UtilityBar>
 
         <VBody>

package/src/themes/themes/ergo/__stories__/components/material_picker/sb_inverted_materials.module.css

@@ -0,0 +1,34 @@
+.light-primary-inverted {
+  --action: var(--primary);
+  --on-action: var(--white);
+  --material: var(--white);
+  --on-material: var(--navy);
+}
+
+.light-secondary-inverted {
+  --action: var(--tan);
+  --on-action: var(--navy);
+  --material: var(--white);
+  --on-material: var(--navy);
+}
+
+.dark-primary-inverted {
+  --action: var(--slate);
+  --on-action: var(--white);
+  --material: var(--white);
+  --on-material: var(--navy);
+}
+
+.dark-secondary-inverted {
+  --action: var(--navy);
+  --on-action: var(--white);
+  --material: var(--white);
+  --on-material: var(--navy);
+}
+
+.surface-custom-inverted {
+  --action: var(--custom-material);
+  --on-action: var(--custom-on-material);
+  --material: var(--navy);
+  --on-material: var(--white);
+}

package/src/themes/themes/ergo/__stories__/components/material_picker/sb_material_picker.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import { Header } from '../../../../../../layouts/index.js';
+import { Button } from '../../../../../../actions/button/button/button.js';
+import { theme } from '../../../../../theme_variables.js';
+
+// Styles
+import styles from './sb_inverted_materials.module.css';
+
+export const SB_MaterialPicker: React.FC<{
+  handleSurfaceClick: (surface: string) => () => void;
+}> = ({ handleSurfaceClick }) => {
+  return (
+    <Header gap={theme.gap.md} height="48px">
+      <Button
+        hierarchy="primary"
+        className={clsx(styles['light-primary-inverted'])}
+        onClick={handleSurfaceClick('light-primary')}
+      >
+        Light
+      </Button>
+      <Button
+        onClick={handleSurfaceClick('light-secondary')}
+        hierarchy="primary"
+        className={clsx(styles['light-secondary-inverted'])}
+      >
+        Light Variant
+      </Button>
+      <Button
+        onClick={handleSurfaceClick('dark-primary')}
+        hierarchy="primary"
+        className={clsx(styles['dark-primary-inverted'])}
+      >
+        Dark
+      </Button>
+      <Button
+        onClick={handleSurfaceClick('dark-secondary')}
+        hierarchy="primary"
+        className={clsx(styles['dark-secondary-inverted'])}
+      >
+        Dark Variant
+      </Button>
+      <Button
+        onClick={handleSurfaceClick('surface-custom')}
+        hierarchy="primary"
+        className={clsx(styles['surface-custom-inverted'])}
+      >
+        Custom
+      </Button>
+    </Header>
+  );
+};

package/src/themes/themes/ergo/__stories__/components/tone_picker/sb_card.module.css

@@ -0,0 +1,5 @@
+.box {
+  height: 100px;
+  width: 100%;
+  background-color: rgba(120, 180, 255, 0.18);
+}

package/src/themes/themes/ergo/__stories__/components/tone_picker/sb_tone_card.tsx

@@ -0,0 +1,40 @@
+import { Header, VBody } from '../../../../../../layouts/index.js';
+import { Card } from '../../../../../../surfaces/index.js';
+import { SlimButton } from '../../../../../../actions/button/slim_button/slim_button.js';
+import { Spacer } from '../../../../../../stacks/spacer.js';
+import { Box } from '../../../../../../stacks/index.js';
+import { InfoIcon } from '@tcn/icons/info_icon.js';
+import { AlertCircleIcon } from '@tcn/icons/alert_circle_icon.js';
+import { CheckCircleIcon } from '@tcn/icons/check_circle_icon.js';
+import { theme } from '../../../../../theme_variables.js';
+
+// Styles
+import styles from './sb_card.module.css';
+import type { SB_ToneListItem } from './types.js';
+
+export const SB_ToneCard: React.FC<{
+  item: SB_ToneListItem | null;
+}> = ({ item }) => {
+  return (
+    <Card data-tone={item?.tone || 'neutral'}>
+      <Header>
+        {item?.name ?? 'Neutral'}
+        <Spacer />
+        <SlimButton size="sm" hierarchy="tertiary">
+          <InfoIcon />
+        </SlimButton>
+        <SlimButton size="sm" hierarchy="secondary">
+          <AlertCircleIcon />
+        </SlimButton>
+        <SlimButton size="sm" hierarchy="primary">
+          <CheckCircleIcon />
+        </SlimButton>
+      </Header>
+      <VBody gap={theme.gap.md}>
+        <Box className={styles.box} />
+        <Box className={styles.box} />
+        <Box className={styles.box} />
+      </VBody>
+    </Card>
+  );
+};

package/src/themes/themes/ergo/__stories__/components/tone_picker/sb_tone_picker.tsx

@@ -0,0 +1,83 @@
+import { useState } from 'react';
+import { BodyText } from '../../../../../../typography/body_text/body_text.js';
+import { Item, List, SectionHeader } from '../../../../../../layouts/index.js';
+import { HStack } from '../../../../../../stacks/h_stack.js';
+import type { SB_ToneListItem } from './types.js';
+import { SB_ToneCard } from './sb_tone_card.js';
+import { theme } from '../../../../../theme_variables.js';
+import { VStack } from '../../../../../../stacks/v_stack.js';
+
+const items: SB_ToneListItem[] = [
+  {
+    id: 'positive',
+    name: 'Positive',
+    tone: 'positive',
+  },
+  {
+    id: 'notice',
+    name: 'Notice',
+    tone: 'notice',
+  },
+  {
+    id: 'neutral',
+    name: 'Neutral',
+    tone: 'neutral',
+  },
+  {
+    id: 'warning',
+    name: 'Warning',
+    tone: 'warning',
+  },
+  {
+    id: 'danger',
+    name: 'Danger',
+    tone: 'danger',
+  },
+];
+
+export const SB_TonePicker = () => {
+  const [selectedItem, setSelectedItem] = useState<SB_ToneListItem | null>(null);
+
+  const handleItemClick = (item: SB_ToneListItem) => () => {
+    setSelectedItem(item);
+  };
+
+  return (
+    <HStack
+      gap={theme.gap.md}
+      growWeight={1}
+      paddingTop={theme.padding.md}
+      paddingBottom={theme.padding.md}
+    >
+      <VStack
+        height="100%"
+        width="auto"
+        gap={theme.gap.md}
+        hAlign="start"
+        minWidth="300px"
+      >
+        <SectionHeader>Tone Picker (WIP)</SectionHeader>
+        <List
+          padding={theme.padding.md}
+          maxWidth="200px"
+          growWeight={1}
+          height="100%"
+          overflowY="auto"
+        >
+          {items.map(item => (
+            <Item
+              key={item.id}
+              onClick={handleItemClick(item)}
+              selected={selectedItem?.id === item.id}
+            >
+              <BodyText>{item.name}</BodyText>
+            </Item>
+          ))}
+        </List>
+      </VStack>
+      <VStack height="100%">
+        <SB_ToneCard item={selectedItem || null} />
+      </VStack>
+    </HStack>
+  );
+};

package/src/themes/themes/ergo/__stories__/components/tone_picker/types.ts

@@ -0,0 +1,7 @@
+export type SB_WipTone = 'positive' | 'notice' | 'neutral' | 'warning' | 'danger';
+
+export interface SB_ToneListItem {
+  id: string;
+  name: string;
+  tone: SB_WipTone;
+}

package/src/themes/themes/ergo/__stories__/material.stories.tsx

@@ -0,0 +1,154 @@
+import React, { useState } from 'react';
+import { VStack } from '../../../../stacks/v_stack.js';
+import { clsx } from 'clsx';
+import { PlusIcon } from '@tcn/icons/plus_icon.js';
+import { Divider, Footer, Header, VBody } from '../../../../layouts/index.js';
+import { VPanel } from '../../../../surfaces/index.js';
+import { Button } from '../../../../actions/button/button/button.js';
+import { Spacer } from '../../../../stacks/spacer.js';
+import { SlimButton } from '../../../../actions/button/slim_button/slim_button.js';
+import { SB_TonePicker } from './components/tone_picker/sb_tone_picker.js';
+import { formatHSLString, getContrastText, parseHSL } from './utils.js';
+import { SB_MaterialPicker } from './components/material_picker/sb_material_picker.js';
+import { Title } from '../../../../typography/index.js';
+import { theme } from '../../../theme_variables.js';
+
+// Styles
+import styles from './sb_materials.module.css';
+
+export default {
+  title: 'Themes/Material',
+  tags: ['autodocs'],
+  argTypes: {
+    materialColor: {
+      control: { type: 'color', presetColors: [], disableAlpha: false },
+      label: 'Custom Material Color',
+      format: 'hsla',
+    },
+    accentColor: {
+      control: { type: 'color', presetColors: [], disableAlpha: false },
+      label: 'Custom Accent Color',
+      format: 'hsla',
+    },
+  },
+  args: {
+    materialColor: 'hsl(122, 100%, 20%)',
+    accentColor: 'hsl(122, 100%, 55%)',
+  },
+};
+
+function useCustomSurface(materialColor?: string, accentColor?: string) {
+  const mat = materialColor || 'hsl(122, 100%, 20%)';
+  const acc = accentColor || 'hsl(122, 100%, 55%)';
+
+  const material = parseHSL(mat);
+  const accent = parseHSL(acc);
+  const onMaterial = getContrastText(material);
+  const onAction = getContrastText(accent);
+
+  return {
+    material: formatHSLString(material),
+    accent: formatHSLString(accent),
+    onMaterial: formatHSLString(onMaterial),
+    onAction: formatHSLString(onAction),
+  };
+}
+
+export const DynamicSurface = (args: {
+  materialColor?: string;
+  accentColor?: string;
+}) => {
+  const [surface, setSurface] = useState('light-primary');
+
+  const handleSurfaceClick = (surface: string) => () => {
+    setSurface(surface);
+  };
+
+  const custom = useCustomSurface(args.materialColor, args.accentColor);
+
+  return (
+    <VStack
+      className={styles['storybook-palette']}
+      height="100%"
+      gap={theme.gap.md}
+      padding={theme.padding.md}
+      growWeight={1}
+      style={
+        {
+          '--custom-action': custom.accent,
+          '--custom-on-action': custom.onAction,
+          '--custom-material': custom.material,
+          '--custom-on-material': custom.onMaterial,
+        } as React.CSSProperties
+      }
+    >
+      <Header>
+        <Title>Ergo Theme: Materials and Surfaces</Title>
+      </Header>
+      <SB_MaterialPicker handleSurfaceClick={handleSurfaceClick} />
+      <VPanel
+        // TODO: Find a better way to have typography inherit the on material color
+        style={{
+          color: 'inherit',
+        }}
+        minHeight="200px"
+        maxHeight="700px"
+        height="100%"
+        className={clsx(styles[`${surface}`], styles['surface'])}
+      >
+        <Header>
+          Enabled Utilities
+          <Spacer />
+          <SlimButton hierarchy="tertiary">
+            <PlusIcon />
+          </SlimButton>
+          <SlimButton hierarchy="secondary">
+            <PlusIcon />
+          </SlimButton>
+          <Divider vertical />
+          <SlimButton hierarchy="primary">
+            <PlusIcon />
+          </SlimButton>
+        </Header>
+        <Header>
+          Disabled Utilities
+          <Spacer />
+          <SlimButton hierarchy="tertiary" disabled>
+            <PlusIcon />
+          </SlimButton>
+          <SlimButton hierarchy="secondary" disabled>
+            <PlusIcon />
+          </SlimButton>
+          <Divider vertical />
+          <SlimButton hierarchy="primary" disabled>
+            <PlusIcon />
+          </SlimButton>
+        </Header>
+        <VBody>
+          <SB_TonePicker />
+        </VBody>
+        <Footer>
+          Disabled Buttons
+          <Spacer />
+          <Button hierarchy="tertiary" disabled>
+            Tertiary
+          </Button>
+          <Button hierarchy="secondary" disabled>
+            Secondary
+          </Button>
+          <Button hierarchy="primary" disabled>
+            Primary
+          </Button>
+        </Footer>
+        <Footer>
+          Enabled Buttons
+          <Spacer />
+          <Button hierarchy="tertiary">Tertiary</Button>
+          <Button hierarchy="secondary">Secondary</Button>
+          <Button hierarchy="primary">Primary</Button>
+        </Footer>
+      </VPanel>
+      <Header></Header>
+    </VStack>
+  );
+};

package/src/themes/themes/ergo/__stories__/sb_materials.module.css

@@ -0,0 +1,110 @@
+.storybook-palette {
+  --background: #f1f1f1;
+  --primary: 23, 65%, 49%;
+  --navy: 213, 35.6%, 34.7%;
+  --white: 0, 0%, 100%;
+  --tan: 33, 22%, 84%;
+  --secondary: 197, 34.2%, 55.3%;
+  --secondary-light: 208 65.2% 95.5%;
+  --slate: 217, 32.6%, 17.5%;
+
+  --positive: 141, 71%, 48%; /* Green */
+  --notice: 202, 76%, 50%; /* Blue */
+  --neutral: 0, 0%, 100%; /* White */
+  --warning: 48, 100%, 50%; /* Yellow */
+  --danger: 0, 100%, 50%; /* Red */
+
+  background: var(--background);
+
+  /* This behavior can be moved to ergo theme once dialed and the global will be dropped */
+  :global(.tcn-card) {
+    :global(.tcn-header) {
+      background: hsl(var(--material));
+      color: hsl(var(--on-material));
+    }
+  }
+
+  :global(.tcn-card[data-tone="positive"]) {
+    --material: var(--positive);
+    --on-material: var(--white);
+    --action: var(--white);
+    --on-action: var(--positive);
+  }
+
+  :global(.tcn-card[data-tone="notice"]) {
+    --material: var(--notice);
+    --on-material: var(--white);
+    --action: var(--white);
+    --on-action: var(--notice);
+  }
+
+  /* :global(.tcn-card[data-tone="neutral"]) {} */
+
+  :global(.tcn-card[data-tone="warning"]) {
+    --material: var(--warning);
+    --on-material: var(--navy);
+    --action: var(--navy);
+    --on-action: var(--white);
+  }
+
+  :global(.tcn-card[data-tone="danger"]) {
+    --material: var(--danger);
+    --on-material: var(--white);
+    --action: var(--white);
+    --on-action: var(--danger);
+  }
+}
+
+.light-primary {
+  --action: var(--primary);
+  --on-action: var(--white);
+  --material: var(--white);
+  --on-material: var(--navy);
+}
+
+.light-secondary {
+  --action: var(--navy);
+  --on-action: var(--white);
+  --material: var(--tan);
+  --on-material: var(--navy);
+}
+
+.dark-primary {
+  --action: var(--secondary);
+  --on-action: var(--white);
+  --material: var(--slate);
+  --on-material: var(--white);
+}
+
+.dark-secondary {
+  --action: var(--tan);
+  --on-action: var(--navy);
+  --material: var(--navy);
+  --on-material: var(--white);
+}
+
+.light-tertiary {
+  --action: var(--navy);
+  --on-action: var(--white);
+  --material: var(--secondary-light);
+  --on-material: var(--navy);
+}
+
+.surface-custom {
+  --action: var(--custom-action);
+  --on-action: var(--custom-on-action);
+  --material: var(--custom-material);
+  --on-material: var(--custom-on-material);
+}
+
+.surface-custom-inverted {
+  --action: var(--custom-material);
+  --on-action: var(--custom-on-material);
+  --material: var(--navy);
+  --on-material: var(--white);
+}
+
+.surface {
+  background: hsl(var(--material));
+  color: hsl(var(--on-material));
+}