+
+`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/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": []
}
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
+
+