docs(SplitButton): fix stickersheet

cultureamp · Nov 19, 2024 · 7d760ae · 7d760ae
1 parent 553c510
commit 7d760ae
Showing 1 changed file with 62 additions and 68 deletions.
diff --git a/packages/components/src/SplitButton/_docs/SplitButton.stickersheet.stories.tsx b/packages/components/src/SplitButton/_docs/SplitButton.stickersheet.stories.tsx
@@ -35,76 +35,70 @@ const ROWS_MAP = [
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <>
-      <StickerSheet isReversed={isReversed} heading="Split Button">
-        <StickerSheet.Header
-          headings={["Base", "Disabled"]}
-          hasVerticalHeadings
-          verticalHeadingsWidth="10rem"
-        />
-        <StickerSheet.Body>
-          {ROWS_MAP.map(({ rowTitle, ...props }) => (
-            <StickerSheet.Row key={rowTitle} rowTitle={rowTitle}>
-              <SplitButton isReversed={isReversed} {...props} />
-              <SplitButton isReversed={isReversed} disabled {...props} />
-            </StickerSheet.Row>
-          ))}
-        </StickerSheet.Body>
+      <StickerSheet
+        isReversed={isReversed}
+        title="Split Button"
+        headers={["Base", "Disabled"]}
+      >
+        {ROWS_MAP.map(({ rowTitle, ...props }) => (
+          <StickerSheet.Row key={rowTitle} header={rowTitle}>
+            <SplitButton isReversed={isReversed} {...props} />
+            <SplitButton isReversed={isReversed} disabled {...props} />
+          </StickerSheet.Row>
+        ))}
       </StickerSheet>
 
-      <StickerSheet isReversed={isReversed} heading="Pseudo states">
-        <StickerSheet.Header
-          headings={["Hover", "Active", "Focus"]}
-          hasVerticalHeadings
-          verticalHeadingsWidth="10rem"
-        />
-        <StickerSheet.Body>
-          <StickerSheet.Row rowTitle="Action button">
-            <SplitButton
-              isReversed={isReversed}
-              actionButtonProps={{
-                ...exampleActionButtonPropsButton,
-                "data-sb-pseudo-styles": "hover",
-              }}
-              dropdownContent={exampleDropdownContentEnabled}
-            />
-            <SplitButton
-              isReversed={isReversed}
-              actionButtonProps={{
-                ...exampleActionButtonPropsButton,
-                "data-sb-pseudo-styles": "active",
-              }}
-              dropdownContent={exampleDropdownContentEnabled}
-            />
-            <SplitButton
-              isReversed={isReversed}
-              actionButtonProps={{
-                ...exampleActionButtonPropsButton,
-                "data-sb-pseudo-styles": "focus",
-              }}
-              dropdownContent={exampleDropdownContentEnabled}
-            />
-          </StickerSheet.Row>
-          <StickerSheet.Row rowTitle="Dropdown button">
-            <SplitButton
-              isReversed={isReversed}
-              actionButtonProps={exampleActionButtonPropsButton}
-              dropdownContent={exampleDropdownContentEnabled}
-              dropdownButtonProps={{ "data-sb-pseudo-styles": "hover" }}
-            />
-            <SplitButton
-              isReversed={isReversed}
-              actionButtonProps={exampleActionButtonPropsButton}
-              dropdownContent={exampleDropdownContentEnabled}
-              dropdownButtonProps={{ "data-sb-pseudo-styles": "active" }}
-            />
-            <SplitButton
-              isReversed={isReversed}
-              actionButtonProps={exampleActionButtonPropsButton}
-              dropdownContent={exampleDropdownContentEnabled}
-              dropdownButtonProps={{ "data-sb-pseudo-styles": "focus" }}
-            />
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+      <StickerSheet
+        isReversed={isReversed}
+        title="Pseudo states"
+        headers={["Hover", "Active", "Focus"]}
+      >
+        <StickerSheet.Row header="Action button">
+          <SplitButton
+            isReversed={isReversed}
+            actionButtonProps={{
+              ...exampleActionButtonPropsButton,
+              "data-sb-pseudo-styles": "hover",
+            }}
+            dropdownContent={exampleDropdownContentEnabled}
+          />
+          <SplitButton
+            isReversed={isReversed}
+            actionButtonProps={{
+              ...exampleActionButtonPropsButton,
+              "data-sb-pseudo-styles": "active",
+            }}
+            dropdownContent={exampleDropdownContentEnabled}
+          />
+          <SplitButton
+            isReversed={isReversed}
+            actionButtonProps={{
+              ...exampleActionButtonPropsButton,
+              "data-sb-pseudo-styles": "focus",
+            }}
+            dropdownContent={exampleDropdownContentEnabled}
+          />
+        </StickerSheet.Row>
+        <StickerSheet.Row header="Dropdown button">
+          <SplitButton
+            isReversed={isReversed}
+            actionButtonProps={exampleActionButtonPropsButton}
+            dropdownContent={exampleDropdownContentEnabled}
+            dropdownButtonProps={{ "data-sb-pseudo-styles": "hover" }}
+          />
+          <SplitButton
+            isReversed={isReversed}
+            actionButtonProps={exampleActionButtonPropsButton}
+            dropdownContent={exampleDropdownContentEnabled}
+            dropdownButtonProps={{ "data-sb-pseudo-styles": "active" }}
+          />
+          <SplitButton
+            isReversed={isReversed}
+            actionButtonProps={exampleActionButtonPropsButton}
+            dropdownContent={exampleDropdownContentEnabled}
+            dropdownButtonProps={{ "data-sb-pseudo-styles": "focus" }}
+          />
+        </StickerSheet.Row>
       </StickerSheet>
     </>
   ),