diff --git a/.changeset/poor-deers-jog.md b/.changeset/poor-deers-jog.md new file mode 100644 index 00000000000..a845151cc84 --- /dev/null +++ b/.changeset/poor-deers-jog.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/.github/issue_template.md b/.github/issue_template.md index fb1544bb7e7..376ef87d8c4 100644 --- a/.github/issue_template.md +++ b/.github/issue_template.md @@ -1,3 +1,3 @@ # PLEASE DO NOT ADD ISSUES HERE. -We have a dedicated Github Repo for any issues and discussions: https://github.com/cultureamp/kaizen-discourse \ No newline at end of file +We have a dedicated Github Repo for any issues and discussions: https://github.com/cultureamp/kaizen-discourse diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 7c0ec96d8a9..ec50259b421 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -1,12 +1,14 @@ ## Important: Request PR reviews on Slack + Please reach out to the design system team on Slack in `#prod_design_system` for PR reviews. GitHub notifications (e.g. from tagging a person) are not actively monitored. ## Why + - ## What + diff --git a/.prettierignore b/.prettierignore index 7e829838221..2db2d063332 100644 --- a/.prettierignore +++ b/.prettierignore @@ -6,18 +6,24 @@ !*.ts !*.tsx !*.js +!*.cjs !*.mjs +!*.md +!*.mdx !*.json !*.yaml !*.yml -!*.scss !*.css +!*.scss # Explicitly ignore... +devbox.lock pnpm-lock.yaml +**/CHANGELOG.md **/node_modules/ /docs/storybook-static/ -/docs/utils/tailwind.css -/packages/**/dist -/packages/components/locales -/packages/design-tokens/css +/packages/**/dist/ +/packages/components/locales/ +/packages/design-tokens/css/ +/packages/design-tokens/less/ +/packages/design-tokens/sass/ diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 62f187563a1..ca0f588073a 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -12,9 +12,9 @@ Before creating an issue, search existing [Issues](https://github.com/cultureamp To create a new issue for changes to design documentation or missing documentation: 1. Visit [Issues](https://github.com/cultureamp/kaizen-discourse/issues/) and click the "**New issue**" button. -3. Give the issue a **title** framed as a problem, e.g. "There's no date picker guidance". -4. Give the issue a **description** that provides enough information that people can act on it without including any sensitive information, e.g. "As a designer, I want to know how to position coach marks because I'm designing an onboarding workflow." -5. Click **Submit**. Add a "Label" of "content" for design system content and "discussion" if you want feedback. +2. Give the issue a **title** framed as a problem, e.g. "There's no date picker guidance". +3. Give the issue a **description** that provides enough information that people can act on it without including any sensitive information, e.g. "As a designer, I want to know how to position coach marks because I'm designing an onboarding workflow." +4. Click **Submit**. Add a "Label" of "content" for design system content and "discussion" if you want feedback. ### Editing design documentation @@ -24,15 +24,15 @@ You can edit Kaizen Site documentation using GitHub's interface. 2. **Edit**: Click the pencil icon to "Edit this file". 3. **Preview**: Makes your changes to the content and click "Preview changes" to see how they look. 4. **Commit**: - - Under "Commit changes", write a commit message starting with `docs:`, such as `docs: update typography documentation`. - - Create a new branch for this commit and start a pull request, e.g. `di/update-typography-guidelines`. - - Click the "Commit changes" button. This will start a pull request. + - Under "Commit changes", write a commit message starting with `docs:`, such as `docs: update typography documentation`. + - Create a new branch for this commit and start a pull request, e.g. `di/update-typography-guidelines`. + - Click the "Commit changes" button. This will start a pull request. 5. **Create PR**: Click the "Create pull request" button. Add someone as a reviewer or let #prod_design_systems know. 6. **PR description and branch preview**: - - Give your PR **a description** to help reviewers quickly understand why you've made the changes you have made and give feedback. - - Where it says "No description provided", look for an "**Edit**" action (in the unlabeled icon dropdown). - - If there is an **open Issue** for your changes, link to it in the description by writing `#` and writing the number or title of the Issue. You can find the Issue number or title by searching for it in [Issues](https://github.com/cultureamp/kaizen-discourse/issues). - - It's convenient for reviewers if you add a link to your "**branch preview**", which shows how your changes will look on the Kaizen Site after it has automatically been built (within a few minutes of opening the PR). The branch preview link will use your branch name like this: (branch-name), which you can find in the "Checks" section of the page (likely under "Show all checks" > Branch preview: "Details"). + - Give your PR **a description** to help reviewers quickly understand why you've made the changes you have made and give feedback. + - Where it says "No description provided", look for an "**Edit**" action (in the unlabeled icon dropdown). + - If there is an **open Issue** for your changes, link to it in the description by writing `#` and writing the number or title of the Issue. You can find the Issue number or title by searching for it in [Issues](https://github.com/cultureamp/kaizen-discourse/issues). + - It's convenient for reviewers if you add a link to your "**branch preview**", which shows how your changes will look on the Kaizen Site after it has automatically been built (within a few minutes of opening the PR). The branch preview link will use your branch name like this: (branch-name), which you can find in the "Checks" section of the page (likely under "Show all checks" > Branch preview: "Details"). Once it's approved, click "Squash and merge" to publish your changes. Share the link to the updated documentation on #updates_design_systems for awareness. @@ -53,7 +53,7 @@ Every code contribution **should strive to** have: To update a component in code: -- Ask for a code review from a design systems advocate (an "advocado"), #prod_design_systems, or someone in your team who is experienced with Kaizen* +- Ask for a code review from a design systems advocate (an "advocado"), #prod_design_systems, or someone in your team who is experienced with Kaizen\* - Notify the front-end engineering practice (#pract_front_end_eng) of any possible breaking changes - Notify the QA practice of any possible breaking changes @@ -77,7 +77,7 @@ To release a new version of a package, create a pull request that: - Modifies only the package(s) you wish to release ([see below](#updating-multiple-packages)) - Has a Changeset file ([see below](#creating-a-changeset)) - - This step is optional, but recommended. Exceptions are for things like docs or tooling changes. + - This step is optional, but recommended. Exceptions are for things like docs or tooling changes. Once that pull request is merged into main, a Changeset PR will automatically be created with the details of your change, and once the Changeset PR is merged, an automated release process will be triggered and the newly published package version will be available on the npm public registry. @@ -110,7 +110,6 @@ Creating a changeset is straight forward: A changeset `md` file will be added to your branch which you are free to modify the details of if necessary. - #### Description The `description` should be a short (less than ~60 characters) summary of changes introduced in the release. This summary will be included in the CHANGELOG (see the [releases page](https://github.com/cultureamp/kaizen-design-system/releases)), along with the commit type, a link to the pull request which triggered the release, and a detailed summary of any breaking changes. @@ -156,6 +155,7 @@ Refer to the [docs folder](docs) for code guidelines and patterns. To generate a new component and package, new component within an existing package, or a subcomponent, run the following command and follow the prompts: + ``` pnpm plop ``` diff --git a/README.md b/README.md index e3cdf198dbe..967daf8a8ed 100644 --- a/README.md +++ b/README.md @@ -34,9 +34,11 @@ To learn more, see the designer section of the [Contributing guidelines](./CONTR ## Getting started ### Setup + Set up access to private Culture Amp packages on your laptop. You will need to update `~/.npmrc` with a Github token linked to your account. Refer to the [instructions here](https://cultureamp.atlassian.net/wiki/spaces/TV/pages/2776629375/Working+with+our+private+GitHub+package+registry). ### Local development + Ensure devbox is setup as per [https://cultureamp.atlassian.net/wiki/spaces/DE/pages/3342434338/Devbox+setup](https://cultureamp.atlassian.net/wiki/spaces/DE/pages/3342434338/Devbox+setup) Install and start processes (this start an interactive UI in your terminal) `devbox services up` @@ -56,17 +58,17 @@ While the main site is located at , all branches in t It's dangerous to go alone! Take these: -Command | Summary -:- | :- -`pnpm storybook` | Develop components locally using Storybook -`STORIES=path/to/package pnpm storybook` | Develop just one package at a time using Storybook (builds faster!) -`pnpm compile` | Run all typechecks -`pnpm lint` | Run all linters -`pnpm lint:fix` | Run all linters, fixing violations -`pnpm plop` | Add a new component/subcomponent -`pnpm test` | Run all [Jest](https://jestjs.io/) tests -`pnpm storybook:test` | Run tests on all Storybook stories -`pnpm reset` | Reinstall all dependencies +| Command | Summary | +| :--------------------------------------- | :------------------------------------------------------------------ | +| `pnpm storybook` | Develop components locally using Storybook | +| `STORIES=path/to/package pnpm storybook` | Develop just one package at a time using Storybook (builds faster!) | +| `pnpm compile` | Run all typechecks | +| `pnpm lint` | Run all linters | +| `pnpm lint:fix` | Run all linters, fixing violations | +| `pnpm plop` | Add a new component/subcomponent | +| `pnpm test` | Run all [Jest](https://jestjs.io/) tests | +| `pnpm storybook:test` | Run tests on all Storybook stories | +| `pnpm reset` | Reinstall all dependencies | ## Bugs and discussions diff --git a/docs/pages/app-starter.mdx b/docs/pages/app-starter.mdx index 94989e643ef..07174d1109c 100644 --- a/docs/pages/app-starter.mdx +++ b/docs/pages/app-starter.mdx @@ -1,6 +1,6 @@ -import { Meta, Unstyled } from "@storybook/blocks" -import { InlineNotification } from "~components/Notification" -import { LinkTo } from "../components/LinkTo" +import { Meta, Unstyled } from '@storybook/blocks' +import { InlineNotification } from '~components/Notification' +import { LinkTo } from '../components/LinkTo' @@ -11,18 +11,23 @@ This guide is all about how to introduce the Kaizen Design System to your app. Whilst the Kaizen Design System mainly focuses on the more atomic components in your app, some of the components have a high level of complexity requiring various global components to be present in order for them to function. - You won't need to apply any of the below if you have the latest next-template. + + You won't need to apply any of the below if you have the latest{' '} + next-template. + ## 1. Add the KaizenProvider The KaizenProvider feeds your entire app with Kaizen defaults so it's important that it goes at the very root of your application. + ```tsx -import { KaizenProvider } from "@kaizen/components"; - +import { KaizenProvider } from '@kaizen/components' +; ``` + Be sure to read the KaizenProvider documentation for migration tips and in case your app requires any further config, but generally this should be it! ## 2. Add unified-home's @culturamp/i18n-react-intl webpack plugin to your webpack config @@ -45,6 +50,7 @@ Whether or not you are already familiar with Tailwind, you'll want to take a loo For the convenience of your app, we've compiled all the necessary styles for our components into a single stylesheet to make it easy to set and forget. This includes: + - CSS variables (design tokens) - [Normalize.css](https://github.com/necolas/normalize.css) - Font assets @@ -56,19 +62,26 @@ Add this stylesheet at the top of your global styles imports of your app. Note: If you are using Storybook, you will also need to add it in your `preview.ts`. ```js -import "@kaizen/components/dist/styles.css" -import "tailwind.css" +import '@kaizen/components/dist/styles.css' +import 'tailwind.css' ``` ## 5. Link to Google Material Symbols CDN -*Note that this step is required as long as you use any Kaizen component that contains an Icon, not just if you use (Future) Icon directly.* +_Note that this step is required as long as you use any Kaizen component that contains an Icon, not just if you use (Future) Icon directly._ Our (Future) Icons (introduced in `@kaizen/components@1.67.0`) are sourced from [Google Material Symbols](https://fonts.google.com/icons). You will need to add the following to your Storybook `preview-head.html` and to the `` of your apps. ```html - - - + + + ``` diff --git a/docs/pages/welcome.mdx b/docs/pages/welcome.mdx index e9c97bef867..3b515b96781 100644 --- a/docs/pages/welcome.mdx +++ b/docs/pages/welcome.mdx @@ -1,4 +1,4 @@ -import { Meta } from "@storybook/blocks" +import { Meta } from '@storybook/blocks' @@ -16,7 +16,8 @@ You can find a comprehensive overview of how to get your code base started on ou The Kaizen Design System Team is here to support the usage of the library via #prod_design_system channel on Slack. -Here's a few things to reach out to us for *before contribution*: +Here's a few things to reach out to us for _before contribution_: + - Any bugs with the existing components - A missing feature in a component - Trouble finding something diff --git a/packages/components/codemods/README.md b/packages/components/codemods/README.md index a52382655c1..200bb3296a5 100644 --- a/packages/components/codemods/README.md +++ b/packages/components/codemods/README.md @@ -1,5 +1,5 @@ - # Kaizen codemods + This directory is a collection of codemods that can be executed via CLI with the `kaizen-codemod` command. ## Prerequisites @@ -18,6 +18,7 @@ DIR - the directory to run the codemod for. Note that node_modules are excluded. CODEMOD_NAME - the name of the codemod (refer to list below). Example: + ``` pnpm kaizen-codemod src migrateWellVariantToColor ``` diff --git a/packages/components/src/Avatar/_docs/Avatar.mdx b/packages/components/src/Avatar/_docs/Avatar.mdx index 008be70d4e2..213e6a0eafd 100644 --- a/packages/components/src/Avatar/_docs/Avatar.mdx +++ b/packages/components/src/Avatar/_docs/Avatar.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as AvatarStories from "./Avatar.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as AvatarStories from './Avatar.stories' @@ -13,7 +13,6 @@ import * as AvatarStories from "./Avatar.stories" /> - ## Overview diff --git a/packages/components/src/AvatarGroup/_docs/AvatarGroup.mdx b/packages/components/src/AvatarGroup/_docs/AvatarGroup.mdx index 1d1580ed4dd..047bddda450 100644 --- a/packages/components/src/AvatarGroup/_docs/AvatarGroup.mdx +++ b/packages/components/src/AvatarGroup/_docs/AvatarGroup.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as AvatarGroupStories from "./AvatarGroup.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as AvatarGroupStories from './AvatarGroup.stories' diff --git a/packages/components/src/Badge/_docs/Badge.mdx b/packages/components/src/Badge/_docs/Badge.mdx index b342c076af0..8d3f76c428c 100644 --- a/packages/components/src/Badge/_docs/Badge.mdx +++ b/packages/components/src/Badge/_docs/Badge.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as BadgeStories from "./Badge.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as BadgeStories from './Badge.stories' diff --git a/packages/components/src/Brand/_docs/Brand.mdx b/packages/components/src/Brand/_docs/Brand.mdx index 1c21e981c29..03f147b1a4e 100644 --- a/packages/components/src/Brand/_docs/Brand.mdx +++ b/packages/components/src/Brand/_docs/Brand.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as BrandStories from "./Brand.stories" +import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as BrandStories from './Brand.stories' @@ -13,7 +13,6 @@ import * as BrandStories from "./Brand.stories" /> - ## Overview diff --git a/packages/components/src/BrandMoment/_docs/BrandMoment.mdx b/packages/components/src/BrandMoment/_docs/BrandMoment.mdx index d65d353c7a5..f960e99f852 100644 --- a/packages/components/src/BrandMoment/_docs/BrandMoment.mdx +++ b/packages/components/src/BrandMoment/_docs/BrandMoment.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as BrandMoment from "./BrandMoment.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as BrandMoment from './BrandMoment.stories' diff --git a/packages/components/src/ButtonGroup/_docs/ButtonGroup.mdx b/packages/components/src/ButtonGroup/_docs/ButtonGroup.mdx index 7e98812433d..cd5629e7885 100644 --- a/packages/components/src/ButtonGroup/_docs/ButtonGroup.mdx +++ b/packages/components/src/ButtonGroup/_docs/ButtonGroup.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as ButtonGroupStories from "./ButtonGroup.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as ButtonGroupStories from './ButtonGroup.stories' diff --git a/packages/components/src/Calendar/CalendarRange/_docs/CalendarRange.mdx b/packages/components/src/Calendar/CalendarRange/_docs/CalendarRange.mdx index 04fe8514238..7b9c92c9350 100644 --- a/packages/components/src/Calendar/CalendarRange/_docs/CalendarRange.mdx +++ b/packages/components/src/Calendar/CalendarRange/_docs/CalendarRange.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as CalendarRangeStories from "./CalendarRange.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as CalendarRangeStories from './CalendarRange.stories' diff --git a/packages/components/src/Calendar/CalendarSingle/_docs/CalendarSingle.mdx b/packages/components/src/Calendar/CalendarSingle/_docs/CalendarSingle.mdx index 3efde157fe1..fc79c1167d0 100644 --- a/packages/components/src/Calendar/CalendarSingle/_docs/CalendarSingle.mdx +++ b/packages/components/src/Calendar/CalendarSingle/_docs/CalendarSingle.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as CalendarSingleStories from "./CalendarSingle.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as CalendarSingleStories from './CalendarSingle.stories' diff --git a/packages/components/src/Card/_docs/Card.mdx b/packages/components/src/Card/_docs/Card.mdx index d4914cb4f8f..b13748edf89 100644 --- a/packages/components/src/Card/_docs/Card.mdx +++ b/packages/components/src/Card/_docs/Card.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as CardStories from "./Card.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as CardStories from './Card.stories' @@ -23,8 +23,9 @@ The `Card` component is a flexible container used to wrap primary content. It ha ## API ### Colors + ### Elevation - + diff --git a/packages/components/src/Checkbox/Checkbox/_docs/Checkbox.mdx b/packages/components/src/Checkbox/Checkbox/_docs/Checkbox.mdx index 22e4be63e1f..0fe1a1a5ebd 100644 --- a/packages/components/src/Checkbox/Checkbox/_docs/Checkbox.mdx +++ b/packages/components/src/Checkbox/Checkbox/_docs/Checkbox.mdx @@ -1,7 +1,7 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import { LinkTo } from "~storybook/components/LinkTo" -import * as CheckboxStories from "./Checkbox.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import { LinkTo } from '~storybook/components/LinkTo' +import * as CheckboxStories from './Checkbox.stories' @@ -20,6 +20,5 @@ A primitive, not to be used alone. Commonly used via CheckboxField or CheckboxGroup. - diff --git a/packages/components/src/Checkbox/CheckboxField/_docs/CheckboxField.mdx b/packages/components/src/Checkbox/CheckboxField/_docs/CheckboxField.mdx index adf64efc9a6..bf52e79aebb 100644 --- a/packages/components/src/Checkbox/CheckboxField/_docs/CheckboxField.mdx +++ b/packages/components/src/Checkbox/CheckboxField/_docs/CheckboxField.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as CheckboxFieldStories from "./CheckboxField.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as CheckboxFieldStories from './CheckboxField.stories' @@ -25,7 +25,9 @@ A checkbox field includes a checkable input and its label. Checkbox fields are u ## API ### No Bottom Margin + Removes the margin from below the Checkbox Field. **Note** This is a bit of an antiquated pattern, we advise you to keep this on by default and use flex containers to apply spacing + diff --git a/packages/components/src/Checkbox/CheckboxGroup/_docs/CheckboxGroup.mdx b/packages/components/src/Checkbox/CheckboxGroup/_docs/CheckboxGroup.mdx index b4e9231134e..6c7f16e9dfa 100644 --- a/packages/components/src/Checkbox/CheckboxGroup/_docs/CheckboxGroup.mdx +++ b/packages/components/src/Checkbox/CheckboxGroup/_docs/CheckboxGroup.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as CheckboxGroupStories from "./CheckboxGroup.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as CheckboxGroupStories from './CheckboxGroup.stories' @@ -25,6 +25,7 @@ A checkbox group contains checkbox fields that let people select zero or more op ## API ### No Bottom Margin + Removes the margin from below the Checkbox Field. **Note** This is a bit of an antiquated pattern, we advise you to keep this on by default and use flex containers to apply spacing diff --git a/packages/components/src/Collapsible/Collapsible/_docs/Collapsible.mdx b/packages/components/src/Collapsible/Collapsible/_docs/Collapsible.mdx index eab6a31a5f1..7e6cea2fa82 100644 --- a/packages/components/src/Collapsible/Collapsible/_docs/Collapsible.mdx +++ b/packages/components/src/Collapsible/Collapsible/_docs/Collapsible.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as CollapsibleStories from "./Collapsible.stories" +import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as CollapsibleStories from './Collapsible.stories' diff --git a/packages/components/src/Collapsible/CollapsibleGroup/_docs/CollapsibleGroup.mdx b/packages/components/src/Collapsible/CollapsibleGroup/_docs/CollapsibleGroup.mdx index f3fe76c5817..793dbdd3851 100644 --- a/packages/components/src/Collapsible/CollapsibleGroup/_docs/CollapsibleGroup.mdx +++ b/packages/components/src/Collapsible/CollapsibleGroup/_docs/CollapsibleGroup.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as CollapsibleGroupStories from "./CollapsibleGroup.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as CollapsibleGroupStories from './CollapsibleGroup.stories' @@ -28,10 +28,11 @@ Collapsibles are used to collapse and expand content inline on a page. This lets The `CollapsibleGroup` exposes some of the top level `Collapsible` props so you can apply them to all Collapsibles within the Group. - - `sticky` - - `noSectionPadding` - - `lazyLoad` - - `onToggle` +- `sticky` +- `noSectionPadding` +- `lazyLoad` +- `onToggle` ### Separated + diff --git a/packages/components/src/Collapsible/ExpertAdviceCollapsible/_docs/ExpertAdviceCollapsible.mdx b/packages/components/src/Collapsible/ExpertAdviceCollapsible/_docs/ExpertAdviceCollapsible.mdx index a643e9c25c1..e9d29978ba9 100644 --- a/packages/components/src/Collapsible/ExpertAdviceCollapsible/_docs/ExpertAdviceCollapsible.mdx +++ b/packages/components/src/Collapsible/ExpertAdviceCollapsible/_docs/ExpertAdviceCollapsible.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as ExpertAdviceCollapsibleStories from "./ExpertAdviceCollapsible.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as ExpertAdviceCollapsibleStories from './ExpertAdviceCollapsible.stories' diff --git a/packages/components/src/Container/_docs/Container.mdx b/packages/components/src/Container/_docs/Container.mdx index 0c0de2505ab..ab5cf8763ab 100644 --- a/packages/components/src/Container/_docs/Container.mdx +++ b/packages/components/src/Container/_docs/Container.mdx @@ -1,7 +1,7 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import { LinkTo } from "~storybook/components/LinkTo" -import * as ContainerStories from "./Container.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import { LinkTo } from '~storybook/components/LinkTo' +import * as ContainerStories from './Container.stories' @@ -23,5 +23,7 @@ Wraps your entire page. ## Use Case + Usually wraps a Content component. + diff --git a/packages/components/src/Content/_docs/Content.mdx b/packages/components/src/Content/_docs/Content.mdx index 91d5b182a37..0e2479e2c18 100644 --- a/packages/components/src/Content/_docs/Content.mdx +++ b/packages/components/src/Content/_docs/Content.mdx @@ -1,7 +1,7 @@ -import { Canvas, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import { LinkTo } from "~storybook/components/LinkTo" -import * as ContentStories from "./Content.stories" +import { Canvas, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import { LinkTo } from '~storybook/components/LinkTo' +import * as ContentStories from './Content.stories' @@ -22,5 +22,7 @@ Wraps your content at a **page level** in the standard minimum width and margins ## Use Case + Usually wrapped in a Container + diff --git a/packages/components/src/DatePicker/_docs/DatePicker.mdx b/packages/components/src/DatePicker/_docs/DatePicker.mdx index 134f8d7746d..1dd7838fd27 100644 --- a/packages/components/src/DatePicker/_docs/DatePicker.mdx +++ b/packages/components/src/DatePicker/_docs/DatePicker.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as DatePickerStories from "./DatePicker.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as DatePickerStories from './DatePicker.stories' diff --git a/packages/components/src/DateRangePicker/_docs/DateRangePicker.mdx b/packages/components/src/DateRangePicker/_docs/DateRangePicker.mdx index c1bba04a2e7..8432e18ce64 100644 --- a/packages/components/src/DateRangePicker/_docs/DateRangePicker.mdx +++ b/packages/components/src/DateRangePicker/_docs/DateRangePicker.mdx @@ -1,6 +1,6 @@ -import { Canvas, DocsStory, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as DateRangePickerStories from "./DateRangePicker.stories" +import { Canvas, DocsStory, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as DateRangePickerStories from './DateRangePicker.stories' @@ -24,7 +24,6 @@ Date range picker form field. - ## Responsive behaviour As both the `DatePicker` and `DateRangePicker` use the `CalendarPopover` component under the hood, they share the same responsive behaviour. You can read more on this [here](/docs/components-date-controls-datepicker--docs#responsive-behaviour). diff --git a/packages/components/src/Divider/_docs/Divider.mdx b/packages/components/src/Divider/_docs/Divider.mdx index e90a1fed2e0..97cec54b93e 100644 --- a/packages/components/src/Divider/_docs/Divider.mdx +++ b/packages/components/src/Divider/_docs/Divider.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as DividerStories from "./Divider.stories" +import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as DividerStories from './Divider.stories' diff --git a/packages/components/src/EmptyState/_docs/EmptyState.mdx b/packages/components/src/EmptyState/_docs/EmptyState.mdx index f5923f08f74..ef6c1f7c045 100644 --- a/packages/components/src/EmptyState/_docs/EmptyState.mdx +++ b/packages/components/src/EmptyState/_docs/EmptyState.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as EmptyStateStories from "./EmptyState.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as EmptyStateStories from './EmptyState.stories' diff --git a/packages/components/src/ErrorPage/_docs/ErrorPage.mdx b/packages/components/src/ErrorPage/_docs/ErrorPage.mdx index 24746c6d4ab..19f6f62266b 100644 --- a/packages/components/src/ErrorPage/_docs/ErrorPage.mdx +++ b/packages/components/src/ErrorPage/_docs/ErrorPage.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as ErrorPageStories from "./ErrorPage.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as ErrorPageStories from './ErrorPage.stories' diff --git a/packages/components/src/FieldGroup/_docs/FieldGroup.mdx b/packages/components/src/FieldGroup/_docs/FieldGroup.mdx index 8f134f75df2..4abf52de295 100644 --- a/packages/components/src/FieldGroup/_docs/FieldGroup.mdx +++ b/packages/components/src/FieldGroup/_docs/FieldGroup.mdx @@ -1,7 +1,7 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import { LinkTo } from "~storybook/components/LinkTo" -import * as FieldGroupStories from "./FieldGroup.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import { LinkTo } from '~storybook/components/LinkTo' +import * as FieldGroupStories from './FieldGroup.stories' @@ -24,9 +24,11 @@ A simple wrapper to wrap form field components and their related siblings. This ## API ### Inline + Changes the FieldGroup to an inline element with no bottom margin. This can be seen in the `Slider`component. You can see inline vs block scope in the following stories: #### Inline + #### Default (block) diff --git a/packages/components/src/FieldMessage/_docs/FieldMessage.mdx b/packages/components/src/FieldMessage/_docs/FieldMessage.mdx index e27699f21fb..61d07858c0b 100644 --- a/packages/components/src/FieldMessage/_docs/FieldMessage.mdx +++ b/packages/components/src/FieldMessage/_docs/FieldMessage.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as FieldMessageStories from "./FieldMessage.stories" +import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as FieldMessageStories from './FieldMessage.stories' @@ -36,7 +36,6 @@ Simple `string`s will be wrapped in a `p` tag with the default `small` text styl Note that when using this for helper text, the component should not recieve `status` - this is reserved for validation messages. - ### Status `status` can used to create form validation message that provide additional context to a form field's state, ie: `error`, `caution` or `success`. diff --git a/packages/components/src/Filter/Filter/_docs/Filter.mdx b/packages/components/src/Filter/Filter/_docs/Filter.mdx index 6da9b7f29a9..de0971d5f4c 100644 --- a/packages/components/src/Filter/Filter/_docs/Filter.mdx +++ b/packages/components/src/Filter/Filter/_docs/Filter.mdx @@ -1,7 +1,7 @@ -import { Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation, NoClipCanvas } from "~storybook/components" -import { LinkTo } from "~storybook/components/LinkTo" -import * as FilterStories from "./Filter.stories" +import { Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation, NoClipCanvas } from '~storybook/components' +import { LinkTo } from '~storybook/components/LinkTo' +import * as FilterStories from './Filter.stories' @@ -14,11 +14,12 @@ import * as FilterStories from "./Filter.stories" /> - + ## Overview These components are mainly used for constructing Filter components (eg. FilterSelect): + - FilterButton for the renderTrigger - `FilterContents` to wrap the contents within a Filter @@ -51,7 +52,6 @@ type TriggerButtonProps = { onClick: () => void // Calls `setIsOpen(!isOpen)` isOpen: boolean // The value from the `isOpen` prop } - ``` If a `ref` is provided to the FilterButton it will be used, otherwise a fallback `ref` @@ -61,16 +61,14 @@ will be created (this is required to tie the trigger to the popover). type FilterTriggerRef = { ref: { triggerRef?: React.RefObject } } - ``` #### Simple Filter ```tsx - ( - - )} + } /> ``` @@ -79,11 +77,12 @@ type FilterTriggerRef = { #### Removable Filter ```tsx - ( )} /> diff --git a/packages/components/src/Filter/FilterBar/_docs/FilterBar.mdx b/packages/components/src/Filter/FilterBar/_docs/FilterBar.mdx index 8f538cec7b9..2777dac0a5c 100644 --- a/packages/components/src/Filter/FilterBar/_docs/FilterBar.mdx +++ b/packages/components/src/Filter/FilterBar/_docs/FilterBar.mdx @@ -1,7 +1,7 @@ -import { Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation, NoClipCanvas } from "~storybook/components" -import { LinkTo } from "~storybook/components/LinkTo" -import * as FilterBarStories from "./FilterBar.stories" +import { Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation, NoClipCanvas } from '~storybook/components' +import { LinkTo } from '~storybook/components/LinkTo' +import * as FilterBarStories from './FilterBar.stories' @@ -37,7 +37,7 @@ We also provide a `Filters` type which can accept the same generic to provide im `ValuesMap` should be in the shape of `{ [filterId]: filterValueType }`. ```tsx -import { FilterBar, Filters } from "@kaizen/components" +import { FilterBar, Filters } from '@kaizen/components' type ValuesMap = { filterId1: string @@ -45,21 +45,15 @@ type ValuesMap = { } const [values, setValues] = useState>({ - filterId1: "default-value" + filterId1: 'default-value', }) const filters = [ - { id: "filterId1", ...rest }, - { id: "filterId2", ...rest }, + { id: 'filterId1', ...rest }, + { id: 'filterId2', ...rest }, ] satisfies Filters -return ( - - filters={filters} - values={values} - onValuesChange={setValues} - /> -) +return filters={filters} values={values} onValuesChange={setValues} /> ``` ### `filters` @@ -71,7 +65,7 @@ The `filters` prop is an array of attributes used to create the list of filters. We provide a `Filters` type you can use for improved type safety. ```tsx -import { FilterBar, Filters, DateRange, FilterMultiSelect } from "@kaizen/components" +import { FilterBar, Filters, DateRange, FilterMultiSelect } from '@kaizen/components' type ValuesMap = { filterId1: string @@ -81,13 +75,13 @@ type ValuesMap = { const filters = [ { - id: "filterId1", - name: "Filter 1", + id: 'filterId1', + name: 'Filter 1', Component: , }, { - id: "filterId2", - name: "Filter 2", + id: 'filterId2', + name: 'Filter 2', Component: ( {/* Compose your structure using subcomponents of FilterMultiSelect */} @@ -96,11 +90,11 @@ const filters = [ ), }, { - id: "filterId3", - name: "Filter 3", + id: 'filterId3', + name: 'Filter 3', Component: , isRemovable: true, - isUsableWhen: state => state.filterId1.value !== undefined + isUsableWhen: (state) => state.filterId1.value !== undefined, }, ] satisfies Filters ``` @@ -133,6 +127,7 @@ Provided Filter components are built on top of their base component, and have th If the component comes with an `onChange` (or similar) prop, it will be made optional and it can be used for additional actions (eg. adding analytics). Available Filter components: + - `` - extends FilterDatePicker - `selectedDate` is omitted - `onDateChange` is now optional @@ -176,23 +171,28 @@ type ValuesMap = { const filters = [ { - id: "coffee", - name: "Coffee", - Component: , + id: 'coffee', + name: 'Coffee', + Component: ( + + ), }, { - id: "milk", - name: "Milk", + id: 'milk', + name: 'Milk', Component: , - isUsableWhen: state => state.coffee.value === "latte", + isUsableWhen: (state) => state.coffee.value === 'latte', }, ] satisfies Filters ``` The `state` arg will provide you with the following attributes for all the filters (mapped to the keys of the `ValuesMap`): + ``` id: keyof ValuesMap name: string @@ -201,6 +201,7 @@ isActive: boolean ``` When a dependent filter has not met its condition (not _Usable_): + - it will be removed from the FilterBar - if it has a value, the value will be cleared @@ -223,12 +224,10 @@ type ValuesMap = { // @note: Unless you are providing a default value for all the filters, // you will want to wrap it in Partial. const [values, setValues] = useState>({ - filterId1: "default-value" + filterId1: 'default-value', }) -return ( - values={values} {...rest} /> -) +return values={values} {...rest} /> ``` ### `onValuesChange` @@ -247,6 +246,7 @@ Filters that do not meet their condition will not be shown amongst the Active Fi See [filter attribute `isUsableWhen`](#isusablewhen-state-filtersstatevaluesmap--boolean) for api. This example shows the following dependencies: + - **Milk** is only usable when **Coffee** _is Latte_ - `isUsableWhen: state => state.coffee.value === "latte"` - An initial value of _Full Cream_ is passed in, but immediately cleared @@ -283,10 +283,10 @@ type Values = { * Using `getFilterState` as dependency source is known */ const ExampleDependentFilter = () => { - const { getFilterState } = useFilterBarContext() - const sourceFilter = getFilterState("source") + const { getFilterState } = useFilterBarContext() + const sourceFilter = getFilterState('source') const items = retrieveItems(sourceFilter.value) - return ( id="dependent" items={items} />) + return id="dependent" items={items} /> } /** @@ -301,13 +301,13 @@ const ExampleDependentFilter = (props: { const { getActiveFilterValues } = useFilterBarContext() const activeValues = getActiveFilterValues() const items = props.retrieveItemsCallback(activeValues) - return ( id={props.id} items={items} />) + return id={props.id} items={items} /> } const CustomFilterBar = () => { const filters = [ - { id: "source", ...rest }, - { id: "dependent", Component: , ...rest }, + { id: 'source', ...rest }, + { id: 'dependent', Component: , ...rest }, ] satisfies Filters return filters={filters} {...rest} /> @@ -331,6 +331,7 @@ Out of the box, we do not make assumptions about your state management tool, so the types to match the expected format of your chosen query param library. The following example uses the + serialize-query-params and query-string packages. @@ -357,14 +358,14 @@ type Values = { } const CycleFilter = () => { - const { openFilter } = useFilterBarContext() + const { openFilter } = useFilterBarContext() return ( { - if (key === "custom") openFilter("customRange") + items={[{ value: 'custom', label: 'Custom Range' }]} + onSelectionChange={(key) => { + if (key === 'custom') openFilter('customRange') }} /> ) @@ -372,8 +373,8 @@ const CycleFilter = () => { const CustomFilterBar = () => { const filters = [ - { id: "cycle", Component: , ...rest }, - { id: "customRange", isUsableWhen: state => state.cycle.value === "custom", ...rest }, + { id: 'cycle', Component: , ...rest }, + { id: 'customRange', isUsableWhen: (state) => state.cycle.value === 'custom', ...rest }, ] satisfies Filters return filters={filters} {...rest} /> diff --git a/packages/components/src/Filter/FilterButton/_docs/filter-buttons.mdx b/packages/components/src/Filter/FilterButton/_docs/filter-buttons.mdx index df00af24985..245489a57f8 100644 --- a/packages/components/src/Filter/FilterButton/_docs/filter-buttons.mdx +++ b/packages/components/src/Filter/FilterButton/_docs/filter-buttons.mdx @@ -1,7 +1,7 @@ -import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks" -import { KAIOInstallation, ResourceLinks } from "~storybook/components" -import * as FilterButtonExamples from "./FilterButton.stories" -import * as FilterButtonRemovableExamples from "./FilterButtonRemovable.stories" +import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks' +import { KAIOInstallation, ResourceLinks } from '~storybook/components' +import * as FilterButtonExamples from './FilterButton.stories' +import * as FilterButtonRemovableExamples from './FilterButtonRemovable.stories' @@ -14,7 +14,7 @@ import * as FilterButtonRemovableExamples from "./FilterButtonRemovable.stories" Trigger buttons for use by components using the `` abstraction. - + ## Filter Button diff --git a/packages/components/src/Filter/FilterDatePicker/_docs/FilterDatePicker.mdx b/packages/components/src/Filter/FilterDatePicker/_docs/FilterDatePicker.mdx index 79efb5eed6e..c36db05fac3 100644 --- a/packages/components/src/Filter/FilterDatePicker/_docs/FilterDatePicker.mdx +++ b/packages/components/src/Filter/FilterDatePicker/_docs/FilterDatePicker.mdx @@ -1,6 +1,6 @@ -import { Controls, Description, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation, NoClipCanvas } from "~storybook/components" -import * as FilterDPStories from "./FilterDatePicker.stories" +import { Controls, Description, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation, NoClipCanvas } from '~storybook/components' +import * as FilterDPStories from './FilterDatePicker.stories' @@ -18,23 +18,28 @@ Date Picker to use for Filtering by a single date. ## Playground + ## API ### Render Trigger + ### Description + ### Extend Input Props + ### Validation + diff --git a/packages/components/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.mdx b/packages/components/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.mdx index 62e92d175ca..e7366ccd50d 100644 --- a/packages/components/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.mdx +++ b/packages/components/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.mdx @@ -1,6 +1,6 @@ -import { Controls, Description, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation, NoClipCanvas } from "~storybook/components" -import * as FilterDRPStories from "./FilterDateRangePicker.stories" +import { Controls, Description, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation, NoClipCanvas } from '~storybook/components' +import * as FilterDRPStories from './FilterDateRangePicker.stories' @@ -18,27 +18,33 @@ Date Range Picker to use for Filtering. ## Playground + ## API ### Render Trigger + ### Selected Range + ### Description + ### Extend Input Props + ### Validation + diff --git a/packages/components/src/Filter/FilterMultiSelect/_docs/FilterMultiSelect.mdx b/packages/components/src/Filter/FilterMultiSelect/_docs/FilterMultiSelect.mdx index 4fd7c987fbd..537c6e99399 100644 --- a/packages/components/src/Filter/FilterMultiSelect/_docs/FilterMultiSelect.mdx +++ b/packages/components/src/Filter/FilterMultiSelect/_docs/FilterMultiSelect.mdx @@ -1,6 +1,6 @@ -import { Controls, Meta, Canvas } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation, NoClipCanvas } from "~storybook/components" -import * as FilterMultiSelectStories from "./FilterMultiSelect.stories" +import { Controls, Meta, Canvas } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation, NoClipCanvas } from '~storybook/components' +import * as FilterMultiSelectStories from './FilterMultiSelect.stories' @@ -35,42 +35,63 @@ The FilterMultiSelect is a component relies heavily on consumer implemntation. I The following is an example of how you may create an async FilterMultiSelect using `@tanstack/react-query`. ```tsx -import { QueryClientProvider, QueryClient, useInfiniteQuery, useQueryClient, keepPreviousData } from "@tanstack/react-query" +import { + QueryClientProvider, + QueryClient, + useInfiniteQuery, + useQueryClient, + keepPreviousData, +} from '@tanstack/react-query' const AsyncExample = () => { const client = new QueryClient() const [open, setOpen] = useState(false) const [selectedPeople, setSelectedPeople] = useState([]) - const [searchState, setSearchState] = useState("") + const [searchState, setSearchState] = useState('') const queryClient = useQueryClient() - const fetchSWAPI = async ({ pageParam }): Promise<{ results: Array<{ name: string; url: string }>; next: string }> => { + const fetchSWAPI = async ({ + pageParam, + }): Promise<{ results: Array<{ name: string; url: string }>; next: string }> => { const res = await fetch(`https://swapi.dev/api/people/?page=${pageParam}&search=${searchState}`) return res.json() } - const { data, isLoading, fetchNextPage, isFetchingNextPage, hasNextPage, isRefetching } = useInfiniteQuery({ - enabled: true, - initialPageParam: "1", - queryKey: ["startrek-sg1", searchState], - queryFn: fetchSWAPI, - placeholderData: keepPreviousData, - getNextPageParam: lastPage => { - if (!lastPage.next) return undefined - const url = new URL(lastPage.next) - const params = new URLSearchParams(url.searchParams) - return params.get("page") - }, - }) - - const cachedPeople = queryClient.getQueriesData({ queryKey: ["startrek-sg1"] }).flatMap(([, cachedData]) => cachedData?.pages ?? []).flatMap(page => page.results).map(item => ({ label: item.name, value: item.url })) - const currentPeople = React.useMemo(() => data?.pages.flatMap(res => res.results).flatMap(person => ({ label: person.name, value: person.url })) || [], [data]) + const { data, isLoading, fetchNextPage, isFetchingNextPage, hasNextPage, isRefetching } = + useInfiniteQuery({ + enabled: true, + initialPageParam: '1', + queryKey: ['startrek-sg1', searchState], + queryFn: fetchSWAPI, + placeholderData: keepPreviousData, + getNextPageParam: (lastPage) => { + if (!lastPage.next) return undefined + const url = new URL(lastPage.next) + const params = new URLSearchParams(url.searchParams) + return params.get('page') + }, + }) + + const cachedPeople = queryClient + .getQueriesData({ queryKey: ['startrek-sg1'] }) + .flatMap(([, cachedData]) => cachedData?.pages ?? []) + .flatMap((page) => page.results) + .map((item) => ({ label: item.name, value: item.url })) + const currentPeople = React.useMemo( + () => + data?.pages + .flatMap((res) => res.results) + .flatMap((person) => ({ label: person.name, value: person.url })) || [], + [data], + ) // Expose the selected items and float them to the top - const mergedPeople = [...currentPeople, ...cachedPeople].filter((item, index, a) => a.findIndex(currItem => currItem.value === item.value) === index) + const mergedPeople = [...currentPeople, ...cachedPeople].filter( + (item, index, a) => a.findIndex((currItem) => currItem.value === item.value) === index, + ) // Only show the current filtered people when there is a search query - const items = searchState !== "" ? currentPeople : Array.from(mergedPeople) + const items = searchState !== '' ? currentPeople : Array.from(mergedPeople) const filteredCount = currentPeople.length const totalCount = cachedPeople.length @@ -81,11 +102,16 @@ const AsyncExample = () => { isLoading={isLoading} loadingSkeleton={} items={items} - trigger={() => } + trigger={() => ( + + )} onSearchInputChange={setSearchState} onOpenChange={setOpen} onSelectionChange={(keys): void => { - if (keys === "all") return + if (keys === 'all') return setSelectedPeople(Array.from(keys) as string[]) }} isOpen={open} @@ -93,24 +119,49 @@ const AsyncExample = () => { > {(): JSX.Element => ( <> - + {({ selectedItems, unselectedItems, hasNoItems }) => ( <> - {hasNoItems - ? No results found for {searchState}. - : searchState !== "" - ? Showing {filteredCount} of {totalCount} - : hasNextPage && There are a lot of options. Narrow them further by searching for a more precise term. - } - - {item => } + {hasNoItems ? ( + + No results found for {searchState}. + + ) : searchState !== '' ? ( + + Showing {filteredCount} of {totalCount} + + ) : ( + hasNextPage && ( + + There are a lot of options. Narrow them further by searching for a more + precise term. + + ) + )} + + {(item) => } - {unselectedItems.length > 0 && selectedItems.length > 0 && } - - {item => } + {unselectedItems.length > 0 && selectedItems.length > 0 && ( + + )} + + {(item) => } - {hasNextPage && } + {hasNextPage && ( + + )} )} diff --git a/packages/components/src/Filter/FilterSelect/_docs/FilterSelect.mdx b/packages/components/src/Filter/FilterSelect/_docs/FilterSelect.mdx index ed63ed658a7..a984bc575ca 100644 --- a/packages/components/src/Filter/FilterSelect/_docs/FilterSelect.mdx +++ b/packages/components/src/Filter/FilterSelect/_docs/FilterSelect.mdx @@ -1,7 +1,7 @@ -import { Canvas, Controls, Description, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation, NoClipCanvas } from "~storybook/components" -import * as FilterSelectStickerSheet from "./FilterSelect.stickersheet.stories" -import * as FilterSelectStories from "./FilterSelect.stories" +import { Canvas, Controls, Description, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation, NoClipCanvas } from '~storybook/components' +import * as FilterSelectStickerSheet from './FilterSelect.stickersheet.stories' +import * as FilterSelectStories from './FilterSelect.stories' diff --git a/packages/components/src/GuidanceBlock/_docs/GuidanceBlock.mdx b/packages/components/src/GuidanceBlock/_docs/GuidanceBlock.mdx index f9e5b17fcbf..4af86280dcb 100644 --- a/packages/components/src/GuidanceBlock/_docs/GuidanceBlock.mdx +++ b/packages/components/src/GuidanceBlock/_docs/GuidanceBlock.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as GuidanceBlockStories from "./GuidanceBlock.stories" +import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as GuidanceBlockStories from './GuidanceBlock.stories' diff --git a/packages/components/src/Heading/_docs/Heading.mdx b/packages/components/src/Heading/_docs/Heading.mdx index 6ed89e7197a..c6e35871956 100644 --- a/packages/components/src/Heading/_docs/Heading.mdx +++ b/packages/components/src/Heading/_docs/Heading.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as HeadingStories from "./Heading.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as HeadingStories from './Heading.stories' @@ -15,6 +15,7 @@ import * as HeadingStories from "./Heading.stories" ## Overview + Renders a heading element `h1-h6` and applies styling for headings. @@ -38,4 +39,3 @@ Use this variant only for the title within the composable header. [See documenta Defaults to `h1` element. - diff --git a/packages/components/src/Icon/_docs/Icon.mdx b/packages/components/src/Icon/_docs/Icon.mdx index 6ca4f889e3a..042ff9e0e3d 100644 --- a/packages/components/src/Icon/_docs/Icon.mdx +++ b/packages/components/src/Icon/_docs/Icon.mdx @@ -1,21 +1,19 @@ -import { Canvas, Controls, Meta, Story } from "@storybook/blocks" -import { ResourceLinks } from "~storybook/components" -import * as IconStories from "./Icon.docs.stories" +import { Canvas, Controls, Meta, Story } from '@storybook/blocks' +import { ResourceLinks } from '~storybook/components' +import * as IconStories from './Icon.docs.stories' # Icon - + ## Installation Each icon is imported separately, for example if you'd like the `AddIcon` you will use the following import. ```js -import { AddIcon } from "@kaizen/components" +import { AddIcon } from '@kaizen/components' ``` See: Reference for all icons available to import. diff --git a/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/_docs/BrandMomentCaptureIntro.mdx b/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/_docs/BrandMomentCaptureIntro.mdx index ab5b9749dca..e6fcdd98c9f 100644 --- a/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/_docs/BrandMomentCaptureIntro.mdx +++ b/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/_docs/BrandMomentCaptureIntro.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as BrandMomentCaptureIntroStories from "./BrandMomentCaptureIntro.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as BrandMomentCaptureIntroStories from './BrandMomentCaptureIntro.stories' @@ -18,6 +18,7 @@ import * as BrandMomentCaptureIntroStories from "./BrandMomentCaptureIntro.stori ## Overview Functionally similar to an animation Scene illustration but has 3 different states based on the properties passed in: + - An initial animation that is only ever played once, never looping. - An ambient animation that can be looped. - A static image that is not animated. @@ -28,13 +29,19 @@ Functionally similar to an animation Scene illustration but has 3 different stat ## API ### Single animation + Will trigger the animation once. + ### Looped animation + Will render the a looped animation. Should be used with `isAnimated` to render the "initial" intro animation. + ### Autoplay disabled + If false will render the animation paused. This can be re-enabled clicking the pause sign on hover. + diff --git a/packages/components/src/Illustration/Scene/_docs/Scene.mdx b/packages/components/src/Illustration/Scene/_docs/Scene.mdx index 421b6a3a5b0..5f24a922fdb 100644 --- a/packages/components/src/Illustration/Scene/_docs/Scene.mdx +++ b/packages/components/src/Illustration/Scene/_docs/Scene.mdx @@ -1,7 +1,7 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as Stickersheets from "./Scene.stickersheet.stories" -import * as SceneStories from "./Scene.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as Stickersheets from './Scene.stickersheet.stories' +import * as SceneStories from './Scene.stories' @@ -12,10 +12,7 @@ import * as SceneStories from "./Scene.stories" /> - - + ## Overview diff --git a/packages/components/src/Illustration/Spot/_docs/Spot.mdx b/packages/components/src/Illustration/Spot/_docs/Spot.mdx index c8f77ee3ee1..d66e8071df8 100644 --- a/packages/components/src/Illustration/Spot/_docs/Spot.mdx +++ b/packages/components/src/Illustration/Spot/_docs/Spot.mdx @@ -1,7 +1,7 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as StickerSheetStories from "./Spot.stickersheet.stories" -import * as SpotIllustrationStories from "./Spot.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as StickerSheetStories from './Spot.stickersheet.stories' +import * as SpotIllustrationStories from './Spot.stories' diff --git a/packages/components/src/Input/Input/_docs/Input.mdx b/packages/components/src/Input/Input/_docs/Input.mdx index 97f987ee4c0..3644aeba3d0 100644 --- a/packages/components/src/Input/Input/_docs/Input.mdx +++ b/packages/components/src/Input/Input/_docs/Input.mdx @@ -1,7 +1,7 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import { LinkTo } from "~storybook/components/LinkTo" -import * as InputStories from "./Input.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import { LinkTo } from '~storybook/components/LinkTo' +import * as InputStories from './Input.stories' @@ -24,13 +24,17 @@ An input of different types. Usually part of compositions such as ### Status + ### Icon adornments + ### Reversed + diff --git a/packages/components/src/Input/InputRange/_docs/InputRange.mdx b/packages/components/src/Input/InputRange/_docs/InputRange.mdx index ea394ba5774..fc84c282243 100644 --- a/packages/components/src/Input/InputRange/_docs/InputRange.mdx +++ b/packages/components/src/Input/InputRange/_docs/InputRange.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as InputRangeStories from "./InputRange.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as InputRangeStories from './InputRange.stories' diff --git a/packages/components/src/Input/InputSearch/_docs/InputSearch.mdx b/packages/components/src/Input/InputSearch/_docs/InputSearch.mdx index 5b878cd8c88..20c5a5ae5d6 100644 --- a/packages/components/src/Input/InputSearch/_docs/InputSearch.mdx +++ b/packages/components/src/Input/InputSearch/_docs/InputSearch.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as InputSearchStories from "./InputSearch.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as InputSearchStories from './InputSearch.stories' @@ -23,6 +23,7 @@ A range of things. ## API ## Showing the clear button + Adding text will automatically show the clear button. diff --git a/packages/components/src/KaizenProvider/_docs/KaizenProvider.mdx b/packages/components/src/KaizenProvider/_docs/KaizenProvider.mdx index 205db1579d0..c422974d76d 100644 --- a/packages/components/src/KaizenProvider/_docs/KaizenProvider.mdx +++ b/packages/components/src/KaizenProvider/_docs/KaizenProvider.mdx @@ -1,9 +1,9 @@ -import { Meta } from "@storybook/blocks" -import { Diff } from "~storybook/components" -import migrationBonus from "./code-diffs/migration-bonus.diff?raw" -import migrationFETBonus from "./code-diffs/migration-fe-template-bonus.diff?raw" -import migrationFETToV1 from "./code-diffs/migration-fe-template-to-v1.diff?raw" -import migrationToV1 from "./code-diffs/migration-to-v1.diff?raw" +import { Meta } from '@storybook/blocks' +import { Diff } from '~storybook/components' +import migrationBonus from './code-diffs/migration-bonus.diff?raw' +import migrationFETBonus from './code-diffs/migration-fe-template-bonus.diff?raw' +import migrationFETToV1 from './code-diffs/migration-fe-template-to-v1.diff?raw' +import migrationToV1 from './code-diffs/migration-to-v1.diff?raw' @@ -11,19 +11,19 @@ import migrationToV1 from "./code-diffs/migration-to-v1.diff?raw" Provides the necessary global contexts for all Kaizen components, as well as any global level Kaizen component/wrappers. - ## Usage Ideally, there should only be one `KaizenProvider` that should wrap your entire application. ```jsx -import { KaizenProvider } from "@kaizen/components"; - +import { KaizenProvider } from '@kaizen/components' +; ``` ### Internationalization support + - [Internationalization in Kaizen](/story/components-kaizen-provider-internationalization-in-kaizen--docs) ## Migrating to KaizenProvider v1.0 diff --git a/packages/components/src/KaizenProvider/_docs/internationalization-in-kaizen.mdx b/packages/components/src/KaizenProvider/_docs/internationalization-in-kaizen.mdx index 9ae32437027..054d0aa1128 100644 --- a/packages/components/src/KaizenProvider/_docs/internationalization-in-kaizen.mdx +++ b/packages/components/src/KaizenProvider/_docs/internationalization-in-kaizen.mdx @@ -1,5 +1,5 @@ -import { Meta } from "@storybook/blocks" -import { LinkTo } from "~storybook/components/LinkTo" +import { Meta } from '@storybook/blocks' +import { LinkTo } from '~storybook/components/LinkTo' @@ -38,13 +38,13 @@ There is a slight difference in the implementation of the `KaizenProvider`, depe For more information on `@cultureamp/i18n-react-intl`, see their docs here. Note: This will work with StaticIntlProvider or DynamicIntlProvider. -```tsx -import { DynamicIntlProvider } from "@cultureamp/i18n-react-intl" -import { KaizenProvider } from "@kaizen/components" - +```tsx +import { DynamicIntlProvider } from '@cultureamp/i18n-react-intl' +import { KaizenProvider } from '@kaizen/components' +; - + ``` @@ -54,9 +54,8 @@ import { KaizenProvider } from "@kaizen/components" In these cases, you'll need to pass the current locale as a prop to the `KaizenProvider`, so it knows which language is currently active. ```tsx -import { KaizenProvider } from "@kaizen/components" - - - +import { KaizenProvider } from '@kaizen/components' +; + ``` diff --git a/packages/components/src/Label/_docs/Label.mdx b/packages/components/src/Label/_docs/Label.mdx index 23d9ff0c3d2..e3d500fc2dc 100644 --- a/packages/components/src/Label/_docs/Label.mdx +++ b/packages/components/src/Label/_docs/Label.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as LabelStories from "./Label.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as LabelStories from './Label.stories' @@ -23,12 +23,15 @@ Atomic `Label` component for use in `Field` components. ## API ### Variants + ### Types + ### Position + By default, your label text will always sit to the right of the inline form control (ie. in RTL terms, the "end"). Using the `labelPosition` you can flip the label text to sit to the left (ie. in RTL terms, the "start"). @@ -37,6 +40,7 @@ Note: this only works when you have an inline form control passed in via `childr ### Label text + Adds text to your form control. `labelText` styling greatly depends on how you compose and what `labelType` you apply, please see Composing below for examples. @@ -48,7 +52,9 @@ There are two different ways to utilise the `Label` component depending on the t The main difference is that when dealing with an inline form control, the form control is passed as children. #### Inline form controls + #### Block form controls + diff --git a/packages/components/src/LabelledMessage/_docs/LabelledMessage.mdx b/packages/components/src/LabelledMessage/_docs/LabelledMessage.mdx index cb5639e925a..bc1f5ab17f8 100644 --- a/packages/components/src/LabelledMessage/_docs/LabelledMessage.mdx +++ b/packages/components/src/LabelledMessage/_docs/LabelledMessage.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as LabelledMessageStories from "./LabelledMessage.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as LabelledMessageStories from './LabelledMessage.stories' diff --git a/packages/components/src/LikertScaleLegacy/_docs/LikertScaleLegacy.mdx b/packages/components/src/LikertScaleLegacy/_docs/LikertScaleLegacy.mdx index 5f9ce93b9f5..dd6277afdb5 100644 --- a/packages/components/src/LikertScaleLegacy/_docs/LikertScaleLegacy.mdx +++ b/packages/components/src/LikertScaleLegacy/_docs/LikertScaleLegacy.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as LikertScaleLegacyStories from "./LikertScaleLegacy.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as LikertScaleLegacyStories from './LikertScaleLegacy.stories' diff --git a/packages/components/src/Loading/LoadingGraphic/_docs/LoadingGraphic.mdx b/packages/components/src/Loading/LoadingGraphic/_docs/LoadingGraphic.mdx index ffe1a397dd6..f49cbf652a1 100644 --- a/packages/components/src/Loading/LoadingGraphic/_docs/LoadingGraphic.mdx +++ b/packages/components/src/Loading/LoadingGraphic/_docs/LoadingGraphic.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation, LinkTo } from "~storybook/components" -import * as LoadingGraphicStories from "./LoadingGraphic.stories" +import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components' +import * as LoadingGraphicStories from './LoadingGraphic.stories' @@ -19,9 +19,9 @@ import * as LoadingGraphicStories from "./LoadingGraphic.stories" Loading skeleton for graphics (Icon, + Avatar, -Spot Illustration, -Scene Illustration). +Spot Illustration, Scene Illustration). diff --git a/packages/components/src/Loading/LoadingHeading/_docs/LoadingHeading.mdx b/packages/components/src/Loading/LoadingHeading/_docs/LoadingHeading.mdx index 9b2bf5594db..b6badb66a3b 100644 --- a/packages/components/src/Loading/LoadingHeading/_docs/LoadingHeading.mdx +++ b/packages/components/src/Loading/LoadingHeading/_docs/LoadingHeading.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation, LinkTo } from "~storybook/components" -import * as LoadingHeadingStories from "./LoadingHeading.stories" +import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components' +import * as LoadingHeadingStories from './LoadingHeading.stories' diff --git a/packages/components/src/Loading/LoadingInput/_docs/LoadingInput.mdx b/packages/components/src/Loading/LoadingInput/_docs/LoadingInput.mdx index ab4e9b92375..895bf47b02c 100644 --- a/packages/components/src/Loading/LoadingInput/_docs/LoadingInput.mdx +++ b/packages/components/src/Loading/LoadingInput/_docs/LoadingInput.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation, LinkTo } from "~storybook/components" -import * as LoadingInputStories from "./LoadingInput.stories" +import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components' +import * as LoadingInputStories from './LoadingInput.stories' diff --git a/packages/components/src/Loading/LoadingParagraph/_docs/LoadingParagraph.mdx b/packages/components/src/Loading/LoadingParagraph/_docs/LoadingParagraph.mdx index d9621fa7659..0c1ff981479 100644 --- a/packages/components/src/Loading/LoadingParagraph/_docs/LoadingParagraph.mdx +++ b/packages/components/src/Loading/LoadingParagraph/_docs/LoadingParagraph.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation, LinkTo } from "~storybook/components" -import * as LoadingParagraphStories from "./LoadingParagraph.stories" +import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components' +import * as LoadingParagraphStories from './LoadingParagraph.stories' diff --git a/packages/components/src/Loading/LoadingSpinner/_docs/LoadingSpinner.mdx b/packages/components/src/Loading/LoadingSpinner/_docs/LoadingSpinner.mdx index d8ca623f94a..01b4e7f20ad 100644 --- a/packages/components/src/Loading/LoadingSpinner/_docs/LoadingSpinner.mdx +++ b/packages/components/src/Loading/LoadingSpinner/_docs/LoadingSpinner.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as LoadingSpinnerStories from "./LoadingSpinner.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as LoadingSpinnerStories from './LoadingSpinner.stories' @@ -44,4 +44,3 @@ Below is an example of how to apply the current color tokens used in designs. Generally use `"md"` (default value) unless spinner is inside a form field, in which case use `sm`. The `xs` size is for buttons or content dense layouts. - diff --git a/packages/components/src/Modal/ConfirmationModal/_docs/ConfirmationModal.mdx b/packages/components/src/Modal/ConfirmationModal/_docs/ConfirmationModal.mdx index 35b542f3a18..370be9c9247 100644 --- a/packages/components/src/Modal/ConfirmationModal/_docs/ConfirmationModal.mdx +++ b/packages/components/src/Modal/ConfirmationModal/_docs/ConfirmationModal.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as ConfirmationModalStories from "./ConfirmationModal.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as ConfirmationModalStories from './ConfirmationModal.stories' diff --git a/packages/components/src/Modal/ContextModal/_docs/ContextModal.mdx b/packages/components/src/Modal/ContextModal/_docs/ContextModal.mdx index f926d995385..0e3949dd48e 100644 --- a/packages/components/src/Modal/ContextModal/_docs/ContextModal.mdx +++ b/packages/components/src/Modal/ContextModal/_docs/ContextModal.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as ContextModalStories from "./ContextModal.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as ContextModalStories from './ContextModal.stories' @@ -28,10 +28,13 @@ May be useful for first time users. Heavily optional. Visual aid is good. Primar ### Layout #### Portrait (Default) + #### Landscape + ### Unpadded + diff --git a/packages/components/src/Modal/GenericModal/_docs/GenericModal.mdx b/packages/components/src/Modal/GenericModal/_docs/GenericModal.mdx index cf3aed3e618..f57b545709d 100644 --- a/packages/components/src/Modal/GenericModal/_docs/GenericModal.mdx +++ b/packages/components/src/Modal/GenericModal/_docs/GenericModal.mdx @@ -1,7 +1,7 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import { LinkTo } from "~storybook/components/LinkTo" -import * as GenericModal from "./GenericModal.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import { LinkTo } from '~storybook/components/LinkTo' +import * as GenericModal from './GenericModal.stories' @@ -17,6 +17,7 @@ import * as GenericModal from "./GenericModal.stories" ## Overview Usually part of compositions such as + Confirmation Modal, Road block Modal, Context Modal diff --git a/packages/components/src/Modal/InputEditModal/_docs/InputEditModal.mdx b/packages/components/src/Modal/InputEditModal/_docs/InputEditModal.mdx index 028d1425aad..5fe948ade55 100644 --- a/packages/components/src/Modal/InputEditModal/_docs/InputEditModal.mdx +++ b/packages/components/src/Modal/InputEditModal/_docs/InputEditModal.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as InputEditModalStories from "./InputEditModal.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as InputEditModalStories from './InputEditModal.stories' @@ -36,4 +36,3 @@ There are instances, such as single input modals, where shifting focus may not i As both the button and input label have clear intent and the focus does not skip past crucial content, this should provide enough context for an end user. - diff --git a/packages/components/src/MultiSelect/_docs/MultiSelect.mdx b/packages/components/src/MultiSelect/_docs/MultiSelect.mdx index 203ff81e1d3..70adadcce93 100644 --- a/packages/components/src/MultiSelect/_docs/MultiSelect.mdx +++ b/packages/components/src/MultiSelect/_docs/MultiSelect.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as MultiSelectStories from "./MultiSelect.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as MultiSelectStories from './MultiSelect.stories' @@ -33,7 +33,6 @@ export type MultiSelectOption = { // Used for "value" attribute in option - must be unique value: string | number } - ``` diff --git a/packages/components/src/Notification/GlobalNotification/_docs/GlobalNotification.mdx b/packages/components/src/Notification/GlobalNotification/_docs/GlobalNotification.mdx index df7ff25b2b8..241ac9198dc 100644 --- a/packages/components/src/Notification/GlobalNotification/_docs/GlobalNotification.mdx +++ b/packages/components/src/Notification/GlobalNotification/_docs/GlobalNotification.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta, Description} from "@storybook/blocks" -import { KAIOInstallation, ResourceLinks } from "~storybook/components" -import * as GlobalNotificationExamples from "./GlobalNotification.stories" +import { Canvas, Controls, Meta, Description } from '@storybook/blocks' +import { KAIOInstallation, ResourceLinks } from '~storybook/components' +import * as GlobalNotificationExamples from './GlobalNotification.stories' diff --git a/packages/components/src/Notification/InlineNotification/_docs/InlineNotification.mdx b/packages/components/src/Notification/InlineNotification/_docs/InlineNotification.mdx index d4b950130d1..bcd4266fa9c 100644 --- a/packages/components/src/Notification/InlineNotification/_docs/InlineNotification.mdx +++ b/packages/components/src/Notification/InlineNotification/_docs/InlineNotification.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta, Description} from "@storybook/blocks" -import { KAIOInstallation, ResourceLinks } from "~storybook/components" -import * as InlineNotificationExamples from "./InlineNotification.stories" +import { Canvas, Controls, Meta, Description } from '@storybook/blocks' +import { KAIOInstallation, ResourceLinks } from '~storybook/components' +import * as InlineNotificationExamples from './InlineNotification.stories' @@ -25,7 +25,6 @@ import * as InlineNotificationExamples from "./InlineNotification.stories" - ### persistent diff --git a/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.mdx b/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.mdx index 5007f983be6..274620eebfd 100644 --- a/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.mdx +++ b/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation, LinkTo } from "~storybook/components" -import * as ToastNotificationStories from "./ToastNotification.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components' +import * as ToastNotificationStories from './ToastNotification.stories' diff --git a/packages/components/src/Pagination/_docs/Pagination.mdx b/packages/components/src/Pagination/_docs/Pagination.mdx index 3c1abace61f..5668d37a0b9 100644 --- a/packages/components/src/Pagination/_docs/Pagination.mdx +++ b/packages/components/src/Pagination/_docs/Pagination.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as PaginationStories from "./Pagination.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as PaginationStories from './Pagination.stories' diff --git a/packages/components/src/Pagination/subcomponents/DirectionalLink/_docs/DirectionalLink.mdx b/packages/components/src/Pagination/subcomponents/DirectionalLink/_docs/DirectionalLink.mdx index f36cd1b89b6..bc3d0025b36 100644 --- a/packages/components/src/Pagination/subcomponents/DirectionalLink/_docs/DirectionalLink.mdx +++ b/packages/components/src/Pagination/subcomponents/DirectionalLink/_docs/DirectionalLink.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation, LinkTo } from "~storybook/components" -import * as DirectionalLinkStories from "./DirectionalLink.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components' +import * as DirectionalLinkStories from './DirectionalLink.stories' diff --git a/packages/components/src/Pagination/subcomponents/PaginationLink/_docs/PaginationLink.mdx b/packages/components/src/Pagination/subcomponents/PaginationLink/_docs/PaginationLink.mdx index ad2f0065e6c..0467e634dc2 100644 --- a/packages/components/src/Pagination/subcomponents/PaginationLink/_docs/PaginationLink.mdx +++ b/packages/components/src/Pagination/subcomponents/PaginationLink/_docs/PaginationLink.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation, LinkTo } from "~storybook/components" -import * as PaginationLinkStories from "./PaginationLink.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components' +import * as PaginationLinkStories from './PaginationLink.stories' diff --git a/packages/components/src/Popover/_docs/Popover.mdx b/packages/components/src/Popover/_docs/Popover.mdx index e5db930fa74..b40dcf4567a 100644 --- a/packages/components/src/Popover/_docs/Popover.mdx +++ b/packages/components/src/Popover/_docs/Popover.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as PopoverStories from "./Popover.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as PopoverStories from './Popover.stories' @@ -30,12 +30,14 @@ User can interact with popover content, including selecting text or clicking lin ```jsx const [referenceElementRef, Popover] = usePopover() -return (<> - - Hello world -) +return ( + <> + + Hello world + +) ``` The purpose of this hook is to abstract away some of the awkwardness with the @@ -43,4 +45,4 @@ requirement of passing in refs with popper. We need to use `useState` instead of `useRef`, which may not be immediately intuitive. The popper documentation to help provide more context: - https://popper.js.org/react-popper/v2/hook/ +https://popper.js.org/react-popper/v2/hook/ diff --git a/packages/components/src/ProgressBar/_docs/ProgressBar.mdx b/packages/components/src/ProgressBar/_docs/ProgressBar.mdx index 1081821a86b..9e6cd94c494 100644 --- a/packages/components/src/ProgressBar/_docs/ProgressBar.mdx +++ b/packages/components/src/ProgressBar/_docs/ProgressBar.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as ProgressBarStories from "./ProgressBar.stories" +import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as ProgressBarStories from './ProgressBar.stories' @@ -46,5 +46,4 @@ While `value` and `max` can be used to represent progress as either a percentage Due to the optional `label` prop, the progress bar does not have an accessible name. You can provide context for assistive technologies with aria attributes such as `aria-label` or `aria-labelledby`. - diff --git a/packages/components/src/Radio/Radio/_docs/Radio.mdx b/packages/components/src/Radio/Radio/_docs/Radio.mdx index 83ea7ec3ce5..d06781eaf85 100644 --- a/packages/components/src/Radio/Radio/_docs/Radio.mdx +++ b/packages/components/src/Radio/Radio/_docs/Radio.mdx @@ -1,7 +1,7 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import { LinkTo } from "~storybook/components/LinkTo" -import * as RadioStories from "./Radio.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import { LinkTo } from '~storybook/components/LinkTo' +import * as RadioStories from './Radio.stories' diff --git a/packages/components/src/Radio/RadioField/_docs/RadioField.mdx b/packages/components/src/Radio/RadioField/_docs/RadioField.mdx index 4718809dcab..3ab6a927a37 100644 --- a/packages/components/src/Radio/RadioField/_docs/RadioField.mdx +++ b/packages/components/src/Radio/RadioField/_docs/RadioField.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as RadioFieldStories from "./RadioField.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as RadioFieldStories from './RadioField.stories' diff --git a/packages/components/src/Radio/RadioGroup/_docs/RadioGroup.mdx b/packages/components/src/Radio/RadioGroup/_docs/RadioGroup.mdx index 3edfac75346..65294147bed 100644 --- a/packages/components/src/Radio/RadioGroup/_docs/RadioGroup.mdx +++ b/packages/components/src/Radio/RadioGroup/_docs/RadioGroup.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as RadioGroupStories from "./RadioGroup.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as RadioGroupStories from './RadioGroup.stories' diff --git a/packages/components/src/RichTextEditor/EditableRichTextContent/_docs/EditableRichTextContent.mdx b/packages/components/src/RichTextEditor/EditableRichTextContent/_docs/EditableRichTextContent.mdx index 9e8fb63768d..34297e4d4ba 100644 --- a/packages/components/src/RichTextEditor/EditableRichTextContent/_docs/EditableRichTextContent.mdx +++ b/packages/components/src/RichTextEditor/EditableRichTextContent/_docs/EditableRichTextContent.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as EditableRichTextContentStories from "./EditableRichTextContent.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as EditableRichTextContentStories from './EditableRichTextContent.stories' @@ -26,12 +26,11 @@ The `EditableRichTextContent` indicates interactivity similar to a `text` or `te This differs from the [RichTextContent](/docs/components-richtexteditor-richtextcontent--docs) component, which is used to render `RichTextEditor` content as read-only text. - ```tsx -const [editMode, setEditMode] = useState(false); -const [rteData, setRTEData] = useState([]); +const [editMode, setEditMode] = useState(false) +const [rteData, setRTEData] = useState([]) -const handleOnChange: RichTextEditorProps["onChange"] = editorState => +const handleOnChange: RichTextEditorProps['onChange'] = (editorState) => setRTEData(editorState.toJSON().doc.content) if (editMode) { @@ -43,9 +42,7 @@ if (editMode) { ) } -return ( - setEditMode(true)} /> -) +return setEditMode(true)} /> ``` diff --git a/packages/components/src/RichTextEditor/RichTextContent/_docs/RichTextContent.mdx b/packages/components/src/RichTextEditor/RichTextContent/_docs/RichTextContent.mdx index d694755239b..07664a70d75 100644 --- a/packages/components/src/RichTextEditor/RichTextContent/_docs/RichTextContent.mdx +++ b/packages/components/src/RichTextEditor/RichTextContent/_docs/RichTextContent.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as RichTextContentStories from "./RichTextContent.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as RichTextContentStories from './RichTextContent.stories' @@ -20,7 +20,6 @@ To render rich content as it appears in the [RichTextEditor](/docs/components-ri - ## Usage A common use case of `RichTextContent` is to display user generated output as read-only text. @@ -28,4 +27,3 @@ A common use case of `RichTextContent` is to display user generated output as re This should not be used out of the box to toggle between active and inactive states of the `RichTextEditor`. Instead we recommend using the [EditableRichTextContent](/docs/components-richtexteditor-editablerichtextcontent--docs#usage) pattern, which indicates interactivity to the user and ensures compliance with WCAG guidelines. - diff --git a/packages/components/src/RichTextEditor/RichTextEditor/_docs/RichTextEditor.mdx b/packages/components/src/RichTextEditor/RichTextEditor/_docs/RichTextEditor.mdx index d73977c5993..761951c3680 100644 --- a/packages/components/src/RichTextEditor/RichTextEditor/_docs/RichTextEditor.mdx +++ b/packages/components/src/RichTextEditor/RichTextEditor/_docs/RichTextEditor.mdx @@ -1,8 +1,8 @@ -import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as EditableRichTextContentStories from "../../EditableRichTextContent/_docs/EditableRichTextContent.stories" -import * as RichTextContentStories from "../../RichTextContent/_docs/RichTextContent.stories" -import * as RichTextEditorStories from "./RichTextEditor.stories" +import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as EditableRichTextContentStories from '../../EditableRichTextContent/_docs/EditableRichTextContent.stories' +import * as RichTextContentStories from '../../RichTextContent/_docs/RichTextContent.stories' +import * as RichTextEditorStories from './RichTextEditor.stories' @@ -40,7 +40,6 @@ With all controls, the Kaizen `RichTextEditor` can create and render formatted t - ### The EditorContentArray and defaultValue The `defaultValue` is the initial content of the `RichTextEditor`. It accepts an array of objects in the [ProseMirror's rich text format](https://cultureamp.atlassian.net/wiki/spaces/TV/pages/3380543671/ProseMirror+rich+formatted+text+data+format). @@ -64,13 +63,14 @@ For example: if your `defaultValue` contains bolded text, you must pass bold int ``` ### Data errors and onDataError + When content is passed to the `defaultValue` that does not match to the `RichTextEditor`'s [schema](https://github.com/cultureamp/kaizen-design-system/blob/main/packages/components/src/RichTextEditor/RichTextEditor/schema.ts), the component will throw and render a generic error. This will also throw if you have passed in an `EditorContentArray` that contains data that cannot map to the `controls` provided to the component. - + The `dataError` React Node and `onDataError` callback also allows you to handle these edge cases without breaking the page. @@ -84,7 +84,6 @@ Sets the minimum height for the editable area of the RichTextEditor. - ### Inactive states and read-only text In addition to the `RichTextEditor`, there are two additional Kaizen components that support rendering data in the RTE format. @@ -100,4 +99,3 @@ For rendering editable content that can toggle between an active and inactive st For rendering content as read-only text we recommend using the [RichTextContent](/docs/components-richtexteditor-richtextcontent--docs). - diff --git a/packages/components/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/_docs/ToggleIconButton.mdx b/packages/components/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/_docs/ToggleIconButton.mdx index 6b2c972d037..c078ab5f9b6 100644 --- a/packages/components/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/_docs/ToggleIconButton.mdx +++ b/packages/components/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/_docs/ToggleIconButton.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as ToggleIconButtonStories from "./ToggleIconButton.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as ToggleIconButtonStories from './ToggleIconButton.stories' diff --git a/packages/components/src/RichTextEditor/RichTextEditor/subcomponents/Toolbar/_docs/Toolbar.mdx b/packages/components/src/RichTextEditor/RichTextEditor/subcomponents/Toolbar/_docs/Toolbar.mdx index 2d78cfd3db0..bf7a9fa4d93 100644 --- a/packages/components/src/RichTextEditor/RichTextEditor/subcomponents/Toolbar/_docs/Toolbar.mdx +++ b/packages/components/src/RichTextEditor/RichTextEditor/subcomponents/Toolbar/_docs/Toolbar.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as ToolbarStories from "./Toolbar.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as ToolbarStories from './Toolbar.stories' diff --git a/packages/components/src/SearchField/_docs/SearchField.mdx b/packages/components/src/SearchField/_docs/SearchField.mdx index 838f9fe82c2..6583ab8e30e 100644 --- a/packages/components/src/SearchField/_docs/SearchField.mdx +++ b/packages/components/src/SearchField/_docs/SearchField.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as SearchFieldStories from "./SearchField.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as SearchFieldStories from './SearchField.stories' diff --git a/packages/components/src/Select/_docs/Select.mdx b/packages/components/src/Select/_docs/Select.mdx index 5d2ed852d67..f4a6aced09e 100644 --- a/packages/components/src/Select/_docs/Select.mdx +++ b/packages/components/src/Select/_docs/Select.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as SelectStories from "./Select.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as SelectStories from './Select.stories' @@ -27,15 +27,19 @@ A select lets you choose options from an option menu. A single-select lets you c ## API ### Multi Select + ### Grouped options + ### Disabling options + Adding the `isDisabled: true` key to your option object will disabled the item and prevent it from being selected. ### Async + diff --git a/packages/components/src/Skirt/_docs/Skirt.mdx b/packages/components/src/Skirt/_docs/Skirt.mdx index 798e26ca441..86355034943 100644 --- a/packages/components/src/Skirt/_docs/Skirt.mdx +++ b/packages/components/src/Skirt/_docs/Skirt.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as SkirtStories from "./Skirt.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as SkirtStories from './Skirt.stories' @@ -13,7 +13,7 @@ import * as SkirtStories from "./Skirt.stories" /> - + ## Overview diff --git a/packages/components/src/Slider/_docs/Slider.mdx b/packages/components/src/Slider/_docs/Slider.mdx index 604c6467341..79437110303 100644 --- a/packages/components/src/Slider/_docs/Slider.mdx +++ b/packages/components/src/Slider/_docs/Slider.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as SliderStories from "./Slider.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as SliderStories from './Slider.stories' diff --git a/packages/components/src/SplitButton/_docs/SplitButton.mdx b/packages/components/src/SplitButton/_docs/SplitButton.mdx index 17a62db553e..b7fea65153f 100644 --- a/packages/components/src/SplitButton/_docs/SplitButton.mdx +++ b/packages/components/src/SplitButton/_docs/SplitButton.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation, LinkTo } from "~storybook/components" -import * as SplitButtonStories from "./SplitButton.stories" +import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components' +import * as SplitButtonStories from './SplitButton.stories' @@ -35,6 +35,7 @@ Disable both buttons with `disabled`. #### Disabled MenuItem If you only want to disable an option within the dropdown, add `disabled` to the + MenuItem instead of SplitButton. diff --git a/packages/components/src/Table/_docs/Table.mdx b/packages/components/src/Table/_docs/Table.mdx index 416985c76df..9f6225ad570 100644 --- a/packages/components/src/Table/_docs/Table.mdx +++ b/packages/components/src/Table/_docs/Table.mdx @@ -1,6 +1,6 @@ -import { Canvas, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as TableStories from "./Table.stories" +import { Canvas, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as TableStories from './Table.stories' @@ -14,7 +14,15 @@ import * as TableStories from "./Table.stories" /> ## Overview @@ -30,17 +38,21 @@ A table displays rows of data, including all data in a set, making it efficient Controls the spacing in each cell within the table. Options available are `compact`, `default` and `data`. #### Compact + #### Default + #### Data + ## TableHeaderRowCell API ### Sorting + ### Checkbox @@ -56,6 +68,7 @@ When using providing `icon` to `TableHeaderRowCell` the `labelText` will be pass ### Align and wrapping + ### Tooltips @@ -67,11 +80,13 @@ While Tooltip content can be passed to any table header via the `tooltipInfo` pr You can read more about the Tooltip component and accessibility limitation [here](https://cultureamp.design/?path=/docs/components-tooltip--docs#screen-reader-accessibility). ### Reversed + ## TableCard API ### Link + ### Expandable @@ -79,5 +94,3 @@ You can read more about the Tooltip component and accessibility limitation [here The `expandable` prop introduces known accessibility issues with nesting interactive elements as children of a `button` or `anchor` tag. We recommend avoiding this pattern if possible, or creating a tier 3 component that adheres to correct WCAG hierarchy. - - diff --git a/packages/components/src/Tabs/_docs/Tabs.mdx b/packages/components/src/Tabs/_docs/Tabs.mdx index 3b71623dc60..4cfa68fff87 100644 --- a/packages/components/src/Tabs/_docs/Tabs.mdx +++ b/packages/components/src/Tabs/_docs/Tabs.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as TabsStories from "./Tabs.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as TabsStories from './Tabs.stories' @@ -13,13 +13,10 @@ import * as TabsStories from "./Tabs.stories" /> - + ## Overview - diff --git a/packages/components/src/Tag/_docs/Tag.mdx b/packages/components/src/Tag/_docs/Tag.mdx index 30090cd284b..4550e6742c6 100644 --- a/packages/components/src/Tag/_docs/Tag.mdx +++ b/packages/components/src/Tag/_docs/Tag.mdx @@ -1,7 +1,7 @@ -import { Canvas, Controls , Meta, Unstyled } from "@storybook/blocks" -import { InlineNotification } from "~components/Notification" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as TagStories from "./Tag.stories" +import { Canvas, Controls, Meta, Unstyled } from '@storybook/blocks' +import { InlineNotification } from '~components/Notification' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as TagStories from './Tag.stories' @@ -17,7 +17,7 @@ import * as TagStories from "./Tag.stories" {`This version of the Tag will soon be deprecated and will be removed in the next major release. - Import Tag from "@kaizen/components/future" for the latest version and veiw our migration guide in the Future folder` } + Import Tag from "@kaizen/components/future" for the latest version and veiw our migration guide in the Future folder`} @@ -33,48 +33,59 @@ Tags help users quickly recognize important information about items that organiz ## API ### Variants + We have 3 different sets of combinations for various uses. #### Status + Use status tags to show the status of surveys, reports, action plans, and performance feedback. #### Validation + Use validation tags for indicating the validation state such as the Cautionary style for cautioning users that the item has a validation warning that could be addressed. #### Sentiments + Use sentiment tags only for sentiment or other employee feedback data. ### Sizes + **Note:** Icons and Avatars are not supported in `small` sizes. ### Avatar + An Avatar can be added in two ways, either by importing the `` component and passing it in, or you can use the Avatar's props. **Note:** Avatar are not supported in `small` sizes. #### Import Avatar + #### Avatar props + ### Dismissable + ### TruncateWidth + A pixel width which sets a limit for when the text starts to truncate. ### Inline + Removes the default right-hand margin. diff --git a/packages/components/src/Text/_docs/Text.mdx b/packages/components/src/Text/_docs/Text.mdx index 5b01231367f..8c73eae28aa 100644 --- a/packages/components/src/Text/_docs/Text.mdx +++ b/packages/components/src/Text/_docs/Text.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as TextStories from "./Text.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as TextStories from './Text.stories' diff --git a/packages/components/src/TextArea/_docs/TextArea.mdx b/packages/components/src/TextArea/_docs/TextArea.mdx index 394b3bd79f3..4b17b432c00 100644 --- a/packages/components/src/TextArea/_docs/TextArea.mdx +++ b/packages/components/src/TextArea/_docs/TextArea.mdx @@ -1,7 +1,7 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import { LinkTo } from "~storybook/components/LinkTo" -import * as TextAreaStories from "./TextArea.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import { LinkTo } from '~storybook/components/LinkTo' +import * as TextAreaStories from './TextArea.stories' @@ -37,6 +37,7 @@ You can use our Label component ``` ### Connecting a custom element + For linking text that isn't in a `Label` you can use `aria-labelledBy` ``` diff --git a/packages/components/src/TextAreaField/_docs/TextAreaField.mdx b/packages/components/src/TextAreaField/_docs/TextAreaField.mdx index b9c8c66df9f..53ff65ce8ba 100644 --- a/packages/components/src/TextAreaField/_docs/TextAreaField.mdx +++ b/packages/components/src/TextAreaField/_docs/TextAreaField.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as TextAreaFieldStories from "./TextAreaField.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as TextAreaFieldStories from './TextAreaField.stories' @@ -25,18 +25,23 @@ A text area includes a label and a longer area you can type multiple lines of te ## API ### Variant + ### Autogrow -Autogrow expands the textarea as the user's typing exceeds the minimum height of the text area. + +Autogrow expands the textarea as the user's typing exceeds the minimum height of the text area. ### Description + ### Validation + ### Reversed + diff --git a/packages/components/src/TextField/_docs/TextField.mdx b/packages/components/src/TextField/_docs/TextField.mdx index 4d2e1591ff2..7cba86f858d 100644 --- a/packages/components/src/TextField/_docs/TextField.mdx +++ b/packages/components/src/TextField/_docs/TextField.mdx @@ -1,7 +1,7 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import { LinkTo } from "~storybook/components/LinkTo" -import * as TextFieldStories from "./TextField.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import { LinkTo } from '~storybook/components/LinkTo' +import * as TextFieldStories from './TextField.stories' @@ -28,16 +28,21 @@ Composed of Label, @@ -29,8 +29,9 @@ A visually interesting item in a list consisting of a card, visual, title, metad ### Information - + ### Information Button Label + diff --git a/packages/components/src/Tile/MultiActionTile/_docs/MultiActionTile.mdx b/packages/components/src/Tile/MultiActionTile/_docs/MultiActionTile.mdx index 1d0d29738d2..c13c49e47bc 100644 --- a/packages/components/src/Tile/MultiActionTile/_docs/MultiActionTile.mdx +++ b/packages/components/src/Tile/MultiActionTile/_docs/MultiActionTile.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as MultiActionTileStories from "./MultiActionTile.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as MultiActionTileStories from './MultiActionTile.stories' @@ -29,7 +29,9 @@ A visually interesting item in a list consisting of a card, visual, title, metad ### Secondary Action + ### Information + diff --git a/packages/components/src/Tile/TileGrid/_docs/TileGrid.mdx b/packages/components/src/Tile/TileGrid/_docs/TileGrid.mdx index 164fd7fa0d9..36644ad0abd 100644 --- a/packages/components/src/Tile/TileGrid/_docs/TileGrid.mdx +++ b/packages/components/src/Tile/TileGrid/_docs/TileGrid.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as TileGridStories from "./TileGrid.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as TileGridStories from './TileGrid.stories' diff --git a/packages/components/src/TimeField/_docs/TimeField.mdx b/packages/components/src/TimeField/_docs/TimeField.mdx index 410e365cfdf..5a222cb60a2 100644 --- a/packages/components/src/TimeField/_docs/TimeField.mdx +++ b/packages/components/src/TimeField/_docs/TimeField.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as TimeFieldStories from "./TimeField.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as TimeFieldStories from './TimeField.stories' diff --git a/packages/components/src/TitleBlockZen/_docs/TitleBlockZen.mdx b/packages/components/src/TitleBlockZen/_docs/TitleBlockZen.mdx index de335427d67..c1ffe7a6df3 100644 --- a/packages/components/src/TitleBlockZen/_docs/TitleBlockZen.mdx +++ b/packages/components/src/TitleBlockZen/_docs/TitleBlockZen.mdx @@ -1,6 +1,6 @@ -import { Canvas, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as TitleBlockZenStories from "./TitleBlockZen.stories" +import { Canvas, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as TitleBlockZenStories from './TitleBlockZen.stories' @@ -48,6 +48,7 @@ in the dropdown menu when you click it. (`MenuItemProps` is a type imported from ## secondaryActions & secondaryOverflowMenuItems Secondary Actions sit below the Primary Actions, and consist of + - actions/links (just a button), - menus (a menu button), and - the overflow menu (a menu button with a "meatballs" icon). @@ -70,5 +71,6 @@ Each object can be a MenuGroup (see code snippet for `primaryAction` above) or a ``` type SecondaryActionsProps = Array; ``` + The order of elements in the array will determine the visual order on the page, so please be aware of the intended order mentioned above. diff --git a/packages/components/src/ToggleSwitch/ToggleSwitch/_docs/ToggleSwitch.mdx b/packages/components/src/ToggleSwitch/ToggleSwitch/_docs/ToggleSwitch.mdx index e21ec4d778b..9eacbb07548 100644 --- a/packages/components/src/ToggleSwitch/ToggleSwitch/_docs/ToggleSwitch.mdx +++ b/packages/components/src/ToggleSwitch/ToggleSwitch/_docs/ToggleSwitch.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation, LinkTo } from "~storybook/components" -import * as ToggleSwitchStories from "./ToggleSwitch.stories" +import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components' +import * as ToggleSwitchStories from './ToggleSwitch.stories' diff --git a/packages/components/src/ToggleSwitch/ToggleSwitchField/_docs/ToggleSwitchField.mdx b/packages/components/src/ToggleSwitch/ToggleSwitchField/_docs/ToggleSwitchField.mdx index 6d0a8503c8a..074667600c6 100644 --- a/packages/components/src/ToggleSwitch/ToggleSwitchField/_docs/ToggleSwitchField.mdx +++ b/packages/components/src/ToggleSwitch/ToggleSwitchField/_docs/ToggleSwitchField.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as ToggleSwitchFieldStories from "./ToggleSwitchField.stories" +import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as ToggleSwitchFieldStories from './ToggleSwitchField.stories' diff --git a/packages/components/src/VisuallyHidden/_docs/VisuallyHidden.mdx b/packages/components/src/VisuallyHidden/_docs/VisuallyHidden.mdx index ca8507e2782..c5ec08f63cb 100644 --- a/packages/components/src/VisuallyHidden/_docs/VisuallyHidden.mdx +++ b/packages/components/src/VisuallyHidden/_docs/VisuallyHidden.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as VisuallyHiddenStories from "./VisuallyHidden.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as VisuallyHiddenStories from './VisuallyHidden.stories' @@ -31,5 +31,7 @@ Visual users can see the name of the survey to the left of the link, but screen The context can be added like so: ```jsx -View report for Camper Check-in 2023 + + View report for Camper Check-in 2023 + ``` diff --git a/packages/components/src/Well/_docs/Well.mdx b/packages/components/src/Well/_docs/Well.mdx index 50bad0bd1ed..fd870fd40b9 100644 --- a/packages/components/src/Well/_docs/Well.mdx +++ b/packages/components/src/Well/_docs/Well.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as WellStories from "./Well.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as WellStories from './Well.stories' @@ -32,10 +32,10 @@ All `variant`s have a corresponding `color` value, with some minor update to ens - ### Border Styles + ### No Margin - + diff --git a/packages/components/src/Workflow/_docs/ProgressStepper.mdx b/packages/components/src/Workflow/_docs/ProgressStepper.mdx index e6330bbe20f..92a2609722a 100644 --- a/packages/components/src/Workflow/_docs/ProgressStepper.mdx +++ b/packages/components/src/Workflow/_docs/ProgressStepper.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks" -import { Installation, ResourceLinks } from "~storybook/components" -import * as ProgressStepperStories from "./ProgressStepper.stories" +import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks' +import { Installation, ResourceLinks } from '~storybook/components' +import * as ProgressStepperStories from './ProgressStepper.stories' diff --git a/packages/components/src/Workflow/_docs/Workflow.mdx b/packages/components/src/Workflow/_docs/Workflow.mdx index d3f98ac6ea9..eb1e5455e88 100644 --- a/packages/components/src/Workflow/_docs/Workflow.mdx +++ b/packages/components/src/Workflow/_docs/Workflow.mdx @@ -1,8 +1,8 @@ -import { ArgTypes, Canvas, Meta } from "@storybook/blocks" -import { Installation, ResourceLinks } from "~storybook/components" -import * as Workflow from "./Workflow.stories" -import * as WorkflowFooter from "./WorkflowFooter.stories" -import * as WorkflowHeader from "./WorkflowHeader.stories" +import { ArgTypes, Canvas, Meta } from '@storybook/blocks' +import { Installation, ResourceLinks } from '~storybook/components' +import * as Workflow from './Workflow.stories' +import * as WorkflowFooter from './WorkflowFooter.stories' +import * as WorkflowHeader from './WorkflowHeader.stories' @@ -30,14 +30,15 @@ To ensure at readability at 400% zoom (See WCAG's [Reflow criteria](https://www. ## Header actions -The `headerActions` prop takes array of JSX elements that will render in the top right of the `Header` component. +The `headerActions` prop takes array of JSX elements that will render in the top right of the `Header` component. While the number of JSX elements is not limited, is important to consider the real estate in the `Header` and how larger strings or components may be rendered on smaller screen sizes. - `}} + `, + }} /> - ## Handling a Workflow exit A common pattern identified is a Workflow Exit button. An implementation of this component should be passed to the `headerActions` an array to handle a user leaving a Workflow. We've provided an example below that combines a Kaizen `Button` with the `ConfirmationModal` component. @@ -68,7 +69,8 @@ A common pattern identified is a Workflow Exit button. An implementation of this (false) ... return ( @@ -97,7 +99,7 @@ A common pattern identified is a Workflow Exit button. An implementation of this - )` + )`, }} /> @@ -108,7 +110,8 @@ The Footer tracks the progress of the form by using finding the index of the `cu - `}} + `, + }} /> The Footer is agnostic to the JSX elements that are used in the `previousAction` and `nextAction`. While we recommend using the Kaizen Button, a button-like component can be used in its place to satisfy project-specific requirements. - To hide, disable or change the appearance of the Footer buttons you can leverage the props available for the `@kaizen/button` or pass in undefined to not render the component. } previousAction={ + ``` ### Button content and children @@ -90,7 +107,7 @@ Can safely be replaced with the following: Labels and any button content can be passed into the `Button` as `children`. Content wrapped by the `Button` will be spaced evenly relative to the `size` prop. ```tsx - ``` @@ -107,12 +124,11 @@ Set the position of the icon using the `iconPosition` prop. This will ensure con - ### Icon-only `Button` and `hasHiddenLabel` To achieve an icon-only `Button` (previously: `IconButton`) use the `icon` prop and set `hasHiddenLabel` to `true`. This will visually hide the button's `children` and `pendingLabel`, while still announcing the content to screen readers. - + This pattern ensures that the `Button`'s accessible name is determined by its children, which helps to announce relevant content to the screen readers, as with the [pending state](#pending-state). You can learn more about this [accessible pattern here](https://cultureamp.atlassian.net/wiki/spaces/PA/pages/3833331831/Accessible+button+and+link+labels). @@ -132,7 +148,6 @@ As mentioned in the [previous section](#icon-only-button-and-hashiddenlabel), an - ### Full width Buttons If a button is statically the full width of a container you can use the `isFullWidth` property. @@ -147,4 +162,21 @@ The following table is a collection of additional React Aria and native HTML pro You can learn more about React Aria's Button API and advance configuration options [here](https://react-spectrum.adobe.com/react-aria/Button.html#props). - + diff --git a/packages/components/src/__actions__/Button/v3/_docs/Button--usage-guidelines.mdx b/packages/components/src/__actions__/Button/v3/_docs/Button--usage-guidelines.mdx index 1a276a4136c..e90e232f2b0 100644 --- a/packages/components/src/__actions__/Button/v3/_docs/Button--usage-guidelines.mdx +++ b/packages/components/src/__actions__/Button/v3/_docs/Button--usage-guidelines.mdx @@ -1,6 +1,6 @@ -import { Canvas, Meta, Controls } from "@storybook/blocks" -import { ResourceLinks, Installation } from "~storybook/components" -import * as Button from "./Button.docs.stories" +import { Canvas, Meta, Controls } from '@storybook/blocks' +import { ResourceLinks, Installation } from '~storybook/components' +import * as Button from './Button.docs.stories' @@ -25,6 +25,8 @@ Buttons allow users to perform an action. They have multiple styles for various - - - + diff --git a/packages/components/src/__actions__/Menu/v1/_docs/Menu.mdx b/packages/components/src/__actions__/Menu/v1/_docs/Menu.mdx index f75f9c21cfa..ee7f1b44491 100644 --- a/packages/components/src/__actions__/Menu/v1/_docs/Menu.mdx +++ b/packages/components/src/__actions__/Menu/v1/_docs/Menu.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, Installation } from "~storybook/components" -import * as MenuStories from "./Menu.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, Installation } from '~storybook/components' +import * as MenuStories from './Menu.stories' @@ -26,4 +26,3 @@ A menu contains links to places or button actions. It does NOT show a selected i - diff --git a/packages/components/src/__actions__/Menu/v2/_docs/Menu.mdx b/packages/components/src/__actions__/Menu/v2/_docs/Menu.mdx index 11de8259dd2..84ea6ea075d 100644 --- a/packages/components/src/__actions__/Menu/v2/_docs/Menu.mdx +++ b/packages/components/src/__actions__/Menu/v2/_docs/Menu.mdx @@ -1,6 +1,6 @@ -import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KAIOInstallation } from "~storybook/components" -import * as MenuStories from "./Menu.stories" +import { Canvas, Controls, Meta } from '@storybook/blocks' +import { ResourceLinks, KAIOInstallation } from '~storybook/components' +import * as MenuStories from './Menu.stories' @@ -13,7 +13,11 @@ import * as MenuStories from "./Menu.stories" /> - + ## Overview diff --git a/packages/components/src/__actions__/Menu/v3/_docs/ApiSpecification.mdx b/packages/components/src/__actions__/Menu/v3/_docs/ApiSpecification.mdx index b8f3a32ff3c..aec747b0686 100644 --- a/packages/components/src/__actions__/Menu/v3/_docs/ApiSpecification.mdx +++ b/packages/components/src/__actions__/Menu/v3/_docs/ApiSpecification.mdx @@ -1,14 +1,15 @@ -import { Canvas, Controls, Meta, Source } from "@storybook/blocks" -import { KAIOInstallation, ResourceLinks, SbContent } from "~storybook/components" -import * as docsStories from "./Menu.docs.stories" -import * as exampleStories from "./Menu.stories" +import { Canvas, Controls, Meta, Source } from '@storybook/blocks' +import { KAIOInstallation, ResourceLinks, SbContent } from '~storybook/components' +import * as docsStories from './Menu.docs.stories' +import * as exampleStories from './Menu.stories' - + # Menu API Specification (v3) - Updated July 4, 2024 +Updated July 4, 2024 + - +{' '} + + + +{' '} - + + +## Overview - ## Overview +A menu displays a list of actions in a popover, toggled opened with a button. - A menu displays a list of actions in a popover, toggled opened with a button. @@ -50,24 +61,24 @@ import * as exampleStories from "./Menu.stories" - `}} + `, + }} /> ### React Aria - This component is built using the `react-aria-components` library and extends the [Menu component](https://react-spectrum.adobe.com/react-aria/Menu.html). +This component is built using the `react-aria-components` library and extends the [Menu component](https://react-spectrum.adobe.com/react-aria/Menu.html). - As this shares the same core [anatomy](https://react-spectrum.adobe.com/react-aria/Menu.html#anatomy), [props types](https://react-spectrum.adobe.com/react-aria/Menu.html#menu-1) and [functionality](https://react-spectrum.adobe.com/react-aria/Menu.html#features), the guidance below is tailored to our implementation and should cover known use cases of the Menu. +As this shares the same core [anatomy](https://react-spectrum.adobe.com/react-aria/Menu.html#anatomy), [props types](https://react-spectrum.adobe.com/react-aria/Menu.html#menu-1) and [functionality](https://react-spectrum.adobe.com/react-aria/Menu.html#features), the guidance below is tailored to our implementation and should cover known use cases of the Menu. - More on the React Aria API and a deep dive into other examples can be found via the [React Aria docs page](https://react-spectrum.adobe.com/react-aria/Menu.html) if not present below. - +More on the React Aria API and a deep dive into other examples can be found via the [React Aria docs page](https://react-spectrum.adobe.com/react-aria/Menu.html) if not present below. - - ## API - +## API + + ## Actions and Next.js routing @@ -76,7 +87,7 @@ Use the `href` prop when an action navigates to a new page. Otherwise, use the `onAction` prop to trigger an action within the page. - + ## Typeahead @@ -84,22 +95,22 @@ Typeahead (the ability to quickly skip to an item by typing a few characters aft If you're passing `ReactNode` into `MenuItem` `children`, you'll need to specify the `textValue` prop manually on `MenuItem` in order for typeahead to work. - + ## Sections Sections can be added with the `Section` and `Header` component from `react-aria-components`. - + ## Disabling items Menu items can be disabled with the `isDisabled` prop. - + ## Controlled By default, the open/closed state of the menu is handled under the hood. In cases where you need control over the open state, use the `isOpen` and `onOpenChange` props on the `MenuTrigger` component (both props must be used for this to work). - + diff --git a/packages/components/src/__actions__/Menu/v3/_docs/Menu.mdx b/packages/components/src/__actions__/Menu/v3/_docs/Menu.mdx index 15e7424a760..d9fe9f78717 100644 --- a/packages/components/src/__actions__/Menu/v3/_docs/Menu.mdx +++ b/packages/components/src/__actions__/Menu/v3/_docs/Menu.mdx @@ -1,14 +1,21 @@ -import { Canvas, Meta, Controls } from "@storybook/blocks" -import { ResourceLinks, SbContent, Installation, DosAndDonts, DoOrDont } from "~storybook/components" -import * as MenuDocsStories from "./Menu.docs.stories" -import * as MenuStories from "./Menu.stories" +import { Canvas, Meta, Controls } from '@storybook/blocks' +import { + ResourceLinks, + SbContent, + Installation, + DosAndDonts, + DoOrDont, +} from '~storybook/components' +import * as MenuDocsStories from './Menu.docs.stories' +import * as MenuStories from './Menu.stories' # Menu (v3) - Updated July 6, 2024 +Updated July 6, 2024 + - ## Overview +## Overview + +A menu displays a list of actions in a popover, toggled opened with a button. - A menu displays a list of actions in a popover, toggled opened with a button.