chore(prettier): lint MD and MDX files (#5353)

* chore(prettier): ignore changelogs and lock files * chore(prettier): check md, mdx, cjs files * style: prettier fixes
cultureamp · Dec 5, 2024 · 3fe24bc · 3fe24bc
1 parent 9f2be94
commit 3fe24bc
Show file tree

Hide file tree

Showing 160 changed files with 1,258 additions and 1,009 deletions.
diff --git a/.changeset/poor-deers-jog.md b/.changeset/poor-deers-jog.md
@@ -0,0 +1,2 @@
+---
+---
diff --git 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
+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
@@ -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
+
 <!-- Why have you created this PR? - Is it a new feature, or a bug fix? Or something else? -->
 <!-- Reference any relevant Jira tickets so your reviewer can find more context if needed. -->
 <!-- Fixing a GitHub issue? Add "Fixes [issue URL]". -->
 
-
 ## What
+
 <!-- What do your changes do? How do they change/fix the current behavior? -->
 <!-- Add screenshots, GIFs or videos to illustrate the changes.  -->
diff --git 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
@@ -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: <https://dev.cultureamp.design/>(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: <https://dev.cultureamp.design/>(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
@@ -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 <https://cultureamp.design>, 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
@@ -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'
 
 <Meta title="Guides/App starter" />
 
@@ -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.
 
 <Unstyled>
-  <InlineNotification persistent type="informative">You won&apos;t need to apply any of the below if you have the latest <a href="https://github.com/cultureamp/next-template">next-template</a>.</InlineNotification>
+  <InlineNotification persistent type="informative">
+    You won&apos;t need to apply any of the below if you have the latest{' '}
+    <a href="https://github.com/cultureamp/next-template">next-template</a>.
+  </InlineNotification>
 </Unstyled>
 
 ## 1. Add the KaizenProvider
 
 The <LinkTo pageId="components-kaizen-provider-installation">KaizenProvider</LinkTo> 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";
-<KaizenProvider>
+import { KaizenProvider } from '@kaizen/components'
+;<KaizenProvider>
   <App />
 </KaizenProvider>
 ```
+
 Be sure to read the <LinkTo pageId="components-kaizen-provider-installation">KaizenProvider</LinkTo> 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 <LinkTo pageId="illustrations-icon-icon-future-api-specification">(Future) Icons</LinkTo> (introduced in `@kaizen/[email protected]`) 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 `<head>` of your apps.
 
 ```html
-<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],400,0..1,0&display=block" />
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],400,0..1,0&display=block" />
+<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
+<link
+  rel="preload"
+  as="style"
+  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],400,0..1,0&display=block"
+/>
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],400,0..1,0&display=block"
+/>
 ```
diff --git a/docs/pages/welcome.mdx b/docs/pages/welcome.mdx
@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/blocks"
+import { Meta } from '@storybook/blocks'
 
 <Meta title="Introduction/Welcome" />
 
@@ -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
@@ -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
@@ -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'
 
 <Meta of={AvatarStories} />
 
@@ -13,7 +13,6 @@ import * as AvatarStories from "./Avatar.stories"
 
 />
 
-
 <KAIOInstallation exportNames="Avatar" />
 
 ## Overview

diff --git 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'
 
 <Meta of={AvatarGroupStories} />
 

diff --git 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'
 
 <Meta of={BadgeStories} />
 

diff --git 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'
 
 <Meta of={BrandStories} />
 
@@ -13,7 +13,6 @@ import * as BrandStories from "./Brand.stories"
 
 />
 
-
 <KAIOInstallation exportNames="Brand" />
 
 ## Overview

diff --git 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'
 
 <Meta of={BrandMoment} />
 

diff --git 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'
 
 <Meta of={ButtonGroupStories} />
 

diff --git 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'
 
 <Meta of={CalendarRangeStories} />
 

diff --git 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'
 
 <Meta of={CalendarSingleStories} />
 

diff --git 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'
 
 <Meta of={CardStories} />
 
@@ -23,8 +23,9 @@ The `Card` component is a flexible container used to wrap primary content. It ha
 ## API
 
 ### Colors
+
 <Canvas of={CardStories.Colors} />
 
 ### Elevation
-<Canvas of={CardStories.Elevation} />
 
+<Canvas of={CardStories.Elevation} />