Merge branch 'master' of github.com:csssr-dreamteam/core-design

CONTRIBUTION.md

@@ -69,16 +69,15 @@ lerna может автоматически определить, какая в
 Для этого нужно:
 
 1. Слить всё новое в ветку `master`;
-2. Запустить команду: `$ lerna version --conventional-commits --no-changelog --yes`;
+2. Запустить команду: `yarn lerna version --conventional-commits --no-changelog --yes`;
 
 Lerna внесет изменения в `package.json` файлы пакетов (поднимет версии), закоммитит их,
 выставит теги и сделает push в удаленный репозиторий.
 
 Следующим этапом нужно опубликовать пакеты:
 
-1. Нужно быть залогиненым в npm с привязкой к scope, для этого нужно выполнить: `$ npm login --scope=@csssr`
-   (если что токен есть в Депломате);
-2. Запустить команду: `$ lerna publish from-git --yes --registry https://registry.npmjs.org/`
+1. Нужно быть залогиненым в github packages с привязкой к scope, для этого нужно выполнить: `npm login --registry=https://npm.pkg.github.com --scope=@csssr`;
+2. Запустить команду: `yarn lerna publish from-git --yes --registry https://npm.pkg.github.com/`
 
 Новые версии пакетов должны быть опубликованы. Можно быстро проверить результат публикации:
 

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 CSSSR Pte. Ltd. registered in Singapore under unique entity number 201909633C
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/core-design/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@csssr/core-design",
-  "version": "5.4.1",
+  "version": "5.6.0",
   "main": "lib/index.js",
   "license": "MIT",
   "types": "lib/typings",
@@ -10,7 +10,7 @@
     "build:compile": "babel --out-dir ./lib -x .tsx,.ts src",
     "build:typings": "tsc --emitDeclarationOnly",
     "clean": "cleandir ./lib",
-    "copy:assets": "cpx './src/**/*.{png,jpg,jpeg,svg,woff,woff2,eot,ttf,otf}' lib",
+    "copy:assets": "cpx './src/**/*.{png,jpg,jpeg,svg}' lib",
     "dev": "yarn run clean && concurrently 'yarn run build:typings --watch' 'yarn run build:compile --watch' 'yarn run copy:assets --watch'",
     "lint": "tslint --project ./tsconfig.json --exclude ./__tests__/**/*.{ts,tsx} ./src/**/*.{ts,tsx}",
     "precommit": "lint-staged",
@@ -38,8 +38,8 @@
     "@storybook/addon-knobs": "^5.0.10",
     "@storybook/react": "^5.0.9",
     "@types/classnames": "^2.2.10",
-    "@types/color": "^3.0.0",
-    "@types/ramda": "^0.26.15",
+    "@types/color": "^3.0.1",
+    "@types/ramda": "^0.27.6",
     "@types/storybook__addon-actions": "^3.4.2",
     "@types/storybook__addon-knobs": "^5.0.0",
     "@types/storybook__react": "^4.0.1",
@@ -55,7 +55,7 @@
     "react-dom": "^16.13.1",
     "tslint": "^5.16.0",
     "tslint-config-prettier": "^1.18.0",
