@tcn/ui 0.8.0 → 0.9.0

package/src/surfaces/pop_confirm/pop_confirm.stories.tsx

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react';
 import { Button } from '../../actions/index.js';
-import { Footer, Header, VBody } from '../../layouts/index.js';
+import { Footer, Header, Section, VBody } from '../../layouts/index.js';
 import { HStack } from '../../stacks/h_stack.js';
 import { PopConfirm as PopConfirmComponent } from './pop_confirm.js';
 import { BodyText, Title } from '../../typography/index.js';
@@ -52,7 +52,9 @@ export const DefaultPopConfirm = () => {
             <Title>Confirmation Title</Title>
           </Header>
           <VBody>
-            <BodyText>Are you sure you want to confirm this action?</BodyText>
+            <Section>
+              <BodyText>Are you sure you want to confirm this action?</BodyText>
+            </Section>
           </VBody>
           <Footer>
             <Spacer />

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

@@ -1,10 +1,3 @@
-@layer tcn-reset {
-  * {
-    position: relative;
-    box-sizing: border-box;
-  }
-}
-
 @layer tcn-theme {
   /* ===== CSS VARIABLES ===== */
   :root {
@@ -63,6 +56,13 @@
     --padding-medium: 8px;
     --padding-large: 16px;
 
+    /* Sizing */
+    --bar-xs: 16px;
+    --bar-sm: 24px;
+    --bar-md: 32px;
+    --bar-lg: 40px;
+    --bar-xl: 48px;
+
     /* Status Colors */
     --status-color-disabled: var(--ergo-grey-light);
     --status-color-info: var(--ergo-status-blue);
@@ -70,7 +70,7 @@
     --status-color-positive: var(--ergo-status-green);
     --status-color-error: var(--ergo-status-red);
 
-    --async-color-initial: var(--ergo-grey-main);
+    --async-color-initial: var(--ergo-grey);
     --async-color-pending: var(--ergo-status-blue);
     --async-color-success: var(--ergo-status-green);
     --async-color-failed: var(--ergo-status-red);
@@ -193,6 +193,7 @@
 
     --btn-pad-delta: 4px;
     --btn-size-delta: 4px;
+    --btn-font-size-delta: 2px;
     --btn-step: 1;
 
     /* Increase size and pad by 4px for each size "step" from medium */
@@ -223,6 +224,7 @@
       --util-ratio: 0.75;
       --btn-size-base: 18px;
 
+      font-size: calc(var(--font-size) + var(--btn-font-size-delta) * var(--btn-step));
       .tcn-icon {
         min-height: min(2px, calc(var(--btn-size) * var(--util-ratio)));
         min-width: min(2px, calc(var(--btn-size) * var(--util-ratio)));
@@ -606,19 +608,26 @@
   }
 
   /* Scaffold: */
+  .tcn-footer,
+  .tcn-header,
+  .tcn-utility-bar {
+    padding-inline: var(--pad-inline, var(--padding-medium));
+    gap: var(--gap-medium);
+  }
+
+  .tcn-utility-bar {
+    min-height: var(--bar-md);
+  }
+
+  .tcn-footer,
+  .tcn-header {
+    min-height: var(--bar-lg);
+  }
+
   .tcn-scaffold {
-    --scaffold-v-inset: var(--v-inset, var(--padding-large));
-    --scaffold-header-size: var(--header-size, 40px);
-    --scaffold-footer-size: var(--footer-size, 40px);
-    --scaffold-utility-bar-size: var(--utility-bar-size, 32px);
     --scaffold-divide-footer: var(--divide-footer, 1);
     --scaffold-divide-header: var(--divide-header, 1);
-
-    :where(.tcn-header) {
-      min-height: var(--scaffold-header-size);
-      padding: 0 var(--scaffold-v-inset);
-      gap: var(--gap-medium);
-    }
+    --pad-inline: var(--padding-large);
 
     /* Border appears on body only when it follows header or utility-bar */
     :where(.tcn-header) + :where(.tcn-body),
@@ -633,25 +642,8 @@
         var(--foreground-color-primary);
     }
 
-    :where(.tcn-utility-bar) {
-      min-height: var(--scaffold-utility-bar-size);
-      padding: 0 var(--scaffold-v-inset);
-      gap: var(--gap-medium);
-    }
-
     :where(.tcn-body) {
-      --section-tab-start: var(--scaffold-v-inset);
-
-      gap: var(--gap-medium);
-      .tcn-section {
-        --section-tab-start: var(--scaffold-v-inset);
-      }
-    }
-
-    :where(.tcn-footer) {
       gap: var(--gap-medium);
-      min-height: var(--scaffold-footer-size);
-      padding: 0 var(--scaffold-v-inset);
     }
   }
 
@@ -712,9 +704,10 @@
 
   .tcn-pop-confirm {
     --divide-header: 0;
-    --v-inset: var(--padding-medium);
 
     :where(.tcn-scaffold) {
+      --pad-inline: var(--padding-medium);
+
       box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);
       border-radius: var(--shape-radius-medium);
       background-color: var(--background-color-primary);
@@ -722,7 +715,7 @@
     }
 
     :where(.tcn-header) {
-      min-height: 32px;
+      min-height: var(--bar-md);
 
       --material: var(--ergo-secondary-dark);
       --on-material: var(--ergo-white);
@@ -750,9 +743,6 @@
 
   /* Card */
   .tcn-card {
-    --header-size: 32px;
-    --footer-size: 32px;
-    --utility-bar-size: 24px;
     --divide-header: 0;
 
     background-color: var(--background-color-primary);
@@ -761,7 +751,7 @@
     overflow: hidden;
 
     :where(.tcn-header) {
-      min-height: 32px;
+      min-height: var(--bar-md);
 
       --material: var(--ergo-secondary-light);
       --on-material: var(--ergo-accent-blue);
@@ -774,13 +764,17 @@
         color: inherit;
       }
     }
+
+    :where(.tcn-utility-bar) {
+      min-height: var(--bar-sm);
+    }
   }
 
   /* SECTION */
   .tcn-section {
     --max-section-depth: 4;
     --section-tab-width: 4px;
-    --section-tab-start: 8px;
+    --section-tab-start: var(--pad-inline, var(--padding-medium));
     --section-tab-depth: 0;
     --section-tab: calc(
       var(--section-tab-start) +
@@ -867,4 +861,141 @@
       border-bottom: var(--caret-triangle-base);
     }
   }
+
+  /* ===== TABLE ===== */
+  .tcn-table {
+    --table-pad-inline: var(--pad-inline, var(--padding-medium));
+
+    --material: var(--ergo-white);
+    --on-material: var(--ergo-ink-primary);
+    --action: var(--ergo-accent-blue);
+    --on-action: var(--ergo-white);
+    background-color: var(--material);
+    color: var(--on-material);
+    border-collapse: separate;
+    display: block;
+  }
+
+  /* TODO: cleanup  - this needs merged with ui-table sticky logic/styles */
+  .tcn-table[data-is-sticky="true"] {
+    .tcn-tbody {
+      th:first-of-type {
+        border-right: 1px solid color-mix(in srgb, var(--material) 80%, black);
+      }
+
+      th:last-of-type {
+        border-left: 1px solid color-mix(in srgb, var(--material) 80%, black);
+      }
+    }
+    .tcn-thead {
+      th:first-of-type {
+        border-right: 1px solid color-mix(in srgb, var(--material) 80%, black);
+      }
+
+      th:last-of-type {
+        border-left: 1px solid color-mix(in srgb, var(--material) 80%, black);
+      }
+    }
+  }
+
+  .tcn-td {
+    text-align: start;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .tcn-thead {
+    /* Border for header row */
+    .tcn-tr {
+      height: var(--bar-md);
+      .tcn-th {
+        border-bottom: 1px solid var(--ergo-grey-light);
+      }
+      .tcn-th:not(:last-of-type):not(:nth-last-of-type(2)) {
+        border-right: 1px solid var(--ergo-grey);
+      }
+      .tcn-th:last-of-type {
+        border-left: 1px solid var(--ergo-grey);
+      }
+    }
+  }
+
+  .tcn-tfoot {
+    font-weight: bold;
+    /* Border for footer row */
+    .tcn-tr {
+      height: var(--bar-sm);
+      .tcn-th,
+      .tcn-td {
+        border-top: 1px solid var(--ergo-grey-light);
+      }
+    }
+  }
+
+  /* Header and footer - both are light blue  */
+  .tcn-thead,
+  .tcn-tfoot {
+    font-size: 14px;
+    --material: var(--ergo-secondary-light);
+    --on-material: var(--ergo-accent-blue);
+    --action: var(--ergo-secondary);
+    --on-action: var(--ergo-white);
+
+    background-color: var(--material);
+    color: var(--on-material);
+  }
+
+  .tcn-tr {
+    height: var(--bar-sm);
+    align-content: center;
+  }
+
+  .tcn-td,
+  .tcn-th {
+    padding-inline: var(--padding-medium);
+    vertical-align: middle;
+    text-align: start;
+    background: var(--material);
+  }
+
+  /* First column (header, body, footer): use context for pad inline or default 8px */
+  .tcn-table .tcn-tr > .tcn-th:first-child,
+  .tcn-table .tcn-tr > .tcn-td:first-child {
+    padding-inline-start: var(--table-pad-inline);
+  }
+
+  /* Last column (header, body, footer): use context for pad inline or default 8px */
+  .tcn-table .tcn-tr > .tcn-th:last-child,
+  .tcn-table .tcn-tr > .tcn-td:last-child {
+    padding-inline-end: var(--table-pad-inline);
+  }
+
+  .tcn-tbody {
+    font-size: 12px;
+    .tcn-tr:nth-of-type(even) {
+      --material: var(--ergo-accent-blue-light);
+    }
+    .tcn-tr:nth-of-type(odd) {
+      --material: var(--ergo-white);
+    }
+    .tcn-tr:hover {
+      --material: color-mix(in srgb, var(--ergo-accent-blue-light), var(--action) 12%);
+    }
+    .tcn-tr[data-is-selected="true"] {
+      --material: var(--ergo-secondary);
+      --on-material: var(--ergo-white);
+      --action: var(--ergo-tertiary);
+      --on-action: var(--ergo-accent-blue);
+    }
+
+    .tcn-tr {
+      --material: var(--bg-row);
+      --on-material: var(--ergo-accent-blue);
+      --action: var(--ergo-accent-blue);
+      --on-action: var(--ergo-white);
+      background-color: var(--material);
+      color: var(--on-material);
+    }
+  }
 }

package/src/typography/body_text/body_text.tsx

@@ -20,22 +20,25 @@ export interface BodyTextOwnProps {
 
 export type BodyTextProps = WithDetailedHTMLProps<BodyTextOwnProps, 'div'>;
 
-export function BodyText({
-  size = 'md',
-  emphasis = 'normal',
-  hierarchy = 'primary',
-  color,
-  children,
-  className,
-  style = {},
-  padStart,
-  padEnd,
-  padBottom,
-  padTop,
-  pad,
-  selectable = true,
-  breakWords = false,
-}: BodyTextProps) {
+export const BodyText = React.forwardRef<HTMLDivElement, BodyTextProps>(function (
+  {
+    size = 'md',
+    emphasis = 'normal',
+    hierarchy = 'primary',
+    color,
+    children,
+    className,
+    style = {},
+    padStart,
+    padEnd,
+    padBottom,
+    padTop,
+    pad,
+    selectable = true,
+    breakWords = false,
+  }: BodyTextProps,
+  ref
+) {
   if (pad) {
     style.padding = pad;
   }
@@ -62,6 +65,7 @@ export function BodyText({
 
   return (
     <div
+      ref={ref}
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
@@ -73,4 +77,4 @@ export function BodyText({
       {children}
     </div>
   );
-}
+});

package/src/typography/callout/callout.tsx

@@ -20,21 +20,24 @@ export interface CalloutOwnProps {
 
 export type CalloutProps = WithDetailedHTMLProps<CalloutOwnProps, 'div'>;
 
-export function Callout({
-  size = 'md',
-  emphasis = 'normal',
-  hierarchy = 'primary',
-  color,
-  children,
-  className,
-  style = {},
-  padStart,
-  padEnd,
-  padBottom,
-  padTop,
-  pad,
-  selectable = true,
-}: CalloutProps) {
+export const Callout = React.forwardRef<HTMLDivElement, CalloutProps>(function Callout(
+  {
+    size = 'md',
+    emphasis = 'normal',
+    hierarchy = 'primary',
+    color,
+    children,
+    className,
+    style = {},
+    padStart,
+    padEnd,
+    padBottom,
+    padTop,
+    pad,
+    selectable = true,
+  }: CalloutProps,
+  ref
+) {
   if (pad) {
     style.padding = pad;
   }
@@ -61,6 +64,7 @@ export function Callout({
 
   return (
     <div
+      ref={ref}
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
@@ -71,4 +75,4 @@ export function Callout({
       {children}
     </div>
   );
-}
+});

package/src/typography/caption/caption.tsx

@@ -20,21 +20,24 @@ export interface CaptionOwnProps {
 
 export type CaptionProps = WithDetailedHTMLProps<CaptionOwnProps, 'div'>;
 
-export function Caption({
-  size = 'md',
-  emphasis = 'normal',
-  hierarchy = 'primary',
-  color,
-  children,
-  className,
-  style = {},
-  padStart,
-  padEnd,
-  padBottom,
-  padTop,
-  pad,
-  selectable = true,
-}: CaptionProps) {
+export const Caption = React.forwardRef<HTMLDivElement, CaptionProps>(function Caption(
+  {
+    size = 'md',
+    emphasis = 'normal',
+    hierarchy = 'primary',
+    color,
+    children,
+    className,
+    style = {},
+    padStart,
+    padEnd,
+    padBottom,
+    padTop,
+    pad,
+    selectable = true,
+  }: CaptionProps,
+  ref
+) {
   if (pad) {
     style.padding = pad;
   }
@@ -61,6 +64,7 @@ export function Caption({
 
   return (
     <div
+      ref={ref}
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
@@ -71,4 +75,4 @@ export function Caption({
       {children}
     </div>
   );
-}
+});

package/src/typography/footnote/footnote.tsx

@@ -20,21 +20,24 @@ export interface FootnoteOwnProps {
 
 export type FootnoteProps = WithDetailedHTMLProps<FootnoteOwnProps, 'div'>;
 
-export function Footnote({
-  size = 'md',
-  emphasis = 'normal',
-  hierarchy = 'primary',
-  color,
-  children,
-  className,
-  style = {},
-  padStart,
-  padEnd,
-  padBottom,
-  padTop,
-  pad,
-  selectable = true,
-}: FootnoteProps) {
+export const Footnote = React.forwardRef<HTMLDivElement, FootnoteProps>(function Footnote(
+  {
+    size = 'md',
+    emphasis = 'normal',
+    hierarchy = 'primary',
+    color,
+    children,
+    className,
+    style = {},
+    padStart,
+    padEnd,
+    padBottom,
+    padTop,
+    pad,
+    selectable = true,
+  }: FootnoteProps,
+  ref
+) {
   if (pad) {
     style.padding = pad;
   }
@@ -61,6 +64,7 @@ export function Footnote({
 
   return (
     <div
+      ref={ref}
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
@@ -71,4 +75,4 @@ export function Footnote({
       {children}
     </div>
   );
-}
+});

package/src/typography/headline/headline.tsx

@@ -20,65 +20,71 @@ export interface HeadlineOwnProps {
 
 export type HeadlineProps = WithDetailedHTMLProps<HeadlineOwnProps, 'h1' | 'h2' | 'h3'>;
 
-export function Headline({
-  size = 'md',
-  emphasis = 'normal',
-  hierarchy = 'primary',
-  color,
-  children,
-  className,
-  style = {},
-  padStart,
-  padEnd,
-  padBottom,
-  padTop,
-  pad,
-  selectable = true,
-}: HeadlineProps) {
-  let As: React.ElementType;
+export const Headline = React.forwardRef<HTMLHeadingElement, HeadlineProps>(
+  function Headline(
+    {
+      size = 'md',
+      emphasis = 'normal',
+      hierarchy = 'primary',
+      color,
+      children,
+      className,
+      style = {},
+      padStart,
+      padEnd,
+      padBottom,
+      padTop,
+      pad,
+      selectable = true,
+    }: HeadlineProps,
+    ref
+  ) {
+    let As: React.ElementType;
 
-  if (size === 'lg') {
-    As = 'h1';
-  } else if (size === 'md') {
-    As = 'h2';
-  } else {
-    As = 'h3';
-  }
+    if (size === 'lg') {
+      As = 'h1';
+    } else if (size === 'md') {
+      As = 'h2';
+    } else {
+      As = 'h3';
+    }
 
-  if (pad) {
-    style.padding = pad;
-  }
+    if (pad) {
+      style.padding = pad;
+    }
 
-  if (padStart) {
-    style.paddingInlineStart = padStart;
-  }
+    if (padStart) {
+      style.paddingInlineStart = padStart;
+    }
 
-  if (padEnd) {
-    style.paddingInlineEnd = padEnd;
-  }
+    if (padEnd) {
+      style.paddingInlineEnd = padEnd;
+    }
 
-  if (padTop) {
-    style.paddingTop = padTop;
-  }
+    if (padTop) {
+      style.paddingTop = padTop;
+    }
 
-  if (padBottom) {
-    style.paddingBottom = padBottom;
-  }
+    if (padBottom) {
+      style.paddingBottom = padBottom;
+    }
 
-  if (color) {
-    style.color = color;
-  }
+    if (color) {
+      style.color = color;
+    }
 
-  return (
-    <As
-      data-hierarchy={hierarchy}
-      data-emphasis={emphasis}
-      data-selectable={selectable}
-      className={clsx(styles['headline'], className, 'tcn-headline')}
-      style={style}
-      data-size={size}
-    >
-      {children}
-    </As>
-  );
-}
+    return (
+      <As
+        ref={ref}
+        data-hierarchy={hierarchy}
+        data-emphasis={emphasis}
+        data-selectable={selectable}
+        className={clsx(styles['headline'], className, 'tcn-headline')}
+        style={style}
+        data-size={size}
+      >
+        {children}
+      </As>
+    );
+  }
+);