Skip to content

Commit 83a1034

Browse files
ArtyomReshArtyomResh
committed
Merge branch 'master' of github.com:csssr-dreamteam/core-design
2 parents 5e182b3 + 59a1ea4 commit 83a1034

48 files changed

Lines changed: 446 additions & 5136 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎CONTRIBUTION.md‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -69,16 +69,15 @@ lerna может автоматически определить, какая в
6969
Для этого нужно:
7070

7171
1. Слить всё новое в ветку `master`;
72-
2. Запустить команду: `$ lerna version --conventional-commits --no-changelog --yes`;
72+
2. Запустить команду: `yarn lerna version --conventional-commits --no-changelog --yes`;
7373

7474
Lerna внесет изменения в `package.json` файлы пакетов (поднимет версии), закоммитит их,
7575
выставит теги и сделает push в удаленный репозиторий.
7676

7777
Следующим этапом нужно опубликовать пакеты:
7878

79-
1. Нужно быть залогиненым в npm с привязкой к scope, для этого нужно выполнить: `$ npm login --scope=@csssr`
80-
(если что токен есть в Депломате);
81-
2. Запустить команду: `$ lerna publish from-git --yes --registry https://registry.npmjs.org/`
79+
1. Нужно быть залогиненым в github packages с привязкой к scope, для этого нужно выполнить: `npm login --registry=https://npm.pkg.github.com --scope=@csssr`;
80+
2. Запустить команду: `yarn lerna publish from-git --yes --registry https://npm.pkg.github.com/`
8281

8382
Новые версии пакетов должны быть опубликованы. Можно быстро проверить результат публикации:
8483

‎LICENSE‎

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

