diff --git a/.changeset/rich-lies-bow.md b/.changeset/rich-lies-bow.md new file mode 100644 index 0000000000..80fcdc6a1f --- /dev/null +++ b/.changeset/rich-lies-bow.md @@ -0,0 +1,5 @@ +--- +"pie-docs": minor +--- + +[Added] - Tag component docs diff --git a/apps/pie-docs/src/assets/img/components/tag/anatomy.svg b/apps/pie-docs/src/assets/img/components/tag/anatomy.svg new file mode 100644 index 0000000000..d54d760754 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/anatomy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/content-label-guidance-do.svg b/apps/pie-docs/src/assets/img/components/tag/content-label-guidance-do.svg new file mode 100644 index 0000000000..bddc9018c3 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/content-label-guidance-do.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/content-label-guidance-don_t.svg b/apps/pie-docs/src/assets/img/components/tag/content-label-guidance-don_t.svg new file mode 100644 index 0000000000..81e329a866 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/content-label-guidance-don_t.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/ltr-example-disabled-menu-card.svg b/apps/pie-docs/src/assets/img/components/tag/ltr-example-disabled-menu-card.svg new file mode 100644 index 0000000000..7ec82ce24d --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/ltr-example-disabled-menu-card.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/ltr-example-offer.svg b/apps/pie-docs/src/assets/img/components/tag/ltr-example-offer.svg new file mode 100644 index 0000000000..f142c60a71 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/ltr-example-offer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/ltr-example-opening-hours.svg b/apps/pie-docs/src/assets/img/components/tag/ltr-example-opening-hours.svg new file mode 100644 index 0000000000..03f3a797e4 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/ltr-example-opening-hours.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/ltr-example-restaurant-listing.svg b/apps/pie-docs/src/assets/img/components/tag/ltr-example-restaurant-listing.svg new file mode 100644 index 0000000000..73f42bdca0 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/ltr-example-restaurant-listing.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/modifier-emphasis-strong.svg b/apps/pie-docs/src/assets/img/components/tag/modifier-emphasis-strong.svg new file mode 100644 index 0000000000..cc6f599cff --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/modifier-emphasis-strong.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/modifier-emphasis-subtle.svg b/apps/pie-docs/src/assets/img/components/tag/modifier-emphasis-subtle.svg new file mode 100644 index 0000000000..08ed9e0b74 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/modifier-emphasis-subtle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/modifier-icon.svg b/apps/pie-docs/src/assets/img/components/tag/modifier-icon.svg new file mode 100644 index 0000000000..d36f66a869 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/modifier-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/modifier-no-icon.svg b/apps/pie-docs/src/assets/img/components/tag/modifier-no-icon.svg new file mode 100644 index 0000000000..31ddad6ce9 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/modifier-no-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/rtl-example-price-breakdown.svg b/apps/pie-docs/src/assets/img/components/tag/rtl-example-price-breakdown.svg new file mode 100644 index 0000000000..7e06214daf --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/rtl-example-price-breakdown.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/rtl-example-restaurant-listing.svg b/apps/pie-docs/src/assets/img/components/tag/rtl-example-restaurant-listing.svg new file mode 100644 index 0000000000..dffe3fc428 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/rtl-example-restaurant-listing.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/size-large.svg b/apps/pie-docs/src/assets/img/components/tag/size-large.svg new file mode 100644 index 0000000000..b093389a72 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/size-large.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/size-small.svg b/apps/pie-docs/src/assets/img/components/tag/size-small.svg new file mode 100644 index 0000000000..e8e70e5c07 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/size-small.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/state-default.svg b/apps/pie-docs/src/assets/img/components/tag/state-default.svg new file mode 100644 index 0000000000..6cd76a2c87 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/state-default.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/state-disabled.svg b/apps/pie-docs/src/assets/img/components/tag/state-disabled.svg new file mode 100644 index 0000000000..b6e499c907 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/state-disabled.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/structure.svg b/apps/pie-docs/src/assets/img/components/tag/structure.svg new file mode 100644 index 0000000000..e20205b8d4 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/structure.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/variation-type-blue.svg b/apps/pie-docs/src/assets/img/components/tag/variation-type-blue.svg new file mode 100644 index 0000000000..2d779e48f1 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/variation-type-blue.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/variation-type-brand.svg b/apps/pie-docs/src/assets/img/components/tag/variation-type-brand.svg new file mode 100644 index 0000000000..7c411c199d --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/variation-type-brand.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/variation-type-ghost.svg b/apps/pie-docs/src/assets/img/components/tag/variation-type-ghost.svg new file mode 100644 index 0000000000..4ba5c3c7c9 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/variation-type-ghost.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/variation-type-green.svg b/apps/pie-docs/src/assets/img/components/tag/variation-type-green.svg new file mode 100644 index 0000000000..47e68d6b3d --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/variation-type-green.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/variation-type-neutral-alternative.svg b/apps/pie-docs/src/assets/img/components/tag/variation-type-neutral-alternative.svg new file mode 100644 index 0000000000..6d40bdc91b --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/variation-type-neutral-alternative.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/variation-type-neutral.svg b/apps/pie-docs/src/assets/img/components/tag/variation-type-neutral.svg new file mode 100644 index 0000000000..991dd5c402 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/variation-type-neutral.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/variation-type-outline.svg b/apps/pie-docs/src/assets/img/components/tag/variation-type-outline.svg new file mode 100644 index 0000000000..8b76a5e1c7 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/variation-type-outline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/variation-type-red.svg b/apps/pie-docs/src/assets/img/components/tag/variation-type-red.svg new file mode 100644 index 0000000000..47c5252365 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/variation-type-red.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/variation-type-yellow.svg b/apps/pie-docs/src/assets/img/components/tag/variation-type-yellow.svg new file mode 100644 index 0000000000..226b03d85b --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/variation-type-yellow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/visual-representation.svg b/apps/pie-docs/src/assets/img/components/tag/visual-representation.svg new file mode 100644 index 0000000000..27019537ad --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/visual-representation.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/components/tag/code/code.md b/apps/pie-docs/src/components/tag/code/code.md new file mode 100644 index 0000000000..0c33a6135c --- /dev/null +++ b/apps/pie-docs/src/components/tag/code/code.md @@ -0,0 +1,137 @@ +--- +eleventyNavigation: + key: Code + parent: Tag + order: 3 +shouldShowContents: true +eleventyComputed: + props: "{% include './props.json' %}" + slots: "{% include './slots.json' %}" +--- + +## Overview + +

