@tcn/ui 0.14.0 → 0.16.0

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

@@ -2,7 +2,9 @@ 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 { Column } from '../../../layouts/containers/columns/column.js';
+import { Columns } from '../../../layouts/containers/columns/columns.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 +21,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 +53,9 @@ const SectionMockData: React.FC<{
         <Spacer />
         <UtilGroupExample />
       </Heading>
-      <Ipsum />
+      <Detail>
+        <Ipsum />
+      </Detail>
       {children}
     </Section>
   );
@@ -204,12 +210,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 +255,7 @@ export const WithCards = () => {
           <Scaffold>
             <Section>
               <Heading>Section with Cards</Heading>
-              <Row>
+              <Detail>
                 <Card>
                   <Header>
                     <Title>Card One</Title>
@@ -246,8 +264,6 @@ export const WithCards = () => {
                     <CardIpsum />
                   </Scaffold>
                 </Card>
-              </Row>
-              <Row>
                 <Card>
                   <Header>
                     <Title>Card Two</Title>
@@ -256,11 +272,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 +285,7 @@ export const WithCards = () => {
                     <CardIpsum />
                   </Scaffold>
                 </Card>
-              </Row>
+              </Detail>
             </Section>
           </Scaffold>
         </Panel>
@@ -280,33 +296,124 @@ 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 WithColumns = () => {
+  return (
+    <Box className={styles['stories-container']}>
+      <Panel maxHeight="600px">
+        <Header>
+          <Title emphasis="strong">Panel With Columns</Title>
+          <Spacer />
+          <UtilGroupExample />
+        </Header>
+        <Scaffold>
+          <Columns>
+            <Column minWidth="300px">
+              <Section>
+                <Heading>General</Heading>
+                <Detail>
+                  <Term>
+                    <Key>Agent</Key>
+                    <Value>John Doe</Value>
+                  </Term>
+                  <Term>
+                    <Key>Queue</Key>
+                    <Value>Support</Value>
+                  </Term>
+                  <Term>
+                    <Key>Status</Key>
+                    <Value>Active</Value>
+                  </Term>
+                </Detail>
+              </Section>
+            </Column>
+            <Column minWidth="300px">
+              <Section>
+                <Heading>Contact</Heading>
+                <Detail>
+                  <Term>
+                    <Key>Email</Key>
+                    <Value>john.doe@example.com</Value>
+                  </Term>
+                  <Term>
+                    <Key>Phone</Key>
+                    <Value>+1 555 000 1234</Value>
+                  </Term>
+                  <Term>
+                    <Key>Start Date</Key>
+                    <Value>05/27/2023</Value>
+                  </Term>
+                </Detail>
+              </Section>
+            </Column>
+          </Columns>
+        </Scaffold>
+        <Footer>
+          <Spacer />
+          <Button hierarchy="secondary">Cancel</Button>
+          <Button hierarchy="primary">Save</Button>
+        </Footer>
+      </Panel>
+    </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,
 };