chore: clean up Storybook styles (#5067)

* docs(DosAndDonts): update styles so items are the same height * docs(DosAndDonts): update styles for single col to span full width * docs(StickerSheet): fix spacing
cultureamp · Sep 20, 2024 · ca8ac77 · ca8ac77
1 parent c29094e
commit ca8ac77
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 30 deletions.
diff --git a/.changeset/shy-turkeys-serve.md b/.changeset/shy-turkeys-serve.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/docs/components/DosAndDonts/DosAndDonts.module.css b/docs/components/DosAndDonts/DosAndDonts.module.css
@@ -0,0 +1,10 @@
+.dosAndDonts {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--spacing-16);
+
+  > :only-child {
+    grid-column: span 2;
+  }
+}
diff --git a/docs/components/DosAndDonts/DosAndDonts.tsx b/docs/components/DosAndDonts/DosAndDonts.tsx
@@ -4,16 +4,14 @@ import { Canvas } from "@storybook/blocks"
 import classnames from "classnames"
 import { CheckIcon, CloseIcon } from "~components/Icon"
 import { SbContent } from "../SbContent"
+import styles from "./DosAndDonts.module.css"
 
 export const DosAndDonts = ({
   className,
   children,
   ...otherProps
 }: HTMLAttributes<HTMLDivElement>): JSX.Element => (
-  <div
-    className={classnames(className, "grid grid-cols-1 gap-16 lg:grid-cols-2")}
-    {...otherProps}
-  >
+  <div className={classnames(styles.dosAndDonts, className)} {...otherProps}>
     {children}
   </div>
 )
@@ -29,31 +27,29 @@ export const DoOrDont = ({
   isDont?: boolean
   story: any
 } & HTMLAttributes<HTMLDivElement>): JSX.Element => (
-  <div className={classnames("relative [&>*]:m-0", className)} {...otherProps}>
-    <div className="relative [&>*]:m-0">
-      <div
-        className={classnames(
-          "absolute top-6 left-6 z-10 py-4 px-6 font-bold text-white rounded flex gap-2 items-center justify-center",
-          isDont ? "bg-red-500" : "bg-green-500"
-        )}
-      >
-        {isDont ? (
-          <CloseIcon role="presentation" />
-        ) : (
-          <CheckIcon role="presentation" />
-        )}
-        <SbContent>
-          <span className="text-white">
-            <strong>{isDont ? "Don't" : "Do"}</strong>
-          </span>
-        </SbContent>
-      </div>
-      <Canvas
-        sourceState="none"
-        className="[&>*]:bg-gray-100 rounded-none shadow-none border-none"
-        of={story}
-      />
+  <div className={classnames("relative", className)} {...otherProps}>
+    <div
+      className={classnames(
+        "absolute top-6 left-6 z-10 py-4 px-6 font-bold text-white rounded flex gap-2 items-center justify-center",
+        isDont ? "bg-red-500" : "bg-green-500"
+      )}
+    >
+      {isDont ? (
+        <CloseIcon role="presentation" />
+      ) : (
+        <CheckIcon role="presentation" />
+      )}
+      <SbContent>
+        <span className="text-white">
+          <strong>{isDont ? "Don't" : "Do"}</strong>
+        </span>
+      </SbContent>
     </div>
+    <Canvas
+      sourceState="none"
+      className="h-full m-0 bg-gray-100 rounded-none shadow-none border-none"
+      of={story}
+    />
   </div>
 )
 

diff --git a/docs/components/StickerSheet/StickerSheet.module.css b/docs/components/StickerSheet/StickerSheet.module.css
@@ -1,11 +1,11 @@
 .stickerSheetSectionHeading {
-  margin-bottom: var(--spacing-md);
+  margin-bottom: var(--spacing-12);
 
   .stickerSheet + .stickerSheet & {
     margin-top: var(--spacing-lg);
   }
 }
 
 .stickerSheetTable {
-  margin-left: calc(-1 * var(--spacing-md));
+  margin-left: calc(-1 * var(--spacing-12));
 }