From 2d0bad47748312cf7926f8f4969fa8cb6fcb6753 Mon Sep 17 00:00:00 2001 From: Raouf Date: Fri, 12 Jan 2024 15:58:27 +0100 Subject: [PATCH 1/9] feat(pie-docs): DSW-1523 tag overview page --- .changeset/rich-lies-bow.md | 5 + .../src/assets/img/components/tag/Large.svg | 1 + .../src/assets/img/components/tag/anatomy.svg | 1 + .../tag/example-ltr-disabled-menu-item.svg | 1 + .../components/tag/example-ltr-menu-item.svg | 1 + .../tag/example-ltr-restaurant-listing.svg | 1 + .../tag/example-rtl-disabled-menu-item.svg | 1 + .../tag/example-rtl-restaurant-listing.svg | 1 + .../components/tag/meaning-and-purpose.svg | 1 + .../img/components/tag/modifier-disabled.svg | 1 + .../img/components/tag/modifier-icon.svg | 1 + .../img/components/tag/size-height-large.svg | 1 + .../img/components/tag/size-height-small.svg | 1 + .../assets/img/components/tag/size-width.svg | 1 + .../assets/img/components/tag/structure.svg | 1 + .../img/components/tag/variation-strong.svg | 1 + .../img/components/tag/variation-subtle.svg | 1 + .../src/components/tag/overview/overview.md | 233 ++++++++++++++++++ .../src/components/tag/overview/sizes.json | 34 +++ apps/pie-docs/src/components/tag/tag.md | 29 --- .../snapshots/expected-routes.snapshot.json | 2 +- 21 files changed, 289 insertions(+), 30 deletions(-) create mode 100644 .changeset/rich-lies-bow.md create mode 100644 apps/pie-docs/src/assets/img/components/tag/Large.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/anatomy.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/example-ltr-disabled-menu-item.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/example-ltr-menu-item.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/example-ltr-restaurant-listing.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/example-rtl-disabled-menu-item.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/example-rtl-restaurant-listing.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/meaning-and-purpose.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/modifier-disabled.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/modifier-icon.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/size-height-large.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/size-height-small.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/size-width.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/structure.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/variation-strong.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/variation-subtle.svg create mode 100644 apps/pie-docs/src/components/tag/overview/overview.md create mode 100644 apps/pie-docs/src/components/tag/overview/sizes.json delete mode 100644 apps/pie-docs/src/components/tag/tag.md 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/Large.svg b/apps/pie-docs/src/assets/img/components/tag/Large.svg new file mode 100644 index 0000000000..4afc515a3e --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/Large.svg @@ -0,0 +1 @@ + \ No newline at end of file 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..68220f737f --- /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/example-ltr-disabled-menu-item.svg b/apps/pie-docs/src/assets/img/components/tag/example-ltr-disabled-menu-item.svg new file mode 100644 index 0000000000..b88e42ffb3 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/example-ltr-disabled-menu-item.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/example-ltr-menu-item.svg b/apps/pie-docs/src/assets/img/components/tag/example-ltr-menu-item.svg new file mode 100644 index 0000000000..c9db3a56fb --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/example-ltr-menu-item.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/example-ltr-restaurant-listing.svg b/apps/pie-docs/src/assets/img/components/tag/example-ltr-restaurant-listing.svg new file mode 100644 index 0000000000..8953313534 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/example-ltr-restaurant-listing.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/example-rtl-disabled-menu-item.svg b/apps/pie-docs/src/assets/img/components/tag/example-rtl-disabled-menu-item.svg new file mode 100644 index 0000000000..350a5c07a7 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/example-rtl-disabled-menu-item.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/example-rtl-restaurant-listing.svg b/apps/pie-docs/src/assets/img/components/tag/example-rtl-restaurant-listing.svg new file mode 100644 index 0000000000..c269f9a016 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/example-rtl-restaurant-listing.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/meaning-and-purpose.svg b/apps/pie-docs/src/assets/img/components/tag/meaning-and-purpose.svg new file mode 100644 index 0000000000..c7b76cfa21 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/meaning-and-purpose.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/modifier-disabled.svg b/apps/pie-docs/src/assets/img/components/tag/modifier-disabled.svg new file mode 100644 index 0000000000..6043facde3 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/modifier-disabled.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..c0a6eec527 --- /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/size-height-large.svg b/apps/pie-docs/src/assets/img/components/tag/size-height-large.svg new file mode 100644 index 0000000000..0f6393c3ed --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/size-height-large.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/size-height-small.svg b/apps/pie-docs/src/assets/img/components/tag/size-height-small.svg new file mode 100644 index 0000000000..2ca7c3399c --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/size-height-small.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/size-width.svg b/apps/pie-docs/src/assets/img/components/tag/size-width.svg new file mode 100644 index 0000000000..bd2d40b484 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/size-width.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..4f0df2efc3 --- /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-strong.svg b/apps/pie-docs/src/assets/img/components/tag/variation-strong.svg new file mode 100644 index 0000000000..8a1b00022e --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/variation-strong.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/variation-subtle.svg b/apps/pie-docs/src/assets/img/components/tag/variation-subtle.svg new file mode 100644 index 0000000000..bb2d9eb4d7 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag/variation-subtle.svg @@ -0,0 +1 @@ + \ No newline at end of file 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..e0a116d644 --- /dev/null +++ b/apps/pie-docs/src/components/tag/overview/overview.md @@ -0,0 +1,233 @@ +--- +eleventyNavigation: + key: Tag + parent: Components + order: 1 +eleventyComputed: + sizes: "{% include './sizes.json' %}" +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 that are horizontally stacked together." +} %} + +--- + +## 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 informative information to the user." + ] +} %} + +--- + +## Variations + +Tags have two levels of emphasis, strong and subtle. Not all colour available within the subtle emphasis are available within the strong emphasis. + +### Strong + +Used when a high contrast tag is required. + +{% contentPageImage { + src:"../../../assets/img/components/tag/variation-strong.svg", + alt: "Strong tags with bold and strong background color.", + width: 286 +} %} + +### Subtle + +Used when a low contrast tag is required. + +{% contentPageImage { + src:"../../../assets/img/components/tag/variation-subtle.svg", + alt: "Subtle tag with less contrast colors.", + width: 362 +} %} + +--- + +## Modifiers + +### Icon + +Icons can be used to visually support the Tag’s label. Only available at the large size. + +{% contentPageImage { + src:"../../../assets/img/components/tag/modifier-icon.svg", + alt: "A tag with an icon.", + width: 61 +} %} + +### Disabled + +{% contentPageImage { + src:"../../../assets/img/components/tag/modifier-disabled.svg", + alt: "A disabled tag.", + width: 61 +} %} + +--- + +## Sizes + +Outlines the Tag sizes that are available, and where they should be used across our products. + +### Height + +Two size options are available to suit the scale required. + +{% componentDetailsTable { + tableData: sizes +} %} + +### Width + +Container width is dynamic to the content’s width and retains 4px left and right padding. + +{% contentPageImage { + src:"../../../assets/img/components/tag/size-width.svg", + alt: "A tag tag with flexible width that hugs the content inside.", + width: 92 +} %} + +--- + +## Meaning and purpose + +Tags can be used to indicate status or used to convey specific meanings within JET which are displayed below. + +{% contentPageImage { + src:"../../../assets/img/components/tag/meaning-and-purpose.svg", + alt: "Meaning of colors in a tag and purpose of the tags.", + width: 318 +} %} + +___ + +## Examples + +Outlines the atomic level interactive elements for the component. + +### LTR examples + +Here are some examples of tags in left-to-right context: + +{% 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: 827 +} %} + +{% contentPageImage { + src:"../../../assets/img/components/tag/example-ltr-menu-item.svg", + alt: "A left-to-right example of disabled tags on a menu item card.", + width: 912 +} %} + +{% contentPageImage { + src:"../../../assets/img/components/tag/example-ltr-disabled-menu-item.svg", + alt: "A left-to-right example of disabled tag on a disabled menu item card.", + width: 912 +} %} + +### RTL examples + +Here are some examples of tags in right-to-left context: + +{% contentPageImage { + src:"../../../assets/img/components/tag/example-rtl-restaurant-listing.svg", + alt: "A right-to-left example of a tag used on a restaurant listing card.", + width: 827 +} %} + +{% contentPageImage { + src:"../../../assets/img/components/tag/example-rtl-disabled-menu-item.svg", + alt: "A right-to-left example of disabled tag on a disabled menu item card.", + width: 912 +} %} + +___ + +## 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/overview/sizes.json b/apps/pie-docs/src/components/tag/overview/sizes.json new file mode 100644 index 0000000000..78f791cfd4 --- /dev/null +++ b/apps/pie-docs/src/components/tag/overview/sizes.json @@ -0,0 +1,34 @@ +{ + "headings": [ + "", + "Size", + "Height", + "Notes" + ], + "rows": [ + [ + { + "type": "image", + "item": { + "src": "../../../assets/img/components/tag/size-height-large.svg", + "alt": "Large size tag with 24px height." + } + }, + "Large", + "24px", + "-" + ], + [ + { + "type": "image", + "item": { + "src": "../../../assets/img/components/tag/size-height-small.svg", + "alt": "Small size tag with 16px height." + } + }, + "Small", + "16px", + "Icons are not available for the small size." + ] + ] +} \ No newline at end of file diff --git a/apps/pie-docs/src/components/tag/tag.md b/apps/pie-docs/src/components/tag/tag.md deleted file mode 100644 index eb0c86cbb2..0000000000 --- a/apps/pie-docs/src/components/tag/tag.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -eleventyNavigation: - 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' -} %} diff --git a/apps/pie-docs/test/snapshots/expected-routes.snapshot.json b/apps/pie-docs/test/snapshots/expected-routes.snapshot.json index 6c2d4f8cbc..e6c5e273b7 100644 --- a/apps/pie-docs/test/snapshots/expected-routes.snapshot.json +++ b/apps/pie-docs/test/snapshots/expected-routes.snapshot.json @@ -104,4 +104,4 @@ "foundations/typography/tokens/global", "support/contact-us", "support/faq" -] +] \ No newline at end of file From 798495a0d31a42d58a0eedec2e950fcfb1dda471 Mon Sep 17 00:00:00 2001 From: Raouf Date: Mon, 15 Jan 2024 10:32:01 +0100 Subject: [PATCH 2/9] fix(pie-docs): DSW-1523 fix navigation --- apps/pie-docs/src/components/tag/tag.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 apps/pie-docs/src/components/tag/tag.md diff --git a/apps/pie-docs/src/components/tag/tag.md b/apps/pie-docs/src/components/tag/tag.md new file mode 100644 index 0000000000..4baa2470ce --- /dev/null +++ b/apps/pie-docs/src/components/tag/tag.md @@ -0,0 +1,6 @@ +--- +eleventyNavigation: + key: Tag + parent: Components + url: /components/tag/overview/ +--- \ No newline at end of file From bc0384737862ee4f66983f8761c96c748ab20fac Mon Sep 17 00:00:00 2001 From: Raouf Date: Mon, 15 Jan 2024 10:42:37 +0100 Subject: [PATCH 3/9] fix(pie-docs): DSW-1523 fix navigation --- apps/pie-docs/test/snapshots/expected-routes.snapshot.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/pie-docs/test/snapshots/expected-routes.snapshot.json b/apps/pie-docs/test/snapshots/expected-routes.snapshot.json index e6c5e273b7..4a9e6aa383 100644 --- a/apps/pie-docs/test/snapshots/expected-routes.snapshot.json +++ b/apps/pie-docs/test/snapshots/expected-routes.snapshot.json @@ -60,7 +60,7 @@ "components/switch/code", "components/switch/overview", "components/tabs", - "components/tag", + "components/tag/overview", "components/text-input", "components/textarea", "components/thumbnail", From 6d9bfb36cfc47c877aea64b778f8e8c6ad903414 Mon Sep 17 00:00:00 2001 From: Raouf Date: Wed, 17 Jan 2024 16:28:52 +0100 Subject: [PATCH 4/9] fix(pie-docs): DSW-1523 update docs --- .../src/assets/img/components/tag/Large.svg | 1 - .../src/assets/img/components/tag/anatomy.svg | 2 +- .../tag/content-label-guidance-do.svg | 1 + .../tag/content-label-guidance-don_t.svg | 1 + .../tag/example-ltr-disabled-menu-item.svg | 1 - .../components/tag/example-ltr-menu-item.svg | 1 - .../tag/example-ltr-restaurant-listing.svg | 1 - .../tag/example-rtl-disabled-menu-item.svg | 1 - .../tag/example-rtl-restaurant-listing.svg | 1 - .../tag/ltr-example-disabled-menu-card.svg | 1 + .../img/components/tag/ltr-example-offer.svg | 1 + .../tag/ltr-example-opening-hours.svg | 1 + .../tag/ltr-example-restaurant-listing.svg | 1 + .../components/tag/meaning-and-purpose.svg | 1 - .../img/components/tag/modifier-disabled.svg | 1 - .../tag/modifier-emphasis-strong.svg | 1 + .../tag/modifier-emphasis-subtle.svg | 1 + .../img/components/tag/modifier-icon.svg | 2 +- .../img/components/tag/modifier-no-icon.svg | 1 + .../tag/rtl-example-price-breakdown.svg | 1 + .../tag/rtl-example-restaurant-listing.svg | 1 + .../img/components/tag/size-height-large.svg | 1 - .../img/components/tag/size-height-small.svg | 1 - .../assets/img/components/tag/size-large.svg | 1 + .../assets/img/components/tag/size-small.svg | 1 + .../assets/img/components/tag/size-width.svg | 1 - .../img/components/tag/state-default.svg | 1 + .../img/components/tag/state-disabled.svg | 1 + .../assets/img/components/tag/structure.svg | 2 +- .../img/components/tag/variation-strong.svg | 1 - .../img/components/tag/variation-subtle.svg | 1 - .../components/tag/variation-type-blue.svg | 1 + .../components/tag/variation-type-brand.svg | 1 + .../components/tag/variation-type-ghost.svg | 1 + .../components/tag/variation-type-green.svg | 1 + .../variation-type-neutral-alternative.svg | 1 + .../components/tag/variation-type-neutral.svg | 1 + .../components/tag/variation-type-outline.svg | 1 + .../img/components/tag/variation-type-red.svg | 1 + .../components/tag/variation-type-yellow.svg | 1 + .../components/tag/visual-representation.svg | 1 + .../src/components/tag/overview/overview.md | 311 ++++++++++++++---- 42 files changed, 268 insertions(+), 87 deletions(-) delete mode 100644 apps/pie-docs/src/assets/img/components/tag/Large.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/content-label-guidance-do.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/content-label-guidance-don_t.svg delete mode 100644 apps/pie-docs/src/assets/img/components/tag/example-ltr-disabled-menu-item.svg delete mode 100644 apps/pie-docs/src/assets/img/components/tag/example-ltr-menu-item.svg delete mode 100644 apps/pie-docs/src/assets/img/components/tag/example-ltr-restaurant-listing.svg delete mode 100644 apps/pie-docs/src/assets/img/components/tag/example-rtl-disabled-menu-item.svg delete mode 100644 apps/pie-docs/src/assets/img/components/tag/example-rtl-restaurant-listing.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/ltr-example-disabled-menu-card.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/ltr-example-offer.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/ltr-example-opening-hours.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/ltr-example-restaurant-listing.svg delete mode 100644 apps/pie-docs/src/assets/img/components/tag/meaning-and-purpose.svg delete mode 100644 apps/pie-docs/src/assets/img/components/tag/modifier-disabled.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/modifier-emphasis-strong.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/modifier-emphasis-subtle.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/modifier-no-icon.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/rtl-example-price-breakdown.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/rtl-example-restaurant-listing.svg delete mode 100644 apps/pie-docs/src/assets/img/components/tag/size-height-large.svg delete mode 100644 apps/pie-docs/src/assets/img/components/tag/size-height-small.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/size-large.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/size-small.svg delete mode 100644 apps/pie-docs/src/assets/img/components/tag/size-width.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/state-default.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/state-disabled.svg delete mode 100644 apps/pie-docs/src/assets/img/components/tag/variation-strong.svg delete mode 100644 apps/pie-docs/src/assets/img/components/tag/variation-subtle.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/variation-type-blue.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/variation-type-brand.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/variation-type-ghost.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/variation-type-green.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/variation-type-neutral-alternative.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/variation-type-neutral.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/variation-type-outline.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/variation-type-red.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/variation-type-yellow.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/visual-representation.svg diff --git a/apps/pie-docs/src/assets/img/components/tag/Large.svg b/apps/pie-docs/src/assets/img/components/tag/Large.svg deleted file mode 100644 index 4afc515a3e..0000000000 --- a/apps/pie-docs/src/assets/img/components/tag/Large.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/anatomy.svg b/apps/pie-docs/src/assets/img/components/tag/anatomy.svg index 68220f737f..d54d760754 100644 --- a/apps/pie-docs/src/assets/img/components/tag/anatomy.svg +++ b/apps/pie-docs/src/assets/img/components/tag/anatomy.svg @@ -1 +1 @@ - \ No newline at end of file + \ 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/example-ltr-disabled-menu-item.svg b/apps/pie-docs/src/assets/img/components/tag/example-ltr-disabled-menu-item.svg deleted file mode 100644 index b88e42ffb3..0000000000 --- a/apps/pie-docs/src/assets/img/components/tag/example-ltr-disabled-menu-item.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/example-ltr-menu-item.svg b/apps/pie-docs/src/assets/img/components/tag/example-ltr-menu-item.svg deleted file mode 100644 index c9db3a56fb..0000000000 --- a/apps/pie-docs/src/assets/img/components/tag/example-ltr-menu-item.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/example-ltr-restaurant-listing.svg b/apps/pie-docs/src/assets/img/components/tag/example-ltr-restaurant-listing.svg deleted file mode 100644 index 8953313534..0000000000 --- a/apps/pie-docs/src/assets/img/components/tag/example-ltr-restaurant-listing.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/example-rtl-disabled-menu-item.svg b/apps/pie-docs/src/assets/img/components/tag/example-rtl-disabled-menu-item.svg deleted file mode 100644 index 350a5c07a7..0000000000 --- a/apps/pie-docs/src/assets/img/components/tag/example-rtl-disabled-menu-item.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/example-rtl-restaurant-listing.svg b/apps/pie-docs/src/assets/img/components/tag/example-rtl-restaurant-listing.svg deleted file mode 100644 index c269f9a016..0000000000 --- a/apps/pie-docs/src/assets/img/components/tag/example-rtl-restaurant-listing.svg +++ /dev/null @@ -1 +0,0 @@ - \ 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/meaning-and-purpose.svg b/apps/pie-docs/src/assets/img/components/tag/meaning-and-purpose.svg deleted file mode 100644 index c7b76cfa21..0000000000 --- a/apps/pie-docs/src/assets/img/components/tag/meaning-and-purpose.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/modifier-disabled.svg b/apps/pie-docs/src/assets/img/components/tag/modifier-disabled.svg deleted file mode 100644 index 6043facde3..0000000000 --- a/apps/pie-docs/src/assets/img/components/tag/modifier-disabled.svg +++ /dev/null @@ -1 +0,0 @@ - \ 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 index c0a6eec527..d36f66a869 100644 --- a/apps/pie-docs/src/assets/img/components/tag/modifier-icon.svg +++ b/apps/pie-docs/src/assets/img/components/tag/modifier-icon.svg @@ -1 +1 @@ - \ No newline at end of file + \ 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-height-large.svg b/apps/pie-docs/src/assets/img/components/tag/size-height-large.svg deleted file mode 100644 index 0f6393c3ed..0000000000 --- a/apps/pie-docs/src/assets/img/components/tag/size-height-large.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/size-height-small.svg b/apps/pie-docs/src/assets/img/components/tag/size-height-small.svg deleted file mode 100644 index 2ca7c3399c..0000000000 --- a/apps/pie-docs/src/assets/img/components/tag/size-height-small.svg +++ /dev/null @@ -1 +0,0 @@ - \ 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/size-width.svg b/apps/pie-docs/src/assets/img/components/tag/size-width.svg deleted file mode 100644 index bd2d40b484..0000000000 --- a/apps/pie-docs/src/assets/img/components/tag/size-width.svg +++ /dev/null @@ -1 +0,0 @@ - \ 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 index 4f0df2efc3..e20205b8d4 100644 --- a/apps/pie-docs/src/assets/img/components/tag/structure.svg +++ b/apps/pie-docs/src/assets/img/components/tag/structure.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/variation-strong.svg b/apps/pie-docs/src/assets/img/components/tag/variation-strong.svg deleted file mode 100644 index 8a1b00022e..0000000000 --- a/apps/pie-docs/src/assets/img/components/tag/variation-strong.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/apps/pie-docs/src/assets/img/components/tag/variation-subtle.svg b/apps/pie-docs/src/assets/img/components/tag/variation-subtle.svg deleted file mode 100644 index bb2d9eb4d7..0000000000 --- a/apps/pie-docs/src/assets/img/components/tag/variation-subtle.svg +++ /dev/null @@ -1 +0,0 @@ - \ 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/overview/overview.md b/apps/pie-docs/src/components/tag/overview/overview.md index e0a116d644..8cbaa9df61 100644 --- a/apps/pie-docs/src/components/tag/overview/overview.md +++ b/apps/pie-docs/src/components/tag/overview/overview.md @@ -52,7 +52,8 @@ Tags can be embedded in other components such as cards, data tables (among other type: listTypes.ordered, items: [ "**Icon (Optional):** Visually supports the label.", - "**Label:** Provides informative information to the user." + "**Label:** Provides information about the content or purpose of the tag.", + "**Container**: Background container that organises the information." ] } %} @@ -60,87 +61,244 @@ Tags can be embedded in other components such as cards, data tables (among other ## Variations -Tags have two levels of emphasis, strong and subtle. Not all colour available within the subtle emphasis are available within the strong emphasis. +### 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 %} -### Strong - -Used when a high contrast tag is required. - -{% contentPageImage { - src:"../../../assets/img/components/tag/variation-strong.svg", - alt: "Strong tags with bold and strong background color.", - width: 286 -} %} - -### Subtle - -Used when a low contrast tag is required. - -{% contentPageImage { - src:"../../../assets/img/components/tag/variation-subtle.svg", - alt: "Subtle tag with less contrast colors.", - width: 362 -} %} - ---- +___ ## Modifiers +### Emphasis + +Tags are available in two types of emphasis. +Not all colour 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. -{% contentPageImage { - src:"../../../assets/img/components/tag/modifier-icon.svg", - alt: "A tag with an icon.", - width: 61 -} %} +{% 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 %} -### Disabled +--- -{% contentPageImage { - src:"../../../assets/img/components/tag/modifier-disabled.svg", - alt: "A disabled tag.", - width: 61 -} %} +## Sizes ---- +{% contentLayout %} + {% contentItem %} +

