refactor(pie-tag): DSW-2280 use classes instead of attributes for sty…

…ling (#1749)
justeattakeaway · Sep 2, 2024 · 1108446 · 1108446
1 parent 6c415bc
commit 1108446
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 50 deletions.
diff --git a/.changeset/modern-falcons-cheer.md b/.changeset/modern-falcons-cheer.md
@@ -0,0 +1,6 @@
+---
+"@justeattakeaway/pie-tag": patch
+"pie-storybook": patch
+---
+
+[Changed] - use classes instead of attributes for styling
diff --git a/apps/pie-storybook/stories/pie-tag.stories.ts b/apps/pie-storybook/stories/pie-tag.stories.ts
@@ -1,15 +1,13 @@
 import { html, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
-/* eslint-disable import/no-duplicates */
 import '@justeattakeaway/pie-tag';
 import {
-    TagProps as TagBaseProps, variants, sizes, defaultProps,
+    type TagProps as TagBaseProps, variants, sizes, defaultProps,
 } from '@justeattakeaway/pie-tag';
-/* eslint-enable import/no-duplicates */
 import '@justeattakeaway/pie-icons-webc/dist/IconHeartFilled.js';
 
-import type { StoryMeta, SlottedComponentProps } from '../types';
+import { type StoryMeta, type SlottedComponentProps } from '../types';
 import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities';
 
 type TagProps = SlottedComponentProps<TagBaseProps> & { showIcon: boolean };

diff --git a/packages/components/pie-tag/src/defs-react.ts b/packages/components/pie-tag/src/defs-react.ts
@@ -1,3 +1,3 @@
-import React from 'react';
+import type React from 'react';
 
 export type ReactBaseType = React.HTMLAttributes<HTMLSpanElement>
diff --git a/packages/components/pie-tag/src/index.ts b/packages/components/pie-tag/src/index.ts
@@ -2,10 +2,11 @@ import {
     LitElement, html, unsafeCSS, nothing,
 } from 'lit';
 import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
 import styles from './tag.scss?inline';
 import {
-    TagProps, variants, sizes, defaultProps,
+    type TagProps, variants, sizes, defaultProps,
 } from './defs';
 
 // Valid values available to consumers
@@ -21,11 +22,11 @@ const componentSelector = 'pie-tag';
 export class PieTag extends LitElement implements TagProps {
     @property({ type: String })
     @validPropertyValues(componentSelector, variants, defaultProps.variant)
-    public variant: TagProps['variant'] = defaultProps.variant;
+    public variant = defaultProps.variant;
 
     @property({ type: String })
     @validPropertyValues(componentSelector, sizes, defaultProps.size)
-    public size : TagProps['size'] = defaultProps.size;
+    public size = defaultProps.size;
 
     @property({ type: Boolean })
     public isStrong = defaultProps.isStrong;
@@ -35,18 +36,23 @@ export class PieTag extends LitElement implements TagProps {
 
     render () {
         const {
-            variant,
-            size,
-            isStrong,
             isDimmed,
+            isStrong,
+            size,
+            variant,
         } = this;
+
+        const classes = {
+            'c-tag': true,
+            [`c-tag--${size}`]: true,
+            [`c-tag--${variant}`]: true,
+            'c-tag--dimmed': isDimmed,
+            'c-tag--strong': isStrong,
+        };
+
         return html`
             <div
-                class="c-tag"
-                variant=${variant}
-                size=${size}
-                ?isStrong=${isStrong}
-                ?isDimmed=${isDimmed}
+                class="${classMap(classes)}"
                 data-test-id="pie-tag"
             >
                 ${size === 'large' ? html`<slot name="icon"></slot>` : nothing}

diff --git a/packages/components/pie-tag/src/tag.scss b/packages/components/pie-tag/src/tag.scss
@@ -34,79 +34,79 @@
     line-height: var(--tag-line-height);
 
     // Size
-    &[size='small'] {
+    &.c-tag--small {
         --tag-padding-block: 0;
         --tag-padding-inline: var(--dt-spacing-a);
         --tag-border-radius: var(--dt-radius-rounded-a);
         --tag-font-size: #{p.font-size(--dt-font-caption-size)};
         --tag-line-height: #{p.line-height(--dt-font-caption-line-height)};
     }
 
-    &[size='large'] {
+    &.c-tag--large {
         // same as default styles
     }
 
     // Variant
-    &[variant='neutral'] {
+    &.c-tag--neutral {
         // same as default styles
 
-        &[isStrong] {
+        &.c-tag--strong {
             --tag-bg-color: var(--dt-color-container-inverse);
             --tag-color: var(--dt-color-content-inverse);
         }
     }
 
-    &[variant='blue'] {
+    &.c-tag--blue {
         --tag-bg-color: var(--dt-color-support-info-02);
         --tag-color: var(--dt-color-content-default);
 
-        &[isStrong] {
+        &.c-tag--strong {
             --tag-bg-color: var(--dt-color-support-info);
             --tag-color: var(--dt-color-content-inverse);
         }
     }
 
-    &[variant='green'] {
+    &.c-tag--green {
         --tag-bg-color: var(--dt-color-support-positive-02);
         --tag-color: var(--dt-color-content-default);
 
-        &[isStrong] {
+        &.c-tag--strong {
             --tag-bg-color: var(--dt-color-support-positive);
             --tag-color: var(--dt-color-content-inverse);
         }
     }
 
-    &[variant='yellow'] {
+    &.c-tag--yellow {
         --tag-bg-color: var(--dt-color-support-warning-02);
         --tag-color: var(--dt-color-content-default);
 
-        &[isStrong] {
+        &.c-tag--strong {
             --tag-bg-color: var(--dt-color-support-warning);
             --tag-color: var(--dt-color-content-dark);
         }
     }
 
-    &[variant='red'] {
+    &.c-tag--red {
         --tag-bg-color: var(--dt-color-support-error-02);
         --tag-color: var(--dt-color-content-default);
 
-        &[isStrong] {
+        &.c-tag--strong {
             --tag-bg-color: var(--dt-color-support-error);
             --tag-color: var(--dt-color-content-light);
         }
     }
 
-    &[variant='brand'] {
+    &.c-tag--brand {
         --tag-bg-color: var(--dt-color-support-brand-02);
         --tag-color: var(--dt-color-content-default);
     }
 
-    &[variant='neutral-alternative'] {
+    &.c-tag--neutral-alternative {
         --tag-bg-color: var(--dt-color-container-default);
         --tag-color: var(--dt-color-content-default);
     }
 
-    &[variant='outline'] {
+    &.c-tag--outline {
         --tag-bg-color: var(--tag-transparent-bg-color);
         --tag-color: var(--dt-color-content-default);
 
@@ -116,12 +116,12 @@
         box-shadow: 0 0 0 1px var(--dt-color-border-strong);
     }
 
-    &[variant='ghost'] {
+    &.c-tag--ghost {
         --tag-bg-color: var(--tag-transparent-bg-color);
         --tag-color: var(--dt-color-content-default);
     }
 
-    &[isDimmed] {
+    &.c-tag--dimmed {
         opacity: 0.5;
     }
 }

diff --git a/packages/components/pie-tag/test/accessibility/pie-tag.spec.ts b/packages/components/pie-tag/test/accessibility/pie-tag.spec.ts
@@ -1,7 +1,7 @@
 
 import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/webc-fixtures.ts';
 import { getAllPropCombinations, splitCombinationsByPropertyValue } from '@justeattakeaway/pie-webc-testing/src/helpers/get-all-prop-combos.ts';
-import { PropObject, WebComponentPropValues } from '@justeattakeaway/pie-webc-testing/src/helpers/defs.ts';
+import { type PropObject, type WebComponentPropValues } from '@justeattakeaway/pie-webc-testing/src/helpers/defs.ts';
 import { PieTag } from '../../src/index.ts';
 import { sizes, variants } from '../../src/defs.ts';
 

diff --git a/packages/components/pie-tag/test/component/pie-tag.spec.ts b/packages/components/pie-tag/test/component/pie-tag.spec.ts
@@ -1,23 +1,16 @@
 import { getShadowElementStylePropValues } from '@justeattakeaway/pie-webc-testing/src/helpers/get-shadow-element-style-prop-values.ts';
 import { test, expect } from '@sand4rt/experimental-ct-web';
-import { PieTag, TagProps } from '../../src/index.ts';
+import { PieTag, type TagProps } from '../../src/index.ts';
 
 const componentSelector = '[data-test-id="pie-tag"]';
 const tagIconSelector = '[data-test-id="tag-icon"]';
 
-const props: Partial<TagProps> = {
-    size: 'large',
-    variant: 'neutral',
-    isStrong: false,
-    isDimmed: false,
-};
-
 type VariantToBgStyle = {
     variantName: TagProps['variant'];
     bgStyle: string;
 };
 
-const variantsToIsStrongStyle:Array<VariantToBgStyle> = [
+const variantsToIsStrongStyle: Array<VariantToBgStyle> = [
     { variantName: 'neutral', bgStyle: '--dt-color-container-inverse' },
     { variantName: 'green', bgStyle: '--dt-color-support-positive' },
     { variantName: 'red', bgStyle: '--dt-color-support-error' },
@@ -35,7 +28,6 @@ test.describe('PieTag - Component tests', () => {
     test('should render successfully', async ({ mount, page }) => {
         // Arrange
         await mount(PieTag, {
-            props,
             slots: {
                 default: 'Label',
             },
@@ -54,7 +46,6 @@ test.describe('PieTag - Component tests', () => {
                 test('should render the icon', async ({ mount, page }) => {
                     // Arrange
                     await mount(PieTag, {
-                        props,
                         slots: {
                             default: 'Label',
                             icon,
@@ -74,7 +65,6 @@ test.describe('PieTag - Component tests', () => {
                     // Arrange
                     await mount(PieTag, {
                         props: {
-                            ...props,
                             size: 'small',
                         },
                         slots: {
@@ -96,7 +86,6 @@ test.describe('PieTag - Component tests', () => {
             test('should NOT render the icon', async ({ mount, page }) => {
                 // Arrange
                 await mount(PieTag, {
-                    props,
                     slots: {
                         default: 'Label',
                     },
@@ -115,7 +104,6 @@ test.describe('PieTag - Component tests', () => {
         test(`a "${variantName}" tag variant bg colour should be equivalent to "${bgStyle}"`, async ({ mount }) => {
             const component = await mount(PieTag, {
                 props: {
-                    ...props,
                     variant: variantName,
                     isStrong: true,
                 },

diff --git 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, WebComponentPropValues, WebComponentTestInput,
+import {
+    type PropObject, type WebComponentPropValues, type WebComponentTestInput,
 } from '@justeattakeaway/pie-webc-testing/src/helpers/defs.ts';
 import {
     getAllPropCombinations, splitCombinationsByPropertyValue,