From 15d790fceb26dc07e80f3474dd8da3e9c2b668bd Mon Sep 17 00:00:00 2001
From: Ira <i.aristova@opends.tech>
Date: Tue, 29 Jun 2021 13:12:52 +0300
Subject: [PATCH 1/3] add weight to button-icon

---
 src/woly/atoms/button-icon/index.tsx | 117 ++++++++++++++++++++-------
 src/woly/atoms/button-icon/usage.mdx |  39 +++++----
 2 files changed, 109 insertions(+), 47 deletions(-)

diff --git a/src/woly/atoms/button-icon/index.tsx b/src/woly/atoms/button-icon/index.tsx
index 0c532aa8..226ea9ed 100644
--- a/src/woly/atoms/button-icon/index.tsx
+++ b/src/woly/atoms/button-icon/index.tsx
@@ -1,25 +1,25 @@
 import * as React from 'react';
 import styled, { StyledComponent } from 'styled-components';
 import { Priority } from 'lib/types';
-import { box } from 'ui/elements';
+import { box } from 'ui/elements/box';
 
 interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   className?: string;
   icon: React.ReactNode;
   onClick: React.MouseEventHandler<HTMLButtonElement>;
-  outlined?: boolean;
+  weight?: string;
 }
 
 const ButtonIconBase: React.FC<Props & Priority> = ({
   icon,
   onClick,
-  outlined = false,
   priority = 'secondary',
+  weight = '3',
   ...p
 }) => (
   <button
-    data-outlined={outlined}
     data-priority={priority}
+    data-weight={weight}
     onClick={onClick}
     role="button"
     type="button"
@@ -31,9 +31,8 @@ const ButtonIconBase: React.FC<Props & Priority> = ({
 
 export const ButtonIcon = styled(ButtonIconBase)`
   ${box}
-  --local-shape-color: var(--woly-shape-default);
+
   --local-icon-size: var(--woly-line-height);
-  --local-icon-color: var(--woly-shape-text-default);
 
   display: flex;
   align-items: center;
@@ -41,8 +40,10 @@ export const ButtonIcon = styled(ButtonIconBase)`
   box-sizing: border-box;
   padding: 0;
 
-  background: var(--local-shape-color);
-  border: var(--woly-border-width) solid var(--local-shape-color);
+  border-style: solid;
+
+  border-width: var(--woly-border-width);
+
   border-radius: var(--woly-rounding);
   outline: none;
 
@@ -57,42 +58,59 @@ export const ButtonIcon = styled(ButtonIconBase)`
       width: 100%;
       height: 100%;
     }
+  }
 
-    svg > path {
+  &[data-weight='3'] {
+    --local-shape-color: var(--woly-shape-default);
+    --local-icon-color: var(--woly-shape-text-default);
+
+    background: var(--local-shape-color);
+    border-color: var(--local-shape-color);
+
+    [data-icon] > svg > path {
       fill: var(--local-icon-color);
     }
-
-    svg > g {
+    [data-icon] > svg > g {
       stroke: var(--local-icon-color);
     }
-  }
 
-  &:hover {
-    --local-shape-color: var(--woly-shape-hover);
-    --local-icon-color: var(--woly-shape-text-hover);
-  }
+    &:hover {
+      --local-shape-color: var(--woly-shape-hover);
+      --local-icon-color: var(--woly-shape-text-hover);
+    }
 
-  &:active {
-    --local-shape-color: var(--woly-shape-active);
-    --local-icon-color: var(--woly-shape-text-active);
-  }
+    &:active {
+      --local-shape-color: var(--woly-shape-active);
+      --local-icon-color: var(--woly-shape-text-active);
+    }
 
-  &:focus {
-    --local-shape-color: var(--woly-shape-active);
-    --local-icon-color: var(--woly-shape-text-active);
-    box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus-color);
-  }
+    &:focus {
+      --local-shape-color: var(--woly-shape-active);
+      --local-icon-color: var(--woly-shape-text-active);
+      box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus-color);
+    }
 
-  &:disabled {
-    pointer-events: none;
-    --local-shape-color: var(--woly-canvas-disabled);
-    --local-icon-color: var(--woly-shape-text-disabled);
+    &:disabled {
+      pointer-events: none;
+      --local-shape-color: var(--woly-canvas-disabled);
+      --local-icon-color: var(--woly-shape-text-disabled);
+    }
   }
 
-  &[data-outlined='true'] {
-    --local-shape-color: var(--woly-canvas-default);
+  &[data-weight='2'] {
+    --local-shape-color: transparent;
     --local-icon-color: var(--woly-shape-default);
 
+    background: var(--local-shape-color);
+    border-color: var(--local-icon-color);
+
+    [data-icon] > svg > path {
+      fill: var(--local-icon-color);
+    }
+    [data-icon] > svg > g {
+      stroke: var(--local-icon-color);
+    }
+
     &:hover {
       --local-shape-color: transparent;
       --local-icon-color: var(--woly-shape-hover);
@@ -115,4 +133,41 @@ export const ButtonIcon = styled(ButtonIconBase)`
       --local-icon-color: var(--woly-canvas-text-disabled);
     }
   }
+
+  &[data-weight='0'] {
+    --local-shape-color: transparent;
+    --local-icon-color: var(--woly-shape-default);
+
+    background: var(--local-shape-color);
+    border-color: var(--local-shape-color);
+
+    [data-icon] > svg > path {
+      fill: var(--local-icon-color);
+    }
+    [data-icon] > svg > g {
+      stroke: var(--local-icon-color);
+    }
+
+    &:hover {
+      --local-shape-color: transparent;
+      --local-icon-color: var(--woly-shape-hover);
+    }
+
+    &:active {
+      --local-shape-color: transparent;
+      --local-icon-color: var(--woly-canvas-active);
+    }
+
+    &:focus {
+      --local-shape-color: transparent;
+      --local-icon-color: var(--woly-canvas-active);
+      box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus-color);
+    }
+
+    &:disabled {
+      pointer-events: none;
+      --local-shape-color: transparent;
+      --local-icon-color: var(--woly-canvas-text-disabled);
+    }
+  }
 ` as StyledComponent<'button', Record<string, unknown>, Props & Priority>;
diff --git a/src/woly/atoms/button-icon/usage.mdx b/src/woly/atoms/button-icon/usage.mdx
index 7f555d80..77508a5e 100644
--- a/src/woly/atoms/button-icon/usage.mdx
+++ b/src/woly/atoms/button-icon/usage.mdx
@@ -14,13 +14,19 @@ Also, icons can be used as toggle buttons when they allow selection, or deselect
   <ButtonIcon
     icon={<IconSearch />}
     onClick={() => console.info('ButtonIcon clicked')}
-    variant="default"
+    priority="default"
+  />
+  <ButtonIcon
+    icon={<IconSearch />}
+    onClick={() => console.info('ButtonIcon clicked')}
+    priority="default"
+    weight="2"
   />
   <ButtonIcon
     icon={<IconSearch />}
     onClick={() => console.info('ButtonIcon clicked')}
-    variant="default"
-    outlined
+    priority="default"
+    weight="0"
   />
 </Playground>
 
@@ -62,8 +68,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 variants and can be styled with fill or outline.
-In case of choosing button-icon in tertiary variant with outline styles use the opposite background color to the text color of button-icon.
+Button-icon can be represented in primary, secondary or default priorities and can be styled by changing icon`s weight: fill, outline, transparent.
+In case of choosing button-icon in tertiary priority with outline styles use the opposite background color to the text color of button-icon.
 
 <Playground>
   <ButtonIcon
