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 + 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 @@ + + + + + + + + + + + + + + + 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..5602db880d --- /dev/null +++ b/apps/pie-docs/src/components/tag-icon-only/tag-icon-only.md @@ -0,0 +1,301 @@ +--- +eleventyNavigation: + key: 'Tag - Icon Only' + parent: Components + order: 45 +shouldShowContents: true +--- + +## 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](/components/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/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"] 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", 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', +}, {}); 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); 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 +} diff --git a/packages/components/pie-tag/src/index.ts b/packages/components/pie-tag/src/index.ts index 9716ea4da2..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, + 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,10 +45,53 @@ 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) { + if (changedProperties.has('size')) this.checkIfIsIconOnly(); + } + + private checkIfIsIconOnly () { + const { size, textContent, _iconSlotNodes } = this; + + // The instance size must be large + const isLargeSize = size === 'large'; + + // The default slot must be empty + const defaultSlotText = textContent?.trim(); + const isDefaultSlotEmpty = defaultSlotText === ''; + + // The icon slot must have some content + 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 tag = firstNode.tagName.toUpperCase(); + const isIcon = tag.startsWith('ICON-') || tag === 'SVG'; + + 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 +100,7 @@ export class PieTag extends LitElement implements TagProps { class="${classMap(classes)}" data-test-id="pie-tag"> ${this.renderIconSlot()} - + `; } @@ -81,19 +124,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 {