FRNT-499 create toast component (#121)

* fix button padding * create toast component * fix lint styles * resolve comments * fix toast styles and description * fix toast styles and description * fix usage * update lint * update lint * update lint
woly-ui · Jun 18, 2021 · eca2a1f · eca2a1f
1 parent 78f13fc
commit eca2a1f
Show file tree

Hide file tree

Showing 4 changed files with 271 additions and 6 deletions.
diff --git a/src/ui/atoms/button/index.tsx b/src/ui/atoms/button/index.tsx
@@ -32,19 +32,20 @@ const ButtonBase: React.FC<ButtonProps & Variant> = ({
   variant = 'secondary',
   ...p
 }) => (
-  <button type={type} data-width={fullWidth} data-outlined={outlined} data-variant={variant} {...p}>
+  <button
+    type={type}
+    data-fullWidth={fullWidth}
+    data-outlined={outlined}
+    data-variant={variant}
+    {...p}
+  >
     {icon && <span data-icon="left">{icon}</span>}
     <span data-text>{text}</span>
   </button>
 );
 
 export const Button = styled(ButtonBase)`
   ${box}
-
-  & {
-    padding: 0;
-  }
-
   --local-text-color: var(--woly-shape-text-default);
   --local-shape-color: var(--woly-shape-default);
   --local-border-color: var(--woly-shape-default);
@@ -54,6 +55,7 @@ export const Button = styled(ButtonBase)`
   justify-content: center;
 
   box-sizing: border-box;
+  padding: 0;
 
   color: var(--local-text-color);
   font-size: var(--woly-font-size);

diff --git a/src/ui/molecules/index.ts b/src/ui/molecules/index.ts
@@ -7,3 +7,4 @@ export { RadioButton } from './radio-button';
 export { Popover } from './popover';
 export { Select } from './select';
 export { Switch } from './switch';
+export { Toast } from './toast';
diff --git a/src/ui/molecules/toast/index.tsx b/src/ui/molecules/toast/index.tsx
@@ -0,0 +1,98 @@
+import * as React from 'react';
+import styled, { StyledComponent } from 'styled-components';
+import { Variant } from 'lib/types';
+import { box } from 'ui/elements';
+
+interface ToastProps {
+  action?: React.ReactNode;
+  className?: string;
+  icon?: React.ReactNode;
+  outlined?: boolean;
+}
+
+const ToastBase: React.FC<ToastProps & Variant> = ({
+  action,
+  children,
+  className,
+  icon,
+  outlined = false,
+  variant = 'secondary',
+}) => (
+  <div className={className} data-outlined={outlined} data-variant={variant}>
+    {icon && <span data-icon="toast">{icon}</span>}
+    <div data-content>{children}</div>
+    {action && <span data-action>{action}</span>}
+  </div>
+);
+
+export const Toast = styled(ToastBase)`
+  ${box}
+  --local-text-color: var(--woly-shape-text-default);
+  --local-shape-color: var(--woly-shape-default);
+  --local-border-color: var(--woly-shape-default);
+  --local-toast-gap: max(9px, calc(1px * var(--woly-component-level) * var(--woly-main-level)));
+
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+
+  min-width: fit-content;
+  max-width: 75%;
+
+  color: var(--local-text-color);
+  font-size: var(--woly-font-size);
+  line-height: var(--woly-line-height);
+
+  background-color: var(--local-shape-color);
+  border: var(--woly-border-width) solid var(--local-border-color);
+  border-radius: var(--woly-rounding);
+  outline: none;
+
+  &[data-outlined='true'] {
+    color: var(--local-shape-color);
+
+    background-color: transparent;
+
+    [data-icon='toast'] {
+      svg > path {
+        fill: var(--local-shape-color);
+      }
+    }
+  }
+
+  [data-content] {
+    display: flex;
+    flex: 1;
+    flex-wrap: nowrap;
+  }
+
+  [data-icon='toast'] {
+    --woly-component-level: 0;
+    --local-icon-size: var(--woly-line-height);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--local-icon-size);
+    height: var(--local-icon-size);
+  }
+
+  [data-action] {
+    --woly-component-level: 0;
+    display: flex;
+    align-items: center;
+
+    & > *:not(:last-child) {
+      margin-right: var(--local-toast-gap);
+    }
+  }
+
+  &:hover {
+    --local-text-color: var(--woly-shape-text-hover);
+    --local-border-color: var(--woly-shape-hover);
+    --local-shape-color: var(--woly-shape-hover);
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus);
+  }
+` as StyledComponent<'div', Record<string, unknown>, ToastProps & Variant>;
diff --git a/src/ui/molecules/toast/usage.mdx b/src/ui/molecules/toast/usage.mdx
@@ -0,0 +1,164 @@
+---
+name: toast
+category: molecules
+package: 'woly'
+---
+
+import { Button, Toast } from 'ui';
+import { IconPlus, IconSearch } from 'static/icons';
+import { block, Playground, State } from 'lib/playground';
+
+`Toast` is lightweight notification designed to mimic the push notifications.
+Toast is intended to be small interruptions to your visitors or users,
+and therefore should contain minimal, to-the-point, non-interactive content.
+
+### Example
+
+Siple Toast with text only
+
+<Playground>
+  <block.L>
+    <Toast variant="primary" outlined>
+      Режим предпросмотра таблицы
+    </Toast>
+  </block.L>
+</Playground>
+
+### Icons
+
+Toast can be used with icon on the left side.
+
+<Playground>
+  <block.L>
+    <Toast icon={<IconPlus />} variant="primary" outlined>
+      Перетащите файл формата XLS
+    </Toast>
+  </block.L>
+</Playground>
+
+Toast can also consist action block
+
+<Playground>
+  <block.L style={{ width: '1200px' }}>
+    <Toast
+      variant="primary"
+      outlined
+      action={
+        <>
+          <Button
+            icon={<IconSearch />}
+            onClick={() => console.info('IconClose clicked')}
+            variant="primary"
+            text="Submit"
+          />
+          <Button
+            icon={<IconSearch />}
+            onClick={() => console.info('IconClose clicked')}
+            variant="secondary"
+            text="Cancel"
+            outlined
+          />
+        </>
+      }
+    >
+      Перетащите файл формата XLS, чтобы обновить данные о тарифах
+    </Toast>
+  </block.L>
+</Playground>
+
+Or even both
+
+<Playground>
+  <block.L style={{ width: '1200px' }}>
+    <Toast
+      icon={<IconPlus />}
+      variant="primary"
+      outlined
+      action={
+        <>
+          <Button
+            onClick={() => console.info('IconClose clicked')}
+            variant="primary"
+            text="Submit"
+          />
+          <Button
+            onClick={() => console.info('IconClose clicked')}
+            variant="primary"
+            text="Cancel"
+            outlined
+          />
+        </>
+      }
+    >
+      Сохраните изменения, чтобы выйти из режима предпросмотра
+    </Toast>
+  </block.L>
+</Playground>
+
+### Variants
+
+<Playground>
+  <block.L style={{ width: '1200px' }}>
+    <Toast
+      icon={<IconPlus />}
+      variant="secondary"
+      outlined
+      action={
+        <>
+          <Button
+            onClick={() => console.info('IconClose clicked')}
+            variant="secondary"
+            text="Submit"
+            outlined
+          />
+          <Button
+            onClick={() => console.info('IconClose clicked')}
+            variant="secondary"
+            text="Cancel"
+            outlined
+          />
+        </>
+      }
+    >
+      Сохраните изменения, чтобы выйти из режима предпросмотра
+    </Toast>
+  </block.L>
+</Playground>
+
+<Playground>
+  <block.L style={{ width: '1200px' }}>
+    <Toast
+      icon={<IconPlus />}
+      variant="primary"
+      outlined
+      action={
+        <>
+          <Button
+            onClick={() => console.info('IconClose clicked')}
+            variant="primary"
+            text="Submit"
+            outlined
+          />
+          <Button
+            onClick={() => console.info('IconClose clicked')}
+            variant="primary"
+            text="Cancel"
+            outlined
+          />
+        </>
+      }
+    >
+      Сохраните изменения, чтобы выйти из режима предпросмотра
+    </Toast>
+  </block.L>
+</Playground>
+
+### Props
+
+| Name       | Type               | Default       | Description                                                           |
+| ---------- | ------------------ | ------------- | --------------------------------------------------------------------- |
+| `action`   | `React.ReactNode`  | `null`        | Block of action items (ex. One element or grop that can be clicked)   |
+| `content`  | `React.ReactNode`  | `null`        | Component to show the icon near the text (ex.: Icon on the left side) |
+| `children` | ``React.ReactNode` | `null`        | Content block                                                         |
+| `outlined` | `boolean`          | `false`       | Change toast`s view from filled to outlined                           |
+| `variant`  | `string`           | `'secondary'` | Variant prop to style Toast component                                 |