feat: initial functionality

docs/package.json

@@ -37,6 +37,7 @@
     "@heathmont/moon-core": "2.49.3-alpha.0",
     "@heathmont/moon-fonts": "^2.37.0",
     "@heathmont/moon-global": "^2.54.1",
+    "@heathmont/moon-notifications": "2.54.2-alpha.0",
     "@heathmont/moon-pagination": "^2.54.1",
     "@heathmont/moon-sidebar": "^2.54.1",
     "@heathmont/moon-table": "^2.54.1",

docs/src/components/code/index.tsx

@@ -11,6 +11,7 @@ import * as Calendar from '@heathmont/moon-calendar';
 import * as Table from '@heathmont/moon-table';
 import * as Charts from '@heathmont/moon-charts';
 import * as Core from '@heathmont/moon-core';
+import * as Notifications from '@heathmont/moon-notifications';
 import { useTheme } from '@heathmont/moon-themes';
 
 import { prismTheme } from './prism';
@@ -68,6 +69,7 @@ export const Code = ({ codeString, ...props }: CodeProps) => {
             ...Calendar,
             ...Table,
             ...Charts,
+            ...Notifications,
             useTheme,
             styled,
           }}

docs/src/pages/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default function Home() {
+  return (
+    <>
+      <h1>Main page would be added soon</h1>
+      <a href="/themes/introduction">Continue with design system</a>
+    </>
+  );
+}

packages/notifications/src/banner/README.mdx

@@ -1,6 +1,6 @@
 ---
 name: Banner
-menu: Notifications
+menu: Toolkit
 route: /notifications/banner
 ---
 

packages/notifications/src/index.ts

@@ -4,3 +4,7 @@
 
 export { default as Banner } from './banner/Banner';
 export * from './banner/Banner';
+export { default as Snackbar } from './snackbar/Snackbar';
+export * from './snackbar/Snackbar';
+export { default as useSnackbar } from './useSnackbar/useSnackbar';
+export * from './useSnackbar/useSnackbar';

packages/notifications/src/private/icons/IconSnackbarSuccess.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import styled from 'styled-components';
+import { ColorProps } from '@heathmont/moon-themes';
+import { themed } from '@heathmont/moon-utils';
+
+const Svg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <rect
+      width={20}
+      height={20}
+      rx={10}
+      transform="matrix(-1 0 0 1 22 2)"
+      fill="#0CD664"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M16 8.9c-.28 0-.53.11-.71.29L11 13.49l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29.28 0 .53-.11.71-.29l5-5A1.003 1.003 0 0016 8.9z"
+      fill="#fff"
+    />
+  </svg>
+);
+
+type IconProps = {
+  backgroundColor?: ColorProps;
+  circleColor?: ColorProps;
+  color?: ColorProps;
+};
+const IconSnackbarSuccess = styled(Svg)<IconProps>(
+  ({ backgroundColor, circleColor, color, theme }) => [
+    {
+      verticalAlign: 'middle',
+    },
+    backgroundColor && {
+      backgroundColor: themed('color', backgroundColor)(theme),
+      padding: backgroundColor ? '0.25em' : 0,
+      overflow: 'visible',
+      borderRadius: '50%',
+    },
+    color && {
+      color: themed('color', color)(theme),
+    },
+    circleColor && {
+      circle: {
+        fill: themed('color', circleColor)(theme),
+      },
+    },
+  ]
+);
+export default IconSnackbarSuccess;

packages/notifications/src/snackbar/README.mdx

@@ -0,0 +1,143 @@
+---
+name: Snackbar
+menu: Toolkit
+route: /notifications/snackbar
+---
+
+import { Snackbar, Link } from '@heathmont/moon-components';
+
+# Snackbar
+
+Short, time-based messages that slide in and out of a page.
+
+**Snackbar can overlap content.**
+
+[Figma link](https://www.figma.com/file/S3q1SkVngbwHuwpxHKCsgtJj/Global?node-id=15490%3A252)
+
+#### Usage
+
+Snackbar is used to give user feedback on the action or communicate changes in the system.
+
+#### Interaction
+
+Disappear automatically or can be dismissed by user.
+
+#### Frequency
+
+**Only one** snackbar may be displayed at a time.
+
+## Actions
+
+A snackbar can contain a single action. Because they disappear automatically, the action **shouldn’t** be “Dismiss” or “Cancel.
+
+**Use design system `Link`** component for actions.
+
+```jsx react-live
+<Snackbar
+  message={
+    <p>This item already have the label "Sport". You could add a new label.</p>
+  }
+  position="inline"
+  action={<Link href="#">Add</Link>}
+  isCloseable={true}
+/>
+```
+
+## Status
+
+Snackbar can't have both Icon and Action at the same time.
+
+#### Error
+
+```jsx react-live
+<Snackbar
+  position="inline"
+  status="error"
+  message={<p>Error message or notification</p>}
+/>
+```
+
+#### Warning
+
+```jsx react-live
+<Snackbar
+  position="inline"
+  status="warning"
+  message={<p>Error message or notification</p>}
+/>
+```
+
+#### Info
+
+```jsx react-live
+<Snackbar
+  position="inline"
+  status="info"
+  message={<p>Error message or notification</p>}
+/>
+```
+
+#### Success
+
+```jsx react-live
+<Snackbar
+  position="inline"
+  status="success"
+  message={<p>Error message or notification</p>}
+/>
+```
+
+## Appearing and disappearing
+
+Snackbars appear without warning, and don't require user interaction.
+
+Use `useSnackbar` hook if you want the Snackbar to automatically disappear from the screen after a minimum of 5 seconds, and a maximum of 10 seconds.
+By default it's a 5 seconds.
+
+`timeout={5000}`
+
+```jsx react-live
+() => {
+  const [Snackbar, displaySnackbar] = useSnackbar({
+    message: <p>Appearing and disappearing works!</p>,
+    timeout: 2000,
+    status: 'success',
+    position: 'top',
+    isCloseable: true,
+    action: 'ADD',
+  });
+
+  return (
+    <>
+      <Button variant="primary" onClick={displaySnackbar}>
+        Show snackbar
+      </Button>
+      {Snackbar}
+    </>
+  );
+};
+```
+
+## Placement
+
+At the bottom of the UI
+Snackbars should be placed at the bottom of a UI, in front of app content.
+Avoid placing a snackbar in front of frequently used touch targets or navigation.
+
+By default it has fixed position with same z-index as Dialog.
+
+If you want to disable isFixed
+
+`position="bottom" | "top"`
+
+```jsx react-live
+<Snackbar
+  position="bottom"
+  status="success"
+  message={<p>Deposit was successfull.</p>}
+/>
+```
+
+```jsx react-live
+<Snackbar status="success" message={<p>Deposit was successfull.</p>} />
+```