@justeattakeaway/pie-button 0.16.0 → 0.16.1

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

@@ -1,18 +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 const buttonSizes: ButtonProps['size'][];
+export declare const buttonSizes: Array<ButtonProps['size']>;
 /**
  * Button style variants
  */
-export declare const buttonVariants: ButtonProps['variant'][];
+export declare const buttonVariants: Array<ButtonProps['variant']>;
 /**
  * Button type variants
  */
-export declare const buttonTypes: ButtonProps['type'][];
+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,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,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.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,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.16.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,13 +1,35 @@
 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 const buttonSizes: ButtonProps['size'][] = [
+export const buttonSizes: Array<ButtonProps['size']> = [
     'xsmall',
     'small-expressive',
     'small-productive',
@@ -18,7 +40,7 @@ export const buttonSizes: ButtonProps['size'][] = [
 /**
  * Button style variants
  */
-export const buttonVariants: ButtonProps['variant'][] = [
+export const buttonVariants: Array<ButtonProps['variant']> = [
     'primary',
     'secondary',
     'outline',
@@ -28,7 +50,7 @@ export const buttonVariants: ButtonProps['variant'][] = [
 /**
  * Button type variants
  */
-export const buttonTypes: ButtonProps['type'][] = [
+export const buttonTypes: Array<ButtonProps['type']> = [
     'submit',
     'button',
     'reset',

package/src/index.ts

@@ -1,7 +1,6 @@
 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,

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

@@ -1,9 +1,8 @@
 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 { 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 { buttonSizes, buttonVariants } from '@/defs';
 
 const props: PropObject = {
@@ -14,12 +13,12 @@ const props: PropObject = {
     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/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;