@kaizen/components 1.68.2 → 1.68.4

package/src/__actions__/Menu/v1/_docs/Menu.stickersheet.stories.tsx

@@ -19,42 +19,39 @@ export default {
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
-    <StickerSheet isReversed={isReversed} style={{ margin: "0 auto" }}>
-      <StickerSheet.Header headings={["Long list", "Short List"]} />
-      <StickerSheet.Body>
-        <StickerSheet.Row>
-          <StickerSheet.Cell width={250}>
-            <Menu
-              menuVisible
-              autoHide="off"
-              button={
-                <Button
-                  label="Menu"
-                  icon={<Icon name="keyboard_arrow_down" isPresentational />}
-                  iconPosition="end"
-                />
-              }
-            >
-              <MenuContentExample />
-            </Menu>
-          </StickerSheet.Cell>
-          <StickerSheet.Cell width={250}>
-            <Menu
-              menuVisible
-              autoHide="off"
-              button={
-                <Button
-                  label="Menu"
-                  icon={<Icon name="keyboard_arrow_down" isPresentational />}
-                  iconPosition="end"
-                />
-              }
-            >
-              <MenuContentExample isShortList />
-            </Menu>
-          </StickerSheet.Cell>
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+    <StickerSheet isReversed={isReversed} headers={["Long list", "Short List"]}>
+      <StickerSheet.Row>
+        <StickerSheet.Cell style={{ width: 250 }}>
+          <Menu
+            menuVisible
+            autoHide="off"
+            button={
+              <Button
+                label="Menu"
+                icon={<Icon name="keyboard_arrow_down" isPresentational />}
+                iconPosition="end"
+              />
+            }
+          >
+            <MenuContentExample />
+          </Menu>
+        </StickerSheet.Cell>
+        <StickerSheet.Cell style={{ width: 250 }}>
+          <Menu
+            menuVisible
+            autoHide="off"
+            button={
+              <Button
+                label="Menu"
+                icon={<Icon name="keyboard_arrow_down" isPresentational />}
+                iconPosition="end"
+              />
+            }
+          >
+            <MenuContentExample isShortList />
+          </Menu>
+        </StickerSheet.Cell>
+      </StickerSheet.Row>
     </StickerSheet>
   ),
   decorators: [

package/src/__future__/Icon/_docs/Icon.docs.stories.tsx

@@ -53,29 +53,23 @@ export const Filled: Story = {
 
 export const MirrorInRTL: Story = {
   render: args => (
-    <StickerSheet>
-      <StickerSheet.Header
-        headings={['dir=["ltr"]', 'dir=["rtl"]']}
-        hasVerticalHeadings
-      />
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="arrow_forward">
-          <div dir="ltr" className="text-center">
-            <Icon {...args} name="arrow_forward" shouldMirrorInRTL />
-          </div>
-          <div dir="rtl" className="text-center">
-            <Icon {...args} name="arrow_forward" shouldMirrorInRTL />
-          </div>
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="format_list_numbered">
-          <div dir="ltr" className="text-center">
-            <Icon {...args} name="format_list_numbered" shouldMirrorInRTL />
-          </div>
-          <div dir="rtl" className="text-center">
-            <Icon {...args} name="format_list_numbered" shouldMirrorInRTL />
-          </div>
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+    <StickerSheet headers={['dir=["ltr"]', 'dir=["rtl"]']}>
+      <StickerSheet.Row header="arrow_forward">
+        <div dir="ltr" className="text-center">
+          <Icon {...args} name="arrow_forward" shouldMirrorInRTL />
+        </div>
+        <div dir="rtl" className="text-center">
+          <Icon {...args} name="arrow_forward" shouldMirrorInRTL />
+        </div>
+      </StickerSheet.Row>
+      <StickerSheet.Row header="format_list_numbered">
+        <div dir="ltr" className="text-center">
+          <Icon {...args} name="format_list_numbered" shouldMirrorInRTL />
+        </div>
+        <div dir="rtl" className="text-center">
+          <Icon {...args} name="format_list_numbered" shouldMirrorInRTL />
+        </div>
+      </StickerSheet.Row>
     </StickerSheet>
   ),
   parameters: {

package/src/__future__/Icon/_docs/Icon.stickersheet.stories.tsx

@@ -35,85 +35,76 @@ const StickerSheetTemplate: StickerSheetStory = {
 
     return (
       <>
-        <StickerSheet heading="Icon" isReversed={isReversed}>
-          <StickerSheet.Header
-            headings={["Outlined", "Filled", "Color"]}
-            hasVerticalHeadings
-          />
-          <StickerSheet.Body>
-            {iconDefaultSet.map(name => (
-              <StickerSheet.Row key={name} rowTitle={name}>
-                <Icon {...defaultProps} name={name} />
-                <Icon {...defaultProps} name={name} isFilled />
-                <Icon {...defaultProps} name={name} className="text-blue-500" />
-              </StickerSheet.Row>
-            ))}
-          </StickerSheet.Body>
+        <StickerSheet
+          title="Icon"
+          headers={["Outlined", "Filled", "Color"]}
+          isReversed={isReversed}
+        >
+          {iconDefaultSet.map(name => (
+            <StickerSheet.Row key={name} header={name}>
+              <Icon {...defaultProps} name={name} />
+              <Icon {...defaultProps} name={name} isFilled />
+              <Icon {...defaultProps} name={name} className="text-blue-500" />
+            </StickerSheet.Row>
+          ))}
         </StickerSheet>
 
-        <StickerSheet heading="shouldMirrorInRTL" isReversed={isReversed}>
-          <StickerSheet.Header
-            headings={[
-              'true; dir=["ltr"]',
-              'true; dir=["rtl"]',
-              'false; dir=["rtl"]',
-            ]}
-            hasVerticalHeadings
-          />
-          <StickerSheet.Body>
-            {mirrorInRTL.map(name => (
-              <StickerSheet.Row key={name} rowTitle={name}>
-                <div dir="ltr" className="text-center">
-                  <Icon {...defaultProps} name={name} shouldMirrorInRTL />
-                </div>
-                <div dir="rtl" className="text-center">
-                  <Icon {...defaultProps} name={name} shouldMirrorInRTL />
-                </div>
-                <div dir="rtl" className="text-center">
-                  <Icon {...defaultProps} name={name} />
-                </div>
-              </StickerSheet.Row>
-            ))}
-          </StickerSheet.Body>
+        <StickerSheet
+          title="shouldMirrorInRTL"
+          isReversed={isReversed}
+          headers={[
+            'true; dir=["ltr"]',
+            'true; dir=["rtl"]',
+            'false; dir=["rtl"]',
+          ]}
+        >
+          {mirrorInRTL.map(name => (
+            <StickerSheet.Row key={name} header={name}>
+              <div dir="ltr" className="text-center">
+                <Icon {...defaultProps} name={name} shouldMirrorInRTL />
+              </div>
+              <div dir="rtl" className="text-center">
+                <Icon {...defaultProps} name={name} shouldMirrorInRTL />
+              </div>
+              <div dir="rtl" className="text-center">
+                <Icon {...defaultProps} name={name} />
+              </div>
+            </StickerSheet.Row>
+          ))}
         </StickerSheet>
 
         <StickerSheet
-          heading="Alignment as children within other components"
+          title="Alignment as children within other components"
           isReversed={isReversed}
         >
-          <StickerSheet.Body>
-            <StickerSheet.Row rowTitle="Text">
-              <Text variant="body">
-                Showcase alignment of an icon <Icon {...defaultProps} /> within
-                a sentence
-              </Text>
-            </StickerSheet.Row>
-            <StickerSheet.Row rowTitle="Label">
-              <Label>
-                Field label <Icon {...defaultProps} />
-              </Label>
-            </StickerSheet.Row>
-            <StickerSheet.Row rowTitle="CheckboxField">
-              <CheckboxField
-                labelText={
-                  <>
-                    Checkbox label <Icon {...defaultProps} />
-                  </>
-                }
-              />
-            </StickerSheet.Row>
-            <StickerSheet.Row rowTitle="Button (v2)">
-              <ButtonV2
-                label="Button label"
-                icon={<Icon {...defaultProps} />}
-              />
-            </StickerSheet.Row>
-            <StickerSheet.Row rowTitle="Button (v3)">
-              <ButtonV3>
-                <Icon {...defaultProps} /> Button label
-              </ButtonV3>
-            </StickerSheet.Row>
-          </StickerSheet.Body>
+          <StickerSheet.Row header="Text">
+            <Text variant="body">
+              Showcase alignment of an icon <Icon {...defaultProps} /> within a
+              sentence
+            </Text>
+          </StickerSheet.Row>
+          <StickerSheet.Row header="Label">
+            <Label>
+              Field label <Icon {...defaultProps} />
+            </Label>
+          </StickerSheet.Row>
+          <StickerSheet.Row header="CheckboxField">
+            <CheckboxField
+              labelText={
+                <>
+                  Checkbox label <Icon {...defaultProps} />
+                </>
+              }
+            />
+          </StickerSheet.Row>
+          <StickerSheet.Row header="Button (v2)">
+            <ButtonV2 label="Button label" icon={<Icon {...defaultProps} />} />
+          </StickerSheet.Row>
+          <StickerSheet.Row header="Button (v3)">
+            <ButtonV3>
+              <Icon {...defaultProps} /> Button label
+            </ButtonV3>
+          </StickerSheet.Row>
         </StickerSheet>
       </>
     )