@justeattakeaway/pie-assistive-text 0.5.0 → 0.6.0

package/README.md

@@ -12,11 +12,9 @@
 
 1. [Introduction](#pie-assistive-text)
 2. [Installation](#installation)
-3. [Importing the component](#importing-the-component)
-4. [Peer Dependencies](#peer-dependencies)
-5. [Props](#props)
-6. [Slots](#slots)
-6. [Contributing](#contributing)
+3. [Documentation](#documentation)
+4. [Questions](#questions)
+5. [Contributing](#contributing)
 
 ## pie-assistive-text
 

package/custom-elements.json

@@ -26,7 +26,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    variant: 'default',\n}"
+          "default": "{\n    variant: 'default',\n    isVisuallyHidden: false,\n}"
         }
       ],
       "exports": [
@@ -66,12 +66,15 @@
             {
               "kind": "field",
               "name": "variant",
-              "type": {
-                "text": "AssistiveTextProps['variant'] | undefined"
-              },
               "privacy": "public",
               "attribute": "variant"
             },
+            {
+              "kind": "field",
+              "name": "isVisuallyHidden",
+              "privacy": "public",
+              "attribute": "isVisuallyHidden"
+            },
             {
               "kind": "method",
               "name": "renderIcon",
@@ -87,10 +90,11 @@
           "attributes": [
             {
               "name": "variant",
-              "type": {
-                "text": "AssistiveTextProps['variant'] | undefined"
-              },
               "fieldName": "variant"
+            },
+            {
+              "name": "isVisuallyHidden",
+              "fieldName": "isVisuallyHidden"
             }
           ],
           "superclass": {

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import type { TemplateResult } from 'lit';
@@ -8,9 +8,13 @@ export declare interface AssistiveTextProps {
      * What variant the assistive text should be such as default, error or success.
      */
     variant?: typeof variants[number];
+    /**
+     * If true, hides the component visually but leaves it accessible for a11y technologies.
+     */
+    isVisuallyHidden?: boolean;
 }
 
-export declare type DefaultProps = ComponentDefaultPropsGeneric<AssistiveTextProps, 'variant'>;
+export declare type DefaultProps = ComponentDefaultProps<AssistiveTextProps>;
 
 export declare const defaultProps: DefaultProps;
 
@@ -19,7 +23,8 @@ export declare const defaultProps: DefaultProps;
  * @slot - Default slot
  */
 export declare class PieAssistiveText extends LitElement implements AssistiveTextProps {
-    variant?: AssistiveTextProps['variant'];
+    variant: "default" | "error" | "success";
+    isVisuallyHidden: boolean;
     /**
      * Renders the assistive-text icon content.
      * @private

package/dist/index.js

@@ -1,55 +1,63 @@
-import { unsafeCSS as f, LitElement as d, html as i, nothing as l } from "lit";
-import { property as x } from "lit/decorators.js";
-import { validPropertyValues as m, defineCustomElement as u } from "@justeattakeaway/pie-webc-core";
-import { ifDefined as h } from "lit/directives/if-defined.js";
+import { unsafeCSS as x, LitElement as u, html as r, nothing as d } from "lit";
+import { property as v } from "lit/decorators.js";
+import { validPropertyValues as y, defineCustomElement as h } from "@justeattakeaway/pie-webc-core";
+import { classMap as m } from "lit/directives/class-map.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconAlertCircle.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconCheckCircle.js";
-const y = `*,*:after,*:before{box-sizing:inherit}.c-assistiveText{--assistive-text-color: var(--dt-color-content-subdued);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[variant=success]{--assistive-text-color: var(--dt-color-content-positive)}.c-assistiveText[variant=error]{--assistive-text-color: var(--dt-color-content-error)}.c-assistiveText .c-assistiveText-icon{display:inline-flex}
-`, g = ["default", "error", "success"], v = {
-  variant: "default"
+const g = `*,*:after,*:before{box-sizing:inherit}.c-assistiveText{--assistive-text-color: var(--dt-color-content-subdued);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[variant=success]{--assistive-text-color: var(--dt-color-content-positive)}.c-assistiveText[variant=error]{--assistive-text-color: var(--dt-color-content-error)}.c-assistiveText .c-assistiveText-icon{display:inline-flex}.c-assistiveText--isVisuallyHidden{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}
+`, b = ["default", "error", "success"], l = {
+  variant: "default",
+  isVisuallyHidden: !1
 };
-var b = Object.defineProperty, T = Object.getOwnPropertyDescriptor, w = (r, t, o, s) => {
-  for (var e = s > 1 ? void 0 : s ? T(t, o) : t, a = r.length - 1, n; a >= 0; a--)
-    (n = r[a]) && (e = (s ? n(t, o, e) : n(e)) || e);
-  return s && e && b(t, o, e), e;
+var w = Object.defineProperty, T = Object.getOwnPropertyDescriptor, p = (o, s, e, i) => {
+  for (var t = i > 1 ? void 0 : i ? T(s, e) : s, n = o.length - 1, c; n >= 0; n--)
+    (c = o[n]) && (t = (i ? c(s, e, t) : c(t)) || t);
+  return i && t && w(s, e, t), t;
 };
-const p = "pie-assistive-text";
-class c extends d {
+const f = "pie-assistive-text";
+class a extends u {
   constructor() {
-    super(...arguments), this.variant = v.variant;
+    super(...arguments), this.variant = l.variant, this.isVisuallyHidden = l.isVisuallyHidden;
   }
   /**
-  * Renders the assistive-text icon content.
-  * @private
-  */
+   * Renders the assistive-text icon content.
+   * @private
+   */
   renderIcon() {
-    const { variant: t } = this;
-    return i`
-            ${t === "success" ? i`<icon-check-circle class="c-assistiveText-icon" size="s" ></icon-check-circle>` : l}
-            ${t === "error" ? i`<icon-alert-circle class="c-assistiveText-icon" size="s"></icon-alert-circle>` : l}`;
+    const { variant: s } = this;
+    return r`
+            ${s === "success" ? r`<icon-check-circle class="c-assistiveText-icon" size="s" ></icon-check-circle>` : d}
+            ${s === "error" ? r`<icon-alert-circle class="c-assistiveText-icon" size="s"></icon-alert-circle>` : d}`;
   }
   render() {
     const {
-      variant: t
+      variant: s,
+      isVisuallyHidden: e
     } = this;
-    return i`
+    return r`
         <p
-            class="c-assistiveText"
+            class="${m({
+      "c-assistiveText": !0,
+      "c-assistiveText--isVisuallyHidden": e
+    })}"
             data-test-id="pie-assistive-text"
-            variant=${h(t)}>
+            variant=${s}>
             ${this.renderIcon()}
             <slot></slot>
         </p>`;
   }
 }
-c.styles = f(y);
-w([
-  x({ type: String }),
-  m(p, g, v.variant)
-], c.prototype, "variant", 2);
-u(p, c);
+a.styles = x(g);
+p([
+  v({ type: String }),
+  y(f, b, l.variant)
+], a.prototype, "variant", 2);
+p([
+  v({ type: Boolean })
+], a.prototype, "isVisuallyHidden", 2);
+h(f, a);
 export {
-  c as PieAssistiveText,
-  v as defaultProps,
-  g as variants
+  a as PieAssistiveText,
+  l as defaultProps,
+  b as variants
 };

package/dist/react.d.ts

@@ -1,4 +1,4 @@
-import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import * as React_2 from 'react';
@@ -9,9 +9,13 @@ export declare interface AssistiveTextProps {
      * What variant the assistive text should be such as default, error or success.
      */
     variant?: typeof variants[number];
+    /**
+     * If true, hides the component visually but leaves it accessible for a11y technologies.
+     */
+    isVisuallyHidden?: boolean;
 }
 
-export declare type DefaultProps = ComponentDefaultPropsGeneric<AssistiveTextProps, 'variant'>;
+export declare type DefaultProps = ComponentDefaultProps<AssistiveTextProps>;
 
 export declare const defaultProps: DefaultProps;
 
@@ -22,7 +26,8 @@ export declare const PieAssistiveText: React_2.ForwardRefExoticComponent<Assisti
  * @slot - Default slot
  */
 declare class PieAssistiveText_2 extends LitElement implements AssistiveTextProps {
-    variant?: AssistiveTextProps['variant'];
+    variant: "default" | "error" | "success";
+    isVisuallyHidden: boolean;
     /**
      * Renders the assistive-text icon content.
      * @private

package/dist/react.js

@@ -5,7 +5,7 @@ import { defaultProps as A, variants as T } from "./index.js";
 import "lit";
 import "lit/decorators.js";
 import "@justeattakeaway/pie-webc-core";
-import "lit/directives/if-defined.js";
+import "lit/directives/class-map.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconAlertCircle.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconCheckCircle.js";
 const s = e({

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-assistive-text",
   "description": "PIE Design System Assistive Text built using Web Components",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -40,8 +40,8 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icons-webc": "0.24.1",
-    "@justeattakeaway/pie-webc-core": "0.23.0"
+    "@justeattakeaway/pie-icons-webc": "0.24.2",
+    "@justeattakeaway/pie-webc-core": "0.24.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/assistive-text.scss

@@ -27,3 +27,7 @@
         display: inline-flex;
     }
 }
+
+.c-assistiveText--isVisuallyHidden {
+    @include p.visually-hidden;
+}

package/src/defs.ts

@@ -1,4 +1,4 @@
-import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
 export const variants = ['default', 'error', 'success'] as const;
 
@@ -7,10 +7,16 @@ export interface AssistiveTextProps {
      * What variant the assistive text should be such as default, error or success.
      */
     variant?: typeof variants[number];
+
+     /**
+     * If true, hides the component visually but leaves it accessible for a11y technologies.
+     */
+    isVisuallyHidden?: boolean;
 }
 
-export type DefaultProps = ComponentDefaultPropsGeneric<AssistiveTextProps, 'variant'>;
+export type DefaultProps = ComponentDefaultProps<AssistiveTextProps>;
 
 export const defaultProps: DefaultProps = {
     variant: 'default',
+    isVisuallyHidden: false,
 };

package/src/index.ts

@@ -4,7 +4,7 @@ import {
 
 import { property } from 'lit/decorators.js';
 import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
-import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit/directives/class-map.js';
 import '@justeattakeaway/pie-icons-webc/dist/IconAlertCircle.js';
 import '@justeattakeaway/pie-icons-webc/dist/IconCheckCircle.js';
 
@@ -23,12 +23,15 @@ const componentSelector = 'pie-assistive-text';
 export class PieAssistiveText extends LitElement implements AssistiveTextProps {
     @property({ type: String })
     @validPropertyValues(componentSelector, variants, defaultProps.variant)
-    public variant?: AssistiveTextProps['variant'] = defaultProps.variant;
+    public variant = defaultProps.variant;
+
+    @property({ type: Boolean })
+    public isVisuallyHidden = defaultProps.isVisuallyHidden;
 
     /**
- * Renders the assistive-text icon content.
- * @private
- */
+     * Renders the assistive-text icon content.
+     * @private
+     */
     private renderIcon (): TemplateResult {
         const { variant } = this;
         return html`
@@ -39,13 +42,19 @@ export class PieAssistiveText extends LitElement implements AssistiveTextProps {
     render () {
         const {
             variant,
+            isVisuallyHidden,
         } = this;
 
+        const classes = {
+            'c-assistiveText': true,
+            'c-assistiveText--isVisuallyHidden': isVisuallyHidden,
+        };
+
         return html`
         <p
-            class="c-assistiveText"
+            class="${classMap(classes)}"
             data-test-id="pie-assistive-text"
-            variant=${ifDefined(variant)}>
+            variant=${variant}>
             ${this.renderIcon()}
             <slot></slot>
         </p>`;