@@ -75,18 +81,18 @@ In case of choosing button-icon in tertiary variant with outline styles use the
     icon={<IconSearch />}
     onClick={() => console.info('ButtonIcon clicked')}
     priority="secondary"
-    outlined
+    weight="2"
   />
   <ButtonIcon
     icon={<IconSearch />}
     onClick={() => console.info('ButtonIcon clicked')}
     priority="primary"
+    weight="0"
   />
   <ButtonIcon
     icon={<IconSearch />}
     onClick={() => console.info('ButtonIcon clicked')}
     priority="primary"
-    outlined
   />
   <ButtonIcon
     icon={<IconSearch />}
@@ -97,12 +103,13 @@ In case of choosing button-icon in tertiary variant with outline styles use the
     icon={<IconSearch />}
     onClick={() => console.info('ButtonIcon clicked')}
     priority="default"
-    outlined
+    weight="2"
   />
   <ButtonIcon
     icon={<IconSearch />}
     onClick={() => console.info('ButtonIcon clicked')}
-    priority="tertiary"
+    priority="default"
+    weight="0"
   />
 </Playground>
 
@@ -112,10 +119,10 @@ In case of choosing button-icon in tertiary variant with outline styles use the
 
 ### Props
 
-| Name       | Type                                         | Default       | Description                                        |
-| ---------- | -------------------------------------------- | ------------- | -------------------------------------------------- |
-| `icon`     | `React.ReactNode`                            | `null`        | Set the icon component inside the button           |
-| `onClick`  | `React.MouseEventHandler<HTMLButtonElement>` |               | Callback when button clicked                       |
-| `outlined` | `boolean`                                    | `false`       | Change button-icon`s view from filled to outlined  |
-| `priority` | `string`                                     | `'secondary'` | Priority prop to style ButtonIcon component        |
-| `...`      | `HTMLButtonElement`                          | `{}`          | Other props are inherited from `HTMLButtonElement` |
+| Name       | Type                                         | Default       | Description                                                |
+| ---------- | -------------------------------------------- | ------------- | ---------------------------------------------------------- |
+| `icon`     | `React.ReactNode`                            | `null`        | Set the icon component inside the button                   |
+| `onClick`  | `React.MouseEventHandler<HTMLButtonElement>` |               | Callback when button clicked                               |
+| `priority` | `string`                                     | `'secondary'` | Priority prop to style ButtonIcon component                |
+| `weight`   | `string`                                     | `3`           | Set button-icon`s weight (ex.: fill, outline, transparent) |
+| `...`      | `HTMLButtonElement`                          | `{}`          | Other props are inherited from `HTMLButtonElement`         |

