@justeattakeaway/pie-button 0.16.0 → 0.17.0

package/dist/types/packages/components/pie-button/src/defs.d.ts

@@ -1,18 +1,31 @@
+export declare const sizes: readonly ["xsmall", "small-productive", "small-expressive", "medium", "large"];
+export declare const types: readonly ["submit", "button", "reset", "menu"];
+export declare const variants: readonly ["primary", "secondary", "outline", "ghost"];
 export interface ButtonProps {
-    size: 'xsmall' | 'small-expressive' | 'small-productive' | 'medium' | 'large';
-    type: 'submit' | 'button' | 'reset' | 'menu';
-    variant: 'primary' | 'secondary' | 'outline' | 'ghost';
+    /**
+     * (Optional) What size the button should be.
+     * @default "medium"
+     */
+    size: typeof sizes[number];
+    /**
+     * (Optional) What type attribute should be applied to the button. For example submit, button or menu.
+     * @default "submit"
+     */
+    type: typeof types[number];
+    /**
+     * (Optional) What style variant the button should be such as primary, outline or ghost.
+     * @default "primary"
+     */
+    variant: typeof variants[number];
+    /**
+     * (Optional) When true, the button element is disabled.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * (Optional) When true, the button element will occupy the full width of its container.
+     * @default false
+     */
+    isFullWidth: boolean;
 }
-/**
- * Button size variants
- */
-export declare const buttonSizes: ButtonProps['size'][];
-/**
- * Button style variants
- */
-export declare const buttonVariants: ButtonProps['variant'][];
-/**
- * Button type variants
- */
-export declare const buttonTypes: ButtonProps['type'][];
 //# sourceMappingURL=defs.d.ts.map

package/dist/types/packages/components/pie-button/src/defs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IACxB,IAAI,EAAE,QAAQ,GAAG,kBAAkB,GAAG,kBAAkB,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC9E,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAC7C,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;CAC1D;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,EAM5C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,WAAW,CAAC,SAAS,CAAC,EAKlD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,EAK5C,CAAC"}
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,gFAAiF,CAAC;AACpG,eAAO,MAAM,KAAK,gDAAiD,CAAC;AACpE,eAAO,MAAM,QAAQ,uDAAwD,CAAC;AAE9E,MAAM,WAAW,WAAW;IACxB;;;OAGG;IACH,IAAI,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3B;;;OAGG;IACH,IAAI,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3B;;;OAGG;IACH,OAAO,EAAE,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC;IACjC;;;OAGG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,EAAE,OAAO,CAAC;CACxB"}

