@integrigo/integrigo-ui 1.6.7-c → 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,180 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import styled, { keyframes } from 'styled-components';
|
3
|
+
import { Color } from '../../../styles';
|
4
|
+
import { IconAddition, IconType, Icon } from '../../atoms/Icon';
|
5
|
+
import { BasicButton } from './BasicButton';
|
6
|
+
import { Ghost } from './Ghost';
|
7
|
+
import { Primary } from './Primary';
|
8
|
+
|
9
|
+
export interface ButtonProps
|
10
|
+
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
11
|
+
primary?: boolean;
|
12
|
+
ghost?: boolean;
|
13
|
+
icon?: IconType;
|
14
|
+
direction?: 'rtl' | 'ltr';
|
15
|
+
size?: 'xl' | 'l' | 'm' | 's';
|
16
|
+
loading?: boolean;
|
17
|
+
onIconClick?: () => void;
|
18
|
+
}
|
19
|
+
|
20
|
+
const sizeVariant = {
|
21
|
+
xl: '8px',
|
22
|
+
l: '6px',
|
23
|
+
m: '4px',
|
24
|
+
s: '2px',
|
25
|
+
};
|
26
|
+
|
27
|
+
const getButtonComponent = (primary?: boolean, ghost?: boolean) => {
|
28
|
+
if (primary) {
|
29
|
+
return Primary;
|
30
|
+
}
|
31
|
+
|
32
|
+
if (ghost) {
|
33
|
+
return Ghost;
|
34
|
+
}
|
35
|
+
|
36
|
+
return BasicButton;
|
37
|
+
};
|
38
|
+
|
39
|
+
const getIconColorVariant = (primary?: boolean, ghost?: boolean) => {
|
40
|
+
if (primary) {
|
41
|
+
return 'white';
|
42
|
+
}
|
43
|
+
|
44
|
+
if (ghost) {
|
45
|
+
return 'ghost';
|
46
|
+
}
|
47
|
+
|
48
|
+
return 'grey';
|
49
|
+
};
|
50
|
+
|
51
|
+
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
52
|
+
(
|
53
|
+
{
|
54
|
+
icon,
|
55
|
+
size = 'm',
|
56
|
+
onIconClick,
|
57
|
+
direction,
|
58
|
+
loading = false,
|
59
|
+
children,
|
60
|
+
...props
|
61
|
+
},
|
62
|
+
ref,
|
63
|
+
) => {
|
64
|
+
const ButtonComponent = getButtonComponent(props.primary, props.ghost);
|
65
|
+
const isDisabled = props.disabled || loading;
|
66
|
+
|
67
|
+
return (
|
68
|
+
<ButtonWrapper
|
69
|
+
ref={ref}
|
70
|
+
fullWidth={!props.ghost}
|
71
|
+
orangeIconOnHover={!props.primary && !props.disabled}
|
72
|
+
{...props}
|
73
|
+
>
|
74
|
+
{direction !== 'rtl' && (
|
75
|
+
<IconOffset size={size} ghost={Boolean(props.ghost)}>
|
76
|
+
<IconAddition
|
77
|
+
icon={icon}
|
78
|
+
size={size}
|
79
|
+
colorVariant={getIconColorVariant(props.primary, props.ghost)}
|
80
|
+
disabled={isDisabled}
|
81
|
+
direction={direction}
|
82
|
+
onClick={onIconClick}
|
83
|
+
/>
|
84
|
+
</IconOffset>
|
85
|
+
)}
|
86
|
+
|
87
|
+
<ButtonComponent
|
88
|
+
sizeVariant={size}
|
89
|
+
ghost={props.ghost}
|
90
|
+
disabled={isDisabled}
|
91
|
+
loading={loading}
|
92
|
+
direction={icon && (direction || 'ltr')}
|
93
|
+
>
|
94
|
+
{children}
|
95
|
+
{loading && (
|
96
|
+
<Loading>
|
97
|
+
<Icon
|
98
|
+
type="process"
|
99
|
+
fill={props.ghost ? Color.Grey40 : Color.Grey60}
|
100
|
+
/>
|
101
|
+
</Loading>
|
102
|
+
)}
|
103
|
+
</ButtonComponent>
|
104
|
+
|
105
|
+
{direction === 'rtl' && (
|
106
|
+
<IconOffset size={size} ghost={Boolean(props.ghost)} right>
|
107
|
+
<IconAddition
|
108
|
+
icon={icon}
|
109
|
+
size={size}
|
110
|
+
colorVariant={getIconColorVariant(props.primary, props.ghost)}
|
111
|
+
disabled={isDisabled}
|
112
|
+
direction={direction}
|
113
|
+
onClick={onIconClick}
|
114
|
+
/>
|
115
|
+
</IconOffset>
|
116
|
+
)}
|
117
|
+
</ButtonWrapper>
|
118
|
+
);
|
119
|
+
},
|
120
|
+
);
|
121
|
+
|
122
|
+
const ButtonWrapper = styled.button<{
|
123
|
+
fullWidth: boolean;
|
124
|
+
orangeIconOnHover: boolean;
|
125
|
+
}>`
|
126
|
+
border: none;
|
127
|
+
background-color: transparent;
|
128
|
+
position: relative;
|
129
|
+
padding: 0;
|
130
|
+
width: ${(p) => (p.fullWidth ? '100%' : 'min-content')};
|
131
|
+
|
132
|
+
&:hover svg {
|
133
|
+
fill: ${(p) => p.orangeIconOnHover && 'var(--color-orange)'};
|
134
|
+
}
|
135
|
+
|
136
|
+
&:active svg {
|
137
|
+
fill: ${(p) => p.orangeIconOnHover && 'var(--color-orange-80)'};
|
138
|
+
}
|
139
|
+
|
140
|
+
& svg {
|
141
|
+
position: absolute;
|
142
|
+
left: 0;
|
143
|
+
}
|
144
|
+
`;
|
145
|
+
|
146
|
+
ButtonWrapper.displayName = 'ButtonWrapper';
|
147
|
+
|
148
|
+
const IconOffset = styled.div<{
|
149
|
+
right?: boolean;
|
150
|
+
ghost: boolean;
|
151
|
+
size: 'xl' | 'l' | 'm' | 's';
|
152
|
+
}>`
|
153
|
+
position: absolute;
|
154
|
+
bottom: 0;
|
155
|
+
${(p) =>
|
156
|
+
p.right
|
157
|
+
? `right: ${p.ghost ? 0 : sizeVariant[p.size]}`
|
158
|
+
: `left: ${p.ghost ? 0 : sizeVariant[p.size]}`};
|
159
|
+
`;
|
160
|
+
|
161
|
+
IconOffset.displayName = 'IconOffset';
|
162
|
+
|
163
|
+
const rotate = keyframes`
|
164
|
+
100% {
|
165
|
+
transform: rotate(-360deg);
|
166
|
+
}
|
167
|
+
`;
|
168
|
+
|
169
|
+
const Loading = styled.div`
|
170
|
+
position: absolute;
|
171
|
+
left: calc(50% - 10px);
|
172
|
+
top: calc(50% - 10px);
|
173
|
+
|
174
|
+
& > svg {
|
175
|
+
animation: ${rotate} 1s linear infinite;
|
176
|
+
will-change: transform;
|
177
|
+
}
|
178
|
+
`;
|
179
|
+
|
180
|
+
Loading.displayName = 'Loading';
|
@@ -0,0 +1,75 @@
|
|
1
|
+
import styled from 'styled-components';
|
2
|
+
import { BasicButton } from './BasicButton';
|
3
|
+
|
4
|
+
export const sizeVariant = {
|
5
|
+
xl: 24,
|
6
|
+
l: 18,
|
7
|
+
m: 16,
|
8
|
+
s: 12,
|
9
|
+
};
|
10
|
+
|
11
|
+
const getLeftAlignment = (offset: number, direction?: 'ltr' | 'rtl') => {
|
12
|
+
switch (direction) {
|
13
|
+
case 'ltr':
|
14
|
+
return `calc(${offset}px - 8px)`;
|
15
|
+
case 'rtl':
|
16
|
+
default:
|
17
|
+
return `${offset}px`;
|
18
|
+
}
|
19
|
+
};
|
20
|
+
|
21
|
+
export const Ghost = styled(BasicButton)<{
|
22
|
+
direction?: 'ltr' | 'rtl';
|
23
|
+
disabled?: boolean;
|
24
|
+
}>`
|
25
|
+
padding-left: ${(p) => p.direction !== 'ltr' && 0};
|
26
|
+
padding-right: ${(p) => p.direction !== 'rtl' && 0};
|
27
|
+
border-radius: 0;
|
28
|
+
|
29
|
+
&::before {
|
30
|
+
border: none;
|
31
|
+
left: 0;
|
32
|
+
top: auto;
|
33
|
+
bottom: 4px;
|
34
|
+
width: ${(p) => `calc(100% + ${p.direction ? '8px' : '0px'})`};
|
35
|
+
height: 0;
|
36
|
+
border: 1px solid var(--color-navy);
|
37
|
+
border-radius: 0;
|
38
|
+
z-index: 2;
|
39
|
+
}
|
40
|
+
|
41
|
+
&:hover,
|
42
|
+
&:hover:before {
|
43
|
+
opacity: 1;
|
44
|
+
color: var(--color-orange);
|
45
|
+
border-color: var(--color-orange);
|
46
|
+
}
|
47
|
+
|
48
|
+
&:hover:active,
|
49
|
+
&:hover:active:before {
|
50
|
+
opacity: 1;
|
51
|
+
color: var(--color-orange-80);
|
52
|
+
border-color: var(--color-orange-80);
|
53
|
+
}
|
54
|
+
|
55
|
+
${(p) =>
|
56
|
+
p.disabled &&
|
57
|
+
`
|
58
|
+
background-color: transparent;
|
59
|
+
color: ${p.loading ? 'transparent' : 'var(--shades-of-grey-40)'};
|
60
|
+
|
61
|
+
&::before {
|
62
|
+
border-color: var(--shades-of-grey-40);
|
63
|
+
}
|
64
|
+
|
65
|
+
&:hover,
|
66
|
+
&:active,
|
67
|
+
&:hover:active,
|
68
|
+
&:hover:before,
|
69
|
+
&:hover:active:before {
|
70
|
+
opacity: 1;
|
71
|
+
color: ${p.loading ? 'transparent' : 'var(--shades-of-grey-40)'};
|
72
|
+
border-color: var(--shades-of-grey-40);
|
73
|
+
}
|
74
|
+
`}
|
75
|
+
`;
|
@@ -0,0 +1,41 @@
|
|
1
|
+
import styled from 'styled-components';
|
2
|
+
import { BasicButton } from './BasicButton';
|
3
|
+
|
4
|
+
export const Primary = styled(BasicButton)`
|
5
|
+
color: var(--color-white);
|
6
|
+
z-index: 1;
|
7
|
+
|
8
|
+
&::before {
|
9
|
+
background-color: var(--color-orange);
|
10
|
+
z-index: -1;
|
11
|
+
}
|
12
|
+
|
13
|
+
&:hover {
|
14
|
+
opacity: 1;
|
15
|
+
color: var(--color-white);
|
16
|
+
}
|
17
|
+
|
18
|
+
&:hover:active {
|
19
|
+
opacity: 1;
|
20
|
+
}
|
21
|
+
|
22
|
+
${(p) =>
|
23
|
+
p.disabled &&
|
24
|
+
`
|
25
|
+
color: ${p.loading ? 'transparent' : 'var(--shades-of-grey-60)'};
|
26
|
+
|
27
|
+
&::before {
|
28
|
+
background-color: var(--shades-of-grey-40);
|
29
|
+
border-color: var(--shades-of-grey-40);
|
30
|
+
}
|
31
|
+
|
32
|
+
&:hover,
|
33
|
+
&:active,
|
34
|
+
&:hover:active,
|
35
|
+
&:hover:before,
|
36
|
+
&:hover:active:before {
|
37
|
+
color: ${p.loading ? 'transparent' : 'var(--shades-of-grey-60)'};
|
38
|
+
border-color: var(--shades-of-grey-40);
|
39
|
+
}
|
40
|
+
`}
|
41
|
+
`;
|
@@ -0,0 +1,208 @@
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
2
|
+
|
3
|
+
exports[`<Button /> ghost + disabled - should match snapshot 1`] = `
|
4
|
+
<div>
|
5
|
+
<button
|
6
|
+
class="sc-eCImPb hDwJKw"
|
7
|
+
disabled=""
|
8
|
+
>
|
9
|
+
<div
|
10
|
+
class="sc-jRQBWg jkA-dXA"
|
11
|
+
/>
|
12
|
+
<div
|
13
|
+
class="sc-gsDKAQ sc-dkPtRN kIONOr cIZZHM"
|
14
|
+
disabled=""
|
15
|
+
>
|
16
|
+
Button
|
17
|
+
</div>
|
18
|
+
</button>
|
19
|
+
</div>
|
20
|
+
`;
|
21
|
+
|
22
|
+
exports[`<Button /> ghost + loading - should match snapshot 1`] = `
|
23
|
+
<div>
|
24
|
+
<button
|
25
|
+
class="sc-eCImPb hHthlh"
|
26
|
+
>
|
27
|
+
<div
|
28
|
+
class="sc-jRQBWg jkA-dXA"
|
29
|
+
/>
|
30
|
+
<div
|
31
|
+
class="sc-gsDKAQ sc-dkPtRN iqotZl dzfnVo"
|
32
|
+
disabled=""
|
33
|
+
>
|
34
|
+
Button
|
35
|
+
<div
|
36
|
+
class="sc-gKclnd guZOqG"
|
37
|
+
>
|
38
|
+
<svg
|
39
|
+
fill="#CCCCCC"
|
40
|
+
height="20"
|
41
|
+
viewBox="0 0 24 24"
|
42
|
+
width="20"
|
43
|
+
xmlns="http://www.w3.org/2000/svg"
|
44
|
+
>
|
45
|
+
<path
|
46
|
+
d="M6.992 14.502a1 1 0 0 0-1 1v1.782a7.973 7.973 0 0 1-2-5.282c0-.294.017-.588.052-.88a1 1 0 1 0-1.985-.24 9.176 9.176 0 0 0-.067 1.12 9.965 9.965 0 0 0 2.417 6.5H2.992a1 1 0 1 0 0 2h4a.982.982 0 0 0 .794-.422c.011-.015.026-.027.037-.043.007-.01.007-.022.013-.032a.965.965 0 0 0 .106-.258.95.95 0 0 0 .032-.156c.003-.03.018-.057.018-.089v-4a1 1 0 0 0-1-1Zm1.5-8.5H6.709a7.974 7.974 0 0 1 5.283-2c.294 0 .587.017.88.053a1 1 0 0 0 .24-1.987 9.226 9.226 0 0 0-1.12-.066 9.964 9.964 0 0 0-6.5 2.417V3.002a1 1 0 0 0-2 0v4c.006.066.02.131.039.195a.97.97 0 0 0 .141.346l.012.017c.066.096.149.18.244.246.011.008.017.02.028.028.014.01.03.012.045.021a.96.96 0 0 0 .441.137c.018 0 .032.01.05.01h4a1 1 0 1 0 0-2Zm11.96 10.804a.968.968 0 0 0-.141-.345l-.011-.017a.972.972 0 0 0-.245-.246c-.011-.008-.016-.02-.028-.028-.01-.007-.023-.008-.034-.014a1.152 1.152 0 0 0-.41-.136c-.032-.003-.059-.018-.091-.018h-4a1 1 0 0 0 0 2h1.782a7.973 7.973 0 0 1-5.282 2c-.294 0-.588-.018-.88-.054a1 1 0 0 0-.24 1.986c.37.045.745.068 1.12.068a9.964 9.964 0 0 0 6.5-2.417v1.417a1 1 0 0 0 2 0v-4a.956.956 0 0 0-.04-.195Zm.54-11.304a1 1 0 1 0 0-2h-4a.95.95 0 0 0-.192.039l-.007.001a.969.969 0 0 0-.34.14l-.02.013a.975.975 0 0 0-.245.244c-.008.01-.02.016-.028.027-.007.01-.007.023-.014.034a1.145 1.145 0 0 0-.136.413c-.003.03-.018.057-.018.089v4a1 1 0 0 0 2 0V6.719a7.975 7.975 0 0 1 2 5.283c0 .294-.018.588-.053.88a1.001 1.001 0 0 0 1.985.24c.046-.372.068-.746.068-1.12a9.964 9.964 0 0 0-2.417-6.5h1.417Z"
|
47
|
+
/>
|
48
|
+
</svg>
|
49
|
+
</div>
|
50
|
+
</div>
|
51
|
+
</button>
|
52
|
+
</div>
|
53
|
+
`;
|
54
|
+
|
55
|
+
exports[`<Button /> ghost - should match snapshot 1`] = `
|
56
|
+
<div>
|
57
|
+
<button
|
58
|
+
class="sc-eCImPb uxtlD"
|
59
|
+
>
|
60
|
+
<div
|
61
|
+
class="sc-jRQBWg jNucwA"
|
62
|
+
/>
|
63
|
+
<div
|
64
|
+
class="sc-gsDKAQ kfLXgb"
|
65
|
+
>
|
66
|
+
Button
|
67
|
+
</div>
|
68
|
+
</button>
|
69
|
+
</div>
|
70
|
+
`;
|
71
|
+
|
72
|
+
exports[`<Button /> primary + disabled - should match snapshot 1`] = `
|
73
|
+
<div>
|
74
|
+
<button
|
75
|
+
class="sc-eCImPb fuvfKm"
|
76
|
+
disabled=""
|
77
|
+
>
|
78
|
+
<div
|
79
|
+
class="sc-jRQBWg jNucwA"
|
80
|
+
/>
|
81
|
+
<div
|
82
|
+
class="sc-gsDKAQ sc-hKwDye kIONOr eaLkfq"
|
83
|
+
disabled=""
|
84
|
+
>
|
85
|
+
Button
|
86
|
+
</div>
|
87
|
+
</button>
|
88
|
+
</div>
|
89
|
+
`;
|
90
|
+
|
91
|
+
exports[`<Button /> primary + loading - should match snapshot 1`] = `
|
92
|
+
<div>
|
93
|
+
<button
|
94
|
+
class="sc-eCImPb fuvfKm"
|
95
|
+
>
|
96
|
+
<div
|
97
|
+
class="sc-jRQBWg jNucwA"
|
98
|
+
/>
|
99
|
+
<div
|
100
|
+
class="sc-gsDKAQ sc-hKwDye iqotZl cMIcDW"
|
101
|
+
disabled=""
|
102
|
+
>
|
103
|
+
Button
|
104
|
+
<div
|
105
|
+
class="sc-gKclnd guZOqG"
|
106
|
+
>
|
107
|
+
<svg
|
108
|
+
fill="#8C8C8C"
|
109
|
+
height="20"
|
110
|
+
viewBox="0 0 24 24"
|
111
|
+
width="20"
|
112
|
+
xmlns="http://www.w3.org/2000/svg"
|
113
|
+
>
|
114
|
+
<path
|
115
|
+
d="M6.992 14.502a1 1 0 0 0-1 1v1.782a7.973 7.973 0 0 1-2-5.282c0-.294.017-.588.052-.88a1 1 0 1 0-1.985-.24 9.176 9.176 0 0 0-.067 1.12 9.965 9.965 0 0 0 2.417 6.5H2.992a1 1 0 1 0 0 2h4a.982.982 0 0 0 .794-.422c.011-.015.026-.027.037-.043.007-.01.007-.022.013-.032a.965.965 0 0 0 .106-.258.95.95 0 0 0 .032-.156c.003-.03.018-.057.018-.089v-4a1 1 0 0 0-1-1Zm1.5-8.5H6.709a7.974 7.974 0 0 1 5.283-2c.294 0 .587.017.88.053a1 1 0 0 0 .24-1.987 9.226 9.226 0 0 0-1.12-.066 9.964 9.964 0 0 0-6.5 2.417V3.002a1 1 0 0 0-2 0v4c.006.066.02.131.039.195a.97.97 0 0 0 .141.346l.012.017c.066.096.149.18.244.246.011.008.017.02.028.028.014.01.03.012.045.021a.96.96 0 0 0 .441.137c.018 0 .032.01.05.01h4a1 1 0 1 0 0-2Zm11.96 10.804a.968.968 0 0 0-.141-.345l-.011-.017a.972.972 0 0 0-.245-.246c-.011-.008-.016-.02-.028-.028-.01-.007-.023-.008-.034-.014a1.152 1.152 0 0 0-.41-.136c-.032-.003-.059-.018-.091-.018h-4a1 1 0 0 0 0 2h1.782a7.973 7.973 0 0 1-5.282 2c-.294 0-.588-.018-.88-.054a1 1 0 0 0-.24 1.986c.37.045.745.068 1.12.068a9.964 9.964 0 0 0 6.5-2.417v1.417a1 1 0 0 0 2 0v-4a.956.956 0 0 0-.04-.195Zm.54-11.304a1 1 0 1 0 0-2h-4a.95.95 0 0 0-.192.039l-.007.001a.969.969 0 0 0-.34.14l-.02.013a.975.975 0 0 0-.245.244c-.008.01-.02.016-.028.027-.007.01-.007.023-.014.034a1.145 1.145 0 0 0-.136.413c-.003.03-.018.057-.018.089v4a1 1 0 0 0 2 0V6.719a7.975 7.975 0 0 1 2 5.283c0 .294-.018.588-.053.88a1.001 1.001 0 0 0 1.985.24c.046-.372.068-.746.068-1.12a9.964 9.964 0 0 0-2.417-6.5h1.417Z"
|
116
|
+
/>
|
117
|
+
</svg>
|
118
|
+
</div>
|
119
|
+
</div>
|
120
|
+
</button>
|
121
|
+
</div>
|
122
|
+
`;
|
123
|
+
|
124
|
+
exports[`<Button /> primary - should match snapshot 1`] = `
|
125
|
+
<div>
|
126
|
+
<button
|
127
|
+
class="sc-eCImPb fuvfKm"
|
128
|
+
>
|
129
|
+
<div
|
130
|
+
class="sc-jRQBWg jNucwA"
|
131
|
+
/>
|
132
|
+
<div
|
133
|
+
class="sc-gsDKAQ sc-hKwDye kfLXgb dbnkKr"
|
134
|
+
>
|
135
|
+
Button
|
136
|
+
</div>
|
137
|
+
</button>
|
138
|
+
</div>
|
139
|
+
`;
|
140
|
+
|
141
|
+
exports[`<Button /> secondary + disabled - should match snapshot 1`] = `
|
142
|
+
<div>
|
143
|
+
<button
|
144
|
+
class="sc-eCImPb fuvfKm"
|
145
|
+
disabled=""
|
146
|
+
>
|
147
|
+
<div
|
148
|
+
class="sc-jRQBWg jNucwA"
|
149
|
+
/>
|
150
|
+
<div
|
151
|
+
class="sc-gsDKAQ kIONOr"
|
152
|
+
disabled=""
|
153
|
+
>
|
154
|
+
Button
|
155
|
+
</div>
|
156
|
+
</button>
|
157
|
+
</div>
|
158
|
+
`;
|
159
|
+
|
160
|
+
exports[`<Button /> secondary + loading - should match snapshot 1`] = `
|
161
|
+
<div>
|
162
|
+
<button
|
163
|
+
class="sc-eCImPb uxtlD"
|
164
|
+
>
|
165
|
+
<div
|
166
|
+
class="sc-jRQBWg jNucwA"
|
167
|
+
/>
|
168
|
+
<div
|
169
|
+
class="sc-gsDKAQ iqotZl"
|
170
|
+
disabled=""
|
171
|
+
>
|
172
|
+
Button
|
173
|
+
<div
|
174
|
+
class="sc-gKclnd guZOqG"
|
175
|
+
>
|
176
|
+
<svg
|
177
|
+
fill="#8C8C8C"
|
178
|
+
height="20"
|
179
|
+
viewBox="0 0 24 24"
|
180
|
+
width="20"
|
181
|
+
xmlns="http://www.w3.org/2000/svg"
|
182
|
+
>
|
183
|
+
<path
|
184
|
+
d="M6.992 14.502a1 1 0 0 0-1 1v1.782a7.973 7.973 0 0 1-2-5.282c0-.294.017-.588.052-.88a1 1 0 1 0-1.985-.24 9.176 9.176 0 0 0-.067 1.12 9.965 9.965 0 0 0 2.417 6.5H2.992a1 1 0 1 0 0 2h4a.982.982 0 0 0 .794-.422c.011-.015.026-.027.037-.043.007-.01.007-.022.013-.032a.965.965 0 0 0 .106-.258.95.95 0 0 0 .032-.156c.003-.03.018-.057.018-.089v-4a1 1 0 0 0-1-1Zm1.5-8.5H6.709a7.974 7.974 0 0 1 5.283-2c.294 0 .587.017.88.053a1 1 0 0 0 .24-1.987 9.226 9.226 0 0 0-1.12-.066 9.964 9.964 0 0 0-6.5 2.417V3.002a1 1 0 0 0-2 0v4c.006.066.02.131.039.195a.97.97 0 0 0 .141.346l.012.017c.066.096.149.18.244.246.011.008.017.02.028.028.014.01.03.012.045.021a.96.96 0 0 0 .441.137c.018 0 .032.01.05.01h4a1 1 0 1 0 0-2Zm11.96 10.804a.968.968 0 0 0-.141-.345l-.011-.017a.972.972 0 0 0-.245-.246c-.011-.008-.016-.02-.028-.028-.01-.007-.023-.008-.034-.014a1.152 1.152 0 0 0-.41-.136c-.032-.003-.059-.018-.091-.018h-4a1 1 0 0 0 0 2h1.782a7.973 7.973 0 0 1-5.282 2c-.294 0-.588-.018-.88-.054a1 1 0 0 0-.24 1.986c.37.045.745.068 1.12.068a9.964 9.964 0 0 0 6.5-2.417v1.417a1 1 0 0 0 2 0v-4a.956.956 0 0 0-.04-.195Zm.54-11.304a1 1 0 1 0 0-2h-4a.95.95 0 0 0-.192.039l-.007.001a.969.969 0 0 0-.34.14l-.02.013a.975.975 0 0 0-.245.244c-.008.01-.02.016-.028.027-.007.01-.007.023-.014.034a1.145 1.145 0 0 0-.136.413c-.003.03-.018.057-.018.089v4a1 1 0 0 0 2 0V6.719a7.975 7.975 0 0 1 2 5.283c0 .294-.018.588-.053.88a1.001 1.001 0 0 0 1.985.24c.046-.372.068-.746.068-1.12a9.964 9.964 0 0 0-2.417-6.5h1.417Z"
|
185
|
+
/>
|
186
|
+
</svg>
|
187
|
+
</div>
|
188
|
+
</div>
|
189
|
+
</button>
|
190
|
+
</div>
|
191
|
+
`;
|
192
|
+
|
193
|
+
exports[`<Button /> secondary - should match snapshot 1`] = `
|
194
|
+
<div>
|
195
|
+
<button
|
196
|
+
class="sc-eCImPb uxtlD"
|
197
|
+
>
|
198
|
+
<div
|
199
|
+
class="sc-jRQBWg jNucwA"
|
200
|
+
/>
|
201
|
+
<div
|
202
|
+
class="sc-gsDKAQ kfLXgb"
|
203
|
+
>
|
204
|
+
Button
|
205
|
+
</div>
|
206
|
+
</button>
|
207
|
+
</div>
|
208
|
+
`;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { Button } from './Button';
|
@@ -0,0 +1,33 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
3
|
+
|
4
|
+
import { Checkbox } from './Checkbox';
|
5
|
+
|
6
|
+
export default {
|
7
|
+
title: 'Molecules/Checkbox',
|
8
|
+
component: Checkbox,
|
9
|
+
} as ComponentMeta<typeof Checkbox>;
|
10
|
+
|
11
|
+
const Template: ComponentStory<typeof Checkbox> = (args) => (
|
12
|
+
<Checkbox {...args} />
|
13
|
+
);
|
14
|
+
|
15
|
+
export const Basic = Template.bind({});
|
16
|
+
Basic.args = {
|
17
|
+
disabled: false,
|
18
|
+
size: 'm',
|
19
|
+
};
|
20
|
+
|
21
|
+
export const Controlled = Template.bind({});
|
22
|
+
Controlled.args = {
|
23
|
+
disabled: false,
|
24
|
+
checked: false,
|
25
|
+
size: 'm',
|
26
|
+
};
|
27
|
+
|
28
|
+
export const WithLabel = Template.bind({});
|
29
|
+
WithLabel.args = {
|
30
|
+
disabled: false,
|
31
|
+
size: 'm',
|
32
|
+
label: 'Label',
|
33
|
+
};
|
@@ -0,0 +1,147 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import styled from 'styled-components';
|
3
|
+
import { FieldLabel } from '../../atoms/Field';
|
4
|
+
|
5
|
+
import { Label } from '../../atoms/Typography/Label';
|
6
|
+
|
7
|
+
export type CheckboxProps = Omit<
|
8
|
+
React.InputHTMLAttributes<HTMLInputElement>,
|
9
|
+
'type' | 'size'
|
10
|
+
> & {
|
11
|
+
size?: 'xl' | 'l' | 'm' | 's';
|
12
|
+
label?: string;
|
13
|
+
};
|
14
|
+
|
15
|
+
const sizeVariant = {
|
16
|
+
xl: {
|
17
|
+
size: '30px',
|
18
|
+
borderRadius: '8px',
|
19
|
+
border: '4px',
|
20
|
+
tickSize: '16px',
|
21
|
+
},
|
22
|
+
l: {
|
23
|
+
size: '24px',
|
24
|
+
borderRadius: '6px',
|
25
|
+
border: '3px',
|
26
|
+
tickSize: '12px',
|
27
|
+
},
|
28
|
+
m: {
|
29
|
+
size: '18px',
|
30
|
+
borderRadius: '3px',
|
31
|
+
border: '2.5px',
|
32
|
+
tickSize: '10px',
|
33
|
+
},
|
34
|
+
s: {
|
35
|
+
size: '12px',
|
36
|
+
borderRadius: '2px',
|
37
|
+
border: '2px',
|
38
|
+
tickSize: '6px',
|
39
|
+
},
|
40
|
+
};
|
41
|
+
|
42
|
+
export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
|
43
|
+
({ size = 'm', label = '', ...props }, ref) => {
|
44
|
+
return (
|
45
|
+
<FieldLabel
|
46
|
+
sizeVariant={size}
|
47
|
+
position="inline"
|
48
|
+
disabled={props.disabled}
|
49
|
+
>
|
50
|
+
<Label size={size} text={label}>
|
51
|
+
<Input ref={ref} type="checkbox" sizeVariant={size} {...props} />
|
52
|
+
</Label>
|
53
|
+
</FieldLabel>
|
54
|
+
);
|
55
|
+
},
|
56
|
+
);
|
57
|
+
|
58
|
+
const Input = styled.input<{ sizeVariant: 'xl' | 'l' | 'm' | 's' }>`
|
59
|
+
appearance: none;
|
60
|
+
background-color: var(--color-white);
|
61
|
+
|
62
|
+
${(p) => `
|
63
|
+
border: ${sizeVariant[p.sizeVariant].border} solid var(--shades-of-grey-40);
|
64
|
+
border-radius: ${sizeVariant[p.sizeVariant].borderRadius};
|
65
|
+
width: ${sizeVariant[p.sizeVariant].size};
|
66
|
+
height: ${sizeVariant[p.sizeVariant].size};
|
67
|
+
`}
|
68
|
+
|
69
|
+
transition: border var(--transition-speed), opacity var(--transition-speed),
|
70
|
+
background-color var(--transition-speed);
|
71
|
+
position: relative;
|
72
|
+
|
73
|
+
&:not([disabled]):hover {
|
74
|
+
border-color: var(--shades-of-grey-60);
|
75
|
+
cursor: pointer;
|
76
|
+
}
|
77
|
+
|
78
|
+
&:disabled {
|
79
|
+
opacity: 0.5;
|
80
|
+
}
|
81
|
+
|
82
|
+
&:disabled:checked {
|
83
|
+
opacity: 1;
|
84
|
+
}
|
85
|
+
|
86
|
+
&::before {
|
87
|
+
content: "";
|
88
|
+
background-color: transparent;
|
89
|
+
position: absolute;
|
90
|
+
|
91
|
+
${(p) => `
|
92
|
+
border-radius: ${sizeVariant[p.sizeVariant].borderRadius};
|
93
|
+
width: ${sizeVariant[p.sizeVariant].size};
|
94
|
+
height: ${sizeVariant[p.sizeVariant].size};
|
95
|
+
left: calc(-1 * ${sizeVariant[p.sizeVariant].border});
|
96
|
+
top: calc(-1 * ${sizeVariant[p.sizeVariant].border});
|
97
|
+
`}
|
98
|
+
transition: background-color var(--transition-speed);
|
99
|
+
}
|
100
|
+
|
101
|
+
&::after {
|
102
|
+
content: "";
|
103
|
+
position: absolute;
|
104
|
+
background-color: transparent;
|
105
|
+
left: 50%;
|
106
|
+
top: 50%;
|
107
|
+
transform: translate(-50%, -50%);
|
108
|
+
width: ${(p) => sizeVariant[p.sizeVariant].tickSize};
|
109
|
+
height: ${(p) => sizeVariant[p.sizeVariant].tickSize};
|
110
|
+
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
|
111
|
+
transition: background-color var(--transition-speed);
|
112
|
+
}
|
113
|
+
|
114
|
+
&:not([disabled]):checked::before {
|
115
|
+
background-color: var(--color-orange);
|
116
|
+
}
|
117
|
+
|
118
|
+
&:disabled:checked::before {
|
119
|
+
background-color: var(--shades-of-grey-40);
|
120
|
+
}
|
121
|
+
|
122
|
+
&:checked::after {
|
123
|
+
background-color: var(--color-white);
|
124
|
+
}
|
125
|
+
|
126
|
+
&:not([disabled]):checked {
|
127
|
+
border-color: transparent;
|
128
|
+
}
|
129
|
+
|
130
|
+
&:not([disabled]):checked:hover {
|
131
|
+
opacity: 0.8;
|
132
|
+
}
|
133
|
+
|
134
|
+
&:not([disabled]):active {
|
135
|
+
background-color: var(--shades-of-grey-60);
|
136
|
+
}
|
137
|
+
|
138
|
+
&:not([disabled]):checked:active {
|
139
|
+
background-color: transparent;
|
140
|
+
}
|
141
|
+
|
142
|
+
&:not([disabled]):active::before {
|
143
|
+
opacity: 0.65;
|
144
|
+
}
|
145
|
+
`;
|
146
|
+
|
147
|
+
Input.displayName = 'Input';
|
@@ -0,0 +1 @@
|
|
1
|
+
export { Checkbox } from './Checkbox';
|