Skip to content

Commit 3befe5e

Browse files
author
Kubit
committed
Improve pseudoElements on getStyles
1 parent 604f8c3 commit 3befe5e

File tree

3 files changed

+250
-39
lines changed

3 files changed

+250
-39
lines changed

src/components/button/button.styled.ts

Lines changed: 0 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -58,33 +58,8 @@ export const ButtonStyled = styled.button<IButtonStyled>`
5858
5959
&:disabled {
6060
cursor: default;
61-
${({ $styles, $sizeStyles, $loading }) =>
62-
setTokens(
63-
$loading ? ButtonStateType.LOADING : ButtonStateType.DISABLED,
64-
$styles,
65-
$sizeStyles
66-
)};
6761
}
6862
69-
@media (hover: hover) {
70-
&:hover:not(:disabled) {
71-
${({ $styles, $sizeStyles }) => setTokens(ButtonStateType.HOVER, $styles, $sizeStyles)}
72-
}
73-
}
74-
75-
&:active:not(:disabled) {
76-
${({ $styles, $sizeStyles }) => setTokens(ButtonStateType.PRESSED, $styles, $sizeStyles)}
77-
}
78-
79-
&:focus-visible {
80-
${({ $styles, $sizeStyles }) => setTokens(ButtonStateType.DEFAULT, $styles, $sizeStyles)}
81-
}
82-
83-
@media (hover: none) {
84-
&:hover {
85-
${({ $styles, $sizeStyles }) => setTokens(ButtonStateType.DEFAULT, $styles, $sizeStyles)}
86-
}
87-
}
8863
min-width: ${props => props.minWidth};
8964
width: ${props => (props.$fullWidth ? '100%' : 'auto')};
9065

src/utils/getStyles/__tests__/getStyles.test.ts

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {
2+
AfterOrBeforeType,
23
BackgroundTypes,
34
BorderTypes,
45
BoxShadowTypes,
@@ -7,23 +8,65 @@ import {
78
MarginTypes,
89
MeasuresTypes,
910
PaddingTypes,
11+
PointerTypes,
1012
PositionTypes,
13+
ScrollTypes,
1114
TypographyTypes,
15+
WordWrapTypes,
1216
} from '@/types/index';
17+
import { AnimationType } from '@/types/styles/animation';
1318

1419
import {
20+
getAnimationStyles,
1521
getBackgroundStyles,
1622
getBorderStyles,
1723
getBoxShadowStyles,
1824
getDisplayStyles,
25+
getGenericTypographyStyles,
1926
getMarginStyles,
2027
getMeasuresStyles,
2128
getPaddingStyles,
29+
getPointerStyles,
2230
getPositionStyles,
31+
getPseudoStyles,
32+
getScrollStyles,
2333
getStyles,
2434
getTypographyStyles,
35+
getWordWrapStyles,
2536
} from '../getStyles';
2637

38+
describe('getScrollStyles', () => {
39+
it('Return empty array', () => {
40+
const scrollStyles = getScrollStyles();
41+
expect(scrollStyles).toEqual(['']);
42+
});
43+
it('Return scroll styles', () => {
44+
const props: ScrollTypes = {
45+
scrollbar_width: '10px',
46+
scrollbar_color: 'red',
47+
overflow_block: 'visible',
48+
overflow_inline: 'visible',
49+
overflow_x: 'visible',
50+
overflow_y: 'visible',
51+
overflow: 'visible',
52+
overflow_clip_margin: '10px',
53+
scrollbar_gutter: '10px',
54+
scroll_behavior: 'auto',
55+
scroll_margin: '10px',
56+
scroll_padding: '10px',
57+
scroll_snap_align: 'center',
58+
scroll_snap_stop: 'always',
59+
scroll_snap_type: 'mandatory',
60+
webkit_scrollbar: '10px',
61+
scroll_container: 'auto',
62+
scrollbar_aria_role: 'scrollbar',
63+
};
64+
const scrollStyles = getScrollStyles(props);
65+
66+
expect(scrollStyles).not.toEqual([]);
67+
});
68+
});
69+
2770
describe('getBackgroundStyles', () => {
2871
it('Return empty string', () => {
2972
const backgroundStyles = getBackgroundStyles();
@@ -38,6 +81,8 @@ describe('getBackgroundStyles', () => {
3881
background_position: 'top',
3982
background_repeat: 'repeat-x',
4083
background_size: 'contain',
84+
opacity: '0.5',
85+
accent_color: 'red',
4186
};
4287
const backgroundStyles = getBackgroundStyles(props);
4388

@@ -69,6 +114,20 @@ describe('getBorderStyles', () => {
69114
border_top_right_radius: '2px',
70115
border_bottom_left_radius: '2px',
71116
border_bottom_right_radius: '2px',
117+
border_bottom: '2px',
118+
border_left: '2px',
119+
border_right: '2px',
120+
border_top: '2px',
121+
border_style: 'solid',
122+
border_left_style: 'solid',
123+
border_right_style: 'solid',
124+
border_top_style: 'solid',
125+
border_bottom_style: 'solid',
126+
outline: '2px',
127+
outline_color: 'red',
128+
outline_offset: '2px',
129+
outline_style: 'solid',
130+
outline_width: '2px',
72131
};
73132
const borderStyles = getBorderStyles(props);
74133

@@ -124,6 +183,10 @@ describe('getDisplayStyles', () => {
124183
grid_auto_flow: '1',
125184
grid_auto_rows: '1',
126185
grid_auto_columns: '1',
186+
align_self: 'auto',
187+
column_gap: '1',
188+
justify_items: 'center',
189+
row_gap: '1',
127190
};
128191
const displayStyles = getDisplayStyles(props);
129192

@@ -165,6 +228,7 @@ describe('getMeasuresStyles', () => {
165228
height: '50px',
166229
min_height: '50px',
167230
max_height: '50px',
231+
box_sizing: 'border-box',
168232
};
169233
const measuresStyles = getMeasuresStyles(props);
170234

@@ -207,6 +271,9 @@ describe('getPositionStyles', () => {
207271
left: '0',
208272
float: '0',
209273
z_index: 1,
274+
transform: 'rotate(30deg)',
275+
transform_style: 'preserve-3d',
276+
translate: '10px',
210277
};
211278
const positionStyles = getPositionStyles(props);
212279

@@ -229,6 +296,38 @@ describe('getBoxShadowStyles', () => {
229296
});
230297
});
231298

299+
describe('getGenericTypographyStyles', () => {
300+
it('Return empty array', () => {
301+
const genericTypographyStyles = getGenericTypographyStyles();
302+
expect(genericTypographyStyles).toEqual(['']);
303+
});
304+
it('Return genericTypography styles', () => {
305+
const props: TypographyTypes = {
306+
font_family: 'Roboto',
307+
font_size: '30px',
308+
font_weight: 600,
309+
font_style: 'bold',
310+
line_height: '30px',
311+
letter_spacing: '30px',
312+
text_align: 'center',
313+
text_decoration: 'underline',
314+
text_transform: 'uppercase',
315+
white_space: 'normal',
316+
word_break: 'no-break',
317+
word_wrap: 'no-wrap',
318+
text_overflow: 'ellipsis',
319+
text_shadow: '30px',
320+
text_indent: 'auto',
321+
text_justify: 'auto',
322+
color: 'black',
323+
overflow: 'visible',
324+
};
325+
326+
const genericTypographyStyles = getGenericTypographyStyles(props);
327+
expect(genericTypographyStyles).not.toEqual([]);
328+
});
329+
});
330+
232331
describe('getTypographyStyles', () => {
233332
it('Return empty array', () => {
234333
const typographyStyles = getTypographyStyles();
@@ -262,6 +361,105 @@ describe('getTypographyStyles', () => {
262361
});
263362
});
264363

364+
describe('getPointerStyles', () => {
365+
it('Return empty array', () => {
366+
const pointerStyles = getPointerStyles();
367+
expect(pointerStyles).toEqual(['']);
368+
});
369+
it('Return pointer styles', () => {
370+
const props: PointerTypes = { cursor: 'pointer', pointer_events: 'none' };
371+
const pointerStyles = getPointerStyles(props);
372+
373+
expect(pointerStyles).not.toEqual([]);
374+
});
375+
});
376+
377+
describe('getWordWrapStyles', () => {
378+
it('Return empty array', () => {
379+
const wordWrapStyles = getWordWrapStyles();
380+
expect(wordWrapStyles).toEqual(['']);
381+
});
382+
it('Return wordWrap styles', () => {
383+
const props: WordWrapTypes = {
384+
word_break: 'break-all',
385+
word_wrap: 'break-word',
386+
white_space: 'normal',
387+
text_overflow: 'ellipsis',
388+
};
389+
const wordWrapStyles = getWordWrapStyles(props);
390+
391+
expect(wordWrapStyles).not.toEqual([]);
392+
});
393+
});
394+
395+
describe('getPseudoStyles', () => {
396+
it('Return wordWrap styles', () => {
397+
// pseudo elements
398+
const pseudoKey = {
399+
afterKey: '&::after',
400+
beforeKey: '&::before',
401+
backdropKey: '&::backdrop',
402+
placeholderKey: '&::placeholder',
403+
passwordRevealButtonKey: '&::-ms-reveal',
404+
webkitInnerSpinButtonKey: '&::-webkit-inner-spin-button',
405+
webkitOuterSpinButtonKey: '&::-webkit-outer-spin-button',
406+
ariaInvalidKey: '&:is([aria-invalid="true"])',
407+
focusVisibleKey: '&:focus-visible',
408+
disabledKey: '&:disabled',
409+
focusKey: '&:focus',
410+
dataTruncateKey: '&[data-truncate="true"]',
411+
dataFilledKey: '&[data-filled="true"]',
412+
};
413+
414+
const props: AfterOrBeforeType = {
415+
content: '',
416+
background: 'blue',
417+
};
418+
const pseudoStyles = getPseudoStyles(pseudoKey.backdropKey, props);
419+
const pseudoStyles2 = getPseudoStyles(pseudoKey.placeholderKey, props);
420+
const pseudoStyles3 = getPseudoStyles(pseudoKey.passwordRevealButtonKey, props);
421+
const pseudoStyles4 = getPseudoStyles(pseudoKey.webkitInnerSpinButtonKey, props);
422+
const pseudoStyles5 = getPseudoStyles(pseudoKey.webkitOuterSpinButtonKey, props);
423+
const pseudoStyles6 = getPseudoStyles(pseudoKey.ariaInvalidKey, props);
424+
const pseudoStyles7 = getPseudoStyles(pseudoKey.focusVisibleKey, props);
425+
const pseudoStyles8 = getPseudoStyles(pseudoKey.disabledKey, props);
426+
const pseudoStyles9 = getPseudoStyles(pseudoKey.focusKey, props);
427+
const pseudoStyles10 = getPseudoStyles(pseudoKey.dataTruncateKey, props);
428+
const pseudoStyles11 = getPseudoStyles(pseudoKey.dataFilledKey, props);
429+
430+
expect(pseudoStyles).not.toEqual([]);
431+
expect(pseudoStyles2).not.toEqual([]);
432+
expect(pseudoStyles3).not.toEqual([]);
433+
expect(pseudoStyles4).not.toEqual([]);
434+
expect(pseudoStyles5).not.toEqual([]);
435+
expect(pseudoStyles6).not.toEqual([]);
436+
expect(pseudoStyles7).not.toEqual([]);
437+
expect(pseudoStyles8).not.toEqual([]);
438+
expect(pseudoStyles9).not.toEqual([]);
439+
expect(pseudoStyles10).not.toEqual([]);
440+
expect(pseudoStyles11).not.toEqual([]);
441+
});
442+
});
443+
444+
describe('getAnimationStyles', () => {
445+
it('Return empty array', () => {
446+
const animationStyles = getAnimationStyles();
447+
expect(animationStyles).toEqual(['']);
448+
});
449+
it('Return animation styles', () => {
450+
const props: AnimationType = {
451+
transition: 'all 0.5s ease-in-out',
452+
transition_property: 'all',
453+
transition_duration: '0.5s',
454+
transition_timing_function: 'ease-in-out',
455+
transition_delay: '0.5s',
456+
};
457+
const animationStyles = getAnimationStyles(props);
458+
459+
expect(animationStyles).not.toEqual([]);
460+
});
461+
});
462+
265463
describe('getStyles', () => {
266464
it('Return common styles', () => {
267465
const props: CommonStyleType = {
@@ -273,6 +471,15 @@ describe('getStyles', () => {
273471
after: { content: '', background: 'red' },
274472
before: { content: '', background: 'blue' },
275473
backdrop: { background: 'salmon' },
474+
disabled: { background: 'red' },
475+
focus: { background: 'blue' },
476+
placeholder: { font_size: '20px' },
477+
passwordRevealButton: { background: 'red' },
478+
webkitInnerSpinButton: { background: 'blue' },
479+
webkitOuterSpinButton: { background: 'green' },
480+
ariaInvalid: { background: 'red' },
481+
dataTruncate: { background: 'blue' },
482+
dataFilled: { background: 'green' },
276483
};
277484
const commonStyles = getStyles(props);
278485

0 commit comments

Comments
 (0)