From f497dc6323112b14ffb5cedd963dfcbfedac002f Mon Sep 17 00:00:00 2001
From: Irina Aristova <38761239+Irinaristova@users.noreply.github.com>
Date: Mon, 5 Jul 2021 18:18:31 +0300
Subject: [PATCH] [FRNT-559] add toast weight (#165)

* add toast weight

* fix chip and button usage

* fix toast styles
---
 src/lib/global.ts                    |   8 +-
 src/woly/atoms/button-icon/usage.mdx |   6 +-
 src/woly/atoms/button/usage.mdx      |   8 +-
 src/woly/atoms/chip/index.tsx        |   6 +-
 src/woly/atoms/chip/usage.mdx        |  24 +++---
 src/woly/molecules/toast/index.tsx   | 114 ++++++++++++++++++++-------
 src/woly/molecules/toast/usage.mdx   | 105 ++++++++++++++++++++----
 7 files changed, 203 insertions(+), 68 deletions(-)

diff --git a/src/lib/global.ts b/src/lib/global.ts
index 91b8c503..fca36d8f 100644
--- a/src/lib/global.ts
+++ b/src/lib/global.ts
@@ -159,16 +159,16 @@ export const Global = styled.div`
     --woly-canvas-text-active: hsla(var(--bw-0), 1);
   }
 
-  [data-priority='tertiary'] {
+  [data-priority='goast'] {
     --woly-shape-default: transparent;
     --woly-shape-disabled: hsla(var(--bw-200), 1);
     --woly-shape-hover: transparent;
     --woly-shape-active: transparent;
 
-    --woly-shape-text-default: hsla(var(--bw-0), 1);
+    --woly-shape-text-default: hsla(var(--bw-1000), 1);
     --woly-shape-text-disabled: hsla(var(--bw-300), 1);
-    --woly-shape-text-hover: hsla(var(--bw-600), 1);
-    --woly-shape-text-active: hsla(var(--bw-700), 1);
+    --woly-shape-text-hover: hsla(var(--bw-400), 1);
+    --woly-shape-text-active: hsla(var(--bw-500), 1);
 
     --woly-canvas-default: transparent;
     --woly-canvas-disabled: hsla(var(--bw-200), 1);
diff --git a/src/woly/atoms/button-icon/usage.mdx b/src/woly/atoms/button-icon/usage.mdx
index a8afd105..08bace67 100644
--- a/src/woly/atoms/button-icon/usage.mdx
+++ b/src/woly/atoms/button-icon/usage.mdx
@@ -62,8 +62,8 @@ Button-icon's size can controlled by block-container and it`s width is equal to
 
 ### Weight and priority
 
-Button-icon can be represented in primary, secondary, default or tertiary priorities and can be styled with fill or outline.
-In case of choosing button-icon in tertiary priority with outline styles use the opposite background color to the text color of button-icon.
+Button-icon can be represented in primary, secondary, default or goast priorities and can be styled with fill or outline.
+In case of choosing button-icon in goast priority with outline styles use the opposite background color to the text color of button-icon.
 
 <Playground>
   <ButtonIcon
@@ -102,7 +102,7 @@ In case of choosing button-icon in tertiary priority with outline styles use the
   <ButtonIcon
     icon={<IconSearch />}
     onClick={() => console.info('ButtonIcon clicked')}
-    priority="tertiary"
+    priority="goast"
   />
 </Playground>
 
diff --git a/src/woly/atoms/button/usage.mdx b/src/woly/atoms/button/usage.mdx
index 78b50d64..751d9d2f 100644
--- a/src/woly/atoms/button/usage.mdx
+++ b/src/woly/atoms/button/usage.mdx
@@ -61,10 +61,12 @@ Secondary priority should be used as a default priority.
   <Button text="Alternative action" priority="secondary" outlined />
 </Playground>
 
-Tertiary priority should be used as an alternative priority to secondary and can`t be used with outline.
+Goast priority should be used as an alternative priority to secondary and can`t be used with outline.
 
 <Playground>
-  <Button text="Alternative action" priority="tertiary" />
+  <block style={{ width: '400px', padding: '30px 50px', background: 'grey' }}>
+    <Button text="Alternative action" priority="goast" />
+  </block>
 </Playground>
 
 ### Icons
@@ -78,7 +80,7 @@ Button can be used with icon on the left side.
 
 ### Sizes
 
-Size controlled by the `component-level` block property not from the props.
+Size is controlled by the `component-level` block property not from the props.
 
 <Playground>
   <block.N>
diff --git a/src/woly/atoms/chip/index.tsx b/src/woly/atoms/chip/index.tsx
index 4b844637..4c41592d 100644
--- a/src/woly/atoms/chip/index.tsx
+++ b/src/woly/atoms/chip/index.tsx
@@ -89,7 +89,7 @@ export const Chip = styled(ChipBase)`
     outline: none;
   }
 
-  [data-icon] {
+  [data-icon='chip-visual-block'] {
     display: flex;
     flex-shrink: 0;
     align-items: center;
@@ -104,7 +104,7 @@ export const Chip = styled(ChipBase)`
     --woly-component-level: 0;
   }
 
