@justeattakeaway/pie-button 0.15.0 → 0.16.1

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

@@ -1,29 +1,40 @@
+export interface ButtonProps {
+    /**
+     * the size of the button.
+     * @default medium
+     */
+    size: 'xsmall' | 'small-expressive' | 'small-productive' | 'medium' | 'large';
+    /**
+     * The html button type to use.
+     * @default submit
+     */
+    type: 'submit' | 'button' | 'reset' | 'menu';
+    /**
+     * the variant of the button.
+     * @default primary
+     */
+    variant: 'primary' | 'secondary' | 'outline' | 'ghost';
+    /**
+     * If `true`, the button will be disabled.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * If `true`, the button will span the full width.
+     * @default false
+     */
+    isFullWidth: boolean;
+}
 /**
  * Button size variants
  */
-export declare enum BUTTON_SIZE {
-    XSMALL = "xsmall",
-    SMALL_EXPRESSIVE = "small-expressive",
-    SMALL_PRODUCTIVE = "small-productive",
-    MEDIUM = "medium",
-    LARGE = "large"
-}
+export declare const buttonSizes: Array<ButtonProps['size']>;
 /**
  * Button style variants
  */
-export declare enum BUTTON_TYPE {
-    SUBMIT = "submit",
-    BUTTON = "button",
-    RESET = "reset",
-    MENU = "menu"
-}
+export declare const buttonVariants: Array<ButtonProps['variant']>;
 /**
- * Button style variants
+ * Button type variants
  */
-export declare enum BUTTON_VARIANT {
-    PRIMARY = "primary",
-    SECONDARY = "secondary",
-    OUTLINE = "outline",
-    GHOST = "ghost"
-}
+export declare const buttonTypes: Array<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;;GAEG;AACH,oBAAY,WAAW;IACnB,MAAM,WAAW;IACjB,gBAAgB,qBAAqB;IACrC,gBAAgB,qBAAqB;IACrC,MAAM,WAAW;IACjB,KAAK,UAAU;CAClB;AAED;;GAEG;AACH,oBAAY,WAAW;IACnB,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,IAAI,SAAS;CAChB;AAED;;GAEG;AACH,oBAAY,cAAc;IACtB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,KAAK,UAAU;CAClB"}
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IACxB;;;OAGG;IACH,IAAI,EAAE,QAAQ,GAAG,kBAAkB,GAAG,kBAAkB,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC9E;;;OAGG;IACH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAC7C;;;OAGG;IACH,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;IACvD;;;OAGG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAMlD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,CAKxD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAKlD,CAAC"}

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

@@ -1,11 +1,11 @@
 import { LitElement } from 'lit';