+ + GitHub Workflow Status + +

+ +`pie-tag` is a Web Component built using the Lit library. It offers a simple and accessible tag 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-tag` in your application, run the following on your command line: + +```shell +# npm +$ npm i @justeattakeaway/pie-tag +``` + +```shell +# yarn +$ yarn add @justeattakeaway/pie-tag +``` + +{% 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 +} %} + +Since the component is not interactive, it doesn't have a disabled property. To give the Tag a disabled look, please set the `--tag-opacity` css variable. Recommended opacity level for disabled tag is 0.5. + +## Slots + +{% componentDetailsTable { + tableData: slots +} %} + +### Using `pie-icons-webc` with the `pie-tag` 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 + +``` + +## Examples + +For HTML: + +```js +// import as module into a js file e.g. main.js +import '@justeattakeaway/pie-tag' +``` + +```html + +Label + +``` + +For Native JS Applications, Vue, Angular, Svelte etc.: + +```js +// Vue templates (using Nuxt 3) +import { PieTag } from '@justeattakeaway/pie-tag'; + +Label +``` + +For React Applications: + +```js +// React templates (using Next 13) +import { PieTag } from '@justeattakeaway/pie-tag/dist/react'; + +Label + +``` + +{% 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-tag/CHANGELOG.md)." +} %} diff --git a/apps/pie-docs/src/components/tag/code/props.json b/apps/pie-docs/src/components/tag/code/props.json new file mode 100644 index 0000000000..93d2528e7b --- /dev/null +++ b/apps/pie-docs/src/components/tag/code/props.json @@ -0,0 +1,41 @@ +{ + "headings": ["Prop", "Options", "Description", "Default"], + "rows": [ + [ + "size", + { + "type": "code", + "item": ["\"small\"", "\"large\""] + }, + "Sets the size of the tag.", + { + "type": "code", + "item": ["\"large\""] + } + ], + [ + "variant", + { + "type": "code", + "item": ["\"neutral-alternative\"", "\"neutral\"", "\"outline\"", "\"ghost\"", "\"blue\"", "\"green\"", "\"yellow\"", "\"red\"", "\"brand\""] + }, + "Sets the variant of the button.", + { + "type": "code", + "item": ["\"neutral\""] + } + ], + [ + "isStrong", + { + "type": "code", + "item": ["true", "false"] + }, + "If `true`, displays strong tag styles for `green`, `yellow`, `red`, `blue` and `neutral` variants.", + { + "type": "code", + "item": ["false"] + } + ] + ] +} diff --git a/apps/pie-docs/src/components/tag/code/slots.json b/apps/pie-docs/src/components/tag/code/slots.json new file mode 100644 index 0000000000..2dc96f218e --- /dev/null +++ b/apps/pie-docs/src/components/tag/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 tag component." + ], + [ + { + "type": "code", + "item": ["icon"] + }, + "Used to pass in an icon to the tag component." + ] + ] +} diff --git a/apps/pie-docs/src/components/tag/overview/overview.md b/apps/pie-docs/src/components/tag/overview/overview.md new file mode 100644 index 0000000000..31f393242e --- /dev/null +++ b/apps/pie-docs/src/components/tag/overview/overview.md @@ -0,0 +1,400 @@ +--- +eleventyNavigation: + key: Overview + parent: Tag + order: 1 +shouldShowContents: true +--- + +## Overview + +The purpose of tags is to provide a quick and visually appealing way to highlight or identify specific items, topics or attributes. Tags enhance the user experience by simplifying content organisation and facilitating content discovery and filtering. +Tags can be embedded in other components such as cards, data tables (among others) to help users understand and filter information more effectively. + +{% contentPageImage { + src:"../../../assets/img/components/tag/overview.svg", + alt: "A group of tags." +} %} + +--- + +## Dos and Don’ts + +{% usage { + do: { + type: usageTypes.text, + items: [ + "Use when content is mapped to multiple categories, and the user needs a way to differentiate between them.", + "Use to call attention to details in a way that makes it easy to scan." + ] + }, + dont: { + type: usageTypes.text, + items: [ + "Don’t use when an interaction is required, use a [chip](/components/chip/) if needed." + ] + } +} %} + +--- + +## Anatomy + +{% contentPageImage { + src:"../../../assets/img/components/tag/anatomy.svg", + alt: "Anatomy of a tag.", + width: 120 +} %} + +{% list { + type: listTypes.ordered, + items: [ + "**Icon (Optional):** Visually supports the label.", + "**Label:** Provides information about the content or purpose of the tag.", + "**Container**: Background container that organises the information." + ] +} %} + +--- + +## Variations + +### Type + +Tag can use colour for visual categorisation. + +{% contentLayout %} + {% contentItem %} +

