@justeattakeaway/pie-assistive-text - npm Package Compare versions

Comparing version 0.0.0-snapshot-release-20240709100447 to 0.0.0-snapshot-release-20240829091047

custom-elements.json

@@ -29,3 +29,3 @@ {
           },
-          "default": "{\n    variant: 'default',\n}"
+          "default": "{\n    variant: 'default',\n    isVisuallyHidden: false,\n}"
         }
@@ -70,5 +70,2 @@ ],
               "name": "variant",
-              "type": {
-                "text": "AssistiveTextProps['variant'] | undefined"
-              },
               "privacy": "public",
@@ -78,2 +75,8 @@ "attribute": "variant"
             {
+              "kind": "field",
+              "name": "isVisuallyHidden",
+              "privacy": "public",
+              "attribute": "isVisuallyHidden"
+            },
+            {
               "kind": "method",
@@ -93,6 +96,7 @@ "name": "renderIcon",
               "name": "variant",
-              "type": {
-                "text": "AssistiveTextProps['variant'] | undefined"
-              },
               "fieldName": "variant"
+            },
+            {
+              "name": "isVisuallyHidden",
+              "fieldName": "isVisuallyHidden"
             }
@@ -99,0 +103,0 @@ ],

dist/index.d.ts

@@ -11,2 +11,6 @@ import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
     variant?: typeof variants[number];
+    /**
+     * If true, hides the component visually but leaves it accessible for a11y technologies.
+     */
+    isVisuallyHidden?: boolean;
 }
@@ -23,3 +27,4 @@
 export declare class PieAssistiveText extends LitElement implements AssistiveTextProps {
-    variant?: AssistiveTextProps['variant'];
+    variant: "default" | "error" | "success";
+    isVisuallyHidden: boolean;
     /**
@@ -26,0 +31,0 @@ * Renders the assistive-text icon content.

dist/index.js

@@ -1,40 +0,45 @@
-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 p } 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 .c-assistiveText-icon{display:inline-flex}.c-assistiveText--success{--assistive-text-color: var(--dt-color-content-positive)}.c-assistiveText--error{--assistive-text-color: var(--dt-color-content-error)}.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 T = Object.defineProperty, w = Object.getOwnPropertyDescriptor, v = (o, s, i, e) => {
+  for (var t = e > 1 ? void 0 : e ? w(s, i) : s, n = o.length - 1, c; n >= 0; n--)
+    (c = o[n]) && (t = (e ? c(s, i, t) : c(t)) || t);
+  return e && t && T(s, i, 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
-    } = this;
-    return i`
+      variant: s,
+      isVisuallyHidden: i
+    } = this, e = {
+      "c-assistiveText": !0,
+      "c-assistiveText--isVisuallyHidden": i,
+      [`c-assistiveText--${s}`]: !0
+    };
+    return r`
         <p
-            class="c-assistiveText"
-            data-test-id="pie-assistive-text"
-            variant=${h(t)}>
+            class="${m(e)}"
+            data-test-id="pie-assistive-text">
             ${this.renderIcon()}
@@ -45,12 +50,15 @@ <slot></slot>
 }
-c.styles = f(y);
-w([
-  x({ type: String }),
-  m(p, g, v.variant)
-], c.prototype, "variant", 2);
-u(p, c);
+a.styles = x(g);
+v([
+  p({ type: String }),
+  y(f, b, l.variant)
+], a.prototype, "variant", 2);
+v([
+  p({ 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
 };

dist/react.d.ts

@@ -12,2 +12,6 @@ import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
     variant?: typeof variants[number];
+    /**
+     * If true, hides the component visually but leaves it accessible for a11y technologies.
+     */
+    isVisuallyHidden?: boolean;
 }
@@ -26,3 +30,4 @@
 declare class PieAssistiveText_2 extends LitElement implements AssistiveTextProps {
-    variant?: AssistiveTextProps['variant'];
+    variant: "default" | "error" | "success";
+    isVisuallyHidden: boolean;
     /**
@@ -29,0 +34,0 @@ * Renders the assistive-text icon content.

dist/react.js

@@ -8,3 +8,3 @@ import * as t from "react";
 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";
@@ -11,0 +11,0 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheckCircle.js";

package.json

 {
   "name": "@justeattakeaway/pie-assistive-text",
   "description": "PIE Design System Assistive Text built using Web Components",
-  "version": "0.0.0-snapshot-release-20240709100447",
+  "version": "0.0.0-snapshot-release-20240829091047",
   "type": "module",
@@ -39,8 +39,9 @@ "main": "dist/index.js",
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.16.0",
+    "@justeattakeaway/pie-components-config": "0.18.0",
+    "@justeattakeaway/pie-css": "0.12.1",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icons-webc": "0.0.0-snapshot-release-20240709100447",
-    "@justeattakeaway/pie-webc-core": "0.0.0-snapshot-release-20240709100447"
+    "@justeattakeaway/pie-icons-webc": "0.0.0-snapshot-release-20240829091047",
+    "@justeattakeaway/pie-webc-core": "0.24.0"
   },
@@ -47,0 +48,0 @@ "volta": {

README.md

@@ -15,7 +15,5 @@ <p align="center">
 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)
 
@@ -22,0 +20,0 @@ ## pie-assistive-text

src/defs.ts

@@ -10,2 +10,7 @@ import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
     variant?: typeof variants[number];
+
+     /**
+     * If true, hides the component visually but leaves it accessible for a11y technologies.
+     */
+    isVisuallyHidden?: boolean;
 }
@@ -17,2 +22,3 @@
     variant: 'default',
+    isVisuallyHidden: false,
 };

src/index.ts

@@ -7,3 +7,3 @@ import {
 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';
@@ -27,8 +27,11 @@ import '@justeattakeaway/pie-icons-webc/dist/IconCheckCircle.js';
     @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 {
@@ -44,9 +47,15 @@ const { variant } = this;
             variant,
+            isVisuallyHidden,
         } = this;
 
+        const classes = {
+            'c-assistiveText': true,
+            'c-assistiveText--isVisuallyHidden': isVisuallyHidden,
+            [`c-assistiveText--${variant}`]: true,
+        };
+
         return html`
         <p
-            class="c-assistiveText"
-            data-test-id="pie-assistive-text"
-            variant=${ifDefined(variant)}>
+            class="${classMap(classes)}"
+            data-test-id="pie-assistive-text">
             ${this.renderIcon()}
@@ -53,0 +62,0 @@ <slot></slot>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18018

increased by7.54%

Lines of code

393

increased by9.78%

Worsened metrics

Dev dependency count

4

increased by33.33%

Number of lines in readme file

49

decreased by-3.92%

Dependency changes

• + Added@justeattakeaway/pie-icons-webc@0.0.0-snapshot-release-20240829091047(transitive)

• + Added@justeattakeaway/pie-webc-core@0.24.0(transitive)

• - Removed@justeattakeaway/pie-icons-webc@0.0.0-snapshot-release-20240709100447(transitive)

• - Removed@justeattakeaway/pie-webc-core@0.0.0-snapshot-release-20240709100447(transitive)

• Updated@justeattakeaway/pie-icons-webc@0.0.0-snapshot-release-20240829091047

• Updated@justeattakeaway/pie-webc-core@0.24.0