@justeattakeaway/pie-assistive-text 0.1.0 → 0.2.0

package/README.md

@@ -15,6 +15,7 @@
 3. [Importing the component](#importing-the-component)
 4. [Peer Dependencies](#peer-dependencies)
 5. [Props](#props)
+6. [Slots](#slots)
 6. [Contributing](#contributing)
 
 ## pie-assistive-text
@@ -63,29 +64,38 @@ import { PieAssistiveText } from '@justeattakeaway/pie-assistive-text/dist/react
 > When using the React version of the component, please make sure to also
 > include React as a [peer dependency](#peer-dependencies) in your project.
 
-
 ## Peer Dependencies
 
 > [!IMPORTANT]
 > When using `pie-assistive-text`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
-
-
 ## Props
 
 | Property | Type | Default | Description |
 |---|---|---|---|
-| - | - | - | - |
+| `variant` | `string` | `default` | 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. |
+
+## Slots
+
+| Property | Description |
+|---|---|
+| `default` | The default, unnamed slot is used to pass in text to the component. |
 
 In your markup or JSX, you can then use these to set the properties for the `pie-assistive-text` component:
 
 ```html
 <!-- Native HTML -->
-<pie-assistive-text></pie-assistive-text>
+<pie-assistive-text
+  variant="success">
+  Your request has been submitted.
+</pie-assistive-text>
 
 <!-- JSX -->
-<PieAssistiveText></PieAssistiveText>
+<PieAssistiveText
+  variant="error">
+  Password contains too few characters.
+</PieAssistiveText>
 ```
 
 ## Contributing
 
-Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
+Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).

package/custom-elements.json

@@ -11,8 +11,26 @@
     {
       "kind": "javascript-module",
       "path": "src/defs.js",
-      "declarations": [],
-      "exports": []
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "variants",
+          "type": {
+            "text": "['default', 'error', 'success']"
+          },
+          "default": "['default', 'error', 'success']"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "variants",
+          "declaration": {
+            "name": "variants",
+            "module": "src/defs.js"
+          }
+        }
+      ]
     },
     {
       "kind": "javascript-module",
@@ -22,7 +40,45 @@
           "kind": "class",
           "description": "",
           "name": "PieAssistiveText",
-          "members": [],
+          "slots": [
+            {
+              "description": "Default slot",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "AssistiveTextProps['variant'] | undefined"
+              },
+              "privacy": "public",
+              "default": "'default'",
+              "attribute": "variant"
+            },
+            {
+              "kind": "method",
+              "name": "renderIcon",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
+              "description": "Renders the assistive-text icon content."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "AssistiveTextProps['variant'] | undefined"
+              },
+              "default": "'default'",
+              "fieldName": "variant"
+            }
+          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"

package/dist/index.d.ts

@@ -1,16 +1,29 @@
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
-import type { TemplateResult } from 'lit-html';
+import type { TemplateResult } from 'lit';
 
 export declare interface AssistiveTextProps {
+    /**
+     * What variant the assistive text should be such as default, error or success.
+     */
+    variant?: typeof variants[number];
 }
 
 /**
  * @tagname pie-assistive-text
+ * @slot - Default slot
  */
 export declare class PieAssistiveText extends LitElement implements AssistiveTextProps {
+    variant?: AssistiveTextProps['variant'];
+    /**
+     * Renders the assistive-text icon content.
+     * @private
+     */
+    private renderIcon;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
 
+export declare const variants: readonly ["default", "error", "success"];
+
 export { }

package/dist/index.js

@@ -1,13 +1,52 @@
-import { unsafeCSS as t, LitElement as s, html as i } from "lit";
-import { defineCustomElement as o } from "@justeattakeaway/pie-webc-core";
-const n = "", r = "pie-assistive-text";
-class e extends s {
+import { unsafeCSS as p, LitElement as f, html as i, nothing as l } from "lit";
+import { property as d } from "lit/decorators.js";
+import { validPropertyValues as x, defineCustomElement as m } from "@justeattakeaway/pie-webc-core";
+import { ifDefined as u } from "lit/directives/if-defined.js";
+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;
+};
+const v = "pie-assistive-text";
+class c extends f {
+  constructor() {
+    super(...arguments), this.variant = "default";
+  }
+  /**
+  * 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" />` : l}
+            ${t === "error" ? i`<icon-alert-circle class="c-assistiveText-icon" size="s" />` : l}`;
+  }
   render() {
-    return i`<h1 data-test-id="pie-assistive-text">Hello world!</h1>`;
+    const {
+      variant: t
+    } = this;
+    return i`
+        <p 
+            class="c-assistiveText"
+            data-test-id="pie-assistive-text"
+            variant=${u(t)}>
+            ${this.renderIcon()}
+            <slot></slot>
+        </p>`;
   }
 }
-e.styles = t(n);
-o(r, e);
+c.styles = p(h);
+b([
+  d(),
+  x(v, y, "default")
+], c.prototype, "variant", 2);
+m(v, c);
 export {
-  e as PieAssistiveText
+  c as PieAssistiveText,
+  y as variants
 };

package/dist/react.d.ts

@@ -1,21 +1,34 @@
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import * as React_2 from 'react';
-import type { TemplateResult } from 'lit-html';
+import type { TemplateResult } from 'lit';
 
 export declare interface AssistiveTextProps {
+    /**
+     * What variant the assistive text should be such as default, error or success.
+     */
+    variant?: typeof variants[number];
 }
 
 export declare const PieAssistiveText: React_2.ForwardRefExoticComponent<AssistiveTextProps & React_2.RefAttributes<PieAssistiveText_2> & ReactBaseType>;
 
 /**
  * @tagname pie-assistive-text
+ * @slot - Default slot
  */
 declare class PieAssistiveText_2 extends LitElement implements AssistiveTextProps {
+    variant?: AssistiveTextProps['variant'];
+    /**
+     * Renders the assistive-text icon content.
+     * @private
+     */
+    private renderIcon;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
 
 declare type ReactBaseType = React_2.HTMLAttributes<HTMLElement>;
 
+export declare const variants: readonly ["default", "error", "success"];
+
 export { }

package/dist/react.js

@@ -1,15 +1,21 @@
-import * as e from "react";
-import { createComponent as t } from "@lit/react";
-import { PieAssistiveText as s } from "./index.js";
+import * as t from "react";
+import { createComponent as e } from "@lit/react";
+import { PieAssistiveText as i } from "./index.js";
+import { variants as T } from "./index.js";
 import "lit";
+import "lit/decorators.js";
 import "@justeattakeaway/pie-webc-core";
-const i = t({
+import "lit/directives/if-defined.js";
+import "@justeattakeaway/pie-icons-webc/IconAlertCircle";
+import "@justeattakeaway/pie-icons-webc/IconCheckCircle";
+const s = e({
   displayName: "PieAssistiveText",
-  elementClass: s,
-  react: e,
+  elementClass: i,
+  react: t,
   tagName: "pie-assistive-text",
   events: {}
-}), p = i;
+}), c = s;
 export {
-  p as PieAssistiveText
+  c as PieAssistiveText,
+  T 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.1.0",
+  "version": "0.2.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -31,11 +31,12 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "workspace:*",
+    "@justeattakeaway/pie-components-config": "0.11.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "workspace:*"
+    "@justeattakeaway/pie-icons-webc": "0.17.2",
+    "@justeattakeaway/pie-webc-core": "0.17.1"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/assistive-text.scss

@@ -1 +1,28 @@
 @use '@justeattakeaway/pie-css/scss' as p;
+
+.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: #{p.font-size(--dt-font-body-s-size)};
+    line-height: #{p.line-height(--dt-font-body-s-line-height)};
+    gap: var(--dt-spacing-b);
+    display: flex;
+    align-items: flex-start;
+
+    &[variant='success'] {
+        --assistive-text-color: var(--dt-color-content-positive);
+    }
+
+    &[variant='error'] {
+        --assistive-text-color: var(--dt-color-content-error);
+    }
+
+    .c-assistiveText-icon {
+        display: inline-flex;
+    }
+}

package/src/defs.ts

@@ -1,3 +1,8 @@
-// TODO - please remove the eslint disable comment below when you add props to this interface
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface AssistiveTextProps {}
+export const variants = ['default', 'error', 'success'] as const;
+
+export interface AssistiveTextProps {
+     /**
+     * What variant the assistive text should be such as default, error or success.
+     */
+    variant?: typeof variants[number];
+}

package/src/index.ts

@@ -1,8 +1,15 @@
-import { LitElement, html, unsafeCSS } from 'lit';
+import {
+    LitElement, html, unsafeCSS, nothing, TemplateResult,
+} from 'lit';
+
+import { property } from 'lit/decorators.js';
+import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import '@justeattakeaway/pie-icons-webc/IconAlertCircle';
+import '@justeattakeaway/pie-icons-webc/IconCheckCircle';
 
-import { defineCustomElement } from '@justeattakeaway/pie-webc-core';
 import styles from './assistive-text.scss?inline';
-import { AssistiveTextProps } from './defs';
+import { AssistiveTextProps, variants } from './defs';
 
 // Valid values available to consumers
 export * from './defs';
@@ -11,10 +18,37 @@ const componentSelector = 'pie-assistive-text';
 
 /**
  * @tagname pie-assistive-text
+ * @slot - Default slot
  */
 export class PieAssistiveText extends LitElement implements AssistiveTextProps {
+    @property()
+    @validPropertyValues(componentSelector, variants, 'default')
+    public variant?: AssistiveTextProps['variant'] = 'default';
+
+    /**
+ * Renders the assistive-text icon content.
+ * @private
+ */
+    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}`;
+    }
+
     render () {
-        return html`<h1 data-test-id="pie-assistive-text">Hello world!</h1>`;
+        const {
+            variant,
+        } = this;
+
+        return html`
+        <p 
+            class="c-assistiveText"
+            data-test-id="pie-assistive-text"
+            variant=${ifDefined(variant)}>
+            ${this.renderIcon()}
+            <slot></slot>
+        </p>`;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite