@tcn/ui 0.7.0 → 0.8.1

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

@@ -4,11 +4,22 @@ import { Footer } from '../../../layouts/footer/footer.js';
 import { Header } from '../../../layouts/header/header.js';
 import { Heading, Section, VBody } from '../../../layouts/index.js';
 import { UtilityBar } from '../../../layouts/utility_bar/utility_bar.js';
-import { Box, Spacer } from '../../../stacks/index.js';
+import { Box, HStack, Spacer } from '../../../stacks/index.js';
 import { Title } from '../../../typography/title/title.js';
 import { VPanel } from '../v_panel.js';
 // Styles
 import styles from './panel_stories.module.css';
+import { TTable, TBody, TD, TH, THead, TR } from '../../../layouts/table/table.js';
+import { FilterOneIcon } from '@tcn/icons/filter_one_icon.js';
+import { PlusIcon } from '@tcn/icons/plus_icon.js';
+import { SearchIcon } from '@tcn/icons/search_icon.js';
+import { ChevronLeftIcon } from '@tcn/icons/chevron_left_icon.js';
+import { ChevronsLeftIcon } from '@tcn/icons/chevrons_left_icon.js';
+import { ChevronsRightIcon } from '@tcn/icons/chevrons_right_icon.js';
+import { ChevronRightIcon } from '@tcn/icons/chevron_right_icon.js';
+import { Toggle } from '../../../actions/toggle/toggle.js';
+import { CrossIcon } from '@tcn/icons/cross_icon.js';
+import { BodyText } from '../../../typography/index.js';
 
 export default {
   title: 'Surfaces/Panel',
@@ -102,3 +113,105 @@ export const Default = () => {
     </div>
   );
 };
+
+export const WithTable = () => {
+  return (
+    <div className={styles['stories-container']}>
+      <HStack gap="16px" maxHeight="600px" height="100%" maxWidth="1440px">
+        <VPanel minWidth="300px">
+          <Header>
+            <Title emphasis="strong">Table Title</Title>
+            <Spacer />
+            <Button utility hierarchy="tertiary">
+              <FilterOneIcon />
+            </Button>
+            <Button utility hierarchy="tertiary">
+              <SearchIcon />
+            </Button>
+            <Button utility hierarchy="primary">
+              <PlusIcon />
+            </Button>
+          </Header>
+          <VBody>
+            <TTable>
+              <THead>
+                <TR>
+                  <TH>Name</TH>
+                  <TH>Age</TH>
+                  <TH>Email</TH>
+                </TR>
+              </THead>
+              <TBody>
+                <TR>
+                  <TD>Jane Smith</TD>
+                  <TD>32</TD>
+                  <TD>jane.smith@example.com</TD>
+                </TR>
+                <TR>
+                  <TD>Samuel Barnett</TD>
+                  <TD>28</TD>
+                  <TD>samuel.barnett@example.com</TD>
+                </TR>
+                <TR isSelected>
+                  <TD>John Doe</TD>
+                  <TD>25</TD>
+                  <TD>john.doe@example.com</TD>
+                </TR>
+                <TR>
+                  <TD>Linda Wang</TD>
+                  <TD>41</TD>
+                  <TD>linda.wang@example.com</TD>
+                </TR>
+              </TBody>
+            </TTable>
+          </VBody>
+          <Footer>
+            <HStack gap="8px" hAlign="center">
+              <Button utility hierarchy="tertiary">
+                <ChevronsLeftIcon />
+              </Button>
+              <Button utility hierarchy="tertiary">
+                <ChevronLeftIcon />
+              </Button>
+              <Toggle utility>1</Toggle>
+              ...
+              <Toggle utility>4</Toggle>
+              <Toggle utility selected>
+                5
+              </Toggle>
+              <Toggle utility>6</Toggle>
+              ...
+              <Toggle utility>100</Toggle>
+              <Button utility hierarchy="tertiary">
+                <ChevronsRightIcon />
+              </Button>
+              <Button utility hierarchy="tertiary">
+                <ChevronRightIcon />
+              </Button>
+            </HStack>
+          </Footer>
+        </VPanel>
+        <VPanel maxHeight="600px" width="300px" minWidth="300px">
+          <Header>
+            <Title emphasis="strong">John Doe</Title>
+            <Spacer />
+            <Button utility hierarchy="tertiary">
+              <CrossIcon />
+            </Button>
+          </Header>
+          <VBody>
+            <Section>
+              <Heading>Personal Information</Heading>
+              <BodyText>
+                John Doe is a software engineer at FooBaz. He is a very smart guy and he
+                loves to code.
+              </BodyText>
+              <BodyText>Age: 25</BodyText>
+              <BodyText>Email: john.doe@example.com</BodyText>
+            </Section>
+          </VBody>
+        </VPanel>
+      </HStack>
+    </div>
+  );
+};

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)));
@@ -499,8 +501,12 @@
         --act: var(--ergo-primary);
       }
 
+      .tcn-tab-item:focus-visible {
+        z-index: 2;
+      }
       /* Hover Indicator */
-      .tcn-tab-item[data-is-selected="false"]:hover::after {
+      .tcn-tab-item[data-is-selected="false"]:hover::after,
+      .tcn-tab-item[data-is-selected="false"]:focus-visible::after {
         content: "";
         display: block;
         position: absolute;
@@ -602,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),
@@ -629,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);
     }
   }
 
@@ -708,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);
@@ -718,7 +715,7 @@
     }
 
     :where(.tcn-header) {
-      min-height: 32px;
+      min-height: var(--bar-md);
 
       --material: var(--ergo-secondary-dark);
       --on-material: var(--ergo-white);
@@ -746,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);
@@ -757,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);
@@ -770,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) +
@@ -863,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/dist/formatter-EIJCOSYU-D6nmx63h.js

@@ -1,6 +0,0 @@
-import { d as a, _ as i, r as m } from "./showcase-DK557szS.js";
-var t = i(m(), 1), f = (0, t.default)(2)(async (e, r) => e === !1 ? r : a(r));
-export {
-  f as formatter
-};
-//# sourceMappingURL=formatter-EIJCOSYU-D6nmx63h.js.map