Merge pull request #214 from CSSSR/release/core-21-45

Release: Core-21-45
CSSSR · Nov 16, 2021 · e1ddd0a · e1ddd0a
2 parents 0565004 + 6257971
commit e1ddd0a
Show file tree

Hide file tree

Showing 14 changed files with 79 additions and 106 deletions.
diff --git a/packages/core-design/src/components/CookiesPopup/CookiesPopup.styles.ts b/packages/core-design/src/components/CookiesPopup/CookiesPopup.styles.ts
@@ -52,22 +52,13 @@ const base = ({ media }) => css`
     -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
   }
 
-  .cookies-text::after {
+  cookies-ready {
     content: '';
     position: absolute;
     right: -172px;
     bottom: ${calcRem(-8)};
     width: ${calcRem(62)};
     height: ${calcRem(53)};
-    /*  В качестве временного решения тут будет прямая ссылка на изображение с com
-
-        TODO: когда везде будет использоваться кукисы с core-design, будем раздавать изображения
-        из core-design
-    */
-    background-image: url('https://csssr.com/static/icons/cookies-banner/cookie_ready.svg');
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center;
   }
 
   .cookies-link {
@@ -100,7 +91,7 @@ const base = ({ media }) => css`
       max-width: ${calcRem(790)};
     }
 
-    .cookies-text::after {
+    cookies-ready {
       bottom: -0.5rem;
     }
   }
@@ -110,7 +101,7 @@ const base = ({ media }) => css`
       max-width: ${calcRem(692)};
     }
 
-    .cookies-text::after {
+    cookies-ready {
       right: ${calcRem(-133)};
     }
 
@@ -133,7 +124,7 @@ const base = ({ media }) => css`
       padding-bottom: ${calcRem(16)};
     }
 