Small

+

16px height. Icon isn’t available at the small size option.

+ {% 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 %} -## Sizes +--- -Outlines the Tag sizes that are available, and where they should be used across our products. +## 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 %} -### Height +--- -Two size options are available to suit the scale required. +## Content -{% componentDetailsTable { - tableData: sizes -} %} +### Label guidance -### Width +Tag doesn’t have a maximum width or overflow. The container width is dynamic to the content’s width. -Container width is dynamic to the content’s width and retains 4px left and right padding. +{% usage { + do: { + type: usageTypes.text, + items: [ + "Use label with concise and scannable text.", + "Use no more than 3 words in both Large and Small tag labels.", + "Use sentence case in the label." + ] + }, + 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." + ] + } +} %} -{% contentPageImage { - src:"../../../assets/img/components/tag/size-width.svg", - alt: "A tag tag with flexible width that hugs the content inside.", - width: 92 +{% 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 in the 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." + }] + } } %} ---- +___ -## Meaning and purpose +## Visual representation -Tags can be used to indicate status or used to convey specific meanings within JET which are displayed below. +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/meaning-and-purpose.svg", - alt: "Meaning of colors in a tag and purpose of the tags.", - width: 318 + src:"../../../assets/img/components/tag/visual-representation.svg", + alt: "Specific meaning of colors and the purpose of tags.", + width: "352px" } %} -___ +--- ## Examples @@ -150,22 +308,33 @@ Outlines the atomic level interactive elements for the component. 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: 827 -} %} - -{% contentPageImage { - src:"../../../assets/img/components/tag/example-ltr-menu-item.svg", - alt: "A left-to-right example of disabled tags on a menu item card.", - width: 912 + width: "827px" } %} {% contentPageImage { - src:"../../../assets/img/components/tag/example-ltr-disabled-menu-item.svg", - alt: "A left-to-right example of disabled tag on a disabled menu item card.", - width: 912 + 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 @@ -173,15 +342,15 @@ Here are some examples of tags in left-to-right context: Here are some examples of tags in right-to-left context: {% contentPageImage { - src:"../../../assets/img/components/tag/example-rtl-restaurant-listing.svg", - alt: "A right-to-left example of a tag used on a restaurant listing card.", - width: 827 + 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/example-rtl-disabled-menu-item.svg", - alt: "A right-to-left example of disabled tag on a disabled menu item card.", - width: 912 + src: "../../../assets/img/components/tag/rtl-example-price-breakdown.svg", + alt: "A right-to-left example of an offer tag on used in price breakdown.", + width: "359px" } %} ___ From d6bc04f5f093eda3e2c3050e3bc73b5db9bb0875 Mon Sep 17 00:00:00 2001 From: Raouf Date: Wed, 17 Jan 2024 19:23:06 +0100 Subject: [PATCH 5/9] feat(pie-tag): DSW-1523 add pie tag code docs (#1175) * feat(pie-tag): DSW-1523 add pie tag code docs * fix(pie-docs): DSW-1523 fix navigation --- apps/pie-docs/src/components/tag/code/code.md | 148 ++++++++++++++++++ .../src/components/tag/code/props.json | 41 +++++ .../src/components/tag/code/slots.json | 19 +++ .../src/components/tag/overview/overview.md | 4 +- .../snapshots/expected-routes.snapshot.json | 1 + packages/components/pie-tag/README.md | 85 +--------- 6 files changed, 216 insertions(+), 82 deletions(-) create mode 100644 apps/pie-docs/src/components/tag/code/code.md create mode 100644 apps/pie-docs/src/components/tag/code/props.json create mode 100644 apps/pie-docs/src/components/tag/code/slots.json 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..662c6b6571 --- /dev/null +++ b/apps/pie-docs/src/components/tag/code/code.md @@ -0,0 +1,148 @@ +--- +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)." +} %} + + +## Peer Dependencies + +When using `pie-tag`, you will also need to include a couple of dependencies to ensure the component renders as expected. + +{% notification { + type: "neutral", + iconName: "link", + message: "See the [PIE Wiki](https://github.com/justeattakeaway/pie-aperture/tree/main) for more information on peer dependencies." +} %} + +## 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 index 8cbaa9df61..658b265ced 100644 --- a/apps/pie-docs/src/components/tag/overview/overview.md +++ b/apps/pie-docs/src/components/tag/overview/overview.md @@ -1,7 +1,7 @@ --- eleventyNavigation: - key: Tag - parent: Components + key: Overview + parent: Tag order: 1 eleventyComputed: sizes: "{% include './sizes.json' %}" diff --git a/apps/pie-docs/test/snapshots/expected-routes.snapshot.json b/apps/pie-docs/test/snapshots/expected-routes.snapshot.json index 4a9e6aa383..b1af74ffcf 100644 --- a/apps/pie-docs/test/snapshots/expected-routes.snapshot.json +++ b/apps/pie-docs/test/snapshots/expected-routes.snapshot.json @@ -60,6 +60,7 @@ "components/switch/code", "components/switch/overview", "components/tabs", + "components/tag/code", "components/tag/overview", "components/text-input", "components/textarea", 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 From a2167c369cfcb40ed30222520ee5beb122056eac Mon Sep 17 00:00:00 2001 From: Raouf Date: Fri, 26 Jan 2024 15:49:05 +0100 Subject: [PATCH 6/9] fix(pie-docs): DSW-1523 address PR comments --- apps/pie-docs/src/components/tag/code/code.md | 11 ----------- .../src/components/tag/overview/overview.md | 16 ++++++++-------- 2 files changed, 8 insertions(+), 19 deletions(-) diff --git a/apps/pie-docs/src/components/tag/code/code.md b/apps/pie-docs/src/components/tag/code/code.md index 662c6b6571..0c33a6135c 100644 --- a/apps/pie-docs/src/components/tag/code/code.md +++ b/apps/pie-docs/src/components/tag/code/code.md @@ -128,17 +128,6 @@ import { PieTag } from '@justeattakeaway/pie-tag/dist/react'; message: "For more examples, see [here](https://github.com/justeattakeaway/pie-aperture/tree/main)." } %} - -## Peer Dependencies - -When using `pie-tag`, you will also need to include a couple of dependencies to ensure the component renders as expected. - -{% notification { - type: "neutral", - iconName: "link", - message: "See the [PIE Wiki](https://github.com/justeattakeaway/pie-aperture/tree/main) for more information on peer dependencies." -} %} - ## Changelog {% notification { diff --git a/apps/pie-docs/src/components/tag/overview/overview.md b/apps/pie-docs/src/components/tag/overview/overview.md index 658b265ced..0313e8fe2a 100644 --- a/apps/pie-docs/src/components/tag/overview/overview.md +++ b/apps/pie-docs/src/components/tag/overview/overview.md @@ -15,7 +15,7 @@ Tags can be embedded in other components such as cards, data tables (among other {% contentPageImage { src:"../../../assets/img/components/tag/overview.svg", - alt: "A group of tags that are horizontally stacked together." + alt: "A group of tags." } %} --- @@ -147,7 +147,7 @@ ___ ### Emphasis Tags are available in two types of emphasis. -Not all colour available within the subtle emphasis are available within the strong emphasis, for example, Brand, Neutral - alternative, Outline and Ghost have only Subtle variations. +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 %} @@ -198,7 +198,7 @@ Icons can be used to visually support the Tag’s label. Only available at the l {% contentLayout %} {% contentItem %}

