Skip to content

Navigation Menu

Sign in

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit c96d0b5

Browse filesBrowse files
vadimkorrvadimkorr
committed
Add storybook
1 parent c6965a6 commit c96d0b5
Copy full SHA for c96d0b5

File tree

7 files changed

+3452
-109
lines changed
Filter options

7 files changed

+3452
-109
lines changed

‎.storybook/main.js

Copy file name to clipboard
+11Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
module.exports = {
2+
"stories": [
3+
"../src/**/*.stories.mdx",
4+
"../src/**/*.stories.@(js|jsx|ts|tsx)"
5+
],
6+
"addons": [
7+
"@storybook/addon-links",
8+
"@storybook/addon-essentials",
9+
"@storybook/preset-create-react-app"
10+
]
11+
}

‎.storybook/preview.js

Copy file name to clipboard
+4Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
export const parameters = {
3+
actions: { argTypesRegex: "^on[A-Z].*" },
4+
}

‎package.json

Copy file name to clipboardExpand all lines: package.json
+10-2Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@
1515
"start": "react-scripts start",
1616
"build": "react-scripts build",
1717
"test": "react-scripts test",
18-
"eject": "react-scripts eject"
18+
"eject": "react-scripts eject",
19+
"sb": "start-storybook -p 6006 -s public",
20+
"build-sb": "build-storybook -s public"
1921
},
2022
"eslintConfig": {
2123
"extends": [
@@ -36,6 +38,12 @@
3638
]
3739
},
3840
"devDependencies": {
41+
"@storybook/addon-actions": "^6.1.8",
42+
"@storybook/addon-essentials": "^6.1.8",
43+
"@storybook/addon-links": "^6.1.8",
44+
"@storybook/node-logger": "^6.1.8",
45+
"@storybook/preset-create-react-app": "^3.1.5",
46+
"@storybook/react": "^6.1.8",
3947
"node-sass": "4.14.1"
4048
}
41-
}
49+
}

‎src/TabHeaderItem/TabHeaderItem.jsx

Copy file name to clipboardExpand all lines: src/TabHeaderItem/TabHeaderItem.jsx
+23-5Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,30 @@ import React from 'react'
22

33
import './TabHeaderItem.scss'
44

5-
export function TabHeaderItem() {
5+
export function TabHeaderItem({ text, onClick, active }) {
6+
function handleClick() {
7+
onClick()
8+
}
9+
610
return (
7-
<div className="tab-header-item__container">
8-
<div className="tab-header-item__left-corner"></div>
9-
<div className="tab-header-item__content-continer"></div>
10-
<div className="tab-header-item__right-corner"></div>
11+
<div className="tab-header-item__container" onClick={handleClick}>
12+
<div
13+
className={`tab-header-item__left-corner ${
14+
active ? 'tab-header-item__left-corner--active' : ''
15+
}`}
16+
></div>
17+
<div
18+
className={`tab-header-item__content-container ${
19+
active ? 'tab-header-item__content-container--active' : ''
20+
}`}
21+
>
22+
<span className="tab-header-item__content-container__text">{text}</span>
23+
</div>
24+
<div
25+
className={`tab-header-item__right-corner ${
26+
active ? 'tab-header-item__right-corner--active' : ''
27+
}`}
28+
></div>
1129
</div>
1230
)
1331
}

‎src/TabHeaderItem/TabHeaderItem.scss

Copy file name to clipboardExpand all lines: src/TabHeaderItem/TabHeaderItem.scss
+33-6Lines changed: 33 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
1-
$background-color: cadetblue;
1+
$background-color-active: #42c987;
2+
$background-color: #8bd8bd;
23
$border-radius: 10;
34

45
@function px($value) {
56
@return #{$value}px;
67
}
78

9+
@mixin corner {
10+
width: px($border-radius);
11+
transform: rotate(180deg);
12+
position: relative;
13+
}
14+
815
@mixin with-inverted-radius {
916
width: px($border-radius);
1017
transform: rotate(180deg);
@@ -17,7 +24,7 @@ $border-radius: 10;
1724
height: px(2 * $border-radius);
1825
width: px($border-radius);
1926
border-top-left-radius: px($border-radius);
20-
box-shadow: 0 px(-$border-radius) 0 0 $background-color;
27+
box-shadow: 0 px(-$border-radius) 0 0 $background-color-active;
2128
}
2229
}
2330

@@ -28,23 +35,43 @@ $border-radius: 10;
2835
align-items: flex-end;
2936
background-color: transparent;
3037
overflow: hidden;
38+
font-family: Helvetica, Arial, sans-serif;
3139

3240
& > * {
3341
cursor: pointer;
3442
}
3543

3644
.tab-header-item__left-corner {
37-
@include with-inverted-radius();
45+
@include corner();
46+
&--active {
47+
@include with-inverted-radius();
48+
}
3849
}
39-
.tab-header-item__content-continer {
50+
.tab-header-item__content-container {
4051
height: 100%;
4152
flex: 1;
53+
54+
display: flex;
55+
align-items: center;
56+
justify-content: center;
57+
4258
background-color: $background-color;
4359
border-top-left-radius: px($border-radius);
4460
border-top-right-radius: px($border-radius);
61+
62+
.tab-header-item__content-container__text {
63+
color: #ffffff;
64+
}
65+
66+
&--active {
67+
background-color: $background-color-active;
68+
}
4569
}
4670
.tab-header-item__right-corner {
47-
@include with-inverted-radius();
48-
transform: scale(1, -1);
71+
@include corner();
72+
&--active {
73+
@include with-inverted-radius();
74+
transform: scale(1, -1);
75+
}
4976
}
5077
}

‎src/TabHeaderItem/TabHeaderItem.stories.jsx

Copy file name to clipboard
+20Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react'
2+
3+
import { TabHeaderItem } from './TabHeaderItem'
4+
5+
export default {
6+
title: 'TabHeaderItem',
7+
component: TabHeaderItem,
8+
argTypes: {
9+
text: { control: 'text' },
10+
active: { control: 'boolean' },
11+
onClick: { action: 'clicked' },
12+
},
13+
}
14+
15+
const Template = (args) => <TabHeaderItem {...args} />
16+
17+
export const Base = Template.bind({})
18+
Base.args = {
19+
text: 'Profile',
20+
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.