-import { BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT } from './defs';
-export { BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT };
+import { ButtonProps, buttonSizes, buttonTypes, buttonVariants } from './defs';
+export { type ButtonProps, buttonSizes, buttonTypes, buttonVariants, };
 declare const componentSelector = "pie-button";
 export declare class PieButton extends LitElement {
-    size: BUTTON_SIZE;
-    type: BUTTON_TYPE;
-    variant: BUTTON_VARIANT;
+    size: ButtonProps['size'];
+    type: ButtonProps['type'];
+    variant: ButtonProps['variant'];
     disabled: boolean;
     isFullWidth: boolean;
     render(): import("lit-html").TemplateResult<1>;

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,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAGlE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC;AAEpD,QAAA,MAAM,iBAAiB,eAAe,CAAC;AAEvC,qBAAa,SAAU,SAAQ,UAAU;IAGjC,IAAI,EAAG,WAAW,CAAsB;IAIxC,IAAI,EAAG,WAAW,CAAsB;IAIxC,OAAO,EAAG,cAAc,CAA0B;IAGlD,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,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"}

package/package.json

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

package/src/defs.ts

@@ -1,30 +1,58 @@
+export interface ButtonProps {
+    /**
+     * the size of the button.
+     * @default medium
+     */
+    size: 'xsmall' | 'small-expressive' | 'small-productive' | 'medium' | 'large';
+    /**
+     * The html button type to use.
+     * @default submit
+     */
+    type: 'submit' | 'button' | 'reset' | 'menu';
+    /**
+     * the variant of the button.
+     * @default primary
+     */
+    variant: 'primary' | 'secondary' | 'outline' | 'ghost';
+    /**
+     * If `true`, the button will be disabled.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * If `true`, the button will span the full width.
+     * @default false
+     */
+    isFullWidth: boolean;
+}
+
 /**
  * Button size variants
  */
-export enum BUTTON_SIZE {
-    XSMALL = 'xsmall',
-    SMALL_EXPRESSIVE = 'small-expressive',
-    SMALL_PRODUCTIVE = 'small-productive',
-    MEDIUM = 'medium',
-    LARGE = 'large'
-}
+export const buttonSizes: Array<ButtonProps['size']> = [
+    'xsmall',
+    'small-expressive',
+    'small-productive',
+    'medium',
+    'large'
+];
 
 /**
  * Button style variants
  */
-export enum BUTTON_TYPE {
-    SUBMIT = 'submit',
-    BUTTON = 'button',
-    RESET = 'reset',
-    MENU = 'menu'
-}
+export const buttonVariants: Array<ButtonProps['variant']> = [
+    'primary',
+    'secondary',
+    'outline',
+    'ghost',
+];
 
 /**
- * Button style variants
+ * Button type variants
  */
-export enum BUTTON_VARIANT {
-    PRIMARY = 'primary',
-    SECONDARY = 'secondary',
-    OUTLINE = 'outline',
-    GHOST = 'ghost'
-}
+export const buttonTypes: Array<ButtonProps['type']> = [
+    'submit',
+    'button',
+    'reset',
+    'menu',
+];

package/src/index.ts

@@ -1,27 +1,33 @@
 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 { BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT } from './defs';
+import {
+    ButtonProps, buttonSizes, buttonTypes, buttonVariants,
+} from './defs';
 
 // Valid values available to consumers
-export { BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT };
+export {
+    type ButtonProps,
+    buttonSizes,
+    buttonTypes,
+    buttonVariants,
+};
 
 const componentSelector = 'pie-button';
 
 export class PieButton extends LitElement {
     @property()
-    @validPropertyValues(componentSelector, Object.values(BUTTON_SIZE), BUTTON_SIZE.MEDIUM)
-        size : BUTTON_SIZE = BUTTON_SIZE.MEDIUM;
+    @validPropertyValues(componentSelector, buttonSizes, 'medium')
+        size: ButtonProps['size'] = 'medium';
 
     @property()
-    @validPropertyValues(componentSelector, Object.values(BUTTON_TYPE), BUTTON_TYPE.SUBMIT)
-        type : BUTTON_TYPE = BUTTON_TYPE.SUBMIT;
+    @validPropertyValues(componentSelector, buttonTypes, 'submit')
+        type: ButtonProps['type'] = 'submit';
 
     @property()
-    @validPropertyValues(componentSelector, Object.values(BUTTON_VARIANT), BUTTON_VARIANT.PRIMARY)
-        variant : BUTTON_VARIANT = BUTTON_VARIANT.PRIMARY;
+    @validPropertyValues(componentSelector, buttonVariants, 'primary')
+        variant: ButtonProps['variant'] = 'primary';
 
     @property({ type: Boolean })
         disabled = false;

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 { getAllPropCombinations, splitCombinationsByPropertyValue } from '@justeattakeaway/pie-webc-core/src/test-helpers/get-all-prop-combos.ts';
+import { PropObject, WebComponentPropValues } from '@justeattakeaway/pie-webc-core/src/test-helpers/defs.ts';
 import { PieButton } from '@/index';
-import { BUTTON_TYPE, BUTTON_SIZE, BUTTON_VARIANT } from '@/defs';
+import { buttonSizes, buttonVariants } from '@/defs';
 
 const props: PropObject = {
-    variant: Object.values(BUTTON_VARIANT),
-    size: Object.values(BUTTON_SIZE),
-    type: BUTTON_TYPE.BUTTON, // Changing the type does not affect the appearance of the button
+    variant: buttonVariants,
+    size: buttonSizes,
+    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,6 +1,11 @@
 import { test, expect } from '@sand4rt/experimental-ct-web';
 import { PieButton } from '@/index';
-import { BUTTON_SIZE, BUTTON_VARIANT } from '@/defs';
+import { ButtonProps } from '@/index';
+
+const props: ButtonProps = {
+    size: 'large',
+    variant: 'primary',
+}
 
 test('should correctly work with native click events', async ({ mount }) => {
     const messages: string[] = [];
@@ -8,10 +13,7 @@ test('should correctly work with native click events', async ({ mount }) => {
     const component = await mount(
         PieButton,
         {
-            props: {
-                size: BUTTON_SIZE.LARGE,
-                variant: BUTTON_VARIANT.PRIMARY,
-            },
+            props,
             slots: {
                 default: 'Click me!',
             },

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

@@ -1,4 +1,5 @@
 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,
@@ -13,12 +14,12 @@ import {
     WebComponentTestWrapper,
 } from '@justeattakeaway/pie-webc-core/src/test-helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts';
 import { PieButton } from '@/index';
-import { BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT } from '@/defs';
+import { buttonSizes, buttonVariants } from '@/defs';
 
 const props: PropObject = {
-    variant: Object.values(BUTTON_VARIANT),
-    size: Object.values(BUTTON_SIZE),
-    type: BUTTON_TYPE.BUTTON, // Changing the type does not affect the appearance of the button
+    variant: buttonVariants,
+    size: buttonSizes,
+    type: 'button', // Changing the type does not affect the appearance of the button
     isFullWidth: [true, false],
     disabled: [true, false],
 };
@@ -58,5 +59,5 @@ componentVariants.forEach((variant) => test(`Render all prop variations for Vari
         );
     }));
 
-    await percySnapshot(page, `PIE Button - Variant: ${variant}`);
+    await percySnapshot(page, `PIE Button - Variant: ${variant}`, getLitPercyOptions());
 }));

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;