Skip to content

Commit 86f07f4

Browse files
edo92edo92
committed
dynamic styles adoptation
1 parent bbe2e98 commit 86f07f4

37 files changed

+512
-456
lines changed

‎docs/entry.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ reactComponents['Button'] = Component3;
3737
import Component4 from '../src/Components/Drawer.js';
3838
reactComponents['Drawer'] = Component4;
3939

40-
import Component5 from '../src/Components/Dropdown.js';
40+
import Component5 from '../src/Components/Dropdown/Dropdown.js';
4141
reactComponents['DropDown'] = Component5;
4242

4343
import Component6 from '../src/Components/Empty.js';
@@ -70,7 +70,7 @@ reactComponents['Modal'] = Component14;
7070
import Component15 from '../src/Components/Page.js';
7171
reactComponents['Page'] = Component15;
7272

73-
import Component16 from '../src/Components/Tooltip.js';
73+
import Component16 from '../src/Components/Tooltip/index.js';
7474
reactComponents['Tooltip'] = Component16;
7575

7676
import Component17 from '../src/Components/UserFigure.js';

‎src/Components/Badge.js

+30-17
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,56 @@
11
import React, { memo } from 'react';
2-
import styled from 'styled-components';
2+
import styled, { css } from 'styled-components';
33

44
import {
5-
colorTypeDynamic,
65
borderDynamic,
6+
bgDynamic,
77
} from 'Styled/dynamic';
88

9-
const BadgeBase = styled.span`
9+
const badgeSizeDynamic = css`
1010
width: 8px;
1111
height: 8px;
1212
top: 10px;
1313
right: 10px;
14-
position: absolute;
15-
border-radius: 50%;
1614
`;
1715

18-
const BadgeComponent = styled(BadgeBase).attrs({
19-
sizebr: 3,
20-
typebr: 'background',
21-
})`
22-
background-color: ${colorTypeDynamic};
23-
${({ border }) => border && borderDynamic};
16+
const BadgeComponent = styled.span.attrs(
17+
({ type, border }) => ({
18+
sizebr: 4,
19+
typebg: type,
20+
radiusbr: 'circle',
21+
typebr: 'background',
22+
stylebr: !border ? 'none' : 'solid',
23+
}),
24+
)`
25+
${bgDynamic};
26+
${borderDynamic};
27+
${badgeSizeDynamic};
28+
display: table;
29+
position: absolute;
2430
`;
2531

