feat(pie-docs): DSW-2475 created code page for toast in the docs

apps/pie-docs/component-statuses.json

@@ -0,0 +1,24 @@
+{
+  "pie-assistive-text": "beta",
+  "pie-button": "stable",
+  "pie-card": "beta",
+  "pie-checkbox": "beta",
+  "pie-checkbox-group": "beta",
+  "pie-chip": "beta",
+  "pie-cookie-banner": "stable",
+  "pie-divider": "stable",
+  "pie-form-label": "alpha",
+  "pie-icon-button": "stable",
+  "pie-link": "stable",
+  "pie-lottie-player": "alpha",
+  "pie-modal": "stable",
+  "pie-notification": "beta",
+  "pie-radio": "alpha",
+  "pie-radio-group": "alpha",
+  "pie-spinner": "stable",
+  "pie-switch": "stable",
+  "pie-tag": "beta",
+  "pie-text-input": "beta",
+  "pie-textarea": "alpha",
+  "pie-toast": "alpha"
+}

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)."
+} %}

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."
+    ]
+  ]
+}

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"]
+            },
+            "It allows the message content being 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 (5000 milliseconds).",
+            {
+                "type": "code",
+                "item": ["5000"]
+            }
+        ]
+    ]
+}
+
+

apps/pie-storybook/component-statuses.json

@@ -0,0 +1,24 @@
+{
+  "pie-assistive-text": "beta",
+  "pie-button": "beta",
+  "pie-card": "beta",
+  "pie-checkbox": "beta",
+  "pie-checkbox-group": "beta",
+  "pie-chip": "beta",
+  "pie-cookie-banner": "beta",
+  "pie-divider": "beta",
+  "pie-form-label": "alpha",
+  "pie-icon-button": "beta",
+  "pie-link": "beta",
+  "pie-lottie-player": "alpha",
+  "pie-modal": "beta",
+  "pie-notification": "beta",
+  "pie-radio": "alpha",
+  "pie-radio-group": "alpha",
+  "pie-spinner": "beta",
+  "pie-switch": "alpha",
+  "pie-tag": "beta",
+  "pie-text-input": "beta",
+  "pie-textarea": "alpha",
+  "pie-toast": "alpha"
+}

component-statuses.json

@@ -0,0 +1,24 @@
+{
+  "pie-assistive-text": "beta",
+  "pie-button": "stable",
+  "pie-card": "beta",
+  "pie-checkbox": "beta",
+  "pie-checkbox-group": "beta",
+  "pie-chip": "beta",
+  "pie-cookie-banner": "stable",
+  "pie-divider": "stable",
+  "pie-form-label": "alpha",
+  "pie-icon-button": "stable",
+  "pie-link": "stable",
+  "pie-lottie-player": "alpha",
+  "pie-modal": "stable",
+  "pie-notification": "beta",
+  "pie-radio": "alpha",
+  "pie-radio-group": "alpha",
+  "pie-spinner": "stable",
+  "pie-switch": "stable",
+  "pie-tag": "beta",
+  "pie-text-input": "beta",
+  "pie-textarea": "alpha",
+  "pie-toast": "alpha"
+}