@tcn/ui 0.14.0 → 0.15.0

package/src/layouts/section/__stories__/section.stories.tsx

@@ -1,7 +1,8 @@
 import { Key } from '../../../tokens/key/key.js';
 import { Value } from '../../../tokens/value/value.js';
-import { Row } from '../../row/row.js';
+import { Term } from '../../../tokens/term/term.js';
 import { Section } from '../section.js';
+import { Detail } from '../detail.js';
 import styles from './section.stories.module.css';
 import { Heading } from '../heading.js';
 
@@ -17,56 +18,84 @@ export const Default = () => {
       <div className={styles['stories-container']}>
         <Section>
           <Heading>Section 1</Heading>
-          <Rows />
+          <Detail>
+            <SBTermGroup />
+          </Detail>
           <Section>
             <Heading>Subsection 1 - 1</Heading>
-            <Rows />
+            <Detail>
+              <SBTermGroup />
+            </Detail>
             <Section>
               <Heading>Subsection 1 - 1 - 1</Heading>
-              <Rows />
+              <Detail>
+                <SBTermGroup />
+              </Detail>
             </Section>
             <Section>
               <Heading>Subsection 1 - 1 - 2</Heading>
-              <Rows />
+              <Detail>
+                <SBTermGroup />
+              </Detail>
             </Section>
             <Section>
               <Heading>Subsection 1 - 1 - 3</Heading>
-              <Rows />
+              <Detail>
+                <SBTermGroup />
+              </Detail>
             </Section>
           </Section>
           <Section>
             <Heading>Subsection 1 - 2</Heading>
-            <Rows />
+            <Detail>
+              <SBTermGroup />
+            </Detail>
             <Section>
               <Heading>Subsection 1 - 2 - 1</Heading>
-              <Rows />
+              <Detail>
+                <SBTermGroup />
+              </Detail>
             </Section>
             <Section>
               <Heading>Subsection 1 - 2 - 2</Heading>
-              <Rows />
+              <Detail>
+                <SBTermGroup />
+              </Detail>
             </Section>
             <Section>
               <Heading>Subsection 1 - 2 - 3</Heading>
-              <Rows />
+              <Detail>
+                <SBTermGroup />
+              </Detail>
             </Section>
           </Section>
           <Section>
             <Heading>Subsection 1 - 3</Heading>
-            <Rows />
+            <Detail>
+              <SBTermGroup />
+            </Detail>
             <Section>
               <Heading>Subsection 1 - 3 - 1</Heading>
-              <Rows />
+              <Detail>
+                <SBTermGroup />
+              </Detail>
             </Section>
             <Section>
               <Heading>Subsection 1 - 3 - 2</Heading>
-              <Rows />
+              <Detail>
+                <SBTermGroup />
+              </Detail>
             </Section>
             <Section>
               <Heading>Subsection 1 - 3 - 3</Heading>
-              <Rows />
+              <Detail>
+                <SBTermGroup />
+              </Detail>
               <Section>
                 <Heading>Subsection 1 - 3 - 3 - 1</Heading>
-                <Rows />
+                <Detail>
+                  <SBTermGroup />
+                </Detail>
               </Section>
             </Section>
           </Section>
@@ -76,77 +105,77 @@ export const Default = () => {
   );
 };
 
-const Rows = () => {
+const SBTermGroup = () => {
   return (
     <>
-      <Row>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
-      <Row>
+      </Term>
+      <Term>
         <Key>Key</Key>
         <Value>Value</Value>
-      </Row>
+      </Term>
     </>
   );
 };

package/src/layouts/section/detail.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import { VStack, type VStackProps } from '../../stacks/v_stack.js';
+
+export const Detail = React.forwardRef<HTMLDivElement, VStackProps>(function Detail(
+  { children, className, ...props },
+  ref
+) {
+  return (
+    <VStack ref={ref} className={clsx(className, 'tcn-detail')} {...props}>
+      {children}
+    </VStack>
+  );
+});

package/src/layouts/section/index.ts

@@ -0,0 +1,3 @@
+export { Section } from './section.js';
+export { Heading, type HeadingOwnProps } from './heading.js';
+export { Detail } from './detail.js';

package/src/layouts/section/section.module.css

@@ -2,40 +2,4 @@
   :where(.section) {
     position: relative;
   }
-
-  :where(.heading) {
-    position: sticky;
-    height: 23px;
-    z-index: 4;
-    padding-inline-end: 8px;
-    user-select: none;
-  }
-
-  :where(.section > .heading) {
-    top: 0;
-    padding-inline: 8px 8px;
-    z-index: 3;
-  }
-
-  :where(.section > .section > .heading) {
-    top: 30px;
-    padding-inline: 12px 8px;
-    z-index: 2;
-  }
-
-  :where(.section > .section > .section > .heading) {
-    top: 60px;
-    padding-inline: 16px 8px;
-    z-index: 1;
-  }
-
-  :where(.section > .section > .section > .section > .heading) {
-    top: 90px;
-    padding-inline: 20px 8px;
-    z-index: 0;
-  }
-
-  .section > :not(.heading, .section) {
-    padding-inline-end: 8px;
-  }
 }

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

@@ -2,7 +2,7 @@ import { GridOneIcon } from '@tcn/icons/grid_one_icon.js';
 import { Button } from '../../../actions/button/button/button.js';
 import { Footer } from '../../../layouts/footer/footer.js';
 import { Header } from '../../../layouts/header/header.js';
-import { Heading, Scaffold, Section } from '../../../layouts/index.js';
+import { Detail, Heading, Scaffold, Section } from '../../../layouts/index.js';
 import { UtilityBar } from '../../../layouts/utility_bar/utility_bar.js';
 import { Box, HStack, Spacer } from '../../../stacks/index.js';
 import { Title } from '../../../typography/title/title.js';
