@integrigo/integrigo-ui 1.6.8 → 1.6.10-a
Sign up to get free protection for your applications and to get access to all the features.
- package/lib/index.d.ts +1 -1
- package/lib/index.esm.js +1 -1
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/src/components/atoms/Alert/Alert.d.ts +10 -0
- package/lib/src/components/atoms/Alert/Alert.stories.d.ts +6 -0
- package/lib/src/components/atoms/Alert/index.d.ts +1 -0
- package/lib/src/components/atoms/Avatar/Avatar.d.ts +8 -0
- package/lib/src/components/atoms/Avatar/Avatar.stories.d.ts +13 -0
- package/lib/src/components/atoms/Avatar/Avatar.test.d.ts +1 -0
- package/lib/src/components/atoms/Avatar/index.d.ts +1 -0
- package/lib/src/components/atoms/Card/Card.d.ts +5 -0
- package/lib/src/components/atoms/Card/Card.stories.d.ts +5 -0
- package/lib/src/components/atoms/Card/index.d.ts +1 -0
- package/lib/src/components/atoms/Chip/Chip.d.ts +25 -0
- package/lib/src/components/atoms/Chip/Chip.stories.d.ts +6 -0
- package/lib/src/components/atoms/Chip/Chip.test.d.ts +1 -0
- package/lib/src/components/atoms/Chip/index.d.ts +1 -0
- package/lib/src/components/atoms/Divider/Divider.d.ts +5 -0
- package/lib/src/components/atoms/Divider/Divider.stories.d.ts +14 -0
- package/lib/src/components/atoms/Divider/index.d.ts +1 -0
- package/lib/src/components/atoms/Dot/Dot.d.ts +9 -0
- package/lib/src/components/atoms/Dot/Dot.stories.d.ts +42 -0
- package/lib/src/components/atoms/Dot/Dot.test.d.ts +1 -0
- package/lib/src/components/atoms/Dot/index.d.ts +1 -0
- package/lib/src/components/atoms/Field/FieldLabel.d.ts +7 -0
- package/lib/src/components/atoms/Field/FieldWrapper.d.ts +4 -0
- package/lib/src/components/atoms/Field/fieldSizeVariants.d.ts +22 -0
- package/lib/src/components/atoms/Field/index.d.ts +3 -0
- package/lib/src/components/atoms/Icon/Icon.d.ts +42 -0
- package/lib/src/components/atoms/Icon/Icon.stories.d.ts +18 -0
- package/lib/src/components/atoms/Icon/IconAddition.d.ts +12 -0
- package/lib/src/components/atoms/Icon/icons/AngleDown.d.ts +3 -0
- package/lib/src/components/atoms/Icon/icons/ArrowLeft.d.ts +3 -0
- package/lib/src/components/atoms/Icon/icons/Bars.d.ts +3 -0
- package/lib/src/components/atoms/Icon/icons/Bell.d.ts +3 -0
- package/lib/src/components/atoms/Icon/icons/ChechSquare.d.ts +3 -0
- package/lib/src/components/atoms/Icon/icons/CheckCircle.d.ts +3 -0
- package/lib/src/components/atoms/Icon/icons/ClipboardNotes.d.ts +3 -0
- package/lib/src/components/atoms/Icon/icons/Close.d.ts +3 -0
- package/lib/src/components/atoms/Icon/icons/DiceFive.d.ts +3 -0
- package/lib/src/components/atoms/Icon/icons/Edit.d.ts +3 -0
- package/lib/src/components/atoms/Icon/icons/Envelope.d.ts +3 -0
- package/lib/src/components/atoms/Icon/icons/ExclamationCircle.d.ts +3 -0
- package/lib/src/components/atoms/Icon/icons/ExclamationTriangle.d.ts +3 -0
- package/lib/src/components/atoms/Icon/icons/Exit.d.ts +3 -0
- package/lib/src/components/atoms/Icon/icons/Facebook.d.ts +3 -0
- package/lib/src/components/atoms/Icon/icons/Home.d.ts +3 -0
- package/lib/src/components/atoms/Icon/icons/ImageEdit.d.ts +3 -0
- package/lib/src/components/atoms/Icon/icons/Instagram.d.ts +3 -0
- package/lib/src/components/atoms/Icon/icons/Linkedin.d.ts +3 -0
- package/lib/src/components/atoms/Icon/icons/Lock.d.ts +3 -0
- package/lib/src/components/atoms/Icon/icons/Minus.d.ts +3 -0
- package/lib/src/components/atoms/Icon/icons/Phone.d.ts +3 -0
- package/lib/src/components/atoms/Icon/icons/Plus.d.ts +3 -0
- package/lib/src/components/atoms/Icon/icons/PointsCircle.d.ts +3 -0
- package/lib/src/components/atoms/Icon/icons/Process.d.ts +3 -0
- package/lib/src/components/atoms/Icon/icons/Redo.d.ts +3 -0
- package/lib/src/components/atoms/Icon/icons/Setting.d.ts +3 -0
- package/lib/src/components/atoms/Icon/icons/UserCircle.d.ts +3 -0
- package/lib/src/components/atoms/Icon/icons/Users.d.ts +3 -0
- package/lib/src/components/atoms/Icon/index.d.ts +3 -0
- package/lib/src/components/atoms/Initials/Initials.d.ts +7 -0
- package/lib/src/components/atoms/Initials/Initials.stories.d.ts +11 -0
- package/lib/src/components/atoms/Initials/index.d.ts +1 -0
- package/lib/src/components/atoms/Nav/Nav.d.ts +4 -0
- package/lib/src/components/atoms/Nav/Nav.stories.d.ts +5 -0
- package/lib/src/components/atoms/Nav/index.d.ts +1 -0
- package/lib/src/components/atoms/Pill/Pill.d.ts +4 -0
- package/lib/src/components/atoms/Pill/Pill.stories.d.ts +6 -0
- package/lib/src/components/atoms/Pill/index.d.ts +1 -0
- package/lib/src/components/atoms/Spinner/Spinner.d.ts +4 -0
- package/lib/src/components/atoms/Spinner/Spinner.stories.d.ts +5 -0
- package/lib/src/components/atoms/Spinner/index.d.ts +1 -0
- package/lib/src/components/atoms/Typography/Body.d.ts +6 -0
- package/lib/src/components/atoms/Typography/Body.stories.d.ts +8 -0
- package/lib/src/components/atoms/Typography/Hero.d.ts +5 -0
- package/lib/src/components/atoms/Typography/Hero.stories.d.ts +9 -0
- package/lib/src/components/atoms/Typography/Label.d.ts +7 -0
- package/lib/src/components/atoms/Typography/Label.stories.d.ts +9 -0
- package/lib/src/components/atoms/Typography/index.d.ts +6 -0
- package/lib/src/components/atoms/index.d.ts +11 -0
- package/lib/src/components/molecules/Button/BasicButton.d.ts +35 -0
- package/lib/src/components/molecules/Button/Button.d.ts +12 -0
- package/lib/src/components/molecules/Button/Button.stories.d.ts +11 -0
- package/lib/src/components/molecules/Button/Button.test.d.ts +1 -0
- package/lib/src/components/molecules/Button/Ghost.d.ts +16 -0
- package/lib/src/components/molecules/Button/Primary.d.ts +7 -0
- package/lib/src/components/molecules/Button/index.d.ts +1 -0
- package/lib/src/components/molecules/Checkbox/Checkbox.d.ts +9 -0
- package/lib/src/components/molecules/Checkbox/Checkbox.stories.d.ts +19 -0
- package/lib/src/components/molecules/Checkbox/index.d.ts +1 -0
- package/lib/src/components/molecules/Dropdown/Dropdown.d.ts +15 -0
- package/lib/src/components/molecules/Dropdown/Dropdown.stories.d.ts +12 -0
- package/lib/src/components/molecules/Dropdown/Option.d.ts +2 -0
- package/lib/src/components/molecules/Dropdown/index.d.ts +1 -0
- package/lib/src/components/molecules/InfoCard/InfoCard.d.ts +9 -0
- package/lib/src/components/molecules/InfoCard/InfoCard.stories.d.ts +7 -0
- package/lib/src/components/molecules/InfoCard/index.d.ts +1 -0
- package/lib/src/components/molecules/Input/Input.d.ts +20 -0
- package/lib/src/components/molecules/Input/Input.stories.d.ts +75 -0
- package/lib/src/components/molecules/Input/index.d.ts +1 -0
- package/lib/src/components/molecules/Profile/Profile.d.ts +8 -0
- package/lib/src/components/molecules/Profile/Profile.stories.d.ts +33 -0
- package/lib/src/components/molecules/Profile/Profile.test.d.ts +1 -0
- package/lib/src/components/molecules/Profile/index.d.ts +1 -0
- package/lib/src/components/molecules/Radio/Radio.d.ts +15 -0
- package/lib/src/components/molecules/Radio/Radio.stories.d.ts +20 -0
- package/lib/src/components/molecules/Radio/Radio.test.d.ts +1 -0
- package/lib/src/components/molecules/Radio/index.d.ts +1 -0
- package/lib/src/components/molecules/TextArea/TextArea.d.ts +6 -0
- package/lib/src/components/molecules/TextArea/TextArea.stories.d.ts +8 -0
- package/lib/src/components/molecules/TextArea/index.d.ts +1 -0
- package/lib/src/components/molecules/index.d.ts +8 -0
- package/lib/src/components/organisms/Menu/Menu.d.ts +12 -0
- package/lib/src/components/organisms/Menu/Menu.stories.d.ts +9 -0
- package/lib/src/components/organisms/Menu/MenuItem.d.ts +9 -0
- package/lib/src/components/organisms/Menu/index.d.ts +1 -0
- package/lib/src/components/organisms/Setting/Setting.d.ts +10 -0
- package/lib/src/components/organisms/Setting/Setting.stories.d.ts +5 -0
- package/lib/src/components/organisms/Setting/index.d.ts +1 -0
- package/lib/src/components/organisms/index.d.ts +2 -0
- package/lib/src/helpers/validation.d.ts +3 -0
- package/lib/src/index.d.ts +4 -0
- package/lib/src/styles/colors.d.ts +24 -0
- package/lib/src/styles/global.d.ts +1 -0
- package/lib/src/styles/index.d.ts +2 -0
- package/lib/src/types/validation.d.ts +1 -0
- package/package.json +1 -1
- package/src/.storybook/main.js +12 -0
- package/src/.storybook/preview.js +20 -0
- package/src/components/atoms/Alert/Alert.stories.tsx +26 -0
- package/src/components/atoms/Alert/Alert.tsx +107 -0
- package/src/components/atoms/Alert/index.ts +1 -0
- package/src/components/atoms/Avatar/Avatar.stories.tsx +25 -0
- package/src/components/atoms/Avatar/Avatar.test.tsx +17 -0
- package/src/components/atoms/Avatar/Avatar.tsx +34 -0
- package/src/components/atoms/Avatar/__snapshots__/Avatar.test.tsx.snap +13 -0
- package/src/components/atoms/Avatar/index.ts +1 -0
- package/src/components/atoms/Card/Card.stories.tsx +29 -0
- package/src/components/atoms/Card/Card.tsx +32 -0
- package/src/components/atoms/Card/index.ts +1 -0
- package/src/components/atoms/Chip/Chip.stories.tsx +62 -0
- package/src/components/atoms/Chip/Chip.test.tsx +23 -0
- package/src/components/atoms/Chip/Chip.tsx +233 -0
- package/src/components/atoms/Chip/__snapshots__/Chip.test.tsx.snap +58 -0
- package/src/components/atoms/Chip/index.ts +1 -0
- package/src/components/atoms/Divider/Divider.stories.tsx +27 -0
- package/src/components/atoms/Divider/Divider.tsx +12 -0
- package/src/components/atoms/Divider/index.ts +1 -0
- package/src/components/atoms/Dot/Dot.stories.tsx +35 -0
- package/src/components/atoms/Dot/Dot.test.tsx +9 -0
- package/src/components/atoms/Dot/Dot.tsx +42 -0
- package/src/components/atoms/Dot/index.ts +1 -0
- package/src/components/atoms/Field/FieldLabel.tsx +32 -0
- package/src/components/atoms/Field/FieldWrapper.tsx +14 -0
- package/src/components/atoms/Field/fieldSizeVariants.tsx +22 -0
- package/src/components/atoms/Field/index.ts +3 -0
- package/src/components/atoms/Icon/Icon.stories.tsx +39 -0
- package/src/components/atoms/Icon/Icon.tsx +109 -0
- package/src/components/atoms/Icon/IconAddition.tsx +94 -0
- package/src/components/atoms/Icon/icons/AngleDown.tsx +9 -0
- package/src/components/atoms/Icon/icons/ArrowLeft.tsx +9 -0
- package/src/components/atoms/Icon/icons/Bars.tsx +9 -0
- package/src/components/atoms/Icon/icons/Bell.tsx +9 -0
- package/src/components/atoms/Icon/icons/ChechSquare.tsx +9 -0
- package/src/components/atoms/Icon/icons/CheckCircle.tsx +9 -0
- package/src/components/atoms/Icon/icons/ClipboardNotes.tsx +9 -0
- package/src/components/atoms/Icon/icons/Close.tsx +9 -0
- package/src/components/atoms/Icon/icons/DiceFive.tsx +9 -0
- package/src/components/atoms/Icon/icons/Edit.tsx +9 -0
- package/src/components/atoms/Icon/icons/Envelope.tsx +9 -0
- package/src/components/atoms/Icon/icons/ExclamationCircle.tsx +9 -0
- package/src/components/atoms/Icon/icons/ExclamationTriangle.tsx +9 -0
- package/src/components/atoms/Icon/icons/Exit.tsx +9 -0
- package/src/components/atoms/Icon/icons/Facebook.tsx +9 -0
- package/src/components/atoms/Icon/icons/Home.tsx +9 -0
- package/src/components/atoms/Icon/icons/ImageEdit.tsx +9 -0
- package/src/components/atoms/Icon/icons/Instagram.tsx +9 -0
- package/src/components/atoms/Icon/icons/Linkedin.tsx +9 -0
- package/src/components/atoms/Icon/icons/Lock.tsx +9 -0
- package/src/components/atoms/Icon/icons/Minus.tsx +9 -0
- package/src/components/atoms/Icon/icons/Phone.tsx +9 -0
- package/src/components/atoms/Icon/icons/Plus.tsx +9 -0
- package/src/components/atoms/Icon/icons/PointsCircle.tsx +9 -0
- package/src/components/atoms/Icon/icons/Process.tsx +9 -0
- package/src/components/atoms/Icon/icons/Redo.tsx +9 -0
- package/src/components/atoms/Icon/icons/Setting.tsx +9 -0
- package/src/components/atoms/Icon/icons/UserCircle.tsx +9 -0
- package/src/components/atoms/Icon/icons/Users.tsx +9 -0
- package/src/components/atoms/Icon/index.ts +3 -0
- package/src/components/atoms/Initials/Initials.stories.tsx +23 -0
- package/src/components/atoms/Initials/Initials.tsx +36 -0
- package/src/components/atoms/Initials/index.ts +1 -0
- package/src/components/atoms/Nav/Nav.stories.tsx +19 -0
- package/src/components/atoms/Nav/Nav.tsx +21 -0
- package/src/components/atoms/Nav/index.ts +1 -0
- package/src/components/atoms/Pill/Pill.stories.tsx +27 -0
- package/src/components/atoms/Pill/Pill.tsx +17 -0
- package/src/components/atoms/Pill/index.ts +1 -0
- package/src/components/atoms/Spinner/Spinner.stories.tsx +20 -0
- package/src/components/atoms/Spinner/Spinner.tsx +20 -0
- package/src/components/atoms/Spinner/index.ts +1 -0
- package/src/components/atoms/Typography/Body.stories.tsx +36 -0
- package/src/components/atoms/Typography/Body.tsx +16 -0
- package/src/components/atoms/Typography/Hero.stories.tsx +36 -0
- package/src/components/atoms/Typography/Hero.tsx +27 -0
- package/src/components/atoms/Typography/Label.stories.tsx +36 -0
- package/src/components/atoms/Typography/Label.tsx +43 -0
- package/src/components/atoms/Typography/index.ts +5 -0
- package/src/components/atoms/index.ts +11 -0
- package/src/components/molecules/Button/BasicButton.tsx +137 -0
- package/src/components/molecules/Button/Button.stories.tsx +74 -0
- package/src/components/molecules/Button/Button.test.tsx +63 -0
- package/src/components/molecules/Button/Button.tsx +180 -0
- package/src/components/molecules/Button/Ghost.tsx +75 -0
- package/src/components/molecules/Button/Primary.tsx +41 -0
- package/src/components/molecules/Button/__snapshots__/Button.test.tsx.snap +208 -0
- package/src/components/molecules/Button/index.ts +1 -0
- package/src/components/molecules/Checkbox/Checkbox.stories.tsx +33 -0
- package/src/components/molecules/Checkbox/Checkbox.tsx +147 -0
- package/src/components/molecules/Checkbox/index.tsx +1 -0
- package/src/components/molecules/Dropdown/Dropdown.stories.tsx +30 -0
- package/src/components/molecules/Dropdown/Dropdown.tsx +95 -0
- package/src/components/molecules/Dropdown/Option.tsx +5 -0
- package/src/components/molecules/Dropdown/index.ts +1 -0
- package/src/components/molecules/InfoCard/InfoCard.stories.tsx +32 -0
- package/src/components/molecules/InfoCard/InfoCard.tsx +69 -0
- package/src/components/molecules/InfoCard/index.tsx +1 -0
- package/src/components/molecules/Input/Input.stories.tsx +80 -0
- package/src/components/molecules/Input/Input.tsx +120 -0
- package/src/components/molecules/Input/index.ts +1 -0
- package/src/components/molecules/Profile/Profile.stories.tsx +32 -0
- package/src/components/molecules/Profile/Profile.test.tsx +19 -0
- package/src/components/molecules/Profile/Profile.tsx +60 -0
- package/src/components/molecules/Profile/index.ts +1 -0
- package/src/components/molecules/Radio/Radio.stories.tsx +37 -0
- package/src/components/molecules/Radio/Radio.test.tsx +43 -0
- package/src/components/molecules/Radio/Radio.tsx +203 -0
- package/src/components/molecules/Radio/__snapshots__/Radio.test.tsx.snap +82 -0
- package/src/components/molecules/Radio/index.tsx +1 -0
- package/src/components/molecules/TextArea/TextArea.stories.tsx +37 -0
- package/src/components/molecules/TextArea/TextArea.tsx +50 -0
- package/src/components/molecules/TextArea/index.ts +1 -0
- package/src/components/molecules/index.ts +8 -0
- package/src/components/organisms/Menu/Menu.stories.tsx +20 -0
- package/src/components/organisms/Menu/Menu.tsx +29 -0
- package/src/components/organisms/Menu/MenuItem.tsx +62 -0
- package/src/components/organisms/Menu/index.ts +1 -0
- package/src/components/organisms/Setting/Setting.stories.tsx +21 -0
- package/src/components/organisms/Setting/Setting.tsx +97 -0
- package/src/components/organisms/Setting/index.ts +1 -0
- package/src/components/organisms/index.ts +2 -0
- package/src/global.d.ts +6 -0
- package/src/helpers/validation.ts +31 -0
- package/src/index.ts +28 -0
- package/src/styles/colors.ts +30 -0
- package/src/styles/global.ts +94 -0
- package/src/styles/index.ts +2 -0
- package/src/types/validation.ts +1 -0
@@ -0,0 +1,203 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import styled from 'styled-components';
|
3
|
+
import { FieldLabel } from '../../atoms/Field';
|
4
|
+
import { Label } from '../../atoms/Typography/Label';
|
5
|
+
|
6
|
+
export enum Size {
|
7
|
+
xl = 'xl',
|
8
|
+
l = 'l',
|
9
|
+
m = 'm',
|
10
|
+
s = 's',
|
11
|
+
}
|
12
|
+
|
13
|
+
export type RadioProps = Omit<
|
14
|
+
React.InputHTMLAttributes<HTMLInputElement>,
|
15
|
+
'type' | 'size'
|
16
|
+
> & {
|
17
|
+
size?: Size;
|
18
|
+
label?: string;
|
19
|
+
};
|
20
|
+
|
21
|
+
const sizeVariant = {
|
22
|
+
xl: {
|
23
|
+
size: '30px',
|
24
|
+
border: '4px',
|
25
|
+
gap: '10px',
|
26
|
+
fontSize: '20px',
|
27
|
+
lineHeight: '30px',
|
28
|
+
checkmarkBefore: {
|
29
|
+
width: '3px',
|
30
|
+
height: '16px',
|
31
|
+
left: '11px',
|
32
|
+
top: '2px',
|
33
|
+
},
|
34
|
+
checkmarkAfter: {
|
35
|
+
width: '6px',
|
36
|
+
height: '3px',
|
37
|
+
left: '6px',
|
38
|
+
top: '15px',
|
39
|
+
},
|
40
|
+
},
|
41
|
+
l: {
|
42
|
+
size: '24px',
|
43
|
+
border: '3px',
|
44
|
+
gap: '8px',
|
45
|
+
fontSize: '16px',
|
46
|
+
lineHeight: '24px',
|
47
|
+
checkmarkBefore: {
|
48
|
+
width: '3px',
|
49
|
+
height: '12px',
|
50
|
+
left: '10px',
|
51
|
+
top: '2px',
|
52
|
+
},
|
53
|
+
checkmarkAfter: {
|
54
|
+
width: '5px',
|
55
|
+
height: '3px',
|
56
|
+
left: '5px',
|
57
|
+
top: '11px',
|
58
|
+
},
|
59
|
+
},
|
60
|
+
m: {
|
61
|
+
size: '18px',
|
62
|
+
border: '2.5px',
|
63
|
+
gap: '6px',
|
64
|
+
fontSize: '12px',
|
65
|
+
lineHeight: '18px',
|
66
|
+
checkmarkBefore: {
|
67
|
+
width: '2px',
|
68
|
+
height: '10px',
|
69
|
+
left: '7px',
|
70
|
+
top: '0px',
|
71
|
+
},
|
72
|
+
checkmarkAfter: {
|
73
|
+
width: '5px',
|
74
|
+
height: '2px',
|
75
|
+
left: '4px',
|
76
|
+
top: '9px',
|
77
|
+
},
|
78
|
+
},
|
79
|
+
s: {
|
80
|
+
size: '12px',
|
81
|
+
border: '2px',
|
82
|
+
gap: '4px',
|
83
|
+
fontSize: '8px',
|
84
|
+
lineHeight: '12px',
|
85
|
+
checkmarkBefore: {
|
86
|
+
width: '1px',
|
87
|
+
height: '6px',
|
88
|
+
left: '4px',
|
89
|
+
top: '1px',
|
90
|
+
},
|
91
|
+
checkmarkAfter: {
|
92
|
+
width: '2px',
|
93
|
+
height: '1px',
|
94
|
+
left: '2px',
|
95
|
+
top: '6px',
|
96
|
+
},
|
97
|
+
},
|
98
|
+
};
|
99
|
+
|
100
|
+
export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
|
101
|
+
({ size = Size.m, label = '', ...props }, ref) => {
|
102
|
+
return (
|
103
|
+
<FieldLabel sizeVariant={size} position="inline" disabled={props.disabled}>
|
104
|
+
<Label size={size} text={label}>
|
105
|
+
<Input ref={ref} type="radio" sizeVariant={size} {...props} />
|
106
|
+
<Checkmark data-testid="checkmark" sizeVariant={size} />
|
107
|
+
</Label>
|
108
|
+
</FieldLabel>
|
109
|
+
);
|
110
|
+
},
|
111
|
+
);
|
112
|
+
|
113
|
+
const Input = styled.input<{
|
114
|
+
sizeVariant: Size;
|
115
|
+
}>`
|
116
|
+
position: absolute;
|
117
|
+
opacity: 0;
|
118
|
+
cursor: pointer;
|
119
|
+
width: 0;
|
120
|
+
height: 0;
|
121
|
+
`;
|
122
|
+
|
123
|
+
Input.displayName = 'Input';
|
124
|
+
|
125
|
+
const Checkmark = styled.span<{
|
126
|
+
sizeVariant: Size;
|
127
|
+
}>`
|
128
|
+
width: min-content;
|
129
|
+
background-color: var(--color-white);
|
130
|
+
border-radius: 50%;
|
131
|
+
transform: rotate(45deg);
|
132
|
+
|
133
|
+
${(p) => `
|
134
|
+
border: ${sizeVariant[p.sizeVariant].border} solid var(--shades-of-grey-40);
|
135
|
+
width: ${sizeVariant[p.sizeVariant].size};
|
136
|
+
height: ${sizeVariant[p.sizeVariant].size};
|
137
|
+
`}
|
138
|
+
|
139
|
+
&:before {
|
140
|
+
display: none;
|
141
|
+
content: "";
|
142
|
+
position: absolute;
|
143
|
+
background-color: var(--color-white);
|
144
|
+
|
145
|
+
${(p) => `
|
146
|
+
width: ${sizeVariant[p.sizeVariant].checkmarkBefore.width};
|
147
|
+
height: ${sizeVariant[p.sizeVariant].checkmarkBefore.height};
|
148
|
+
left: ${sizeVariant[p.sizeVariant].checkmarkBefore.left};
|
149
|
+
top: ${sizeVariant[p.sizeVariant].checkmarkBefore.top};
|
150
|
+
`}
|
151
|
+
}
|
152
|
+
|
153
|
+
&:after {
|
154
|
+
display: none;
|
155
|
+
content: "";
|
156
|
+
position: absolute;
|
157
|
+
background-color: var(--color-white);
|
158
|
+
${(p) => `
|
159
|
+
width: ${sizeVariant[p.sizeVariant].checkmarkAfter.width};
|
160
|
+
height: ${sizeVariant[p.sizeVariant].checkmarkAfter.height};
|
161
|
+
left: ${sizeVariant[p.sizeVariant].checkmarkAfter.left};
|
162
|
+
top: ${sizeVariant[p.sizeVariant].checkmarkAfter.top};
|
163
|
+
`}
|
164
|
+
}
|
165
|
+
|
166
|
+
${Input}:disabled ~ & {
|
167
|
+
opacity: 0.5;
|
168
|
+
}
|
169
|
+
|
170
|
+
// not checked
|
171
|
+
${Input}:not(:checked):not([disabled]):hover ~ & {
|
172
|
+
border-color: var(--shades-of-grey-60);
|
173
|
+
}
|
174
|
+
|
175
|
+
${Input}:not(:checked):not([disabled]):active ~ & {
|
176
|
+
border-color: var(--shades-of-grey-60);
|
177
|
+
background-color: var(--shades-of-grey-60);
|
178
|
+
}
|
179
|
+
|
180
|
+
// checked
|
181
|
+
${Input}:checked ~ & {
|
182
|
+
background-color: var(--color-orange);
|
183
|
+
border-color: var(--color-orange);
|
184
|
+
}
|
185
|
+
|
186
|
+
${Input}:checked:hover ~ & {
|
187
|
+
opacity: 0.8;
|
188
|
+
}
|
189
|
+
|
190
|
+
${Input}:checked:not([disabled]):active ~ & {
|
191
|
+
opacity: 0.65;
|
192
|
+
}
|
193
|
+
|
194
|
+
${Input}:checked ~ &:before {
|
195
|
+
display: block;
|
196
|
+
}
|
197
|
+
|
198
|
+
${Input}:checked ~ &:after {
|
199
|
+
display: block;
|
200
|
+
}
|
201
|
+
`;
|
202
|
+
|
203
|
+
Checkmark.displayName = 'Checkmark';
|
@@ -0,0 +1,82 @@
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
2
|
+
|
3
|
+
exports[`<Radio /> disabled - should match snapshot 1`] = `
|
4
|
+
<div>
|
5
|
+
<div
|
6
|
+
class="sc-bdvvtL jHpHow"
|
7
|
+
disabled=""
|
8
|
+
>
|
9
|
+
<label
|
10
|
+
class="sc-dkPtRN DvdcQ"
|
11
|
+
>
|
12
|
+
<input
|
13
|
+
class="sc-eCImPb enczZx"
|
14
|
+
disabled=""
|
15
|
+
type="radio"
|
16
|
+
/>
|
17
|
+
<span
|
18
|
+
class="sc-jRQBWg bTJrsl"
|
19
|
+
data-testid="checkmark"
|
20
|
+
/>
|
21
|
+
<span
|
22
|
+
class="sc-hKwDye gUstVb"
|
23
|
+
>
|
24
|
+
Label
|
25
|
+
</span>
|
26
|
+
</label>
|
27
|
+
</div>
|
28
|
+
</div>
|
29
|
+
`;
|
30
|
+
|
31
|
+
exports[`<Radio /> enabled + checked - should match snapshot 1`] = `
|
32
|
+
<div>
|
33
|
+
<div
|
34
|
+
class="sc-bdvvtL gMUGTo"
|
35
|
+
>
|
36
|
+
<label
|
37
|
+
class="sc-dkPtRN DvdcQ"
|
38
|
+
>
|
39
|
+
<input
|
40
|
+
checked=""
|
41
|
+
class="sc-eCImPb enczZx"
|
42
|
+
type="radio"
|
43
|
+
/>
|
44
|
+
<span
|
45
|
+
class="sc-jRQBWg bTJrsl"
|
46
|
+
data-testid="checkmark"
|
47
|
+
/>
|
48
|
+
<span
|
49
|
+
class="sc-hKwDye gUstVb"
|
50
|
+
>
|
51
|
+
Label
|
52
|
+
</span>
|
53
|
+
</label>
|
54
|
+
</div>
|
55
|
+
</div>
|
56
|
+
`;
|
57
|
+
|
58
|
+
exports[`<Radio /> enabled - should match snapshot 1`] = `
|
59
|
+
<div>
|
60
|
+
<div
|
61
|
+
class="sc-bdvvtL gMUGTo"
|
62
|
+
>
|
63
|
+
<label
|
64
|
+
class="sc-dkPtRN DvdcQ"
|
65
|
+
>
|
66
|
+
<input
|
67
|
+
class="sc-eCImPb enczZx"
|
68
|
+
type="radio"
|
69
|
+
/>
|
70
|
+
<span
|
71
|
+
class="sc-jRQBWg bTJrsl"
|
72
|
+
data-testid="checkmark"
|
73
|
+
/>
|
74
|
+
<span
|
75
|
+
class="sc-hKwDye gUstVb"
|
76
|
+
>
|
77
|
+
Label
|
78
|
+
</span>
|
79
|
+
</label>
|
80
|
+
</div>
|
81
|
+
</div>
|
82
|
+
`;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { Radio } from './Radio';
|
@@ -0,0 +1,37 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
3
|
+
|
4
|
+
import { TextArea } from './TextArea';
|
5
|
+
|
6
|
+
export default {
|
7
|
+
title: 'Molecules/TextArea',
|
8
|
+
component: TextArea,
|
9
|
+
} as ComponentMeta<typeof TextArea>;
|
10
|
+
|
11
|
+
const Template: ComponentStory<typeof TextArea> = (args) => <TextArea {...args} />;
|
12
|
+
|
13
|
+
export const Basic = Template.bind({});
|
14
|
+
Basic.args = {
|
15
|
+
placeholder: 'Basic text area',
|
16
|
+
disabled: false,
|
17
|
+
};
|
18
|
+
|
19
|
+
export const Success = Template.bind({});
|
20
|
+
Success.args = {
|
21
|
+
placeholder: 'Success text area',
|
22
|
+
validationType: 'success',
|
23
|
+
disabled: false,
|
24
|
+
};
|
25
|
+
|
26
|
+
export const Error = Template.bind({});
|
27
|
+
Error.args = {
|
28
|
+
placeholder: 'Error text area',
|
29
|
+
validationType: 'error',
|
30
|
+
disabled: false,
|
31
|
+
};
|
32
|
+
|
33
|
+
export const Disabled = Template.bind({});
|
34
|
+
Disabled.args = {
|
35
|
+
placeholder: 'Disabled input',
|
36
|
+
disabled: true,
|
37
|
+
};
|
@@ -0,0 +1,50 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import styled from 'styled-components';
|
3
|
+
import { getValidationTypeProps } from '../../../helpers/validation';
|
4
|
+
import { ValidationType } from '../../../types/validation';
|
5
|
+
|
6
|
+
export interface TextAreaProps
|
7
|
+
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
8
|
+
validationType?: ValidationType;
|
9
|
+
}
|
10
|
+
|
11
|
+
export const TextArea: React.FC<TextAreaProps> = (props) => {
|
12
|
+
return <TextAreaElement rows={4} {...props} />;
|
13
|
+
};
|
14
|
+
|
15
|
+
const TextAreaElement = styled.textarea<Pick<TextAreaProps, 'validationType'>>`
|
16
|
+
background-color: var(--color-white);
|
17
|
+
border: 2px solid var(--shades-of-grey-80);
|
18
|
+
border-radius: var(--padding-s);
|
19
|
+
padding: var(--padding-m);
|
20
|
+
position: relative;
|
21
|
+
overflow: hidden;
|
22
|
+
color: var(--shades-of-grey-100);
|
23
|
+
font-weight: var(--font-bold);
|
24
|
+
transition: border var(--transition-speed),
|
25
|
+
background-color var(--transition-speed);
|
26
|
+
width: 100%;
|
27
|
+
resize: none;
|
28
|
+
|
29
|
+
&::placeholder {
|
30
|
+
color: var(--shades-of-grey-80);
|
31
|
+
}
|
32
|
+
|
33
|
+
&:focus,
|
34
|
+
&:active {
|
35
|
+
outline: none;
|
36
|
+
background-color: transparent;
|
37
|
+
border: 2px solid var(--color-orange);
|
38
|
+
}
|
39
|
+
${(p) => getValidationTypeProps(p.validationType)};
|
40
|
+
|
41
|
+
&:disabled {
|
42
|
+
&::placeholder {
|
43
|
+
color: var(--shades-of-grey-60);
|
44
|
+
}
|
45
|
+
background-color: var(--shades-of-grey-40);
|
46
|
+
border: 2px solid var(--shades-of-grey-60);
|
47
|
+
}
|
48
|
+
`;
|
49
|
+
|
50
|
+
TextAreaElement.displayName = 'TextAreaElement';
|
@@ -0,0 +1 @@
|
|
1
|
+
export { TextArea } from './TextArea';
|
@@ -0,0 +1,8 @@
|
|
1
|
+
export { InfoCard } from './InfoCard';
|
2
|
+
export { Input } from './Input';
|
3
|
+
export { TextArea } from './TextArea';
|
4
|
+
export { Button } from './Button';
|
5
|
+
export { Checkbox } from './Checkbox';
|
6
|
+
export { Dropdown } from './Dropdown';
|
7
|
+
export { Radio } from './Radio';
|
8
|
+
export { Profile } from './Profile';
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
3
|
+
|
4
|
+
import { Menu } from './Menu';
|
5
|
+
|
6
|
+
export default {
|
7
|
+
title: 'Organisms/Menu',
|
8
|
+
component: Menu,
|
9
|
+
} as ComponentMeta<typeof Menu>;
|
10
|
+
|
11
|
+
const Template: ComponentStory<typeof Menu> = (args) => (
|
12
|
+
<Menu {...args}>
|
13
|
+
<Menu.Item active icon="home" label="Home" />
|
14
|
+
<Menu.Item icon="dice-five" label="Challenges" />
|
15
|
+
<Menu.Item icon="bars" label="Attempts" />
|
16
|
+
</Menu>
|
17
|
+
);
|
18
|
+
|
19
|
+
export const Basic = Template.bind({});
|
20
|
+
Basic.args = {};
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import styled from 'styled-components';
|
3
|
+
import { MenuItem } from './MenuItem';
|
4
|
+
|
5
|
+
export interface MenuStaticProps {
|
6
|
+
Item: typeof MenuItem;
|
7
|
+
}
|
8
|
+
|
9
|
+
export interface MenuProps {
|
10
|
+
children: React.ReactNode
|
11
|
+
}
|
12
|
+
|
13
|
+
const Menu: React.FC<MenuProps> = ({ children }) => {
|
14
|
+
return (
|
15
|
+
<Root>
|
16
|
+
{children}
|
17
|
+
</Root>
|
18
|
+
);
|
19
|
+
};
|
20
|
+
|
21
|
+
const MenuWithStatic = Object.assign(Menu, { Item: MenuItem });
|
22
|
+
|
23
|
+
export { MenuWithStatic as Menu };
|
24
|
+
|
25
|
+
const Root = styled.nav`
|
26
|
+
display: flex;
|
27
|
+
flex-direction: column;
|
28
|
+
gap: var(--padding-s);
|
29
|
+
`;
|
@@ -0,0 +1,62 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import styled from 'styled-components';
|
3
|
+
import { Color } from '../../../styles';
|
4
|
+
import { Icon, IconType } from '../../atoms/Icon';
|
5
|
+
|
6
|
+
export interface MenuItemProps {
|
7
|
+
active?: boolean;
|
8
|
+
label: string;
|
9
|
+
icon: IconType;
|
10
|
+
}
|
11
|
+
|
12
|
+
export const MenuItem: React.FC<MenuItemProps> = ({ active, label, icon }) => {
|
13
|
+
return (
|
14
|
+
<Root active={active}>
|
15
|
+
<Icon type={icon} />
|
16
|
+
{label}
|
17
|
+
</Root>
|
18
|
+
);
|
19
|
+
};
|
20
|
+
|
21
|
+
export const Root = styled.div<Pick<MenuItemProps, 'active'>>`
|
22
|
+
align-items: center;
|
23
|
+
border-radius: 24px;
|
24
|
+
border: 1px solid transparent;
|
25
|
+
cursor: pointer;
|
26
|
+
display: flex;
|
27
|
+
gap: 10px;
|
28
|
+
font-weight: var(--font-bold);
|
29
|
+
text-align: left;
|
30
|
+
padding: 12px 18px;
|
31
|
+
transition: border-color var(--transition-speed),
|
32
|
+
background-color var(--transition-speed), color var(--transition-speed);
|
33
|
+
|
34
|
+
& svg {
|
35
|
+
transition: fill var(--transition-speed);
|
36
|
+
}
|
37
|
+
|
38
|
+
&:hover {
|
39
|
+
border-color: ${(p) => (p.active ? 'transparent' : 'var(--color-navy)')};
|
40
|
+
}
|
41
|
+
|
42
|
+
&:focus {
|
43
|
+
background-color: var(--color-ecru);
|
44
|
+
color: var(--color-orange);
|
45
|
+
|
46
|
+
& svg {
|
47
|
+
fill: var(--color-orange);
|
48
|
+
}
|
49
|
+
}
|
50
|
+
|
51
|
+
${(p) =>
|
52
|
+
p.active &&
|
53
|
+
`
|
54
|
+
color: var(--color-white);
|
55
|
+
background-color: var(--color-orange);
|
56
|
+
box-shadow: 0 0 10px 0 var(--shades-of-grey-40);
|
57
|
+
|
58
|
+
&:not(:focus) svg {
|
59
|
+
fill: var(--color-white);
|
60
|
+
}
|
61
|
+
`}
|
62
|
+
`;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { Menu } from './Menu';
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
3
|
+
|
4
|
+
import { Setting } from './Setting';
|
5
|
+
|
6
|
+
export default {
|
7
|
+
title: 'Organisms/Setting',
|
8
|
+
component: Setting,
|
9
|
+
} as ComponentMeta<typeof Setting>;
|
10
|
+
|
11
|
+
const Template: ComponentStory<typeof Setting> = (args) => (
|
12
|
+
<Setting {...args} />
|
13
|
+
);
|
14
|
+
|
15
|
+
export const Basic = Template.bind({});
|
16
|
+
Basic.args = {
|
17
|
+
icon: 'user-circle',
|
18
|
+
title: 'Title',
|
19
|
+
subtitle: 'Subtitle',
|
20
|
+
trigger: 'Open',
|
21
|
+
};
|
@@ -0,0 +1,97 @@
|
|
1
|
+
import React, { useState } from "react";
|
2
|
+
import styled from "styled-components";
|
3
|
+
import { Icon, IconType } from "../../atoms/Icon";
|
4
|
+
import { Typography } from "../../atoms/Typography";
|
5
|
+
|
6
|
+
const { Body } = Typography;
|
7
|
+
|
8
|
+
export interface SettingProps {
|
9
|
+
icon?: IconType;
|
10
|
+
title: string;
|
11
|
+
subtitle?: string;
|
12
|
+
trigger: string;
|
13
|
+
children?: React.ReactNode;
|
14
|
+
}
|
15
|
+
|
16
|
+
export const Setting: React.FCS<SettingProps> = ({
|
17
|
+
icon,
|
18
|
+
title,
|
19
|
+
subtitle,
|
20
|
+
trigger,
|
21
|
+
children,
|
22
|
+
className,
|
23
|
+
}) => {
|
24
|
+
const [open, setOpen] = useState(false);
|
25
|
+
|
26
|
+
const handleTriggerClick = (): void => {
|
27
|
+
setOpen((current) => !current);
|
28
|
+
};
|
29
|
+
|
30
|
+
return (
|
31
|
+
<div className={className}>
|
32
|
+
<Root active={open} onClick={handleTriggerClick}>
|
33
|
+
<LeftHandSide>
|
34
|
+
{icon && <Icon size={{ width: 24, height: 24 }} type={icon} />}
|
35
|
+
|
36
|
+
<Content>
|
37
|
+
<Body bold>{title}</Body>
|
38
|
+
<Body bold size="s">
|
39
|
+
{subtitle}
|
40
|
+
</Body>
|
41
|
+
</Content>
|
42
|
+
</LeftHandSide>
|
43
|
+
|
44
|
+
<Trigger active={open}>
|
45
|
+
<Icon type="angle-down" size={{ width: 16, height: 16 }} />
|
46
|
+
<Body bold as="span">
|
47
|
+
{trigger}
|
48
|
+
</Body>
|
49
|
+
</Trigger>
|
50
|
+
</Root>
|
51
|
+
|
52
|
+
{open && <ExpandedBody>{children}</ExpandedBody>}
|
53
|
+
</div>
|
54
|
+
);
|
55
|
+
};
|
56
|
+
|
57
|
+
const Root = styled.div<{ active: boolean }>`
|
58
|
+
align-items: center;
|
59
|
+
background-color: var(--color-white);
|
60
|
+
border: 1px solid
|
61
|
+
${(p) => (p.active ? "var(--color-orange)" : "var(--shades-of-grey-40)")};
|
62
|
+
border-radius: 5px;
|
63
|
+
display: flex;
|
64
|
+
justify-content: space-between;
|
65
|
+
padding: var(--padding-m) var(--padding-l);
|
66
|
+
transition: border var(--transition-speed);
|
67
|
+
cursor: pointer;
|
68
|
+
`;
|
69
|
+
|
70
|
+
const Content = styled.div`
|
71
|
+
& > * {
|
72
|
+
margin: 0;
|
73
|
+
}
|
74
|
+
`;
|
75
|
+
|
76
|
+
const LeftHandSide = styled.div`
|
77
|
+
display: flex;
|
78
|
+
align-items: center;
|
79
|
+
gap: var(--padding-m);
|
80
|
+
`;
|
81
|
+
|
82
|
+
const Trigger = styled.div<{ active: boolean }>`
|
83
|
+
display: flex;
|
84
|
+
align-items: center;
|
85
|
+
gap: var(--padding-s);
|
86
|
+
|
87
|
+
& svg {
|
88
|
+
transform: ${(p) => (p.active ? "rotate(180deg)" : "rotate(0)")};
|
89
|
+
transition: transform var(--transition-speed);
|
90
|
+
}
|
91
|
+
`;
|
92
|
+
|
93
|
+
const ExpandedBody = styled.div`
|
94
|
+
background-color: var(--shades-of-grey-20);
|
95
|
+
padding: var(--padding-m) var(--padding-l);
|
96
|
+
margin-top: var(--padding-s);
|
97
|
+
`;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { Setting } from './Setting';
|
package/src/global.d.ts
ADDED
@@ -0,0 +1,31 @@
|
|
1
|
+
import { css, FlattenSimpleInterpolation } from 'styled-components';
|
2
|
+
import { ValidationType } from '../types/validation';
|
3
|
+
|
4
|
+
export const getValidationTypeProps = (
|
5
|
+
type?: ValidationType,
|
6
|
+
): FlattenSimpleInterpolation => {
|
7
|
+
switch (type) {
|
8
|
+
case 'success':
|
9
|
+
return css`
|
10
|
+
border-color: var(--color-success-100);
|
11
|
+
background-color: var(--color-success-10);
|
12
|
+
|
13
|
+
&:focus,
|
14
|
+
&:active {
|
15
|
+
border-color: var(--color-success-100);
|
16
|
+
}
|
17
|
+
`;
|
18
|
+
case 'error':
|
19
|
+
return css`
|
20
|
+
border-color: var(--color-error-100);
|
21
|
+
background-color: var(--color-error-10);
|
22
|
+
|
23
|
+
&:focus,
|
24
|
+
&:active {
|
25
|
+
border-color: var(--color-error-100);
|
26
|
+
}
|
27
|
+
`;
|
28
|
+
default:
|
29
|
+
return css``;
|
30
|
+
}
|
31
|
+
};
|
package/src/index.ts
ADDED
@@ -0,0 +1,28 @@
|
|
1
|
+
export {
|
2
|
+
Alert,
|
3
|
+
Avatar,
|
4
|
+
Card,
|
5
|
+
Divider,
|
6
|
+
Icon,
|
7
|
+
Nav,
|
8
|
+
Pill,
|
9
|
+
Typography,
|
10
|
+
Spinner,
|
11
|
+
Chip,
|
12
|
+
Dot,
|
13
|
+
} from "./components/atoms";
|
14
|
+
|
15
|
+
export {
|
16
|
+
InfoCard,
|
17
|
+
Input,
|
18
|
+
TextArea,
|
19
|
+
Button,
|
20
|
+
Checkbox,
|
21
|
+
Dropdown,
|
22
|
+
Profile,
|
23
|
+
Radio,
|
24
|
+
} from "./components/molecules";
|
25
|
+
|
26
|
+
export { Menu, Setting } from "./components/organisms";
|
27
|
+
|
28
|
+
export { GlobalStyles as IntegrigoUI, Color } from "./styles";
|