@justeattakeaway/pie-assistive-text 0.2.1 → 0.2.3

package/dist/index.js

@@ -6,13 +6,13 @@ import "@justeattakeaway/pie-icons-webc/IconAlertCircle";
 import "@justeattakeaway/pie-icons-webc/IconCheckCircle";
 const h = `.c-assistiveText{--assistive-text-color: var(--dt-color-content-default);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}.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}
 `, y = ["default", "error", "success"];
-var g = Object.defineProperty, T = Object.getOwnPropertyDescriptor, b = (r, t, o, e) => {
-  for (var s = e > 1 ? void 0 : e ? T(t, o) : t, a = r.length - 1, n; a >= 0; a--)
-    (n = r[a]) && (s = (e ? n(t, o, s) : n(s)) || s);
-  return e && s && g(t, o, s), s;
+var g = Object.defineProperty, T = Object.getOwnPropertyDescriptor, b = (r, t, o, s) => {
+  for (var e = s > 1 ? void 0 : s ? T(t, o) : t, a = r.length - 1, c; a >= 0; a--)
+    (c = r[a]) && (e = (s ? c(t, o, e) : c(e)) || e);
+  return s && e && g(t, o, e), e;
 };
 const v = "pie-assistive-text";
-class c extends f {
+class n extends f {
   constructor() {
     super(...arguments), this.variant = "default";
   }
@@ -23,8 +23,8 @@ class c extends f {
   renderIcon() {
     const { variant: t } = this;
     return i`
-            ${t === "success" ? i`<icon-check-circle class="c-assistiveText-icon" size="s" />` : l}
-            ${t === "error" ? i`<icon-alert-circle class="c-assistiveText-icon" size="s" />` : l}`;
+            ${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}`;
   }
   render() {
     const {
@@ -40,13 +40,13 @@ class c extends f {
         </p>`;
   }
 }
-c.styles = p(h);
+n.styles = p(h);
 b([
-  d(),
+  d({ type: String }),
   x(v, y, "default")
-], c.prototype, "variant", 2);
-m(v, c);
+], n.prototype, "variant", 2);
+m(v, n);
 export {
-  c as PieAssistiveText,
+  n as PieAssistiveText,
   y as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-assistive-text",
   "description": "PIE Design System Assistive Text built using Web Components",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -35,8 +35,8 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icons-webc": "0.17.3",
-    "@justeattakeaway/pie-webc-core": "0.18.0"
+    "@justeattakeaway/pie-icons-webc": "0.19.0",
+    "@justeattakeaway/pie-webc-core": "0.19.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/index.ts

@@ -21,7 +21,7 @@ const componentSelector = 'pie-assistive-text';
  * @slot - Default slot
  */
 export class PieAssistiveText extends LitElement implements AssistiveTextProps {
-    @property()
+    @property({ type: String })
     @validPropertyValues(componentSelector, variants, 'default')
     public variant?: AssistiveTextProps['variant'] = 'default';
 
@@ -32,8 +32,8 @@ export class PieAssistiveText extends LitElement implements AssistiveTextProps {
     private renderIcon (): TemplateResult {
         const { variant } = this;
         return html`
-            ${variant === 'success' ? html`<icon-check-circle class="c-assistiveText-icon" size="s" />` : nothing}
-            ${variant === 'error' ? html`<icon-alert-circle class="c-assistiveText-icon" size="s" />` : nothing}`;
+            ${variant === 'success' ? html`<icon-check-circle class="c-assistiveText-icon" size="s" ></icon-check-circle>` : nothing}
+            ${variant === 'error' ? html`<icon-alert-circle class="c-assistiveText-icon" size="s"></icon-alert-circle>` : nothing}`;
     }
 
     render () {