diff --git a/.changeset/fuzzy-wolves-visit.md b/.changeset/fuzzy-wolves-visit.md
new file mode 100644
index 0000000000..656da20cb3
--- /dev/null
+++ b/.changeset/fuzzy-wolves-visit.md
@@ -0,0 +1,5 @@
+---
+"pie-docs": minor
+---
+
+[Updated] - the tag overview section
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 d54d760754..bc3de942f5 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,32 @@
-
\ 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
deleted file mode 100644
index bddc9018c3..0000000000
--- a/apps/pie-docs/src/assets/img/components/tag/content-label-guidance-do.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ 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
deleted file mode 100644
index 81e329a866..0000000000
--- a/apps/pie-docs/src/assets/img/components/tag/content-label-guidance-don_t.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-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..8770645a0b
--- /dev/null
+++ b/apps/pie-docs/src/assets/img/components/tag/example-ltr-disabled-menu-item.svg
@@ -0,0 +1,69 @@
+
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..49a238f027
--- /dev/null
+++ b/apps/pie-docs/src/assets/img/components/tag/example-ltr-restaurant-listing.svg
@@ -0,0 +1,63 @@
+
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..f9addcaea0
--- /dev/null
+++ b/apps/pie-docs/src/assets/img/components/tag/example-rtl-disabled-menu-item.svg
@@ -0,0 +1,68 @@
+
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..1bb7bf746b
--- /dev/null
+++ b/apps/pie-docs/src/assets/img/components/tag/example-rtl-restaurant-listing.svg
@@ -0,0 +1,64 @@
+
diff --git a/apps/pie-docs/src/assets/img/components/tag/interactive-tag.svg b/apps/pie-docs/src/assets/img/components/tag/interactive-tag.svg
new file mode 100644
index 0000000000..b96eb4bb9b
--- /dev/null
+++ b/apps/pie-docs/src/assets/img/components/tag/interactive-tag.svg
@@ -0,0 +1,102 @@
+
\ No newline at end of file
diff --git a/apps/pie-docs/src/assets/img/components/tag/long-label.svg b/apps/pie-docs/src/assets/img/components/tag/long-label.svg
new file mode 100644
index 0000000000..d5d4591e99
--- /dev/null
+++ b/apps/pie-docs/src/assets/img/components/tag/long-label.svg
@@ -0,0 +1,12 @@
+
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
deleted file mode 100644
index 7ec82ce24d..0000000000
--- a/apps/pie-docs/src/assets/img/components/tag/ltr-example-disabled-menu-card.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-offer.svg b/apps/pie-docs/src/assets/img/components/tag/ltr-example-offer.svg
deleted file mode 100644
index f142c60a71..0000000000
--- a/apps/pie-docs/src/assets/img/components/tag/ltr-example-offer.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-opening-hours.svg b/apps/pie-docs/src/assets/img/components/tag/ltr-example-opening-hours.svg
deleted file mode 100644
index 03f3a797e4..0000000000
--- a/apps/pie-docs/src/assets/img/components/tag/ltr-example-opening-hours.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-restaurant-listing.svg b/apps/pie-docs/src/assets/img/components/tag/ltr-example-restaurant-listing.svg
deleted file mode 100644
index 73f42bdca0..0000000000
--- a/apps/pie-docs/src/assets/img/components/tag/ltr-example-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/meaning-and-purpose.svg b/apps/pie-docs/src/assets/img/components/tag/meaning-and-purpose.svg
new file mode 100644
index 0000000000..5115ad6d00
--- /dev/null
+++ b/apps/pie-docs/src/assets/img/components/tag/meaning-and-purpose.svg
@@ -0,0 +1,16 @@
+
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
index cc6f599cff..9120288653 100644
--- 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
@@ -1 +1,19 @@
-
\ No newline at end of file
+
+
\ 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
index 08ed9e0b74..b6d2fbc34a 100644
--- 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
@@ -1 +1,19 @@
-
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/apps/pie-docs/src/assets/img/components/tag/modifier-icon-leading.svg b/apps/pie-docs/src/assets/img/components/tag/modifier-icon-leading.svg
new file mode 100644
index 0000000000..af743ca1f9
--- /dev/null
+++ b/apps/pie-docs/src/assets/img/components/tag/modifier-icon-leading.svg
@@ -0,0 +1,12 @@
+
diff --git a/apps/pie-docs/src/assets/img/components/tag/modifier-icon-trailing.svg b/apps/pie-docs/src/assets/img/components/tag/modifier-icon-trailing.svg
new file mode 100644
index 0000000000..993880bc27
--- /dev/null
+++ b/apps/pie-docs/src/assets/img/components/tag/modifier-icon-trailing.svg
@@ -0,0 +1,18 @@
+
\ 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
deleted file mode 100644
index d36f66a869..0000000000
--- a/apps/pie-docs/src/assets/img/components/tag/modifier-icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ 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
deleted file mode 100644
index 31ddad6ce9..0000000000
--- a/apps/pie-docs/src/assets/img/components/tag/modifier-no-icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/pie-docs/src/assets/img/components/tag/non-interactive-tag.svg b/apps/pie-docs/src/assets/img/components/tag/non-interactive-tag.svg
new file mode 100644
index 0000000000..b50fac0d57
--- /dev/null
+++ b/apps/pie-docs/src/assets/img/components/tag/non-interactive-tag.svg
@@ -0,0 +1,42 @@
+
\ 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
deleted file mode 100644
index 7e06214daf..0000000000
--- a/apps/pie-docs/src/assets/img/components/tag/rtl-example-price-breakdown.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ 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
deleted file mode 100644
index dffe3fc428..0000000000
--- a/apps/pie-docs/src/assets/img/components/tag/rtl-example-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/size-large.svg b/apps/pie-docs/src/assets/img/components/tag/size-large.svg
index b093389a72..aed4043b9e 100644
--- a/apps/pie-docs/src/assets/img/components/tag/size-large.svg
+++ b/apps/pie-docs/src/assets/img/components/tag/size-large.svg
@@ -1 +1,19 @@
-
\ No newline at end of file
+
+
\ 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
index e8e70e5c07..930c9b55a3 100644
--- a/apps/pie-docs/src/assets/img/components/tag/size-small.svg
+++ b/apps/pie-docs/src/assets/img/components/tag/size-small.svg
@@ -1 +1,9 @@
-
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/apps/pie-docs/src/assets/img/components/tag/state-active.svg b/apps/pie-docs/src/assets/img/components/tag/state-active.svg
new file mode 100644
index 0000000000..885c4793cb
--- /dev/null
+++ b/apps/pie-docs/src/assets/img/components/tag/state-active.svg
@@ -0,0 +1,13 @@
+
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
index 6cd76a2c87..0115f9de1d 100644
--- a/apps/pie-docs/src/assets/img/components/tag/state-default.svg
+++ b/apps/pie-docs/src/assets/img/components/tag/state-default.svg
@@ -1 +1,18 @@
-
\ No newline at end of file
+
\ 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
index b6e499c907..a4da844e48 100644
--- a/apps/pie-docs/src/assets/img/components/tag/state-disabled.svg
+++ b/apps/pie-docs/src/assets/img/components/tag/state-disabled.svg
@@ -1 +1,21 @@
-
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/apps/pie-docs/src/assets/img/components/tag/state-focus.svg b/apps/pie-docs/src/assets/img/components/tag/state-focus.svg
new file mode 100644
index 0000000000..547d6bdeaa
--- /dev/null
+++ b/apps/pie-docs/src/assets/img/components/tag/state-focus.svg
@@ -0,0 +1,14 @@
+
diff --git a/apps/pie-docs/src/assets/img/components/tag/state-hover.svg b/apps/pie-docs/src/assets/img/components/tag/state-hover.svg
new file mode 100644
index 0000000000..a1c3c67f50
--- /dev/null
+++ b/apps/pie-docs/src/assets/img/components/tag/state-hover.svg
@@ -0,0 +1,13 @@
+
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
deleted file mode 100644
index 2d779e48f1..0000000000
--- a/apps/pie-docs/src/assets/img/components/tag/variation-type-blue.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-brand-02.svg b/apps/pie-docs/src/assets/img/components/tag/variation-type-brand-02.svg
new file mode 100644
index 0000000000..41e44f33ca
--- /dev/null
+++ b/apps/pie-docs/src/assets/img/components/tag/variation-type-brand-02.svg
@@ -0,0 +1,18 @@
+
\ No newline at end of file
diff --git a/apps/pie-docs/src/assets/img/components/tag/variation-type-brand-03.svg b/apps/pie-docs/src/assets/img/components/tag/variation-type-brand-03.svg
new file mode 100644
index 0000000000..d31ef176ab
--- /dev/null
+++ b/apps/pie-docs/src/assets/img/components/tag/variation-type-brand-03.svg
@@ -0,0 +1,18 @@
+
\ No newline at end of file
diff --git a/apps/pie-docs/src/assets/img/components/tag/variation-type-brand-04.svg b/apps/pie-docs/src/assets/img/components/tag/variation-type-brand-04.svg
new file mode 100644
index 0000000000..750638b267
--- /dev/null
+++ b/apps/pie-docs/src/assets/img/components/tag/variation-type-brand-04.svg
@@ -0,0 +1,12 @@
+
diff --git a/apps/pie-docs/src/assets/img/components/tag/variation-type-brand-06.svg b/apps/pie-docs/src/assets/img/components/tag/variation-type-brand-06.svg
new file mode 100644
index 0000000000..556a58af55
--- /dev/null
+++ b/apps/pie-docs/src/assets/img/components/tag/variation-type-brand-06.svg
@@ -0,0 +1,12 @@
+
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
deleted file mode 100644
index 7c411c199d..0000000000
--- a/apps/pie-docs/src/assets/img/components/tag/variation-type-brand.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-error.svg b/apps/pie-docs/src/assets/img/components/tag/variation-type-error.svg
new file mode 100644
index 0000000000..38bd07e60e
--- /dev/null
+++ b/apps/pie-docs/src/assets/img/components/tag/variation-type-error.svg
@@ -0,0 +1,33 @@
+
+
\ 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
index 4ba5c3c7c9..14c44d49c7 100644
--- 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
@@ -1 +1,19 @@
-
\ No newline at end of file
+
+
\ 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
deleted file mode 100644
index 47e68d6b3d..0000000000
--- a/apps/pie-docs/src/assets/img/components/tag/variation-type-green.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-information.svg b/apps/pie-docs/src/assets/img/components/tag/variation-type-information.svg
new file mode 100644
index 0000000000..e445d1bcb8
--- /dev/null
+++ b/apps/pie-docs/src/assets/img/components/tag/variation-type-information.svg
@@ -0,0 +1,33 @@
+
+
\ 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
index 6d40bdc91b..01baa661b9 100644
--- 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
@@ -1 +1,19 @@
-
\ No newline at end of file
+
+
\ 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
index 991dd5c402..a945ce5e22 100644
--- 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
@@ -1 +1,33 @@
-
\ No newline at end of file
+
+
\ 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
index 8b76a5e1c7..5b1fc994ad 100644
--- 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
@@ -1 +1,22 @@
-
\ No newline at end of file
+
+
\ 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
deleted file mode 100644
index 47c5252365..0000000000
--- a/apps/pie-docs/src/assets/img/components/tag/variation-type-red.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-success.svg b/apps/pie-docs/src/assets/img/components/tag/variation-type-success.svg
new file mode 100644
index 0000000000..700af31341
--- /dev/null
+++ b/apps/pie-docs/src/assets/img/components/tag/variation-type-success.svg
@@ -0,0 +1,33 @@
+
+
\ No newline at end of file
diff --git a/apps/pie-docs/src/assets/img/components/tag/variation-type-warning.svg b/apps/pie-docs/src/assets/img/components/tag/variation-type-warning.svg
new file mode 100644
index 0000000000..a34970bce1
--- /dev/null
+++ b/apps/pie-docs/src/assets/img/components/tag/variation-type-warning.svg
@@ -0,0 +1,33 @@
+
+
\ 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
deleted file mode 100644
index 226b03d85b..0000000000
--- a/apps/pie-docs/src/assets/img/components/tag/variation-type-yellow.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ 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
deleted file mode 100644
index 27019537ad..0000000000
--- a/apps/pie-docs/src/assets/img/components/tag/visual-representation.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/pie-docs/src/assets/styles/base/_layout.scss b/apps/pie-docs/src/assets/styles/base/_layout.scss
index 26eee74d68..7f2c2c80c6 100644
--- a/apps/pie-docs/src/assets/styles/base/_layout.scss
+++ b/apps/pie-docs/src/assets/styles/base/_layout.scss
@@ -146,6 +146,7 @@
}
> ul + h3,
+ > ol + h3,
> p + h3,
> div + h3,
> p + h4,
diff --git a/apps/pie-docs/src/components/tag/overview/overview.md b/apps/pie-docs/src/components/tag/overview/overview.md
index 9708168084..2da6d27fa9 100644
--- a/apps/pie-docs/src/components/tag/overview/overview.md
+++ b/apps/pie-docs/src/components/tag/overview/overview.md
@@ -5,6 +5,8 @@ eleventyNavigation:
order: 1
shouldShowContents: true
permalink: components/tag/
+eleventyComputed:
+ sizes: "{% include './sizes.json' %}"
---
## Overview
@@ -14,7 +16,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."
+ alt: "A group of tags indicating Evening menu only, Spicy and vegetarian."
} %}
---
@@ -32,7 +34,8 @@ Tags can be embedded in other components such as cards, data tables (among other
dont: {
type: usageTypes.text,
items: [
- "Don’t use when an interaction is required, use a [chip](/components/chip/) if needed."
+ "Don’t use for interactions crucial for the flow.",
+ "If only an icon is required to convey the message, use the tag: icon only component instead."
]
}
} %}
@@ -44,15 +47,15 @@ Tags can be embedded in other components such as cards, data tables (among other
{% contentPageImage {
src:"../../../assets/img/components/tag/anatomy.svg",
alt: "Anatomy of a tag.",
- width: 120
+ width: 169
} %}
{% 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."
+ "**Label:** Provides information to the user.",
+ "**Trailing icon (Optional):** Indicates additional actions or further interactions."
]
} %}
@@ -60,181 +63,262 @@ Tags can be embedded in other components such as cards, data tables (among other
## Variations
-### Type
+### Non-interactive
-Tag can use colour for visual categorisation.
+The non-interactive variation should be used by default, and should be used when the tag doesn’t require any interactivity.
+
+{% contentPageImage {
+ src:"../../../assets/img/components/tag/non-interactive-tag.svg",
+ alt: "A tag with a leading icon placeholder and a label text",
+ width: "69px"
+} %}
+
+### Interactive
+
+The interactive variation should be used for non-crucial interactions.
+
+{% contentPageImage {
+ src:"../../../assets/img/components/tag/interactive-tag.svg",
+ alt: "The image shows different states of the interactive tag component such as default, hover and active states",
+ width: "224px"
+} %}
+
+---
+
+## Modifiers
+
+### Icon
+
+When incorporating an icon into a tag, it is essential to ensure that the icon clearly supports the label. Icons are only available in the large size of the tag.
{% contentLayout %}
{% contentItem %}
-
Neutral
+
Leading
+
Leading icon provides context and visually supports the label and it is available for both variants.
{% contentPageImage {
- src: "../../../assets/img/components/tag/variation-type-neutral.svg",
- width: "106px",
- alt: "A pair of strong and subtle neutral tags."
+ src: "../../../assets/img/components/tag/modifier-icon-leading.svg",
+ width: "69px",
+ alt: "A tag component with a leading placeholder icon and a label text"
} %}
{% endcontentItem %}
{% contentItem %}
-
Blue
+
Trailing
+
Trailing icon offers additional actions or indicates further interactions, for this reason it is only available in the interactive set.
{% contentPageImage {
- src: "../../../assets/img/components/tag/variation-type-blue.svg",
- width: "106px",
- alt: "A pair of strong and subtle tags in blue color."
+ src: "../../../assets/img/components/tag/modifier-icon-trailing.svg",
+ width: "69px",
+ alt: "A tag component with a trailing placeholder icon and a label text"
} %}
{% endcontentItem %}
+{% endcontentLayout %}
+
+### Emphasis
+
+Depending on the level of visual prominence you want to give to the tag, you can choose between strong or subtle emphasis.
+
+{% contentLayout %}
{% contentItem %}
-
Green
+
Strong
{% contentPageImage {
- src: "../../../assets/img/components/tag/variation-type-green.svg",
- width: "106px",
- alt: "A pair of strong and subtle tags in green color."
+ src: "../../../assets/img/components/tag/modifier-emphasis-strong.svg",
+ width: "69px",
+ alt: "A tag component with an icon placeholder and label text. The component has a dark background color to indicate string emphasis."
} %}
{% endcontentItem %}
{% contentItem %}
-
Yellow
+
Subtle
{% contentPageImage {
- src: "../../../assets/img/components/tag/variation-type-yellow.svg",
- width: "106px",
- alt: "A pair of strong and subtle tags in yellow color."
+ src: "../../../assets/img/components/tag/modifier-emphasis-subtle.svg",
+ width: "69px",
+ alt: "A tag component with an icon placeholder and label text. The component has a subtle background color (light grey) to indicate subtle emphasis.",
+ variant: "secondary"
} %}
{% endcontentItem %}
+{% endcontentLayout %}
+
+### Colours
+
+Select from a range of colour options across the two levels of emphasis.
+
+{% contentLayout %}
{% contentItem %}
-
Red
+
Neutral
{% contentPageImage {
- src: "../../../assets/img/components/tag/variation-type-red.svg",
- width: "106px",
- alt: "A pair of strong and subtle tags in red color."
+ src: "../../../assets/img/components/tag/variation-type-neutral.svg",
+ width: "163px",
+ alt: "A pair of strong and subtle neutral tags.",
+ variant: "secondary"
} %}
{% endcontentItem %}
{% contentItem %}
-
Brand
+
Neutral alternative
{% contentPageImage {
- src: "../../../assets/img/components/tag/variation-type-brand.svg",
- width: "49px",
- alt: "A subtle tag in brand color."
+ src: "../../../assets/img/components/tag/variation-type-neutral-alternative.svg",
+ width: "77px",
+ alt: "A subtle alternative for neutral tag."
} %}
{% endcontentItem %}
{% contentItem %}
-
Neutral - alternative
+
Ghost
{% contentPageImage {
- src: "../../../assets/img/components/tag/variation-type-neutral-alternative.svg",
- width: "49px",
- alt: "A subtle alternative for neutral tag."
+ src: "../../../assets/img/components/tag/variation-type-ghost.svg",
+ width: "77px",
+ alt: "A pair of strong and subtle tags in green color."
} %}
{% endcontentItem %}
{% contentItem %}
Outline
{% contentPageImage {
src: "../../../assets/img/components/tag/variation-type-outline.svg",
- width: "49px",
- alt: "An outline tag."
+ width: "77px",
+ alt: "A tag component with an outline."
} %}
{% endcontentItem %}
{% contentItem %}
-
Ghost
+
Information
{% contentPageImage {
- src: "../../../assets/img/components/tag/variation-type-ghost.svg",
- width: "49px",
- alt: "A ghost tag."
+ src: "../../../assets/img/components/tag/variation-type-information.svg",
+ width: "164px",
+ alt: "A pair of strong and subtle tags in blue color."
} %}
{% 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
+
Success
{% contentPageImage {
- src: "../../../assets/img/components/tag/modifier-emphasis-strong.svg",
- width: "49px",
- alt: "A variation of tag which uses strong colors."
+ src: "../../../assets/img/components/tag/variation-type-success.svg",
+ width: "164px",
+ alt: "A pair of strong and subtle tags in green color."
} %}
{% endcontentItem %}
{% contentItem %}
-
Subtle
+
Error
{% contentPageImage {
- src: "../../../assets/img/components/tag/modifier-emphasis-subtle.svg",
- width: "49px",
- alt: "A variation of tag which uses subtle colors."
+ src: "../../../assets/img/components/tag/variation-type-error.svg",
+ width: "164px",
+ alt: "A pair of strong and subtle tags in red color."
} %}
{% endcontentItem %}
-{% endcontentLayout %}
-
-### Icon
-
-Icons can be used to visually support the Tag’s label. Only available at the large size.
-
-{% contentLayout %}
{% contentItem %}
-
With icon
+
Warning
{% contentPageImage {
- src: "../../../assets/img/components/tag/modifier-icon.svg",
- width: "69px",
- alt: "A tag with an icon."
+ src: "../../../assets/img/components/tag/variation-type-warning.svg",
+ width: "164px",
+ alt: "A pair of strong and subtle tags in yellow color."
} %}
{% endcontentItem %}
{% contentItem %}
-
Without icon
+
02 Orange subtle
{% contentPageImage {
- src: "../../../assets/img/components/tag/modifier-no-icon.svg",
- width: "49px",
- alt: "A tag without an icon."
+ src: "../../../assets/img/components/tag/variation-type-brand-02.svg",
+ width: "77px",
+ alt: "A tag component in orange color."
} %}
{% endcontentItem %}
-{% endcontentLayout %}
-
----
-
-## Sizes
-
-{% contentLayout %}
{% contentItem %}
-
Small
-
16px height. Small tags don't support icons.
+
03 Cupcake
{% contentPageImage {
- src: "../../../assets/img/components/tag/size-small.svg",
- width: "37px",
- alt: "Small size tag with 16px height."
+ src: "../../../assets/img/components/tag/variation-type-brand-03.svg",
+ width: "78px",
+ alt: "A tag component in light blue color."
} %}
{% endcontentItem %}
{% contentItem %}
-
Large
-
24px height.
+
04 Berry
{% contentPageImage {
- src: "../../../assets/img/components/tag/size-large.svg",
- width: "126px",
- alt: "Large size tag with 24px height."
+ src: "../../../assets/img/components/tag/variation-type-brand-04.svg",
+ width: "78px",
+ alt: "A tag component in light pink color."
+ } %}
+ {% endcontentItem %}
+ {% contentItem %}
+
06 Aubergine
+ {% contentPageImage {
+ src: "../../../assets/img/components/tag/variation-type-brand-06.svg",
+ width: "78px",
+ alt: "A tag component in purple color."
} %}
{% endcontentItem %}
{% endcontentLayout %}
+___
+
+## Sizes
+
+### 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/long-label.svg",
+ alt: "A tag component with a long text",
+ width: "128px"
+} %}
+
+___
+
+## 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: "A collection of different tag variants",
+ width: "358px"
+} %}
+
---
-## States
+## Interactive states
+
+The interactive variation includes all interactive states, while the non-interactive variation only includes the default and disabled 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",
+ width: "70px",
alt: "Default state of a tag."
} %}
{% endcontentItem %}
+ {% contentItem %}
+
Hover
+ {% contentPageImage {
+ src: "../../../assets/img/components/tag/state-hover.svg",
+ width: "70px",
+ alt: "Hover state of a tag."
+ } %}
+ {% endcontentItem %}
+ {% contentItem %}
+
Active
+ {% contentPageImage {
+ src: "../../../assets/img/components/tag/state-active.svg",
+ width: "70px",
+ alt: "Active state of a tag."
+ } %}
+ {% endcontentItem %}
+ {% contentItem %}
+
Focus
+ {% contentPageImage {
+ src: "../../../assets/img/components/tag/state-focus.svg",
+ width: "78px",
+ alt: "Focus state of a tag."
+ } %}
+ {% endcontentItem %}
{% contentItem %}
Disabled
{% contentPageImage {
src: "../../../assets/img/components/tag/state-disabled.svg",
- width: "126px",
+ width: "70px",
alt: "Disabled state of a tag."
} %}
{% endcontentItem %}
@@ -242,117 +326,55 @@ Tag is available in 2 states. The disabled state has an opacity of 50%.
---
-## 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."
+ src: "../../../assets/img/components/tag/example-ltr-restaurant-listing.svg",
+ width: "343px",
+ alt: "A Burger King restaurant listing in a left-to-right language. with two tags in the top left corner, Promoted on the left and Stampcards on the right"
} %}
{% 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."
+ src: "../../../assets/img/components/tag/example-ltr-disabled-menu-item.svg",
+ width: "343px",
+ alt: "A menu item listing in a left to right language with a title, Menu item. Below it, an offer tag with 'Offer' and dietary tags indicating Vegan, Vegetarian, and Spicy",
+ width: "827px"
} %}
{% endcontentItem %}
{% endcontentLayout %}
-{% contentPageImage {
- src:"../../../assets/img/components/tag/ltr-example-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"
-} %}
+{% contentLayout %}
+ {% contentItem %}
+ {% contentPageImage {
+ src: "../../../assets/img/components/tag/example-rtl-restaurant-listing.svg",
+ width: "343px",
+ alt: "A Burger King restaurant listing in a right-to-left language (hebrew). with two tags in the top left corner, Promoted on the left and Stampcards on the right"
+ } %}
+ {% endcontentItem %}
+ {% contentItem %}
+ {% contentPageImage {
+ src: "../../../assets/img/components/tag/example-rtl-disabled-menu-item.svg",
+ width: "343px",
+ alt: "A menu item listing in a right to left (hebrew) language with a title, Menu item. Below it, an offer tag with 'Offer' and dietary tags indicating Vegan, Vegetarian, and Spicy",
+ width: "359px"
+ } %}
+ {% endcontentItem %}
+{% endcontentLayout %}
-___
+---
## Resources
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..644a4a82ec
--- /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-large.svg",
+ "alt": "a tag component in a large size"
+ }
+ },
+ "Large",
+ "24px",
+ "-"
+ ],
+ [
+ {
+ "type": "image",
+ "item": {
+ "src": "../../../assets/img/components/tag/size-small.svg",
+ "alt": "a tag component in a small size"
+ }
+ },
+ "Small",
+ "16px",
+ "Icons are not available for the small size."
+ ]
+ ]
+}
\ No newline at end of file