From 97ad7acb7a5b43a30cb14a0a549b15a04d80fe66 Mon Sep 17 00:00:00 2001
From: Ira <i.aristova@opends.tech>
Date: Tue, 29 Jun 2021 16:16:29 +0300
Subject: [PATCH 2/3] add goast styles

---
 src/lib/global.ts                    |   8 +-
 src/woly/atoms/button-icon/index.tsx |  45 +++++++++++
 src/woly/atoms/button-icon/usage.mdx | 113 +++++++++++++++++----------
 3 files changed, 122 insertions(+), 44 deletions(-)

diff --git a/src/lib/global.ts b/src/lib/global.ts
index 1547ad95..56efbaa1 100644
--- a/src/lib/global.ts
+++ b/src/lib/global.ts
@@ -158,16 +158,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/index.tsx b/src/woly/atoms/button-icon/index.tsx
index 226ea9ed..5baa7e30 100644
--- a/src/woly/atoms/button-icon/index.tsx
+++ b/src/woly/atoms/button-icon/index.tsx
@@ -134,6 +134,51 @@ export const ButtonIcon = styled(ButtonIconBase)`
     }
   }
 
+  &[data-weight='1'] {
+    --local-shape-color: transparent;
+    --local-icon-color: var(--woly-shape-text-default);
+    --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%);
+
+    background: var(--local-shape-color);
+    border-color: var(--local-border-color);
+    box-shadow: var(--local-shadow);
+
+    [data-icon] > svg > path {
+      fill: var(--local-icon-color);
+    }
+    [data-icon] > svg > g {
+      stroke: var(--local-icon-color);
+    }
+
+    &:hover {
+      --local-shape-color: transparent;
+      --local-icon-color: var(--woly-shape-text-hover);
+      --local-border-color: var(--woly-shape-text-hover);
+    }
+
+    &:active {
+      --local-shape-color: transparent;
+      --local-icon-color: var(--woly-shape-text-active);
+      --local-border-color: var(--woly-shape-text-active);
+    }
+
+    &:focus {
+      --local-shape-color: transparent;
+      --local-icon-color: var(--woly-shape-text-active);
+      --local-border-color: var(--woly-shape-text-active);
+      box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus-color);
+    }
+
+    &:disabled {
+      pointer-events: none;
+      --local-shape-color: var(--woly-shape-text-disabled);
+      --local-icon-color: var(--woly-shape-disabled);
+    }
+  }
+
   &[data-weight='0'] {
     --local-shape-color: transparent;
     --local-icon-color: var(--woly-shape-default);
diff --git a/src/woly/atoms/button-icon/usage.mdx b/src/woly/atoms/button-icon/usage.mdx
index 77508a5e..1cd93951 100644
--- a/src/woly/atoms/button-icon/usage.mdx
+++ b/src/woly/atoms/button-icon/usage.mdx
@@ -69,48 +69,81 @@ 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 or default priorities and can be styled by changing icon`s weight: fill, outline, transparent.
-In case of choosing button-icon in tertiary priority with outline styles use the opposite background color to the text color of button-icon.
+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
-    icon={<IconSearch />}
-    onClick={() => console.info('ButtonIcon clicked')}
-    priority="secondary"
-  />
-  <ButtonIcon
-    icon={<IconSearch />}
-    onClick={() => console.info('ButtonIcon clicked')}
-    priority="secondary"
-    weight="2"
-  />
-  <ButtonIcon
-    icon={<IconSearch />}
-    onClick={() => console.info('ButtonIcon clicked')}
-    priority="primary"
-    weight="0"
-  />
-  <ButtonIcon
-    icon={<IconSearch />}
-    onClick={() => console.info('ButtonIcon clicked')}
-    priority="primary"
-  />
-  <ButtonIcon
-    icon={<IconSearch />}
-    onClick={() => console.info('ButtonIcon clicked')}
-    priority="default"
-  />
-  <ButtonIcon
-    icon={<IconSearch />}
-    onClick={() => console.info('ButtonIcon clicked')}
-    priority="default"
-    weight="2"
-  />
-  <ButtonIcon
-    icon={<IconSearch />}
-    onClick={() => console.info('ButtonIcon clicked')}
-    priority="default"
-    weight="0"
-  />
+  <block.L
+    style={{
+      display: 'flex',
+      justifyContent: 'space-between',
+      padding: '100px',
+      width: '900px',
+      background: 'lightgrey',
+    }}
+  >
+    <ButtonIcon
+      icon={<IconSearch />}
+      onClick={() => console.info('ButtonIcon clicked')}
+      priority="primary"
+    />
+    <ButtonIcon
+      icon={<IconSearch />}
+      onClick={() => console.info('ButtonIcon clicked')}
+      priority="primary"
+      weight="2"
+    />
+    <ButtonIcon
+      icon={<IconSearch />}
+      onClick={() => console.info('ButtonIcon clicked')}
+      priority="primary"
+      weight="0"
+    />
+    <ButtonIcon
+      icon={<IconSearch />}
+      onClick={() => console.info('ButtonIcon clicked')}
+      priority="secondary"
+    />
+    <ButtonIcon
+      icon={<IconSearch />}
+      onClick={() => console.info('ButtonIcon clicked')}
+      priority="secondary"
+      weight="2"
+    />
+    <ButtonIcon
+      icon={<IconSearch />}
+      onClick={() => console.info('ButtonIcon clicked')}
+      priority="secondary"
+      weight="0"
+    />
+    <ButtonIcon
+      icon={<IconSearch />}
+      onClick={() => console.info('ButtonIcon clicked')}
+      priority="default"
+    />
+    <ButtonIcon
+      icon={<IconSearch />}
+      onClick={() => console.info('ButtonIcon clicked')}
+      priority="default"
+      weight="2"
+    />
+    <ButtonIcon
+      icon={<IconSearch />}
+      onClick={() => console.info('ButtonIcon clicked')}
+      priority="default"
+      weight="0"
+    />
+    <ButtonIcon
+      icon={<IconSearch />}
+      onClick={() => console.info('ButtonIcon clicked')}
+      weight="1"
+      priority="goast"
+    />
+    <ButtonIcon
+      icon={<IconSearch />}
+      onClick={() => console.info('ButtonIcon clicked')}
+      priority="goast"
+    />
+  </block.L>
 </Playground>
 
 ### Map of ButtonIcon