-    .cookies-text::after {
+    cookies-ready {
       display: none;
     }
 

diff --git a/packages/core-design/src/components/CookiesPopup/CookiesPopup.tsx b/packages/core-design/src/components/CookiesPopup/CookiesPopup.tsx
@@ -10,6 +10,7 @@ import presets from '../../data/cookiesPopupPresets'
 
 /* tslint:disable */
 const CrossIcon = require('../../static/icons/cookiesPopup/cross_white.svg')
+const CookiesReady = require('../../static/icons/cookiesPopup/cookie_ready.svg')
 /* tslint:enable */
 
 const COOKIES_POLICY_ALERT_HIDDEN = 'hidden'
@@ -73,6 +74,8 @@ const CookiesPopup: React.FC<Props> = ({
 
       <div className="wrap">
         <Text type="regular" size="m" className="cookies-text">
+          <CookiesReady className="cookies-ready" />
+
           <span dangerouslySetInnerHTML={{ __html: text }} />
 
           {links.map((link) => (

diff --git a/...ges/core-design/src/components/Footer/BottomLinksAndLanguages/BottomLinksAndLanguages.tsx b/...ges/core-design/src/components/Footer/BottomLinksAndLanguages/BottomLinksAndLanguages.tsx
@@ -48,7 +48,7 @@ const PrivacyAndLanguageLinks: React.FC<Props> = ({
   return (
     <ul className={className}>
       <li>
-        <Link className="link lng-link" href={languageLink.href}>
+        <Link className="link lng-link" href={languageLink.href} data-testid="Footer:link.language-link">
           <Text
             className="link-text"
             dangerouslySetInnerHTML={{ __html: languageLink.text }}

diff --git a/packages/core-design/src/components/Footer/DoubleBottom/Addresses/Addresses.tsx b/packages/core-design/src/components/Footer/DoubleBottom/Addresses/Addresses.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import styled from '@emotion/styled'
 import styles from './Addresses.styles'
 import { ThemeProps } from '../../../../themes/types'
@@ -8,6 +8,7 @@ import Heading from '../../../Heading'
 import Text from '../../../Text'
 import Link from '../../../Link'
 import ClickOutside from '../../../ClickOutside'
+import {Time} from './Time'
 
 export interface Props {
   className?: string
@@ -18,16 +19,6 @@ export interface Props {
 }
 
 const Addresses: React.FC<Props> = ({ className, isMobile, addresses, setHoveredAddress }) => {
-  const [time, setTime] = useState(new Date())
-
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      setTime(new Date())
-    }, 1000)
-
-    return () => clearTimeout(timeout)
-  })
-
   const handleResetHoveredAddress = () => setHoveredAddress(null)
 
   const handleMouseOver = (address: string) => (event: any) => {
@@ -98,19 +89,13 @@ const Addresses: React.FC<Props> = ({ className, isMobile, addresses, setHovered
               />
             )}
 
-            <Text
+            <Time
               className="time"
-              type="regular"
-              size={textSize}
-              data-testid={`Footer:text:address.time.${id}`}
-            >
-              {time.toLocaleTimeString([], {
-                timeZone,
-                hour: '2-digit',
-                minute: '2-digit',
-              })}{' '}
-              {/* show only hours and minutes, use options with the default locale - use an empty array, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString */}
-            </Text>
+              timeZone={timeZone}
+              textSize={textSize}
+              id={id}
+            />
+
           </div>
         ))}
       </div>

diff --git a/packages/core-design/src/components/Footer/DoubleBottom/Addresses/Time/Time.tsx b/packages/core-design/src/components/Footer/DoubleBottom/Addresses/Time/Time.tsx
@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from 'react'
+import Text from '../../../../Text'
+
+export interface Props {
+  id: string
+  textSize: 'm'|'s'
+  className?: string
+  timeZone: string
+}
+
+export const Time: React.FC<Props> = ({ className, id, textSize, timeZone}) => {
+  const [time, setTime] = useState(new Date())
+  // Обновляем время раз в минуту
+  const DELAY_TIME_UPDATE = 60000
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setTime(new Date())
+    }, DELAY_TIME_UPDATE)
+
+    return () => clearTimeout(timeout)
+  })
+
+  const getTime = () => {
+    /* show only hours and minutes, use options with the default locale - use an empty array, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString */
+    return time.toLocaleTimeString([], {
+      timeZone,
+      hour: '2-digit',
+      minute: '2-digit',
+    })
+}
+
+  return (
+    <Text
+      className={className}
+      type="regular"
+      size={textSize}
+      data-testid={`Footer:text:address.time.${id}`}
+    >
+      {getTime()}
+    </Text>
+  )
+}
diff --git a/packages/core-design/src/components/Footer/DoubleBottom/Addresses/Time/index.ts b/packages/core-design/src/components/Footer/DoubleBottom/Addresses/Time/index.ts
@@ -0,0 +1 @@
+export * from './Time'
diff --git a/packages/core-design/src/components/Footer/DoubleBottom/DoubleBottom.styles.ts b/packages/core-design/src/components/Footer/DoubleBottom/DoubleBottom.styles.ts
@@ -38,16 +38,6 @@ const base = (props: ThemeProps) => {
       display: block;
       width: 20px;
       height: 26px;
-      /*  В качестве временного решения тут будет прямая ссылка на изображение с com
-
-          TODO: когда везде будет использоваться футер с core-design, будем раздавать изображения
-          из core-design
-      */
-      background-image: url('https://csssr.com/_next/static/icons/footer/pin-926628e5.svg');
-      background-repeat: no-repeat;
-      background-color: transparent;
-      background-size: 100%;
-      background-position: 100%;
 
       &_russia,
       &_russia_2 {
@@ -65,12 +55,6 @@ const base = (props: ThemeProps) => {
         right: 117px;
         width: 38px;
         height: 48px;
-        /*  В качестве временного решения тут будет прямая ссылка на изображение с com
-
-            TODO: когда везде будет использоваться футер с core-design, будем раздавать изображения
-            из core-design
-        */
-        background-image: url('https://csssr.com/_next/static/icons/footer/pin_singapore-3dbbb457.svg');
       }
 
       &_hovered {
@@ -83,6 +67,7 @@ const base = (props: ThemeProps) => {
     ${desktop.all} {
       & {
         padding-right: ${calcRem(52)};
+        padding-bottom: ${calcRem(71)};
       }
 
       .map {
@@ -122,7 +107,7 @@ const base = (props: ThemeProps) => {
       & {
         padding-top: ${calcRem(41)};
         padding-right: ${calcRem(32)};
-        padding-bottom: ${calcRem(29)};
+        padding-bottom: ${calcRem(48)};
         padding-left: ${calcRem(30)};
       }
 

diff --git a/packages/core-design/src/components/Footer/DoubleBottom/DoubleBottom.tsx b/packages/core-design/src/components/Footer/DoubleBottom/DoubleBottom.tsx
@@ -5,6 +5,11 @@ import styled from '@emotion/styled'
 import styles from './DoubleBottom.styles'
 import { ThemeProps } from '../../../themes/types'
 
+/* tslint:disable */
+const PinSingapore = require('../../../static/icons/footer/pin_singapore.svg')
+const Pin = require('../../../static/icons/footer/pin.svg')
+/* tslint:enable */
+
 import Addresses from './Addresses'
 
 const pins = [
@@ -50,7 +55,9 @@ const DoubleBottom: React.FC<Props> = ({ className, isMobile, addresses }) => {
               className={cn(`pin pin_${id}`, {
                 pin_hovered: id === hoveredAddress,
               })}
-            />
+            >
+              {id === 'singapore' ? <PinSingapore /> : <Pin />}
+            </span>
           ))}
         </div>
       </div>

diff --git a/packages/core-design/src/components/Footer/Footer.stories.tsx b/packages/core-design/src/components/Footer/Footer.stories.tsx
@@ -16,15 +16,9 @@ storiesOf('Footer', module)
       baseNavUrl: text('baseNavUrl', 'https://csssr.com'),
     }
 
-    const videoKnobs = {
-      src: text('Video src', require(`../../static/video/camp.mp4`).default),
-      type: text('Video type', 'video/mp4'),
-      errorText: text('Video error text', 'This browser does not support downloading video files'),
-    }
-
     return (
       <div style={{ marginTop: 'auto' }}>
-        <Footer {...knobs} video={videoKnobs} />
+        <Footer {...knobs} />
         <Global
           styles={css`
             html,

diff --git a/packages/core-design/src/components/Footer/Footer.styles.ts b/packages/core-design/src/components/Footer/Footer.styles.ts
@@ -35,18 +35,6 @@ const base = (props: ThemeProps) => {
       transition: color 100ms ease-out;
     }
 
-    .video {
-      position: absolute;
-      top: 50%;
-      left: 0;
-      z-index: 1;
-      width: 100%;
-      opacity: 0;
-      transform: translateY(-50%);
-      transition: opacity 100ms ease-out;
-      pointer-events: none;
-    }
-
     .email-container {
       display: flex;
       align-items: baseline;
@@ -112,14 +100,6 @@ const base = (props: ThemeProps) => {
     }
 
     @media (pointer: fine) {
-      .logo:hover {
-        color: white;
-      }
-
-      .logo:hover ~ .video {
-        opacity: 1;
-      }
-
       .copy-icon-button:hover {
         color: ${colors.primary.darken15};
       }

diff --git a/packages/core-design/src/components/Footer/Footer.tsx b/packages/core-design/src/components/Footer/Footer.tsx
@@ -24,7 +24,6 @@ const Footer: React.FC<Props> = ({
   className,
   isMobile: isMobileValueFromProps,
   logo: logoFromProps,
-  video: videoFromProps,
   email: emailFromProps,
   actionPhrase: actionPhraseFromProps,
   allianceLink: allianceLinkFromProps,
@@ -108,7 +107,6 @@ const Footer: React.FC<Props> = ({
   }
 
   const logo = logoFromProps || presets[preset]?.logo
-  const video = videoFromProps || presets[preset]?.video
   const email = emailFromProps || presets[preset]?.email
   const actionPhrase = actionPhraseFromProps || presets[preset]?.actionPhrase
   const allianceLink = allianceLinkFromProps || presets[preset]?.allianceLink
@@ -129,14 +127,6 @@ const Footer: React.FC<Props> = ({
             <Logo />
           </LinkComponent>
 
-          {!isMobile && video.src && (
-            <video className="video" autoPlay loop muted>
-              <source src={video.src} type={video.type} />
-
-              <p>{video.errorText}</p>
-            </video>
-          )}
-
           <Heading
             as="p"
             className="action-phrase"
@@ -195,6 +185,7 @@ const Footer: React.FC<Props> = ({
 
         {nav && <Nav nav={nav} />}
       </div>
+
       <div className="bottom-content">
         <BottomLinksAndLanguages
           allianceLink={allianceLink}

diff --git a/packages/core-design/src/data/footerLinks.ts b/packages/core-design/src/data/footerLinks.ts
@@ -86,7 +86,7 @@ export const nav = {
       links: [
         {
           id: 'projects',
-          title: 'Our projects',
+          title: 'Our Projects',
           href: `${baseNavUrl}/en/projects`,
         },
         {
@@ -101,19 +101,19 @@ export const nav = {
         },
         {
           id: 'eCommerce',
-          title: 'E-Commerce',
+          title: 'E-commerce',
           href: `${baseNavUrl}/en/industry/ecommerce`,
         },
         {
           id: 'mediaAndMarketing',
-          title: 'Media and marketing',
+          title: 'Media and Marketing',
           href: `${baseNavUrl}/en/industry/media-and-marketing`,
         },
       ],
     },
     {
       id: 'howWeWork',
-      title: 'How we work',
+      title: 'How We Work',
       links: [
         {
           id: 'technologies',
@@ -127,7 +127,7 @@ export const nav = {
         },
         {
           id: 'coreValues',
-          title: 'Core values',
+          title: 'Core Values',
           href: `${baseNavUrl}/en/core-values`,
         },
       ],
@@ -138,7 +138,7 @@ export const nav = {
       links: [
         {
           id: 'lms',
-          title: 'Modular LMS system',
+          title: 'Modular LMS System',
           href: `${baseNavUrl}/en/products/lms`,
         },
         {
@@ -173,7 +173,7 @@ export const nav = {
   ru: (baseNavUrl) => [
     {
       id: 'services',
-      title: 'Сервисы',
+      title: 'Услуги',
       links: [
         {
           id: 'web-development',