2632
/**
2733
*
2834
* @component
35+
* @param {String | undefined} [size] sm | md | lg custom sizes
2936
* @param {Boolean | undefined} [border] adds border around badge
3037
* @param {String | undefined} [status] success | warning | error
3138
* @param {String | undefined} [type] same as status, may need for consistency
3239
* @param {String} className passed by styled compnent or custom class
3340
*/
3441
const Badge = memo(
35-
({ border, status, type, className }) => (
36-
<BadgeComponent
37-
border={border}
38-
className={className}
39-
type={status || type}
40-
/>
42+
({ size, border, status, type, className }) => (
43+
<>
44+
{type ||
45+
(status && (
46+
<BadgeComponent
47+
size={size}
48+
border={border}
49+
className={className}
50+
type={status || type}
51+
/>
52+
))}
53+
</>
4154
),
4255
);
4356

‎src/Components/Button/index.js

+37-32
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,43 @@
11
import React, { memo } from 'react';
2-
import styled, { css } from 'styled-components';
2+
import styled from 'styled-components';
33

44
import Icon from 'Components/Icons';
5+
import bttnBaseStyle from './styles';
56

6-
// Dynamic styles
77
import {
8-
spaceing,
8+
bgDynamic,
99
fontDynamic,
10+
spaceDynamic,
1011
borderDynamic,
1112
cursorDynamic,
1213
} from 'Styled/dynamic';
1314

14-
// Button custom styles
15-
import {
16-
onFocus,
17-
onHover,
18-
baseStyle,
19-
transitions,
20-
backgroundColor,
21-
} from './styles';
22-
23-
// Reusable button base style
24-
export const buttonBase = css`
25-
${spaceing};
26-
${baseStyle};
27-
${transitions};
28-
${fontDynamic};
29-
${cursorDynamic};
30-
${backgroundColor};
31-
`;
15+
const dynamicStyleProps = ({
16+
type,
17+
typebr,
18+
typefont,
19+
size,
20+
focusbr,
21+
hoverbg,
22+
}) => ({
23+
typefont: typefont,
24+
sizefont: size,
25+
typebg: type,
26+
hoverbg: hoverbg || 'active',
27+
focusbr: focusbr || 'highlight',
28+
typebr: typebr || 'primary',
29+
});
3230

3331
// Reusable button styled component
3432
export const ButtonBase = styled.button.attrs(
35-
({ size, type }) => ({
36-
brColor: 'primary',
37-
fontColor: type,
38-
fontSize: size,
39-
}),
33+
dynamicStyleProps,
4034
)`
41-
${buttonBase};
35+
${bttnBaseStyle};
4236
${borderDynamic};
43-
${onHover};
44-
${onFocus};
37+
${cursorDynamic};
38+
${spaceDynamic};
39+
${fontDynamic};
40+
${bgDynamic};
4541
`;
4642

4743
/**
@@ -69,24 +65,33 @@ const Button = memo(
6965
title,
7066
type,
7167
className,
68+
typebr,
69+
typefont,
70+
focusbr,
7271
}) => (
7372
<ButtonBase
74-
radius="base"
73+
radiusbr="base"
7574
size={size}
7675
type={type}
76+
//
7777
onClick={onClick}
7878
disabled={disabled}
7979
className={className}
80+
//
81+
focusbr={focusbr}
82+
typebr={typebr}
83+
typefont={typefont}
8084
>
81-
{icon && (
85+
{icon ? (
8286
<Icon
8387
icon={icon}
8488
size={size}
8589
fill={fill}
8690
color={color}
8791
/>
92+
) : (
93+
<span style={{ color }}>{title}</span>
8894
)}
89-
{title && <span style={{ color }}>{title}</span>}
9095
</ButtonBase>
9196
),
9297
);

‎src/Components/Button/styles.js

+18-26
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,31 @@
11
import { css } from 'styled-components';
2-
import { activeSecondary } from 'Styled/colors';
3-
import {
4-
colorTypeDynamic,
5-
borderColorDynamic,
6-
} from 'Styled/dynamic';
72

8-
// btn styels
9-
export const baseStyle = css`
10-
outline: none;
11-
width: auto;
12-
display: inline-flex;
13-
background: transparent;
14-
justify-content: center;
3+
const pseudoClass = css`
4+
&: focus {
5+
box-shadow: rgb(133, 133, 133);
6+
}
157
`;
168

17-
export const transitions = css`
9+
const transitions = css`
1810
transition: color 0.15s ease-in-out,
1911
background-color 0.15s ease-in-out,
2012
border-color 0.15s ease-in-out,
2113
box-shadow 0.15s ease-in-out;
2214
`;
2315

24-
export const onFocus = css`
25-
&: focus {
26-
box-shadow: rgb(133, 133, 133);
27-
border-color: ${activeSecondary};
28-
}
29-
`;
30-
31-
export const onHover = css`
32-
&: hover {
33-
background-color: ${({ type }) =>
34-
type !== 'primary' && borderColorDynamic};
16+
const baseStyle = css`
17+
background: transparent;
18+
display: flex;
19+
justify-content: center;
20+
cursor: pointer;
21+
transition: all 0.23s;
22+
position: relative;
23+
outline: none;
24+
width: auto;
3525
`;
3626

37-
export const backgroundColor = css`
38-
background: ${colorTypeDynamic};
27+
export default css`
28+
${baseStyle};
29+
${transitions};
30+
${pseudoClass};
3931
`;

‎src/Components/Drawer.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -73,9 +73,7 @@ const Drawer = memo(
7373
<Container className={className} visible={isOpen}>
7474
<Wrapper>
7575
<Header>
76-
<Title>
77-
{helpers.firstChartUppercase(title)}
78-
</Title>
76+
<Title>{helpers.Uppercase(title)}</Title>
7977
<Button
8078
onClick={() => toggle(false)}
8179
size={'sm'}

‎src/Components/Dropdown.js renamed to ‎src/Components/Dropdown/Dropdown.js

+14-30
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,26 @@
11
import React, { memo, useState, createRef } from 'react';
2-
import styled, { css } from 'styled-components';
2+
import styled from 'styled-components';
33
import helpers from 'helpers';
44

55
import { useOnClickOutside } from 'hooks/useOnClickOutside';
66
import Menu from 'Components/Menu';
77

88
import { Card } from 'Styled/shared';
9+
import { placement } from './dynamic';
10+
911
import {
1012
alignDynamic,
1113
visibleDynamic,
1214
} from 'Styled/dynamic';
1315

16+
const MenuContainer = styled.div`
17+
margin: 0.125rem 0 0;
18+
padding: 0.5rem 0;
19+
line-height: 1.5;
20+
min-width: 10rem;
21+
transform: none;
22+
`;
23+
1424
const Container = styled.div`
1525
${alignDynamic};
1626
z-index: 12;
@@ -21,7 +31,9 @@ const Container = styled.div`
2131
border-color: transparent;
2232
`;
2333

24-
const ContentStyle = styled(Card)`
34+
const Content = styled(Card)`
35+
${visibleDynamic};
36+
${placement};
2537
text-align: left;
2638
position: absolute;
2739
font-size: 14px;
@@ -30,34 +42,6 @@ const ContentStyle = styled(Card)`
3042
z-index: 1;
3143
`;
3244

33-
const MenuContainer = styled.div`
34-
margin: 0.125rem 0 0;
35-
padding: 0.5rem 0;
36-
line-height: 1.5;
37-
min-width: 10rem;
38-
transform: none;
39-
`;
40-
41-
// Dynamic spacing
42-
const spaceing = css`
43-
top: ${({ top }) => top};
44-
left: ${({ left }) => left};
45-
`;
46-
47-
const transform = css`
48-
transform: ${({ placement }) =>
49-
({
50-
topRight: 'translate3d(12px, -143px, 0px)',
51-
bottomLeft: 'translate3d(-100px, 20px, 0px)',
52-
}[placement])};
53-
`;
54-
55-
const Content = styled(ContentStyle)`
56-
${spaceing};
57-
${transform};
58-
${visibleDynamic};
59-
`;
60-
6145
/**
6246
*
6347
* @component

‎src/Components/Dropdown/dynamic.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { css } from 'styled-components';
2+
3+
const spaceing = css`
4+
top: ${({ top }) => top};
5+
left: ${({ left }) => left};
6+
`;
7+
8+
const translate = css`
9+
transform: ${({ placement }) =>
10+
placement &&
11+
{
12+
topRight: 'translate3d(12px, -143px, 0px)',
13+
bottomLeft: 'translate3d(-100px, 20px, 0px)',
14+
}[placement]};
15+
`;
16+
17+
export const placement = css`
18+
${spaceing};
19+
${translate};
20+
`;

‎src/Components/Empty.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const Empty = memo(
5252
/>
5353
<>
5454
{title && (
55-
<Text fontColor="secondary">{title}</Text>
55+
<Text typefont="secondary">{title}</Text>
5656
)}
5757
{children && children}
5858
</>

0 commit comments

Comments
 (0)