‎packages/core-design/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@csssr/core-design",
3-
"version": "5.4.1",
3+
"version": "5.6.0",
44
"main": "lib/index.js",
55
"license": "MIT",
66
"types": "lib/typings",
@@ -10,7 +10,7 @@
1010
"build:compile": "babel --out-dir ./lib -x .tsx,.ts src",
1111
"build:typings": "tsc --emitDeclarationOnly",
1212
"clean": "cleandir ./lib",
13-
"copy:assets": "cpx './src/**/*.{png,jpg,jpeg,svg,woff,woff2,eot,ttf,otf}' lib",
13+
"copy:assets": "cpx './src/**/*.{png,jpg,jpeg,svg}' lib",
1414
"dev": "yarn run clean && concurrently 'yarn run build:typings --watch' 'yarn run build:compile --watch' 'yarn run copy:assets --watch'",
1515
"lint": "tslint --project ./tsconfig.json --exclude ./__tests__/**/*.{ts,tsx} ./src/**/*.{ts,tsx}",
1616
"precommit": "lint-staged",
@@ -38,8 +38,8 @@
3838
"@storybook/addon-knobs": "^5.0.10",
3939
"@storybook/react": "^5.0.9",
4040
"@types/classnames": "^2.2.10",
41-
"@types/color": "^3.0.0",
42-
"@types/ramda": "^0.26.15",
41+
"@types/color": "^3.0.1",
42+
"@types/ramda": "^0.27.6",
4343
"@types/storybook__addon-actions": "^3.4.2",
4444
"@types/storybook__addon-knobs": "^5.0.0",
4545
"@types/storybook__react": "^4.0.1",
@@ -55,7 +55,7 @@
5555
"react-dom": "^16.13.1",
5656
"tslint": "^5.16.0",
5757
"tslint-config-prettier": "^1.18.0",
58-
"typescript": "^3.4.5",
58+
"typescript": "^3.9.5",
5959
"utility-types": "^3.7.0"
6060
},
6161
"publishConfig": {

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import * as React from 'react'
2+
import { storiesOf } from '@storybook/react'
3+
import ErrorPage from './ErrorPage'
4+
import { PictureForAllResolutions } from '../PictureForAllResolutions'
5+
6+
const Img = ({ className }) => {
7+
const image = {
8+
pathToImagesFolder: require.context('../../static/images/imagesForStories'),
9+
imageName: 'ultramarine',
10+
alt: 'Сержант Ультрамаринов',
11+
}
12+
13+
return <PictureForAllResolutions className={className} image={image} />
14+
}
15+
16+
storiesOf('ErrorPage', module).add('ErrorPage', () => {
17+
return (
18+
<ErrorPage
19+
title="Ошибка на сервере"
20+
subTitle="Что-то пошло не так. Попробуйте еще раз или свяжитесь с нами по почте <a href='mailto:sales@csssr.io'>sales@csssr.io</a>"
21+
Img={Img}
22+
/>
23+
)
24+
})

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

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
import { css } from '@emotion/core'
2+
3+
const base = css`
4+
.header {
5+
padding-bottom: 4rem;
6+
}
7+
8+
.logo {
9+
grid-column: 2 / span 2;
10+
margin-top: 5.25rem;
11+
width: 11.5rem;
12+
height: 2.875rem;
13+
color: black;
14+
}
15+
16+
.title {
17+
margin-top: 3.875rem;
18+
grid-column: 2 / span 7;
19+
grid-row: 1;
20+
}
21+
22+
.subtitle {
23+
grid-column: 9 / span 4;
24+
margin-top: -3.1875rem;
25+
grid-row: 2;
26+
}
27+
28+
.link {
29+
color: #345eff;
30+
}
31+
32+
.code-wrapper {
33+
grid-column: 2 / span 6;
34+
grid-row: 2 / span 10;
35+
margin-top: 2.5rem;
36+
width: calc(100% + 1rem);
37+
height: 25rem;
38+
}
39+
40+
.picture {
41+
grid-column: 2 / span 7;
42+
grid-row: 2 / span 10;
43+
margin-top: 1.5rem;
44+
z-index: -1;
45+
height: 51.5rem;
46+
}
47+
48+
@media (min-width: 1360px) and (max-width: 1919px) {
49+
.code-wrapper {
50+
margin-top: 3.5rem;
51+
width: 41.75rem;
52+
height: 18.625rem;
53+
}
54+
55+
.picture {
56+
height: 38.5rem;
57+
}
58+
}
59+
60+
@media (min-width: 1280px) and (max-width: 1359px) {
61+
.code-wrapper {
62+
margin-top: 2.5rem;
63+
width: 41.75rem;
64+
height: 18.625rem;
65+
}
66+
67+
.picture {
68+
height: 35.5rem;
69+
}
70+
}
71+
72+
@media (min-width: 768px) and (max-width: 1279px) {
73+
.title {
74+
margin-top: 5.6875rem;
75+
}
76+
77+
.subtitle {
78+
margin-top: -2.375rem;
79+
}
80+
81+
.code-wrapper {
82+
margin-top: 2.5rem;
83+
width: 30.5rem;
84+
height: 13.625rem;
85+
}
86+
87+
.picture {
88+
height: 27rem;
89+
}
90+
}
91+
92+
@media (max-width: 767px) {
93+
.header {
94+
padding-bottom: 2.875rem;
95+
}
96+
97+
.error-code_500 .subtitle {
98+
grid-column: 1 / span 4;
99+
}
100+
101+
.error-code_500 .code-wrapper {
102+
margin-top: 0;
103+
margin-left: 0;
104+
width: 17.875rem;
105+
height: 8.5rem;
106+
width: 18.75rem;
107+
height: 8.9375rem;
108+
}
109+
110+
.logo {
111+
grid-column: 1 / span 3;
112+
margin-top: 3.625rem;
113+
width: 10rem;
114+
height: 2.5rem;
115+
color: black;
116+
}
117+
118+
.title {
119+
grid-column: 1 / span 6;
120+
grid-row: 1;
121+
margin-top: 3.6875rem;
122+
}
123+
124+
.subtitle {
125+
margin-top: 2.625rem;
126+
grid-column: 1 / span 2;
127+
grid-row: 3;
128+
}
129+
130+
.code-wrapper {
131+
grid-column: 1 / span 5;
132+
grid-row: 2;
133+
margin-top: 3.5625rem;
134+
margin-left: 0.1875rem;
135+
width: 16.125rem;
136+
height: 7.25rem;
137+
}
138+
139+
.picture {
140+
grid-column: 1 / span 6;
141+
grid-row: 2;
142+
height: 16.5rem;
143+
}
144+
}
145+
`
146+
147+
export default () => css`
148+
${base}
149+
`

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react'
2+
import styled from '@emotion/styled'
3+
import Grid from '../Grid'
4+
import { ErrorPageProps as Props } from './types'
5+
6+
import styles from './ErrorPage.styles'
7+
8+
/* tslint:disable */
9+
const LogoIcon = require('../../static/icons/csssr_logo.svg')
10+
const ServerError = require('../../static/icons/serverError.svg')
11+
/* tslint:enable */
12+
13+
const ErrorPage: React.FC<Props> = ({ className, title, subTitle, Img }) => {
14+
return (
15+
<div className={className}>
16+
<Grid className="header">
17+
<a className="logo">
18+
<LogoIcon width="100%" height="100%" />
19+
</a>
20+
</Grid>
21+
22+
<Grid className="error-code_500">
23+
<h1 className="font_h1-slab title" dangerouslySetInnerHTML={{ __html: title }} />
24+
25+
{Img && <Img className="picture" />}
26+
27+
<div className="code-wrapper">
28+
<ServerError width="100%" height="100%" />
29+
</div>
30+
31+
<h2 className="font_subhead-slab subtitle" dangerouslySetInnerHTML={{ __html: subTitle }} />
32+
</Grid>
33+
</div>
34+
)
35+
}
36+
37+
export default styled(ErrorPage)`
38+
${styles}
39+
`

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './ErrorPage'

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export interface ErrorPageProps {
2+
className?: string
3+
title: string
4+
subTitle: string
5+
Img?: React.ComponentType<{ className?: string }>
6+
}

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const Header: React.FC<Props> = ({
3131
logo,
3232
}) => {
3333
const [isDropdownOpened, toggleDropdown] = useState(false)
34+
const [isReady, toggleIsReady] = useState(false)
3435
const isIe11 = useIe11Status(isIe11ValueFromProps)
3536
const isMobile = useMobileStatus(isMobileValueFromProps)
3637

@@ -42,6 +43,7 @@ const Header: React.FC<Props> = ({
4243

4344
getVhSize()
4445
window.addEventListener('resize', getVhSize)
46+
toggleIsReady(true)
4547

4648
return () => window.removeEventListener('resize', getVhSize)
4749
})
@@ -102,7 +104,7 @@ const Header: React.FC<Props> = ({
102104
<Logo className="logo" />
103105
</LinkComponent>
104106

105-
{isMobile ? (
107+
{isReady && isMobile && (
106108
<Fragment>
107109
<button className="burger" onClick={() => toggleDropdown(!isDropdownOpened)}>
108110
<Icon />
@@ -117,9 +119,9 @@ const Header: React.FC<Props> = ({
117119
<CommonHeaderContent />
118120
</div>
119121
</Fragment>
120-
) : (
121-
<CommonHeaderContent />
122122
)}
123+
124+
{isReady && !isMobile && <CommonHeaderContent />}
123125
</header>
124126
)
125127
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
/* tslint:disable */
2-
const Facebook = require('../static/icons/footer/Facebook.svg')
3-
const Linkedin = require('../static/icons/footer/Linkedin.svg')
4-
const Instagram = require('../static/icons/footer/Instagram.svg')
5-
const Youtube = require('../static/icons/footer/Youtube.svg')
2+
const Facebook = require('../static/icons/footer/facebook.svg')
3+
const Linkedin = require('../static/icons/footer/linkedin.svg')
4+
const Instagram = require('../static/icons/footer/instagram.svg')
5+
const Youtube = require('../static/icons/footer/youtube.svg')
66
// const Soundcloud = require('../static/icons/footer/Soundcloud.svg')
77
// const Telegram = require('../static/icons/footer/Telegram.svg')
88
// const Twitter = require('../static/icons/footer/Twitter.svg')

0 commit comments

Comments
 (0)