@kaizen/components 1.68.1 → 1.68.3

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

@@ -27,141 +27,135 @@ export default {
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <>
-      <StickerSheet isReversed={isReversed} heading="Select">
-        <StickerSheet.Header headings={["Base", "Selected", "Description"]} />
-        <StickerSheet.Body>
-          <StickerSheet.Row>
-            <StickerSheet.Cell style={{ verticalAlign: "top" }}>
-              <Select
-                label="Label"
-                items={singleMockItems}
-                isReversed={isReversed}
-              />
-            </StickerSheet.Cell>
-            <StickerSheet.Cell style={{ verticalAlign: "top" }}>
-              <Select
-                label="Label"
-                items={singleMockItems}
-                selectedKey="mocha"
-                isReversed={isReversed}
-              />
-            </StickerSheet.Cell>
-            <StickerSheet.Cell style={{ verticalAlign: "top" }}>
-              <Select
-                label="Label"
-                items={singleMockItems}
-                description="This is a description"
-                selectedKey="mocha"
-                isReversed={isReversed}
-              />
-            </StickerSheet.Cell>
-          </StickerSheet.Row>
-        </StickerSheet.Body>
-      </StickerSheet>
-
-      <StickerSheet isReversed={isReversed} heading="Pseudo states">
-        <StickerSheet.Header
-          headings={["Hover", "Active", "Focus", "Disabled"]}
-        />
-        <StickerSheet.Body>
-          <StickerSheet.Row>
-            <Select
-              label="Label"
-              items={singleMockItems}
-              isReversed={isReversed}
-              data-sb-pseudo-styles="hover"
-            />
+      <StickerSheet
+        isReversed={isReversed}
+        title="Select"
+        headers={["Base", "Selected", "Description"]}
+      >
+        <StickerSheet.Row>
+          <StickerSheet.Cell style={{ verticalAlign: "top" }}>
             <Select
               label="Label"
               items={singleMockItems}
               isReversed={isReversed}
-              data-sb-pseudo-styles="active"
             />
+          </StickerSheet.Cell>
+          <StickerSheet.Cell style={{ verticalAlign: "top" }}>
             <Select
               label="Label"
               items={singleMockItems}
+              selectedKey="mocha"
               isReversed={isReversed}
-              data-sb-pseudo-styles="focus"
             />
+          </StickerSheet.Cell>
+          <StickerSheet.Cell style={{ verticalAlign: "top" }}>
             <Select
               label="Label"
               items={singleMockItems}
-              isDisabled
+              description="This is a description"
+              selectedKey="mocha"
               isReversed={isReversed}
             />
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+          </StickerSheet.Cell>
+        </StickerSheet.Row>
       </StickerSheet>
 
-      <StickerSheet isReversed={isReversed} heading="Width" width="100%">
-        <StickerSheet.Body>
-          <StickerSheet.Row>
+      <StickerSheet
+        isReversed={isReversed}
+        title="Pseudo states"
+        headers={["Hover", "Active", "Focus", "Disabled"]}
+      >
+        <StickerSheet.Row>
+          <Select
+            label="Label"
+            items={singleMockItems}
+            isReversed={isReversed}
+            data-sb-pseudo-styles="hover"
+          />
+          <Select
+            label="Label"
+            items={singleMockItems}
+            isReversed={isReversed}
+            data-sb-pseudo-styles="active"
+          />
+          <Select
+            label="Label"
+            items={singleMockItems}
+            isReversed={isReversed}
+            data-sb-pseudo-styles="focus"
+          />
+          <Select
+            label="Label"
+            items={singleMockItems}
+            isDisabled
+            isReversed={isReversed}
+          />
+        </StickerSheet.Row>
+      </StickerSheet>
+
+      <StickerSheet isReversed={isReversed} title="Width" layout="stretch">
+        <StickerSheet.Row>
+          <Select
+            label="Full width"
+            items={singleMockItems}
+            isFullWidth
+            isReversed={isReversed}
+          />
+        </StickerSheet.Row>
+        <StickerSheet.Row>
+          <div style={{ width: "50%" }}>
             <Select
-              label="Full width"
+              label="Custom Width (50%)"
               items={singleMockItems}
               isFullWidth
               isReversed={isReversed}
             />
-          </StickerSheet.Row>
-          <StickerSheet.Row>
-            <div style={{ width: "50%" }}>
-              <Select
-                label="Custom Width (50%)"
-                items={singleMockItems}
-                isFullWidth
-                isReversed={isReversed}
-              />
-            </div>
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+          </div>
+        </StickerSheet.Row>
       </StickerSheet>
 
-      <StickerSheet isReversed={isReversed} heading="Validation">
-        <StickerSheet.Body>
-          <StickerSheet.Row>
-            <Select
-              label="Error"
-              items={singleMockItems}
-              description="This is a description"
-              status="error"
-              validationMessage="This is an error"
-              isReversed={isReversed}
-            />
-            <Select
-              label="Caution"
-              items={singleMockItems}
-              description="This is a description"
-              status="caution"
-              validationMessage="This is an error"
-              isReversed={isReversed}
-            />
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+      <StickerSheet isReversed={isReversed} title="Validation">
+        <StickerSheet.Row>
+          <Select
+            label="Error"
+            items={singleMockItems}
+            description="This is a description"
+            status="error"
+            validationMessage="This is an error"
+            isReversed={isReversed}
+          />
+          <Select
+            label="Caution"
+            items={singleMockItems}
+            description="This is a description"
+            status="caution"
+            validationMessage="This is an error"
+            isReversed={isReversed}
+          />
+        </StickerSheet.Row>
       </StickerSheet>
 
-      <StickerSheet isReversed={isReversed} heading="Truncated">
-        <StickerSheet.Body>
-          <StickerSheet.Row>
-            <Select
-              label="Label"
-              items={[
-                { label: "Dev-ops", value: "id-devops" },
-                { label: "Others", value: "id-others" },
-                {
-                  label:
-                    "Super long option where the container is fixed width and the selected option goes multiline",
-                  value: "id-long",
-                },
-                {
-                  label: "Metallblasinstrumentenbauermeisterbrief",
-                  value: "id-long-word",
-                },
-              ]}
-              selectedKey="id-long"
-              isReversed={isReversed}
-            />
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+      <StickerSheet isReversed={isReversed} title="Truncated">
+        <StickerSheet.Row>
+          <Select
+            label="Label"
+            items={[
+              { label: "Dev-ops", value: "id-devops" },
+              { label: "Others", value: "id-others" },
+              {
+                label:
+                  "Super long option where the container is fixed width and the selected option goes multiline",
+                value: "id-long",
+              },
+              {
+                label: "Metallblasinstrumentenbauermeisterbrief",
+                value: "id-long-word",
+              },
+            ]}
+            selectedKey="id-long"
+            isReversed={isReversed}
+          />
+        </StickerSheet.Row>
       </StickerSheet>
     </>
   ),
