Merge pull request #208 from CSSSR/release/core-22

Release: Core-22
CSSSR · Jun 8, 2021 · b2ff181 · b2ff181
2 parents de8d915 + b049d04
commit b2ff181
Show file tree

Hide file tree

Showing 11 changed files with 107 additions and 106 deletions.
diff --git a/packages/core-design/.storybook/styles/global.js b/packages/core-design/.storybook/styles/global.js
@@ -6,6 +6,10 @@ export const base = css`
     margin: 0;
     padding: 0;
   }
+  /* padding: 1rem; мешал при тестировании компонентов */
+  .sb-show-main.sb-main-padded {
+    padding: 0;
+  }
 
   html:not(.disable-smooth-scroll) {
     scroll-behavior: smooth;

diff --git a/...re-design/src/components/Footer/BottomLinksAndLanguages/BottomLinksAndLanguages.styles.ts b/...re-design/src/components/Footer/BottomLinksAndLanguages/BottomLinksAndLanguages.styles.ts
@@ -8,7 +8,6 @@ const base = (props: ThemeProps) => {
 
   return css`
     & {
-      margin-top: ${calcRem(11)};
       display: flex;
       flex-direction: row-reverse;
       justify-content: space-between;

diff --git a/packages/core-design/src/components/Footer/DoubleBottom/Addresses/Addresses.styles.ts b/packages/core-design/src/components/Footer/DoubleBottom/Addresses/Addresses.styles.ts
@@ -9,6 +9,7 @@ const base = (props: ThemeProps) => {
   return css`
     & {
       display: flex;
+      z-index: 2;
     }
 
     .title {
@@ -56,12 +57,13 @@ const base = (props: ThemeProps) => {
       }
 
       .phone {
-        margin-top: ${calcRem(8)};
+        font-weight: 300;
       }
 
+      .phone,
       .time,
       .status {
-        margin-top: ${calcRem(8)};
+        margin-top: ${calcRem(6)};
       }
 
       .address-item {
@@ -73,34 +75,29 @@ const base = (props: ThemeProps) => {
       }
 
       .address-item:nth-of-type(2) {
-        margin-right: ${calcRem(40)};
+        margin-right: ${calcRem(42)};
       }
 
       .address-item:nth-of-type(3) {
         margin-top: ${calcRem(86)};
-        margin-right: ${calcRem(72)};
+        margin-right: ${calcRem(83)};
       }
 
       .address-item:nth-of-type(3) .address {
-        margin-top: ${calcRem(0)};
+        margin-top: 0;
       }
 
       .address,
-      .phone,
-      .status,
-      .time {
+      .phone {
+        font-weight: 400;
         font-size: ${calcRem(14)};
         line-height: ${calcRem(22)};
       }
-    }
-
-    ${desktop.s} {
-      .address-item:not(:last-of-type) {
-        margin-right: ${calcRem(40)};
-      }
 
-      .address-item:first-of-type {
-        margin-right: ${calcRem(50)};
+      .status,
+      .time {
+        font-size: ${calcRem(14)};
+        line-height: ${calcRem(24)};
       }
     }
 

diff --git a/packages/core-design/src/components/Footer/DoubleBottom/DoubleBottom.styles.ts b/packages/core-design/src/components/Footer/DoubleBottom/DoubleBottom.styles.ts
@@ -19,10 +19,14 @@ const base = (props: ThemeProps) => {
 
     .map-wrapper {
       margin-left: auto;
+      position: relative;
+      z-index: 1;
     }
 
     .map {
-      position: relative;
+      position: absolute;
+      top: 0;
+      right: 0;
     }
 
     .picture {
@@ -77,86 +81,59 @@ const base = (props: ThemeProps) => {
     }
 
     ${desktop.all} {
-      .picture {
+      & {
+        padding-right: ${calcRem(52)};
+      }
+
+      .map {
         width: 492px;
         height: 280px;
       }
-    }
 
-    ${desktop.l} {
-      & {
-        padding-right: ${calcRem(42)};
+      .picture {
+        width: 492px;
+        height: 280px;
       }
 
       .pin_singapore {
-        top: 41%;
+        top: 40%;
         right: 14.5%;
       }
 
       .pin_estonia {
-        top: 21%;
+        top: 15.7%;
         right: 36%;
       }
 
       .pin_russia,
       .pin_russia_2 {
-        top: 26%;
-        right: 30%;
+        top: 22%;
+        right: 31.7%;
       }
     }
 
     ${desktop.m} {
       & {
         padding-top: ${calcRem(59)};
-        padding-right: ${calcRem(48)};
-      }
-
-      .pin_singapore {
-        top: 42%;
-        right: 15%;
-      }
-
-      .pin_estonia {
-        top: 20%;
-        right: 36%;
-      }
-
-      .pin_russia,
-      .pin_russia_2 {
-        top: 25%;
-        right: 30%;
-      }
-    }
-
-    ${desktop.s} {
-      .pin_singapore {
-        top: 41%;
-        right: 15%;
-      }
-
-      .pin_estonia {
-        top: 16%;
-        right: 36%;
-      }
-
-      .pin_russia,
-      .pin_russia_2 {
-        top: 23%;
-        right: 31%;
       }
     }
 
     ${tablet.all} {
       & {
         padding-top: ${calcRem(41)};
-        padding-right: ${calcRem(21)};
+        padding-right: ${calcRem(32)};
         padding-bottom: ${calcRem(29)};
         padding-left: ${calcRem(30)};
       }
 
+      .map {
+        width: ${calcRem(424)};
+        height: ${calcRem(242)};
+      }
+
       .picture {
-        width: ${calcRem(386)};
-        height: ${calcRem(225)};
+        width: ${calcRem(424)};
+        height: ${calcRem(242)};
       }
 
       .pin_singapore {
@@ -185,6 +162,10 @@ const base = (props: ThemeProps) => {
         flex-direction: column;
       }
 
+      .map {
+        position: relative;
+      }
+
       .picture {
         margin-top: ${calcRem(22)};
         width: ${calcRem(328)};

diff --git a/packages/core-design/src/components/Footer/Footer.stories.tsx b/packages/core-design/src/components/Footer/Footer.stories.tsx
@@ -7,11 +7,12 @@ storiesOf('Footer', module)
   .addDecorator(withKnobs)
   .add('Footer', () => {
     const knobs = {
-      preset: select('Preset', ['defaultEn', 'defaultRu', ''], 'defaultEn'),
+      preset: select('Preset', ['defaultEn', 'defaultRu'], 'defaultEn'),
       isIe11: boolean('Is IE11', false),
       isMobile: boolean('Is Mobile', false),
       actionPhrase: text('Action phrase', ''),
       email: text('Email', ''),
+      baseNavUrl: text('baseNavUrl', 'https://csssr.com'),
     }
 
     const videoKnobs = {

diff --git a/packages/core-design/src/components/Footer/Footer.styles.ts b/packages/core-design/src/components/Footer/Footer.styles.ts
@@ -8,7 +8,6 @@ const base = (props: ThemeProps) => {
 
   return css`
     & {
-      background-color: red;
       position: relative;
       margin-bottom: ${calcRem(344)};
       padding-top: ${calcRem(32)};
@@ -17,9 +16,9 @@ const base = (props: ThemeProps) => {
       padding-left: ${calcRem(32)};
       display: flex;
       flex-direction: column;
-      height: ${calcRem(344)};
+      height: ${calcRem(358)};
       background-color: white;
-      box-shadow: 0px 8px 12px rgba(50, 60, 72, 0.15);
+      box-shadow: 0px 12px 12px rgba(50, 60, 72, 0.15);
       overflow: hidden;
     }
 
@@ -51,7 +50,6 @@ const base = (props: ThemeProps) => {
     .email-container {
       display: flex;
       align-items: baseline;
-      margin-top: ${calcRem(16)};
     }
 
     .email-wrapper {
@@ -127,14 +125,24 @@ const base = (props: ThemeProps) => {
       }
     }
 
+    ${desktop.all} {
+      .bottom-content {
+        margin-top: 16px;
+      }
+    }
+
     ${desktop.s} {
       padding-right: ${calcRem(52)};
     }
 
     ${tablet.all} {
       & {
         margin-bottom: ${calcRem(288)};
-        padding-right: ${calcRem(41)};
+        padding-right: ${calcRem(32)};
+      }
+
+      .bottom-content {
+        margin-top: ${calcRem(16)};
       }
     }
 
@@ -195,6 +203,10 @@ const base = (props: ThemeProps) => {
         margin-right: ${calcRem(32)};
       }
 
+      .email {
+        margin-top: 0;
+      }
+
       .copy-message {
         bottom: ${calcRem(-18)};
         left: 50%;

diff --git a/packages/core-design/src/components/Footer/Footer.tsx b/packages/core-design/src/components/Footer/Footer.tsx
@@ -37,6 +37,7 @@ const Footer: React.FC<Props> = ({
   nav: navFromProps,
   addresses: addressesFromProps,
   preset,
+  baseNavUrl = '',
 }) => {
   const [isMessageShown, setIsMessageShown] = useState(false)
   const [IsDoubleBottomVisible, setDoubleBottomVisibility] = useState(false)
@@ -116,7 +117,7 @@ const Footer: React.FC<Props> = ({
   const privacyPolicyLink = privacyPolicyLinkFromProps || presets[preset]?.privacyPolicyLink
   const cookiesPolicyLink = cookiesPolicyLinkFromProps || presets[preset]?.cookiesPolicyLink
   const socialLinks = socialLinksFromProps || presets[preset]?.socialLinks
-  const nav = navFromProps || presets[preset]?.nav
+  const nav = navFromProps || presets[preset]?.nav(baseNavUrl)
   const addresses = addressesFromProps || presets[preset]?.addresses
 
   const LinkComponent = logo.linkComponent || 'a'

diff --git a/packages/core-design/src/components/Footer/Nav/Nav.styles.ts b/packages/core-design/src/components/Footer/Nav/Nav.styles.ts
@@ -34,14 +34,14 @@ const base = (props: Props & ThemeProps) => {
 
     ${desktop.m} {
       & {
-        width: ${navSectionsNumber === 4 ? '622px' : '752px'};
+        width: ${navSectionsNumber === 4 ? '622px' : '741px'};
       }
     }
 
     ${desktop.s} {
       & {
         margin-right: 50px;
-        width: ${navSectionsNumber === 4 ? '655px' : '785px'};
+        width: ${navSectionsNumber === 4 ? '655px' : '781px'};
       }
     }
 

diff --git a/packages/core-design/src/components/Footer/SocialLinks/SocialLinks.styles.ts b/packages/core-design/src/components/Footer/SocialLinks/SocialLinks.styles.ts
@@ -49,10 +49,10 @@ const base = (props: ThemeProps) => {
     }
 
     ${mobile.all} {
-      margin-top: ${calcRem(41)};
+      margin-top: ${calcRem(39)};
       margin-left: auto;
       margin-right: auto;
-      max-width: ${calcRem(168)};
+      max-width: ${calcRem(194)};
       flex-wrap: wrap;
 
       li {

diff --git a/packages/core-design/src/components/Footer/types.ts b/packages/core-design/src/components/Footer/types.ts
@@ -77,4 +77,5 @@ export interface FooterProps {
   addresses?: AddressesProps[]
   nav?: NavProps[]
   preset?: '' | 'defaultEn' | 'defaultRu'
+  baseNavUrl?: string
 }