@@ -19,9 +19,11 @@ 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';
 import { Card } from '../../card/card.js';
-import { Row } from '../../../layouts/row/row.js';
+import { Callout } from '../../../typography/index.js';
+import { Term } from '../../../tokens/term/term.js';
+import { Key } from '../../../tokens/key/key.js';
+import { Value } from '../../../tokens/value/value.js';
 
 export default {
   title: 'Surfaces/Panel',
@@ -49,7 +51,9 @@ const SectionMockData: React.FC<{
         <Spacer />
         <UtilGroupExample />
       </Heading>
-      <Ipsum />
+      <Detail>
+        <Ipsum />
+      </Detail>
       {children}
     </Section>
   );
@@ -204,12 +208,24 @@ export const WithTable = () => {
           <Scaffold>
             <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>
+              <Detail>
+                <Callout>
+                  John Doe is a software engineer at FooBaz. He is a very smart guy and he
+                  loves to code.
+                </Callout>
+                <Term>
+                  <Key>Name</Key>
+                  <Value>John Doe</Value>
+                </Term>
+                <Term>
+                  <Key>Age</Key>
+                  <Value>25</Value>
+                </Term>
+                <Term>
+                  <Key>Email</Key>
+                  <Value>john.doe@example.com</Value>
+                </Term>
+              </Detail>
             </Section>
           </Scaffold>
         </Panel>
@@ -237,7 +253,7 @@ export const WithCards = () => {
           <Scaffold>
             <Section>
               <Heading>Section with Cards</Heading>
-              <Row>
+              <Detail>
                 <Card>
                   <Header>
                     <Title>Card One</Title>
@@ -246,8 +262,6 @@ export const WithCards = () => {
                     <CardIpsum />
                   </Scaffold>
                 </Card>
-              </Row>
-              <Row>
                 <Card>
                   <Header>
                     <Title>Card Two</Title>
@@ -256,11 +270,11 @@ export const WithCards = () => {
                     <CardIpsum />
                   </Scaffold>
                 </Card>
-              </Row>
+              </Detail>
             </Section>
             <Section>
               <Heading>Another Section with a Card</Heading>
-              <Row>
+              <Detail>
                 <Card>
                   <Header>
                     <Title>Card Three</Title>
@@ -269,7 +283,7 @@ export const WithCards = () => {
                     <CardIpsum />
                   </Scaffold>
                 </Card>
-              </Row>
+              </Detail>
             </Section>
           </Scaffold>
         </Panel>
@@ -280,33 +294,63 @@ export const WithCards = () => {
             <UtilGroupExample />
           </Header>
           <Scaffold>
-            <Card>
-              <Header>
-                <Title>Card A</Title>
-              </Header>
-              <Scaffold>
-                <CardIpsum />
-              </Scaffold>
-            </Card>
-            <Card>
-              <Header>
-                <Title>Card B</Title>
-              </Header>
-              <Scaffold>
-                <CardIpsum />
-              </Scaffold>
-            </Card>
-            <Card>
-              <Header>
-                <Title>Card C</Title>
-              </Header>
-              <Scaffold>
-                <CardIpsum />
-              </Scaffold>
-            </Card>
+            <Detail>
+              <Card>
+                <Header>
+                  <Title>Card A</Title>
+                </Header>
+                <Scaffold>
+                  <CardIpsum />
+                </Scaffold>
+              </Card>
+              <Card>
+                <Header>
+                  <Title>Card B</Title>
+                </Header>
+                <Scaffold>
+                  <CardIpsum />
+                </Scaffold>
+              </Card>
+              <Card>
+                <Header>
+                  <Title>Card C</Title>
+                </Header>
+                <Scaffold>
+                  <CardIpsum />
+                </Scaffold>
+              </Card>
+            </Detail>
           </Scaffold>
         </Panel>
       </HStack>
     </Box>
   );
 };
+
+export const WithDetailOnly = () => {
+  return (
+    <Box className={styles['stories-container']}>
+      <Panel maxHeight="400px" width="300px">
+        <Header>
+          <Title emphasis="strong">Request Details</Title>
+        </Header>
+        <Scaffold>
+          <Detail>
+            <Term>
+              <Key>Agent</Key>
+              <Value>John Doe</Value>
+            </Term>
+            <Term>
+              <Key>Start Date</Key>
+              <Value>12:00 05/27/2023</Value>
+            </Term>
+            <Term>
+              <Key>End Date</Key>
+              <Value>12:00 05/29/2023</Value>
+            </Term>
+          </Detail>
+        </Scaffold>
+      </Panel>
+    </Box>
+  );
+};

package/src/themes/build_stylesheet.ts

@@ -0,0 +1,5 @@
+export function buildStyleSheet(parts: string[]): CSSStyleSheet {
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(parts.join('\n'));
+  return sheet;
+}

package/src/themes/theme_variables.ts

@@ -24,6 +24,14 @@ const asyncColors = {
   failed: 'var(--async-color-failed)',
 };
 
+const actionSeverity = {
+  dangerous: 'var(--action-severity-dangerous)',
+  cautious: 'var(--action-severity-cautious)',
+  neutral: 'var(--action-severity-neutral)',
+  suggested: 'var(--action-severity-suggested)',
+  encouraged: 'var(--action-severity-encouraged)',
+};
+
 const colors = {
   primary: {
     faint: 'var(--primary-color-faint)',
@@ -78,4 +86,5 @@ export const theme = {
   accentColor: 'var(--accent-color)',
   statusColors,
   asyncColors,
+  actionSeverity,
 };