Neutral

+ {% contentPageImage { + src: "../../../assets/img/components/tag/variation-type-neutral.svg", + width: "106px", + alt: "A pair of strong and subtle neutral tags." + } %} + {% endcontentItem %} + {% contentItem %} +

Blue

+ {% contentPageImage { + src: "../../../assets/img/components/tag/variation-type-blue.svg", + width: "106px", + alt: "A pair of strong and subtle tags in blue color." + } %} + {% endcontentItem %} + {% contentItem %} +

Green

+ {% contentPageImage { + src: "../../../assets/img/components/tag/variation-type-green.svg", + width: "106px", + alt: "A pair of strong and subtle tags in green color." + } %} + {% endcontentItem %} + {% contentItem %} +

Yellow

+ {% contentPageImage { + src: "../../../assets/img/components/tag/variation-type-yellow.svg", + width: "106px", + alt: "A pair of strong and subtle tags in yellow color." + } %} + {% endcontentItem %} + {% contentItem %} +

Red

+ {% contentPageImage { + src: "../../../assets/img/components/tag/variation-type-red.svg", + width: "106px", + alt: "A pair of strong and subtle tags in red color." + } %} + {% endcontentItem %} + {% contentItem %} +

Brand

+ {% contentPageImage { + src: "../../../assets/img/components/tag/variation-type-brand.svg", + width: "49px", + alt: "A subtle tag in brand color." + } %} + {% endcontentItem %} + {% contentItem %} +