-    "typescript": "^3.4.5",
+    "typescript": "^3.9.5",
     "utility-types": "^3.7.0"
   },
   "publishConfig": {

packages/core-design/src/components/ErrorPage/ErrorPage.stories.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { storiesOf } from '@storybook/react'
+import ErrorPage from './ErrorPage'
+import { PictureForAllResolutions } from '../PictureForAllResolutions'
+
+const Img = ({ className }) => {
+  const image = {
+    pathToImagesFolder: require.context('../../static/images/imagesForStories'),
+    imageName: 'ultramarine',
+    alt: 'Сержант Ультрамаринов',
+  }
+
+  return <PictureForAllResolutions className={className} image={image} />
+}
+
+storiesOf('ErrorPage', module).add('ErrorPage', () => {
+  return (
+    <ErrorPage
+      title="Ошибка на сервере"
+      subTitle="Что-то пошло не так. Попробуйте еще раз или свяжитесь с нами по почте <a href='mailto:[email protected]'>[email protected]</a>"
+      Img={Img}
+    />
+  )
+})

packages/core-design/src/components/ErrorPage/ErrorPage.styles.ts

@@ -0,0 +1,149 @@
+import { css } from '@emotion/core'
+
+const base = css`
+  .header {
+    padding-bottom: 4rem;
+  }
+
+  .logo {
+    grid-column: 2 / span 2;
+    margin-top: 5.25rem;
+    width: 11.5rem;
+    height: 2.875rem;
+    color: black;
+  }
+
+  .title {
+    margin-top: 3.875rem;
+    grid-column: 2 / span 7;
+    grid-row: 1;
+  }
+
+  .subtitle {
+    grid-column: 9 / span 4;
+    margin-top: -3.1875rem;
+    grid-row: 2;
+  }
+
+  .link {
+    color: #345eff;
+  }
+
+  .code-wrapper {
+    grid-column: 2 / span 6;
+    grid-row: 2 / span 10;
+    margin-top: 2.5rem;
+    width: calc(100% + 1rem);
+    height: 25rem;
+  }
+
+  .picture {
+    grid-column: 2 / span 7;
+    grid-row: 2 / span 10;
+    margin-top: 1.5rem;
+    z-index: -1;
+    height: 51.5rem;
+  }
+
+  @media (min-width: 1360px) and (max-width: 1919px) {
+    .code-wrapper {
+      margin-top: 3.5rem;
+      width: 41.75rem;
+      height: 18.625rem;
+    }
+
+    .picture {
+      height: 38.5rem;
+    }
+  }
+
+  @media (min-width: 1280px) and (max-width: 1359px) {
+    .code-wrapper {
+      margin-top: 2.5rem;
+      width: 41.75rem;
+      height: 18.625rem;
+    }
+
+    .picture {
+      height: 35.5rem;
+    }
+  }
+
+  @media (min-width: 768px) and (max-width: 1279px) {
+    .title {
+      margin-top: 5.6875rem;
+    }
+
+    .subtitle {
+      margin-top: -2.375rem;
+    }
+
+    .code-wrapper {
+      margin-top: 2.5rem;
+      width: 30.5rem;
+      height: 13.625rem;
+    }
+
+    .picture {
+      height: 27rem;
+    }
+  }
+
+  @media (max-width: 767px) {
+    .header {
+      padding-bottom: 2.875rem;
+    }
+
+    .error-code_500 .subtitle {
+      grid-column: 1 / span 4;
+    }
+
+    .error-code_500 .code-wrapper {
+      margin-top: 0;
+      margin-left: 0;
+      width: 17.875rem;
+      height: 8.5rem;
+      width: 18.75rem;
+      height: 8.9375rem;
+    }
+
+    .logo {
+      grid-column: 1 / span 3;
+      margin-top: 3.625rem;
+      width: 10rem;
+      height: 2.5rem;
+      color: black;
+    }
+
+    .title {
+      grid-column: 1 / span 6;
+      grid-row: 1;
+      margin-top: 3.6875rem;
+    }
+
+    .subtitle {
+      margin-top: 2.625rem;
+      grid-column: 1 / span 2;
+      grid-row: 3;
+    }
+
+    .code-wrapper {
+      grid-column: 1 / span 5;
+      grid-row: 2;
+      margin-top: 3.5625rem;
+      margin-left: 0.1875rem;
+      width: 16.125rem;
+      height: 7.25rem;
+    }
+
+    .picture {
+      grid-column: 1 / span 6;
+      grid-row: 2;
+      height: 16.5rem;
+    }
+  }
+`
+
+export default () => css`
+  ${base}
+`

packages/core-design/src/components/ErrorPage/ErrorPage.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import styled from '@emotion/styled'
+import Grid from '../Grid'
+import { ErrorPageProps as Props } from './types'
+
+import styles from './ErrorPage.styles'
+
+/* tslint:disable */
+const LogoIcon = require('../../static/icons/csssr_logo.svg')
+const ServerError = require('../../static/icons/serverError.svg')
+/* tslint:enable */
+
+const ErrorPage: React.FC<Props> = ({ className, title, subTitle, Img }) => {
+  return (
+    <div className={className}>
+      <Grid className="header">
+        <a className="logo">
+          <LogoIcon width="100%" height="100%" />
+        </a>
+      </Grid>
+
+      <Grid className="error-code_500">
+        <h1 className="font_h1-slab title" dangerouslySetInnerHTML={{ __html: title }} />
+
+        {Img && <Img className="picture" />}
+
+        <div className="code-wrapper">
+          <ServerError width="100%" height="100%" />
+        </div>
+
+        <h2 className="font_subhead-slab subtitle" dangerouslySetInnerHTML={{ __html: subTitle }} />
+      </Grid>
+    </div>
+  )
+}
+
+export default styled(ErrorPage)`
+  ${styles}
+`

packages/core-design/src/components/ErrorPage/index.ts

@@ -0,0 +1 @@
+export { default } from './ErrorPage'

packages/core-design/src/components/ErrorPage/types.ts

@@ -0,0 +1,6 @@
+export interface ErrorPageProps {
+  className?: string
+  title: string
+  subTitle: string
+  Img?: React.ComponentType<{ className?: string }>
+}

packages/core-design/src/components/Header/Header.tsx

@@ -31,6 +31,7 @@ const Header: React.FC<Props> = ({
   logo,
 }) => {
   const [isDropdownOpened, toggleDropdown] = useState(false)
+  const [isReady, toggleIsReady] = useState(false)
   const isIe11 = useIe11Status(isIe11ValueFromProps)
   const isMobile = useMobileStatus(isMobileValueFromProps)
 
@@ -42,6 +43,7 @@ const Header: React.FC<Props> = ({
 
     getVhSize()
     window.addEventListener('resize', getVhSize)
+    toggleIsReady(true)
 
     return () => window.removeEventListener('resize', getVhSize)
   })
@@ -102,7 +104,7 @@ const Header: React.FC<Props> = ({
         <Logo className="logo" />
       </LinkComponent>
 
-      {isMobile ? (
+      {isReady && isMobile && (
         <Fragment>
           <button className="burger" onClick={() => toggleDropdown(!isDropdownOpened)}>
             <Icon />
@@ -117,9 +119,9 @@ const Header: React.FC<Props> = ({
             <CommonHeaderContent />
           </div>
         </Fragment>
-      ) : (
-        <CommonHeaderContent />
       )}
+
+      {isReady && !isMobile && <CommonHeaderContent />}
     </header>
   )
 }

packages/core-design/src/data/footerLinks.tsx

@@ -1,8 +1,8 @@
 /* tslint:disable */
-const Facebook = require('../static/icons/footer/Facebook.svg')
-const Linkedin = require('../static/icons/footer/Linkedin.svg')
-const Instagram = require('../static/icons/footer/Instagram.svg')
-const Youtube = require('../static/icons/footer/Youtube.svg')
+const Facebook = require('../static/icons/footer/facebook.svg')
+const Linkedin = require('../static/icons/footer/linkedin.svg')
+const Instagram = require('../static/icons/footer/instagram.svg')
+const Youtube = require('../static/icons/footer/youtube.svg')
 // const Soundcloud = require('../static/icons/footer/Soundcloud.svg')
 // const Telegram = require('../static/icons/footer/Telegram.svg')
 // const Twitter = require('../static/icons/footer/Twitter.svg')

packages/core-design/src/index.ts

@@ -11,7 +11,7 @@ export { default as PictureForAllResolutions } from './components/PictureForAllR
 export { default as Root } from './components/Root'
 export { default as SubHeading } from './components/SubHeading'
 export { default as Text } from './components/Text'
-
+export { default as ErrorPage } from './components/ErrorPage'
 export {
   default as TextFieldLight,
   UncontrolledTextFieldLight,