diff --git a/.changeset/gold-carrots-notice.md b/.changeset/gold-carrots-notice.md index e8edf30cf60..f9c1a607c3b 100644 --- a/.changeset/gold-carrots-notice.md +++ b/.changeset/gold-carrots-notice.md @@ -1,10 +1,10 @@ --- -"@kaizen/tailwind": major +"@kaizen/tailwind": minor --- Fix long utility strings for borders in Tailwind (in combination with the introduction of `@kaizen/reset.css`) -**note: these utilities will not work without installing `@kaizen/reset.css`** +**Important: these utilities will not work without upgrading to `@kaizen/components@1.35.0`** - Adds DEFAULT values to `borderWidth` and `borderColor` in the Tailwind preset, so these don't need to be written with utility classes. diff --git a/.changeset/quiet-poems-hammer.md b/.changeset/quiet-poems-hammer.md deleted file mode 100644 index 3e99ef6fcc5..00000000000 --- a/.changeset/quiet-poems-hammer.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -"@kaizen/reset.css": major ---- - -Initialising this package with a reset to the border properties to support Tailwind's border default settings. - -- Allows for simpler use of border util classes, ie: border-l -- This will also remove all non-explicit borders, ie: inheritance from native browser styles -- Check your chromatic snapshots and add sensible defaults where required diff --git a/.changeset/serious-dolphins-cough.md b/.changeset/serious-dolphins-cough.md new file mode 100644 index 00000000000..bb65c03dae0 --- /dev/null +++ b/.changeset/serious-dolphins-cough.md @@ -0,0 +1,5 @@ +--- +"@kaizen/design-tokens": patch +--- + +Move CSS vars to :root diff --git a/.changeset/silver-cars-yawn.md b/.changeset/silver-cars-yawn.md new file mode 100644 index 00000000000..8fd40494495 --- /dev/null +++ b/.changeset/silver-cars-yawn.md @@ -0,0 +1,12 @@ +--- +"@kaizen/components": minor +--- + +Added the following foundational styles to dist/styles.css: + +- Reset: initially to provide the border properties that support Tailwind's border default settings. +- Fonts: with font-face definitions for Inter, Tiempos and IBM Mono +- Normalize: A standard Normalize already present across CultureAmp +- Layers: A set of CSS layers to help control the specificity of these 3 CSS stylesheets and our component's CSS. + +**Important: Remove any other normalize or reset stylesheets in your application repo** diff --git a/.changeset/tall-buses-march.md b/.changeset/tall-buses-march.md new file mode 100644 index 00000000000..85d5831962e --- /dev/null +++ b/.changeset/tall-buses-march.md @@ -0,0 +1,5 @@ +--- +"@kaizen/design-tokens": patch +--- + +Remove use of `@kaizen/typography` diff --git a/.changeset/wet-pens-arrive.md b/.changeset/wet-pens-arrive.md new file mode 100644 index 00000000000..5a22716ef99 --- /dev/null +++ b/.changeset/wet-pens-arrive.md @@ -0,0 +1,24 @@ +--- +"@kaizen/components": patch +--- + +- Replace all usages of `Heading` from `@kaizen/typography` with the same from KAIO +- Replace all usages of `Paragraph` from `@kaizen/typography` with `Text` from KAIO +- Remove `@kaizen/brand` and its usages +- Remove `@kaizen/brand-moment` and its usages +- Remove `@kaizen/button` and its usages +- Remove `@kaizen/draft-badge` and its usages +- Remove `@kaizen/draft-card` and its usages +- Remove `@kaizen/draft-divider` and its usages +- Remove `@kaizen/draft-form` and its usages +- Remove `@kaizen/draft-illustration` and its usages +- Remove `@kaizen/draft-page-layout` and its usages +- Remove `@kaizen/draft-select` and its usages +- Remove `@kaizen/draft-tabs` and its usages +- Remove `@kaizen/draft-tag` and its usages +- Remove `@kaizen/draft-tooltip` and its usages +- Remove `@kaizen/responsive` and its usages +- Remove `@kaizen/notification` and its usages +- Remove `@kaizen/loading-skeleton` and its usages +- Remove `@kaizen/loading-spinner` and its usages +- Update usages of `uuid` to `useId` within components diff --git a/.github/workflows/test-stories.yaml b/.github/workflows/test-stories.yaml index c41850a6edc..3e7349c6724 100644 --- a/.github/workflows/test-stories.yaml +++ b/.github/workflows/test-stories.yaml @@ -116,8 +116,7 @@ jobs: externals: | [ "**/!(*.module).scss", - "packages/button/src/Button/*.scss", - "packages/component-library/components/Spacing/Base.module.scss" + "packages/components/**/*.css", ] update-branch-preview: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 7edb83ae337..d9e7adcbb93 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -67,46 +67,6 @@ See the [design tokens](https://github.com/cultureamp/kaizen-design-system/tree/ To learn more about what browsers and devices we support in Kaizen Component Library, Culture Amp employees can see [the Browser Support wiki page](https://cultureamp.atlassian.net/wiki/spaces/Prod/pages/1572948/Browser+Support+and+Stats). -### Local development with other front-end codebases - -To strengthen the Kaizen Design System, we encourage engineers to take a component-first development approach. By concentrating on developing Kaizen components in Storybook, we are likely to improve the API design and achieve good separation of concerns, avoiding components tightly coupled to specific applications. If, however, you want to test a component in the context of another front-end codebase, you can [yalc](https://github.com/wclr/yalc) your local version of `@kaizen/component-library` with your other front-end codebase. - -#### For core components - -**Step 1**: Make your local copy of `@kaizen/component-library` available. - -```sh -# Navigate to code source -$ cd ./packages/component-library - -# Publish the package -$ yalc publish - -``` - -**Step 2**: Install `@kaizen/component-library` in your other front-end codebase. - -```sh -# Navigate to code source -$ cd /cultureamp/YOUR_FRONT_END_CODEBASE - -# Add the package to your front-end codebase -$ yalc add @kaizen/component-library - -# Yarn install -$ yarn - -``` - -Your local Kaizen changes will now show in your other front-end codebase. If you want to test subsequent updates to the component, you'll need to run through step 1 again to republish the component, and then run `yalc update` in your front-end codebase to see the new changes. - -**Step 3**: Removing the package - -When you are done, remove the package from your front-end codebase: - -`yalc remove @kaizen/component-library` - - ## Releasing packages Automated releases to the npm public registry are triggered for all pull requests containing modifications to one or more npm packages (found in the `/packages/` directory). The information required to determine the version update for each release is taken from the title and content of the pull request. @@ -180,7 +140,7 @@ This will run a build and publish a snapshot and its tag with a name that is con ## Using new package releases -To use a newly released version of the Kaizen Component Library (or any other package) in a front-end codebase, run `yarn upgrade --latest ` (e.g. `yarn upgrade --latest @kaizen/component-library`). +To use a newly released version of the Kaizen Component Library (or any other package) in a front-end codebase, run `yarn upgrade --latest ` (e.g. `yarn upgrade --latest @kaizen/components`). Remember to always check the CHANGELOG (e.g. [`/packages/component-library/CHANGELOG.md`](./packages/component-library/CHANGELOG.md) or the [releases page](https://github.com/cultureamp/kaizen-design-system/releases)) for any package you wish to upgrade, paying extra attention to any breaking changes which have been introduced since the last version used in your project. diff --git a/docs/Systems/Tailwind/components/CardContent.tsx b/docs/Systems/Tailwind/components/CardContent.tsx index a0da82bc35b..f7e4c19804c 100644 --- a/docs/Systems/Tailwind/components/CardContent.tsx +++ b/docs/Systems/Tailwind/components/CardContent.tsx @@ -1,6 +1,6 @@ import React from "react" -import { Button } from "@kaizen/button" -import { Heading } from "@kaizen/typography" +import { Button } from "~components/Button" +import { Heading } from "~components/Heading" type CardContentProps = { title: string diff --git a/docs/Systems/Tailwind/components/UtilityClassTemplate.tsx b/docs/Systems/Tailwind/components/UtilityClassTemplate.tsx index 21356a6baa1..c2e3caf16be 100644 --- a/docs/Systems/Tailwind/components/UtilityClassTemplate.tsx +++ b/docs/Systems/Tailwind/components/UtilityClassTemplate.tsx @@ -1,5 +1,5 @@ import React, { useState } from "react" -import { InlineNotification } from "@kaizen/notification" +import { InlineNotification } from "~components/Notification" import { StickerSheet } from "~storybook/components/StickerSheet" import { CodeSnippet } from "./CodeSnippet" @@ -61,9 +61,11 @@ export const UtilityClassTemplate = ({ setCopiedText(null)} - title="Copied to clipboard: " + headingProps={{ + children: "Copied to clipboard: ", + variant: "heading-6", + }} > {copiedText} diff --git a/docs/Systems/Tailwind/configuration.mdx b/docs/Systems/Tailwind/configuration.mdx index cf3e31be72d..ee5be08e142 100644 --- a/docs/Systems/Tailwind/configuration.mdx +++ b/docs/Systems/Tailwind/configuration.mdx @@ -1,5 +1,5 @@ import { Meta } from "@storybook/blocks" -import { InlineNotification } from "@kaizen/notification" +import { InlineNotification } from "~components/Notification" diff --git a/docs/Systems/Tailwind/utility-class-helpers/borders/border-width.mdx b/docs/Systems/Tailwind/utility-class-helpers/borders/border-width.mdx index 31a50be9196..9a866a52150 100644 --- a/docs/Systems/Tailwind/utility-class-helpers/borders/border-width.mdx +++ b/docs/Systems/Tailwind/utility-class-helpers/borders/border-width.mdx @@ -1,5 +1,5 @@ import { Description, Meta, Story, Unstyled } from "@storybook/blocks" -import { Card } from "@kaizen/draft-card" +import { Card } from "~components/Card" import * as Examples from "./border-width.stories" diff --git a/docs/Systems/Tailwind/utility-class-helpers/modifiers/media-queries.stories.tsx b/docs/Systems/Tailwind/utility-class-helpers/modifiers/media-queries.stories.tsx index 3ff6ad73a82..fecd110508e 100644 --- a/docs/Systems/Tailwind/utility-class-helpers/modifiers/media-queries.stories.tsx +++ b/docs/Systems/Tailwind/utility-class-helpers/modifiers/media-queries.stories.tsx @@ -1,6 +1,7 @@ import React from "react" import { Meta, StoryFn } from "@storybook/react" -import { Heading, Paragraph } from "@kaizen/typography" +import { Heading } from "~components/Heading" +import { Text } from "~components/Text" export default { title: "Systems/Tailwind/Utility Class References/Modifiers/Media Queries", @@ -27,11 +28,9 @@ const QueryInfo = ({ children, }: QueryInfoProps): React.ReactElement => (
- Pseudo selector: {selector} - Breakpoint: {selectorValue} - - In this example: {selector}:bg-blue-400 - + Pseudo selector: {selector} + Breakpoint: {selectorValue} + In this example: {selector}:bg-blue-400 {/* Passing in as children, as dynamically creating the media query with interpolation fails */} {children}
@@ -64,23 +63,19 @@ export const ArbitraryMediaQueries: StoryFn = () => (
- + Min-width breakpoint (applied when the screen gets{" "} wider) - - - In this example: min-[500px]:bg-blue-400 - -
+ + In this example: min-[500px]:bg-blue-400 +
- + Max-width breakpoint (applied when the screen gets{" "} slimmer) - - - In this example: max-[500px]:bg-blue-400 - -
+ + In this example: max-[500px]:bg-blue-400 +
) diff --git a/docs/Systems/Tailwind/utility-class-helpers/modifiers/pseudo-states.mdx b/docs/Systems/Tailwind/utility-class-helpers/modifiers/pseudo-states.mdx index 41af83e08fa..51dab078372 100644 --- a/docs/Systems/Tailwind/utility-class-helpers/modifiers/pseudo-states.mdx +++ b/docs/Systems/Tailwind/utility-class-helpers/modifiers/pseudo-states.mdx @@ -1,5 +1,5 @@ import { Description, Meta, Story, Unstyled } from "@storybook/blocks" -import { Card } from "@kaizen/draft-card" +import { Card } from "~components/Card" import * as Examples from "./pseudo-states.stories" diff --git a/docs/Systems/Tailwind/utility-class-helpers/spacing/margin.mdx b/docs/Systems/Tailwind/utility-class-helpers/spacing/margin.mdx index 21cd236c3a0..3f774a9e38f 100644 --- a/docs/Systems/Tailwind/utility-class-helpers/spacing/margin.mdx +++ b/docs/Systems/Tailwind/utility-class-helpers/spacing/margin.mdx @@ -1,5 +1,5 @@ import { Description, Meta, Story, Unstyled } from "@storybook/blocks" -import { Card } from "@kaizen/draft-card" +import { Card } from "~components/Card" import * as Examples from "./margin.stories" diff --git a/docs/Systems/Tailwind/utility-class-helpers/spacing/padding.mdx b/docs/Systems/Tailwind/utility-class-helpers/spacing/padding.mdx index ba5151e2cac..ae82f1d17e0 100644 --- a/docs/Systems/Tailwind/utility-class-helpers/spacing/padding.mdx +++ b/docs/Systems/Tailwind/utility-class-helpers/spacing/padding.mdx @@ -1,5 +1,5 @@ import { Description, Meta, Story, Unstyled } from "@storybook/blocks" -import { Card } from "@kaizen/draft-card" +import { Card } from "~components/Card" import * as Examples from "./padding.stories" diff --git a/docs/Systems/Tailwind/working-with-tailwind.stories.tsx b/docs/Systems/Tailwind/working-with-tailwind.stories.tsx index 48983eedd27..d3394779c1a 100644 --- a/docs/Systems/Tailwind/working-with-tailwind.stories.tsx +++ b/docs/Systems/Tailwind/working-with-tailwind.stories.tsx @@ -1,13 +1,13 @@ import React from "react" import { StoryFn } from "@storybook/react" -import { Button } from "@kaizen/button" -import { Card } from "@kaizen/draft-card" +import { Button } from "~components/Button" +import { Card } from "~components/Card" +import { Heading } from "~components/Heading" import { CustomSurvey, CustomUnattributedSurvey, -} from "@kaizen/draft-illustration" -import { Skirt } from "@kaizen/draft-page-layout" -import { Heading } from "@kaizen/typography" +} from "~components/Illustration" +import { Skirt } from "~components/Skirt" import { CardContent } from "./components/CardContent" export default { diff --git a/docs/Systems/layout-and-spacing/DemoComponents/MarginExample.tsx b/docs/Systems/layout-and-spacing/DemoComponents/MarginExample.tsx index b0410f7e1fe..0e74073b1bc 100644 --- a/docs/Systems/layout-and-spacing/DemoComponents/MarginExample.tsx +++ b/docs/Systems/layout-and-spacing/DemoComponents/MarginExample.tsx @@ -1,5 +1,5 @@ import React from "react" -import { Button } from "@kaizen/button" +import { Button } from "~components/Button" export const MarginExample = (): JSX.Element => (
diff --git a/docs/Systems/layout-and-spacing/DemoComponents/SpacingTokens.tsx b/docs/Systems/layout-and-spacing/DemoComponents/SpacingTokens.tsx index dbb2299affb..34650dba111 100644 --- a/docs/Systems/layout-and-spacing/DemoComponents/SpacingTokens.tsx +++ b/docs/Systems/layout-and-spacing/DemoComponents/SpacingTokens.tsx @@ -1,8 +1,8 @@ import React from "react" -import { kzSpacing } from "@kaizen/tailwind/src/kz-spacing" +import { tokens } from "~design-tokens/js" export const SpacingTokens = (): JSX.Element => { - const keyValuePairs = Object.entries(kzSpacing) + const keyValuePairs = Object.entries(tokens.spacing) return (
diff --git a/docs/Systems/tokens/color/color-tokens.stories.tsx b/docs/Systems/tokens/color/color-tokens.stories.tsx index 871b3833361..b2a83aed748 100644 --- a/docs/Systems/tokens/color/color-tokens.stories.tsx +++ b/docs/Systems/tokens/color/color-tokens.stories.tsx @@ -1,7 +1,7 @@ import React, { HTMLAttributes } from "react" import { Meta, StoryFn } from "@storybook/react" import colorString from "color-string" -import { Heading } from "@kaizen/typography" +import { Heading } from "~components/Heading" import { tokens } from "~design-tokens/js" export default { diff --git a/docs/app-starter.stories.mdx b/docs/app-starter.mdx similarity index 56% rename from docs/app-starter.stories.mdx rename to docs/app-starter.mdx index 78bf9e24ebc..f9dbbacd2f3 100644 --- a/docs/app-starter.stories.mdx +++ b/docs/app-starter.mdx @@ -1,5 +1,5 @@ import { Meta } from "@storybook/blocks" -import { InlineNotification } from "@kaizen/notification" +import { InlineNotification } from "~components/Notification" import { LinkTo } from "~storybook/components/LinkTo" @@ -10,8 +10,7 @@ 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 this if you started your app with the Frontend template or are using next-services. - +You won't need to apply any of the below if you have the latest Frontend template or 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. @@ -38,47 +37,30 @@ For full installation instructions, see the Utility Class References, as we have made distinct modifications to vanilla Tailwind to suit our design system. -## 3. Add Kaizen's global CSS stylesheets - -There are 2 CSS stylesheets to import: -- reset: which handles any global styles that need to be applied -- components: which has all the styles for Kaizen's component library - -### Important to note -The order of these CSS stylesheets is **very important**: -1. Normalize -2. Kaizen Reset -3. Kaizen Components -4. Tailwind (ie. your product CSS) - -No matter how you choose to import the following, this order must be upheld. +## 4. Add Kaizen's global CSS stylesheet -### Reset - -Kaizen's CSS reset aims to add any global default styles such as typography or base styles which enable Tailwind utilities (you can think of this as Kaizen's own Preflight). - -Note: this is different from a Normalize which aims to create uniformity in basic elements across the multiple browsers. (eg. Corrects bugs and common browser inconsistencies). - -You can either import this via JS or CSS, just make sure it is placed _after normalize_ but _before_ any custom CSS: -```js -import "normalize.css" -import "@kaizen/reset.css" // <- Right here! -import "../src/tailwind.css" -``` - -You can also import this into your CSS files if your project perfers, however you must preserve the above order. +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. -### Components +This includes: +- [Normalize.css](https://github.com/necolas/normalize.css) +- reset.css +- Component styles -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. +You can import this stylesheet in either CSS or JS as long as it sits as the first and only of its kind. -We've especially accounted for using Tailwind's de-duping process for any Tailwind within our components: +### CSS +We've especially accounted for Tailwind, so if you opt for CSS, it is recommended you include it at the top of your `tailwind.css` ```css // tailwind.css @import "@kaizen/components/dist/styles.css"; + @tailwind base; @tailwind components; @tailwind utilities; ``` -Note: If for whatever reason you aren't adding Tailwind to your project, you can do this step in any global css file. Just ensure it's the only one, imported at the root of your app, after resets/normalises. +### JS +```js +import "@kaizen/components/dist/styles.css" +import "tailwind.css" +``` diff --git a/jest.config.js b/jest.config.js index bf41a123a56..47730158671 100644 --- a/jest.config.js +++ b/jest.config.js @@ -7,7 +7,9 @@ module.exports = { moduleNameMapper: { "\\.(jpe?g|png|webm|mp4)$": "jest-static-stubs/$1", "\\.s?css$": "identity-obj-proxy", - "\\.svg$": require.resolve("@kaizen/component-library/mocks/svgMock"), + // Force module uuid to resolve with the CJS entry point, because Jest does not support package.json.exports. See https://github.com/uuidjs/uuid/issues/451 + // Should be resolved in v9, but @storybook/test-runner has deps which use and bring in v8 + uuid: require.resolve("uuid"), }, transformIgnorePatterns: ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"], modulePathIgnorePatterns: ["/packages/components"], diff --git a/package.json b/package.json index a7947214991..a92e9584869 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "storybook:preview": "NODE_ENV=production yarn storybook --docs", "storybook:clean": "rm -rf storybook/public", "storybook:build": "storybook build -c storybook -o storybook/public --docs", - "test:storybook": "STORIES=ignoreBrandMoment test-storybook --config-dir storybook", + "test:storybook": "test-storybook --config-dir storybook", "jest:debug": "node --inspect-brk node_modules/.bin/jest --runInBand --no-cache", "lint": "yarn lint:ts && yarn lint:md && yarn lint:format && yarn lint:styles", "eslint-config": "yarn eslint -c .eslintrc.js --max-warnings=0", @@ -38,8 +38,7 @@ "update-icons": "yarn pkg:aio update-icons" }, "dependencies": { - "@kaizen/design-tokens": "*", - "@kaizen/reset.css": "*", + "@kaizen/hosted-assets": "*", "@kaizen/tailwind": "*", "@storybook/addons": "^7.5.3", "@storybook/api": "^7.5.3", @@ -55,8 +54,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "svgo": "~3.0.3", - "tocbot": "^4.21.6", - "uuid": "^9.0.1" + "tocbot": "^4.21.6" }, "devDependencies": { "@babel/core": "^7.23.3", @@ -70,14 +68,6 @@ "@babel/preset-typescript": "^7.23.3", "@changesets/cli": "^2.26.2", "@cultureamp/changelog-github": "^0.1.0", - "@kaizen/brand-moment": "^1.13.8", - "@kaizen/button": "^3.0.5", - "@kaizen/draft-card": "^3.2.11", - "@kaizen/draft-page-layout": "^2.3.13", - "@kaizen/draft-select": "^2.10.42", - "@kaizen/draft-tabs": "^5.2.43", - "@kaizen/notification": "^1.7.0", - "@kaizen/typography": "^2.3.11", "@storybook/addon-a11y": "^7.5.3", "@storybook/addon-essentials": "^7.5.3", "@storybook/addon-interactions": "^7.5.3", diff --git a/packages/components/package.json b/packages/components/package.json index d7c6933a635..9f0d84ae617 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -25,37 +25,26 @@ "styles.css" ], "scripts": { - "prepublishOnly": "yarn build:components && yarn postBuild && yarn dist:clean", + "prepublishOnly": "yarn build:components && yarn build:styles && yarn postBuild && yarn dist:clean", "build": "yarn clean && yarn prepublishOnly", "test": "jest", "test:ci": "yarn test --ci", "test:treeshake": "agadoo ./dist/esm/index.mjs", "clean": "rimraf dist node_modules", "build:components": "rollup -c", + "build:styles": "postcss styles/global.css --output dist/global.css", "compile": "tsc", "dist:clean": "rm ./dist/global.css ./dist/raw-styles.css", "dist:combine-styles": "concat-cli -f ./dist/*.css ./dist/esm/*.css -o ./dist/raw-styles.css", - "dist:copy-global-css": "cp styles/global.css dist/global.css", "dist:postcss": "postcss dist/raw-styles.css --output dist/styles.css", - "postBuild": "yarn dist:copy-global-css && yarn dist:combine-styles && yarn dist:postcss", + "postBuild": "yarn dist:combine-styles && yarn dist:postcss", "update-icons": "./src/Icon/bin/update-icons.sh" }, "dependencies": { "@floating-ui/react-dom": "^2.0.4", "@headlessui/react": "<=1.5.0", "@internationalized/date": "^3.5.0", - "@kaizen/brand": "^1.5.8", - "@kaizen/draft-badge": "^1.13.12", - "@kaizen/draft-divider": "^2.2.11", - "@kaizen/draft-form": "^10.5.1", - "@kaizen/draft-illustration": "^7.0.1", - "@kaizen/draft-tag": "^3.5.0", - "@kaizen/draft-tooltip": "^5.4.47", "@kaizen/hosted-assets": "^2.0.3", - "@kaizen/loading-skeleton": "^2.0.7", - "@kaizen/loading-spinner": "^2.3.11", - "@kaizen/responsive": "^1.8.10", - "@kaizen/typography": "^2.3.11", "@popperjs/core": "^2.11.8", "@reach/tabs": "^0.18.0", "@react-aria/button": "^3.9.0", @@ -108,6 +97,7 @@ "@babel/plugin-transform-react-pure-annotations": "^7.23.3", "@cultureamp/frontend-apis": "^8.2.0", "@cultureamp/i18n-react-intl": "^2.1.1", + "@kaizen/design-tokens": "^10.3.15", "@kaizen/tailwind": "^1.1.1", "@rollup/plugin-alias": "^5.0.1", "@rollup/plugin-babel": "^6.0.4", @@ -119,6 +109,7 @@ "@types/lodash.debounce": "^4.0.9", "@types/react-dom": "^18.2.15", "@types/react-textfit": "^1.1.3", + "@types/uuid": "^9.0.7", "agadoo": "^3.0.0", "autoprefixer": "^10.4.16", "babel-plugin-pure-static-props": "^0.2.0", diff --git a/packages/components/src/Badge/_docs/Badge.stories.tsx b/packages/components/src/Badge/_docs/Badge.stories.tsx index 5a829b54115..33b29a321f5 100644 --- a/packages/components/src/Badge/_docs/Badge.stories.tsx +++ b/packages/components/src/Badge/_docs/Badge.stories.tsx @@ -1,6 +1,6 @@ import React from "react" import { Meta, StoryObj } from "@storybook/react" -import { BadgeAnimated } from "@kaizen/draft-badge" +import { BadgeAnimated } from "~components/Badge" import { Badge } from "../index" const meta = { diff --git a/packages/components/src/BrandMoment/BrandMoment.tsx b/packages/components/src/BrandMoment/BrandMoment.tsx index 52c918a81b6..4ce68233b09 100644 --- a/packages/components/src/BrandMoment/BrandMoment.tsx +++ b/packages/components/src/BrandMoment/BrandMoment.tsx @@ -1,9 +1,10 @@ import React, { ReactNode, ReactElement, HTMLAttributes } from "react" import classnames from "classnames" -import { SceneProps } from "@kaizen/draft-illustration" import { assetUrl } from "@kaizen/hosted-assets" -import { Heading, Paragraph } from "@kaizen/typography" import { Button, ButtonProps } from "~components/Button" +import { Heading } from "~components/Heading" +import { SceneProps } from "~components/Illustration" +import { Text } from "~components/Text" import { OverrideClassName } from "~types/OverrideClassName" import { useMediaQueries } from "~utils/useMediaQueries" import styles from "./BrandMoment.module.scss" @@ -71,12 +72,12 @@ export const BrandMoment = ({ {text.title} {text.body && ( - {text.body} - + )} {body &&
{body}
}
@@ -107,9 +108,9 @@ export const BrandMoment = ({ diff --git a/packages/components/src/BrandMoment/_docs/BrandMoment.mdx b/packages/components/src/BrandMoment/_docs/BrandMoment.mdx index 94dab0cb6db..49b15d49728 100644 --- a/packages/components/src/BrandMoment/_docs/BrandMoment.mdx +++ b/packages/components/src/BrandMoment/_docs/BrandMoment.mdx @@ -1,5 +1,5 @@ import { Canvas, Meta } from "@storybook/blocks" -import { InlineNotification } from "@kaizen/notification" +import { InlineNotification } from "~components/Notification" import { ResourceLinks, KaioNotification, Installation } from "~storybook/components" import * as BrandMoment from "./BrandMoment.stories" diff --git a/packages/components/src/BrandMoment/_docs/BrandMoment.stories.tsx b/packages/components/src/BrandMoment/_docs/BrandMoment.stories.tsx index 41dd8b797ca..afab4f880cc 100644 --- a/packages/components/src/BrandMoment/_docs/BrandMoment.stories.tsx +++ b/packages/components/src/BrandMoment/_docs/BrandMoment.stories.tsx @@ -2,13 +2,6 @@ import React from "react" import { Meta, StoryObj } from "@storybook/react" import isChromatic from "chromatic" -import { - BrandMomentCaptureIntro, - BrandMomentPositiveOutro, - BrandMomentError, - AnimatedSceneProps, -} from "@kaizen/draft-illustration" -import { Paragraph } from "@kaizen/typography" import { ArrowLeftIcon, ArrowRightIcon, @@ -16,6 +9,13 @@ import { FeedbackClassifyIcon, SecurityTipIcon, } from "~components/Icon" +import { + BrandMomentCaptureIntro, + BrandMomentPositiveOutro, + BrandMomentError, + AnimatedSceneProps, +} from "~components/Illustration" +import { Text } from "~components/Text" import { BrandMoment } from "../index" import { MinimalBasic, @@ -201,14 +201,14 @@ export const Error: Story = { body: ( <> - + Error code 404 - + ), primaryAction: { diff --git a/packages/components/src/BrandMoment/_docs/ExampleHeaders.tsx b/packages/components/src/BrandMoment/_docs/ExampleHeaders.tsx index bcf5be4df47..8d63cd38e65 100644 --- a/packages/components/src/BrandMoment/_docs/ExampleHeaders.tsx +++ b/packages/components/src/BrandMoment/_docs/ExampleHeaders.tsx @@ -1,5 +1,4 @@ import React from "react" -import { Select } from "@kaizen/draft-select" import { assetUrl } from "@kaizen/hosted-assets" import { Button } from "~components/Button" import { CloseIcon } from "~components/Icon" @@ -31,27 +30,11 @@ export const MinimalBasic = (): JSX.Element => (
) -const exampleLocales = [ - { value: "a", label: "English (US English)" }, - { value: "b", label: "العربية (Arabic)" }, - { value: "c", label: "беларускі (Belarusian)" }, - { value: "d", label: "български (Bulgarian)" }, - { value: "e", label: "čeština (Czech)" }, -] - export const MinimalCustomerFocused = (): JSX.Element => (
Culture Amp
-
-