From 92f7f0d52616e9dab94f4e6176eecb5ae8141ac9 Mon Sep 17 00:00:00 2001
From: Ira <i.aristova@opends.tech>
Date: Mon, 5 Jul 2021 16:22:21 +0300
Subject: [PATCH 3/3] fix icon-button styles

---
 src/lib/global.ts                    |  2 +-
 src/woly/atoms/button-icon/index.tsx | 10 +++----
 src/woly/atoms/button-icon/usage.mdx | 39 ++++++++++++++++------------
 3 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/src/lib/global.ts b/src/lib/global.ts
index 56efbaa1..9ccad464 100644
--- a/src/lib/global.ts
+++ b/src/lib/global.ts
@@ -158,7 +158,7 @@ export const Global = styled.div`
     --woly-canvas-text-active: hsla(var(--bw-0), 1);
   }
 
-  [data-priority='goast'] {
+  [data-priority='white'] {
     --woly-shape-default: transparent;
     --woly-shape-disabled: hsla(var(--bw-200), 1);
     --woly-shape-hover: transparent;
diff --git a/src/woly/atoms/button-icon/index.tsx b/src/woly/atoms/button-icon/index.tsx
index 5baa7e30..1612ffc9 100644
--- a/src/woly/atoms/button-icon/index.tsx
+++ b/src/woly/atoms/button-icon/index.tsx
@@ -14,7 +14,7 @@ const ButtonIconBase: React.FC<Props & Priority> = ({
   icon,
   onClick,
   priority = 'secondary',
-  weight = '3',
+  weight = 'fill',
   ...p
 }) => (
   <button
@@ -60,7 +60,7 @@ export const ButtonIcon = styled(ButtonIconBase)`
     }
   }
 
