Skip to content
This repository was archived by the owner on Mar 16, 2024. It is now read-only.

Commit 393737c

Browse files
luangjokajluangjokaj
authored
Merge pull request #4 from cherry-design-system/feat/input-variants
Feat/input variants
2 parents 082b9a9 + a9f4e1b commit 393737c

File tree

17 files changed

+285
-125
lines changed

17 files changed

+285
-125
lines changed

‎@types/cherry.d.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@ interface ColProps {
137137
| "inline-flex"
138138
| "none";
139139
fullScreen?: boolean;
140+
sticky?: boolean;
140141
theme?: object;
141142
}
142143

@@ -165,6 +166,7 @@ interface InputProps
165166
size?: "default" | "big";
166167
label?: string;
167168
fullWidth?: boolean;
169+
variant?: "primary" | "secondary" | "tertiary";
168170
theme?: object;
169171
}
170172

@@ -176,13 +178,16 @@ interface ToggleInputProps
176178
size?: "default" | "big";
177179
label?: string;
178180
fullWidth?: boolean;
181+
variant?: "primary" | "secondary" | "tertiary";
179182
theme?: object;
180183
}
181184

182185
interface RangeSliderProps
183186
extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
184187
type?: "range";
185188
size?: "default" | "big";
189+
fullWidth?: boolean;
190+
variant?: "primary" | "secondary" | "tertiary";
186191
theme?: object;
187192
}
188193

@@ -194,6 +199,7 @@ interface SelectProps
194199
size?: "default" | "big";
195200
label?: string;
196201
fullWidth?: boolean;
202+
variant?: "primary" | "secondary" | "tertiary";
197203
theme?: object;
198204
}
199205

@@ -205,6 +211,7 @@ interface TextareaProps
205211
size?: "default" | "big";
206212
label?: string;
207213
fullWidth?: boolean;
214+
variant?: "primary" | "secondary" | "tertiary";
208215
theme?: object;
209216
}
210217

‎dist/cherry.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/cherry.module.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json‎

Lines changed: 2 additions & 2 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 & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "cherry-components",
3-
"version": "0.0.2-6",
3+
"version": "0.0.2-7",
44
"description": "Cherry React Components",
55
"main": "dist/cherry.js",
66
"module": "dist/cherry.module.js",

