@justeattakeaway/pie-icon-button 0.5.0 → 0.6.1

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

@@ -1,8 +1,26 @@
 export interface IconButtonProps {
+    /**
+     * the size of the icon button.
+     * @default medium
+     */
+    size: 'xsmall' | 'small' | 'medium' | 'large';
+    /**
+     * the variant of the icon button.
+     * @default primary
+     */
     variant: 'primary' | 'secondary' | 'outline' | 'ghost' | 'ghost-tertiary';
+    /**
+     * If `true`, the icon button will be disabled.
+     * @default false
+     */
+    disabled?: boolean;
 }
+/**
+ * Icon Button size variants
+ */
+export declare const iconButtonSizes: Array<IconButtonProps['size']>;
 /**
  * Icon Button style variants
  */
-export declare const iconButtonVariants: IconButtonProps['variant'][];
+export declare const iconButtonVariants: Array<IconButtonProps['variant']>;
 //# sourceMappingURL=defs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC5B,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,gBAAgB,CAAC;CAC7E;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,eAAe,CAAC,SAAS,CAAC,EAM1D,CAAC"}
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC5B;;;OAGG;IACH,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC9C;;;OAGG;IACH,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,gBAAgB,CAAC;IAC1E;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC,CAK1D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,eAAe,CAAC,SAAS,CAAC,CAMhE,CAAC"}

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

@@ -1,8 +1,9 @@
 import { LitElement } from 'lit';
-import { IconButtonProps, iconButtonVariants } from './defs';
-export { type IconButtonProps, iconButtonVariants };
+import { IconButtonProps, iconButtonSizes, iconButtonVariants } from './defs';
+export { type IconButtonProps, iconButtonSizes, iconButtonVariants };
 declare const componentSelector = "pie-icon-button";
 export declare class PieIconButton extends LitElement {
+    size: IconButtonProps['size'];
     variant: IconButtonProps['variant'];
     disabled: boolean;
     render(): import("lit-html").TemplateResult<1>;

package/dist/types/packages/components/pie-icon-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;AAIlD,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAG7D,OAAO,EAAE,KAAK,eAAe,EAAE,kBAAkB,EAAE,CAAC;AAEpD,QAAA,MAAM,iBAAiB,oBAAoB,CAAC;AAE5C,qBAAa,aAAc,SAAQ,UAAU;IAGrC,OAAO,EAAE,eAAe,CAAC,SAAS,CAAC,CAAa;IAGhD,QAAQ,UAAS;IAErB,MAAM;IAkBN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,aAAa,CAAC;KACtC;CACJ"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAKlD,OAAO,EACH,eAAe,EAAE,eAAe,EAAE,kBAAkB,EACvD,MAAM,QAAQ,CAAC;AAGhB,OAAO,EAAE,KAAK,eAAe,EAAE,eAAe,EAAE,kBAAkB,EAAE,CAAC;AAErE,QAAA,MAAM,iBAAiB,oBAAoB,CAAC;AAE5C,qBAAa,aAAc,SAAQ,UAAU;IAGrC,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAY;IAIzC,OAAO,EAAE,eAAe,CAAC,SAAS,CAAC,CAAa;IAGhD,QAAQ,UAAS;IAErB,MAAM;IAmBN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,aAAa,CAAC;KACtC;CACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-icon-button",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "PIE Design System Icon Button built using Web Components",
   "type": "module",
   "main": "dist/index.js",

package/src/defs.ts

@@ -1,11 +1,35 @@
 export interface IconButtonProps {
+    /**
+     * the size of the icon button.
+     * @default medium
+     */
+    size: 'xsmall' | 'small' | 'medium' | 'large';
+    /**
+     * the variant of the icon button.
+     * @default primary
+     */
     variant: 'primary' | 'secondary' | 'outline' | 'ghost' | 'ghost-tertiary';
+    /**
+     * If `true`, the icon button will be disabled.
+     * @default false
+     */
+    disabled?: boolean;
 }
 
+/**
+ * Icon Button size variants
+ */
+export const iconButtonSizes: Array<IconButtonProps['size']> = [
+    'xsmall',
+    'small',
+    'medium',
+    'large'
+];
+
 /**
  * Icon Button style variants
  */
-export const iconButtonVariants: IconButtonProps['variant'][] = [
+export const iconButtonVariants: Array<IconButtonProps['variant']> = [
     'primary',
     'secondary',
     'outline',

package/src/iconButton.scss

@@ -13,8 +13,7 @@
     --btn-border-radius: var(--dt-radius-rounded-e);
 
     // The base values are set to the size default, which is for the medium button size
-    --btn-height: 48px;
-    --btn-width: var(--btn-height);
+    --btn-dimension: 48px;
 
     // The following values set to default background and color
     // currently this sets the primary button styles
@@ -22,11 +21,14 @@
     --btn-icon-fill: var(--dt-color-content-interactive-primary);
     --btn-focus: var(--dt-color-focus-outer);
 
-    min-block-size: var(--btn-height);
+    // Sizing is set to Medium button icon size, as that is the default
+    --btn-icon-size: 24px;
+
+    min-block-size: var(--btn-dimension);
     aspect-ratio: 1 / 1;
 
     @supports not (aspect-ratio: 1 / 1) {
-        min-inline-size: var(--btn-width);
+        min-inline-size: var(--btn-dimension);
     }
 
     border: none;
@@ -46,11 +48,12 @@
     }
 
     svg {
-        height: 24.5px;
-        width: 24.5px;
+        height: var(--btn-icon-size);
+        width: var(--btn-icon-size);
     }
 
-    svg, path {
+    svg,
+    path {
         fill: var(--btn-icon-fill);
     }
 
@@ -116,5 +119,22 @@
             border: none;
         }
     }
+
+    &[size='xsmall'] {
+        --btn-dimension: 32px;
+    }
+
+    &[size='small'] {
+        --btn-dimension: 40px;
+    }
+
+    &[size='medium'] {
+        /* Same as default styles */
+    }
+
+    &[size='large'] {
+        --btn-dimension: 56px;
+        --btn-icon-size: 28px;
+    }
 }
 