Neutral - alternative

+ {% contentPageImage { + src: "../../../assets/img/components/tag/variation-type-neutral-alternative.svg", + width: "49px", + alt: "A subtle alternative for neutral tag." + } %} + {% endcontentItem %} + {% contentItem %} +

Outline

+ {% contentPageImage { + src: "../../../assets/img/components/tag/variation-type-outline.svg", + width: "49px", + alt: "An outline tag." + } %} + {% endcontentItem %} + {% contentItem %} +

Ghost

+ {% contentPageImage { + src: "../../../assets/img/components/tag/variation-type-ghost.svg", + width: "49px", + alt: "A ghost tag." + } %} + {% endcontentItem %} +{% endcontentLayout %} + +___ + +## Modifiers + +### Emphasis + +Tags are available in two types of emphasis. +Not all colours available within the subtle emphasis are available within the strong emphasis, for example, brand, neutral - alternative, outline and ghost have only subtle variations. + +{% contentLayout %} + {% contentItem %} +

Strong

+ {% contentPageImage { + src: "../../../assets/img/components/tag/modifier-emphasis-strong.svg", + width: "49px", + alt: "A variation of tag which uses strong colors." + } %} + {% endcontentItem %} + {% contentItem %} +

Subtle

+ {% contentPageImage { + src: "../../../assets/img/components/tag/modifier-emphasis-subtle.svg", + width: "49px", + alt: "A variation of tag which uses subtle colors." + } %} + {% endcontentItem %} +{% endcontentLayout %} + +### Icon + +Icons can be used to visually support the Tag’s label. Only available at the large size. + +{% contentLayout %} + {% contentItem %} +

With icon

+ {% contentPageImage { + src: "../../../assets/img/components/tag/modifier-icon.svg", + width: "69px", + alt: "A tag with an icon." + } %} + {% endcontentItem %} + {% contentItem %} +

Without icon

+ {% contentPageImage { + src: "../../../assets/img/components/tag/modifier-no-icon.svg", + width: "49px", + alt: "A tag without an icon." + } %} + {% endcontentItem %} +{% endcontentLayout %} + +--- + +## Sizes + +{% contentLayout %} + {% contentItem %} +

Small

+

16px height. Small tags don't support icons.

+ {% contentPageImage { + src: "../../../assets/img/components/tag/size-small.svg", + width: "37px", + alt: "Small size tag with 16px height." + } %} + {% endcontentItem %} + {% contentItem %} +

Large

+

24px height.

+ {% contentPageImage { + src: "../../../assets/img/components/tag/size-large.svg", + width: "126px", + alt: "Large size tag with 24px height." + } %} + {% endcontentItem %} +{% endcontentLayout %} + +--- + +## States + +Tag is available in 2 states. The disabled state has an opacity of 50%. + +{% contentLayout %} + {% contentItem %} +

Default

+ {% contentPageImage { + src: "../../../assets/img/components/tag/state-default.svg", + width: "126px", + alt: "Default state of a tag." + } %} + {% endcontentItem %} + {% contentItem %} +

Disabled

