@justeattakeaway/pie-assistive-text 0.11.34 → 1.0.0

package/README.md

@@ -34,14 +34,11 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
 | Prop              | Options                           | Description                                                                                                                                                                                                                                   | Default   |
 |-------------------|------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|
 | `variant`         | `"default"`, `"error"`, `"success"` | Sets the type of message displayed to one of three potential options: `error`, `success` or `default`. `error` and `success` include an icon and are used for validation messages. `default` provides users with extra context and guidance. | `default` |
+| `message`         | `string`                           | The assistive message text content.                                                                                                                                                                                                          | `""`      |
 | `isVisuallyHidden`| `true`, `false`                    | If true, hides the component visually but leaves it accessible for screen readers.                                                                                                                                                           | `false`   |
 
-
 ### Slots
-
-| Slot     | Description                                                  |
-|----------|--------------------------------------------------------------|
-| `default`| The default, unnamed slot is used to pass in text to the component. |
+This component does not have any slots. All content is controlled through properties.
 
 ### CSS Variables
 This component does not expose any CSS variables for style overrides.
@@ -60,8 +57,9 @@ import '@justeattakeaway/pie-webc/components/assistive-text.js'
 ```
 
 ```html
-<pie-assistive-text variant="success">
-  Your request has been submitted.
+<pie-assistive-text
+  variant="success"
+  message="Your request has been submitted.">
 </pie-assistive-text>
 
 <script type="module" src="/main.js"></script>
@@ -75,8 +73,9 @@ import '@justeattakeaway/pie-webc/components/assistive-text.js';
 ```
 
 ```html
-<pie-assistive-text variant="success">
-  Your request has been submitted.
+<pie-assistive-text
+  variant="success"
+  message="Your request has been submitted.">
 </pie-assistive-text>
 ```
 
@@ -85,9 +84,10 @@ import '@justeattakeaway/pie-webc/components/assistive-text.js';
 ```jsx
 import { PieAssistiveText } from '@justeattakeaway/pie-webc/react/assistive-text.js';
 