package/src/index.ts

@@ -1,15 +1,22 @@
-import { LitElement, html, unsafeCSS } from 'lit'; // eslint-disable-line import/no-extraneous-dependencies
-import { property } from 'lit/decorators.js'; // eslint-disable-line import/no-extraneous-dependencies
+import { LitElement, html, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
 import { validPropertyValues } from '@justeattakeaway/pie-webc-core';
+
 import styles from './iconButton.scss?inline';
-import { IconButtonProps, iconButtonVariants } from './defs';
+import {
+    IconButtonProps, iconButtonSizes, iconButtonVariants,
+} from './defs';
 
 // Valid values available to consumers
-export { type IconButtonProps, iconButtonVariants };
+export { type IconButtonProps, iconButtonSizes, iconButtonVariants };
 
 const componentSelector = 'pie-icon-button';
 
 export class PieIconButton extends LitElement {
+    @property()
+    @validPropertyValues(componentSelector, iconButtonSizes, 'medium')
+        size: IconButtonProps['size'] = 'medium';
+
     @property()
     @validPropertyValues(componentSelector, iconButtonVariants, 'primary')
         variant: IconButtonProps['variant'] = 'primary';
@@ -19,13 +26,14 @@ export class PieIconButton extends LitElement {
 
     render () {
         const {
-            disabled, variant,
+            disabled, size, variant,
         } = this;
 
         // The inline SVG is temporary until we have a proper icon integration
         return html`
             <button
                 class="o-iconBtn"
+                size=${size}
                 variant=${variant}
                 ?disabled=${disabled}>
                 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">

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

@@ -1,7 +1,10 @@
 import { test, expect } from '@sand4rt/experimental-ct-web';
 import AxeBuilder from '@axe-core/playwright';
+import type {
+    PropObject, WebComponentPropValues,
+} from '@justeattakeaway/pie-webc-core/src/test-helpers/defs.ts';
 import {
-    PropObject, Combination, getAllPropCombinations, splitCombinationsByPropertyValue,
+    getAllPropCombinations, splitCombinationsByPropertyValue,
 } from '@justeattakeaway/pie-webc-core/src/test-helpers/get-all-prop-combos.ts';
 import { PieIconButton } from '@/index';
 import { iconButtonVariants } from '@/defs';
@@ -11,12 +14,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(
             PieIconButton,
             {
@@ -28,7 +31,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/visual/pie-icon-button.spec.ts

@@ -14,15 +14,16 @@ import {
     WebComponentTestWrapper,
 } from '@justeattakeaway/pie-webc-core/src/test-helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts';
 import { PieIconButton } from '@/index';
-import { iconButtonVariants } from '@/defs';
+import { iconButtonSizes, iconButtonVariants } from '@/defs';
 
 const props: PropObject = {
+    size: iconButtonSizes,
     variant: iconButtonVariants,
     disabled: [true, false],
 };
 
 // Renders a <pie-icon-button> HTML string with the given prop values
-const renderTestPieIconButton = (propVals: WebComponentPropValues) => `<pie-icon-button variant="${propVals.variant}" ${propVals.disabled ? 'disabled' : ''}></pie-icon-button>`;
+const renderTestPieIconButton = (propVals: WebComponentPropValues) => `<pie-icon-button size="${propVals.size}" variant="${propVals.variant}" ${propVals.disabled ? 'disabled' : ''}></pie-icon-button>`;
 
 const componentPropsMatrix : WebComponentPropValues[] = getAllPropCombinations(props);
 const componentPropsMatrixByVariant: Record<string, WebComponentPropValues[]> = splitCombinationsByPropertyValue(componentPropsMatrix, 'variant');
@@ -42,7 +43,7 @@ test('Component registered in the DOM', async ({ mount }) => {
 componentVariants.forEach((variant) => test(`Render all prop variations for Variant: ${variant}`, async ({ page, mount }) => {
     await Promise.all(componentPropsMatrixByVariant[variant].map(async (combo: WebComponentPropValues) => {
         const testComponent: WebComponentTestInput = createTestWebComponent(combo, renderTestPieIconButton);
-        const propKeyValues = `disabled: ${testComponent.propValues.disabled}`;
+        const propKeyValues = `size: ${testComponent.propValues.size}, disabled: ${testComponent.propValues.disabled}`;
 
         await mount(
             WebComponentTestWrapper,

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;