Skip to content

Commit 829d358

Browse files
NikitaCGNikitaCG
authored
feat(Navigation): add github star button in navigation (#159)
* feat: add github star button in navigation * feat: update jest rule for react-github-btn * feat: separate styles fro navigation components * feat: fix ? in regexp * feat: fix comments and update indents for github starts button
1 parent 652adfa commit 829d358

File tree

19 files changed

+260
-128
lines changed

19 files changed

+260
-128
lines changed

‎jest.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ module.exports = {
55
transform: {
66
'^.+\\.[jt]sx?$': 'ts-jest',
77
},
8-
transformIgnorePatterns: ['node_modules/(?!(@gravity-ui)/)'],
8+
transformIgnorePatterns: ['node_modules/(?!(@gravity-ui|react-github-btn)/)'],
99
coverageDirectory: './coverage',
1010
collectCoverageFrom: [
1111
'src/blocks/**/*.{ts,tsx,js,jsx}',

‎package-lock.json‎

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
"@gravity-ui/i18n": "^1.0.0",
5050
"bem-cn-lite": "^4.0.0",
5151
"lodash": "^4.17.21",
52+
"react-github-btn": "^1.4.0",
5253
"react-player": "^2.9.0",
5354
"react-slick": "^0.28.1",
5455
"react-spring": "^9.3.0",

‎src/containers/PageConstructor/__stories__/data.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -308,6 +308,12 @@
308308
}
309309
],
310310
"rightItems": [
311+
{
312+
"type": "github-stars",
313+
"text": "Star",
314+
"label": "Star @gravity-ui/page-constructor on GitHub",
315+
"url": "https://github.com/gravity-ui/page-constructor"
316+
},
311317
{
312318
"type": "link",
313319
"text": "Link",

‎src/models/navigation.ts‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ export enum NavigationItemType {
66
Dropdown = 'dropdown',
77
Button = 'button',
88
Social = 'social',
9+
GithubStars = 'github-stars',
910
}
1011

1112
export interface NavigationItemBase {
@@ -14,6 +15,12 @@ export interface NavigationItemBase {
1415
url?: string;
1516
}
1617

18+
export interface NavigationGithubButton extends Omit<NavigationItemBase, 'icon'> {
19+
type: NavigationItemType.GithubStars;
20+
url: string;
21+
label?: string;
22+
}
23+
1724
export interface NavigationLinkItem extends Omit<NavigationItemBase, 'url'> {
1825
type: NavigationItemType.Link;
1926
url: string;
@@ -39,13 +46,15 @@ export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
3946
export type NavigationItemModel =
4047
| NavigationLinkItem
4148
| NavigationButtonItem
42-
| NavigationDropdownItem;
49+
| NavigationDropdownItem
50+
| NavigationGithubButton;
4351

4452
export type NavigationItemData =
4553
| NavigationLinkItem
4654
| NavigationButtonItem
4755
| NavigationSocialItem
48-
| DropdownItemData;
56+
| DropdownItemData
57+
| NavigationGithubButton;
4958

5059
export type DropdownItemData = Omit<NavigationDropdownItem, 'items'>;
5160

‎src/navigation/components/Header/Header.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ $block: '.#{$ns}header';
7373

7474
&__buttons {
7575
display: flex;
76+
align-items: center;
7677
@include desktop-only();
7778

7879
& > * {

‎src/navigation/components/Header/Header.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -93,11 +93,7 @@ export const Header: React.FC<HeaderProps> = ({data, logo}) => {
9393
{rightItems && (
9494
<div className={b('buttons')}>
9595
{rightItems.map((button) => (
96-
<NavigationItem
97-
key={button.text}
98-
data={button}
99-
className={b('button')}
100-
/>
96+
<NavigationItem key={button.text} data={button} />
10197
))}
10298
</div>
10399
)}

‎src/navigation/components/NavigationItem/NavigationItem.scss‎

Lines changed: 0 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
@import '../../../../styles/variables';
2-
@import '../../../../styles/mixins';
32

43
$block: '.#{$ns}navigation-item';
54

@@ -9,36 +8,4 @@ $block: '.#{$ns}navigation-item';
98
display: flex;
109
align-items: center;
1110
white-space: nowrap;
12-
13-
&_type_link {
14-
@include navigation-item();
15-
}
16-
17-
&_type_button {
18-
display: inline-block;
19-
}
20-
21-
&__arrow {
22-
position: relative;
23-
top: -2px;
24-
25-
width: 9px;
26-
height: 9px;
27-
margin-left: 5px;
28-
}
29-
30-
&__icon {
31-
display: flex;
32-
width: 20px;
33-
height: 20px;
34-
margin-right: $indentXXXS;
35-
36-
object-fit: cover;
37-
}
38-
39-
&__dropdown {
40-
margin-left: 7px;
41-
42-
color: var(--yc-color-text-secondary);
43-
}
4411
}

‎src/navigation/components/NavigationItem/NavigationItem.tsx‎

Lines changed: 11 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,13 @@
1-
import React, {Fragment, MouseEventHandler, useContext, useMemo} from 'react';
1+
import React, {MouseEventHandler, useMemo} from 'react';
22

3-
import {block, getLinkProps} from '../../../utils';
4-
import {RouterLink, ToggleArrow, Button, Image} from '../../../components';
5-
import {LocationContext} from '../../../context/locationContext';
6-
import {
7-
NavigationItemType,
8-
NavigationLinkItem,
9-
ImageProps,
10-
ButtonProps,
11-
NavigationItemData,
12-
DropdownItemData,
13-
} from '../../../models';
14-
import {NavigationArrow} from '../../../icons';
3+
import {block} from '../../../utils';
4+
import {NavigationItemType, NavigationItemData} from '../../../models';
155
import SocialIcon from '../SocialIcon/SocialIcon';
16-
import {getMediaImage} from '../../../components/Media/Image/utils';
6+
7+
import {NavigationButton} from './components/NavigationButton/NavigationButton';
8+
import {NavigationDropdown} from './components/NavigationDropdown/NavigationDropdown';
9+
import {NavigationLink} from './components/NavigationLink/NavigationLink';
10+
import {GithubStars} from './components/GithubStars/GithubStars';
1711

1812
import './NavigationItem.scss';
1913

@@ -26,96 +20,26 @@ export interface NavigationItemProps {
2620
isOpened?: boolean;
2721
}
2822

29-
const Content: React.FC<{text: string; icon?: ImageProps}> = ({text, icon}) => (
30-
<Fragment>
31-
{icon && typeof icon !== 'string' && <Image className={b('icon')} {...icon} />}
32-
<span className={b('text')}>{text}</span>
33-
</Fragment>
34-
);
35-
36-
type NavigationDropdownProps = NavigationItemProps & DropdownItemData;
37-
38-
const NavigationDropdown: React.FC<NavigationDropdownProps> = ({
39-
text,
40-
icon,
41-
isOpened,
42-
...props
43-
}) => {
44-
const iconData = icon && getMediaImage(icon);
45-
46-
return (
47-
<span {...props}>
48-
<Content text={text} icon={iconData} />
49-
<ToggleArrow
50-
className={b('dropdown')}
51-
size={12}
52-
type={'vertical'}
53-
iconType="navigation"
54-
open={isOpened}
55-
/>
56-
</span>
57-
);
58-
};
59-
60-
type NavigationLinkProps = NavigationItemProps & NavigationLinkItem;
61-
62-
const NavigationLink: React.FC<NavigationLinkProps> = (props) => {
63-
const {hostname, Link} = useContext(LocationContext);
64-
const {url, text, icon, arrow, target, ...rest} = props;
65-
const linkExtraProps = getLinkProps(url, hostname, target);
66-
const iconData = icon && getMediaImage(icon);
67-
const content = (
68-
<Fragment>
69-
<Content text={text} icon={iconData} />
70-
{arrow && <NavigationArrow className={b('arrow')} />}
71-
</Fragment>
72-
);
73-
74-
if (linkExtraProps?.target || !Link) {
75-
return (
76-
<a href={url} title={text} {...rest} {...linkExtraProps}>
77-
{content}
78-
</a>
79-
);
80-
} else {
81-
return (
82-
<RouterLink href={url} passHref>
83-
<a {...rest}>{content}</a>
84-
</RouterLink>
85-
);
86-
}
87-
};
88-
89-
const NavigationButton: React.FC<ButtonProps> = (props) => {
90-
const {url, target} = props;
91-
return target ? (
92-
<Button {...props} url={url} />
93-
) : (
94-
<RouterLink href={url}>
95-
<Button {...props} url={url} />
96-
</RouterLink>
97-
);
98-
};
99-
10023
//todo: add types support form component in map
10124
// eslint-disable-next-line @typescript-eslint/no-explicit-any
10225
const NavigationItemsMap: Record<NavigationItemType, React.ComponentType<any>> = {
10326
[NavigationItemType.Button]: NavigationButton,
10427
[NavigationItemType.Social]: SocialIcon,
10528
[NavigationItemType.Dropdown]: NavigationDropdown,
10629
[NavigationItemType.Link]: NavigationLink,
30+
[NavigationItemType.GithubStars]: GithubStars,
10731
};
10832

10933
const NavigationItem: React.FC<NavigationItemProps> = ({data, className, ...props}) => {
11034
const {type = NavigationItemType.Link} = data;
11135
const Component = NavigationItemsMap[type];
11236
const componentProps = useMemo(
11337
() => ({
114-
className: b({type}, className),
38+
className: b(null, className),
11539
...data,
11640
...props,
11741
}),
118-
[className, data, props, type],
42+
[className, data, props],
11943
);
12044

12145
return <Component {...componentProps} />;

‎src/navigation/components/NavigationItem/components/ContentWrapper/ContentWrapper.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
@import '../../../../../../styles/variables';
2+
3+
$block: '.#{$ns}content-wrapper';
4+
5+
#{$block} {
6+
&__icon {
7+
display: flex;
8+
width: 20px;
9+
height: 20px;
10+
margin-right: $indentXXXS;
11+
12+
object-fit: cover;
13+
}
14+
}

0 commit comments

Comments
 (0)