Skip to content

Commit 496a529

Browse files
author
Hector Arce De Las Heras
committed
Include selectorbox styles
1 parent 7206aed commit 496a529

File tree

6 files changed

+235
-3
lines changed

6 files changed

+235
-3
lines changed

‎src/components/selectorBoxFile/selectorBoxFile.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as React from 'react';
22

3+
import { STYLES_NAME } from '@/constants';
34
import { useStyles } from '@/hooks/useStyles/useStyles';
45
import { ErrorBoundary, FallbackComponent } from '@/provider/errorBoundary';
56

@@ -11,8 +12,6 @@ import {
1112
} from './types';
1213
import { getState } from './utils';
1314

14-
const SELECTOR_BOX_FILE_STYLES = 'SELECTOR_BOX_FILE_STYLES';
15-
1615
const SelectorBoxFileComponent = React.forwardRef(
1716
<V extends string | unknown>(
1817
{
@@ -34,7 +33,7 @@ const SelectorBoxFileComponent = React.forwardRef(
3433
ref: React.ForwardedRef<HTMLDivElement> | undefined | null
3534
): JSX.Element => {
3635
const styles = useStyles<SelectorBoxFilePropsStylesType, V>(
37-
SELECTOR_BOX_FILE_STYLES,
36+
STYLES_NAME.SELECTOR_BOX_FILE,
3837
variant,
3938
ctv
4039
);

‎src/designSystem/kubit/components/selectorBoxFile/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './styles';
2+
export * from './variants';

‎src/designSystem/kubit/components/selectorBoxFile/styles.ts

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,226 @@
1+
import { IconPositionType } from '@/components/button';
2+
import { SelectorBoxFileStateType, SelectorBoxFileStylesType } from '@/components/selectorBoxFile';
3+
import { TextDecorationType } from '@/components/text';
4+
5+
// fundations
6+
import { BORDERS, COLORS, FONT_WEIGHT, SPACINGS } from '../../foundations';
7+
import { LoaderVariantType } from '../loader';
8+
import { TextVariantType } from '../text';
9+
import { TooltipVariantType } from '../tooltip';
10+
import { ButtonSizeType, ButtonVariantType } from '../variants';
11+
import { SelectorBoxFileVariantType } from './variants';
12+
13+
const defaultProps = {
14+
header: {
15+
display: 'flex',
16+
flex_direction: 'column',
17+
gap: SPACINGS.spacing_300,
18+
},
19+
titleSubtitleContainer: {
20+
display: 'flex',
21+
flex_direction: 'column',
22+
gap: SPACINGS.spacing_150,
23+
},
24+
title: {
25+
font_variant: TextVariantType.PARAGRAPH_LARGE_EXTENDED,
26+
color: COLORS.NEUTRAL.color_neutral_bg_50,
27+
font_weight: FONT_WEIGHT.font_weight_600,
28+
},
29+
subtitle: {
30+
font_variant: TextVariantType.PARAGRAPH_MEDIUM_EXTENDED,
31+
color: COLORS.NEUTRAL.color_neutral_bg_50,
32+
font_weight: FONT_WEIGHT.font_weight_400,
33+
},
34+
descriptionContainer: {
35+
display: 'flex',
36+
flex_direction: 'column',
37+
align_items: 'baseline',
38+
gap: SPACINGS.spacing_150,
39+
},
40+
description: {
41+
font_variant: TextVariantType.PARAGRAPH_MEDIUM_EXTENDED,
42+
color: COLORS.NEUTRAL.color_neutral_bg_50,
43+
font_weight: FONT_WEIGHT.font_weight_400,
44+
},
45+
button: {
46+
variant: ButtonVariantType.ACTION_SECONDARY,
47+
size: ButtonSizeType.SMALL,
48+
iconPosition: IconPositionType.LEFT,
49+
},
50+
tooltipIconContainer: {
51+
display: 'inline',
52+
margin_left: SPACINGS.spacing_100,
53+
},
54+
tooltip: {
55+
variant: TooltipVariantType.DEFAULT,
56+
},
57+
tooltipIcon: {
58+
width: SPACINGS.spacing_400,
59+
height: SPACINGS.spacing_400,
60+
},
61+
errorMessageContainer: {
62+
display: 'flex',
63+
flex_direction: 'row',
64+
align_items: 'start',
65+
gap: SPACINGS.spacing_100,
66+
margin_top: SPACINGS.spacing_150,
67+
},
68+
errorMessageIcon: {
69+
width: SPACINGS.spacing_300,
70+
height: SPACINGS.spacing_300,
71+
},
72+
errorMessage: {
73+
font_variant: TextVariantType.DEFAULT,
74+
font_weight: FONT_WEIGHT.font_weight_400,
75+
color: COLORS.FEEDBACK.color_feedbackError_font_50,
76+
},
77+
};
78+
79+
const containerBoxCommonProps = {
80+
containerBoxContainer: {
81+
display: 'flex',
82+
flex_direction: 'row',
83+
align_items: 'center',
84+
padding: SPACINGS.spacing_450,
85+
gap: SPACINGS.spacing_300,
86+
cursor: 'pointer',
87+
border: `${BORDERS.border_50} dashed ${COLORS.SECONDARY.color_secondary_border_50}`,
88+
},
89+
containerBoxLoader: {
90+
variant: LoaderVariantType.PRIMARY_BLACK,
91+
width: SPACINGS.spacing_450,
92+
},
93+
containerBoxIcon: {
94+
width: SPACINGS.spacing_450,
95+
height: SPACINGS.spacing_450,
96+
},
97+
containerBoxTextsContainer: {
98+
display: 'flex',
99+
flex_direction: 'column',
100+
},
101+
containerBoxFilename: {
102+
font_variant: TextVariantType.PARAGRAPH_MEDIUM_EXTENDED,
103+
color: COLORS.NEUTRAL.color_neutral_bg_50,
104+
font_weight: FONT_WEIGHT.font_weight_400,
105+
},
106+
containerActionContainer: {
107+
display: 'flex',
108+
flex_direction: 'row',
109+
justify_content: 'space-between',
110+
},
111+
actionIcon: {
112+
display: 'inline',
113+
margin_right: SPACINGS.spacing_350,
114+
width: SPACINGS.spacing_350,
115+
height: SPACINGS.spacing_350,
116+
},
117+
actionIconAndActionTextContainer: {
118+
display: 'flex',
119+
gap: SPACINGS.spacing_100,
120+
},
121+
containerBoxActionText: {
122+
display: 'flex',
123+
flex_direction: 'row',
124+
font_variant: TextVariantType.PARAGRAPH_MEDIUM_EXTENDED,
125+
font_weight: FONT_WEIGHT.font_weight_400,
126+
text_decoration: TextDecorationType.UNDERLINE,
127+
padding_left: SPACINGS.spacing_150,
128+
},
129+
containerBoxDescription: {
130+
font_variant: TextVariantType.PARAGRAPH_MEDIUM_EXTENDED,
131+
color: COLORS.NEUTRAL.color_neutral_font_50,
132+
font_weight: FONT_WEIGHT.font_weight_400,
133+
gap: SPACINGS.spacing_600,
134+
},
135+
};
136+
137+
export const SELECTOR_BOX_FILE_STYLES: SelectorBoxFileStylesType<SelectorBoxFileVariantType> = {
138+
[SelectorBoxFileVariantType.DEFAULT]: {
139+
...defaultProps,
140+
states: {
141+
[SelectorBoxFileStateType.DEFAULT]: {
142+
...containerBoxCommonProps,
143+
containerBoxTextsContainer: {
144+
...containerBoxCommonProps.containerBoxTextsContainer,
145+
},
146+
containerBoxActionText: {
147+
...containerBoxCommonProps.containerBoxActionText,
148+
text_decoration: TextDecorationType.NONE,
149+
},
150+
containerBoxDescription: {
151+
...containerBoxCommonProps.containerBoxDescription,
152+
},
153+
},
154+
[SelectorBoxFileStateType.LOADING]: {
155+
...containerBoxCommonProps,
156+
containerBoxActionText: {
157+
...containerBoxCommonProps.containerBoxActionText,
158+
font_variant: TextVariantType.PARAGRAPH_SMALL_EXTENDED,
159+
color: COLORS.ACCENT.color_accent_default_font_100,
160+
},
161+
},
162+
[SelectorBoxFileStateType.SUCCESS]: {
163+
...containerBoxCommonProps,
164+
containerBoxContainer: {
165+
...containerBoxCommonProps.containerBoxContainer,
166+
},
167+
containerBoxIcon: {
168+
...containerBoxCommonProps.containerBoxIcon,
169+
},
170+
containerBoxActionText: {
171+
...containerBoxCommonProps.containerBoxActionText,
172+
font_variant: TextVariantType.PARAGRAPH_SMALL_EXTENDED,
173+
color: COLORS.ACCENT.color_accent_default_font_100,
174+
},
175+
actionIcon: {
176+
...containerBoxCommonProps.actionIcon,
177+
},
178+
actionIconAndActionTextContainer: {
179+
...containerBoxCommonProps.actionIconAndActionTextContainer,
180+
},
181+
},
182+
[SelectorBoxFileStateType.ERROR]: {
183+
...containerBoxCommonProps,
184+
containerBoxContainer: {
185+
...containerBoxCommonProps.containerBoxContainer,
186+
border: `${BORDERS.border_50} dashed ${COLORS.SECONDARY.color_secondary_border_100}`,
187+
},
188+
containerBoxIcon: {
189+
...containerBoxCommonProps.containerBoxIcon,
190+
},
191+
containerBoxActionText: {
192+
...containerBoxCommonProps.containerBoxActionText,
193+
font_variant: TextVariantType.PARAGRAPH_SMALL_EXTENDED,
194+
color: COLORS.ACCENT.color_accent_default_font_100,
195+
},
196+
actionIcon: {
197+
...containerBoxCommonProps.actionIcon,
198+
},
199+
actionIconAndActionTextContainer: {
200+
...containerBoxCommonProps.actionIconAndActionTextContainer,
201+
},
202+
},
203+
[SelectorBoxFileStateType.DISABLED]: {
204+
...containerBoxCommonProps,
205+
containerBoxContainer: {
206+
...containerBoxCommonProps.containerBoxContainer,
207+
background_color: COLORS.DISABLED.color_accentDisabled_bg_150,
208+
border: `${BORDERS.border_50} dashed ${COLORS.DISABLED.color_accentDisabled_border_50}`,
209+
},
210+
containerBoxIcon: {
211+
...containerBoxCommonProps.containerBoxIcon,
212+
},
213+
containerBoxFilename: {
214+
...containerBoxCommonProps.containerBoxFilename,
215+
},
216+
containerBoxActionText: {
217+
...containerBoxCommonProps.containerBoxActionText,
218+
text_decoration: TextDecorationType.NONE,
219+
},
220+
containerBoxDescription: {
221+
...containerBoxCommonProps.containerBoxDescription,
222+
},
223+
},
224+
},
225+
},
226+
};

‎src/designSystem/kubit/components/selectorBoxFile/variants.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export enum SelectorBoxFileVariantType {
2+
DEFAULT = 'DEFAULT',
3+
}

‎src/designSystem/kubit/components/styles.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,3 +67,4 @@ export * from './stepperNumber/styles';
6767
export * from './thirdPartyAnimation/styles';
6868
export * from './textArea/styles';
6969
export * from './loadingState/styles';
70+
export * from './selectorBoxFile/styles';

‎src/designSystem/kubit/components/variants.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,3 +67,4 @@ export * from './thirdPartyAnimation/variants';
6767
export * from './textArea/variants';
6868
export * from './loadingState/variants';
6969
export * from './textCount/variants';
70+
export * from './selectorBoxFile/variants';

0 commit comments

Comments
 (0)