From 99e9dfceceb5c24889c10de4b309793b032db01e Mon Sep 17 00:00:00 2001 From: Raouf Date: Fri, 15 Nov 2024 16:37:16 +0100 Subject: [PATCH 1/5] refactor(pie-docs): DSW-2324 update the tag overview documentation --- .changeset/fuzzy-wolves-visit.md | 5 + .../src/assets/img/components/tag/anatomy.svg | 28 +- .../tag/content-label-guidance-do.svg | 1 - .../tag/content-label-guidance-don_t.svg | 1 - .../tag/example-ltr-disabled-menu-item.svg | 69 ++++ .../tag/example-ltr-restaurant-listing.svg | 63 +++ .../tag/example-rtl-disabled-menu-item.svg | 68 +++ .../tag/example-rtl-restaurant-listing.svg | 64 +++ .../img/components/tag/interactive-tag.svg | 102 +++++ .../assets/img/components/tag/long-label.svg | 12 + .../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 | 16 + .../tag/modifier-emphasis-strong.svg | 20 +- .../tag/modifier-emphasis-subtle.svg | 20 +- .../components/tag/modifier-icon-leading.svg | 12 + .../components/tag/modifier-icon-trailing.svg | 18 + .../img/components/tag/modifier-icon.svg | 1 - .../img/components/tag/modifier-no-icon.svg | 1 - .../components/tag/non-interactive-tag.svg | 42 ++ .../tag/rtl-example-price-breakdown.svg | 1 - .../tag/rtl-example-restaurant-listing.svg | 1 - .../assets/img/components/tag/size-large.svg | 20 +- .../assets/img/components/tag/size-small.svg | 10 +- .../img/components/tag/state-active.svg | 13 + .../img/components/tag/state-default.svg | 19 +- .../img/components/tag/state-disabled.svg | 22 +- .../assets/img/components/tag/state-focus.svg | 14 + .../assets/img/components/tag/state-hover.svg | 13 + .../components/tag/variation-type-blue.svg | 1 - .../tag/variation-type-brand-02.svg | 18 + .../tag/variation-type-brand-03.svg | 18 + .../tag/variation-type-brand-04.svg | 12 + .../tag/variation-type-brand-06.svg | 12 + .../components/tag/variation-type-brand.svg | 1 - .../components/tag/variation-type-error.svg | 33 ++ .../components/tag/variation-type-ghost.svg | 20 +- .../components/tag/variation-type-green.svg | 1 - .../tag/variation-type-information.svg | 33 ++ .../variation-type-neutral-alternative.svg | 20 +- .../components/tag/variation-type-neutral.svg | 34 +- .../components/tag/variation-type-outline.svg | 23 +- .../img/components/tag/variation-type-red.svg | 1 - .../components/tag/variation-type-success.svg | 33 ++ .../components/tag/variation-type-warning.svg | 33 ++ .../components/tag/variation-type-yellow.svg | 1 - .../components/tag/visual-representation.svg | 1 - .../src/assets/styles/base/_layout.scss | 1 + .../src/components/tag/overview/overview.md | 388 +++++++++--------- .../src/components/tag/overview/sizes.json | 34 ++ 52 files changed, 1167 insertions(+), 211 deletions(-) create mode 100644 .changeset/fuzzy-wolves-visit.md delete mode 100644 apps/pie-docs/src/assets/img/components/tag/content-label-guidance-do.svg delete mode 100644 apps/pie-docs/src/assets/img/components/tag/content-label-guidance-don_t.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-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/interactive-tag.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/long-label.svg delete mode 100644 apps/pie-docs/src/assets/img/components/tag/ltr-example-disabled-menu-card.svg delete mode 100644 apps/pie-docs/src/assets/img/components/tag/ltr-example-offer.svg delete mode 100644 apps/pie-docs/src/assets/img/components/tag/ltr-example-opening-hours.svg delete mode 100644 apps/pie-docs/src/assets/img/components/tag/ltr-example-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-icon-leading.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/modifier-icon-trailing.svg delete mode 100644 apps/pie-docs/src/assets/img/components/tag/modifier-icon.svg delete 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/non-interactive-tag.svg delete mode 100644 apps/pie-docs/src/assets/img/components/tag/rtl-example-price-breakdown.svg delete mode 100644 apps/pie-docs/src/assets/img/components/tag/rtl-example-restaurant-listing.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/state-active.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/state-focus.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/state-hover.svg delete 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-02.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/variation-type-brand-03.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/variation-type-brand-04.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/variation-type-brand-06.svg delete 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-error.svg delete 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-information.svg delete 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-success.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag/variation-type-warning.svg delete mode 100644 apps/pie-docs/src/assets/img/components/tag/variation-type-yellow.svg delete mode 100644 apps/pie-docs/src/assets/img/components/tag/visual-representation.svg create mode 100644 apps/pie-docs/src/components/tag/overview/sizes.json 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..34b3298e75 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,27 @@ - \ 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..cc848c752b 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 @@ -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 informative information to the user.", + "**Trailing icon (Optional):** Indicates additional actions or further interactions." ] } %} @@ -60,181 +63,260 @@ 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 interactive features tied to the instance. + +{% 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: "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 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 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 the strong modifier to indicate 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 the subtle modifier" } %} {% 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." } %} {% 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 %} + {% contentItem %} +