‎src/Layout/Grid/Col/Col.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ function Col({
3232
lastXxxl,
3333
display,
3434
fullScreen,
35+
sticky,
3536
theme = localTheme,
3637
}) {
3738
return (
@@ -64,8 +65,9 @@ function Col({
6465
lastXxxl,
6566
display,
6667
fullScreen,
68+
sticky,
6769
)}
68-
className={className}
70+
className={className ? `col ${className}` : "col"}
6971
id={id}
7072
data-col
7173
>

‎src/Layout/Grid/Col/Col.styles.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { css } from "@emotion/react";
22
import { mq, Breakpoints } from "../../../mq";
33

44
const col = css`
5-
position: relative;
65
width: 100%;
76
min-height: 1px;
87
flex-basis: 0;
@@ -118,6 +117,7 @@ export const colStyles = (
118117
lastXxxl,
119118
display,
120119
fullScreen,
120+
sticky,
121121
) => css`
122122
${display &&
123123
css`
@@ -158,6 +158,17 @@ export const colStyles = (
158158
}
159159
`}
160160
161+
${sticky &&
162+
css`
163+
${mq(Breakpoints.lg)} {
164+
position: sticky;
165+
top: ${theme.spacing.paddingTopBody.desktop};
166+
max-height: calc(100vh - ${theme.spacing.paddingTopBody.desktop});
167+
overflow-y: auto;
168+
-webkit-overflow-scrolling: touch;
169+
}
170+
`}
171+
161172
${mq(Breakpoints.xs)} {
162173
${firstXs &&
163174
css`

‎src/Layout/Grid/Row/Row.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ function Row({
99
alignItems,
1010
justifyContent,
1111
gutterXs = "default",
12-
gutterSm,
13-
gutterMd,
14-
gutterLg,
15-
gutterXl,
16-
gutterXxl,
17-
gutterXxxl,
12+
gutterSm = "default",
13+
gutterMd = "default",
14+
gutterLg = "default",
15+
gutterXl = "default",
16+
gutterXxl = "default",
17+
gutterXxxl = "default",
1818
theme = localTheme,
1919
}) {
2020
return (

‎src/Layout/Grid/Row/Row.styles.js‎

Lines changed: 21 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,7 @@ export const rowStyles = (
8686
margin-right: ${theme.spacing.marginRow.default};
8787
margin-left: ${theme.spacing.marginRow.default};
8888
89-
& [data-col],
90-
& > * {
89+
& .col {
9190
padding-right: ${theme.spacing.gutterCol.default};
9291
padding-left: ${theme.spacing.gutterCol.default};
9392
}
@@ -98,8 +97,7 @@ export const rowStyles = (
9897
margin-right: ${theme.spacing.marginRow.medium};
9998
margin-left: ${theme.spacing.marginRow.medium};
10099
101-
& [data-col],
102-
& > * {
100+
& .col {
103101
padding-right: ${theme.spacing.gutterCol.medium};
104102
padding-left: ${theme.spacing.gutterCol.medium};
105103
}
@@ -110,8 +108,7 @@ export const rowStyles = (
110108
margin-right: ${theme.spacing.marginRow.big};
111109
margin-left: ${theme.spacing.marginRow.big};
112110
113-
& [data-col],
114-
& > * {
111+
& .col {
115112
padding-right: ${theme.spacing.gutterCol.big};
116113
padding-left: ${theme.spacing.gutterCol.big};
117114
}
@@ -124,8 +121,7 @@ export const rowStyles = (
124121
margin-right: ${theme.spacing.marginRow.default};
125122
margin-left: ${theme.spacing.marginRow.default};
126123
127-
& [data-col],
128-
& > * {
124+
& .col {
129125
padding-right: ${theme.spacing.gutterCol.default};
130126
padding-left: ${theme.spacing.gutterCol.default};
131127
}
@@ -136,8 +132,7 @@ export const rowStyles = (
136132
margin-right: ${theme.spacing.marginRow.medium};
137133
margin-left: ${theme.spacing.marginRow.medium};
138134
139-
& [data-col],
140-
& > * {
135+
& .col {
141136
padding-right: ${theme.spacing.gutterCol.medium};
142137
padding-left: ${theme.spacing.gutterCol.medium};
143138
}
@@ -148,8 +143,7 @@ export const rowStyles = (
148143
margin-right: ${theme.spacing.marginRow.big};
149144
margin-left: ${theme.spacing.marginRow.big};
150145
151-
& [data-col],
152-
& > * {
146+
& .col {
153147
padding-right: ${theme.spacing.gutterCol.big};
154148
padding-left: ${theme.spacing.gutterCol.big};
155149
}
@@ -162,8 +156,7 @@ export const rowStyles = (
162156
margin-right: ${theme.spacing.marginRow.default};
163157
margin-left: ${theme.spacing.marginRow.default};
164158
165-
& [data-col],
166-
& > * {
159+
& .col {
167160
padding-right: ${theme.spacing.gutterCol.default};
168161
padding-left: ${theme.spacing.gutterCol.default};
169162
}
@@ -174,8 +167,7 @@ export const rowStyles = (
174167
margin-right: ${theme.spacing.marginRow.medium};
175168
margin-left: ${theme.spacing.marginRow.medium};
176169
177-
& [data-col],
178-
& > * {
170+
& .col {
179171
padding-right: ${theme.spacing.gutterCol.medium};
180172
padding-left: ${theme.spacing.gutterCol.medium};
181173
}
@@ -186,8 +178,7 @@ export const rowStyles = (
186178
margin-right: ${theme.spacing.marginRow.big};
187179
margin-left: ${theme.spacing.marginRow.big};
188180
189-
& [data-col],
190-
& > * {
181+
& .col {
191182
padding-right: ${theme.spacing.gutterCol.big};
192183
padding-left: ${theme.spacing.gutterCol.big};
193184
}
@@ -200,8 +191,7 @@ export const rowStyles = (
200191
margin-right: ${theme.spacing.marginRow.default};
201192
margin-left: ${theme.spacing.marginRow.default};
202193
203-
& [data-col],
204-
& > * {
194+
& .col {
205195
padding-right: ${theme.spacing.gutterCol.default};
206196
padding-left: ${theme.spacing.gutterCol.default};
207197
}
@@ -212,8 +202,7 @@ export const rowStyles = (
212202
margin-right: ${theme.spacing.marginRow.medium};
213203
margin-left: ${theme.spacing.marginRow.medium};
214204
215-
& [data-col],
216-
& > * {
205+
& .col {
217206
padding-right: ${theme.spacing.gutterCol.medium};
218207
padding-left: ${theme.spacing.gutterCol.medium};
219208
}
@@ -224,8 +213,7 @@ export const rowStyles = (
224213
margin-right: ${theme.spacing.marginRow.big};
225214
margin-left: ${theme.spacing.marginRow.big};
226215
227-
& [data-col],
228-
& > * {
216+
& .col {
229217
padding-right: ${theme.spacing.gutterCol.big};
230218
padding-left: ${theme.spacing.gutterCol.big};
231219
}
@@ -238,8 +226,7 @@ export const rowStyles = (
238226
margin-right: ${theme.spacing.marginRow.default};
239227
margin-left: ${theme.spacing.marginRow.default};
240228
241-
& [data-col],
242-
& > * {
229+
& .col {
243230
padding-right: ${theme.spacing.gutterCol.default};
244231
padding-left: ${theme.spacing.gutterCol.default};
245232
}
@@ -250,8 +237,7 @@ export const rowStyles = (
250237
margin-right: ${theme.spacing.marginRow.medium};
251238
margin-left: ${theme.spacing.marginRow.medium};
252239
253-
& [data-col],
254-
& > * {
240+
& .col {
255241
padding-right: ${theme.spacing.gutterCol.medium};
256242
padding-left: ${theme.spacing.gutterCol.medium};
257243
}
@@ -262,8 +248,7 @@ export const rowStyles = (
262248
margin-right: ${theme.spacing.marginRow.big};
263249
margin-left: ${theme.spacing.marginRow.big};
264250
265-
& [data-col],
266-
& > * {
251+
& .col {
267252
padding-right: ${theme.spacing.gutterCol.big};
268253
padding-left: ${theme.spacing.gutterCol.big};
269254
}
@@ -276,8 +261,7 @@ export const rowStyles = (
276261
margin-right: ${theme.spacing.marginRow.default};
277262
margin-left: ${theme.spacing.marginRow.default};
278263
279-
& [data-col],
280-
& > * {
264+
& .col {
281265
padding-right: ${theme.spacing.gutterCol.default};
282266
padding-left: ${theme.spacing.gutterCol.default};
283267
}
@@ -288,8 +272,7 @@ export const rowStyles = (
288272
margin-right: ${theme.spacing.marginRow.medium};
289273
margin-left: ${theme.spacing.marginRow.medium};
290274
291-
& [data-col],
292-
& > * {
275+
& .col {
293276
padding-right: ${theme.spacing.gutterCol.medium};
294277
padding-left: ${theme.spacing.gutterCol.medium};
295278
}
@@ -300,8 +283,7 @@ export const rowStyles = (
300283
margin-right: ${theme.spacing.marginRow.big};
301284
margin-left: ${theme.spacing.marginRow.big};
302285
303-
& [data-col],
304-
& > * {
286+
& .col {
305287
padding-right: ${theme.spacing.gutterCol.big};
306288
padding-left: ${theme.spacing.gutterCol.big};
307289
}
@@ -314,8 +296,7 @@ export const rowStyles = (
314296
margin-right: ${theme.spacing.marginRow.default};
315297
margin-left: ${theme.spacing.marginRow.default};
316298
317-
& [data-col],
318-
& > * {
299+
& .col {
319300
padding-right: ${theme.spacing.gutterCol.default};
320301
padding-left: ${theme.spacing.gutterCol.default};
321302
}
@@ -326,8 +307,7 @@ export const rowStyles = (
326307
margin-right: ${theme.spacing.marginRow.medium};
327308
margin-left: ${theme.spacing.marginRow.medium};
328309
329-
& [data-col],
330-
& > * {
310+
& .col {
331311
padding-right: ${theme.spacing.gutterCol.medium};
332312
padding-left: ${theme.spacing.gutterCol.medium};
333313
}
@@ -338,8 +318,7 @@ export const rowStyles = (
338318
margin-right: ${theme.spacing.marginRow.big};
339319
margin-left: ${theme.spacing.marginRow.big};
340320
341-
& [data-col],
342-
& > * {
321+
& .col {
343322
padding-right: ${theme.spacing.gutterCol.big};
344323
padding-left: ${theme.spacing.gutterCol.big};
345324
}

‎src/Layout/Input/Input.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,21 @@ function Input({
1313
error,
1414
label,
1515
fullWidth,
16+
variant = "secondary",
1617
theme = localTheme,
1718
...props
1819
}) {
1920
if ((type === "checkbox") | (type === "radio")) {
2021
return (
21-
<div css={radioCheckWrapperStyles(theme, type, size, fullWidth)}>
22+
<div
23+
css={radioCheckWrapperStyles(
24+
theme,
25+
type,
26+
size,
27+
fullWidth,
28+
variant,
29+
)}
30+
>
2231
<input
2332
type={type}
2433
className={className}
@@ -30,6 +39,7 @@ function Input({
3039
success,
3140
error,
3241
fullWidth,
42+
variant,
3343
)}
3444
{...props}
3545
/>
@@ -61,6 +71,7 @@ function Input({
6171
success,
6272
error,
6373
fullWidth,
74+
variant,
6475
)}
6576
{...props}
6677
/>

0 commit comments

Comments
 (0)