feat: introduce notifications

docs/config.json

@@ -9,6 +9,7 @@
     "core",
     "fonts",
     "global",
+    "notifications",
     "pagination",
     "sidebar",
     "table",
@@ -21,6 +22,7 @@
     "Themes",
     "Assets",
     "Design System",
+    "Toolkit",
     "Calendar",
     "Components",
     "Global",

packages/notifications/README.md

@@ -0,0 +1 @@
+# Design System

packages/notifications/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@heathmont/moon-notifications",
+  "sideEffects": false,
+  "version": "2.54.1",
+  "files": [
+    "lib"
+  ],
+  "main": "lib/index.js",
+  "module": "lib/es/index.js",
+  "typings": "lib/index.d.ts",
+  "repository": "https://github.com/coingaming/sportsbet-design",
+  "author": "Coingaming Group",
+  "license": "MIT",
+  "scripts": {
+    "build": "echo 'Handled by root package'"
+  },
+  "dependencies": {
+    "@heathmont/moon-themes": "^2.54.1",
+    "@heathmont/moon-utils": "^2.54.1"
+  },
+  "peerDependencies": {
+    "react": ">= 16.10.2",
+    "react-dom": ">= 16.10.2",
+    "styled-components": ">= 4.4.1"
+  }
+}

packages/notifications/src/banner/Banner.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { rem } from '@heathmont/moon-utils';
+import styled from 'styled-components';
+
+import IconBannerInfo from '../private/icons/IconBannerInfo';
+import IconCloseSmall from '../private/icons/IconCloseSmall';
+import IconError from '../private/icons/IconError';
+import IconWarning from '../private/icons/IconWarning';
+
+type BannerProps = {
+  message: any;
+  status: 'error' | 'warning' | 'info';
+  onClose?: any;
+  isCloseable?: boolean;
+};
+
+const BannerWrapper = styled.div<any>(({ theme: { color, space } }) => ({
+  minWidth: rem(280),
+  width: '100%',
+  padding: `${space.default}px ${rem(12)}`,
+  backgroundColor: color.hit[100],
+  borderRadius: rem(12),
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'left',
+  '& > * + *': {
+    marginLeft: rem(12),
+  },
+  alignItems: 'center',
+  'P,  SPAN': {
+    fontSize: rem(14),
+    lineHeight: rem(20),
+    margin: 0,
+  },
+}));
+
+const IconWrapper = styled.div({
+  marginRight: rem(8),
+});
+
+const IconCloseWrapper = styled.div(({ theme }) => ({
+  backgroundColor: theme.color.goku[100],
+  borderRadius: theme.radius.largest,
+  marginLeft: 'auto',
+  cursor: 'pointer',
+  width: rem(24),
+  height: rem(24),
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
+const Banner: React.FC<BannerProps> = ({
+  message,
+  onClose,
+  status,
+  isCloseable = false,
+}) => {
+  const [visible, setVisible] = React.useState(true);
+
+  const closeBanner = () => setVisible(false);
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <BannerWrapper>
+      {status === 'error' && (
+        <IconWrapper>
+          <IconError fontSize="1.5rem" />
+        </IconWrapper>
+      )}
+      {status === 'warning' && (
+        <IconWrapper>
+          <IconWarning fontSize="1.5rem" color="krillin.100" />
+        </IconWrapper>
+      )}
+      {status === 'info' && (
+        <IconWrapper>
+          <IconBannerInfo fontSize="1.5rem" color="krillin.100" />
+        </IconWrapper>
+      )}
+      {message && message}
+      {isCloseable && (
+        <IconCloseWrapper
+          onClick={() => {
+            if (onClose && typeof onClose === 'function') {
+              onClose();
+            }
+            closeBanner();
+          }}
+        >
+          <IconCloseSmall fontSize="1rem" color="trunks.100" />
+        </IconCloseWrapper>
+      )}
+    </BannerWrapper>
+  );
+};
+
+export { BannerProps };
+
+export default Banner;

packages/notifications/src/banner/README.mdx

@@ -0,0 +1,73 @@
+---
+name: Banner
+menu: Notifications
+route: /notifications/banner
+---
+
+import { Banner, Link } from '@heathmont/moon-components';
+
+# Banner
+
+System or product level notifications that are not specific to a task.
+
+**Banner is static & do not overlay content.**
+
+[Figma link](https://www.figma.com/file/S3q1SkVngbwHuwpxHKCsgtJj/Global?node-id=15488%3A148)
+
+#### Usage
+
+The banner is used to communicate the current stance of the system and to prevent errors.
+
+```jsx react-live
+<Banner status="error" message={<p>Error message or notification</p>} />
+```
+
+#### Interaction
+
+Persist until dismissed by the user and may include a button or link.
+
+## Status
+
+#### Error
+
+```jsx react-live
+<Banner status="error" message={<p>Error message or notification</p>} />
+```
+
+#### Warning
+
+```jsx react-live
+<Banner status="warning" message={<p>Error message or notification</p>} />
+```
+
+#### Info
+
+```jsx react-live
+<Banner status="info" message={<p>Error message or notification</p>} />
+```
+
+## Appearing and disappearing
+
+Banners appear without warning, and require user interaction.
+Use `isCloseable` prop to enable _close_ button.
+
+```jsx react-live
+<Banner
+  isCloseable={true}
+  status="warning"
+  message={<p>Error message or notification</p>}
+/>
+```
+
+Use `onClose` if you want to invoke a callback after disappearing.
+
+```jsx react-live
+<Banner
+  isCloseable={true}
+  onClose={() => {
+    console.log('Banner was dismissed.');
+  }}
+  status="warning"
+  message={<p>Error message or notification</p>}
+/>
+```

packages/notifications/src/index.ts

@@ -0,0 +1,6 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export { default as Banner } from './banner/Banner';
+export * from './banner/Banner';

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

@@ -0,0 +1,49 @@
+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 x={2} y={2} width={20} height={20} rx={10} fill="#1084F2" />
+    <path
+      d="M12.234 8.46c-.392 0-.667-.08-.826-.238a.825.825 0 01-.224-.588V7.34c0-.233.075-.43.224-.588.159-.159.43-.238.812-.238.392 0 .663.08.812.238a.799.799 0 01.238.588v.294c0 .233-.08.43-.238.588-.15.159-.415.238-.798.238zM9 15.768h2.464v-4.76H9V9.776h3.99v5.992h2.31V17H9v-1.232z"
+      fill="#fff"
+    />
+  </svg>
+);
+
+type IconProps = {
+  backgroundColor?: ColorProps;
+  circleColor?: ColorProps;
+  color?: ColorProps;
+};
+const IconBannerInfo = 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 IconBannerInfo;

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

@@ -0,0 +1,51 @@
+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 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M12 6l-6 6M6 6l6 6"
+      stroke="currentColor"
+      strokeWidth={1.8}
+      strokeMiterlimit={10}
+      strokeLinecap="round"
+    />
+  </svg>
+);
+
+type IconProps = {
+  backgroundColor?: ColorProps;
+  circleColor?: ColorProps;
+  color?: ColorProps;
+};
+const IconCloseSmall = 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 IconCloseSmall;

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

@@ -0,0 +1,46 @@
+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 x={2} y={2} width={20} height={20} rx={10} fill="#FF4E64" />
+    <rect x={6} y={10} width={12} height={4} rx={1} fill="#fff" />
+  </svg>
+);
+
+type IconProps = {
+  backgroundColor?: ColorProps;
+  circleColor?: ColorProps;
+  color?: ColorProps;
+};
+const IconError = 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 IconError;