@justeattakeaway/pie-button 1.13.3 → 1.14.0

package/dist/react.d.ts

@@ -8,7 +8,15 @@ import { PropertyValues } from 'lit';
 import * as React_2 from 'react';
 import { TemplateResult } from 'lit';
 
+declare type AriaProps = {
+    label?: string;
+};
+
 export declare interface ButtonProps {
+    /**
+     * The ARIA attributes for the button element.
+     */
+    aria?: AriaProps;
     /**
      * Which HTML element to use when rendering the button.
      */
@@ -134,6 +142,7 @@ declare class PieButton_2 extends PieButton_base implements ButtonProps {
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changedProperties: PropertyValues<this>): void;
+    aria: ButtonProps['aria'];
     tag: "button" | "a";
     size: "xsmall" | "small-productive" | "small-expressive" | "medium" | "large";
     type: "button" | "submit" | "reset";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-button",
-  "version": "1.13.3",
+  "version": "1.14.0",
   "description": "PIE design system button built using web components",
   "repository": {
     "type": "git",
@@ -30,7 +30,7 @@
   "scripts": {
     "build": "run -T vite build",
     "build:react-wrapper": "npx build-react-wrapper",
-    "create:manifest": "yarn cem analyze --litelement",
+    "create:manifest": "run -T cem analyze --litelement",
     "lint:scripts": "run -T eslint .",
     "lint:scripts:fix": "run -T eslint . --fix",
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
@@ -44,12 +44,10 @@
   "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.21.0",
-    "@justeattakeaway/pie-css": "1.1.0",
-    "@justeattakeaway/pie-monorepo-utils": "0.8.0",
-    "@justeattakeaway/pie-wrapper-react": "0.14.4",
-    "cem-plugin-module-file-extensions": "0.0.5"
+    "@justeattakeaway/pie-components-config": "0.21.1",
+    "@justeattakeaway/pie-css": "1.1.1",
+    "@justeattakeaway/pie-monorepo-utils": "0.9.0",
+    "@justeattakeaway/pie-wrapper-react": "0.14.4"
   },
   "volta": {
     "extends": "../../../package.json"
@@ -59,8 +57,8 @@
     "dist/*.js"
   ],
   "dependencies": {
-    "@justeattakeaway/pie-spinner": "1.4.12",
-    "@justeattakeaway/pie-webc-core": "14.0.0",
+    "@justeattakeaway/pie-spinner": "1.4.14",
+    "@justeattakeaway/pie-webc-core": "14.0.1",
     "element-internals-polyfill": "1.3.11"
   }
 }

package/src/defs.ts

@@ -12,11 +12,20 @@ export const iconPlacements = ['leading', 'trailing'] as const;
 
 export type Variant = typeof variants[number];
 
+type AriaProps = {
+    label?: string;
+};
+
 export const formEncodingtypes = ['application/x-www-form-urlencoded', 'multipart/form-data', 'text/plain'] as const;
 export const formMethodTypes = ['post', 'get', 'dialog'] as const;
 export const formTargetTypes = ['_self', '_blank', '_parent', '_top'] as const;
 
 export interface ButtonProps {
+    /**
+     * The ARIA attributes for the button element.
+     */
+    aria?: AriaProps;
+
     /**
      * Which HTML element to use when rendering the button.
      */

package/src/index.ts

@@ -58,6 +58,9 @@ export class PieButton extends DelegatesFocusMixin(FormControlMixin(PieElement))
         }
     }
 
+    @property({ type: Object })
+    public aria: ButtonProps['aria'];
+
     @property({ type: String })
     @validPropertyValues(componentSelector, tags, defaultProps.tag)
     public tag = defaultProps.tag;
@@ -239,7 +242,7 @@ export class PieButton extends DelegatesFocusMixin(FormControlMixin(PieElement))
 
     renderAnchor (classes: ClassInfo) {
         const {
-            href, iconPlacement, rel, target, download,
+            href, iconPlacement, rel, target, download, aria,
         } = this;
 
         return html`
@@ -248,6 +251,7 @@ export class PieButton extends DelegatesFocusMixin(FormControlMixin(PieElement))
                 rel="${ifDefined(rel)}"
                 target="${ifDefined(target)}"
                 download="${ifDefined(download)}"
+                aria-label="${ifDefined(aria?.label)}"
                 class="${classMap(classes)}">
                 ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
                 <slot></slot>
@@ -257,7 +261,7 @@ export class PieButton extends DelegatesFocusMixin(FormControlMixin(PieElement))
 
     renderButton (classes: ClassInfo) {
         const {
-            disabled, iconPlacement, isLoading, type,
+            disabled, iconPlacement, isLoading, type, aria,
         } = this;
 
         const buttonClasses = {
@@ -270,7 +274,8 @@ export class PieButton extends DelegatesFocusMixin(FormControlMixin(PieElement))
                 @click=${this._handleClick}
                 class=${classMap(buttonClasses)}
                 type=${type}
-                ?disabled=${disabled}>
+                ?disabled=${disabled}
+                aria-label="${ifDefined(aria?.label)}">
                     ${isLoading ? this.renderSpinner() : nothing}
                     ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
                     <span class="o-btn-text"><slot></slot></span>