-  &[data-weight='3'] {
+  &[data-weight='fill'] {
     --local-shape-color: var(--woly-shape-default);
     --local-icon-color: var(--woly-shape-text-default);
 
@@ -97,7 +97,7 @@ export const ButtonIcon = styled(ButtonIconBase)`
     }
   }
 
-  &[data-weight='2'] {
+  &[data-weight='outline'] {
     --local-shape-color: transparent;
     --local-icon-color: var(--woly-shape-default);
 
@@ -134,7 +134,7 @@ export const ButtonIcon = styled(ButtonIconBase)`
     }
   }
 
-  &[data-weight='1'] {
+  &[data-weight='goast'] {
     --local-shape-color: transparent;
     --local-icon-color: var(--woly-shape-text-default);
     --local-border-color: var(--woly-shape-text-default);
@@ -179,7 +179,7 @@ export const ButtonIcon = styled(ButtonIconBase)`
     }
   }
 
-  &[data-weight='0'] {
+  &[data-weight='transparent'] {
     --local-shape-color: transparent;
     --local-icon-color: var(--woly-shape-default);
 
diff --git a/src/woly/atoms/button-icon/usage.mdx b/src/woly/atoms/button-icon/usage.mdx
index 1cd93951..0d9675a1 100644
--- a/src/woly/atoms/button-icon/usage.mdx
+++ b/src/woly/atoms/button-icon/usage.mdx
@@ -15,18 +15,19 @@ Also, icons can be used as toggle buttons when they allow selection, or deselect
     icon={<IconSearch />}
     onClick={() => console.info('ButtonIcon clicked')}
     priority="default"
+    weight="fill"
   />
   <ButtonIcon
     icon={<IconSearch />}
     onClick={() => console.info('ButtonIcon clicked')}
     priority="default"
-    weight="2"
+    weight="outline"
   />
   <ButtonIcon
     icon={<IconSearch />}
     onClick={() => console.info('ButtonIcon clicked')}
     priority="default"
-    weight="0"
+    weight="transparent"
   />
 </Playground>
 
@@ -40,6 +41,7 @@ Button-icon's size can controlled by block-container and it`s width is equal to
       icon={<IconSearch />}
       onClick={() => console.info('ButtonIcon clicked')}
       priority="default"
+      weight="fill"
     />
   </block.N>
   <block.XS>
@@ -47,6 +49,7 @@ Button-icon's size can controlled by block-container and it`s width is equal to
       icon={<IconEyeOpened />}
       onClick={() => console.info('ButtonIcon clicked')}
       priority="primary"
+      weight="fill"
     />
   </block.XS>
   <block.S>
@@ -54,6 +57,7 @@ Button-icon's size can controlled by block-container and it`s width is equal to
       icon={<IconSearch />}
       onClick={() => console.info('ButtonIcon clicked')}
       priority="secondary"
+      weight="fill"
     />
   </block.S>
   <block.M>
@@ -62,6 +66,7 @@ Button-icon's size can controlled by block-container and it`s width is equal to
       onClick={() => console.info('ButtonIcon clicked')}
       priority="primary"
       disabled
+      weight="fill"
     />
   </block.M>
 </Playground>
@@ -69,7 +74,7 @@ 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 or default priorities and can be styled by changing icon`s weight: fill, outline, transparent.
-In case of choosing button-icon in goast priority with outline styles use the opposite background color to the text color of button-icon.
+In case of choosing button-icon in black-and-white priority with outline styles use the opposite background color to the text color of button-icon.
 
 <Playground>
   <block.L
@@ -85,71 +90,71 @@ In case of choosing button-icon in goast priority with outline styles use the op
       icon={<IconSearch />}
       onClick={() => console.info('ButtonIcon clicked')}
       priority="primary"
+      weight="fill"
     />
     <ButtonIcon
       icon={<IconSearch />}
       onClick={() => console.info('ButtonIcon clicked')}
       priority="primary"
-      weight="2"
+      weight="outline"
     />
     <ButtonIcon
       icon={<IconSearch />}
       onClick={() => console.info('ButtonIcon clicked')}
       priority="primary"
-      weight="0"
+      weight="transparent"
     />
     <ButtonIcon
       icon={<IconSearch />}
       onClick={() => console.info('ButtonIcon clicked')}
       priority="secondary"
+      weight="fill"
     />
     <ButtonIcon
       icon={<IconSearch />}
       onClick={() => console.info('ButtonIcon clicked')}
       priority="secondary"
-      weight="2"
+      weight="outline"
     />
     <ButtonIcon
       icon={<IconSearch />}
       onClick={() => console.info('ButtonIcon clicked')}
       priority="secondary"
-      weight="0"
+      weight="transparent"
     />
     <ButtonIcon
       icon={<IconSearch />}
       onClick={() => console.info('ButtonIcon clicked')}
       priority="default"
+      weight="fill"
     />
     <ButtonIcon
       icon={<IconSearch />}
       onClick={() => console.info('ButtonIcon clicked')}
       priority="default"
-      weight="2"
+      weight="outline"
     />
     <ButtonIcon
       icon={<IconSearch />}
       onClick={() => console.info('ButtonIcon clicked')}
       priority="default"
-      weight="0"
+      weight="transparent"
     />
     <ButtonIcon
       icon={<IconSearch />}
       onClick={() => console.info('ButtonIcon clicked')}
-      weight="1"
-      priority="goast"
+      weight="goast"
+      priority="white"
     />
     <ButtonIcon
       icon={<IconSearch />}
       onClick={() => console.info('ButtonIcon clicked')}
-      priority="goast"
+      priority="white"
+      weight="fill"
     />
   </block.L>
 </Playground>
 
-### Map of ButtonIcon
-
-<a href="/package/woly/component/button-icon-map">See map</a>
-
 ### Props
 
 | Name       | Type                                         | Default       | Description                                                |
@@ -157,5 +162,5 @@ In case of choosing button-icon in goast priority with outline styles use the op
 | `icon`     | `React.ReactNode`                            | `null`        | Set the icon component inside the button                   |
 | `onClick`  | `React.MouseEventHandler<HTMLButtonElement>` |               | Callback when button clicked                               |
 | `priority` | `string`                                     | `'secondary'` | Priority prop to style ButtonIcon component                |
-| `weight`   | `string`                                     | `3`           | Set button-icon`s weight (ex.: fill, outline, transparent) |
+| `weight`   | `string`                                     | `fill`        | Set button-icon`s weight (ex.: fill, outline, transparent) |
 | `...`      | `HTMLButtonElement`                          | `{}`          | Other props are inherited from `HTMLButtonElement`         |