-<PieAssistiveText variant="success">
-  Your request has been submitted.
-</PieAssistiveText>
+<PieAssistiveText
+  variant="success"
+  message="Your request has been submitted."
+/>
 ```
 
 ## Questions and Support

package/custom-elements.json

@@ -26,7 +26,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{ variant: 'default', isVisuallyHidden: false, }"
+          "default": "{ variant: 'default', message: '', isVisuallyHidden: false, }"
         }
       ],
       "exports": [
@@ -56,12 +56,6 @@
           "kind": "class",
           "description": "",
           "name": "PieAssistiveText",
-          "slots": [
-            {
-              "description": "Default slot",
-              "name": ""
-            }
-          ],
           "members": [
             {
               "kind": "field",
@@ -69,6 +63,12 @@
               "privacy": "public",
               "attribute": "variant"
             },
+            {
+              "kind": "field",
+              "name": "message",
+              "privacy": "public",
+              "attribute": "message"
+            },
             {
               "kind": "field",
               "name": "isVisuallyHidden",
@@ -92,6 +92,10 @@
               "name": "variant",
               "fieldName": "variant"
             },
+            {
+              "name": "message",
+              "fieldName": "message"
+            },
             {
               "name": "isVisuallyHidden",
               "fieldName": "isVisuallyHidden"

package/dist/index.d.ts

@@ -8,6 +8,10 @@ export declare interface AssistiveTextProps {
      * What variant the assistive text should be such as default, error or success.
      */
     variant?: typeof variants[number];
+    /**
+     * The assistive message text.
+     */
+    message?: string;
     /**
      * If true, hides the component visually but leaves it accessible for screen readers.
      */
@@ -20,10 +24,10 @@ export declare const defaultProps: DefaultProps;
 
 /**
  * @tagname pie-assistive-text
- * @slot - Default slot
  */
 export declare class PieAssistiveText extends PieElement implements AssistiveTextProps {
     variant: "default" | "error" | "success";
+    message: string;
     isVisuallyHidden: boolean;
     /**
      * Renders the assistive-text icon content.

package/dist/index.js

@@ -1,29 +1,30 @@
-import { LitElement as x, unsafeCSS as h, nothing as f, html as a } from "lit";
-import { property as u } from "lit/decorators.js";
+import { LitElement as h, unsafeCSS as x, nothing as u, html as o } from "lit";
+import { property as f } from "lit/decorators.js";
 import { validPropertyValues as y, safeCustomElement as m } from "@justeattakeaway/pie-webc-core";
 import { classMap as g } from "lit/directives/class-map.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconAlertCircle.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconCheckCircle.js";
-const c = class c extends x {
+const n = class n extends h {
   willUpdate() {
-    this.getAttribute("v") || this.setAttribute("v", c.v);
+    this.getAttribute("v") || this.setAttribute("v", n.v);
   }
 };
-c.v = "0.11.34";
-let d = c;
-const b = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-assistiveText{--assistive-text-color: var(--dt-color-content-subdued-solid);margin:0;padding-block-start:var(--dt-spacing-a);color:var(--assistive-text-color);font-family:var(--dt-font-body-s-family);font-weight:var(--dt-font-body-s-weight);font-size:calc(var(--dt-font-body-s-size) * 1px);line-height:calc(var(--dt-font-body-s-line-height) * 1px);gap:var(--dt-spacing-b);display:flex;align-items:flex-start;overflow-wrap:anywhere}.c-assistiveText .c-assistiveText-icon{display:inline-flex}.c-assistiveText--success{--assistive-text-color: var(--dt-color-content-positive-solid)}.c-assistiveText--error{--assistive-text-color: var(--dt-color-content-error-solid)}.is-visuallyHidden{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}", w = ["default", "error", "success"], v = {
+n.v = "1.0.0";
+let v = n;
+const b = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-assistiveText{--assistive-text-color: var(--dt-color-content-subdued-solid);margin:0;padding-block-start:var(--dt-spacing-a);color:var(--assistive-text-color);font-family:var(--dt-font-body-s-family);font-weight:var(--dt-font-body-s-weight);font-size:calc(var(--dt-font-body-s-size) * 1px);line-height:calc(var(--dt-font-body-s-line-height) * 1px);gap:var(--dt-spacing-b);display:flex;align-items:flex-start;overflow-wrap:anywhere}.c-assistiveText .c-assistiveText-icon{display:inline-flex}.c-assistiveText--success{--assistive-text-color: var(--dt-color-content-positive-solid)}.c-assistiveText--error{--assistive-text-color: var(--dt-color-content-error-solid)}.is-visuallyHidden{position:absolute;display:block;height:1px;width:1px;border:0;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.is-visuallyHidden *{overflow:hidden}", w = ["default", "error", "success"], l = {
   variant: "default",
+  message: "",
   isVisuallyHidden: !1
 };
-var T = Object.defineProperty, H = Object.getOwnPropertyDescriptor, p = (t, e, i, o) => {
-  for (var s = o > 1 ? void 0 : o ? H(e, i) : e, l = t.length - 1, n; l >= 0; l--)
-    (n = t[l]) && (s = (o ? n(e, i, s) : n(s)) || s);
-  return o && s && T(e, i, s), s;
+var T = Object.defineProperty, H = Object.getOwnPropertyDescriptor, c = (t, i, a, e) => {
+  for (var s = e > 1 ? void 0 : e ? H(i, a) : i, d = t.length - 1, p; d >= 0; d--)
+    (p = t[d]) && (s = (e ? p(i, a, s) : p(s)) || s);
+  return e && s && T(i, a, s), s;
 };
-const V = "pie-assistive-text";
-let r = class extends d {
+const $ = "pie-assistive-text";
+let r = class extends v {
   constructor() {
-    super(...arguments), this.variant = v.variant, this.isVisuallyHidden = v.isVisuallyHidden;
+    super(...arguments), this.variant = l.variant, this.message = l.message, this.isVisuallyHidden = l.isVisuallyHidden;
   }
   /**
    * Renders the assistive-text icon content.
@@ -31,41 +32,48 @@ let r = class extends d {
    */
   renderIcon() {
     const { variant: t } = this;
-    return a`
-            ${t === "success" ? a`<icon-check-circle class="c-assistiveText-icon" size="s" ></icon-check-circle>` : f}
-            ${t === "error" ? a`<icon-alert-circle class="c-assistiveText-icon" size="s"></icon-alert-circle>` : f}`;
+    return o`
+            ${t === "success" ? o`<icon-check-circle class="c-assistiveText-icon" size="s" ></icon-check-circle>` : u}
+            ${t === "error" ? o`<icon-alert-circle class="c-assistiveText-icon" size="s"></icon-alert-circle>` : u}`;
   }
   render() {
     const {
       variant: t,
-      isVisuallyHidden: e
-    } = this, i = {
+      message: i,
+      isVisuallyHidden: a
+    } = this, e = t === "error", s = {
       "c-assistiveText": !0,
-      "is-visuallyHidden": e,
+      "is-visuallyHidden": a,
       [`c-assistiveText--${t}`]: !0
     };
-    return a`
+    return o`
         <p
-            class="${g(i)}"
+            class="${g(s)}"
+            role="${e ? "alert" : "status"}"
+            aria-live="${e ? "assertive" : "polite"}"
+            aria-atomic="true"
             data-test-id="pie-assistive-text">
             ${this.renderIcon()}
-            <slot></slot>
+            ${i}
         </p>`;
   }
 };
