feat(pie-docs): DSW-2475 toast code page (#2068)

* feat(pie-docs): DSW-2475 created overview page for toast in the docs * feat(pie-docs): DSW-2475 added changesets * fix(pie-docs): DSW-2475 update order list styles * feat(pie-docs): DSW-2475 created code page for toast in the docs * feat(pie-docs): DSW-2475 added changeset * fix(pie-docs): DSW-2475 delete files * fix(pie-docs): DSW-2475 delete files * fix(pie-docs): DSW-2475 add formatting * fix(pie-docs): DSW-2475 update routes * fix(pie-toast): DSW-2475 update content * fix(pie-toast): DSW-2475 update content --------- Co-authored-by: Raouf <[email protected]>
justeattakeaway · Nov 18, 2024 · d928451 · d928451
1 parent db8182f
commit d928451
Show file tree

Hide file tree

Showing 7 changed files with 262 additions and 3 deletions.
diff --git a/.changeset/red-onions-dance.md b/.changeset/red-onions-dance.md
@@ -0,0 +1,7 @@
+---
+"pie-docs": patch
+"@justeattakeaway/pie-toast": patch
+"pie-storybook": patch
+---
+
+[Changed] - Complete the toast code page
diff --git a/apps/pie-docs/src/components/toast/code/code.md b/apps/pie-docs/src/components/toast/code/code.md
@@ -0,0 +1,124 @@
+---
+eleventyNavigation:
+    key: Code
+    parent: Toast
+    order: 3
+shouldShowContents: true
+eleventyComputed:
+    props: "{% include './props.json' %}"
+    events: "{% include './events.json' %}"
+---
+
+## Overview
+
+<p>
+  <a href="https://www.npmjs.com/@justeattakeaway/pie-toast" style="text-decoration: none">
+    <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-toast.svg?label=pie-toast">
+  </a>
+
+  <a href="https://www.npmjs.com/package/@justeattakeaway/pie-webc">
+    <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-webc.svg?label=pie-webc">
+  </a>
+</p>
+
+`pie-toast` is a Web Component built using [Lit](https://lit.dev/). It offers a simple and accessible toast component for web applications.
+
+This component can be easily integrated into various frontend frameworks and customised through a set of properties.
+
+{% notification {
+  type: "information",
+  iconName: "engineers",
+  message: "You can try out this component on our [Storybook](https://webc.pie.design/?path=/docs/toast) instance!"
+} %}
+
+## Installation
+
+To install `pie-toast` in your application, run the following on your command line:
+
+```shell
+npm i @justeattakeaway/pie-webc
+```
+
+```shell
+yarn add @justeattakeaway/pie-webc
+```
+
+{% notification {
+  type: "neutral",
+  iconName: "link",
+  message: "For more information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components)."
+} %}
+
+## Props
+
+{% componentDetailsTable {
+  tableData: props
+} %}
+
+## Events
+
+{% componentDetailsTable {
+  tableData: events
+} %}
+
+## Examples
+
+For HTML:
+
+```js
+// import as module into a js file e.g. main.js
+import '@justeattakeaway/pie-webc/components/toast.js'
+```
+
+```html
+<!-- pass js file into <script> tag -->
+<pie-toast message="Message"></pie-toast>
+<script type="module" src="/main.js"></script>
+```
+
+For Native JS Applications, Vue, Angular, Svelte etc.:
+
+```js
+// Vue templates (using Nuxt 3)
+import '@justeattakeaway/pie-webc/components/toast.js';
+
+<pie-toast message="Message"></pie-toast>
+```
+
+By default, the toast will auto-dismiss in five seconds. To disable the auto-dismiss functionality, you must set the duration to `null`.
+
+```js
+// Vue templates (using Nuxt 3)
+import '@justeattakeaway/pie-webc/components/toast.js';
+
+<pie-toast message="Message" duration={null}></pie-toast>
+```
+
+For React Applications:
+
+```jsx
+import { PieToast } from '@justeattakeaway/pie-webc/react/toast.js';
+
+<PieToast message="Message"></PieToast>
+```
+
+```jsx
+// React templates (using Next 13 and SSR)
+import { PieToast } from '@justeattakeaway/pie-toast/dist/react';
+
+<PieToast message="Message"></PieToast>
+```
+
+{% notification {
+  type: "neutral",
+  iconName: "link",
+  message: "For more examples, see [here](https://github.com/justeattakeaway/pie-aperture/tree/main)."
+} %}
+
+## Changelog
+
+{% notification {
+  type: "neutral",
+  iconName: "link",
+  message: "See [here](https://github.com/justeattakeaway/pie/blob/main/packages/components/pie-toast/CHANGELOG.md)."
+} %}
diff --git a/apps/pie-docs/src/components/toast/code/events.json b/apps/pie-docs/src/components/toast/code/events.json
@@ -0,0 +1,24 @@
+{
+  "headings": [
+    "Event",
+    "Type",
+    "Description"
+  ],
+  "rows": [
+    [
+      "`pie-toast-close`",
+      "`CustomEvent`",
+      "Triggered when the user interacts with the close icon or when the toast auto dismiss."
+    ],
+    [
+      "`pie-toast-open`",
+      "`CustomEvent`",
+      "Triggered when the toast is opened."
+    ],
+    [
+      "`pie-toast-leading-action-click`",
+      "`CustomEvent`",
+      "Triggered when the user interacts with the leading action."
+    ]
+  ]
+}
diff --git a/apps/pie-docs/src/components/toast/code/props.json b/apps/pie-docs/src/components/toast/code/props.json
@@ -0,0 +1,103 @@
+{
+    "headings": ["Prop", "Options", "Description", "Default"],
+    "rows": [
+        [
+            "isOpen",
+            {
+                "type": "code",
+                "item": ["true", "false"]
+            },
+            "When true, the toast is set to be open and visible.",
+            {
+                "type": "code",
+                "item": ["false"]
+            }
+        ],
+        [
+            "variant",
+            {
+                "type": "code",
+                "item": ["\"neutral\"", "\"info\"", "\"warning\"", "\"success\"", "\"error\""]
+            },
+            "Sets the variant of the toast.",
+            {
+                "type": "code",
+                "item": ["\"neutral\""]
+            }
+        ],
+        [
+            "isStrong",
+            {
+                "type": "code",
+                "item": ["true", "false"]
+            },
+            "When true, the toast is displayed with a strong visual style.",
+            {
+                "type": "code",
+                "item": ["false"]
+            }
+        ],
+        [
+            "isDismissible",
+            {
+                "type": "code",
+                "item": ["true", "false"]
+            },
+            "When true, allows dismissing the toast by clicking on the close button.",
+            {
+                "type": "code",
+                "item": ["false"]
+            }
+        ],
+        [
+            "message",
+            {
+                "type": "code",
+                "item": ["string"]
+            },
+            "The message content of the toast.",
+            {
+                "type": "code",
+                "item": ["\"\""]
+            }
+        ],
+        [
+            "isMultiline",
+            {
+                "type": "code",
+                "item": ["true", "false"]
+            },
+            "Allows the message content to be displayed as multiline, limited to three rows.",
+            {
+                "type": "code",
+                "item": ["false"]
+            }
+        ],
+        [
+            "leadingAction",
+            {
+                "type": "code",
+                "item": ["{ text: string, ariaLabel?: string }"]
+            },
+            "The leading action for the toast.",
+            {
+                "type": "code",
+                "item": ["undefined"]
+            }
+        ],
+        [
+            "duration",
+            {
+                "type": "code",
+                "item": ["number", "null"]
+            },
+            "Sets the duration of the toast in milliseconds before it auto-dismisses. If the value is `null`, auto-dismiss is disabled. If the value is not provided it auto-dismisses after 5 seconds.",
+            {
+                "type": "code",
+                "item": ["5000"]
+            }
+        ]
+    ]
+}
+
+
diff --git a/apps/pie-docs/test/snapshots/expected-routes.snapshot.json b/apps/pie-docs/test/snapshots/expected-routes.snapshot.json
@@ -80,6 +80,7 @@
     "components/textarea/code",
     "components/thumbnail",
     "components/toast",
+    "components/toast/code",
     "components/toast/motion",
     "components/tooltip",
     "components/uploader",

diff --git a/apps/pie-storybook/stories/pie-toast.stories.ts b/apps/pie-storybook/stories/pie-toast.stories.ts
@@ -57,7 +57,7 @@ const toastStoryMeta: ToastStoryMeta = {
             control: 'text',
         },
         isMultiline: {
-            description: 'It allows the message content being displayed as multiline limited to three rows.',
+            description: 'Allows the message content to be displayed as multiline, limited to three rows.',
             control: 'boolean',
             defaultValue: {
                 summary: defaultProps.isOpen,

diff --git a/packages/components/pie-toast/src/defs.ts b/packages/components/pie-toast/src/defs.ts
@@ -37,7 +37,7 @@ export interface ToastProps {
    */
   message: string;
   /**
-   * It allows the message content being displayed as multiline limited to three rows.
+   * Allows the message content to be displayed as multiline, limited to three rows.
    */
   isMultiline?: boolean;
   /**
@@ -48,7 +48,7 @@ export interface ToastProps {
   /**
    * Sets the duration of the toast in milliseconds before it auto-dismisses.
    * If the value is null auto-dismiss is disabled
-   * If the value is not provided it auto-dismisses after 5 seconds (5000 milliseconds)
+   * If the value is not provided it auto-dismisses after 5 seconds
    */
   duration?: number | null;
 }