npm - @tcn/ui - Versions diffs - 0.13.1 → 0.15.0 - Mend

@tcn/ui 0.13.1 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (336) hide show

package/src/overlay/slide/slide.stories.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Header, Scaffold, Body } from '../../layouts/index.js';
+import { Header, Scaffold } from '../../layouts/index.js';
 import { ZStack } from '../../stacks/z_stack.js';
 import { BodyText } from '../../typography/index.js';
 import { Title } from '../../typography/title/title.js';
@@ -46,14 +46,11 @@ export const SlideStory = (args: Omit<SlideProps, 'children'>) => {
               <Title> This is a Slide</Title>
             </Header>
           </DragHandle>
-          <Body>
-            <Scaffold>
-              <BodyText>
-                This component is fixed to a side of a container (top, bottom, start,
-                end).
-              </BodyText>
-            </Scaffold>
-          </Body>
+          <Scaffold>
+            <BodyText>
+              This component is fixed to a side of a container (top, bottom, start, end).
+            </BodyText>
+          </Scaffold>
         </Scaffold>
       </Slide>
     </ZStack>

package/src/surfaces/aside/aside.module.css CHANGED Viewed

@@ -1,5 +1,6 @@
 @layer tcn-system {
   .aside {
     height: 100%;
+    flex-grow: 0;
   }
 }

package/src/surfaces/aside/aside.stories.tsx CHANGED Viewed

@@ -1,13 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import {
-  Body,
-  Footer,
-  Header,
-  Heading,
-  Rail,
-  Scaffold,
-  Section,
-} from '../../layouts/index.js';
+import { Footer, Header, Heading, Rail, Scaffold, Section } from '../../layouts/index.js';
 import { Box } from '../../stacks/index.js';
 import { Aside } from './aside.js';
 import { BodyText, Title } from '../../typography/index.js';
@@ -36,35 +28,29 @@ export const Baseline: Story = {
         <Header>
           <Title>Parent Container Title</Title>
         </Header>
-        <Body>
-          <Rail>
-            <Aside width="240px">
-              <Header>
-                <Title>Aside - Secondary</Title>
-              </Header>
-              <Body>
-                <Scaffold>
-                  <Section hAlign="start">
-                    <Heading>Aside Section</Heading>
-                    <BodyText>Section Content</BodyText>
-                  </Section>
-                  <Section hAlign="start">
-                    <Heading>Aside Section 2</Heading>
-                    <BodyText>Section Content 2</BodyText>
-                  </Section>
-                </Scaffold>
-              </Body>
-              <Footer>
-                <Title>Aside Footer</Title>
-              </Footer>
-            </Aside>
-            <Body>
-              <Scaffold>
-                <BodyText>Primary Content</BodyText>
-              </Scaffold>
-            </Body>
-          </Rail>
-        </Body>
+        <Rail>
+          <Aside width="240px">
+            <Header>
+              <Title>Aside - Secondary</Title>
+            </Header>
+            <Scaffold>
+              <Section hAlign="start">
+                <Heading>Aside Section</Heading>
+                <BodyText>Section Content</BodyText>
+              </Section>
+              <Section hAlign="start">
+                <Heading>Aside Section 2</Heading>
+                <BodyText>Section Content 2</BodyText>
+              </Section>
+            </Scaffold>
+            <Footer>
+              <Title>Aside Footer</Title>
+            </Footer>
+          </Aside>
+          <Scaffold>
+            <BodyText>Primary Content</BodyText>
+          </Scaffold>
+        </Rail>
         <Footer>
           <Title>Parent Container Footer</Title>

package/src/surfaces/aside/aside.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';
+import { Scaffold, type ScaffoldProps } from '../../layouts/containers/scaffold.js';
 import clsx from 'clsx';
 import styles from './aside.module.css';

package/src/surfaces/card/card.stories.tsx CHANGED Viewed

@@ -6,7 +6,7 @@ import { Box, Spacer } from '../../stacks/index.js';
 import { Title } from '../../typography/title/title.js';
 import { Button } from '../../actions/index.js';
 import { Card } from './card.js';
-import { Body, Scaffold } from '../../layouts/index.js';
+import { Scaffold } from '../../layouts/index.js';
 // Styles
 import styles from './card_stories.module.css';
@@ -48,12 +48,10 @@ export const Default = () => {
           </Button>
         </UtilityBar>
-        <Body>
-          <Scaffold>
-            <Box className={styles['content-box']} />
-            <Box className={styles['content-box']} />
-          </Scaffold>
-        </Body>
+        <Scaffold>
+          <Box className={styles['content-box']} />
+          <Box className={styles['content-box']} />
+        </Scaffold>
         {/* Cards typically do not have a footer */}
         {/* <Footer>
           <Title>Footer</Title>

package/src/surfaces/card/card.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import { clsx } from 'clsx';
 import React from 'react';
-import { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';
+import { Scaffold, type ScaffoldProps } from '../../layouts/containers/scaffold.js';
 export interface CardProps extends Omit<ScaffoldProps, 'as' | 'children'> {
   children?: React.ReactNode;

package/src/surfaces/drawers/drawer.stories.tsx CHANGED Viewed

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { Button } from '../../actions/index.js';
 import {
-  Body,
   Footer,
   Header,
   Heading,
@@ -121,18 +120,16 @@ export const Baseline = ({
             <BugIcon />
           </Button>
         </UtilityBar>
-        <Body>
-          <Scaffold>
-            <Section>
-              <Heading>Drawer Section</Heading>
-              <BodyText>Section Content</BodyText>
-            </Section>
-            <Section>
-              <Heading>Drawer Section 2</Heading>
-              <BodyText>Section Content 2</BodyText>
-            </Section>
-          </Scaffold>
-        </Body>
+        <Scaffold>
+          <Section>
+            <Heading>Drawer Section</Heading>
+            <BodyText>Section Content</BodyText>
+          </Section>
+          <Section>
+            <Heading>Drawer Section 2</Heading>
+            <BodyText>Section Content 2</BodyText>
+          </Section>
+        </Scaffold>
         <Footer>
           <Spacer />
           <Button hierarchy="secondary">Cancel</Button>

package/src/surfaces/drawers/drawer.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import { clsx } from 'clsx';
 import React from 'react';
-import { Scaffold } from '../../layouts/scaffold/scaffold.js';
+import { Scaffold } from '../../layouts/containers/scaffold.js';
 import { Slide, type SlideProps } from '../../overlay/slide/slide.js';
 export type DrawerProps = SlideProps;

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

@@ -4,7 +4,6 @@ import {
   Footer,
   Header,
   UtilityBar,
-  Body,
   Scaffold,
   Heading,
   Section,
@@ -129,18 +128,16 @@ export const Baseline = ({
             <BugIcon />
           </Button>
         </UtilityBar>
-        <Body>
-          <Scaffold>
-            <Section>
-              <Heading>Modal Section</Heading>
-              <BodyText>Section Content</BodyText>
-            </Section>
-            <Section>
-              <Heading>Modal Section 2</Heading>
-              <BodyText>Section Content 2</BodyText>
-            </Section>
-          </Scaffold>
-        </Body>
+        <Scaffold>
+          <Section>
+            <Heading>Modal Section</Heading>
+            <BodyText>Section Content</BodyText>
+          </Section>
+          <Section>
+            <Heading>Modal Section 2</Heading>
+            <BodyText>Section Content 2</BodyText>
+          </Section>
+        </Scaffold>
         <Footer>
           <Spacer />
           <Button hierarchy="secondary">Cancel</Button>

package/src/surfaces/modal/modal.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import React from 'react';
 import { Frame, type FrameProps } from '../../overlay/frame/frame.js';
-import { Scaffold } from '../../layouts/scaffold/scaffold.js';
+import { Scaffold } from '../../layouts/containers/scaffold.js';
 // Styles
 import styles from './modal.module.css';

package/src/surfaces/page/page.stories.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Header } from '../../layouts/header/header.js';
-import { Body, Footer, Rail, Scaffold } from '../../layouts/index.js';
+import { Footer, Rail, Scaffold } from '../../layouts/index.js';
 import { BodyText } from '../../typography/body_text/body_text.js';
 import { Section } from '../../layouts/section/section.js';
 import { Title } from '../../typography/title/title.js';
@@ -20,13 +20,11 @@ export const Baseline = () => {
         <Header>
           <Title>Page Header</Title>
         </Header>
-        <Body>
-          <Scaffold>
-            <Section>
-              <BodyText>Page Content</BodyText>
-            </Section>
-          </Scaffold>
-        </Body>
+        <Scaffold>
+          <Section>
+            <BodyText>Page Content</BodyText>
+          </Section>
+        </Scaffold>
         <Footer>
           <Title>Page Footer</Title>
@@ -40,31 +38,29 @@ export const WithPanelBody = () => {
   return (
     <ZStack height="100%" width="100%" minHeight="600px" minWidth="600px">
       <Page>
-        <Body>
-          <Rail>
-            <Panel>
-              <Header>
-                <Title>Primary</Title>
-              </Header>
-              <Body>
-                <Section>
-                  <BodyText>Page Content</BodyText>
-                </Section>
-              </Body>
-            </Panel>
+        <Rail>
+          <Panel>
+            <Header>
+              <Title>Primary</Title>
+            </Header>
+            <Scaffold>
+              <Section>
+                <BodyText>Page Content</BodyText>
+              </Section>
+            </Scaffold>
+          </Panel>
-            <Panel width="300px">
-              <Header>
-                <Title>Secondary</Title>
-              </Header>
-              <Body>
-                <Section>
-                  <BodyText>Supporting Content</BodyText>
-                </Section>
-              </Body>
-            </Panel>
-          </Rail>
-        </Body>
+          <Panel width="300px">
+            <Header>
+              <Title>Secondary</Title>
+            </Header>
+            <Scaffold>
+              <Section>
+                <BodyText>Supporting Content</BodyText>
+              </Section>
+            </Scaffold>
+          </Panel>
+        </Rail>
       </Page>
     </ZStack>
   );

package/src/surfaces/page/page.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';
+import { Scaffold, type ScaffoldProps } from '../../layouts/containers/scaffold.js';
 import clsx from 'clsx';
 import styles from './page.module.css';

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

@@ -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 { Body, 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,7 +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 { 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',
@@ -47,7 +51,9 @@ const SectionMockData: React.FC<{
         <Spacer />
         <UtilGroupExample />
       </Heading>
-      <Ipsum />
+      <Detail>
+        <Ipsum />
+      </Detail>
       {children}
     </Section>
   );
@@ -84,27 +90,25 @@ export const Default = () => {
           <UtilGroupExample />
         </UtilityBar>
-        <Body>
-          <Scaffold>
-            <SectionMockData depth={1} count={1}>
-              <SectionMockData depth={2} count={1}>
-                <SectionMockData depth={3} count={1}>
-                  <SectionMockData depth={4} count={1} />
-                </SectionMockData>
+        <Scaffold>
+          <SectionMockData depth={1} count={1}>
+            <SectionMockData depth={2} count={1}>
+              <SectionMockData depth={3} count={1}>
+                <SectionMockData depth={4} count={1} />
               </SectionMockData>
             </SectionMockData>
-            <SectionMockData depth={1} count={2}>
-              <SectionMockData depth={2} count={1}>
-                <SectionMockData depth={3} count={1}>
-                  <SectionMockData depth={4} count={1} />
-                </SectionMockData>
+          </SectionMockData>
+          <SectionMockData depth={1} count={2}>
+            <SectionMockData depth={2} count={1}>
+              <SectionMockData depth={3} count={1}>
+                <SectionMockData depth={4} count={1} />
               </SectionMockData>
             </SectionMockData>
-            <Ipsum />
-            <Ipsum />
-            <Ipsum />
-          </Scaffold>
-        </Body>
+          </SectionMockData>
+          <Ipsum />
+          <Ipsum />
+          <Ipsum />
+        </Scaffold>
         <Footer>
           <Title>Footer</Title>
           <Spacer />
@@ -134,41 +138,39 @@ export const WithTable = () => {
               <PlusIcon />
             </Button>
           </Header>
-          <Body>
-            <Scaffold>
-              <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>
-            </Scaffold>
-          </Body>
+          <Scaffold>
+            <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>
+          </Scaffold>
           <Footer>
             <HStack gap="8px" hAlign="center">
               <Button utility hierarchy="tertiary">
@@ -203,21 +205,152 @@ export const WithTable = () => {
               <CrossIcon />
             </Button>
           </Header>
-          <Body>
-            <Scaffold>
-              <Section>
-                <Heading>Personal Information</Heading>
-                <BodyText>
+          <Scaffold>
+            <Section>
+              <Heading>Personal Information</Heading>
+              <Detail>
+                <Callout>
                   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>
-            </Scaffold>
-          </Body>
+                </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>
       </HStack>
     </Box>
   );
 };
+const CardIpsum = () => (
+  <Box
+    style={{ backgroundColor: 'rgba(0, 128, 0, 0.4)', height: '150px', width: '100%' }}
+  />
+);
+export const WithCards = () => {
+  return (
+    <Box className={styles['stories-container']}>
+      <HStack gap="16px" height="100%" maxHeight="600px">
+        <Panel maxHeight="600px">
+          <Header>
+            <Title emphasis="strong">Cards in Sections</Title>
+            <Spacer />
+            <UtilGroupExample />
+          </Header>
+          <Scaffold>
+            <Section>
+              <Heading>Section with Cards</Heading>
+              <Detail>
+                <Card>
+                  <Header>
+                    <Title>Card One</Title>
+                  </Header>
+                  <Scaffold>
+                    <CardIpsum />
+                  </Scaffold>
+                </Card>
+                <Card>
+                  <Header>
+                    <Title>Card Two</Title>
+                  </Header>
+                  <Scaffold>
+                    <CardIpsum />
+                  </Scaffold>
+                </Card>
+              </Detail>
+            </Section>
+            <Section>
+              <Heading>Another Section with a Card</Heading>
+              <Detail>
+                <Card>
+                  <Header>
+                    <Title>Card Three</Title>
+                  </Header>
+                  <Scaffold>
+                    <CardIpsum />
+                  </Scaffold>
+                </Card>
+              </Detail>
+            </Section>
+          </Scaffold>
+        </Panel>
+        <Panel maxHeight="600px">
+          <Header>
+            <Title emphasis="strong">Cards without Sections</Title>
+            <Spacer />
+            <UtilGroupExample />
+          </Header>
+          <Scaffold>
+            <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/surfaces/panel/panel.module.css CHANGED Viewed

@@ -1,5 +1,5 @@
 @layer tcn-system {
-  .panel {
+  :where(.panel) {
     height: 100%;
   }
 }