From ca8ac773519791b9086550e87ab5356518ae3878 Mon Sep 17 00:00:00 2001 From: Cassandra Date: Fri, 20 Sep 2024 13:18:01 +1000 Subject: [PATCH 1/2] 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 --- .changeset/shy-turkeys-serve.md | 2 + .../DosAndDonts/DosAndDonts.module.css | 10 ++++ docs/components/DosAndDonts/DosAndDonts.tsx | 52 +++++++++---------- .../StickerSheet/StickerSheet.module.css | 4 +- 4 files changed, 38 insertions(+), 30 deletions(-) create mode 100644 .changeset/shy-turkeys-serve.md create mode 100644 docs/components/DosAndDonts/DosAndDonts.module.css diff --git a/.changeset/shy-turkeys-serve.md b/.changeset/shy-turkeys-serve.md new file mode 100644 index 00000000000..a845151cc84 --- /dev/null +++ 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 new file mode 100644 index 00000000000..658e04724fb --- /dev/null +++ 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 index 1bf75467812..842f64cfbd7 100644 --- 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): JSX.Element => ( -
+
{children}
) @@ -29,31 +27,29 @@ export const DoOrDont = ({ isDont?: boolean story: any } & HTMLAttributes): JSX.Element => ( -
*]:m-0", className)} {...otherProps}> -
-
- {isDont ? ( - - ) : ( - - )} - - - {isDont ? "Don't" : "Do"} - - -
- +
+
+ {isDont ? ( + + ) : ( + + )} + + + {isDont ? "Don't" : "Do"} + +
+
) diff --git a/docs/components/StickerSheet/StickerSheet.module.css b/docs/components/StickerSheet/StickerSheet.module.css index f78323e9647..328158214d8 100644 --- a/docs/components/StickerSheet/StickerSheet.module.css +++ b/docs/components/StickerSheet/StickerSheet.module.css @@ -1,5 +1,5 @@ .stickerSheetSectionHeading { - margin-bottom: var(--spacing-md); + margin-bottom: var(--spacing-12); .stickerSheet + .stickerSheet & { margin-top: var(--spacing-lg); @@ -7,5 +7,5 @@ } .stickerSheetTable { - margin-left: calc(-1 * var(--spacing-md)); + margin-left: calc(-1 * var(--spacing-12)); } From 218f3d0f8ba5cde4ec38d59967cba8c226d4e772 Mon Sep 17 00:00:00 2001 From: Kevin Yank Date: Fri, 20 Sep 2024 13:41:34 +1000 Subject: [PATCH 2/2] Clean up obsolete docs (#5068) * Update Getting started on Welcome page The sections referenced in the Getting Started seem no longer to exist, and included a broken link. * Remove broken link from README The Quick links section included a link to a README for the component-library package. This package does not currently have a README, so this link was broken. --- .changeset/real-shoes-relate.md | 2 ++ README.md | 1 - docs/pages/welcome.mdx | 7 ------- 3 files changed, 2 insertions(+), 8 deletions(-) create mode 100644 .changeset/real-shoes-relate.md diff --git a/.changeset/real-shoes-relate.md b/.changeset/real-shoes-relate.md new file mode 100644 index 00000000000..a845151cc84 --- /dev/null +++ b/.changeset/real-shoes-relate.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/README.md b/README.md index 4a9aac317e8..e3cdf198dbe 100644 --- a/README.md +++ b/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 diff --git a/docs/pages/welcome.mdx b/docs/pages/welcome.mdx index ae297e68162..e9c97bef867 100644 --- a/docs/pages/welcome.mdx +++ b/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.