From 74d8c1680ca632ff21823dbe1d61ef7bf22a36c8 Mon Sep 17 00:00:00 2001 From: Raouf Date: Fri, 22 Mar 2024 12:01:23 +0100 Subject: [PATCH] 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