From 32114316225c88bf29673c607009ba46b91efaf4 Mon Sep 17 00:00:00 2001 From: Jamie Maguire Date: Thu, 21 Mar 2024 14:02:26 +0000 Subject: [PATCH 1/4] fix(pie-docs): DSW-000 add correct storybook link to webc page link (#1342) --- .changeset/eighty-suits-explode.md | 5 + .../engineers/getting-started/structure.md | 2 +- yarn.lock | 94 +++++++++---------- 3 files changed, 53 insertions(+), 48 deletions(-) create mode 100644 .changeset/eighty-suits-explode.md diff --git a/.changeset/eighty-suits-explode.md b/.changeset/eighty-suits-explode.md new file mode 100644 index 0000000000..f07088154c --- /dev/null +++ b/.changeset/eighty-suits-explode.md @@ -0,0 +1,5 @@ +--- +"pie-docs": minor +--- + +[Added] - Correct link added for web component storybook page diff --git a/apps/pie-docs/src/engineers/getting-started/structure.md b/apps/pie-docs/src/engineers/getting-started/structure.md index 873d8400a6..441beab34b 100644 --- a/apps/pie-docs/src/engineers/getting-started/structure.md +++ b/apps/pie-docs/src/engineers/getting-started/structure.md @@ -14,7 +14,7 @@ Currently, JET has several officially supported component systems that implement - [Snacks](https://snacks.takeaway.com/) – a set of **React components** created by the legacy Takeaway design system team - [Skip PIE Project](https://react.pie.design/) – a set of **React components** created by the Skip web team -We are also currently building the [PIE Web Component System](https://www.pie.design/storybook). The long-term aim will be to migrate JET teams over to this Web Component System, so we have **one single source of truth** for our global PIE components. +We are also currently building the [PIE Web Component System](https://webc.pie.design/). The long-term aim will be to migrate JET teams over to this Web Component System, so we have **one single source of truth** for our global PIE components. For more details on Fozzie, Snacks and Skip PIE, please check out the **documentation portals** linked above. diff --git a/yarn.lock b/yarn.lock index 57db611233..ace893aa96 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5535,19 +5535,19 @@ __metadata: resolution: "@justeattakeaway/pie-assistive-text@workspace:packages/components/pie-assistive-text" dependencies: "@custom-elements-manifest/analyzer": 0.9.0 - "@justeattakeaway/pie-components-config": 0.12.0 + "@justeattakeaway/pie-components-config": 0.13.0 "@justeattakeaway/pie-icons-webc": 0.19.1 "@justeattakeaway/pie-webc-core": 0.19.1 cem-plugin-module-file-extensions: 0.0.5 languageName: unknown linkType: soft -"@justeattakeaway/pie-button@0.45.6, @justeattakeaway/pie-button@workspace:packages/components/pie-button": +"@justeattakeaway/pie-button@0.46.0, @justeattakeaway/pie-button@workspace:packages/components/pie-button": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-button@workspace:packages/components/pie-button" dependencies: "@custom-elements-manifest/analyzer": 0.9.0 - "@justeattakeaway/pie-components-config": 0.12.0 + "@justeattakeaway/pie-components-config": 0.13.0 "@justeattakeaway/pie-spinner": 0.5.5 "@justeattakeaway/pie-webc-core": 0.19.1 "@justeattakeaway/pie-wrapper-react": 0.14.0 @@ -5556,12 +5556,12 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-card@0.17.5, @justeattakeaway/pie-card@workspace:packages/components/pie-card": +"@justeattakeaway/pie-card@0.18.0, @justeattakeaway/pie-card@workspace:packages/components/pie-card": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-card@workspace:packages/components/pie-card" dependencies: "@custom-elements-manifest/analyzer": 0.9.0 - "@justeattakeaway/pie-components-config": 0.12.0 + "@justeattakeaway/pie-components-config": 0.13.0 "@justeattakeaway/pie-webc-core": 0.19.1 "@justeattakeaway/pie-wrapper-react": 0.14.0 cem-plugin-module-file-extensions: 0.0.5 @@ -5581,7 +5581,7 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-components-config@0.12.0, @justeattakeaway/pie-components-config@workspace:configs/pie-components-config": +"@justeattakeaway/pie-components-config@0.13.0, @justeattakeaway/pie-components-config@workspace:configs/pie-components-config": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-components-config@workspace:configs/pie-components-config" dependencies: @@ -5604,18 +5604,18 @@ __metadata: languageName: node linkType: hard -"@justeattakeaway/pie-cookie-banner@0.17.6, @justeattakeaway/pie-cookie-banner@workspace:packages/components/pie-cookie-banner": +"@justeattakeaway/pie-cookie-banner@0.18.0, @justeattakeaway/pie-cookie-banner@workspace:packages/components/pie-cookie-banner": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-cookie-banner@workspace:packages/components/pie-cookie-banner" dependencies: "@custom-elements-manifest/analyzer": 0.9.0 "@justeat/pie-design-tokens": 6.0.0 - "@justeattakeaway/pie-button": 0.45.6 - "@justeattakeaway/pie-components-config": 0.12.0 + "@justeattakeaway/pie-button": 0.46.0 + "@justeattakeaway/pie-components-config": 0.13.0 "@justeattakeaway/pie-divider": 0.12.4 "@justeattakeaway/pie-icon-button": 0.27.7 - "@justeattakeaway/pie-link": 0.15.4 - "@justeattakeaway/pie-modal": 0.40.0 + "@justeattakeaway/pie-link": 0.16.0 + "@justeattakeaway/pie-modal": 0.41.0 "@justeattakeaway/pie-switch": 0.27.3 "@justeattakeaway/pie-webc-core": 0.19.1 "@justeattakeaway/pie-wrapper-react": 0.14.0 @@ -5639,7 +5639,7 @@ __metadata: resolution: "@justeattakeaway/pie-divider@workspace:packages/components/pie-divider" dependencies: "@custom-elements-manifest/analyzer": 0.9.0 - "@justeattakeaway/pie-components-config": 0.12.0 + "@justeattakeaway/pie-components-config": 0.13.0 "@justeattakeaway/pie-webc-core": 0.19.1 "@justeattakeaway/pie-wrapper-react": 0.14.0 cem-plugin-module-file-extensions: 0.0.5 @@ -5651,7 +5651,7 @@ __metadata: resolution: "@justeattakeaway/pie-form-label@workspace:packages/components/pie-form-label" dependencies: "@custom-elements-manifest/analyzer": 0.9.0 - "@justeattakeaway/pie-components-config": 0.12.0 + "@justeattakeaway/pie-components-config": 0.13.0 "@justeattakeaway/pie-input": ^0.14.0 "@justeattakeaway/pie-switch": ^0.27.3 "@justeattakeaway/pie-webc-core": 0.19.1 @@ -5671,7 +5671,7 @@ __metadata: resolution: "@justeattakeaway/pie-icon-button@workspace:packages/components/pie-icon-button" dependencies: "@custom-elements-manifest/analyzer": 0.9.0 - "@justeattakeaway/pie-components-config": 0.12.0 + "@justeattakeaway/pie-components-config": 0.13.0 "@justeattakeaway/pie-icons-webc": 0.19.1 "@justeattakeaway/pie-spinner": 0.5.5 "@justeattakeaway/pie-webc-core": 0.19.1 @@ -5735,7 +5735,7 @@ __metadata: dependencies: "@babel/core": 7.23.9 "@babel/node": 7.20.7 - "@justeattakeaway/pie-components-config": 0.12.0 + "@justeattakeaway/pie-components-config": 0.13.0 "@justeattakeaway/pie-icons": 4.14.0 "@justeattakeaway/pie-icons-configs": 4.5.1 "@justeattakeaway/pie-webc-core": 0.19.1 @@ -5772,19 +5772,19 @@ __metadata: dependencies: "@custom-elements-manifest/analyzer": 0.9.0 "@justeattakeaway/pie-assistive-text": 0.2.4 - "@justeattakeaway/pie-components-config": 0.12.0 + "@justeattakeaway/pie-components-config": 0.13.0 "@justeattakeaway/pie-webc-core": 0.19.1 "@justeattakeaway/pie-wrapper-react": 0.14.0 cem-plugin-module-file-extensions: 0.0.5 languageName: unknown linkType: soft -"@justeattakeaway/pie-link@0.15.4, @justeattakeaway/pie-link@workspace:packages/components/pie-link": +"@justeattakeaway/pie-link@0.16.0, @justeattakeaway/pie-link@workspace:packages/components/pie-link": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-link@workspace:packages/components/pie-link" dependencies: "@custom-elements-manifest/analyzer": 0.9.0 - "@justeattakeaway/pie-components-config": 0.12.0 + "@justeattakeaway/pie-components-config": 0.13.0 "@justeattakeaway/pie-icons-webc": 0.19.1 "@justeattakeaway/pie-webc-core": 0.19.1 "@justeattakeaway/pie-wrapper-react": 0.14.0 @@ -5792,14 +5792,14 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-modal@0.40.0, @justeattakeaway/pie-modal@workspace:packages/components/pie-modal": +"@justeattakeaway/pie-modal@0.41.0, @justeattakeaway/pie-modal@workspace:packages/components/pie-modal": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-modal@workspace:packages/components/pie-modal" dependencies: "@custom-elements-manifest/analyzer": 0.9.0 "@justeat/pie-design-tokens": 6.0.0 - "@justeattakeaway/pie-button": 0.45.6 - "@justeattakeaway/pie-components-config": 0.12.0 + "@justeattakeaway/pie-button": 0.46.0 + "@justeattakeaway/pie-components-config": 0.13.0 "@justeattakeaway/pie-icon-button": 0.27.7 "@justeattakeaway/pie-icons-webc": 0.19.1 "@justeattakeaway/pie-spinner": 0.5.5 @@ -5817,7 +5817,7 @@ __metadata: resolution: "@justeattakeaway/pie-notification@workspace:packages/components/pie-notification" dependencies: "@custom-elements-manifest/analyzer": 0.9.0 - "@justeattakeaway/pie-components-config": 0.12.0 + "@justeattakeaway/pie-components-config": 0.13.0 "@justeattakeaway/pie-icon-button": 0.27.7 "@justeattakeaway/pie-icons-webc": 0.19.1 "@justeattakeaway/pie-webc-core": 0.19.1 @@ -5831,7 +5831,7 @@ __metadata: resolution: "@justeattakeaway/pie-spinner@workspace:packages/components/pie-spinner" dependencies: "@custom-elements-manifest/analyzer": 0.9.0 - "@justeattakeaway/pie-components-config": 0.12.0 + "@justeattakeaway/pie-components-config": 0.13.0 "@justeattakeaway/pie-webc-core": 0.19.1 "@justeattakeaway/pie-wrapper-react": 0.14.0 cem-plugin-module-file-extensions: 0.0.5 @@ -5843,7 +5843,7 @@ __metadata: resolution: "@justeattakeaway/pie-switch@workspace:packages/components/pie-switch" dependencies: "@custom-elements-manifest/analyzer": 0.9.0 - "@justeattakeaway/pie-components-config": 0.12.0 + "@justeattakeaway/pie-components-config": 0.13.0 "@justeattakeaway/pie-icons-webc": 0.19.1 "@justeattakeaway/pie-webc-core": 0.19.1 "@justeattakeaway/pie-wrapper-react": 0.14.0 @@ -5857,7 +5857,7 @@ __metadata: resolution: "@justeattakeaway/pie-tag@workspace:packages/components/pie-tag" dependencies: "@custom-elements-manifest/analyzer": 0.9.0 - "@justeattakeaway/pie-components-config": 0.12.0 + "@justeattakeaway/pie-components-config": 0.13.0 "@justeattakeaway/pie-icons-webc": 0.19.1 "@justeattakeaway/pie-webc-core": 0.19.1 "@justeattakeaway/pie-wrapper-react": 0.14.0 @@ -5869,12 +5869,12 @@ __metadata: version: 0.0.0-use.local resolution: "@justeattakeaway/pie-webc-core@workspace:packages/components/pie-webc-core" dependencies: - "@justeattakeaway/pie-components-config": 0.12.0 + "@justeattakeaway/pie-components-config": 0.13.0 lit: 3.1.2 languageName: unknown linkType: soft -"@justeattakeaway/pie-webc-testing@0.12.0, @justeattakeaway/pie-webc-testing@workspace:packages/components/pie-webc-testing": +"@justeattakeaway/pie-webc-testing@0.12.1, @justeattakeaway/pie-webc-testing@workspace:packages/components/pie-webc-testing": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-webc-testing@workspace:packages/components/pie-webc-testing" peerDependencies: @@ -5887,9 +5887,9 @@ __metadata: version: 0.0.0-use.local resolution: "@justeattakeaway/pie-webc@workspace:packages/components/pie-webc" dependencies: - "@justeattakeaway/pie-button": 0.45.6 - "@justeattakeaway/pie-components-config": 0.12.0 - "@justeattakeaway/pie-modal": 0.40.0 + "@justeattakeaway/pie-button": 0.46.0 + "@justeattakeaway/pie-components-config": 0.13.0 + "@justeattakeaway/pie-modal": 0.41.0 "@justeattakeaway/pie-webc-core": 0.19.1 languageName: unknown linkType: soft @@ -29120,7 +29120,7 @@ __metadata: "@justeattakeaway/browserslist-config-pie": 0.2.0 "@justeattakeaway/generator-pie-component": 0.20.1 "@justeattakeaway/pie-icons": 4.14.0 - "@justeattakeaway/pie-webc-testing": 0.12.0 + "@justeattakeaway/pie-webc-testing": 0.12.1 "@justeattakeaway/pie-wrapper-react": 0.14.0 "@justeattakeaway/stylelint-config-pie": 0.7.0 "@percy/cli": 1.26.3 @@ -29176,18 +29176,18 @@ __metadata: dependencies: "@justeat/pie-design-tokens": 6.0.0 "@justeattakeaway/pie-assistive-text": 0.2.4 - "@justeattakeaway/pie-button": 0.45.6 - "@justeattakeaway/pie-card": 0.17.5 + "@justeattakeaway/pie-button": 0.46.0 + "@justeattakeaway/pie-card": 0.18.0 "@justeattakeaway/pie-chip": 0.3.0 - "@justeattakeaway/pie-cookie-banner": 0.17.6 + "@justeattakeaway/pie-cookie-banner": 0.18.0 "@justeattakeaway/pie-css": 0.11.0 "@justeattakeaway/pie-divider": 0.12.4 "@justeattakeaway/pie-form-label": 0.12.2 "@justeattakeaway/pie-icon-button": 0.27.7 "@justeattakeaway/pie-icons-webc": 0.19.1 "@justeattakeaway/pie-input": 0.14.0 - "@justeattakeaway/pie-link": 0.15.4 - "@justeattakeaway/pie-modal": 0.40.0 + "@justeattakeaway/pie-link": 0.16.0 + "@justeattakeaway/pie-modal": 0.41.0 "@justeattakeaway/pie-notification": 0.3.5 "@justeattakeaway/pie-spinner": 0.5.5 "@justeattakeaway/pie-switch": 0.27.3 @@ -38174,7 +38174,7 @@ __metadata: "@angular/platform-browser": 15.2.0 "@angular/platform-browser-dynamic": 15.2.0 "@angular/router": 15.2.0 - "@justeattakeaway/pie-button": 0.45.6 + "@justeattakeaway/pie-button": 0.46.0 "@justeattakeaway/pie-css": 0.11.0 rxjs: 7.8.0 tslib: 2.3.0 @@ -38194,8 +38194,8 @@ __metadata: "@babel/plugin-transform-runtime": 7.21.4 "@babel/preset-env": 7.21.4 "@babel/preset-react": 7.18.6 - "@justeattakeaway/pie-button": 0.45.6 - "@justeattakeaway/pie-cookie-banner": 0.17.6 + "@justeattakeaway/pie-button": 0.46.0 + "@justeattakeaway/pie-cookie-banner": 0.18.0 "@justeattakeaway/pie-css": 0.11.0 "@lit/react": 1.0.2 babel-loader: 8 @@ -38212,7 +38212,7 @@ __metadata: version: 0.0.0-use.local resolution: "wc-next13@workspace:apps/examples/wc-next13" dependencies: - "@justeattakeaway/pie-button": 0.45.6 + "@justeattakeaway/pie-button": 0.46.0 "@justeattakeaway/pie-css": 0.11.0 "@lit-labs/nextjs": 0.1.3 "@lit/react": 1.0.2 @@ -38234,7 +38234,7 @@ __metadata: "@babel/plugin-transform-logical-assignment-operators": 7.22.11 "@babel/plugin-transform-nullish-coalescing-operator": 7.22.11 "@babel/plugin-transform-optional-chaining": 7.23.0 - "@justeattakeaway/pie-button": 0.45.6 + "@justeattakeaway/pie-button": 0.46.0 "@justeattakeaway/pie-css": 0.11.0 babel-loader: 8 core-js: 3.30.0 @@ -38249,7 +38249,7 @@ __metadata: version: 0.0.0-use.local resolution: "wc-nuxt3@workspace:apps/examples/wc-nuxt3" dependencies: - "@justeattakeaway/pie-button": 0.45.6 + "@justeattakeaway/pie-button": 0.46.0 "@justeattakeaway/pie-css": 0.11.0 "@types/node": 18 nuxt: 3.4.3 @@ -38261,7 +38261,7 @@ __metadata: version: 0.0.0-use.local resolution: "wc-react17@workspace:apps/examples/wc-react17" dependencies: - "@justeattakeaway/pie-button": 0.45.6 + "@justeattakeaway/pie-button": 0.46.0 "@justeattakeaway/pie-css": 0.11.0 "@lit/react": 1.0.2 react: 17.0.2 @@ -38274,7 +38274,7 @@ __metadata: version: 0.0.0-use.local resolution: "wc-react18@workspace:apps/examples/wc-react18" dependencies: - "@justeattakeaway/pie-button": 0.45.6 + "@justeattakeaway/pie-button": 0.46.0 "@justeattakeaway/pie-css": 0.11.0 "@lit/react": 1.0.2 react: 18.2.0 @@ -38288,11 +38288,11 @@ __metadata: resolution: "wc-vanilla@workspace:apps/examples/wc-vanilla" dependencies: "@justeat/pie-design-tokens": 6.0.0 - "@justeattakeaway/pie-button": 0.45.6 + "@justeattakeaway/pie-button": 0.46.0 "@justeattakeaway/pie-css": 0.11.0 "@justeattakeaway/pie-icon-button": 0.27.7 "@justeattakeaway/pie-icons-webc": 0.19.1 - "@justeattakeaway/pie-modal": 0.40.0 + "@justeattakeaway/pie-modal": 0.41.0 vite: 4.5.2 languageName: unknown linkType: soft @@ -38301,7 +38301,7 @@ __metadata: version: 0.0.0-use.local resolution: "wc-vue3@workspace:apps/examples/wc-vue3" dependencies: - "@justeattakeaway/pie-button": 0.45.6 + "@justeattakeaway/pie-button": 0.46.0 "@justeattakeaway/pie-css": 0.11.0 "@types/node": 18.15.11 "@vitejs/plugin-vue": 4.0.0 From a15e998d5d565d484e90e09e287a6a595058bacc Mon Sep 17 00:00:00 2001 From: Ben Siggery <14013357+siggerzz@users.noreply.github.com> Date: Thu, 21 Mar 2024 16:30:56 +0000 Subject: [PATCH 2/4] revert(pie-monorepo): DSW-000 revert turbo update (#1346) chore(pie-monorepo): DSW-000 fix commits --- .changeset/long-peaches-learn.md | 5 +++ package.json | 2 +- yarn.lock | 58 ++++++++++++++++---------------- 3 files changed, 35 insertions(+), 30 deletions(-) create mode 100644 .changeset/long-peaches-learn.md diff --git a/.changeset/long-peaches-learn.md b/.changeset/long-peaches-learn.md new file mode 100644 index 0000000000..8bc0683479 --- /dev/null +++ b/.changeset/long-peaches-learn.md @@ -0,0 +1,5 @@ +--- +"pie-monorepo": patch +--- + +[Changed] - Reverted `turbo` back to `1.10.16`. Our current caused a bug that resulted in the `check-change-type` CI job not corretly detecting changes in the repo, resulting in deployments not being triggered. diff --git a/package.json b/package.json index 676322b6f2..a2a0ce0090 100644 --- a/package.json +++ b/package.json @@ -110,7 +110,7 @@ "stylelint-config-standard-scss": "13.0.0", "stylelint-order": "6.0.4", "ts-node": "10.9.1", - "turbo": "1.12.4", + "turbo": "1.10.16", "typescript": "5.1.3", "vite": "4.5.2", "vite-plugin-dts": "2.3.0", diff --git a/yarn.lock b/yarn.lock index ace893aa96..69c3659f94 100644 --- a/yarn.lock +++ b/yarn.lock @@ -29159,7 +29159,7 @@ __metadata: stylelint-config-standard-scss: 13.0.0 stylelint-order: 6.0.4 ts-node: 10.9.1 - turbo: 1.12.4 + turbo: 1.10.16 typescript: 5.1.3 vite: 4.5.2 vite-plugin-dts: 2.3.0 @@ -36303,58 +36303,58 @@ __metadata: languageName: node linkType: hard -"turbo-darwin-64@npm:1.12.4": - version: 1.12.4 - resolution: "turbo-darwin-64@npm:1.12.4" +"turbo-darwin-64@npm:1.10.16": + version: 1.10.16 + resolution: "turbo-darwin-64@npm:1.10.16" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"turbo-darwin-arm64@npm:1.12.4": - version: 1.12.4 - resolution: "turbo-darwin-arm64@npm:1.12.4" +"turbo-darwin-arm64@npm:1.10.16": + version: 1.10.16 + resolution: "turbo-darwin-arm64@npm:1.10.16" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"turbo-linux-64@npm:1.12.4": - version: 1.12.4 - resolution: "turbo-linux-64@npm:1.12.4" +"turbo-linux-64@npm:1.10.16": + version: 1.10.16 + resolution: "turbo-linux-64@npm:1.10.16" conditions: os=linux & cpu=x64 languageName: node linkType: hard -"turbo-linux-arm64@npm:1.12.4": - version: 1.12.4 - resolution: "turbo-linux-arm64@npm:1.12.4" +"turbo-linux-arm64@npm:1.10.16": + version: 1.10.16 + resolution: "turbo-linux-arm64@npm:1.10.16" conditions: os=linux & cpu=arm64 languageName: node linkType: hard -"turbo-windows-64@npm:1.12.4": - version: 1.12.4 - resolution: "turbo-windows-64@npm:1.12.4" +"turbo-windows-64@npm:1.10.16": + version: 1.10.16 + resolution: "turbo-windows-64@npm:1.10.16" conditions: os=win32 & cpu=x64 languageName: node linkType: hard -"turbo-windows-arm64@npm:1.12.4": - version: 1.12.4 - resolution: "turbo-windows-arm64@npm:1.12.4" +"turbo-windows-arm64@npm:1.10.16": + version: 1.10.16 + resolution: "turbo-windows-arm64@npm:1.10.16" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"turbo@npm:1.12.4": - version: 1.12.4 - resolution: "turbo@npm:1.12.4" +"turbo@npm:1.10.16": + version: 1.10.16 + resolution: "turbo@npm:1.10.16" dependencies: - turbo-darwin-64: 1.12.4 - turbo-darwin-arm64: 1.12.4 - turbo-linux-64: 1.12.4 - turbo-linux-arm64: 1.12.4 - turbo-windows-64: 1.12.4 - turbo-windows-arm64: 1.12.4 + turbo-darwin-64: 1.10.16 + turbo-darwin-arm64: 1.10.16 + turbo-linux-64: 1.10.16 + turbo-linux-arm64: 1.10.16 + turbo-windows-64: 1.10.16 + turbo-windows-arm64: 1.10.16 dependenciesMeta: turbo-darwin-64: optional: true @@ -36370,7 +36370,7 @@ __metadata: optional: true bin: turbo: bin/turbo - checksum: d387fb91af6ed0ea925201d3858180353c5d93be564829de2e22f48fe57124d1347d2abb8b99215901a305d4c6da4a0daf4c28afeec20fa1bc1ae2762c3b8d3d + checksum: 69d1892593449b264e0bd48b851317a743016ab62cf470e7293b2cc3781240e863c48232c89f65a5a4ce97eb791ca550b201593449350da073db07703a19cfa5 languageName: node linkType: hard From 130f1aaa32ccd464b213febf75dd147e6b8aecc3 Mon Sep 17 00:00:00 2001 From: Jamie Maguire Date: Fri, 22 Mar 2024 10:00:59 +0000 Subject: [PATCH 3/4] chore(pie-monorepo): DSW-1779 align tsconfig with Lit (#1341) * change compilation target * changeset * changesets * trigger deploy * undo --- .changeset/pink-spies-smash.md | 21 +++++++++++++++++++++ .changeset/selfish-cooks-travel.md | 5 +++++ configs/pie-components-config/tsconfig.json | 7 ++++--- 3 files changed, 30 insertions(+), 3 deletions(-) create mode 100644 .changeset/pink-spies-smash.md create mode 100644 .changeset/selfish-cooks-travel.md diff --git a/.changeset/pink-spies-smash.md b/.changeset/pink-spies-smash.md new file mode 100644 index 0000000000..ac263a0d96 --- /dev/null +++ b/.changeset/pink-spies-smash.md @@ -0,0 +1,21 @@ +--- +"@justeattakeaway/pie-assistive-text": minor +"@justeattakeaway/pie-button": minor +"@justeattakeaway/pie-card": minor +"@justeattakeaway/pie-chip": minor +"@justeattakeaway/pie-cookie-banner": minor +"@justeattakeaway/pie-divider": minor +"@justeattakeaway/pie-form-label": minor +"@justeattakeaway/pie-icon-button": minor +"@justeattakeaway/pie-input": minor +"@justeattakeaway/pie-link": minor +"@justeattakeaway/pie-modal": minor +"@justeattakeaway/pie-notification": minor +"@justeattakeaway/pie-spinner": minor +"@justeattakeaway/pie-switch": minor +"@justeattakeaway/pie-tag": minor +"@justeattakeaway/pie-webc-core": minor +"@justeattakeaway/pie-icons-webc": minor +--- + +[Changed] - Update tsconfig target to es2021 diff --git a/.changeset/selfish-cooks-travel.md b/.changeset/selfish-cooks-travel.md new file mode 100644 index 0000000000..855e30b84b --- /dev/null +++ b/.changeset/selfish-cooks-travel.md @@ -0,0 +1,5 @@ +--- +"@justeattakeaway/pie-components-config": minor +--- + +[Changed] - Updated TSConfig file with es2021 target diff --git a/configs/pie-components-config/tsconfig.json b/configs/pie-components-config/tsconfig.json index 606a8cebbe..f5b501f8d3 100644 --- a/configs/pie-components-config/tsconfig.json +++ b/configs/pie-components-config/tsconfig.json @@ -1,8 +1,8 @@ { "compilerOptions": { - "target": "ES6", + "target": "es2021", "module": "ES2022", - "lib": ["es2020", "DOM", "DOM.Iterable"], + "lib": ["es2021", "DOM", "DOM.Iterable"], "declaration": true, "declarationMap": true, "sourceMap": true, @@ -21,7 +21,8 @@ "forceConsistentCasingInFileNames": true, "allowImportingTsExtensions": true, "noEmit": true, - "types": ["vitest/globals"] + "types": ["vitest/globals"], + "useDefineForClassFields": false }, "exclude": [] } From 74d8c1680ca632ff21823dbe1d61ef7bf22a36c8 Mon Sep 17 00:00:00 2001 From: Raouf Date: Fri, 22 Mar 2024 12:01:23 +0100 Subject: [PATCH 4/4] feat(pie-docs): DSW-1639 add the chip docs (#1330) * feat(pie-docs): DSW-1639 add the chop overview page * fix(pie-docs): DSW-1639 update snapshots * fix(pie-docs): DSW-1639 update content * fix(pie-docs): DSW-1639 address some PR comments * fix(pie-docs): DSW-1639 address some PR comments * fix(pie-docs): DSW-1639 update svgs and address PR comments * fix(pie-docs): DSW-1639 update actions svg * fix(pie-docs): DSW-1639 update content * fix(pie-docs): DSW-1639 update an alt tag * feat(pie-docs): DSW-1639 Add the chip code page (#1331) * feat(pie-docs): DSW-1639 add the code page for the chip component * feat(pie-docs): DSW-1639 add the code page for the chip component * fix(pie-docs): DSW-1639 address PR comments * fix(pie-docs): DSW-1639 update content --------- Co-authored-by: Xander Marjoram * fix(pie-docs): DSW-1639 update images --------- Co-authored-by: Xander Marjoram --- .changeset/brown-rivers-work.md | 6 + .changeset/gorgeous-olives-admire.md | 5 + .../assets/img/components/chip/anatomy.svg | 1 + .../img/components/chip/example-ltr-menu.svg | 1 + .../img/components/chip/example-ltr-offer.svg | 43 +++ .../img/components/chip/example-rtl-menu.svg | 1 + .../img/components/chip/example-rtl-offer.svg | 43 +++ .../chip/interactive-state-active.svg | 1 + .../chip/interactive-state-default.svg | 1 + .../chip/interactive-state-disabled.svg | 1 + .../chip/interactive-state-focus.svg | 64 ++++ .../chip/interactive-state-hover.svg | 1 + .../chip/interactive-state-loading.svg | 1 + .../img/components/chip/layout-double-row.svg | 76 ++++ .../img/components/chip/layout-single-row.svg | 40 +++ .../components/chip/modifier-close-icon.svg | 22 ++ .../img/components/chip/modifier-icon.svg | 1 + .../components/chip/modifier-tick-icon.svg | 13 + .../src/assets/img/components/chip/size.svg | 1 + .../assets/img/components/chip/structure.svg | 1 + .../img/components/chip/usage-action.svg | 33 ++ .../img/components/chip/usage-choice.svg | 1 + .../img/components/chip/usage-filter.svg | 1 + .../img/components/chip/usage-input.svg | 43 +++ .../img/components/chip/variation-default.svg | 1 + .../img/components/chip/variation-ghost.svg | 1 + .../img/components/chip/variation-outline.svg | 1 + apps/pie-docs/src/componentStatusData.js | 3 +- apps/pie-docs/src/components/chip/chip.md | 27 +- .../pie-docs/src/components/chip/code/code.md | 135 ++++++++ .../src/components/chip/code/props.json | 65 ++++ .../src/components/chip/code/slots.json | 19 + .../src/components/chip/overview/overview.md | 326 ++++++++++++++++++ .../src/components/tag/code/props.json | 2 +- .../snapshots/expected-routes.snapshot.json | 3 +- .../stories/pie-chip-docs/variants.mdx | 16 + packages/components/pie-chip/README.md | 85 +---- packages/components/pie-tag/README.md | 2 +- 38 files changed, 977 insertions(+), 110 deletions(-) create mode 100644 .changeset/brown-rivers-work.md create mode 100644 .changeset/gorgeous-olives-admire.md create mode 100644 apps/pie-docs/src/assets/img/components/chip/anatomy.svg create mode 100644 apps/pie-docs/src/assets/img/components/chip/example-ltr-menu.svg create mode 100644 apps/pie-docs/src/assets/img/components/chip/example-ltr-offer.svg create mode 100644 apps/pie-docs/src/assets/img/components/chip/example-rtl-menu.svg create mode 100644 apps/pie-docs/src/assets/img/components/chip/example-rtl-offer.svg create mode 100644 apps/pie-docs/src/assets/img/components/chip/interactive-state-active.svg create mode 100644 apps/pie-docs/src/assets/img/components/chip/interactive-state-default.svg create mode 100644 apps/pie-docs/src/assets/img/components/chip/interactive-state-disabled.svg create mode 100644 apps/pie-docs/src/assets/img/components/chip/interactive-state-focus.svg create mode 100644 apps/pie-docs/src/assets/img/components/chip/interactive-state-hover.svg create mode 100644 apps/pie-docs/src/assets/img/components/chip/interactive-state-loading.svg create mode 100644 apps/pie-docs/src/assets/img/components/chip/layout-double-row.svg create mode 100644 apps/pie-docs/src/assets/img/components/chip/layout-single-row.svg create mode 100644 apps/pie-docs/src/assets/img/components/chip/modifier-close-icon.svg create mode 100644 apps/pie-docs/src/assets/img/components/chip/modifier-icon.svg create mode 100644 apps/pie-docs/src/assets/img/components/chip/modifier-tick-icon.svg create mode 100644 apps/pie-docs/src/assets/img/components/chip/size.svg create mode 100644 apps/pie-docs/src/assets/img/components/chip/structure.svg create mode 100644 apps/pie-docs/src/assets/img/components/chip/usage-action.svg create mode 100644 apps/pie-docs/src/assets/img/components/chip/usage-choice.svg create mode 100644 apps/pie-docs/src/assets/img/components/chip/usage-filter.svg create mode 100644 apps/pie-docs/src/assets/img/components/chip/usage-input.svg create mode 100644 apps/pie-docs/src/assets/img/components/chip/variation-default.svg create mode 100644 apps/pie-docs/src/assets/img/components/chip/variation-ghost.svg create mode 100644 apps/pie-docs/src/assets/img/components/chip/variation-outline.svg create mode 100644 apps/pie-docs/src/components/chip/code/code.md create mode 100644 apps/pie-docs/src/components/chip/code/props.json create mode 100644 apps/pie-docs/src/components/chip/code/slots.json create mode 100644 apps/pie-docs/src/components/chip/overview/overview.md create mode 100644 apps/pie-storybook/stories/pie-chip-docs/variants.mdx diff --git a/.changeset/brown-rivers-work.md b/.changeset/brown-rivers-work.md new file mode 100644 index 0000000000..717f9a775a --- /dev/null +++ b/.changeset/brown-rivers-work.md @@ -0,0 +1,6 @@ +--- +"@justeattakeaway/pie-chip": minor +"pie-docs": minor +--- + +[Added] - the code page for the chip component diff --git a/.changeset/gorgeous-olives-admire.md b/.changeset/gorgeous-olives-admire.md new file mode 100644 index 0000000000..45bee91223 --- /dev/null +++ b/.changeset/gorgeous-olives-admire.md @@ -0,0 +1,5 @@ +--- +"pie-docs": minor +--- + +[Added] - the chip overview page diff --git a/apps/pie-docs/src/assets/img/components/chip/anatomy.svg b/apps/pie-docs/src/assets/img/components/chip/anatomy.svg new file mode 100644 index 0000000000..de0d2ccfe0 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/chip/anatomy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/chip/example-ltr-menu.svg b/apps/pie-docs/src/assets/img/components/chip/example-ltr-menu.svg new file mode 100644 index 0000000000..4c20b48274 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/chip/example-ltr-menu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/chip/example-ltr-offer.svg b/apps/pie-docs/src/assets/img/components/chip/example-ltr-offer.svg new file mode 100644 index 0000000000..1f83463c42 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/chip/example-ltr-offer.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/chip/example-rtl-menu.svg b/apps/pie-docs/src/assets/img/components/chip/example-rtl-menu.svg new file mode 100644 index 0000000000..6819615ae2 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/chip/example-rtl-menu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/chip/example-rtl-offer.svg b/apps/pie-docs/src/assets/img/components/chip/example-rtl-offer.svg new file mode 100644 index 0000000000..b97e453519 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/chip/example-rtl-offer.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/chip/interactive-state-active.svg b/apps/pie-docs/src/assets/img/components/chip/interactive-state-active.svg new file mode 100644 index 0000000000..87965d973c --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/chip/interactive-state-active.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/chip/interactive-state-default.svg b/apps/pie-docs/src/assets/img/components/chip/interactive-state-default.svg new file mode 100644 index 0000000000..7d94928725 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/chip/interactive-state-default.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/chip/interactive-state-disabled.svg b/apps/pie-docs/src/assets/img/components/chip/interactive-state-disabled.svg new file mode 100644 index 0000000000..6c0a6dc3a3 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/chip/interactive-state-disabled.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/chip/interactive-state-focus.svg b/apps/pie-docs/src/assets/img/components/chip/interactive-state-focus.svg new file mode 100644 index 0000000000..deddc738f9 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/chip/interactive-state-focus.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/chip/interactive-state-hover.svg b/apps/pie-docs/src/assets/img/components/chip/interactive-state-hover.svg new file mode 100644 index 0000000000..07a45ea609 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/chip/interactive-state-hover.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/chip/interactive-state-loading.svg b/apps/pie-docs/src/assets/img/components/chip/interactive-state-loading.svg new file mode 100644 index 0000000000..2f10259b80 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/chip/interactive-state-loading.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/chip/layout-double-row.svg b/apps/pie-docs/src/assets/img/components/chip/layout-double-row.svg new file mode 100644 index 0000000000..581585ea2a --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/chip/layout-double-row.svg @@ -0,0 +1,76 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/chip/layout-single-row.svg b/apps/pie-docs/src/assets/img/components/chip/layout-single-row.svg new file mode 100644 index 0000000000..9b0886c7a4 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/chip/layout-single-row.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/chip/modifier-close-icon.svg b/apps/pie-docs/src/assets/img/components/chip/modifier-close-icon.svg new file mode 100644 index 0000000000..baeab319c5 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/chip/modifier-close-icon.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/chip/modifier-icon.svg b/apps/pie-docs/src/assets/img/components/chip/modifier-icon.svg new file mode 100644 index 0000000000..65103d0b6a --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/chip/modifier-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/chip/modifier-tick-icon.svg b/apps/pie-docs/src/assets/img/components/chip/modifier-tick-icon.svg new file mode 100644 index 0000000000..7ecec2d888 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/chip/modifier-tick-icon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/chip/size.svg b/apps/pie-docs/src/assets/img/components/chip/size.svg new file mode 100644 index 0000000000..5f9744ebf0 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/chip/size.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/chip/structure.svg b/apps/pie-docs/src/assets/img/components/chip/structure.svg new file mode 100644 index 0000000000..56175c7c6d --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/chip/structure.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/chip/usage-action.svg b/apps/pie-docs/src/assets/img/components/chip/usage-action.svg new file mode 100644 index 0000000000..79b229e218 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/chip/usage-action.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/chip/usage-choice.svg b/apps/pie-docs/src/assets/img/components/chip/usage-choice.svg new file mode 100644 index 0000000000..28b37e063f --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/chip/usage-choice.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/chip/usage-filter.svg b/apps/pie-docs/src/assets/img/components/chip/usage-filter.svg new file mode 100644 index 0000000000..c87e1c10fc --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/chip/usage-filter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/chip/usage-input.svg b/apps/pie-docs/src/assets/img/components/chip/usage-input.svg new file mode 100644 index 0000000000..1a5cb2d178 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/chip/usage-input.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/chip/variation-default.svg b/apps/pie-docs/src/assets/img/components/chip/variation-default.svg new file mode 100644 index 0000000000..d3ab09c666 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/chip/variation-default.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/chip/variation-ghost.svg b/apps/pie-docs/src/assets/img/components/chip/variation-ghost.svg new file mode 100644 index 0000000000..5fc943055d --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/chip/variation-ghost.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/chip/variation-outline.svg b/apps/pie-docs/src/assets/img/components/chip/variation-outline.svg new file mode 100644 index 0000000000..c5f416402a --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/chip/variation-outline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/componentStatusData.js b/apps/pie-docs/src/componentStatusData.js index c5251cf713..2883e4e5c8 100644 --- a/apps/pie-docs/src/componentStatusData.js +++ b/apps/pie-docs/src/componentStatusData.js @@ -515,7 +515,8 @@ const rows = [ }, { resource: resourceTypes.WEB_COMPONENTS, - status: statusTypes.PLANNED, + link: 'https://webc.pie.design/?path=/story/chip--default', + status: statusTypes.ALPHA, }, { resource: resourceTypes.VUE, diff --git a/apps/pie-docs/src/components/chip/chip.md b/apps/pie-docs/src/components/chip/chip.md index 3ae775dfe1..e021314ffb 100644 --- a/apps/pie-docs/src/components/chip/chip.md +++ b/apps/pie-docs/src/components/chip/chip.md @@ -1,31 +1,8 @@ --- eleventyNavigation: - key: 'Chip' + key: Chip parent: Components order: 13 + url: /components/chip/overview/ --- -## Overview - -The purpose of chips is to provide a visual representation of a specific entity or attribute, such as a selected option or a labelled category. Chips can also be interactive, allowing users to remove or modify the selected choices. - -Chips are commonly used in various contexts, including filtering options, search results or any situation where concise and visually distinct information needs to be displayed. - - -{% contentPageImage { - src:"../../assets/img/components/chip/overview.svg", - alt: "A group of chips that are horizontally stacked together." -} %} - ---- - -## Resources - -{% notification { - type: "warning", - message: "We’re currently working on updating our Chip documentation, please see the resources below." -} %} - -{% resourceTable { - componentName: 'Chip' -} %} diff --git a/apps/pie-docs/src/components/chip/code/code.md b/apps/pie-docs/src/components/chip/code/code.md new file mode 100644 index 0000000000..f00bb2d3c6 --- /dev/null +++ b/apps/pie-docs/src/components/chip/code/code.md @@ -0,0 +1,135 @@ +--- +eleventyNavigation: + key: Code + parent: Chip + order: 3 +shouldShowContents: true +eleventyComputed: + props: "{% include './props.json' %}" + slots: "{% include './slots.json' %}" +--- + +## Overview + +

+ + GitHub Workflow Status + +

+ +`pie-chip` is a Web Component built using the Lit library. It offers a simple and accessible chip component for web applications. + +This component can be easily integrated into various frontend frameworks and customized through a set of properties. + +## Installation + +To install `pie-chip` in your application, run the following on your command line: + +```shell +# npm +$ npm i @justeattakeaway/pie-chip +``` + +```shell +# yarn +$ yarn add @justeattakeaway/pie-chip +``` + +{% notification { + type: "neutral", + iconName: "link", + message: "For more information on using PIE components as part of an application, check out the [Getting Started Guide.](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components)." +} %} + +## Playground + + + +## Variants + + + +## Props + +{% componentDetailsTable { + tableData: props +} %} + +## Slots + +{% componentDetailsTable { + tableData: slots +} %} + +### Using `pie-icons-webc` with the `pie-chip` icon slot + +We recommend using `pie-icons-webc` when using the `icon` slot. Here is an example of how you would do this: + +```html + + + + String + +``` + +## Examples + +For HTML: + +```js +// import as module into a js file e.g. main.js +import '@justeattakeaway/pie-chip' +``` + +```html + +String + +``` + +For Native JS Applications, Vue, Angular, Svelte etc.: + +```js +// Vue templates (using Nuxt 3) +import { PieChip } from '@justeattakeaway/pie-chip'; + +String +``` + +For React Applications: + +```js +// React templates (using Next 13) +import { PieChip } from '@justeattakeaway/pie-chip/dist/react'; + +String + +``` + +{% notification { + type: "neutral", + iconName: "link", + message: "For more examples, see [here](https://github.com/justeattakeaway/pie-aperture/tree/main)." +} %} + +## Changelog + +{% notification { + type: "neutral", + iconName: "link", + message: "See [here](https://github.com/justeattakeaway/pie/blob/main/packages/components/pie-chip/CHANGELOG.md)." +} %} diff --git a/apps/pie-docs/src/components/chip/code/props.json b/apps/pie-docs/src/components/chip/code/props.json new file mode 100644 index 0000000000..4a91c30503 --- /dev/null +++ b/apps/pie-docs/src/components/chip/code/props.json @@ -0,0 +1,65 @@ +{ + "headings": ["Prop", "Options", "Description", "Default"], + "rows": [ + [ + "variant", + { + "type": "code", + "item": ["\"default\"", "\"outline\"", "\"ghost\""] + }, + "Sets the variant of the chip.", + { + "type": "code", + "item": ["\"default\""] + } + ], + [ + "disabled", + { + "type": "code", + "item": ["true", "false"] + }, + "if true, disables the chip.", + { + "type": "code", + "item": ["false"] + } + ], + [ + "isSelected", + { + "type": "code", + "item": ["true", "false"] + }, + "If `true`, the chip component will apply the selected styles.", + { + "type": "code", + "item": ["false"] + } + ], + [ + "isLoading", + { + "type": "code", + "item": ["true", "false"] + }, + "if true, displays a loading indicator inside the chip.", + { + "type": "code", + "item": ["false"] + } + ], + [ + "aria", + { + "type": "code", + "item": ["{ label?: string, close?: string }"] + }, + "Aria properties for the chip to help with making it accessible.", + { + "type": "code", + "item": ["undefined"] + } + ] + ] +} diff --git a/apps/pie-docs/src/components/chip/code/slots.json b/apps/pie-docs/src/components/chip/code/slots.json new file mode 100644 index 0000000000..8fa1fde1e0 --- /dev/null +++ b/apps/pie-docs/src/components/chip/code/slots.json @@ -0,0 +1,19 @@ +{ + "headings": ["Slot", "Description"], + "rows": [ + [ + { + "type": "code", + "item": ["default"] + }, + "The default slot is used to pass text into the chip component." + ], + [ + { + "type": "code", + "item": ["icon"] + }, + "Used to pass an icon into the chip component." + ] + ] +} diff --git a/apps/pie-docs/src/components/chip/overview/overview.md b/apps/pie-docs/src/components/chip/overview/overview.md new file mode 100644 index 0000000000..87b86858e9 --- /dev/null +++ b/apps/pie-docs/src/components/chip/overview/overview.md @@ -0,0 +1,326 @@ +--- +eleventyNavigation: + key: Overview + parent: Chip + order: 1 +shouldShowContents: true +--- + +## Overview + +The purpose of chips is to provide a visual representation of a specific entity or attribute, such as a selected option or a labelled category. Chips can also be interactive, allowing users to remove or modify the selected choices. + +Chips are commonly used in various contexts, including filtering options, search results or any situation where concise and visually distinct information needs to be displayed. + +{% contentPageImage { + src:"../../../assets/img/components/chip/overview.svg", + alt: "A group of chips that are horizontally stacked together." +} %} + +--- + +## Dos and Don’ts + +{% usage { + do: { + type: usageTypes.list, + items: [ + "Chips should appear dynamically as a group of multiple interactive elements." + ] + }, + dont: { + type: usageTypes.list, + items: [ + "Don’t use when an interaction is not required, use a [tag](/components/tag/) if needed." + ] + } +} %} + +___ + +## Anatomy + +{% contentPageImage { + src:"../../../assets/img/components/chip/anatomy.svg", + alt: "Anatomy of the chip component.", + width: 210 +} %} + +{% list { + type: listTypes.ordered, + items: [ + "**Icon (Optional):** Non-interactive icon that can be used to visually support the string.", + "**String:** Text label informing the user of the option/selection.", + "**Close (optional)**: Allows the Chip to be dismissible, but the application should provide a way for them to easily add it back." + ] +} %} + +--- + +## Variations + +### Default + +{% contentPageImage { + src:"../../../assets/img/components/chip/variation-default.svg", + alt: "The default variant of the chip component.", + width: 63, + variant: "secondary" +} %} + +### Outline + +{% contentPageImage { + src:"../../../assets/img/components/chip/variation-outline.svg", + alt: "The outline variant of the chip component.", + width: 63 +} %} + +### Ghost + +{% contentPageImage { + src:"../../../assets/img/components/chip/variation-ghost.svg", + alt: "The ghost variant of the chip component.", + width: 63 +} %} + +--- + +## Modifiers + +### Icon + +Icons are always placed in a leading position. + +{% contentPageImage { + src:"../../../assets/img/components/chip/modifier-icon.svg", + alt: "A chip component with a placeholder icon on the left.", + width: 87 +} %} + +### Tick icon + +Tick icon can be added for clarity and decision support when using chips to filter or multi-select to the selected state. + +{% contentPageImage { + src:"../../../assets/img/components/chip/modifier-tick-icon.svg", + alt: "A chip component with a tick icon on the left.", + width: 63 +} %} + +### Close icon + +Close icon can be added to the selected state to allow users to remove the selection or filter. + +{% contentPageImage { + src:"../../../assets/img/components/chip/modifier-close-icon.svg", + alt: "A chip component with a close icon on the right.", + width: 63 +} %} + +--- + +## Size + +Chips have a minimum width of 48px. + +{% contentPageImage { + src:"../../../assets/img/components/chip/size.svg", + alt: "A chip component with the value of 1.", + width: 48 +} %} + +--- + +## Content + +- Keep the strings short so they are easy to read and scan. +- Use sentence case. + +--- + +## Layout + +If there is a Chip grouping, by default they are laid out horizontally and stack if required. A spacing of 8px is used horizontally, and 12px for vertical stacking. + +{% contentLayout %} + {% contentItem %} + {% contentPageImage { + src: "../../../assets/img/components/chip/layout-single-row.svg", + width: 237, + alt: "A group of chip components flowing into multiple rows because the container isn’t wide enough.", + variant: "secondary" + } %} + {% endcontentItem %} + {% contentItem %} + {% contentPageImage { + src: "../../../assets/img/components/chip/layout-double-row.svg", + width: 237, + alt: "A group of chip components laid out horizontally and stacked", + variant: "secondary" + } %} + {% endcontentItem %} +{% endcontentLayout %} + +--- + +## Usage + +### Input + +Input chips usually represent an entity or different attributes. They can be added or removed within input fields. + +{% contentPageImage { + src:"../../../assets/img/components/chip/usage-input.svg", + alt: "Chip components used in an input field", + width: 256 +} %} + +### Choice + +Choice chips allow users to select one or more chips from a set of options (minimum of 2). + +{% contentPageImage { + src:"../../../assets/img/components/chip/usage-choice.svg", + alt: "Chip components corresponding to a different weekday", + width: 274, + variant: "secondary" +} %} + +### Filter + +Filter chips allow users to refine content by selecting one or more chips from a set. + +{% contentPageImage { + src:"../../../assets/img/components/chip/usage-filter.svg", + alt: "Chip components representing various cuisines", + width: 297 +} %} + +### Action + +Action chips trigger actions related to primary content. + +{% contentPageImage { + src:"../../../assets/img/components/chip/usage-action.svg", + alt: "A chip component with a heart icon, allowing users to save an entity.", + width: 266, + variant: "secondary" +} %} + +___ + +## Interactive states + +Outlines the atomic level interactive elements for the component. + +{% contentLayout %} + {% contentItem %} +

Default

+ {% contentPageImage { + src: "../../../assets/img/components/chip/interactive-state-default.svg", + width: 63, + alt: "The default state of the chip component." + } %} + {% endcontentItem %} + {% contentItem %} +

Hover

+ {% contentPageImage { + src: "../../../assets/img/components/chip/interactive-state-hover.svg", + width: 63, + alt: "The hover state of the chip component." + } %} + {% endcontentItem %} + {% contentItem %} +

Active

+ {% contentPageImage { + src: "../../../assets/img/components/chip/interactive-state-active.svg", + width: 63, + alt: "The active state of the chip component." + } %} + {% endcontentItem %} + {% contentItem %} +

Focus

+ {% contentPageImage { + src: "../../../assets/img/components/chip/interactive-state-focus.svg", + width: 63, + alt: "The focus state of the chip component." + } %} + {% endcontentItem %} + {% contentItem %} +

Disabled

+ {% contentPageImage { + src: "../../../assets/img/components/chip/interactive-state-disabled.svg", + width: 63, + alt: "The disabled state of the chip component." + } %} + {% endcontentItem %} + {% contentItem %} +

Loading

+ {% contentPageImage { + src: "../../../assets/img/components/chip/interactive-state-loading.svg", + width: 63, + alt: "The loading state of the chip component." + } %} + {% endcontentItem %} +{% endcontentLayout %} + +___ + +## Examples + +Outlines the atomic level interactive elements for the component. + +### LTR examples + +Here are some examples of chips in a left-to-right context: + +{% contentLayout %} + {% contentItem %} + {% contentPageImage { + src: "../../../assets/img/components/chip/example-ltr-menu.svg", + width: 329, + alt: "A left-to-right example of a cuisines filter using the chip components" + } %} + {% endcontentItem %} + {% contentItem %} + {% contentPageImage { + src: "../../../assets/img/components/chip/example-ltr-offer.svg", + width: 273, + alt: "A left-to-right example of an offers filter using the chip components" + } %} + {% endcontentItem %} +{% endcontentLayout %} + +### RTL examples + +Here are some examples of chips in a right-to-left context: + +{% contentLayout %} + {% contentItem %} + {% contentPageImage { + src: "../../../assets/img/components/chip/example-rtl-menu.svg", + width: 310, + alt: "A right-to-left example of a cuisines filter using the chip components" } %} + {% endcontentItem %} + {% contentItem %} + {% contentPageImage { + src: "../../../assets/img/components/chip/example-rtl-offer.svg", + width: 257, + alt: "A right-to-left example of an offers filter using the chip components" + } %} + {% endcontentItem %} +{% endcontentLayout %} + +___ + +## Resources + +{% notification { + type: "warning", + message: "We’re currently working on updating our Chip documentation, please see the resources below." +} %} + +{% resourceTable { + componentName: 'Chip' +} %} diff --git a/apps/pie-docs/src/components/tag/code/props.json b/apps/pie-docs/src/components/tag/code/props.json index 93d2528e7b..ffab356c59 100644 --- a/apps/pie-docs/src/components/tag/code/props.json +++ b/apps/pie-docs/src/components/tag/code/props.json @@ -19,7 +19,7 @@ "type": "code", "item": ["\"neutral-alternative\"", "\"neutral\"", "\"outline\"", "\"ghost\"", "\"blue\"", "\"green\"", "\"yellow\"", "\"red\"", "\"brand\""] }, - "Sets the variant of the button.", + "Sets the variant of the tag.", { "type": "code", "item": ["\"neutral\""] diff --git a/apps/pie-docs/test/snapshots/expected-routes.snapshot.json b/apps/pie-docs/test/snapshots/expected-routes.snapshot.json index b1af74ffcf..ddfcf766c2 100644 --- a/apps/pie-docs/test/snapshots/expected-routes.snapshot.json +++ b/apps/pie-docs/test/snapshots/expected-routes.snapshot.json @@ -19,7 +19,8 @@ "components/card/overview", "components/carousel-indicator", "components/checkbox", - "components/chip", + "components/chip/code", + "components/chip/overview", "components/component-status", "components/data-table", "components/data-visualisation/bar-chart", diff --git a/apps/pie-storybook/stories/pie-chip-docs/variants.mdx b/apps/pie-storybook/stories/pie-chip-docs/variants.mdx new file mode 100644 index 0000000000..7ede222b0c --- /dev/null +++ b/apps/pie-storybook/stories/pie-chip-docs/variants.mdx @@ -0,0 +1,16 @@ +import * as ChipStories from '../pie-chip.stories.ts' +import { Meta, Canvas } from '@storybook/blocks'; + + + +### Default + + + +### Outline + + + +### Ghost + + \ No newline at end of file diff --git a/packages/components/pie-chip/README.md b/packages/components/pie-chip/README.md index abcf7d603c..736ee28bf8 100644 --- a/packages/components/pie-chip/README.md +++ b/packages/components/pie-chip/README.md @@ -8,15 +8,6 @@

-# Table of Contents - -1. [Introduction](#pie-chip) -2. [Installation](#installation) -3. [Importing the component](#importing-the-component) -4. [Peer Dependencies](#peer-dependencies) -5. [Props](#props) -6. [Contributing](#contributing) - ## pie-chip `pie-chip` is a Web Component built using the Lit library. @@ -36,81 +27,13 @@ $ npm i @justeattakeaway/pie-chip $ yarn add @justeattakeaway/pie-chip ``` -For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components). - - -### Importing the component - -#### JavaScript -```js -// Default – for Native JS Applications, Vue, Angular, Svelte, etc. -import { PieChip } from '@justeattakeaway/pie-chip'; - -// If you don't need to reference the imported object, you can simply -// import the module which registers the component as a custom element. -import '@justeattakeaway/pie-chip'; -``` - -#### React -```js -// React -// For React, you will need to import our React-specific component build -// which wraps the web component using ​@lit/react -import { PieChip } from '@justeattakeaway/pie-chip/dist/react'; -``` - -> [!NOTE] -> When using the React version of the component, please make sure to also -> include React as a [peer dependency](#peer-dependencies) in your project. - - -## Peer Dependencies +## Documentation -> [!IMPORTANT] -> When using `pie-chip`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application. +Visit [Chip | PIE Design System](https://pie.design/components/chip/overview) to view more information on this component. +## Questions -## Props - -| Property | Type | Default | Description | -|---|---|---|---| -| variant | `String` | `default` | Variant of the chip, one of `variants` - `default`, `outline`, `ghost` | -| isSelected | `Boolean` | `false` | If `true`, applies the selected styles | -| isLoading | `Boolean` | `false` | If `true`, displays a loading indicator inside the chip | -| isDismissible | `Boolean` | `false` | If `true`, displays a close icon to dismiss the chip component. Can be only used if `isSelected` is set to true | -| disabled | `Boolean` | `false` | If `true`, disables the chip component | -| aria | `Object` | `{}` | An object representing the aria labels for the close button & chip | - -In your markup or JSX, you can then use these to set the properties for the `pie-chip` component: - -```html - -Label - - -Label -``` - -## Slots - -| Slot | Description | -| Default slot | Used to pass text into the chip component. | -| icon | Used to pass in an icon to the chip component. We recommend using `pie-icons-webc` for defining this icon, but this can also accept an SVG icon. | - -### Using `pie-icons-webc` with `pie-chip` icon slot - -We recommend using `pie-icons-webc` when using the `icon` slot. Here is an example of how you would do this: - -```html - - - - Label - -``` +Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch. ## Contributing diff --git a/packages/components/pie-tag/README.md b/packages/components/pie-tag/README.md index 31a3f9afaa..a2a8518565 100644 --- a/packages/components/pie-tag/README.md +++ b/packages/components/pie-tag/README.md @@ -29,7 +29,7 @@ $ yarn add @justeattakeaway/pie-tag ## Documentation -Visit [Link | PIE Design System](https://pie.design/components/tag/overview) to view more information on this component. +Visit [Tag | PIE Design System](https://pie.design/components/tag/overview) to view more information on this component. ## Questions