Skip to content

Commit 4d33181

Browse files
ArtyomReshArtyomResh
committed
Merge branch 'master' of github.com:CSSSR/core-design into release/BLOG-FOOTER-FIX
2 parents 216c0df + 540291f commit 4d33181

File tree

13 files changed

+506
-149
lines changed

13 files changed

+506
-149
lines changed

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ lib/
66
report.*.json
77
*.icloud
88
.DS_Store
9-
.vscode
9+
.vscode/

‎.vscode/settings.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,21 @@
11
{
2+
"workbench.colorCustomizations": {
3+
"activityBar.activeBackground": "#f285a6",
4+
"activityBar.activeBorder": "#d5f9c5",
5+
"activityBar.background": "#f285a6",
6+
"activityBar.foreground": "#15202b",
7+
"activityBar.inactiveForeground": "#15202b99",
8+
"activityBarBadge.background": "#d5f9c5",
9+
"activityBarBadge.foreground": "#15202b",
10+
"statusBar.background": "#ed5785",
11+
"statusBar.foreground": "#15202b",
12+
"statusBarItem.hoverBackground": "#e82964",
13+
"titleBar.activeBackground": "#ed5785",
14+
"titleBar.activeForeground": "#15202b",
15+
"titleBar.inactiveBackground": "#ed578599",
16+
"titleBar.inactiveForeground": "#15202b99"
17+
},
18+
"peacock.color": "#ED5785",
219
"editor.formatOnSave": false,
320
"eslint.autoFixOnSave": true,
421
"[handlebars]": {

‎packages/core-design/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@csssr/core-design",
3-
"version": "6.0.2",
3+
"version": "6.1.2",
44
"main": "lib/index.js",
55
"license": "MIT",
66
"types": "lib/typings",

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

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,30 +9,28 @@ storiesOf('Header', module)
99
.addDecorator(withKnobs)
1010
.add('Header', () => {
1111
const knobs = {
12-
preset: select('Preset', ['school', 'default', ''], 'school'),
12+
preset: select('Preset', ['school', 'defaultEn', 'defaultRu', ''], 'defaultEn'),
1313
isIe11: boolean('Is IE11', false),
1414
isMobile: boolean('Is Mobile', false),
1515
}
1616

1717
const actionButtonKnobs = {
18-
isVisible: boolean('Action Button is Visible', true),
19-
text: text('Action Button text', 'Default text'),
20-
href: text('Action Button href', '/'),
21-
testId: text('Action Button test id', 'Header:button.contactUs'),
18+
isVisible: boolean('Action Button is Visible', false),
19+
text: text('Action Button text', ''),
20+
href: text('Action Button href', ''),
2221
onClick: action('Action Button click'),
2322
}
2423

2524
const logo = {
26-
href: text('Logo href', '/'),
27-
type: select('Logo type', ['default', 'school'], 'default'),
25+
href: text('Logo href', ''),
2826
}
2927

3028
return (
3129
<Header
3230
{...knobs}
3331
logo={logo}
3432
actionButton={actionButtonKnobs}
35-
pathname={text('Pathname', '/')}
33+
pathname={text('Pathname', '')}
3634
/>
3735
)
3836
})

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

Lines changed: 17 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React, { Fragment, useEffect, useState } from 'react'
22
import useIe11Status from '../../utils/hooks/useIe11Status'
33
import useMobileStatus from '../../utils/hooks/useMobileStatus'
44
import presets from '../../data/headerPresets'
5-
import { menu as defaultMenu, links as defaultLinks } from '../../data/headerLinks'
65
import { HeaderProps as Props } from './types'
76
import styled from '@emotion/styled'
87
import cn from 'classnames'
@@ -31,8 +30,8 @@ const Header: React.FC<Props> = ({
3130
pathname,
3231
isMobile: isMobileValueFromProps,
3332
isIe11: isIe11ValueFromProps,
34-
menu,
35-
links,
33+
menu: menuFromProps,
34+
links: linksFromProps,
3635
actionButton,
3736
logo,
3837
preset,
@@ -68,37 +67,31 @@ const Header: React.FC<Props> = ({
6867

6968
const Icon = isDropdownOpened ? Cross : Burger
7069
const LinkComponent = logo.linkComponent || 'a'
70+
const menu = menuFromProps || presets[preset]?.menu
71+
const links = linksFromProps || presets[preset]?.links
7172
const CommonHeaderContent = () => (
7273
<Fragment>
73-
{menu && (
74-
<Menu
75-
isMobile={isMobile}
76-
isIe11={isIe11}
77-
pathname={pathname}
78-
links={presets[preset]?.menu.links || menu.links}
79-
backButtonText={presets[preset]?.menu.backButtonText || menu.backButtonText}
80-
/>
81-
)}
82-
{links && <Links links={presets[preset]?.links || links} pathname={pathname} />}
83-
{(presets[preset]?.actionButton.isVisible || actionButton.isVisible) &&
84-
(isIe11 || presets[preset]?.actionButton.href || actionButton.href ? (
74+
{menu && <Menu isMobile={isMobile} isIe11={isIe11} pathname={pathname} menu={menu} />}
75+
{links && <Links links={links} pathname={pathname} />}
76+
{(actionButton?.isVisible || presets[preset]?.actionButton?.isVisible) &&
77+
(isIe11 || actionButton.href || presets[preset]?.actionButton.href ? (
8578
<ButtonLink
8679
kind="primary"
8780
className="button_action"
88-
data-testid={presets[preset]?.actionButton.testId || actionButton.testId}
89-
href={presets[preset]?.actionButton.href || actionButton.href}
81+
data-testid={actionButton.testId || presets[preset]?.actionButton.testId}
82+
href={actionButton.href || presets[preset]?.actionButton.href}
9083
dangerouslySetInnerHTML={{
91-
__html: presets[preset]?.actionButton.text || actionButton.text,
84+
__html: actionButton.text || presets[preset]?.actionButton.text,
9285
}}
9386
/>
9487
) : (
9588
<Button
9689
kind="primary"
9790
className="button_action"
98-
data-testid={presets[preset]?.actionButton.testId || actionButton.testId}
91+
data-testid={actionButton.testId || presets[preset]?.actionButton.testId}
9992
onClick={actionButton.onClick}
10093
dangerouslySetInnerHTML={{
101-
__html: presets[preset]?.actionButton.text || actionButton.text,
94+
__html: actionButton.text || presets[preset]?.actionButton.text,
10295
}}
10396
/>
10497
))}
@@ -108,11 +101,11 @@ const Header: React.FC<Props> = ({
108101
return (
109102
<header data-testid="Header:block" className={className}>
110103
<LinkComponent
111-
href={presets[preset]?.logo.href || logo.href}
104+
href={logo.href || presets[preset]?.logo.href}
112105
className="logo-wrapper"
113-
data-testid={presets[preset]?.logo.testId || logo.testId}
106+
data-testid={logo.testId || presets[preset]?.logo.testId}
114107
>
115-
{logoHashMap[presets[preset]?.logo.type] || logoHashMap[logo.type]}
108+
{logoHashMap[logo.type] || logoHashMap[presets[preset]?.logo.type]}
116109
</LinkComponent>
117110

118111
{isReady && isMobile && (
@@ -138,19 +131,7 @@ const Header: React.FC<Props> = ({
138131
}
139132

140133
Header.defaultProps = {
141-
logo: {
142-
testId: 'Header:link.logo',
143-
href: 'https://csssr.com/en',
144-
},
145-
actionButton: {
146-
isVisible: true,
147-
text: 'Default text',
148-
testId: 'Header:button.contactUs',
149-
},
150-
menu: { links: defaultMenu, backButtonText: 'Our services' },
151-
links: defaultLinks,
152-
pathname: '',
153-
preset: '',
134+
preset: 'defaultEn',
154135
}
155136

156137
export default styled(Header)`

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

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,11 @@ export interface Props {
1414
pathname: string
1515
isMobile: boolean
1616
isIe11: boolean
17-
backButtonText: string
18-
links: MenuLinksProps[]
17+
menu: MenuLinksProps[]
1918
theme?: Theme
2019
}
2120

22-
const Menu: React.FC<Props> = ({
23-
className,
24-
isMobile,
25-
isIe11,
26-
pathname,
27-
backButtonText,
28-
links,
29-
}) => {
21+
const Menu: React.FC<Props> = ({ className, isMobile, isIe11, pathname, menu }) => {
3022
const menuRef = useRef(null)
3123
const [activeItem, setActiveItem] = useState(null)
3224
const [animationDirection, setAnimationDirection] = useState(null)
@@ -37,10 +29,10 @@ const Menu: React.FC<Props> = ({
3729
return
3830
}
3931

40-
const prevActiveItemIndex: number = links.findIndex(
32+
const prevActiveItemIndex: number = menu.findIndex(
4133
({ id }: { id: string }) => id === activeItem,
4234
)
43-
const activeItemIndex: number = links.findIndex(({ id }: { id: string }) => id === item)
35+
const activeItemIndex: number = menu.findIndex(({ id }: { id: string }) => id === item)
4436

4537
setAnimationDirection(prevActiveItemIndex < activeItemIndex ? 'right' : 'left')
4638
setActiveItem(item)
@@ -81,7 +73,7 @@ const Menu: React.FC<Props> = ({
8173
data-scroll-lock-scrollable
8274
>
8375
<MenuWrapperTag className="menu">
84-
{links.map(({ id, title, testId }) => (
76+
{menu.map(({ id, title, testId }) => (
8577
<Link
8678
key={title}
8779
className={cn('menu-item', {
@@ -102,9 +94,9 @@ const Menu: React.FC<Props> = ({
10294
<Nav
10395
activeItem={activeItem}
10496
animationDirection={animationDirection}
105-
backButton={{ text: backButtonText, onClick: handleResetActiveItem }}
97+
onBackButtonClick={handleResetActiveItem}
10698
pathname={pathname}
107-
links={links}
99+
menu={menu}
108100
isIe11={isIe11}
109101
isMobile={isMobile}
110102
/>

0 commit comments

Comments
 (0)