Merge branch 'main' into remove-toast-notification

.changeset/real-shoes-relate.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/shy-turkeys-serve.md

@@ -0,0 +1,2 @@
+---
+---

README.md

@@ -12,7 +12,6 @@ This document serves to orient you within the repository — to get you set up a
 
 - [Kaizen Issues](https://github.com/cultureamp/kaizen-discourse/issues)
 - [Kaizen Design Tokens README](./packages/design-tokens/README.md)
-- [Kaizen Component Library README](./packages/component-library/README.md)
 - [Contributing guidelines](./CONTRIBUTING.md)
 
 ## Designers

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;
+  }
+}

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>
 )
 

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));
 }

docs/pages/welcome.mdx

@@ -12,13 +12,6 @@ To achieve this, Kaizen provides a set of React components and tokens which repr
 
 You can find a comprehensive overview of how to get your code base started on our [Github page](https://github.com/cultureamp/kaizen-design-system#getting-started).
 
-We have 4 main sections:
-- Components: React components you can use in your Apps
-- Helpers: Any hooks or utilities we provide
-- Design tokens: Primarily used for creating new components that don't already exist.
-- Deprecated: components which are on their way out. (Find out more on the [Component Health page](https://cultureamp.design/component-health/))
-
-
 ## Support
 
 The Kaizen Design System Team is here to support the usage of the library via #prod_design_system channel on Slack.