From 8978c072a7b5b904fdf0798ac2936cf4deaaecf2 Mon Sep 17 00:00:00 2001
From: Tatiana Cherednichenko <tatinacher@gmail.com>
Date: Mon, 26 Apr 2021 16:26:50 +0300
Subject: [PATCH 1/2] fix: add styled-components type

---
 src/ui/atoms/header-panel/index.tsx | 6 +++---
 src/ui/atoms/header-panel/usage.mdx | 5 ++++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/ui/atoms/header-panel/index.tsx b/src/ui/atoms/header-panel/index.tsx
index cd0dea34..dc3f2fba 100644
--- a/src/ui/atoms/header-panel/index.tsx
+++ b/src/ui/atoms/header-panel/index.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { StyledComponent } from 'styled-components';
 import { Variant } from 'lib/types';
 
 const map = (properties: Variant) => ({
@@ -18,11 +18,11 @@ export const HeaderPanel = styled.div.attrs(map)`
   );
 
   --local-box-shadow: 3px 3px 9px rgba(57, 57, 57, 0.12);
-  
+
   padding: var(--local-vertical) var(--local-horizontal);
 
   background-color: var(--woly-background);
   border: var(--woly-border-width) solid var(--woly-background);
   border-radius: var(--woly-rounding);
   box-shadow: var(--local-box-shadow);
-`;
+` as StyledComponent<'div', Record<string, unknown>, Variant>;
diff --git a/src/ui/atoms/header-panel/usage.mdx b/src/ui/atoms/header-panel/usage.mdx
index a21125df..18b5b483 100644
--- a/src/ui/atoms/header-panel/usage.mdx
+++ b/src/ui/atoms/header-panel/usage.mdx
@@ -10,12 +10,15 @@ import { CloseIcon } from 'icons';
 
 `HeaderPanel` is a navigation component that displays information and actions relating to the current screen.
 
+### Example
+
 <Playground>
   <div style={{ marginBottom: '10px' }}>
     <HeaderPanel>Hello! It`s a HeaderPanel</HeaderPanel>
   </div>
 </Playground>
-### Example
+
+### Menu example
 
 <Playground>
   <State initial={false} change={(i) => !i}>

From c2146f53ecbc0604f8721466a38c2a95362644c5 Mon Sep 17 00:00:00 2001
From: Tatiana Cherednichenko <tatinacher@gmail.com>
Date: Mon, 26 Apr 2021 16:29:35 +0300
Subject: [PATCH 2/2] fix: add css property for shadow

---
 src/lib/box-styles.tsx              | 3 ++-
 src/ui/atoms/header-panel/index.tsx | 4 +---
 src/ui/atoms/tooltip/index.tsx      | 2 +-
 src/ui/molecules/select/index.tsx   | 2 +-
 4 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/lib/box-styles.tsx b/src/lib/box-styles.tsx
index 64f0c675..fec9208c 100644
--- a/src/lib/box-styles.tsx
+++ b/src/lib/box-styles.tsx
@@ -19,6 +19,7 @@ export const Global = styled.div`
   --woly-border-width: 1.5px;
   --woly-rounding: 4px;
   --woly-font-size: 15px;
+  --woly-shadow: 3px 3px 9px rgba(57, 57, 57, 0.12);
 
   --woly-const-m: 6px;
   --woly-main-level: 3;
@@ -26,7 +27,7 @@ export const Global = styled.div`
   --woly-neutral: var(--palette-snow-500);
   --woly-focus: var(--palette-lavender-500);
   --woly-background: var(--palette-snow-0);
-  
+
   [data-variant='primary'] {
     --woly-shape-default: var(--palette-lavender-300);
     --woly-shape-disabled: var(--palette-snow-300);
diff --git a/src/ui/atoms/header-panel/index.tsx b/src/ui/atoms/header-panel/index.tsx
index dc3f2fba..b02ad0d7 100644
--- a/src/ui/atoms/header-panel/index.tsx
+++ b/src/ui/atoms/header-panel/index.tsx
@@ -17,12 +17,10 @@ export const HeaderPanel = styled.div.attrs(map)`
     var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--local-vertical)
   );
 
-  --local-box-shadow: 3px 3px 9px rgba(57, 57, 57, 0.12);
-
   padding: var(--local-vertical) var(--local-horizontal);
 
   background-color: var(--woly-background);
   border: var(--woly-border-width) solid var(--woly-background);
   border-radius: var(--woly-rounding);
-  box-shadow: var(--local-box-shadow);
+  box-shadow: var(--woly-shadow);
 ` as StyledComponent<'div', Record<string, unknown>, Variant>;
diff --git a/src/ui/atoms/tooltip/index.tsx b/src/ui/atoms/tooltip/index.tsx
index a432fb89..00f6acad 100644
--- a/src/ui/atoms/tooltip/index.tsx
+++ b/src/ui/atoms/tooltip/index.tsx
@@ -95,7 +95,7 @@ export const Tooltip = styled(TooltipBase)`
     z-index: 1;
     opacity: 0;
     cursor: pointer;
-    box-shadow: 3px 3px 9px rgba(57, 57, 57, 0.12);
+    box-shadow: var(--woly-shadow);
     width: max-content;
     min-width: 112px;
     max-width: 240px;
diff --git a/src/ui/molecules/select/index.tsx b/src/ui/molecules/select/index.tsx
index a51ab618..f83f21f7 100644
--- a/src/ui/molecules/select/index.tsx
+++ b/src/ui/molecules/select/index.tsx
@@ -186,7 +186,7 @@ export const Select = styled(SelectBase)`
     padding: 0;
     z-index: 1;
     margin-top: 6px;
-    box-shadow: 3px 3px 9px rgba(57, 57, 57, 0.12);
+    box-shadow: var(--woly-shadow);
   }
   ul[data-visible='true'] {
     display: flex;