From 0beb16a665f0e4c6d64cdd501d11dbed77d1ad4f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fernando=20de=20Fran=C3=A7a?= <448801+fernandofranca@users.noreply.github.com> Date: Tue, 25 Feb 2025 17:24:03 +0100 Subject: [PATCH 01/10] feat(pie-tag): DSW-2550 introduce component changes --- packages/components/pie-tag/src/index.ts | 57 +++++++++++++++++++++--- packages/components/pie-tag/src/tag.scss | 4 ++ 2 files changed, 55 insertions(+), 6 deletions(-) diff --git a/packages/components/pie-tag/src/index.ts b/packages/components/pie-tag/src/index.ts index 9716ea4da2..3ce415a958 100644 --- a/packages/components/pie-tag/src/index.ts +++ b/packages/components/pie-tag/src/index.ts @@ -1,5 +1,5 @@ import { - LitElement, html, unsafeCSS, nothing, + LitElement, html, unsafeCSS, nothing, type PropertyValues, } from 'lit'; import { property } from 'lit/decorators.js'; import { classMap, type ClassInfo } from 'lit/directives/class-map.js'; @@ -45,10 +45,50 @@ export class PieTag extends LitElement implements TagProps { @validPropertyValues(componentSelector, iconPlacements, defaultProps.iconPlacement) public iconPlacement = defaultProps.iconPlacement; + private isIconOnly = false; + + updated (changedProperties: PropertyValues) { + if (changedProperties.has('size')) this.checkIfIsIconOnly(); + } + + private checkIfIsIconOnly () { + // The size must be large + const isLargeSize = this.size === 'large'; + + // The default slot must be empty + const defaultSlotText = this.textContent?.trim(); + const isDefaultSlotEmpty = defaultSlotText === ''; + + // The icon slot must have some content + const iconSlot = this.shadowRoot?.querySelector('slot[name="icon"]') as HTMLSlotElement | null; + + if (isLargeSize && isDefaultSlotEmpty && iconSlot) { + const iconSlotNodes = iconSlot.assignedNodes({ flatten: true }); + + // The icon slot content must be an icon + if (iconSlotNodes && iconSlotNodes.length === 1) { + const firstNode = (iconSlotNodes[0] as Element); + const isIcon = firstNode.tagName.startsWith('ICON-'); + + this.isIconOnly = isIcon; + this.requestUpdate(); + + return; + } + } + + this.isIconOnly = false; + this.requestUpdate(); + } + + private handleSlotChange () { + this.checkIfIsIconOnly(); + } + private renderIconSlot () { if (this.size !== 'large') return nothing; - return html``; + return html``; } private renderTag (classes: ClassInfo) { @@ -57,7 +97,7 @@ export class PieTag extends LitElement implements TagProps { class="${classMap(classes)}" data-test-id="pie-tag"> ${this.renderIconSlot()} - + `; } @@ -81,19 +121,24 @@ export class PieTag extends LitElement implements TagProps { size, variant, iconPlacement, + isIconOnly, } = this; + // isInteractive can only be true when isIconOnly is false + const _isInteractive = isIconOnly ? false : isInteractive; + const classes = { 'c-tag': true, [`c-tag--${size}`]: true, [`c-tag--${variant}`]: true, 'is-disabled': disabled, 'c-tag--strong': isStrong, - 'c-tag--interactive': isInteractive, - [`c-tag--icon-placement--${iconPlacement}`]: isInteractive && iconPlacement, + 'c-tag--interactive': _isInteractive, + 'c-tag--icon-only': isIconOnly, + [`c-tag--icon-placement--${iconPlacement}`]: _isInteractive && iconPlacement, }; - if (isInteractive) { + if (_isInteractive) { return this.renderButtonTag(classes); } diff --git a/packages/components/pie-tag/src/tag.scss b/packages/components/pie-tag/src/tag.scss index 3c510f71d1..d348fb78be 100644 --- a/packages/components/pie-tag/src/tag.scss +++ b/packages/components/pie-tag/src/tag.scss @@ -69,6 +69,10 @@ // same as default styles } + &.c-tag--icon-only { + --tag-padding-block: var(--dt-spacing-a); + } + // Variant &.c-tag--neutral { &.c-tag--interactive { From 8c4df89c77aee64adae8ae716060e127116380ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fernando=20de=20Fran=C3=A7a?= <448801+fernandofranca@users.noreply.github.com> Date: Wed, 26 Feb 2025 13:53:29 +0100 Subject: [PATCH 02/10] feat(pie-tag): DSW-2550 update regular storybook story --- apps/pie-storybook/stories/pie-tag.stories.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/apps/pie-storybook/stories/pie-tag.stories.ts b/apps/pie-storybook/stories/pie-tag.stories.ts index 1f4172c187..68cb30b88a 100644 --- a/apps/pie-storybook/stories/pie-tag.stories.ts +++ b/apps/pie-storybook/stories/pie-tag.stories.ts @@ -165,3 +165,11 @@ export const Brand06 = createTagStory({ variant: 'brand-06' }, { exclude: ['isStrong'], }, }); + +export const IconOnly = createTagStory({ + size: 'large', + showIcon: true, + slot: '', + isInteractive: false, + variant: 'brand-06', +}, {}); From 63153091aa82d77bac58daab103d122bb148f238 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fernando=20de=20Fran=C3=A7a?= <448801+fernandofranca@users.noreply.github.com> Date: Thu, 27 Feb 2025 14:18:27 +0100 Subject: [PATCH 03/10] feat(pie-tag): DSW-2550 add pie-docs page --- .../tag-icon-only/tag-icon-only.json | 5 + .../components/tag-icon-only/tag-icon-only.md | 300 ++++++++++++++++++ .../snapshots/expected-routes.snapshot.json | 1 + 3 files changed, 306 insertions(+) create mode 100644 apps/pie-docs/src/components/tag-icon-only/tag-icon-only.json create mode 100644 apps/pie-docs/src/components/tag-icon-only/tag-icon-only.md diff --git a/apps/pie-docs/src/components/tag-icon-only/tag-icon-only.json b/apps/pie-docs/src/components/tag-icon-only/tag-icon-only.json new file mode 100644 index 0000000000..3514190be8 --- /dev/null +++ b/apps/pie-docs/src/components/tag-icon-only/tag-icon-only.json @@ -0,0 +1,5 @@ +{ + "title": "Tag - Icon Only", + "navKey": "Tag - Icon Only", + "description": "An icon only tag is a small visual element used to represent and categorise information within a user interface through an icon." +} diff --git a/apps/pie-docs/src/components/tag-icon-only/tag-icon-only.md b/apps/pie-docs/src/components/tag-icon-only/tag-icon-only.md new file mode 100644 index 0000000000..934dec0fcb --- /dev/null +++ b/apps/pie-docs/src/components/tag-icon-only/tag-icon-only.md @@ -0,0 +1,300 @@ +--- +eleventyNavigation: + key: 'Tag - Icon Only' + parent: Components + order: 45 +--- + +## Overview +The purpose of the icon only tag is to provide a quick and visually appealing way to highlight or identify specific items, topics or attributes. Icon only tags enhance the user experience by simplifying content organisation and facilitating content discovery and filtering. Icon only 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-icon-only/overview.svg", + alt: "Tags containing icons only inside a Toast component." +} %} + +--- + +## Dos and Don’ts + +{% usage { + do: { + type: usageTypes.text, + items: [ + "Use to call attention to details in a way that makes it easy to scan.", + "Use it when an icon on it’s own can clearly communicate the purpose.", + "Use when there is not enough space for a standard tag." + ] + }, + dont: { + type: usageTypes.text, + items: [ + "Don’t use for interactions crucial for the flow.", + "Don’t use the icon only tag if a label is required to communicate the purpose, use a tag instead." + ] + } +} %} + +--- + +## Anatomy + +{% contentPageImage { + src:"../../../assets/img/components/tag-icon-only/anatomy.svg", + alt: "Anatomy of an icon only tag.", + width: 32 +} %} + +{% list { + type: listTypes.ordered, + items: [ + "**Icon:** A symbol used to communicate a message to the user." + ] +} %} + +--- + +## Variations + +### Default + +{% contentPageImage { + src:"../../../assets/img/components/tag-icon-only/variations-default.svg", + alt: "A tag with a leading icon placeholder and no text", + width: 32 +} %} + +--- + +## Modifiers + +### Emphasis + +Depending on the level of visual prominence you want to give to the icon only tag, you can choose between strong or subtle emphasis. + +{% contentLayout %} + {% contentItem %} +

Strong

+ {% contentPageImage { + src: "../../../assets/img/components/tag-icon-only/modifiers-strong.svg", + width: "32px", + alt: "A tag component with a leading placeholder icon and a label text" + } %} + {% endcontentItem %} + {% contentItem %} +

Subtle

+ {% contentPageImage { + src: "../../../assets/img/components/tag-icon-only/modifiers-subtle.svg", + width: "32px", + alt: "A tag component with a trailing placeholder icon and a label text", + variant: "secondary" + } %} + {% endcontentItem %} +{% endcontentLayout %} + +### Colours + +Select from a range of colour options across the two levels of emphasis. + +{% contentLayout %} + {% contentItem %} +

Neutral

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

Neutral alternative

+ {% contentPageImage { + src: "../../../assets/img/components/tag-icon-only/colours-neutral-alternative.svg", + width: "32px", + alt: "A subtle alternative for neutral tag." + } %} + {% endcontentItem %} + {% contentItem %} +

Ghost

+ {% contentPageImage { + src: "../../../assets/img/components/tag-icon-only/colours-ghost.svg", + width: "32px", + alt: "A tag component with the ghost colour alternative." + } %} + {% endcontentItem %} + {% contentItem %} +

Outline

+ {% contentPageImage { + src: "../../../assets/img/components/tag-icon-only/colours-outline.svg", + width: "32px", + alt: "A tag component with an outline." + } %} + {% endcontentItem %} + {% contentItem %} +

Information

+ {% contentPageImage { + src: "../../../assets/img/components/tag-icon-only/colours-information.svg", + width: "72px", + alt: "A pair of strong and subtle information tags." + } %} + {% endcontentItem %} + {% contentItem %} +

Success

+ {% contentPageImage { + src: "../../../assets/img/components/tag-icon-only/colours-success.svg", + width: "72px", + alt: "A pair of strong and subtle success tags." + } %} + {% endcontentItem %} + {% contentItem %} +

Warning

+ {% contentPageImage { + src: "../../../assets/img/components/tag-icon-only/colours-warning.svg", + width: "72px", + alt: "A pair of strong and subtle warning tags." + } %} + {% endcontentItem %} + {% contentItem %} +

Error

+ {% contentPageImage { + src: "../../../assets/img/components/tag-icon-only/colours-error.svg", + width: "72px", + alt: "A pair of strong and subtle error tags." + } %} + {% endcontentItem %} + {% contentItem %} +

02 Orange subtle

+ {% contentPageImage { + src: "../../../assets/img/components/tag-icon-only/colours-orange.svg", + width: "32px", + alt: "A orange colour tag." + } %} + {% endcontentItem %} + {% contentItem %} +

03 Cupcake

+ {% contentPageImage { + src: "../../../assets/img/components/tag-icon-only/colours-cupcake.svg", + width: "72px", + alt: "A cupcake colour tag." + } %} + {% endcontentItem %} + {% contentItem %} +

04 Berry

+ {% contentPageImage { + src: "../../../assets/img/components/tag-icon-only/colours-berry.svg", + width: "72px", + alt: "A pair of strong and subtle berry colour tags." + } %} + {% endcontentItem %} + {% contentItem %} +

06 Aubergine

+ {% contentPageImage { + src: "../../../assets/img/components/tag-icon-only/colours-aubergine.svg", + width: "72px", + alt: "A pair of strong and subtle aubergine tags." + } %} + {% endcontentItem %} +{% endcontentLayout %} + +--- + +## Content + +### Icons + +It is essential to ensure that the icon clearly conveys the intended message of the icon only tag. The icon should be directly related to the flow the user is taking, helping to reinforce the contextual information as required. + +{% usage { + do: { + type: usageTypes.image, + items: [{ + src: "../../../assets/img/components/tag-icon-only/content-icons-do.svg", + width: "32px", + alt: "A tag with an icon that conveys meaning related to the context." + }] + }, + dont: { + type: usageTypes.image, + items: [{ + src: "../../../assets/img/components/tag-icon-only/content-icons-dont.svg", + width: "32px", + alt: "A tag with an icon that does not conveys meaning related to the context." + }] + } +} %} + +___ + +## Meaning and purpose + +Icon only tags can be used to indicate status or used to convey specific meanings within JET, some examples are displayed below. + +{% contentPageImage { + src:"../../../../assets/img/components/tag-icon-only/meaning-and-purpose.svg", + alt: "A collection of different tag variants", + width: "192px" +} %} + +{% list { + type: listTypes.ordered, + items: [ + "**Info:** Drawing attention to contextual information for the user", + "**Warning:** Drawing attention to non-critical information for the user", + "**Success:** Drawing attention to positive information for the user", + "**Error:** Drawing attention to critical information for the user. Please review if an icon only tag is appropriate it might be better to use a dialogue, notification, toast or banner component", + "**Offers:** Drawing attention to contextual information about the details of a deal or promotion to the user" + ] +} %} + +--- + +## Interactive states + +Icon only tags include default and disabled states. + +{% contentLayout %} + {% contentItem %} +

Default

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

Disabled

+ {% contentPageImage { + src: "../../../assets/img/components/tag-icon-only/interactive-states-disabled.svg", + width: "32px", + alt: "Disabled state of a tag." + } %} + {% endcontentItem %} +{% endcontentLayout %} + +--- + +## Examples + +### LTR examples + +Here is an example of an icon only tag in a left-to-right context: + +{% contentPageImage { + src: "../../../assets/img/components/tag-icon-only/example.svg", + width: "408px", + alt: "A card containing two tags." +} %} + +### RTL examples + +{% notification { + type: "information", + message: "The icon only tag doesn’t change in RTL." +} %} + +--- + +## Resources + +{% 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 003e9bbfbc..aa49176fd1 100644 --- a/apps/pie-docs/test/snapshots/expected-routes.snapshot.json +++ b/apps/pie-docs/test/snapshots/expected-routes.snapshot.json @@ -78,6 +78,7 @@ "components/tabs", "components/tag", "components/tag/code", + "components/tag-icon-only", "components/text-input", "components/text-input/code", "components/textarea", From 87e1b2cf92ed24728d3c3855b624041221736520 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fernando=20de=20Fran=C3=A7a?= <448801+fernandofranca@users.noreply.github.com> Date: Fri, 28 Feb 2025 13:41:39 +0100 Subject: [PATCH 04/10] feat(pie-tag): DSW-2550 add pie-docs page assets --- .../img/components/tag-icon-only/anatomy.svg | 14 ++++ .../tag-icon-only/colours-aubergine.svg | 18 +++++ .../tag-icon-only/colours-berry.svg | 18 +++++ .../tag-icon-only/colours-cupcake.svg | 18 +++++ .../tag-icon-only/colours-error.svg | 18 +++++ .../tag-icon-only/colours-ghost.svg | 11 +++ .../tag-icon-only/colours-information.svg | 18 +++++ .../colours-neutral-alternative.svg | 11 +++ .../tag-icon-only/colours-neutral.svg | 18 +++++ .../tag-icon-only/colours-orange.svg | 11 +++ .../tag-icon-only/colours-outline.svg | 12 ++++ .../tag-icon-only/colours-success.svg | 18 +++++ .../tag-icon-only/colours-warning.svg | 18 +++++ .../tag-icon-only/content-icons-do.svg | 13 ++++ .../tag-icon-only/content-icons-dont.svg | 13 ++++ .../img/components/tag-icon-only/example.svg | 68 +++++++++++++++++++ .../interactive-states-default.svg | 11 +++ .../interactive-states-disabled.svg | 13 ++++ .../tag-icon-only/meaning-and-purpose.svg | 67 ++++++++++++++++++ .../tag-icon-only/modifiers-strong.svg | 11 +++ .../tag-icon-only/modifiers-subtle.svg | 11 +++ .../img/components/tag-icon-only/overview.svg | 57 ++++++++++++++++ .../components/tag-icon-only/structure.svg | 19 ++++++ .../tag-icon-only/variations-default.svg | 11 +++ .../img/index/components/tag---icon-only.svg | 15 ++++ 25 files changed, 512 insertions(+) create mode 100644 apps/pie-docs/src/assets/img/components/tag-icon-only/anatomy.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag-icon-only/colours-aubergine.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag-icon-only/colours-berry.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag-icon-only/colours-cupcake.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag-icon-only/colours-error.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag-icon-only/colours-ghost.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag-icon-only/colours-information.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag-icon-only/colours-neutral-alternative.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag-icon-only/colours-neutral.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag-icon-only/colours-orange.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag-icon-only/colours-outline.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag-icon-only/colours-success.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag-icon-only/colours-warning.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag-icon-only/content-icons-do.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag-icon-only/content-icons-dont.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag-icon-only/example.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag-icon-only/interactive-states-default.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag-icon-only/interactive-states-disabled.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag-icon-only/meaning-and-purpose.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag-icon-only/modifiers-strong.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag-icon-only/modifiers-subtle.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag-icon-only/overview.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag-icon-only/structure.svg create mode 100644 apps/pie-docs/src/assets/img/components/tag-icon-only/variations-default.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/tag---icon-only.svg diff --git a/apps/pie-docs/src/assets/img/components/tag-icon-only/anatomy.svg b/apps/pie-docs/src/assets/img/components/tag-icon-only/anatomy.svg new file mode 100644 index 0000000000..abd929bf2b --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag-icon-only/anatomy.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-aubergine.svg b/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-aubergine.svg new file mode 100644 index 0000000000..3a36d6a060 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-aubergine.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-berry.svg b/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-berry.svg new file mode 100644 index 0000000000..bd00890963 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-berry.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-cupcake.svg b/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-cupcake.svg new file mode 100644 index 0000000000..74761218ea --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-cupcake.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-error.svg b/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-error.svg new file mode 100644 index 0000000000..0d271ed59a --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-error.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-ghost.svg b/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-ghost.svg new file mode 100644 index 0000000000..0579ed9ee2 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-ghost.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-information.svg b/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-information.svg new file mode 100644 index 0000000000..d066c442fb --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-information.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-neutral-alternative.svg b/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-neutral-alternative.svg new file mode 100644 index 0000000000..d4c1f1c2d4 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-neutral-alternative.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-neutral.svg b/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-neutral.svg new file mode 100644 index 0000000000..6b21bca8bb --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-neutral.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-orange.svg b/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-orange.svg new file mode 100644 index 0000000000..ab2a7181c7 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-orange.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-outline.svg b/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-outline.svg new file mode 100644 index 0000000000..943d835adf --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-outline.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-success.svg b/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-success.svg new file mode 100644 index 0000000000..034eb1a166 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-success.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-warning.svg b/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-warning.svg new file mode 100644 index 0000000000..f43cced18b --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag-icon-only/colours-warning.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/tag-icon-only/content-icons-do.svg b/apps/pie-docs/src/assets/img/components/tag-icon-only/content-icons-do.svg new file mode 100644 index 0000000000..b1c632ea22 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag-icon-only/content-icons-do.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/tag-icon-only/content-icons-dont.svg b/apps/pie-docs/src/assets/img/components/tag-icon-only/content-icons-dont.svg new file mode 100644 index 0000000000..d41b91c108 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag-icon-only/content-icons-dont.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/tag-icon-only/example.svg b/apps/pie-docs/src/assets/img/components/tag-icon-only/example.svg new file mode 100644 index 0000000000..8cf20992a7 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag-icon-only/example.svg @@ -0,0 +1,68 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/tag-icon-only/interactive-states-default.svg b/apps/pie-docs/src/assets/img/components/tag-icon-only/interactive-states-default.svg new file mode 100644 index 0000000000..179843875c --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag-icon-only/interactive-states-default.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/tag-icon-only/interactive-states-disabled.svg b/apps/pie-docs/src/assets/img/components/tag-icon-only/interactive-states-disabled.svg new file mode 100644 index 0000000000..1f143560c9 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag-icon-only/interactive-states-disabled.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/tag-icon-only/meaning-and-purpose.svg b/apps/pie-docs/src/assets/img/components/tag-icon-only/meaning-and-purpose.svg new file mode 100644 index 0000000000..741ef92576 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag-icon-only/meaning-and-purpose.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/tag-icon-only/modifiers-strong.svg b/apps/pie-docs/src/assets/img/components/tag-icon-only/modifiers-strong.svg new file mode 100644 index 0000000000..8e9b264400 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag-icon-only/modifiers-strong.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/tag-icon-only/modifiers-subtle.svg b/apps/pie-docs/src/assets/img/components/tag-icon-only/modifiers-subtle.svg new file mode 100644 index 0000000000..0304c0cdf2 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag-icon-only/modifiers-subtle.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/tag-icon-only/overview.svg b/apps/pie-docs/src/assets/img/components/tag-icon-only/overview.svg new file mode 100644 index 0000000000..1409f06066 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag-icon-only/overview.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/tag-icon-only/structure.svg b/apps/pie-docs/src/assets/img/components/tag-icon-only/structure.svg new file mode 100644 index 0000000000..b0c1cef993 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag-icon-only/structure.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/tag-icon-only/variations-default.svg b/apps/pie-docs/src/assets/img/components/tag-icon-only/variations-default.svg new file mode 100644 index 0000000000..5b2031ab02 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/tag-icon-only/variations-default.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/tag---icon-only.svg b/apps/pie-docs/src/assets/img/index/components/tag---icon-only.svg new file mode 100644 index 0000000000..0e4e5031cd --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/tag---icon-only.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + From 975909ff4a1c27506dad7d2c7697cdc1aeada1b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fernando=20de=20Fran=C3=A7a?= <448801+fernandofranca@users.noreply.github.com> Date: Fri, 28 Feb 2025 13:50:43 +0100 Subject: [PATCH 05/10] feat(pie-tag): DSW-2550 update pie-docs tag page content --- apps/pie-docs/src/components/tag/code/code.md | 12 ++++++++++++ apps/pie-docs/src/components/tag/code/props.json | 2 +- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/apps/pie-docs/src/components/tag/code/code.md b/apps/pie-docs/src/components/tag/code/code.md index cb6793ff6c..eb1c5a4be1 100644 --- a/apps/pie-docs/src/components/tag/code/code.md +++ b/apps/pie-docs/src/components/tag/code/code.md @@ -76,6 +76,18 @@ We recommend using `pie-icons-webc` when using the `icon` slot. Here is an examp ``` +#### Icon only tags + +Icon only mode is inferred when the `icon` slot is used without any text content and the `size` property is assigned as `large`. + +Using the component with the mentioned settings will implicitly disable the `isInteractive` property. + +```html + + + +``` + ## Examples For HTML: diff --git a/apps/pie-docs/src/components/tag/code/props.json b/apps/pie-docs/src/components/tag/code/props.json index 1166d24f34..82d084956c 100644 --- a/apps/pie-docs/src/components/tag/code/props.json +++ b/apps/pie-docs/src/components/tag/code/props.json @@ -44,7 +44,7 @@ "item": ["true", "false"] }, - "When true, the tag will be rendered as a button and can be interacted with.", + "When true, the tag will be rendered as a button and can be interacted with. When utilized in \"icon only\" mode, `isInteractive` will always be `false` regardless of the assigned prop value.", { "type": "code", "item": ["false"] From 77650b76e777ba186fc8eb5c24a48d6d192c9afe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fernando=20de=20Fran=C3=A7a?= <448801+fernandofranca@users.noreply.github.com> Date: Thu, 27 Feb 2025 11:31:46 +0100 Subject: [PATCH 06/10] feat(pie-tag): DSW-2550 add storybook testing story --- .../stories/testing/pie-tag.test.stories.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/apps/pie-storybook/stories/testing/pie-tag.test.stories.ts b/apps/pie-storybook/stories/testing/pie-tag.test.stories.ts index 3e124aa220..60bf488817 100644 --- a/apps/pie-storybook/stories/testing/pie-tag.test.stories.ts +++ b/apps/pie-storybook/stories/testing/pie-tag.test.stories.ts @@ -207,6 +207,17 @@ const brand06PropsMatrix: Partial> = { variant: ['brand-06'], }; +// IconOnly variant stories +const iconOnlyPropsMatrix: Partial> = { + ...baseSharedPropsMatrix, + size: ['large'], + iconPlacement: ['leading'], + showIcon: [true], + slot: [''], + variant: ['information'], + isInteractive: [false], +}; + export const NeutralVariations = createVariantStory(Template, neutralPropsMatrix); export const InformationVariations = createVariantStory(Template, informationPropsMatrix); export const SuccessVariations = createVariantStory(Template, successPropsMatrix); @@ -219,3 +230,4 @@ export const Brand03Variations = createVariantStory(Template, brand03P export const Brand04Variations = createVariantStory(Template, brand04PropsMatrix); export const Brand05Variations = createVariantStory(Template, brand05PropsMatrix); export const Brand06Variations = createVariantStory(Template, brand06PropsMatrix); +export const IconOnlyVariations = createVariantStory(Template, iconOnlyPropsMatrix); From 89ee20b943e5b7ca1a49d644ae0fbc8a77c6e7e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fernando=20de=20Fran=C3=A7a?= <448801+fernandofranca@users.noreply.github.com> Date: Fri, 28 Feb 2025 14:08:36 +0100 Subject: [PATCH 07/10] chore(pie-monorepo): DSW-2550 changeset --- .changeset/four-turtles-collect.md | 6 ++++++ .changeset/slimy-dots-pretend.md | 6 ++++++ .changeset/thick-experts-nail.md | 7 +++++++ 3 files changed, 19 insertions(+) create mode 100644 .changeset/four-turtles-collect.md create mode 100644 .changeset/slimy-dots-pretend.md create mode 100644 .changeset/thick-experts-nail.md diff --git a/.changeset/four-turtles-collect.md b/.changeset/four-turtles-collect.md new file mode 100644 index 0000000000..0c6e4ef0ca --- /dev/null +++ b/.changeset/four-turtles-collect.md @@ -0,0 +1,6 @@ +--- +"@justeattakeaway/pie-tag": minor +--- + +[Added] - supporting code for icon only mode +[Updated] - fixed padding in icon only mode diff --git a/.changeset/slimy-dots-pretend.md b/.changeset/slimy-dots-pretend.md new file mode 100644 index 0000000000..212e0b9faa --- /dev/null +++ b/.changeset/slimy-dots-pretend.md @@ -0,0 +1,6 @@ +--- +"pie-storybook": minor +--- + +[Added] - regular story for Tag icon only mode +[Added] - test stories for Tag icon only mode diff --git a/.changeset/thick-experts-nail.md b/.changeset/thick-experts-nail.md new file mode 100644 index 0000000000..6da25fa7de --- /dev/null +++ b/.changeset/thick-experts-nail.md @@ -0,0 +1,7 @@ +--- +"pie-docs": minor +--- + +[Added] - page for Tag icon only mode +[Updated] - content for Tag page regarding icon only mode + From 88465202c29570e0ae12a96037fb86f7388e567c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fernando=20de=20Fran=C3=A7a?= <448801+fernandofranca@users.noreply.github.com> Date: Mon, 3 Mar 2025 14:01:28 +0100 Subject: [PATCH 08/10] feat(pie-tag): DSW-2550 update component logic --- packages/components/pie-tag/src/index.ts | 25 +++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/packages/components/pie-tag/src/index.ts b/packages/components/pie-tag/src/index.ts index 3ce415a958..cb131149b5 100644 --- a/packages/components/pie-tag/src/index.ts +++ b/packages/components/pie-tag/src/index.ts @@ -1,7 +1,7 @@ import { LitElement, html, unsafeCSS, nothing, type PropertyValues, } from 'lit'; -import { property } from 'lit/decorators.js'; +import { property, queryAssignedElements } from 'lit/decorators.js'; import { classMap, type ClassInfo } from 'lit/directives/class-map.js'; import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core'; import styles from './tag.scss?inline'; @@ -45,6 +45,8 @@ export class PieTag extends LitElement implements TagProps { @validPropertyValues(componentSelector, iconPlacements, defaultProps.iconPlacement) public iconPlacement = defaultProps.iconPlacement; + @queryAssignedElements({ slot: 'icon', flatten: true }) _iconSlotNodes!: Array; + private isIconOnly = false; updated (changedProperties: PropertyValues) { @@ -52,23 +54,24 @@ export class PieTag extends LitElement implements TagProps { } private checkIfIsIconOnly () { - // The size must be large - const isLargeSize = this.size === 'large'; + const { size, textContent, _iconSlotNodes } = this; + + // The instance size must be large + const isLargeSize = size === 'large'; // The default slot must be empty - const defaultSlotText = this.textContent?.trim(); + const defaultSlotText = textContent?.trim(); const isDefaultSlotEmpty = defaultSlotText === ''; // The icon slot must have some content - const iconSlot = this.shadowRoot?.querySelector('slot[name="icon"]') as HTMLSlotElement | null; - - if (isLargeSize && isDefaultSlotEmpty && iconSlot) { - const iconSlotNodes = iconSlot.assignedNodes({ flatten: true }); + const iconsSlotNotEmpty = _iconSlotNodes.length > 0; + if (isLargeSize && isDefaultSlotEmpty && iconsSlotNotEmpty) { // The icon slot content must be an icon - if (iconSlotNodes && iconSlotNodes.length === 1) { - const firstNode = (iconSlotNodes[0] as Element); - const isIcon = firstNode.tagName.startsWith('ICON-'); + if (_iconSlotNodes && _iconSlotNodes.length === 1) { + const firstNode = (_iconSlotNodes[0] as Element); + const tag = firstNode.tagName.toUpperCase(); + const isIcon = tag.startsWith('ICON-') || tag === 'SVG'; this.isIconOnly = isIcon; this.requestUpdate(); From f355d0184be3314480150b4fdbc424952baae305 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fernando=20de=20Fran=C3=A7a?= <448801+fernandofranca@users.noreply.github.com> Date: Fri, 28 Feb 2025 14:20:30 +0100 Subject: [PATCH 09/10] chore(pie-monorepo): DSW-2550 update bundlewatch --- bundlewatch.config.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/bundlewatch.config.json b/bundlewatch.config.json index 268402f67a..35ef71cf8c 100644 --- a/bundlewatch.config.json +++ b/bundlewatch.config.json @@ -154,7 +154,7 @@ }, { "path": "./packages/components/pie-tag/dist/index.js", - "maxSize": "3 KB" + "maxSize": "3.12 KB" }, { "path": "./packages/components/pie-tag/dist/react.js", @@ -203,4 +203,4 @@ "main" ] } -} \ No newline at end of file +} From d6c0d7f6d27a08b9884d02415e118625cba5b1ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fernando=20de=20Fran=C3=A7a?= <448801+fernandofranca@users.noreply.github.com> Date: Tue, 4 Mar 2025 16:39:53 +0100 Subject: [PATCH 10/10] feat(pie-tag): DSW-2550 address design review for pie-docs page --- apps/pie-docs/src/components/tag-icon-only/tag-icon-only.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/pie-docs/src/components/tag-icon-only/tag-icon-only.md b/apps/pie-docs/src/components/tag-icon-only/tag-icon-only.md index 934dec0fcb..5602db880d 100644 --- a/apps/pie-docs/src/components/tag-icon-only/tag-icon-only.md +++ b/apps/pie-docs/src/components/tag-icon-only/tag-icon-only.md @@ -3,6 +3,7 @@ eleventyNavigation: key: 'Tag - Icon Only' parent: Components order: 45 +shouldShowContents: true --- ## Overview @@ -30,7 +31,7 @@ The purpose of the icon only tag is to provide a quick and visually appealing wa type: usageTypes.text, items: [ "Don’t use for interactions crucial for the flow.", - "Don’t use the icon only tag if a label is required to communicate the purpose, use a tag instead." + "Don’t use the icon only tag if a label is required to communicate the purpose, use a [Tag](/components/tag/) instead." ] } } %}