Small

-

16px height. Icon isn’t available at the small size option.

+

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

{% contentPageImage { src: "../../../assets/img/components/tag/size-small.svg", width: "37px", @@ -253,9 +253,9 @@ Tag doesn’t have a maximum width or overflow. The container width is dynamic t do: { type: usageTypes.text, items: [ - "Use label with concise and scannable text.", - "Use no more than 3 words in both Large and Small tag labels.", - "Use sentence case in the label." + "Use concise and scannable text.", + "Use 3 words or fewer.", + "Use sentence case." ] }, dont: { @@ -273,7 +273,7 @@ Tag doesn’t have a maximum width or overflow. The container width is dynamic t items: [{ src: "../../../assets/img/components/tag/content-label-guidance-do.svg", width: "88px", - alt: "A tag with a one word in the label." + alt: "A tag with a one-word label." }] }, dont: { @@ -349,7 +349,7 @@ Here are some examples of tags in right-to-left context: {% contentPageImage { src: "../../../assets/img/components/tag/rtl-example-price-breakdown.svg", - alt: "A right-to-left example of an offer tag on used in price breakdown.", + alt: "A right-to-left example of an offer tag used in a price breakdown.", width: "359px" } %} From 1d4bfb86943353feba1be57b070cd7254682b626 Mon Sep 17 00:00:00 2001 From: Raouf Date: Fri, 26 Jan 2024 16:00:15 +0100 Subject: [PATCH 7/9] fix(pie-docs): DSW-1523 rebase --- apps/pie-docs/src/components/tag/overview/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/pie-docs/src/components/tag/overview/overview.md b/apps/pie-docs/src/components/tag/overview/overview.md index 0313e8fe2a..68cf23bde0 100644 --- a/apps/pie-docs/src/components/tag/overview/overview.md +++ b/apps/pie-docs/src/components/tag/overview/overview.md @@ -2,7 +2,7 @@ eleventyNavigation: key: Overview parent: Tag - order: 1 + order: 43 eleventyComputed: sizes: "{% include './sizes.json' %}" shouldShowContents: true From fd58ee9dac7dd3625069c7bbfd17e2c1c27ba6ce Mon Sep 17 00:00:00 2001 From: Raouf Date: Fri, 26 Jan 2024 16:08:54 +0100 Subject: [PATCH 8/9] fix(pie-docs): DSW-1523 update heading sizes --- apps/pie-docs/src/components/tag/overview/overview.md | 10 +++++----- apps/pie-docs/src/components/tag/tag.md | 1 + 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/apps/pie-docs/src/components/tag/overview/overview.md b/apps/pie-docs/src/components/tag/overview/overview.md index 68cf23bde0..8454ccec87 100644 --- a/apps/pie-docs/src/components/tag/overview/overview.md +++ b/apps/pie-docs/src/components/tag/overview/overview.md @@ -2,7 +2,7 @@ eleventyNavigation: key: Overview parent: Tag - order: 43 + order: 1 eleventyComputed: sizes: "{% include './sizes.json' %}" shouldShowContents: true @@ -151,7 +151,7 @@ Not all colours available within the subtle emphasis are available within the st {% contentLayout %} {% contentItem %} -

Strong

+

Strong

{% contentPageImage { src: "../../../assets/img/components/tag/modifier-emphasis-strong.svg", width: "49px", @@ -159,7 +159,7 @@ Not all colours available within the subtle emphasis are available within the st } %} {% endcontentItem %} {% contentItem %} -

Subtle

+

Subtle

{% contentPageImage { src: "../../../assets/img/components/tag/modifier-emphasis-subtle.svg", width: "49px", @@ -174,7 +174,7 @@ Icons can be used to visually support the Tag’s label. Only available at the l {% contentLayout %} {% contentItem %} -

With icon

+

With icon

{% contentPageImage { src: "../../../assets/img/components/tag/modifier-icon.svg", width: "69px", @@ -182,7 +182,7 @@ Icons can be used to visually support the Tag’s label. Only available at the l } %} {% endcontentItem %} {% contentItem %} -

Without icon

+

Without icon

{% contentPageImage { src: "../../../assets/img/components/tag/modifier-no-icon.svg", width: "49px", diff --git a/apps/pie-docs/src/components/tag/tag.md b/apps/pie-docs/src/components/tag/tag.md index 4baa2470ce..48f283a9aa 100644 --- a/apps/pie-docs/src/components/tag/tag.md +++ b/apps/pie-docs/src/components/tag/tag.md @@ -3,4 +3,5 @@ eleventyNavigation: key: Tag parent: Components url: /components/tag/overview/ + order: 42 --- \ No newline at end of file From d6b21b5a8236e2ce740d956ac628dbdbf2397e31 Mon Sep 17 00:00:00 2001 From: Raouf Date: Fri, 26 Jan 2024 16:26:30 +0100 Subject: [PATCH 9/9] fix(pie-docs): DSW-1523 remove unused file --- .../src/components/tag/overview/overview.md | 2 -- .../src/components/tag/overview/sizes.json | 34 ------------------- 2 files changed, 36 deletions(-) delete mode 100644 apps/pie-docs/src/components/tag/overview/sizes.json diff --git a/apps/pie-docs/src/components/tag/overview/overview.md b/apps/pie-docs/src/components/tag/overview/overview.md index 8454ccec87..31f393242e 100644 --- a/apps/pie-docs/src/components/tag/overview/overview.md +++ b/apps/pie-docs/src/components/tag/overview/overview.md @@ -3,8 +3,6 @@ eleventyNavigation: key: Overview parent: Tag order: 1 -eleventyComputed: - sizes: "{% include './sizes.json' %}" shouldShowContents: true --- diff --git a/apps/pie-docs/src/components/tag/overview/sizes.json b/apps/pie-docs/src/components/tag/overview/sizes.json deleted file mode 100644 index 78f791cfd4..0000000000 --- a/apps/pie-docs/src/components/tag/overview/sizes.json +++ /dev/null @@ -1,34 +0,0 @@ -{ - "headings": [ - "", - "Size", - "Height", - "Notes" - ], - "rows": [ - [ - { - "type": "image", - "item": { - "src": "../../../assets/img/components/tag/size-height-large.svg", - "alt": "Large size tag with 24px height." - } - }, - "Large", - "24px", - "-" - ], - [ - { - "type": "image", - "item": { - "src": "../../../assets/img/components/tag/size-height-small.svg", - "alt": "Small size tag with 16px height." - } - }, - "Small", - "16px", - "Icons are not available for the small size." - ] - ] -} \ No newline at end of file