From 2e9c13afcc816e3519477eeff8c03edb675445d8 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 1/8] 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 1fb0417f3f9ef5fc4b7c0b8595549b38589d22f7 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 2/8] 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 927008c0ec0e5db4a6dae84b2d386af356d1c883 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 3/8] 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 744e08878b36cf5b7017aa88f2c59a46eb06afe0 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 4/8] 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 d7ad0bfbfe533b80a0edcc05542ce52e666df121 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 5/8] 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 779ae1017a1ec48379755a1ecb9c0b79f7e723be 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 6/8] 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 a5f3f9ef0858aba52e3dfaad74c1102d489e8ed8 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 7/8] 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 51de2f14a1692a8bfa5cb0ca5e5d8234ed0055d1 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 8/8] 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..2b401b3f6a 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.10 KB" }, { "path": "./packages/components/pie-tag/dist/react.js", @@ -203,4 +203,4 @@ "main" ] } -} \ No newline at end of file +}