-  [data-icon='chip-visual-block'] {
+  [data-icon] {
     width: var(--local-icon-size);
     height: var(--local-icon-size);
     svg {
@@ -117,7 +117,7 @@ export const Chip = styled(ChipBase)`
     --local-shape-color: transparent;
     --local-text-color: var(--woly-shape-default);
 
-    svg > path {
+    [data-icon='chip-visual-block'] > svg > path {
       fill: var(--woly-shape-default);
     }
     &:hover {
diff --git a/src/woly/atoms/chip/usage.mdx b/src/woly/atoms/chip/usage.mdx
index b9f45bc0..6954e3da 100644
--- a/src/woly/atoms/chip/usage.mdx
+++ b/src/woly/atoms/chip/usage.mdx
@@ -23,14 +23,22 @@ As a standalone component, the most common use will be in some form of input.
 
 ### Weight and priority
 
-Chip can be represented in primary, secondary, default or tertiary prioritys and can be styled with fill or outline.
-In case of choosing chip in tertiary priority with outline styles use the opposite background color to the text color of chip.
+Chip can be represented in primary, secondary, default or goast priorities and can be styled with fill or outline.
 
-<Playground direction="horizontal" size="XS">
-  <Chip text="Simple Chip" priority="primary" />
-  <Chip text="Simple Chip" priority="secondary" />
-  <Chip text="Simple Chip" priority="default" />
-  <Chip text="Simple Chip" priority="tertiary" />
+<Playground direction="horizontal" size="S">
+  <div
+    style={{
+      background: 'grey',
+      display: 'flex',
+      justifyContent: 'space-between',
+      padding: '100px 10px',
+    }}
+  >
+    <Chip text="Simple Chip" priority="primary" />
+    <Chip text="Simple Chip" priority="secondary" />
+    <Chip text="Simple Chip" priority="default" />
+    <Chip text="Simple Chip" priority="goast" />
+  </div>
 </Playground>
 
 <Playground direction="horizontal" size="XS">
@@ -66,7 +74,6 @@ eg button-icon.
     onClick={() => console.info('click')}
     rightIcon={
       <ButtonIcon
-        filled
         icon={<IconClose />}
         onClick={() => console.info('IconClose clicked')}
         priority="primary"
@@ -130,7 +137,6 @@ pass the disable state only to it, make the entire component disable.
     rightIcon={
       <ButtonIcon
         disabled
-        filled
         icon={<IconClose />}
         onClick={() => console.info('IconClose clicked')}
         priority="primary"
diff --git a/src/woly/molecules/toast/index.tsx b/src/woly/molecules/toast/index.tsx
index d94153e4..77ccac08 100644
--- a/src/woly/molecules/toast/index.tsx
+++ b/src/woly/molecules/toast/index.tsx
@@ -7,7 +7,7 @@ interface ToastProps {
   action?: React.ReactNode;
   className?: string;
   icon?: React.ReactNode;
-  outlined?: boolean;
+  weight?: string;
 }
 
 const ToastBase: React.FC<ToastProps & Priority> = ({
@@ -15,10 +15,10 @@ const ToastBase: React.FC<ToastProps & Priority> = ({
   children,
   className,
   icon,
-  outlined = false,
+  weight = 'fill',
   priority = 'secondary',
 }) => (
-  <div className={className} data-outlined={outlined} data-priority={priority}>
+  <div className={className} data-weight={weight} data-priority={priority}>
     {icon && <span data-icon="toast">{icon}</span>}
     <div data-content>{children}</div>
     {action && <span data-action>{action}</span>}
@@ -27,10 +27,8 @@ const ToastBase: React.FC<ToastProps & Priority> = ({
 
 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)));
+  --local-toast-gap: max(var(--woly-const-m), calc(1px * var(--woly-component-level) * var(--woly-main-level)));
+  --local-icon-size: var(--woly-line-height);
 
   display: flex;
   flex-wrap: nowrap;
@@ -39,26 +37,15 @@ export const Toast = styled(ToastBase)`
   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;
+  border-style: solid;
 
-  &[data-outlined='true'] {
-    color: var(--local-shape-color);
+  border-width: var(--woly-border-width);
 
-    background-color: transparent;
-
-    [data-icon='toast'] {
-      svg > path {
-        fill: var(--local-shape-color);
-      }
-    }
-  }
+  border-radius: var(--woly-rounding);
+  outline: none;
 
   [data-content] {
     display: flex;
@@ -68,7 +55,6 @@ export const Toast = styled(ToastBase)`
 
   [data-icon='toast'] {
     --woly-component-level: 0;
-    --local-icon-size: var(--woly-line-height);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -86,13 +72,83 @@ export const Toast = styled(ToastBase)`
     }
   }
 
-  &:hover {
-    --local-text-color: var(--woly-shape-text-hover);
-    --local-border-color: var(--woly-shape-hover);
-    --local-shape-color: var(--woly-shape-hover);
+  &[data-weight='fill'] {
+    --local-text-color: var(--woly-shape-text-default);
+    --local-shape-color: var(--woly-shape-default);
+    --local-border-color: var(--woly-shape-default);
+
+    color: var(--local-text-color);
+
+    background-color: var(--local-shape-color);
+    border-color: var(--local-border-color);
+
+    [data-icon='toast'] > svg > path {
+      fill: var(--local-text-color);
+    }
+
+    [data-icon='toast'] > svg > g {
+      stroke: var(--local-text-color);
+    }
+  }
+
+  &[data-weight='outline'] {
+    --local-text-color: var(--woly-shape-default);
+    --local-shape-color: transparent;
+    --local-border-color: var(--woly-shape-default);
+
+    color: var(--local-text-color);
+
+    background-color: transparent;
+    border-color: var(--local-text-color);
+
+    [data-icon='toast'] > svg > path {
+      fill: var(--local-text-color);
+    }
+
+    [data-icon='toast'] > svg > g {
+      stroke: var(--local-text-color);
+    }
+  }
+
+  &[data-weight='goast'] {
+    --local-text-color: var(--woly-shape-text-default);
+    --local-shape-color: transparent;
+    --local-border-color: var(--woly-shape-text-default);
+    --local-shadow: var(--woly-border-width) var(--woly-border-width)
+      calc(var(--woly-border-width) * 4) hsla(0, 0%, 100%, 50%);
+
+    color: var(--local-text-color);
+
+    background-color: var(--local-shape-color);
+    border-color: var(--local-border-color);
+
+    box-shadow: var(--local-shadow);
+
+    [data-icon='toast'] > svg > path {
+      fill: var(--local-text-color);
+    }
+
+    [data-icon='toast'] > svg > g {
+      stroke: var(--local-text-color);
+    }
   }
 
-  &:focus {
-    box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus);
+  &[data-weight='transparent'] {
+    --local-text-color: var(--woly-shape-default);
+    --local-shape-color: transparent;
+    --local-border-color: transparent;
+
+    color: var(--local-text-color);
+
+    background-color: var(--local-shape-color);
+    border-color: var(--local-shape-color);
+
+    [data-icon='toast'] > svg > path {
+      fill: var(--local-text-color);
+    }
+
+    [data-icon='toast'] > svg > g {
+      stroke: var(--local-text-color);
+    }
   }
 ` as StyledComponent<'div', Record<string, unknown>, ToastProps & Priority>;
diff --git a/src/woly/molecules/toast/usage.mdx b/src/woly/molecules/toast/usage.mdx
index 65c81edd..be553ea3 100644
--- a/src/woly/molecules/toast/usage.mdx
+++ b/src/woly/molecules/toast/usage.mdx
@@ -12,7 +12,7 @@ Siple Toast with text only
 
 <Playground>
   <block.L>
-    <Toast priority="primary" outlined>
+    <Toast priority="secondary" weight="transparent">
       Режим предпросмотра таблицы
     </Toast>
   </block.L>
@@ -24,7 +24,7 @@ Toast can be used with icon on the left side.
 
 <Playground>
   <block.L>
-    <Toast icon={<IconPlus />} priority="primary" outlined>
+    <Toast icon={<IconPlus />} priority="primary" weight="fill">
       Перетащите файл формата XLS
     </Toast>
   </block.L>
@@ -35,18 +35,16 @@ Toast can also consist action block
 <Playground>
   <block.L style={{ width: '1200px' }}>
     <Toast
-      priority="primary"
-      outlined
+      priority="secondary"
+      weight="outline"
       action={
         <>
           <Button
-            icon={<IconSearch />}
             onClick={() => console.info('IconClose clicked')}
-            priority="primary"
+            priority="secondary"
             text="Submit"
           />
           <Button
-            icon={<IconSearch />}
             onClick={() => console.info('IconClose clicked')}
             priority="secondary"
             text="Cancel"
@@ -67,7 +65,7 @@ Or even both
     <Toast
       icon={<IconPlus />}
       priority="primary"
-      outlined
+      weight="fill"
       action={
         <>
           <Button
@@ -79,7 +77,6 @@ Or even both
             onClick={() => console.info('IconClose clicked')}
             priority="primary"
             text="Cancel"
-            outlined
           />
         </>
       }
@@ -96,20 +93,17 @@ Or even both
     <Toast
       icon={<IconPlus />}
       priority="secondary"
-      outlined
       action={
         <>
           <Button
             onClick={() => console.info('IconClose clicked')}
             priority="secondary"
             text="Submit"
-            outlined
           />
           <Button
             onClick={() => console.info('IconClose clicked')}
             priority="secondary"
             text="Cancel"
-            outlined
           />
         </>
       }
@@ -124,20 +118,17 @@ Or even both
     <Toast
       icon={<IconPlus />}
       priority="primary"
-      outlined
       action={
         <>
           <Button
             onClick={() => console.info('IconClose clicked')}
             priority="primary"
             text="Submit"
-            outlined
           />
           <Button
             onClick={() => console.info('IconClose clicked')}
             priority="primary"
             text="Cancel"
-            outlined
           />
         </>
       }
@@ -147,12 +138,92 @@ Or even both
   </block.L>
 </Playground>
 
+<Playground>
+  <block.L style={{ width: '1200px' }}>
+    <Toast
+      icon={<IconPlus />}
+      priority="default"
+      action={
+        <>
+          <Button
+            onClick={() => console.info('IconClose clicked')}
+            priority="default"
+            text="Submit"
+          />
+          <Button
+            onClick={() => console.info('IconClose clicked')}
+            priority="default"
+            text="Cancel"
+          />
+        </>
+      }
+    >
+      Сохраните изменения, чтобы выйти из режима предпросмотра
+    </Toast>
+  </block.L>
+</Playground>
+
+## Weight
+
+<Playground>
+  <block
+    style={{
+      display: 'flex',
+      justifyContent: 'space-between',
+      flexWrap: 'wrap',
+      padding: '100px 10px',
+      background: 'grey',
+    }}
+  >
+    <Toast icon={<IconPlus />} priority="primary" weight="fill">
+      Перетащите файл формата XLS
+    </Toast>
+    <Toast icon={<IconPlus />} priority="primary">
+      Перетащите файл формата XLS
+    </Toast>
+    <Toast icon={<IconPlus />} weight="goast">
+      Перетащите файл формата XLS
+    </Toast>
+    <Toast icon={<IconPlus />} priority="primary" weight="transparent">
+      Перетащите файл формата XLS
+    </Toast>
+  </block>
+</Playground>
+
+## Size
+
+Sizi is controlled by the `component-level` block property not from the props.
+
+<Playground>
+  <block.N>
+    <Toast priority="secondary">Режим предпросмотра таблицы</Toast>
+  </block.N>
+  <block.XS>
+    <Toast priority="secondary">Режим предпросмотра таблицы</Toast>
+  </block.XS>
+  <block.S>
+    <Toast priority="secondary">Режим предпросмотра таблицы</Toast>
+  </block.S>
+  <block.M>
+    <Toast priority="secondary">Режим предпросмотра таблицы</Toast>
+  </block.M>
+  <block.L>
+    <Toast priority="secondary">Режим предпросмотра таблицы</Toast>
+  </block.L>
+  <block.XL>
+    <Toast priority="secondary">Режим предпросмотра таблицы</Toast>
+  </block.XL>
+  <block.H>
+    <Toast priority="secondary">Режим предпросмотра таблицы</Toast>
+  </block.H>
+</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) |
+| `icon`     | `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                           |
+| `weight`   | `string`           | `outline`     | Set toast`s view (ex.: fill, outline, transparent, goast)             |
 | `priority` | `string`           | `'secondary'` | Priority prop to style Toast component                                |