From d1571239deb8fac950457c4b0e7aa800756096c2 Mon Sep 17 00:00:00 2001 From: Xander Marjoram Date: Tue, 3 Sep 2024 11:57:33 +0100 Subject: [PATCH 1/2] feat(pie-tag): DSW-2323 add isInteractive prop --- .changeset/rude-dolphins-lick.md | 8 + apps/pie-storybook/stories/pie-tag.stories.ts | 12 +- packages/components/pie-tag/src/defs.ts | 15 +- packages/components/pie-tag/src/index.ts | 52 ++++-- packages/components/pie-tag/src/tag.scss | 63 ++++++- .../pie-tag/test/visual/pie-tag.spec.ts | 18 +- yarn.lock | 162 +++++++++--------- 7 files changed, 218 insertions(+), 112 deletions(-) create mode 100644 .changeset/rude-dolphins-lick.md diff --git a/.changeset/rude-dolphins-lick.md b/.changeset/rude-dolphins-lick.md new file mode 100644 index 0000000000..c460bfd2b7 --- /dev/null +++ b/.changeset/rude-dolphins-lick.md @@ -0,0 +1,8 @@ +--- +"@justeattakeaway/pie-tag": minor +"pie-storybook": patch +--- + +[Changed] - Rename `isDimmed` prop to `disabled` +[Added] - `isInteractive` prop which renders the tag as a button +[Added] - Interactive styling diff --git a/apps/pie-storybook/stories/pie-tag.stories.ts b/apps/pie-storybook/stories/pie-tag.stories.ts index fed3211fe0..9dfdfec52f 100644 --- a/apps/pie-storybook/stories/pie-tag.stories.ts +++ b/apps/pie-storybook/stories/pie-tag.stories.ts @@ -46,11 +46,11 @@ const tagStoryMeta: TagStoryMeta = { summary: defaultProps.isStrong, }, }, - isDimmed: { - description: 'If `true`, lowers the tag opacity.', + disabled: { + description: 'For an interactive tag, this applies the disabled attribute to the button and styles it appropriately.
For a non-interactive tag, this only applies the disabled styling.', control: 'boolean', defaultValue: { - summary: defaultProps.isDimmed, + summary: defaultProps.disabled, }, }, showIcon: { @@ -80,16 +80,18 @@ export default tagStoryMeta; const Template : TemplateFunction = ({ variant, size, + isInteractive, isStrong, - isDimmed, + disabled, showIcon, slot, }) => html` + ?disabled="${disabled}"> ${showIcon ? html`` : nothing} ${sanitizeAndRenderHTML(slot)} diff --git a/packages/components/pie-tag/src/defs.ts b/packages/components/pie-tag/src/defs.ts index a8bc8f1b86..db638a4304 100644 --- a/packages/components/pie-tag/src/defs.ts +++ b/packages/components/pie-tag/src/defs.ts @@ -10,14 +10,20 @@ export interface TagProps { variant?: typeof variants[number]; /** - * When true, the 'green', "yellow", "red", "blue" and "neutral" variants change their styles and become bolder + * When true, the "green", "yellow", "red", "blue" and "neutral" variants change their styles and become bolder */ isStrong?: boolean; /** - * When `true`, lowers the tag opacity. + * When `true`, the tag will be rendered as a button and can be interacted with. */ - isDimmed?: boolean; + isInteractive?: boolean; + + /** + * For an interactive tag, this applies the disabled attribute to the button and styles it appropriately. + * For a non-interactive tag, this only applies the disabled styling. + */ + disabled?: boolean; /** * What size the tag should be. @@ -30,6 +36,7 @@ export type DefaultProps = ComponentDefaultProps; export const defaultProps: DefaultProps = { variant: 'neutral', isStrong: false, - isDimmed: false, + isInteractive: false, + disabled: false, size: 'large', }; diff --git a/packages/components/pie-tag/src/index.ts b/packages/components/pie-tag/src/index.ts index b064afa30d..78a1659231 100644 --- a/packages/components/pie-tag/src/index.ts +++ b/packages/components/pie-tag/src/index.ts @@ -2,7 +2,7 @@ import { LitElement, html, unsafeCSS, nothing, } from 'lit'; import { property } from 'lit/decorators.js'; -import { classMap } from 'lit/directives/class-map.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'; import { @@ -32,11 +32,15 @@ export class PieTag extends LitElement implements TagProps { public isStrong = defaultProps.isStrong; @property({ type: Boolean }) - public isDimmed = defaultProps.isDimmed; + public disabled = defaultProps.disabled; + + @property({ type: Boolean }) + public isInteractive = defaultProps.isInteractive; render () { const { - isDimmed, + disabled, + isInteractive, isStrong, size, variant, @@ -46,18 +50,44 @@ export class PieTag extends LitElement implements TagProps { 'c-tag': true, [`c-tag--${size}`]: true, [`c-tag--${variant}`]: true, - 'c-tag--dimmed': isDimmed, + 'c-tag--disabled': disabled, 'c-tag--strong': isStrong, + 'c-tag--interactive': isInteractive, }; + if (isInteractive) { + return this.renderButtonTag(classes); + } + + return this.renderTag(classes); + } + + private renderIconSlot () { + if (this.size !== 'large') return nothing; + + return html``; + } + + private renderTag (classes: ClassInfo) { + return html` +
+ ${this.renderIconSlot()} + +
`; + } + + private renderButtonTag (classes: ClassInfo) { return html` -
- ${size === 'large' ? html`` : nothing} - -
`; + `; } // Renders a `CSSResult` generated from SCSS by Vite diff --git a/packages/components/pie-tag/src/tag.scss b/packages/components/pie-tag/src/tag.scss index e22387d030..f0316fc485 100644 --- a/packages/components/pie-tag/src/tag.scss +++ b/packages/components/pie-tag/src/tag.scss @@ -1,5 +1,39 @@ @use '@justeattakeaway/pie-css/scss' as p; +@mixin tag-interactive-states($bg-color, $mode: 'default') { + &.c-tag--interactive { + &:hover:not(.c-tag--disabled) { + @if $mode == 'inverse' { + --hover-modifier: var(--dt-color-hover-02); + } @else { + --hover-modifier: calc(-1 * var(--dt-color-hover-01)); + } + + @if $mode == 'transparent' { + --hover-modifier: var(--dt-color-hover-01); + --tag-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), var(#{$bg-color}-l), var(--hover-modifier)); + } @else { + --tag-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--hover-modifier))); + } + } + + &:active:not(.c-tag--disabled) { + @if $mode == 'inverse' { + --active-modifier: var(--dt-color-active-02); + } @else { + --active-modifier: calc(-1 * var(--dt-color-active-01)); + } + + @if $mode == 'transparent' { + --active-modifier: var(--dt-color-active-01); + --tag-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), var(#{$bg-color}-l), var(--active-modifier)); + } @else { + --tag-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--active-modifier))); + } + } + } +} + // Base tag styles .c-tag { --tag-bg-color: var(--dt-color-container-strong); @@ -33,6 +67,14 @@ font-size: var(--tag-font-size); line-height: var(--tag-line-height); + &.c-tag--interactive { + border: none; + + &:focus-visible { + @include p.focus; + } + } + // Size &.c-tag--small { --tag-padding-block: 0; @@ -48,67 +90,79 @@ // Variant &.c-tag--neutral { - // same as default styles + @include tag-interactive-states('--dt-color-container-strong'); &.c-tag--strong { --tag-bg-color: var(--dt-color-container-inverse); --tag-color: var(--dt-color-content-inverse); + @include tag-interactive-states('--dt-color-container-inverse', 'inverse'); } } &.c-tag--blue { --tag-bg-color: var(--dt-color-support-info-02); --tag-color: var(--dt-color-content-default); + @include tag-interactive-states('--dt-color-support-info-02'); &.c-tag--strong { --tag-bg-color: var(--dt-color-support-info); --tag-color: var(--dt-color-content-inverse); + @include tag-interactive-states('--dt-color-support-info'); } } &.c-tag--green { --tag-bg-color: var(--dt-color-support-positive-02); --tag-color: var(--dt-color-content-default); + @include tag-interactive-states('--dt-color-support-positive-02'); &.c-tag--strong { --tag-bg-color: var(--dt-color-support-positive); --tag-color: var(--dt-color-content-inverse); + @include tag-interactive-states('--dt-color-support-positive'); } } &.c-tag--yellow { --tag-bg-color: var(--dt-color-support-warning-02); --tag-color: var(--dt-color-content-default); + @include tag-interactive-states('--dt-color-support-warning-02'); &.c-tag--strong { --tag-bg-color: var(--dt-color-support-warning); --tag-color: var(--dt-color-content-dark); + @include tag-interactive-states('--dt-color-support-warning'); } } &.c-tag--red { --tag-bg-color: var(--dt-color-support-error-02); --tag-color: var(--dt-color-content-default); + @include tag-interactive-states('--dt-color-support-error-02'); &.c-tag--strong { --tag-bg-color: var(--dt-color-support-error); --tag-color: var(--dt-color-content-light); + @include tag-interactive-states('--dt-color-support-error'); } } &.c-tag--brand { --tag-bg-color: var(--dt-color-support-brand-02); --tag-color: var(--dt-color-content-default); + @include tag-interactive-states('--dt-color-support-brand-02'); } &.c-tag--neutral-alternative { --tag-bg-color: var(--dt-color-container-default); --tag-color: var(--dt-color-content-default); + @include tag-interactive-states('--dt-color-container-default'); } &.c-tag--outline { --tag-bg-color: var(--tag-transparent-bg-color); --tag-color: var(--dt-color-content-default); + @include tag-interactive-states('--dt-color-black', 'transparent'); // the outline in design specs is part of the total component // height calculation, thus, we use box-shadow to mimic borders @@ -119,11 +173,16 @@ &.c-tag--ghost { --tag-bg-color: var(--tag-transparent-bg-color); --tag-color: var(--dt-color-content-default); + @include tag-interactive-states('--dt-color-black', 'transparent'); } - &.c-tag--dimmed { + &.c-tag--disabled { opacity: 0.5; } + + &[disabled] { + cursor: not-allowed; + } } // Used to size an SVG if one is passed in (when not using the component icons) diff --git a/packages/components/pie-tag/test/visual/pie-tag.spec.ts b/packages/components/pie-tag/test/visual/pie-tag.spec.ts index bdf7499751..3b69520a42 100644 --- a/packages/components/pie-tag/test/visual/pie-tag.spec.ts +++ b/packages/components/pie-tag/test/visual/pie-tag.spec.ts @@ -1,7 +1,7 @@ import { test } from '@sand4rt/experimental-ct-web'; import percySnapshot from '@percy/playwright'; import { - type PropObject, type WebComponentPropValues, type WebComponentTestInput, + type PropObject, type WebComponentPropValues, } from '@justeattakeaway/pie-webc-testing/src/helpers/defs.ts'; import { getAllPropCombinations, splitCombinationsByPropertyValue, @@ -13,7 +13,7 @@ import { WebComponentTestWrapper, } from '@justeattakeaway/pie-webc-testing/src/helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts'; import { percyWidths } from '@justeattakeaway/pie-webc-testing/src/percy/breakpoints.ts'; -import { IconHeartFilled } from '@justeattakeaway/pie-icons-webc'; +import { IconHeartFilled } from '@justeattakeaway/pie-icons-webc/dist/IconHeartFilled'; import { sizes, variants } from '../../src/defs.ts'; import { PieTag } from '../../src/index.ts'; @@ -21,16 +21,16 @@ const props: PropObject = { variant: variants, size: sizes, isStrong: [true, false], - isDimmed: [true, false], + disabled: [true, false], iconSlot: ['', ''], }; // Renders a HTML string with the given prop values -const renderTestPieTag = (propVals: WebComponentPropValues) => `${propVals.iconSlot} Hello world`; +const renderTestPieTag = (propVals: WebComponentPropValues) => `${propVals.iconSlot} Hello world`; -const componentPropsMatrix: WebComponentPropValues[] = getAllPropCombinations(props); -const componentPropsMatrixByVariant: Record = splitCombinationsByPropertyValue(componentPropsMatrix, 'variant'); -const componentVariants: string[] = Object.keys(componentPropsMatrixByVariant); +const componentPropsMatrix = getAllPropCombinations(props); +const componentPropsMatrixByVariant = splitCombinationsByPropertyValue(componentPropsMatrix, 'variant'); +const componentVariants = Object.keys(componentPropsMatrixByVariant); test.beforeEach(async ({ mount }, testInfo) => { testInfo.setTimeout(testInfo.timeout + 40000); @@ -45,12 +45,12 @@ test.beforeEach(async ({ mount }, testInfo) => { componentVariants.forEach((variant) => test(`should render all prop variations for Variant: ${variant}`, async ({ page, mount }) => { for (const combo of componentPropsMatrixByVariant[variant]) { - const testComponent: WebComponentTestInput = createTestWebComponent(combo, renderTestPieTag); + const testComponent = createTestWebComponent(combo, renderTestPieTag); const propKeyValues = ` size: ${testComponent.propValues.size}, variant: ${testComponent.propValues.variant}, isStrong: ${testComponent.propValues.isStrong}, - isDimmed: ${testComponent.propValues.isDimmed}, + disabled: ${testComponent.propValues.disabled}, iconSlot: ${testComponent.propValues.iconSlot ? 'with icon' : 'no icon'}`; const darkMode = ['neutral-alternative'].includes(variant); diff --git a/yarn.lock b/yarn.lock index a69a4c26e5..84dd97b079 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5454,20 +5454,20 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-assistive-text@0.7.0, @justeattakeaway/pie-assistive-text@workspace:packages/components/pie-assistive-text": +"@justeattakeaway/pie-assistive-text@0.7.1, @justeattakeaway/pie-assistive-text@workspace:packages/components/pie-assistive-text": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-assistive-text@workspace:packages/components/pie-assistive-text" dependencies: "@custom-elements-manifest/analyzer": 0.9.0 "@justeattakeaway/pie-components-config": 0.18.0 "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-icons-webc": 0.25.0 + "@justeattakeaway/pie-icons-webc": 0.25.1 "@justeattakeaway/pie-webc-core": 0.24.0 cem-plugin-module-file-extensions: 0.0.5 languageName: unknown linkType: soft -"@justeattakeaway/pie-button@0.48.1, @justeattakeaway/pie-button@workspace:packages/components/pie-button": +"@justeattakeaway/pie-button@0.49.0, @justeattakeaway/pie-button@workspace:packages/components/pie-button": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-button@workspace:packages/components/pie-button" dependencies: @@ -5495,12 +5495,12 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-checkbox-group@0.6.2, @justeattakeaway/pie-checkbox-group@workspace:packages/components/pie-checkbox-group": +"@justeattakeaway/pie-checkbox-group@0.6.3, @justeattakeaway/pie-checkbox-group@workspace:packages/components/pie-checkbox-group": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-checkbox-group@workspace:packages/components/pie-checkbox-group" dependencies: "@custom-elements-manifest/analyzer": 0.9.0 - "@justeattakeaway/pie-assistive-text": 0.7.0 + "@justeattakeaway/pie-assistive-text": 0.7.1 "@justeattakeaway/pie-components-config": 0.18.0 "@justeattakeaway/pie-css": 0.12.1 "@justeattakeaway/pie-webc-core": 0.24.0 @@ -5508,12 +5508,12 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-checkbox@0.12.2, @justeattakeaway/pie-checkbox@workspace:packages/components/pie-checkbox": +"@justeattakeaway/pie-checkbox@0.12.3, @justeattakeaway/pie-checkbox@workspace:packages/components/pie-checkbox": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-checkbox@workspace:packages/components/pie-checkbox" dependencies: "@custom-elements-manifest/analyzer": 0.9.0 - "@justeattakeaway/pie-assistive-text": 0.7.0 + "@justeattakeaway/pie-assistive-text": 0.7.1 "@justeattakeaway/pie-components-config": 0.18.0 "@justeattakeaway/pie-css": 0.12.1 "@justeattakeaway/pie-webc-core": 0.24.0 @@ -5521,14 +5521,14 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-chip@0.8.0, @justeattakeaway/pie-chip@workspace:packages/components/pie-chip": +"@justeattakeaway/pie-chip@0.8.1, @justeattakeaway/pie-chip@workspace:packages/components/pie-chip": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-chip@workspace:packages/components/pie-chip" dependencies: "@custom-elements-manifest/analyzer": 0.9.0 "@justeattakeaway/pie-components-config": 0.18.0 "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-icons-webc": 0.25.0 + "@justeattakeaway/pie-icons-webc": 0.25.1 "@justeattakeaway/pie-spinner": 0.6.7 "@justeattakeaway/pie-webc-core": 0.24.0 cem-plugin-module-file-extensions: 0.0.5 @@ -5547,20 +5547,20 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-cookie-banner@0.26.0, @justeattakeaway/pie-cookie-banner@workspace:packages/components/pie-cookie-banner": +"@justeattakeaway/pie-cookie-banner@0.26.1, @justeattakeaway/pie-cookie-banner@workspace:packages/components/pie-cookie-banner": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-cookie-banner@workspace:packages/components/pie-cookie-banner" dependencies: "@custom-elements-manifest/analyzer": 0.9.0 "@justeat/pie-design-tokens": 6.3.1 - "@justeattakeaway/pie-button": 0.48.1 + "@justeattakeaway/pie-button": 0.49.0 "@justeattakeaway/pie-components-config": 0.18.0 "@justeattakeaway/pie-css": 0.12.1 "@justeattakeaway/pie-divider": 0.13.9 - "@justeattakeaway/pie-icon-button": 0.28.10 + "@justeattakeaway/pie-icon-button": 0.28.11 "@justeattakeaway/pie-link": 0.17.8 - "@justeattakeaway/pie-modal": 0.46.0 - "@justeattakeaway/pie-switch": 0.30.0 + "@justeattakeaway/pie-modal": 0.46.1 + "@justeattakeaway/pie-switch": 0.30.1 "@justeattakeaway/pie-webc-core": 0.24.0 "@justeattakeaway/pie-wrapper-react": 0.14.1 cem-plugin-module-file-extensions: 0.0.5 @@ -5599,8 +5599,8 @@ __metadata: "@custom-elements-manifest/analyzer": 0.9.0 "@justeattakeaway/pie-components-config": 0.18.0 "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-switch": 0.30.0 - "@justeattakeaway/pie-text-input": 0.23.4 + "@justeattakeaway/pie-switch": 0.30.1 + "@justeattakeaway/pie-text-input": 0.23.5 "@justeattakeaway/pie-webc-core": 0.24.0 "@justeattakeaway/pie-wrapper-react": 0.14.1 cem-plugin-module-file-extensions: 0.0.5 @@ -5613,14 +5613,14 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-icon-button@0.28.10, @justeattakeaway/pie-icon-button@workspace:packages/components/pie-icon-button": +"@justeattakeaway/pie-icon-button@0.28.11, @justeattakeaway/pie-icon-button@workspace:packages/components/pie-icon-button": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-icon-button@workspace:packages/components/pie-icon-button" dependencies: "@custom-elements-manifest/analyzer": 0.9.0 "@justeattakeaway/pie-components-config": 0.18.0 "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-icons-webc": 0.25.0 + "@justeattakeaway/pie-icons-webc": 0.25.1 "@justeattakeaway/pie-spinner": 0.6.7 "@justeattakeaway/pie-webc-core": 0.24.0 "@justeattakeaway/pie-wrapper-react": 0.14.1 @@ -5641,7 +5641,7 @@ __metadata: "@babel/core": 7.24.9 "@babel/node": 7.24.7 "@babel/preset-react": 7.24.7 - "@justeattakeaway/pie-icons": 4.19.0 + "@justeattakeaway/pie-icons": 4.19.1 "@justeattakeaway/pie-icons-configs": 4.5.1 "@svgr/core": 6.4.0 pascal-case: 3.1.2 @@ -5657,7 +5657,7 @@ __metadata: version: 0.0.0-use.local resolution: "@justeattakeaway/pie-icons-vue@workspace:packages/tools/pie-icons-vue" dependencies: - "@justeattakeaway/pie-icons": 4.19.0 + "@justeattakeaway/pie-icons": 4.19.1 "@justeattakeaway/pie-icons-configs": 4.5.1 "@rollup/plugin-commonjs": 25.0.8 "@vue/babel-helper-vue-jsx-merge-props": 1.4.0 @@ -5676,12 +5676,12 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-icons-webc@0.25.0, @justeattakeaway/pie-icons-webc@workspace:packages/tools/pie-icons-webc": +"@justeattakeaway/pie-icons-webc@0.25.1, @justeattakeaway/pie-icons-webc@workspace:packages/tools/pie-icons-webc": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-icons-webc@workspace:packages/tools/pie-icons-webc" dependencies: "@justeattakeaway/pie-components-config": 0.18.0 - "@justeattakeaway/pie-icons": 4.19.0 + "@justeattakeaway/pie-icons": 4.19.1 "@justeattakeaway/pie-icons-configs": 4.5.1 "@justeattakeaway/pie-webc-core": 0.24.0 "@rollup/plugin-typescript": 11.1.6 @@ -5696,7 +5696,7 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-icons@4.19.0, @justeattakeaway/pie-icons@workspace:packages/tools/pie-icons": +"@justeattakeaway/pie-icons@4.19.1, @justeattakeaway/pie-icons@workspace:packages/tools/pie-icons": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-icons@workspace:packages/tools/pie-icons" dependencies: @@ -5718,24 +5718,24 @@ __metadata: "@custom-elements-manifest/analyzer": 0.9.0 "@justeattakeaway/pie-components-config": 0.18.0 "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-icons-webc": 0.25.0 + "@justeattakeaway/pie-icons-webc": 0.25.1 "@justeattakeaway/pie-webc-core": 0.24.0 "@justeattakeaway/pie-wrapper-react": 0.14.1 cem-plugin-module-file-extensions: 0.0.5 languageName: unknown linkType: soft -"@justeattakeaway/pie-modal@0.46.0, @justeattakeaway/pie-modal@workspace:packages/components/pie-modal": +"@justeattakeaway/pie-modal@0.46.1, @justeattakeaway/pie-modal@workspace:packages/components/pie-modal": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-modal@workspace:packages/components/pie-modal" dependencies: "@custom-elements-manifest/analyzer": 0.9.0 "@justeat/pie-design-tokens": 6.3.1 - "@justeattakeaway/pie-button": 0.48.1 + "@justeattakeaway/pie-button": 0.49.0 "@justeattakeaway/pie-components-config": 0.18.0 "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-icon-button": 0.28.10 - "@justeattakeaway/pie-icons-webc": 0.25.0 + "@justeattakeaway/pie-icon-button": 0.28.11 + "@justeattakeaway/pie-icons-webc": 0.25.1 "@justeattakeaway/pie-spinner": 0.6.7 "@justeattakeaway/pie-webc-core": 0.24.0 "@justeattakeaway/pie-wrapper-react": 0.14.1 @@ -5746,15 +5746,15 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-notification@0.10.0, @justeattakeaway/pie-notification@workspace:packages/components/pie-notification": +"@justeattakeaway/pie-notification@0.10.1, @justeattakeaway/pie-notification@workspace:packages/components/pie-notification": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-notification@workspace:packages/components/pie-notification" dependencies: "@custom-elements-manifest/analyzer": 0.9.0 "@justeattakeaway/pie-components-config": 0.18.0 "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-icon-button": 0.28.10 - "@justeattakeaway/pie-icons-webc": 0.25.0 + "@justeattakeaway/pie-icon-button": 0.28.11 + "@justeattakeaway/pie-icons-webc": 0.25.1 "@justeattakeaway/pie-webc-core": 0.24.0 "@justeattakeaway/pie-wrapper-react": 0.14.1 cem-plugin-module-file-extensions: 0.0.5 @@ -5774,14 +5774,14 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-switch@0.30.0, @justeattakeaway/pie-switch@workspace:packages/components/pie-switch": +"@justeattakeaway/pie-switch@0.30.1, @justeattakeaway/pie-switch@workspace:packages/components/pie-switch": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-switch@workspace:packages/components/pie-switch" dependencies: "@custom-elements-manifest/analyzer": 0.9.0 "@justeattakeaway/pie-components-config": 0.18.0 "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-icons-webc": 0.25.0 + "@justeattakeaway/pie-icons-webc": 0.25.1 "@justeattakeaway/pie-webc-core": 0.24.0 "@justeattakeaway/pie-wrapper-react": 0.14.1 cem-plugin-module-file-extensions: 0.0.5 @@ -5796,22 +5796,22 @@ __metadata: "@custom-elements-manifest/analyzer": 0.9.0 "@justeattakeaway/pie-components-config": 0.18.0 "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-icons-webc": 0.25.0 + "@justeattakeaway/pie-icons-webc": 0.25.1 "@justeattakeaway/pie-webc-core": 0.24.0 "@justeattakeaway/pie-wrapper-react": 0.14.1 cem-plugin-module-file-extensions: 0.0.5 languageName: unknown linkType: soft -"@justeattakeaway/pie-text-input@0.23.4, @justeattakeaway/pie-text-input@workspace:packages/components/pie-text-input": +"@justeattakeaway/pie-text-input@0.23.5, @justeattakeaway/pie-text-input@workspace:packages/components/pie-text-input": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-text-input@workspace:packages/components/pie-text-input" dependencies: "@custom-elements-manifest/analyzer": 0.9.0 - "@justeattakeaway/pie-assistive-text": 0.7.0 + "@justeattakeaway/pie-assistive-text": 0.7.1 "@justeattakeaway/pie-components-config": 0.18.0 "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-icons-webc": 0.25.0 + "@justeattakeaway/pie-icons-webc": 0.25.1 "@justeattakeaway/pie-webc-core": 0.24.0 "@justeattakeaway/pie-wrapper-react": 0.14.1 cem-plugin-module-file-extensions: 0.0.5 @@ -5834,16 +5834,16 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-toast@0.3.1, @justeattakeaway/pie-toast@workspace:packages/components/pie-toast": +"@justeattakeaway/pie-toast@0.3.2, @justeattakeaway/pie-toast@workspace:packages/components/pie-toast": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-toast@workspace:packages/components/pie-toast" dependencies: "@custom-elements-manifest/analyzer": 0.9.0 - "@justeattakeaway/pie-button": 0.48.1 + "@justeattakeaway/pie-button": 0.49.0 "@justeattakeaway/pie-components-config": 0.18.0 "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-icon-button": 0.28.10 - "@justeattakeaway/pie-icons-webc": 0.25.0 + "@justeattakeaway/pie-icon-button": 0.28.11 + "@justeattakeaway/pie-icons-webc": 0.25.1 "@justeattakeaway/pie-webc-core": 0.24.0 cem-plugin-module-file-extensions: 0.0.5 languageName: unknown @@ -5858,7 +5858,7 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-webc-testing@0.13.1, @justeattakeaway/pie-webc-testing@workspace:packages/components/pie-webc-testing": +"@justeattakeaway/pie-webc-testing@0.13.2, @justeattakeaway/pie-webc-testing@workspace:packages/components/pie-webc-testing": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-webc-testing@workspace:packages/components/pie-webc-testing" dependencies: @@ -5869,30 +5869,30 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-webc@0.5.26, @justeattakeaway/pie-webc@workspace:packages/components/pie-webc": +"@justeattakeaway/pie-webc@0.5.27, @justeattakeaway/pie-webc@workspace:packages/components/pie-webc": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-webc@workspace:packages/components/pie-webc" dependencies: - "@justeattakeaway/pie-assistive-text": 0.7.0 - "@justeattakeaway/pie-button": 0.48.1 + "@justeattakeaway/pie-assistive-text": 0.7.1 + "@justeattakeaway/pie-button": 0.49.0 "@justeattakeaway/pie-card": 0.19.8 - "@justeattakeaway/pie-checkbox": 0.12.2 - "@justeattakeaway/pie-checkbox-group": 0.6.2 - "@justeattakeaway/pie-chip": 0.8.0 + "@justeattakeaway/pie-checkbox": 0.12.3 + "@justeattakeaway/pie-checkbox-group": 0.6.3 + "@justeattakeaway/pie-chip": 0.8.1 "@justeattakeaway/pie-components-config": 0.18.0 - "@justeattakeaway/pie-cookie-banner": 0.26.0 + "@justeattakeaway/pie-cookie-banner": 0.26.1 "@justeattakeaway/pie-divider": 0.13.9 "@justeattakeaway/pie-form-label": 0.14.1 - "@justeattakeaway/pie-icon-button": 0.28.10 + "@justeattakeaway/pie-icon-button": 0.28.11 "@justeattakeaway/pie-link": 0.17.8 - "@justeattakeaway/pie-modal": 0.46.0 - "@justeattakeaway/pie-notification": 0.10.0 + "@justeattakeaway/pie-modal": 0.46.1 + "@justeattakeaway/pie-notification": 0.10.1 "@justeattakeaway/pie-spinner": 0.6.7 - "@justeattakeaway/pie-switch": 0.30.0 + "@justeattakeaway/pie-switch": 0.30.1 "@justeattakeaway/pie-tag": 0.9.9 - "@justeattakeaway/pie-text-input": 0.23.4 + "@justeattakeaway/pie-text-input": 0.23.5 "@justeattakeaway/pie-textarea": 0.8.0 - "@justeattakeaway/pie-toast": 0.3.1 + "@justeattakeaway/pie-toast": 0.3.2 chalk: 5.3.0 bin: add-components: ./src/index.js @@ -26085,7 +26085,7 @@ __metadata: "@justeat/pie-design-tokens": 6.3.1 "@justeattakeaway/browserslist-config-pie": 0.2.0 "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-icons": 4.19.0 + "@justeattakeaway/pie-icons": 4.19.1 "@types/markdown-it": 13.0.2 eleventy-plugin-rev: 1.1.1 eleventy-plugin-toc: 1.1.5 @@ -26117,8 +26117,8 @@ __metadata: "@justeat/pie-design-tokens": 6.3.1 "@justeattakeaway/browserslist-config-pie": 0.2.0 "@justeattakeaway/generator-pie-component": 0.21.1 - "@justeattakeaway/pie-icons": 4.19.0 - "@justeattakeaway/pie-webc-testing": 0.13.1 + "@justeattakeaway/pie-icons": 4.19.1 + "@justeattakeaway/pie-webc-testing": 0.13.2 "@justeattakeaway/pie-wrapper-react": 0.14.1 "@justeattakeaway/stylelint-config-pie": 0.7.0 "@percy/cli": 1.28.8 @@ -26176,28 +26176,28 @@ __metadata: resolution: "pie-storybook@workspace:apps/pie-storybook" dependencies: "@justeat/pie-design-tokens": 6.3.1 - "@justeattakeaway/pie-assistive-text": 0.7.0 - "@justeattakeaway/pie-button": 0.48.1 + "@justeattakeaway/pie-assistive-text": 0.7.1 + "@justeattakeaway/pie-button": 0.49.0 "@justeattakeaway/pie-card": 0.19.8 - "@justeattakeaway/pie-checkbox": 0.12.2 - "@justeattakeaway/pie-checkbox-group": 0.6.2 - "@justeattakeaway/pie-chip": 0.8.0 - "@justeattakeaway/pie-cookie-banner": 0.26.0 + "@justeattakeaway/pie-checkbox": 0.12.3 + "@justeattakeaway/pie-checkbox-group": 0.6.3 + "@justeattakeaway/pie-chip": 0.8.1 + "@justeattakeaway/pie-cookie-banner": 0.26.1 "@justeattakeaway/pie-css": 0.12.1 "@justeattakeaway/pie-divider": 0.13.9 "@justeattakeaway/pie-form-label": 0.14.1 - "@justeattakeaway/pie-icon-button": 0.28.10 + "@justeattakeaway/pie-icon-button": 0.28.11 "@justeattakeaway/pie-icons-configs": 4.5.1 - "@justeattakeaway/pie-icons-webc": 0.25.0 + "@justeattakeaway/pie-icons-webc": 0.25.1 "@justeattakeaway/pie-link": 0.17.8 - "@justeattakeaway/pie-modal": 0.46.0 - "@justeattakeaway/pie-notification": 0.10.0 + "@justeattakeaway/pie-modal": 0.46.1 + "@justeattakeaway/pie-notification": 0.10.1 "@justeattakeaway/pie-spinner": 0.6.7 - "@justeattakeaway/pie-switch": 0.30.0 + "@justeattakeaway/pie-switch": 0.30.1 "@justeattakeaway/pie-tag": 0.9.9 - "@justeattakeaway/pie-text-input": 0.23.4 + "@justeattakeaway/pie-text-input": 0.23.5 "@justeattakeaway/pie-textarea": 0.8.0 - "@justeattakeaway/pie-toast": 0.3.1 + "@justeattakeaway/pie-toast": 0.3.2 "@storybook/addon-a11y": 8.2.6 "@storybook/addon-designs": 8.0.3 "@storybook/addon-essentials": 8.2.6 @@ -34128,7 +34128,7 @@ __metadata: "@angular/platform-browser-dynamic": 15.2.0 "@angular/router": 15.2.0 "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-webc": 0.5.26 + "@justeattakeaway/pie-webc": 0.5.27 rxjs: 7.8.0 tslib: 2.3.0 typescript: 4.9.4 @@ -34145,7 +34145,7 @@ __metadata: "@babel/preset-env": 7.24.5 "@babel/preset-react": 7.24.1 "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-webc": 0.5.26 + "@justeattakeaway/pie-webc": 0.5.27 "@lit/react": 1.0.2 babel-loader: 8 eslint: 8.37.0 @@ -34162,7 +34162,7 @@ __metadata: resolution: "wc-next13@workspace:apps/examples/wc-next13" dependencies: "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-webc": 0.5.26 + "@justeattakeaway/pie-webc": 0.5.27 "@lit-labs/nextjs": 0.2.0 "@lit/react": 1.0.5 "@types/react": 18.3.3 @@ -34185,7 +34185,7 @@ __metadata: dependencies: "@babel/preset-env": 7.24.5 "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-webc": 0.5.26 + "@justeattakeaway/pie-webc": 0.5.27 babel-loader: 8 core-js: 3.30.0 nuxt: 2.17.0 @@ -34200,7 +34200,7 @@ __metadata: resolution: "wc-nuxt3@workspace:apps/examples/wc-nuxt3" dependencies: "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-webc": 0.5.26 + "@justeattakeaway/pie-webc": 0.5.27 "@types/node": 18 nuxt: 3.4.3 nuxt-ssr-lit: 1.6.5 @@ -34212,7 +34212,7 @@ __metadata: resolution: "wc-react17@workspace:apps/examples/wc-react17" dependencies: "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-webc": 0.5.26 + "@justeattakeaway/pie-webc": 0.5.27 "@lit/react": 1.0.5 "@types/react": ^17.0.2 "@types/react-dom": ^17.0.2 @@ -34232,7 +34232,7 @@ __metadata: resolution: "wc-react18@workspace:apps/examples/wc-react18" dependencies: "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-webc": 0.5.26 + "@justeattakeaway/pie-webc": 0.5.27 "@lit/react": 1.0.5 "@types/react": 18.3.3 "@types/react-dom": 18.3.0 @@ -34253,8 +34253,8 @@ __metadata: dependencies: "@justeat/pie-design-tokens": 6.3.1 "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-icons-webc": 0.25.0 - "@justeattakeaway/pie-webc": 0.5.26 + "@justeattakeaway/pie-icons-webc": 0.25.1 + "@justeattakeaway/pie-webc": 0.5.27 vite: 4.5.3 languageName: unknown linkType: soft @@ -34264,7 +34264,7 @@ __metadata: resolution: "wc-vue3@workspace:apps/examples/wc-vue3" dependencies: "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-webc": 0.5.26 + "@justeattakeaway/pie-webc": 0.5.27 "@types/node": 18.15.11 "@vitejs/plugin-vue": 4.0.0 "@vue/tsconfig": 0.1.3 From 133104662e73190cc14557ace27ef59d6dedc9cd Mon Sep 17 00:00:00 2001 From: Xander Marjoram Date: Tue, 3 Sep 2024 15:17:22 +0100 Subject: [PATCH 2/2] docs(pie-tag): DSW-2323 update code page for pie-tag --- .changeset/eighty-cobras-serve.md | 5 ++++ apps/pie-docs/src/components/tag/code/code.md | 2 +- .../src/components/tag/code/props.json | 27 ++++++++++++++++++- 3 files changed, 32 insertions(+), 2 deletions(-) create mode 100644 .changeset/eighty-cobras-serve.md diff --git a/.changeset/eighty-cobras-serve.md b/.changeset/eighty-cobras-serve.md new file mode 100644 index 0000000000..be33a2af95 --- /dev/null +++ b/.changeset/eighty-cobras-serve.md @@ -0,0 +1,5 @@ +--- +"pie-docs": patch +--- + +[Changed] - Update code page for pie-tag diff --git a/apps/pie-docs/src/components/tag/code/code.md b/apps/pie-docs/src/components/tag/code/code.md index 7748fd1425..ad9a390e1e 100644 --- a/apps/pie-docs/src/components/tag/code/code.md +++ b/apps/pie-docs/src/components/tag/code/code.md @@ -55,7 +55,7 @@ yarn add @justeattakeaway/pie-webc tableData: props } %} -Since the component is not interactive, it doesn't have a disabled property. To give the Tag a disabled look, please set the `--tag-opacity` css variable. Recommended opacity level for disabled tag is 0.5. +You can customise the disabled appearance by setting the `--tag-opacity` css variable. The default opacity level for the disabled state is 0.5. ## Slots diff --git a/apps/pie-docs/src/components/tag/code/props.json b/apps/pie-docs/src/components/tag/code/props.json index ffab356c59..a9292f0ac2 100644 --- a/apps/pie-docs/src/components/tag/code/props.json +++ b/apps/pie-docs/src/components/tag/code/props.json @@ -31,7 +31,32 @@ "type": "code", "item": ["true", "false"] }, - "If `true`, displays strong tag styles for `green`, `yellow`, `red`, `blue` and `neutral` variants.", + "If `true`, displays strong tag styles for `green`, `yellow`, `red`, `blue` and `neutral` variants. Has no effect for other variants.", + { + "type": "code", + "item": ["false"] + } + ], + [ + "isInteractive", + { + "type": "code", + "item": ["true", "false"] + + }, + "When `true`, the tag will be rendered as a button and can be interacted with.", + { + "type": "code", + "item": ["false"] + } + ], + [ + "disabled", + { + "type": "code", + "item": ["true", "false"] + }, + "For an interactive tag, this applies the disabled attribute to the button and styles it appropriately. For a non-interactive tag, this only applies the disabled styling.", { "type": "code", "item": ["false"]