feat: html toast component (#335)

Co-authored-by: “BogdanDanilescu” <bogdan.danilescu@nearform.com>

apps/docs/content/3-components/2-library/2-alert.mdx

@@ -5,7 +5,7 @@ draft: false
 status: stable
 ---
 
-# Actions
+# Alert
 
 <ComponentStatusBlock componentId="alert" />
 

apps/docs/content/3-components/2-library/45-toast.mdx

@@ -0,0 +1,172 @@
+---
+title: Toast
+description: Toast HTML Component
+draft: false
+status: stable
+---
+
+# Toast
+
+<ComponentStatusBlock componentId="toast" />
+
+## Toast without trigger
+
+This toast will automatically appear when the page loads. \
+*Refresh the current to see the toast being rendered*
+
+<Toast title="Toast" description="This toast has rendered on page load" />
+
+<Tabs id="tab1">
+  <TabList>
+    <TabItem value="tab11" checked>Macro</TabItem>
+    <TabItem value="tab12">React</TabItem>
+  </TabList>
+  <TabPanel value="tab11">
+  ```html
+  {{ govieToast({
+    "title": "Toast",
+    "description": "This toast has rendered on page load",
+  }) }}
+  ```
+  </TabPanel>
+  <TabPanel value="tab12">
+  ```react
+  import { Toast } from '@govie-ds/react';
+
+  <Toast 
+   title="Toast" 
+   description="This toast has rendered on page load" 
+  />
+  ```
+  </TabPanel>
+</Tabs>
+## Info Toast with trigger
+<Toast title="Toast Triggered" description="This is an info toast" trigger={<Button>Trigger Toast</Button>}/>
+
+<Tabs id="tab2">
+  <TabList>
+    <TabItem value="tab21" checked>Macro</TabItem>
+    <TabItem value="tab22">React</TabItem>
+  </TabList>
+  <TabPanel value="tab21">
+  ```html
+  {{ govieToast({
+    "title": "Toast Triggered",
+    "description": "This is an info toast",
+    "trigger": {
+      "content": "Trigger Toast"
+    }
+  }) }}
+  ```
+  </TabPanel>
+  <TabPanel value="tab22">
+  ```react
+  import { Toast } from '@govie-ds/react';
+
+  <Toast 
+   title="Toast Triggered" 
+   description="This is an info toast" 
+   trigger={<Button>Trigger Toast</Button>}
+  />
+  ```
+  </TabPanel>
+</Tabs>
+## Success Toast with trigger
+<Toast title="Toast Triggered" variant="success" description="This is a success toast" trigger={<Button>Trigger Toast</Button>}/>
+
+<Tabs id="tab3">
+  <TabList>
+    <TabItem value="tab31" checked>Macro</TabItem>
+    <TabItem value="tab32">React</TabItem>
+  </TabList>
+  <TabPanel value="tab31">
+  ```html
+  {{ govieToast({
+    "title": "Toast Triggered",
+    "description": "This is a success toast",
+    "variant": "success",
+    "trigger": {
+      "content": "Trigger Toast"
+    }
+  }) }}
+  ```
+  </TabPanel>
+  <TabPanel value="tab32">
+  ```react
+  import { Toast } from '@govie-ds/react';
+
+  <Toast 
+   title="Toast Triggered" 
+   variant="success" 
+   description="This is a success toast" 
+   trigger={<Button>Trigger Toast</Button>}
+  />
+  ```
+  </TabPanel>
+</Tabs>
+## Error Toast with trigger
+<Toast title="Toast Triggered" variant="danger" description="This is an error toast" trigger={<Button>Trigger Toast</Button>}/>
+
+<Tabs id="tab4">
+  <TabList>
+    <TabItem value="tab41" checked>Macro</TabItem>
+    <TabItem value="tab42">React</TabItem>
+  </TabList>
+  <TabPanel value="tab41">
+  ```html
+  {{ govieToast({
+    "title": "Toast Triggered",
+    "description": "This is an error toast",
+    "variant": "danger",
+    "trigger": {
+      "content": "Trigger Toast"
+    }
+  }) }}
+  ```
+  </TabPanel>
+  <TabPanel value="tab42">
+  ```react
+  import { Toast } from '@govie-ds/react';
+
+  <Toast 
+   title="Toast Triggered" 
+   variant="danger" 
+   description="This is an error toast" 
+   trigger={<Button>Trigger Toast</Button>}
+  />
+  ```
+  </TabPanel>
+</Tabs>
+## Warning Toast with trigger
+<Toast title="Toast Triggered" variant="warning" description="This is a warning toast" trigger={<Button>Trigger Toast</Button>}/>
+
+<Tabs id="tab5">
+  <TabList>
+    <TabItem value="tab51" checked>Macro</TabItem>
+    <TabItem value="tab52">React</TabItem>
+  </TabList>
+  <TabPanel value="tab51">
+  ```html
+  {{ govieToast({
+    "title": "Toast Triggered",
+    "description": "This is a warning toast",
+    "variant": "warning",
+    "trigger": {
+      "content": "Trigger Toast"
+    }
+  }) }}
+  ```
+  </TabPanel>
+  <TabPanel value="tab52">
+  ```react
+  import { Toast } from '@govie-ds/react';
+
+  <Toast 
+   title="Toast Triggered" 
+   variant="warning" 
+   description="This is a warning toast" 
+   trigger={<Button>Trigger Toast</Button>}
+  />
+  ```
+  </TabPanel>
+</Tabs>

apps/docs/src/components/document/common/mdx.tsx

@@ -29,6 +29,7 @@ import {
   Stack,
   Pagination,
   Alert,
+  Toast,
 } from '@govie-ds/react';
 import { MDXComponents } from 'mdx/types';
 import { useMDXComponent } from 'next-contentlayer/hooks';
@@ -194,6 +195,7 @@ const documentComponents: MDXComponents = {
   Stack: (props) => <Stack {...props} />,
   Pagination: (props) => <Pagination {...props} />,
   Alert: (props) => <Alert {...props} />,
+  Toast: (props) => <Toast {...props} />,
 };
 
 export function Mdx({ code }: MdxProps) {

apps/docs/src/lib/components.ts

@@ -41,6 +41,26 @@ const localHtmlStorybookBaseUrl =
 
 export function getComponents(): ComponentDetail[] {
   let components: ComponentDetail[] = [
+    {
+      id: 'toast',
+      name: 'Toast',
+      statuses: [
+        {
+          platform: {
+            id: 'global',
+            href: '?path=/docs/application-toast--docs',
+          },
+          status: 'beta',
+        },
+        {
+          platform: {
+            id: 'react',
+            href: '?path=//docs/application-toast--docs',
+          },
+          status: 'beta',
+        },
+      ],
+    },
     {
       id: 'alert',
       name: 'Alert',

examples/wagtail/core/jinja/home_page.jinja

@@ -20,6 +20,7 @@
 {% from 'list/list.html' import govieList %}
 {% from 'combo-box/combo-box.html' import govieComboBox %}
 {% from 'alert/alert.html' import govieAlert %}
+{% from 'toast/toast.html' import govieToast %}
 
 {% from 'vars.jinja' import comboBoxProps, cookieBannerProps, modalProps, footerProps, HeaderProps, SelectProps, tabsProps, radioProps, listProps %}
 
@@ -195,6 +196,22 @@
 
   {{ govieModal(modalProps) }}
 
+  <h2>Toast with Trigger</h2>
+
+  {{ govieToast({
+    "title": "Toast Triggered",
+    "description": "This is some content",
+    "trigger": {
+      "content": "Trigger Toast"
+    }
+  }) }}
+
+  {{ govieToast({
+    "title": "Success",
+    "description": "This is a success toast",
+    "variant": "success"
+  }) }}
+
   <h2>Icon Button</h2>
 
   {{govieIconButton({

packages/design/tailwind/css/components.css

@@ -836,7 +836,7 @@ input[type='file' i] {
   @apply !gi-gap-6
  }
 .notyf__toast {
- @apply !gi-m-0 !gi-p-0 !gi-min-w-[340px] !gi-max-w-[460px] !gi-overflow-auto;
+ @apply !gi-m-0 !gi-p-0 !gi-min-w-[340px] !gi-max-w-[460px];
  animation-delay: 0s !important;
 }
 .notyf__message {

packages/html/ds/package.json

@@ -38,9 +38,9 @@
   "license": "MIT",
   "devDependencies": {
     "@govie-ds/eslint-config": "workspace:*",
+    "@govie-ds/macro": "workspace:*",
     "@govie-ds/prettier-config": "workspace:*",
     "@govie-ds/tailwind": "workspace:*",
-    "@govie-ds/macro": "workspace:*",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/user-event": "^14.5.2",

packages/html/ds/src/common/instances.ts

@@ -7,6 +7,7 @@ import { Modal } from '../modal/modal';
 import { Radio } from '../radio/radio';
 import { Tabs } from '../tabs/tabs';
 import { Textarea } from '../textarea/textarea';
+import { Toast } from '../toast/toast';
 import { BaseComponent, BaseComponentOptions } from './component';
 
 function generateRandomId() {
@@ -23,6 +24,7 @@ const componentRegistry = {
   Tabs,
   ComboBox,
   Alert,
+  Toast,
   // TODO: additional component classes
 } as const;
 

packages/html/ds/src/index.ts

@@ -9,6 +9,7 @@ import { initModal } from './modal/modal.js';
 import { initRadios } from './radio/radio.js';
 import { initTabs } from './tabs/tabs.js';
 import { initTextarea } from './textarea/textarea.js';
+import { initToast } from './toast/toast.js';
 
 export * as properties from './dist/properties.js';
 
@@ -36,6 +37,7 @@ export function initGovIe() {
   initTabs();
   initComboBox();
   initAlert();
+  initToast();
 }
 
 export function destroyGovIe() {