+ {% contentPageImage { + src: "../../../assets/img/components/tag/state-disabled.svg", + width: "126px", + alt: "Disabled state of a tag." + } %} + {% endcontentItem %} +{% endcontentLayout %} + +--- + +## Content + +### Label guidance + +Tag doesn’t have a maximum width or overflow. The container width is dynamic to the content’s width. + +{% usage { + do: { + type: usageTypes.text, + items: [ + "Use concise and scannable text.", + "Use 3 words or fewer.", + "Use sentence case." + ] + }, + dont: { + type: usageTypes.text, + items: [ + "Don't overcrowd the label with unnecessary information or excessive details.", + "Don't use more than 3 words in the label." + ] + } +} %} + +{% usage { + do: { + type: usageTypes.image, + items: [{ + src: "../../../assets/img/components/tag/content-label-guidance-do.svg", + width: "88px", + alt: "A tag with a one-word label." + }] + }, + dont: { + type: usageTypes.image, + items: [{ + src: "../../../assets/img/components/tag/content-label-guidance-don_t.svg", + width: "175px", + alt: "A tag with a sentence in the label." + }] + } +} %} + +___ + +## Visual representation + +Tags and colours can be used to indicate status or used to convey specific meanings within JET which are displayed below. + +{% contentPageImage { + src:"../../../assets/img/components/tag/visual-representation.svg", + alt: "Specific meaning of colors and the purpose of tags.", + width: "352px" +} %} + +--- + +## Examples + +Outlines the atomic level interactive elements for the component. + +### LTR examples + +Here are some examples of tags in left-to-right context: + +{% contentLayout %} + {% contentItem %} + {% contentPageImage { + src: "../../../assets/img/components/tag/ltr-example-offer.svg", + width: "226px", + alt: "A left-to-right example of an offer with a subtle green tag." + } %} + {% endcontentItem %} + {% contentItem %} + {% contentPageImage { + src: "../../../assets/img/components/tag/ltr-example-opening-hours.svg", + width: "402px", + alt: "A left-to-right example of opening hours of a restaurant with a subtle brand tag." + } %} + {% endcontentItem %} +{% endcontentLayout %} + +{% contentPageImage { + src:"../../../assets/img/components/tag/example-ltr-restaurant-listing.svg", + alt: "A left-to-right example of a tag used on a restaurant listing card.", + width: "827px" +} %} + +{% contentPageImage { + src:"../../../assets/img/components/tag/ltr-example-disabled-menu-card.svg", + alt: "A left-to-right example of disabled offer tag in a menu item card.", + width: "827px" +} %} + +### RTL examples + +Here are some examples of tags in right-to-left context: + +{% contentPageImage { + src: "../../../assets/img/components/tag/rtl-example-restaurant-listing.svg", + alt: "A right-to-left example of neutral and brand tags used on a restaurant listing card.", + width: "827px" +} %} + +{% contentPageImage { + src: "../../../assets/img/components/tag/rtl-example-price-breakdown.svg", + alt: "A right-to-left example of an offer tag used in a price breakdown.", + width: "359px" +} %} + +___ + +## Resources + +{% resourceTable { + rows: [ + { + resource: resourceTypes.COMPONENT, + link: "https://www.figma.com/file/R2rBfzJP0hG0MZorq6FLZ1/%5BCore%5D-Components-%E2%9A%AA%EF%B8%8F-%5BPIE-2.0%5D?type=design&node-id=742-328&mode=design", + status: statusTypes.AVAILABLE + }, + { + resource: resourceTypes.DOCUMENTATION, + link: "https://www.figma.com/file/j1YKygEyhqZ6zKVxcHapn5/%5BCore%5D-Component-Documentation-%E2%9A%AA%EF%B8%8F-%5BPIE-2.0%5D?type=design&node-id=742-328&mode=design", + status: statusTypes.AVAILABLE + }, + { + resource: resourceTypes.WEB_COMPONENTS, + status: statusTypes.PLANNED + }, + { + resource: resourceTypes.VUE, + status: statusTypes.NOT_APPLICABLE + }, + { + resource: resourceTypes.REACT, + link: "https://snacks.takeaway.com/portal/components/tag/", + status: statusTypes.AVAILABLE + }, + { + resource: resourceTypes.IOS_JUST_UI, + status: statusTypes.AVAILABLE + }, + { + resource: resourceTypes.IOS_PIE, + status: statusTypes.PLANNED + }, + { + resource: resourceTypes.ANDROID_XML, + status: statusTypes.PLANNED + }, + { + resource: resourceTypes.ANDROID_JETPACK, + status: statusTypes.PLANNED + } + ] +} %} diff --git a/apps/pie-docs/src/components/tag/tag.md b/apps/pie-docs/src/components/tag/tag.md index eb0c86cbb2..48f283a9aa 100644 --- a/apps/pie-docs/src/components/tag/tag.md +++ b/apps/pie-docs/src/components/tag/tag.md @@ -1,29 +1,7 @@ --- eleventyNavigation: - key: 'Tag' + key: Tag parent: Components - order: 43 ---- - -## Overview -The purpose of tags is to provide a quick and visually appealing way to highlight or identify specific items, topics or attributes. Tags enhance the user experience by simplifying content organisation and facilitating content discovery and filtering. - -Tags can be embedded in other components such as cards, data tables (among others) to help users understand and filter information more effectively. - -{% contentPageImage { - src:"../../assets/img/components/tag/overview.svg", - alt: "A group of tags that are horizontally stacked together." -} %} - ---- - -## Resources - -{% notification { - type: "warning", - message: "We’re currently working on updating our Tag documentation, please see the resources below." -} %} - -{% resourceTable { - componentName: 'Tag' -} %} + url: /components/tag/overview/ + order: 42 +--- \ No newline at end of file diff --git a/apps/pie-docs/test/snapshots/expected-routes.snapshot.json b/apps/pie-docs/test/snapshots/expected-routes.snapshot.json index 6c2d4f8cbc..b1af74ffcf 100644 --- a/apps/pie-docs/test/snapshots/expected-routes.snapshot.json +++ b/apps/pie-docs/test/snapshots/expected-routes.snapshot.json @@ -60,7 +60,8 @@ "components/switch/code", "components/switch/overview", "components/tabs", - "components/tag", + "components/tag/code", + "components/tag/overview", "components/text-input", "components/textarea", "components/thumbnail", @@ -104,4 +105,4 @@ "foundations/typography/tokens/global", "support/contact-us", "support/faq" -] +] \ No newline at end of file diff --git a/packages/components/pie-tag/README.md b/packages/components/pie-tag/README.md index 8a5136d99b..31a3f9afaa 100644 --- a/packages/components/pie-tag/README.md +++ b/packages/components/pie-tag/README.md @@ -8,18 +8,9 @@

