FRNT-499 create toast component

src/ui/atoms/button/index.tsx

@@ -30,19 +30,12 @@ const ButtonBase: React.FC<ButtonProps & Variant> = ({
 );
 
 export const Button = styled(ButtonBase)`
-  --local-vertical: calc(1px * var(--woly-component-level) * var(--woly-main-level));
-  --local-horizontal: calc(
-    var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--local-vertical)
-  );
-  --local-gap: var(--local-vertical);
-  --local-compensate: var(--woly-const-m);
+  ${box}
 
   --local-text-color: var(--woly-shape-text-default);
   --local-shape-color: var(--woly-shape-default);
   --local-border-color: var(--woly-shape-default);
 
-  ${box}
-
   display: flex;
   flex-wrap: nowrap;
   justify-content: center;
@@ -54,9 +47,7 @@ export const Button = styled(ButtonBase)`
   line-height: var(--woly-line-height);
 
   background-color: var(--local-shape-color);
-  border-color: var(--local-border-color);
-  border-style: solid;
-  border-width: var(--woly-border-width);
+  border: var(--woly-border-width) solid var(--local-border-color);
   border-radius: var(--woly-rounding);
   outline: none;
 

src/ui/atoms/button/usage.mdx

@@ -59,6 +59,9 @@ Button can be used with icon on the left side.
 Size controlled by the `component-level` block property not from the props.
 
 <Playground>
+  <block.N>
+    <Button variant="primary" text="None" icon={<IconPlus />} />
+  </block.N>
   <block.S>
     <Button variant="primary" text="Small" icon={<IconPlus />} />
   </block.S>

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';

src/ui/molecules/toast/index.tsx

@@ -0,0 +1,99 @@
+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)`
+  --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)));
+
+  ${box}
+
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+
+  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>;

src/ui/molecules/toast/usage.mdx

@@ -0,0 +1,163 @@
+---
+name: toast
+category: molecules
+package: 'woly'
+---
+
+import { Button, Toast } from 'ui';
+import { IconPlus, IconSearch } from 'static/icons';
+import { block, Playground, State } from 'lib/playground';
+
+`Toasts` are lightweight notifications designed to mimic the push notifications.
+Toasts are 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                                                         |
+| `variant`  | `string`           | `'secondary'` | Variant prop to style Toast component                                 |