03 Cupcake

+ {% contentPageImage { + src: "../../../assets/img/components/tag/variation-type-brand-03.svg", + width: "78px", + alt: "A tag component in light blue color." } %} {% endcontentItem %} -{% endcontentLayout %} - ---- - -## Sizes - -{% contentLayout %} {% contentItem %} -

Small

-

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

+

04 Berry

{% 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-04.svg", + width: "78px", + alt: "A tag component in light pink color." } %} {% endcontentItem %} {% contentItem %} -

Large

-

24px height.

+

06 Aubergine

{% 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-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 +324,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 left-to-right example of a tag used on a restaurant listing card." } %} {% 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 left-to-right example of disabled offer tag in a menu item card.", + 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 right-to-left example of neutral and brand tags used on a restaurant listing card." + } %} + {% endcontentItem %} + {% contentItem %} + {% contentPageImage { + src: "../../../assets/img/components/tag/example-rtl-disabled-menu-item.svg", + width: "343px", + alt: "A right-to-left example of an offer tag used in a price breakdown.", + 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 From 4aaea989cb6d08d82b3e7dae458c732024655732 Mon Sep 17 00:00:00 2001 From: Raouf Date: Mon, 18 Nov 2024 15:16:55 +0100 Subject: [PATCH 2/5] fix(pie-tag): DSW-2324 update alt messages --- .../src/components/tag/overview/overview.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/apps/pie-docs/src/components/tag/overview/overview.md b/apps/pie-docs/src/components/tag/overview/overview.md index cc848c752b..23d2d3c068 100644 --- a/apps/pie-docs/src/components/tag/overview/overview.md +++ b/apps/pie-docs/src/components/tag/overview/overview.md @@ -16,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." } %} --- @@ -79,7 +79,7 @@ The interactive variation should be used for non-crucial interactions. {% contentPageImage { src:"../../../assets/img/components/tag/interactive-tag.svg", - alt: "Different states of the interactive tag component such as default, hover and active states", + alt: "The image shows different states of the interactive tag component such as default, hover and active states", width: "224px" } %} @@ -98,7 +98,7 @@ When incorporating an icon into a tag, it is essential to ensure that the icon c {% contentPageImage { src: "../../../assets/img/components/tag/modifier-icon-leading.svg", width: "69px", - alt: "A tag component with a leading icon and a label text" + alt: "A tag component with a leading placeholder icon and a label text" } %} {% endcontentItem %} {% contentItem %} @@ -107,7 +107,7 @@ When incorporating an icon into a tag, it is essential to ensure that the icon c {% contentPageImage { src: "../../../assets/img/components/tag/modifier-icon-trailing.svg", width: "69px", - alt: "A tag component with a trailing icon and a label text" + alt: "A tag component with a trailing placeholder icon and a label text" } %} {% endcontentItem %} {% endcontentLayout %} @@ -122,7 +122,7 @@ Depending on the level of visual prominence you want to give to the tag, you can {% contentPageImage { src: "../../../assets/img/components/tag/modifier-emphasis-strong.svg", width: "69px", - alt: "A tag component with the strong modifier to indicate emphasis" + alt: "A tag component with an icon placeholder and label text. The component has a dark background color to indicate string emphasis." } %} {% endcontentItem %} {% contentItem %} @@ -130,7 +130,7 @@ Depending on the level of visual prominence you want to give to the tag, you can {% contentPageImage { src: "../../../assets/img/components/tag/modifier-emphasis-subtle.svg", width: "69px", - alt: "A tag component with the subtle modifier" + alt: "A tag component with an icon placeholder and label text. The component has a subtle background color (light grey) to indicate subtle emphasis." } %} {% endcontentItem %} {% endcontentLayout %} @@ -336,14 +336,14 @@ Here are some examples of tags in left-to-right context: {% contentPageImage { src: "../../../assets/img/components/tag/example-ltr-restaurant-listing.svg", width: "343px", - alt: "A left-to-right example of a tag used on a restaurant listing card." + 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/example-ltr-disabled-menu-item.svg", width: "343px", - alt: "A left-to-right example of disabled offer tag in a menu item card.", + 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 %} @@ -359,14 +359,14 @@ Here are some examples of tags in right-to-left context: {% contentPageImage { src: "../../../assets/img/components/tag/example-rtl-restaurant-listing.svg", width: "343px", - alt: "A right-to-left example of neutral and brand tags used on a restaurant listing card." + 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 right-to-left example of an offer tag used in a price breakdown.", + 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 %} From e4fab415149e45973b9bdfe6dd40184ce5abcec5 Mon Sep 17 00:00:00 2001 From: Raouf Date: Tue, 19 Nov 2024 09:59:20 +0100 Subject: [PATCH 3/5] fix(pie-docs): DSW-2324 update content --- apps/pie-docs/src/components/tag/overview/overview.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/pie-docs/src/components/tag/overview/overview.md b/apps/pie-docs/src/components/tag/overview/overview.md index 23d2d3c068..10eaefa6c8 100644 --- a/apps/pie-docs/src/components/tag/overview/overview.md +++ b/apps/pie-docs/src/components/tag/overview/overview.md @@ -54,7 +54,7 @@ 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 to the user.", "**Trailing icon (Optional):** Indicates additional actions or further interactions." ] } %} @@ -65,7 +65,7 @@ Tags can be embedded in other components such as cards, data tables (among other ### Non-interactive -The non-interactive variation should be used by default, and should be used when the tag doesn’t require any interactive features tied to the instance. +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", From 192c486fca227d13abd7886d871cf3a37eaeb890 Mon Sep 17 00:00:00 2001 From: Raouf Date: Tue, 19 Nov 2024 10:57:59 +0100 Subject: [PATCH 4/5] fix(pie-docs): DSW-2324 update the anatomy picture --- .../src/assets/img/components/tag/anatomy.svg | 45 ++++++++++--------- 1 file changed, 25 insertions(+), 20 deletions(-) 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 34b3298e75..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,27 +1,32 @@ - - - - + + + + - - - + + + + + + + + + + + - - - - - - - - - + + + + + + - - + + - - + + From 2add5877386e246589e961495eb07cbef1a2c140 Mon Sep 17 00:00:00 2001 From: Raouf Date: Tue, 19 Nov 2024 18:22:21 +0100 Subject: [PATCH 5/5] fix(pie-tag): DSW-2324 update image background --- apps/pie-docs/src/components/tag/overview/overview.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/pie-docs/src/components/tag/overview/overview.md b/apps/pie-docs/src/components/tag/overview/overview.md index 10eaefa6c8..2da6d27fa9 100644 --- a/apps/pie-docs/src/components/tag/overview/overview.md +++ b/apps/pie-docs/src/components/tag/overview/overview.md @@ -130,7 +130,8 @@ Depending on the level of visual prominence you want to give to the tag, you can {% contentPageImage { 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." + 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 %} @@ -145,7 +146,8 @@ Select from a range of colour options across the two levels of emphasis. {% contentPageImage { src: "../../../assets/img/components/tag/variation-type-neutral.svg", width: "163px", - alt: "A pair of strong and subtle neutral tags." + alt: "A pair of strong and subtle neutral tags.", + variant: "secondary" } %} {% endcontentItem %} {% contentItem %}