-# Table of Contents - -1. [Introduction](#pie-tag) -2. [Installation](#installation) -3. [Importing the component](#importing-the-component) -4. [Peer Dependencies](#peer-dependencies) -5. [Props](#props) -6. [Contributing](#contributing) - ## pie-tag -`pie-tag` is a Web Component built using the Lit library. A tag is a small visual element used to represent and categorize information within a user interface.  +`pie-tag` is a Web Component built using the Lit library. This component can be easily integrated into various frontend frameworks and customized through a set of properties. @@ -36,79 +27,13 @@ $ npm i @justeattakeaway/pie-tag $ yarn add @justeattakeaway/pie-tag ``` -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 { PieTag } from '@justeattakeaway/pie-tag'; - -// 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-tag'; -``` - -#### React -```js -// React -// For React, you will need to import our React-specific component build -// which wraps the web component using ​@lit/react -import { PieTag } from '@justeattakeaway/pie-tag/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-tag`, 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 [Link | PIE Design System](https://pie.design/components/tag/overview) to view more information on this component. +## Questions -## Props - -| Property | Type | Default | Description | -|---|---|---|---| -| size | `String` | `large` | Size of the tag. Can be either `large` or `small` | -| variant | `String` | `neutral` | Variant of the tag, one of `variants` - `neutral-alternative`, `neutral`, `outline`, `ghost`, `blue`, `green`, `yellow`, `red`, `brand` | -| isStrong | `Boolean` | `false` | If `true`, displays strong tag styles for `green`, `yellow`, `red`, `blue` and `neutral` variants'| - -Since the component is not interactive it doesn't have a disabled property. To give the Tag a disabled look please use `--tag-opacity` css variable. Recommended opacity level for disabled tag is 0.5. - -In your markup or JSX, you can then use these to set the properties for the `pie-tag` component: - -```html - -Label - - -Label -``` -## Slots - -| Slot | Description | -| Default slot | Used to pass text into the tag component. | -| icon | Used to pass in an icon to the tag 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-tag` icon slot - -We recommend using `pie-icons-webc` when using the `icon` slot. Here is an example of how you would do this: - -```html - - - - Vegan - -``` +Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch. ## Contributing