@@ -202,230 +196,214 @@ const StickerSheetOptionsTemplate: StickerSheetStory = {
   render: () => (
     <>
       <StickerSheet
-        heading="Default options"
+        title="Default options"
         style={{ paddingBottom: IS_CHROMATIC ? "26rem" : undefined }}
+        headers={["Single items", "Groups", "Existing value", "Disabled"]}
       >
-        <StickerSheet.Header
-          headings={["Single items", "Groups", "Existing value", "Disabled"]}
-        />
-        <StickerSheet.Body>
-          <StickerSheet.Row>
-            <StickerSheet.Cell style={{ width: "250px" }}>
-              <Select
-                label="Label"
-                defaultOpen={IS_CHROMATIC}
-                items={singleMockItems}
-              />
-            </StickerSheet.Cell>
-            <StickerSheet.Cell style={{ width: "250px" }}>
-              <Select
-                label="Label"
-                defaultOpen={IS_CHROMATIC}
-                items={groupedMockItems}
-              />
-            </StickerSheet.Cell>
-            <StickerSheet.Cell style={{ width: "250px" }}>
-              <Select
-                label="Label"
-                defaultOpen={IS_CHROMATIC}
-                items={singleMockItems}
-                selectedKey="mocha"
-              />
-            </StickerSheet.Cell>
-            <StickerSheet.Cell style={{ width: "250px" }}>
-              <Select
-                label="Label"
-                defaultOpen={IS_CHROMATIC}
-                items={mixedMockItemsDisabled}
-              />
-            </StickerSheet.Cell>
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+        <StickerSheet.Row>
+          <StickerSheet.Cell style={{ width: "250px" }}>
+            <Select
+              label="Label"
+              defaultOpen={IS_CHROMATIC}
+              items={singleMockItems}
+            />
+          </StickerSheet.Cell>
+          <StickerSheet.Cell style={{ width: "250px" }}>
+            <Select
+              label="Label"
+              defaultOpen={IS_CHROMATIC}
+              items={groupedMockItems}
+            />
+          </StickerSheet.Cell>
+          <StickerSheet.Cell style={{ width: "250px" }}>
+            <Select
+              label="Label"
+              defaultOpen={IS_CHROMATIC}
+              items={singleMockItems}
+              selectedKey="mocha"
+            />
+          </StickerSheet.Cell>
+          <StickerSheet.Cell style={{ width: "250px" }}>
+            <Select
+              label="Label"
+              defaultOpen={IS_CHROMATIC}
+              items={mixedMockItemsDisabled}
+            />
+          </StickerSheet.Cell>
+        </StickerSheet.Row>
       </StickerSheet>
 
       <StickerSheet
-        heading="Customised options"
+        title="Customised options"
         style={{ paddingTop: IS_CHROMATIC ? "26rem" : undefined }}
+        headers={[
+          "All options",
+          "Partial customisation",
+          "Section dividers",
+          "Specific item divider",
+        ]}
       >
-        <StickerSheet.Header
-          headings={[
-            "All options",
-            "Partial customisation",
-            "Section dividers",
-            "Specific item divider",
-          ]}
-        />
-        <StickerSheet.Body>
-          <StickerSheet.Row>
-            <StickerSheet.Cell style={{ width: "250px" }}>
-              <Select
-                label="Label"
-                defaultOpen={IS_CHROMATIC}
-                items={singleMockItems}
-              >
-                {({ items }): JSX.Element[] =>
-                  items.map(item => {
-                    if (item.type === "item") {
-                      return (
-                        <Select.Option
-                          key={item.key}
-                          item={{
-                            ...item,
-                            rendered: (
-                              <div>
-                                <div
-                                  style={{
-                                    fontSize: "0.75rem",
-                                    color: "gray",
-                                  }}
-                                >
-                                  Customised in list!
-                                </div>
-                                <div>{item.rendered}</div>
-                              </div>
-                            ),
-                          }}
-                        />
-                      )
-                    }
-
+        <StickerSheet.Row>
+          <StickerSheet.Cell style={{ width: "250px" }}>
+            <Select
+              label="Label"
+              defaultOpen={IS_CHROMATIC}
+              items={singleMockItems}
+            >
+              {({ items }): JSX.Element[] =>
+                items.map(item => {
+                  if (item.type === "item") {
                     return (
-                      <Select.ItemDefaultRender key={item.key} item={item} />
+                      <Select.Option
+                        key={item.key}
+                        item={{
+                          ...item,
+                          rendered: (
+                            <div>
+                              <div
+                                style={{
+                                  fontSize: "0.75rem",
+                                  color: "gray",
+                                }}
+                              >
+                                Customised in list!
+                              </div>
+                              <div>{item.rendered}</div>
+                            </div>
+                          ),
+                        }}
+                      />
                     )
-                  })
-                }
-              </Select>
-            </StickerSheet.Cell>
+                  }
 
-            <StickerSheet.Cell style={{ width: "250px" }}>
-              <Select
-                label="Label"
-                defaultOpen={IS_CHROMATIC}
-                items={mixedMockItemsUngroupedFirst}
-              >
-                {({ items }): JSX.Element[] =>
-                  items.map(item => {
-                    if (item.type === "item" && item.key === "batch-brew") {
-                      return (
-                        <Select.Option
-                          key={item.key}
-                          item={{
-                            ...item,
-                            rendered: <div>++ {item.rendered}</div>,
-                          }}
-                        />
-                      )
-                    }
+                  return <Select.ItemDefaultRender key={item.key} item={item} />
+                })
+              }
+            </Select>
+          </StickerSheet.Cell>
 
-                    if (item.type === "section" && item.key === "Syrup") {
-                      return (
-                        <Select.Section
-                          key={item.key}
-                          section={{
-                            ...item,
-                            childNodes: Array.from(item.childNodes).map(
-                              child => ({
-                                ...child,
-                                rendered: <div>-- {child.rendered}</div>,
-                              })
-                            ),
-                          }}
-                        />
-                      )
-                    }
+          <StickerSheet.Cell style={{ width: "250px" }}>
+            <Select
+              label="Label"
+              defaultOpen={IS_CHROMATIC}
+              items={mixedMockItemsUngroupedFirst}
+            >
+              {({ items }): JSX.Element[] =>
+                items.map(item => {
+                  if (item.type === "item" && item.key === "batch-brew") {
+                    return (
+                      <Select.Option
+                        key={item.key}
+                        item={{
+                          ...item,
+                          rendered: <div>++ {item.rendered}</div>,
+                        }}
+                      />
+                    )
+                  }
 
+                  if (item.type === "section" && item.key === "Syrup") {
                     return (
-                      <Select.ItemDefaultRender key={item.key} item={item} />
+                      <Select.Section
+                        key={item.key}
+                        section={{
+                          ...item,
+                          childNodes: Array.from(item.childNodes).map(
+                            child => ({
+                              ...child,
+                              rendered: <div>-- {child.rendered}</div>,
+                            })
+                          ),
+                        }}
+                      />
                     )
-                  })
-                }
-              </Select>
-            </StickerSheet.Cell>
+                  }
 
-            <StickerSheet.Cell style={{ width: "250px" }}>
-              <Select
-                label="Label"
-                defaultOpen={IS_CHROMATIC}
-                items={mixedMockItemsUnordered}
-              >
-                {({ items }): JSX.Element[] =>
-                  items.map(item => (
-                    <React.Fragment key={item.key}>
-                      {item.type === "section" && <Select.SectionDivider />}
-                      <Select.ItemDefaultRender item={item} />
-                      {item.type === "section" && <Select.SectionDivider />}
-                    </React.Fragment>
-                  ))
-                }
-              </Select>
-            </StickerSheet.Cell>
+                  return <Select.ItemDefaultRender key={item.key} item={item} />
+                })
+              }
+            </Select>
+          </StickerSheet.Cell>
 
-            <StickerSheet.Cell style={{ width: "250px" }}>
-              <Select
-                label="Label"
-                defaultOpen={IS_CHROMATIC}
-                items={[
-                  { label: "Customise...", value: "custom" },
-                  ...singleMockItems,
-                ]}
-              >
-                {({ items }): JSX.Element[] =>
-                  items.map(item => {
-                    if (item.type === "item" && item.key === "custom") {
-                      return (
-                        <React.Fragment key={item.key}>
-                          <Select.Option item={item} />
-                          <Select.SectionDivider />
-                        </React.Fragment>
-                      )
-                    }
+          <StickerSheet.Cell style={{ width: "250px" }}>
+            <Select
+              label="Label"
+              defaultOpen={IS_CHROMATIC}
+              items={mixedMockItemsUnordered}
+            >
+              {({ items }): JSX.Element[] =>
+                items.map(item => (
+                  <React.Fragment key={item.key}>
+                    {item.type === "section" && <Select.SectionDivider />}
+                    <Select.ItemDefaultRender item={item} />
+                    {item.type === "section" && <Select.SectionDivider />}
+                  </React.Fragment>
+                ))
+              }
+            </Select>
+          </StickerSheet.Cell>
 
+          <StickerSheet.Cell style={{ width: "250px" }}>
+            <Select
+              label="Label"
+              defaultOpen={IS_CHROMATIC}
+              items={[
+                { label: "Customise...", value: "custom" },
+                ...singleMockItems,
+              ]}
+            >
+              {({ items }): JSX.Element[] =>
+                items.map(item => {
+                  if (item.type === "item" && item.key === "custom") {
                     return (
-                      <Select.ItemDefaultRender key={item.key} item={item} />
+                      <React.Fragment key={item.key}>
+                        <Select.Option item={item} />
+                        <Select.SectionDivider />
+                      </React.Fragment>
                     )
-                  })
-                }
-              </Select>
-            </StickerSheet.Cell>
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+                  }
+
+                  return <Select.ItemDefaultRender key={item.key} item={item} />
+                })
+              }
+            </Select>
+          </StickerSheet.Cell>
+        </StickerSheet.Row>
       </StickerSheet>
 
       <StickerSheet
-        heading="Min/Max"
+        title="Min/Max"
         style={{ paddingTop: IS_CHROMATIC ? "26rem" : undefined }}
+        headers={["Min size", "Max size"]}
       >
-        <StickerSheet.Header headings={["Min size", "Max size"]} />
-        <StickerSheet.Body>
-          <StickerSheet.Row>
-            <StickerSheet.Cell style={{ width: "250px" }}>
-              <Select
-                label="Label"
-                defaultOpen={IS_CHROMATIC}
-                items={[{ value: "a", label: "A" }]}
-              />
-            </StickerSheet.Cell>
-            <StickerSheet.Cell>
-              <Select
-                label="Label"
-                defaultOpen={IS_CHROMATIC}
-                items={[
-                  {
-                    value: "long-1",
-                    label:
-                      "Super long option where the container is fixed width and the selected option goes multiline",
-                  },
-                  {
-                    value: "long-2",
-                    label:
-                      "Another super long option where the container is fixed width and the selected option goes multiline",
-                  },
-                  ...singleMockItems,
-                ]}
-              />
-            </StickerSheet.Cell>
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+        <StickerSheet.Row>
+          <StickerSheet.Cell style={{ width: "250px" }}>
+            <Select
+              label="Label"
+              defaultOpen={IS_CHROMATIC}
+              items={[{ value: "a", label: "A" }]}
+            />
+          </StickerSheet.Cell>
+          <StickerSheet.Cell>
+            <Select
+              label="Label"
+              defaultOpen={IS_CHROMATIC}
+              items={[
+                {
+                  value: "long-1",
+                  label:
+                    "Super long option where the container is fixed width and the selected option goes multiline",
+                },
+                {
+                  value: "long-2",
+                  label:
+                    "Another super long option where the container is fixed width and the selected option goes multiline",
+                },
+                ...singleMockItems,
+              ]}
+            />
+          </StickerSheet.Cell>
+        </StickerSheet.Row>
       </StickerSheet>
     </>
   ),