package/dist/types/packages/components/pie-button/src/index.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
-import { ButtonProps, buttonSizes, buttonTypes, buttonVariants } from './defs';
-export { type ButtonProps, buttonSizes, buttonTypes, buttonVariants, };
+import { ButtonProps, sizes, types, variants } from './defs';
+export { type ButtonProps, sizes, types, variants, };
 declare const componentSelector = "pie-button";
 export declare class PieButton extends LitElement {
     size: ButtonProps['size'];

package/dist/types/packages/components/pie-button/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAKlD,OAAO,EACH,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EACxD,MAAM,QAAQ,CAAC;AAGhB,OAAO,EACH,KAAK,WAAW,EAChB,WAAW,EACX,WAAW,EACX,cAAc,GACjB,CAAC;AAEF,QAAA,MAAM,iBAAiB,eAAe,CAAC;AAEvC,qBAAa,SAAU,SAAQ,UAAU;IAGjC,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAY;IAIrC,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAY;IAIrC,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAa;IAG5C,QAAQ,UAAS;IAGjB,WAAW,UAAS;IAExB,MAAM;IAkBN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC;KAClC;CACJ"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD,OAAO,EACH,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EACtC,MAAM,QAAQ,CAAC;AAGhB,OAAO,EACH,KAAK,WAAW,EAChB,KAAK,EACL,KAAK,EACL,QAAQ,GACX,CAAC;AAEF,QAAA,MAAM,iBAAiB,eAAe,CAAC;AAEvC,qBAAa,SAAU,SAAQ,UAAU;IAGjC,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAY;IAIrC,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAY;IAIrC,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAa;IAG5C,QAAQ,UAAS;IAGjB,WAAW,UAAS;IAExB,MAAM;IAkBN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC;KAClC;CACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "PIE design system button built using web components",
   "type": "module",
   "main": "dist/index.js",

package/src/button.scss

@@ -28,7 +28,6 @@
     // currently this sets the primary button styles
     --btn-bg-color: var(--dt-color-interactive-brand);
     --btn-text-color: var(--dt-color-content-interactive-primary);
-    --btn-focus: var(--dt-color-focus-outer);
 
     min-block-size: var(--btn-min-block-size);
     padding: var(--btn-padding);
@@ -45,13 +44,59 @@
     user-select: none;
 
     &:focus-visible {
-        // TODO - Need to update to use the latest focus styling
-        outline: 2px solid var(--btn-focus);
+        /*
+        TODO: This focus styling should be extracted out into a shared mixin to share among other components
+        Applying both shadows in a single declaration gives anti-aliasing artefacts.
+        box-shadow: 0 0 0 2px dt.$color-focus-inner, 0 0 0 4px dt.$color-focus-outer;
+
+        To prevent this, they should be separated so they don't bleed into each other,
+        i.e., one shadow on the element and another on a pseudo element like :after
+        */
+        box-shadow: 0 0 0 2px var(--dt-color-focus-inner);
+        outline: none;
+
+        /*
+        Setting the position to relative prevents the pseudo-element from
+        anchoring instead to the nearest ancestor with a specified position.
+
+        You can override this if you need another value.
+        */
+        position: relative;
+
+        &:after {
+            content: '';
+            display: block;
+
+            /*
+            The pseudo element has to be larger than the element itself, but not just by
+            2px (the thickness of the inner shadow), it has to be 1px larger than that to
+            account for the border thickness.
+            */
+            position: absolute;
+            top: -3px;
+            left: -3px;
+            right: -3px;
+            bottom: -3px;
+            border-radius: var(--btn-border-radius);
+
+            box-shadow: 0 0 0 2px var(--dt-color-focus-outer);
+        }
     }
 
     // Variant
     &[variant='primary'] {
         @include button-interactive-states('--dt-color-interactive-brand');
+
+        &[size='xsmall'],
+        &[size='small-productive'] {
+            /**
+            * Where the font-size is smaller,
+            * update the button backgrounds so that the text is accessible
+            **/
+            --btn-bg-color: var(--dt-color-interactive-primary);
+
+            @include button-interactive-states('--dt-color-interactive-primary');
+        }
     }
 
     &[variant='secondary'] {
@@ -63,7 +108,7 @@
 
     &[variant='outline'] {
         --btn-bg-color: var(--dt-color-container-default);
-        --btn-text-color: var(--dt-color-content-interactive-tertiary);
+        --btn-text-color: var(--dt-color-content-interactive-secondary);
 
         border: 1px solid var(--dt-color-border-strong);
 
@@ -71,7 +116,7 @@
     }
 
     &[variant='ghost'] {
-        --btn-bg-color: var(--dt-color-container-default);
+        --btn-bg-color: transparent;
         --btn-text-color: var(--dt-color-content-link);
 
         @include button-interactive-states('--dt-color-container-default');
@@ -83,31 +128,37 @@
     }
 
     &[disabled] {
-        --btn-bg-color: var(--dt-color-disabled-01);
-        --btn-text-color: var(--dt-color-content-disabled);
+        --btn-text-color: var(--dt-color-content-disabled) !important;
 
-        border: 1px solid var(--dt-color-disabled-01);
         cursor: not-allowed;
-    }
 
-    &[disabled][variant='ghost'] {
-        --btn-bg-color: var(--dt-color-container-default);
+        // For every variant except ghost, set the disabled background color
+        &:not([variant='ghost']) {
+            --btn-bg-color: var(--dt-color-disabled-01) !important;
+        }
 
-        outline: none;
+        // For outline variants, set the border to the disabled color
+        &[variant='outline'] {
+            border-color: var(--dt-color-disabled-01) !important;
+        }
     }
 
     &[size='xsmall'] {
         --btn-padding: 6px var(--dt-spacing-b);
-        --btn-min-block-size: 32px;
         --btn-font-size: calc(var(--dt-font-size-14) * 1px);
         --btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);
     }
 
-    &[size='small'] {
+    &[size='small-expressive'] {
+        --btn-padding: 6px var(--dt-spacing-d);
+        --btn-font-size: calc(var(--dt-font-size-20) * 1px);
+        --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
+    }
+
+    &[size='small-productive'] {
         --btn-padding: 8px var(--dt-spacing-d);
-        --btn-min-block-size: 40px;
-        --btn-font-size: calc(var(--dt-font-size-19) * 1px);
-        --btn-line-height: calc(var(--dt-font-size-19-line-height) * 1px);
+        --btn-font-size: calc(var(--dt-font-size-16) * 1px);
+        --btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);
     }
 
     &[size='medium'] {
@@ -116,7 +167,6 @@
 
     &[size='large'] {
         --btn-padding: 14px var(--dt-spacing-e);
-        --btn-min-block-size: 56px;
         --btn-font-size: calc(var(--dt-font-size-20) * 1px);
         --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
     }

package/src/defs.ts

@@ -1,36 +1,31 @@
+export const sizes = ['xsmall', 'small-productive', 'small-expressive', 'medium', 'large'] as const;
+export const types = ['submit', 'button', 'reset', 'menu'] as const;
+export const variants = ['primary', 'secondary', 'outline', 'ghost'] as const;
+
 export interface ButtonProps {
-    size: 'xsmall' | 'small-expressive' | 'small-productive' | 'medium' | 'large';
-    type: 'submit' | 'button' | 'reset' | 'menu';
-    variant: 'primary' | 'secondary' | 'outline' | 'ghost';
+    /**
+     * (Optional) What size the button should be.
+     * @default "medium"
+     */
+    size: typeof sizes[number];
+    /**
+     * (Optional) What type attribute should be applied to the button. For example submit, button or menu.
+     * @default "submit"
+     */
+    type: typeof types[number];
+    /**
+     * (Optional) What style variant the button should be such as primary, outline or ghost.
+     * @default "primary"
+     */
+    variant: typeof variants[number];
+    /**
+     * (Optional) When true, the button element is disabled.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * (Optional) When true, the button element will occupy the full width of its container.
+     * @default false
+     */
+    isFullWidth: boolean;
 }
-
-/**
- * Button size variants
- */
-export const buttonSizes: ButtonProps['size'][] = [
-    'xsmall',
-    'small-expressive',
-    'small-productive',
-    'medium',
-    'large'
-];
-
-/**
- * Button style variants
- */
-export const buttonVariants: ButtonProps['variant'][] = [
-    'primary',
-    'secondary',
-    'outline',
-    'ghost',
-];
-
-/**
- * Button type variants
- */
-export const buttonTypes: ButtonProps['type'][] = [
-    'submit',
-    'button',
-    'reset',
-    'menu',
-];

package/src/index.ts

@@ -1,33 +1,32 @@
 import { LitElement, html, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 import { validPropertyValues } from '@justeattakeaway/pie-webc-core';
-
 import styles from './button.scss?inline';
 import {
-    ButtonProps, buttonSizes, buttonTypes, buttonVariants,
+    ButtonProps, sizes, types, variants,
 } from './defs';
 
 // Valid values available to consumers
 export {
     type ButtonProps,
-    buttonSizes,
-    buttonTypes,
-    buttonVariants,
+    sizes,
+    types,
+    variants,
 };
 
 const componentSelector = 'pie-button';
 
 export class PieButton extends LitElement {
     @property()
-    @validPropertyValues(componentSelector, buttonSizes, 'medium')
+    @validPropertyValues(componentSelector, sizes, 'medium')
         size: ButtonProps['size'] = 'medium';
 
     @property()
-    @validPropertyValues(componentSelector, buttonTypes, 'submit')
+    @validPropertyValues(componentSelector, types, 'submit')
         type: ButtonProps['type'] = 'submit';
 
     @property()
-    @validPropertyValues(componentSelector, buttonVariants, 'primary')
+    @validPropertyValues(componentSelector, variants, 'primary')
         variant: ButtonProps['variant'] = 'primary';
 
     @property({ type: Boolean })

package/test/accessibility/pie-button.spec.ts

@@ -1,25 +1,24 @@
 import { test, expect } from '@sand4rt/experimental-ct-web';
 import AxeBuilder from '@axe-core/playwright';
-import {
-    PropObject, Combination, getAllPropCombinations, splitCombinationsByPropertyValue,
-} from '@justeattakeaway/pie-webc-core/src/test-helpers/get-all-prop-combos.ts';
-import { PieButton } from '@/index.ts';
-import { buttonSizes, buttonVariants } from '@/defs';
+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 { PieButton } from '@/index';
+import { sizes, variants } from '@/defs';
 
 const props: PropObject = {
-    variant: buttonVariants,
-    size: buttonSizes,
+    variant: variants,
+    size: sizes,
     type: 'button', // Changing the type does not affect the appearance of the button
     isFullWidth: [true, false],
     disabled: [true, false],
 };
 
-const componentPropsMatrix : Combination[] = getAllPropCombinations(props);
-const componentPropsMatrixByVariant: Record<string, Combination[]> = splitCombinationsByPropertyValue(componentPropsMatrix, 'variant');
+const componentPropsMatrix : WebComponentPropValues[] = getAllPropCombinations(props);
+const componentPropsMatrixByVariant: Record<string, WebComponentPropValues[]> = splitCombinationsByPropertyValue(componentPropsMatrix, 'variant');
 const componentVariants: string[] = Object.keys(componentPropsMatrixByVariant);
 
 componentVariants.forEach((variant) => test(`Render all prop variations for Variant: ${variant}`, async ({ page, mount }) => {
-    await Promise.all(componentPropsMatrixByVariant[variant].map(async (combo: Combination) => {
+    await Promise.all(componentPropsMatrixByVariant[variant].map(async (combo: WebComponentPropValues) => {
         await mount(
             PieButton,
             {
@@ -31,7 +30,7 @@ componentVariants.forEach((variant) => test(`Render all prop variations for Vari
         );
     }));
 
-    const results = await new AxeBuilder.default({ page })
+    const results = await new AxeBuilder({ page })
         .withTags(['wcag21a', 'wcag21aa', 'wcag143', 'cat.color', 'cat.aria'])
         .disableRules(['color-contrast', 'color-contrast-enhanced'])
         .analyze();

package/test/component/pie-button.spec.ts

@@ -1,5 +1,11 @@
 import { test, expect } from '@sand4rt/experimental-ct-web';
 import { PieButton } from '@/index';
+import { ButtonProps } from '@/index';
+
+const props: ButtonProps = {
+    size: 'large',
+    variant: 'primary',
+}
 
 test('should correctly work with native click events', async ({ mount }) => {
     const messages: string[] = [];
@@ -7,10 +13,7 @@ test('should correctly work with native click events', async ({ mount }) => {
     const component = await mount(
         PieButton,
         {
-            props: {
-                size: 'large',
-                variant: 'primary',
-            },
+            props,
             slots: {
                 default: 'Click me!',
             },

package/test/visual/pie-button.spec.ts

@@ -1,24 +1,23 @@
 import { test } from '@sand4rt/experimental-ct-web';
-import { getLitPercyOptions } from '@justeattakeaway/pie-webc-core/src/test-helpers/percy-lit-options.ts';
 import percySnapshot from '@percy/playwright';
 import type {
     PropObject, WebComponentPropValues, WebComponentTestInput,
-} from '@justeattakeaway/pie-webc-core/src/test-helpers/defs.ts';
+} from '@justeattakeaway/pie-webc-testing/src/helpers/defs.ts';
 import {
     getAllPropCombinations, splitCombinationsByPropertyValue,
-} from '@justeattakeaway/pie-webc-core/src/test-helpers/get-all-prop-combos.ts';
+} from '@justeattakeaway/pie-webc-testing/src/helpers/get-all-prop-combos.ts';
 import {
     createTestWebComponent,
-} from '@justeattakeaway/pie-webc-core/src/test-helpers/rendering.ts';
+} from '@justeattakeaway/pie-webc-testing/src/helpers/rendering.ts';
 import {
     WebComponentTestWrapper,
-} from '@justeattakeaway/pie-webc-core/src/test-helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts';
+} from '@justeattakeaway/pie-webc-testing/src/helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts';
 import { PieButton } from '@/index';
-import { buttonSizes, buttonVariants } from '@/defs';
+import { sizes, variants } from '@/defs';
 
 const props: PropObject = {
-    variant: buttonVariants,
-    size: buttonSizes,
+    variant: variants,
+    size: sizes,
     type: 'button', // Changing the type does not affect the appearance of the button
     isFullWidth: [true, false],
     disabled: [true, false],
@@ -33,14 +32,17 @@ const componentVariants: string[] = Object.keys(componentPropsMatrixByVariant);
 
 // This ensures the component is registered in the DOM for each test
 // This is not required if your tests mount the web component directly in the tests
-test('Component registered in the DOM', async ({ mount }) => {
+test.beforeEach(async ({ page, mount }) => {
     await mount(
         PieButton,
-        {
-            props: {},
-            slots: {},
-        },
+        {},
     );
+
+    // Removing the element so it's not present in the tests (but is still registered in the DOM)
+    await page.evaluate(() => {
+        const element : Element | null = document.querySelector('pie-button');
+        element?.remove();
+    });
 });
 
 componentVariants.forEach((variant) => test(`Render all prop variations for Variant: ${variant}`, async ({ page, mount }) => {
@@ -53,11 +55,11 @@ componentVariants.forEach((variant) => test(`Render all prop variations for Vari
             {
                 props: { propKeyValues },
                 slots: {
-                    default: testComponent.renderedString.trim(),
+                    component: testComponent.renderedString.trim(),
                 },
             },
         );
     }));
 
-    await percySnapshot(page, `PIE Button - Variant: ${variant}`, getLitPercyOptions());
+    await percySnapshot(page, `PIE Button - Variant: ${variant}`);
 }));

package/vite.config.js

@@ -1,3 +1,3 @@
-import viteConfig from '@justeattakeaway/pie-components-config/vite.config'; // eslint-disable-line import/no-extraneous-dependencies
+import viteConfig from '@justeattakeaway/pie-components-config/vite.config';
 
 export default viteConfig;