-r.styles = h(b);
-p([
-  u({ type: String }),
-  y(V, w, v.variant)
+r.styles = x(b);
+c([
+  f({ type: String }),
+  y($, w, l.variant)
 ], r.prototype, "variant", 2);
-p([
-  u({ type: Boolean })
+c([
+  f({ type: String })
+], r.prototype, "message", 2);
+c([
+  f({ type: Boolean })
 ], r.prototype, "isVisuallyHidden", 2);
-r = p([
+r = c([
   m("pie-assistive-text")
 ], r);
 export {
   r as PieAssistiveText,
-  v as defaultProps,
+  l as defaultProps,
   w as variants
 };

package/dist/react.d.ts

@@ -9,6 +9,10 @@ export declare interface AssistiveTextProps {
      * What variant the assistive text should be such as default, error or success.
      */
     variant?: typeof variants[number];
+    /**
+     * The assistive message text.
+     */
+    message?: string;
     /**
      * If true, hides the component visually but leaves it accessible for screen readers.
      */
@@ -23,10 +27,10 @@ export declare const PieAssistiveText: React_2.ForwardRefExoticComponent<React_2
 
 /**
  * @tagname pie-assistive-text
- * @slot - Default slot
  */
 declare class PieAssistiveText_2 extends PieElement implements AssistiveTextProps {
     variant: "default" | "error" | "success";
+    message: string;
     isVisuallyHidden: boolean;
     /**
      * Renders the assistive-text icon content.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-assistive-text",
   "description": "PIE Design System Assistive Text built using Web Components",
-  "version": "0.11.34",
+  "version": "1.0.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -19,7 +19,7 @@
     "**/*.d.ts"
   ],
   "pieMetadata": {
-    "componentStatus": "beta",
+    "componentStatus": "stable",
     "replaces": {
       "snacks": [
         "ErrorMessage"
@@ -44,12 +44,12 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@justeattakeaway/pie-components-config": "0.21.3",
-    "@justeattakeaway/pie-css": "1.1.2",
-    "@justeattakeaway/pie-monorepo-utils": "0.9.3"
+    "@justeattakeaway/pie-css": "1.2.0",
+    "@justeattakeaway/pie-monorepo-utils": "0.9.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icons-webc": "1.24.3",
-    "@justeattakeaway/pie-webc-core": "14.0.2"
+    "@justeattakeaway/pie-icons-webc": "1.25.1",
+    "@justeattakeaway/pie-webc-core": "15.0.0"
   },
   "customElements": "custom-elements.json",
   "sideEffects": [

package/src/defs.ts

@@ -8,6 +8,11 @@ export interface AssistiveTextProps {
      */
     variant?: typeof variants[number];
 
+    /**
+     * The assistive message text.
+     */
+    message?: string;
+
      /**
      * If true, hides the component visually but leaves it accessible for screen readers.
      */
@@ -18,5 +23,6 @@ export type DefaultProps = ComponentDefaultProps<AssistiveTextProps>;
 
 export const defaultProps: DefaultProps = {
     variant: 'default',
+    message: '',
     isVisuallyHidden: false,
 };

package/src/index.ts

@@ -18,7 +18,6 @@ const componentSelector = 'pie-assistive-text';
 
 /**
  * @tagname pie-assistive-text
- * @slot - Default slot
  */
 @safeCustomElement('pie-assistive-text')
 export class PieAssistiveText extends PieElement implements AssistiveTextProps {
@@ -26,6 +25,9 @@ export class PieAssistiveText extends PieElement implements AssistiveTextProps {
     @validPropertyValues(componentSelector, variants, defaultProps.variant)
     public variant = defaultProps.variant;
 
+    @property({ type: String })
+    public message = defaultProps.message;
+
     @property({ type: Boolean })
     public isVisuallyHidden = defaultProps.isVisuallyHidden;
 
@@ -43,8 +45,10 @@ export class PieAssistiveText extends PieElement implements AssistiveTextProps {
     render () {
         const {
             variant,
+            message,
             isVisuallyHidden,
         } = this;
+        const isError = variant === 'error';
 
         const classes = {
             'c-assistiveText': true,
@@ -55,9 +59,12 @@ export class PieAssistiveText extends PieElement implements AssistiveTextProps {
         return html`
         <p
             class="${classMap(classes)}"
+            role="${isError ? 'alert' : 'status'}"
+            aria-live="${isError ? 'assertive' : 'polite'}"
+            aria-atomic="true"
             data-test-id="pie-assistive-text">
             ${this.renderIcon()}
-            <slot></slot>
+            ${message}
         </p>`;
     }