@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,30 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
3
|
+
|
4
|
+
import { Dropdown } from './Dropdown';
|
5
|
+
|
6
|
+
export default {
|
7
|
+
title: 'Molecules/Dropdown',
|
8
|
+
component: Dropdown,
|
9
|
+
} as ComponentMeta<typeof Dropdown>;
|
10
|
+
|
11
|
+
const Template: ComponentStory<typeof Dropdown> = (args) => (
|
12
|
+
<Dropdown {...args}>
|
13
|
+
<Dropdown.Option>Option 1</Dropdown.Option>
|
14
|
+
<Dropdown.Option>Option 2</Dropdown.Option>
|
15
|
+
<Dropdown.Option>Option 3</Dropdown.Option>
|
16
|
+
</Dropdown>
|
17
|
+
);
|
18
|
+
|
19
|
+
export const Basic = Template.bind({});
|
20
|
+
Basic.args = {
|
21
|
+
placeholder: 'Select',
|
22
|
+
size: 'm',
|
23
|
+
};
|
24
|
+
|
25
|
+
export const WithLabel = Template.bind({});
|
26
|
+
WithLabel.args = {
|
27
|
+
placeholder: 'Select',
|
28
|
+
label: 'Label',
|
29
|
+
size: 'm',
|
30
|
+
};
|
@@ -0,0 +1,95 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import styled from 'styled-components';
|
3
|
+
import { getValidationTypeProps } from '../../../helpers/validation';
|
4
|
+
import { ValidationType } from '../../../types/validation';
|
5
|
+
import { Label } from '../../atoms/Typography/Label';
|
6
|
+
import { IconAddition } from '../../atoms/Icon';
|
7
|
+
import { Option } from './Option';
|
8
|
+
import { FieldLabel, fieldSizeVariants, FieldWrapper } from '../../atoms/Field';
|
9
|
+
|
10
|
+
export interface DropdwonStaticProps {
|
11
|
+
Option: typeof Option;
|
12
|
+
}
|
13
|
+
|
14
|
+
export interface DropdownProps
|
15
|
+
extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
|
16
|
+
validationType: ValidationType;
|
17
|
+
label?: string;
|
18
|
+
size: 'xl' | 'l' | 'm' | 's';
|
19
|
+
}
|
20
|
+
|
21
|
+
const Dropdown = React.forwardRef<HTMLSelectElement, DropdownProps>(
|
22
|
+
({ children, label, size = 'm', ...props }, ref) => {
|
23
|
+
return (
|
24
|
+
<FieldWrapper withLabel={Boolean(label)} sizeVariant={size}>
|
25
|
+
{label && (
|
26
|
+
<FieldLabel sizeVariant={size} disabled={props.disabled}>
|
27
|
+
<Label text={label}></Label>
|
28
|
+
</FieldLabel>
|
29
|
+
)}
|
30
|
+
|
31
|
+
<IconAddition
|
32
|
+
icon="angle-down"
|
33
|
+
disabled={props.disabled}
|
34
|
+
direction="rtl"
|
35
|
+
size={size}
|
36
|
+
/>
|
37
|
+
|
38
|
+
<Select ref={ref} sizeVariant={size} {...props}>
|
39
|
+
<option disabled selected>
|
40
|
+
{props.placeholder}
|
41
|
+
</option>
|
42
|
+
{children}
|
43
|
+
</Select>
|
44
|
+
</FieldWrapper>
|
45
|
+
);
|
46
|
+
},
|
47
|
+
);
|
48
|
+
|
49
|
+
const DropdownWithStatic = Object.assign(Dropdown, { Option: Option });
|
50
|
+
|
51
|
+
export { DropdownWithStatic as Dropdown };
|
52
|
+
|
53
|
+
const Select = styled.select<
|
54
|
+
Omit<DropdownProps, 'size'> & { sizeVariant: 'xl' | 'l' | 'm' | 's' }
|
55
|
+
>`
|
56
|
+
-webkit-appearance: none;
|
57
|
+
-moz-appearance: none;
|
58
|
+
appearance: none;
|
59
|
+
background-color: var(--color-white);
|
60
|
+
border: 2px solid var(--shades-of-grey-80);
|
61
|
+
cursor: pointer;
|
62
|
+
border-radius: var(--padding-s);
|
63
|
+
padding: ${(p) => fieldSizeVariants[p.sizeVariant].padding};
|
64
|
+
position: relative;
|
65
|
+
font-size: ${(p) => fieldSizeVariants[p.sizeVariant].font};
|
66
|
+
overflow: hidden;
|
67
|
+
color: var(--shades-of-grey-100);
|
68
|
+
font-weight: var(--font-bold);
|
69
|
+
transition: border var(--transition-speed),
|
70
|
+
background-color var(--transition-speed);
|
71
|
+
width: 100%;
|
72
|
+
|
73
|
+
&::placeholder {
|
74
|
+
color: var(--shades-of-grey-80);
|
75
|
+
}
|
76
|
+
|
77
|
+
&:focus,
|
78
|
+
&:active {
|
79
|
+
outline: none;
|
80
|
+
background-color: transparent;
|
81
|
+
border: 2px solid var(--color-orange);
|
82
|
+
}
|
83
|
+
|
84
|
+
${(p) => getValidationTypeProps(p.validationType)};
|
85
|
+
|
86
|
+
&:disabled {
|
87
|
+
&::placeholder {
|
88
|
+
color: var(--shades-of-grey-60);
|
89
|
+
}
|
90
|
+
background-color: var(--shades-of-grey-40);
|
91
|
+
border: 2px solid var(--shades-of-grey-60);
|
92
|
+
}
|
93
|
+
`;
|
94
|
+
|
95
|
+
Select.displayName = 'Select';
|
@@ -0,0 +1 @@
|
|
1
|
+
export { Dropdown } from './Dropdown';
|
@@ -0,0 +1,32 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
3
|
+
|
4
|
+
import { InfoCard } from './InfoCard';
|
5
|
+
|
6
|
+
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
|
7
|
+
export default {
|
8
|
+
title: 'Molecules/InfoCard',
|
9
|
+
component: InfoCard,
|
10
|
+
} as ComponentMeta<typeof InfoCard>;
|
11
|
+
|
12
|
+
const Template: ComponentStory<typeof InfoCard> = (args) => <InfoCard {...args}>Tag</InfoCard>;
|
13
|
+
|
14
|
+
export const Basic = Template.bind({});
|
15
|
+
Basic.args = {
|
16
|
+
title: 'Title',
|
17
|
+
body: 'This is body',
|
18
|
+
};
|
19
|
+
|
20
|
+
export const WithBackground = Template.bind({});
|
21
|
+
WithBackground.args = {
|
22
|
+
title: 'Title',
|
23
|
+
body: 'This is body',
|
24
|
+
background: <div style={{ width: '100%', height: '240px', backgroundColor: 'var(--color-ecru)' }}/>,
|
25
|
+
};
|
26
|
+
|
27
|
+
export const Inversed = Template.bind({});
|
28
|
+
Inversed.args = {
|
29
|
+
title: 'Title',
|
30
|
+
body: 'This is body',
|
31
|
+
inverse: true,
|
32
|
+
};
|
@@ -0,0 +1,69 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import styled from 'styled-components';
|
3
|
+
import { Card } from '../../atoms/Card';
|
4
|
+
import { Hero } from '../../atoms/Typography/Hero';
|
5
|
+
import { Body } from '../../atoms/Typography/Body';
|
6
|
+
|
7
|
+
export interface InfoCardProps {
|
8
|
+
title: string;
|
9
|
+
body: React.ReactNode;
|
10
|
+
background?: React.ReactNode;
|
11
|
+
inverse?: boolean;
|
12
|
+
size?: 's' | 'm' | 'l' | 'xl' | 'xxl'
|
13
|
+
}
|
14
|
+
|
15
|
+
export const InfoCard: React.FC<InfoCardProps> = ({
|
16
|
+
title,
|
17
|
+
body,
|
18
|
+
background,
|
19
|
+
inverse = false,
|
20
|
+
size = 'l',
|
21
|
+
}) => {
|
22
|
+
return (
|
23
|
+
<Root>
|
24
|
+
{background && <Background>{background}</Background>}
|
25
|
+
<CardBody inverse={inverse}>
|
26
|
+
<Hero size={size}>{title}</Hero>
|
27
|
+
<Body size={size}>{body}</Body>
|
28
|
+
</CardBody>
|
29
|
+
</Root>
|
30
|
+
);
|
31
|
+
};
|
32
|
+
|
33
|
+
const Root = styled.div`
|
34
|
+
padding: 0;
|
35
|
+
position: relative;
|
36
|
+
|
37
|
+
& > ${Card} > p {
|
38
|
+
margin: 0;
|
39
|
+
}
|
40
|
+
`;
|
41
|
+
|
42
|
+
Root.displayName = 'Root';
|
43
|
+
|
44
|
+
const CardBody = styled(Card)<{ inverse: boolean }>`
|
45
|
+
position: relative;
|
46
|
+
|
47
|
+
& > * {
|
48
|
+
margin: 0;
|
49
|
+
margin-bottom: var(--padding-m);
|
50
|
+
color: ${p => p.inverse ? 'var(--color-white)' : 'var(--color-navy)'};
|
51
|
+
}
|
52
|
+
|
53
|
+
& > p {
|
54
|
+
margin: 0;
|
55
|
+
}
|
56
|
+
`;
|
57
|
+
|
58
|
+
CardBody.displayName = 'CardBody';
|
59
|
+
|
60
|
+
const Background = styled(Card)`
|
61
|
+
border-radius: 24px 24px 0px 0px;
|
62
|
+
position: relative;
|
63
|
+
height: 100%;
|
64
|
+
margin-bottom: -24px;
|
65
|
+
padding: 0;
|
66
|
+
overflow: hidden;
|
67
|
+
`;
|
68
|
+
|
69
|
+
Background.displayName = 'Background';
|
@@ -0,0 +1 @@
|
|
1
|
+
export { InfoCard } from './InfoCard';
|
@@ -0,0 +1,80 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
3
|
+
|
4
|
+
import { Input } from './Input';
|
5
|
+
|
6
|
+
export default {
|
7
|
+
title: 'Molecules/Input',
|
8
|
+
component: Input,
|
9
|
+
} as ComponentMeta<typeof Input>;
|
10
|
+
|
11
|
+
const Template: ComponentStory<typeof Input> = (args) => <Input {...args} />;
|
12
|
+
|
13
|
+
export const Basic = Template.bind({});
|
14
|
+
Basic.args = {
|
15
|
+
placeholder: 'Basic input',
|
16
|
+
disabled: false,
|
17
|
+
size: 'm',
|
18
|
+
};
|
19
|
+
|
20
|
+
export const Success = Template.bind({});
|
21
|
+
Success.args = {
|
22
|
+
placeholder: 'Success input',
|
23
|
+
validationType: 'success',
|
24
|
+
disabled: false,
|
25
|
+
size: 'm',
|
26
|
+
};
|
27
|
+
|
28
|
+
export const Error = Template.bind({});
|
29
|
+
Error.args = {
|
30
|
+
placeholder: 'Error input',
|
31
|
+
validationType: 'error',
|
32
|
+
disabled: false,
|
33
|
+
size: 'm',
|
34
|
+
};
|
35
|
+
|
36
|
+
export const Disabled = Template.bind({});
|
37
|
+
Disabled.args = {
|
38
|
+
placeholder: 'Disabled input',
|
39
|
+
disabled: true,
|
40
|
+
size: 'm',
|
41
|
+
};
|
42
|
+
|
43
|
+
export const IconLTR = Template.bind({});
|
44
|
+
IconLTR.args = {
|
45
|
+
placeholder: 'Icon LTR input',
|
46
|
+
direction: 'ltr',
|
47
|
+
icon: 'user-circle',
|
48
|
+
disabled: false,
|
49
|
+
size: 'm',
|
50
|
+
onIconClick: () => console.log('click'),
|
51
|
+
};
|
52
|
+
|
53
|
+
export const IconRTL = Template.bind({});
|
54
|
+
IconRTL.args = {
|
55
|
+
placeholder: 'Icon RTL input',
|
56
|
+
direction: 'rtl',
|
57
|
+
icon: 'user-circle',
|
58
|
+
disabled: false,
|
59
|
+
size: 'm',
|
60
|
+
onIconClick: () => console.log('click'),
|
61
|
+
};
|
62
|
+
|
63
|
+
export const DisabledIcon = Template.bind({});
|
64
|
+
DisabledIcon.args = {
|
65
|
+
placeholder: 'Disabled with icon',
|
66
|
+
direction: 'ltr',
|
67
|
+
icon: 'user-circle',
|
68
|
+
disabled: true,
|
69
|
+
size: 'm',
|
70
|
+
};
|
71
|
+
|
72
|
+
export const WithLabel = Template.bind({});
|
73
|
+
WithLabel.args = {
|
74
|
+
placeholder: 'Basic input',
|
75
|
+
disabled: false,
|
76
|
+
label: 'Label',
|
77
|
+
direction: 'ltr',
|
78
|
+
icon: 'user-circle',
|
79
|
+
size: 'm',
|
80
|
+
};
|
@@ -0,0 +1,120 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import styled, { css, FlattenSimpleInterpolation } from 'styled-components';
|
3
|
+
import { FieldProps } from 'formik';
|
4
|
+
|
5
|
+
import { getValidationTypeProps } from '../../../helpers/validation';
|
6
|
+
import { ValidationType } from '../../../types/validation';
|
7
|
+
import { IconAddition, IconType } from '../../atoms/Icon';
|
8
|
+
import { Label } from '../../atoms/Typography/Label';
|
9
|
+
import { FieldLabel, fieldSizeVariants, FieldWrapper } from '../../atoms/Field';
|
10
|
+
|
11
|
+
export type InputProps = Omit<
|
12
|
+
React.InputHTMLAttributes<HTMLInputElement>,
|
13
|
+
'size'
|
14
|
+
> &
|
15
|
+
FieldProps & {
|
16
|
+
label?: string;
|
17
|
+
validationType?: ValidationType;
|
18
|
+
icon?: IconType;
|
19
|
+
size?: 'xl' | 'l' | 'm' | 's';
|
20
|
+
direction?: 'ltr' | 'rtl';
|
21
|
+
onIconClick?: () => void;
|
22
|
+
};
|
23
|
+
|
24
|
+
const getDirectionPadding = (
|
25
|
+
direction: InputProps['direction'],
|
26
|
+
padding: string,
|
27
|
+
): FlattenSimpleInterpolation => {
|
28
|
+
switch (direction) {
|
29
|
+
case 'ltr':
|
30
|
+
return css`
|
31
|
+
padding-left: ${padding};
|
32
|
+
`;
|
33
|
+
case 'rtl':
|
34
|
+
return css`
|
35
|
+
padding-right: ${padding};
|
36
|
+
`;
|
37
|
+
default:
|
38
|
+
return css``;
|
39
|
+
}
|
40
|
+
};
|
41
|
+
|
42
|
+
export const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
43
|
+
({ icon, label, size = 'm', onIconClick, field, ...props }, ref) => (
|
44
|
+
<FieldWrapper withLabel={Boolean(label)} sizeVariant={size}>
|
45
|
+
{label && (
|
46
|
+
<FieldLabel sizeVariant={size}>
|
47
|
+
<Label text={label} />
|
48
|
+
</FieldLabel>
|
49
|
+
)}
|
50
|
+
|
51
|
+
{props.direction !== 'rtl' && (
|
52
|
+
<IconAddition
|
53
|
+
icon={icon}
|
54
|
+
disabled={props.disabled}
|
55
|
+
direction={props.direction}
|
56
|
+
onClick={onIconClick}
|
57
|
+
size={size}
|
58
|
+
/>
|
59
|
+
)}
|
60
|
+
|
61
|
+
<InputElement ref={ref} sizeVariant={size} {...field} {...props} />
|
62
|
+
|
63
|
+
{props.direction === 'rtl' && (
|
64
|
+
<IconAddition
|
65
|
+
icon={icon}
|
66
|
+
disabled={props.disabled}
|
67
|
+
direction={props.direction}
|
68
|
+
onClick={onIconClick}
|
69
|
+
/>
|
70
|
+
)}
|
71
|
+
</FieldWrapper>
|
72
|
+
),
|
73
|
+
);
|
74
|
+
|
75
|
+
const InputElement = styled.input<
|
76
|
+
Pick<InputProps, 'validationType' | 'direction'> & {
|
77
|
+
sizeVariant: 'xl' | 'l' | 'm' | 's';
|
78
|
+
}
|
79
|
+
>`
|
80
|
+
background-color: var(--color-white);
|
81
|
+
border: 2px solid var(--shades-of-grey-80);
|
82
|
+
border-radius: var(--padding-s);
|
83
|
+
padding: ${(p) => fieldSizeVariants[p.sizeVariant].padding};
|
84
|
+
position: relative;
|
85
|
+
overflow: hidden;
|
86
|
+
font-size: ${(p) => fieldSizeVariants[p.sizeVariant].font};
|
87
|
+
color: var(--shades-of-grey-100);
|
88
|
+
font-weight: var(--font-bold);
|
89
|
+
transition: border var(--transition-speed),
|
90
|
+
background-color var(--transition-speed);
|
91
|
+
width: 100%;
|
92
|
+
|
93
|
+
&::placeholder {
|
94
|
+
color: var(--shades-of-grey-80);
|
95
|
+
}
|
96
|
+
|
97
|
+
&:focus,
|
98
|
+
&:active {
|
99
|
+
outline: none;
|
100
|
+
background-color: transparent;
|
101
|
+
border: 2px solid var(--color-orange);
|
102
|
+
}
|
103
|
+
|
104
|
+
${(p) => getValidationTypeProps(p.validationType)};
|
105
|
+
${(p) =>
|
106
|
+
getDirectionPadding(
|
107
|
+
p.direction,
|
108
|
+
fieldSizeVariants[p.sizeVariant].iconPadding,
|
109
|
+
)};
|
110
|
+
|
111
|
+
&:disabled {
|
112
|
+
&::placeholder {
|
113
|
+
color: var(--shades-of-grey-60);
|
114
|
+
}
|
115
|
+
background-color: var(--shades-of-grey-40);
|
116
|
+
border: 2px solid var(--shades-of-grey-60);
|
117
|
+
}
|
118
|
+
`;
|
119
|
+
|
120
|
+
Input.displayName = 'Input';
|
@@ -0,0 +1 @@
|
|
1
|
+
export { Input } from './Input';
|
@@ -0,0 +1,32 @@
|
|
1
|
+
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
2
|
+
|
3
|
+
import { Profile } from './Profile';
|
4
|
+
|
5
|
+
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
|
6
|
+
export default {
|
7
|
+
title: 'Molecules/Profile',
|
8
|
+
component: Profile,
|
9
|
+
argTypes: {
|
10
|
+
size: {
|
11
|
+
control: 'select',
|
12
|
+
options: ['s', 'm', 'l', 'xl', 'xxl'],
|
13
|
+
defaultValue: 'm',
|
14
|
+
},
|
15
|
+
},
|
16
|
+
} as ComponentMeta<typeof Profile>;
|
17
|
+
|
18
|
+
const Template: ComponentStory<typeof Profile> = (args) => (
|
19
|
+
<Profile {...args}>children</Profile>
|
20
|
+
);
|
21
|
+
|
22
|
+
export const Basic = Template.bind({});
|
23
|
+
Basic.args = {
|
24
|
+
src: 'https://img.freepik.com/darmowe-zdjecie/dosc-usmiechnieta-radosnie-kobieta-o-jasnych-wlosach-ubrana-swobodnie-wygladajaca-z-zadowoleniem_176420-15187.jpg?w=1380&t=st=1660198496~exp=1660199096~hmac=7401572065d2cd7bb67d9f43dbde5c116b90aad419b179fffac1196df24869f2',
|
25
|
+
alt: 'Joanna Simpson',
|
26
|
+
name: 'Joanna Simpson',
|
27
|
+
};
|
28
|
+
|
29
|
+
export const WithInitials = Template.bind({});
|
30
|
+
WithInitials.args = {
|
31
|
+
name: 'Joanna Simpson',
|
32
|
+
};
|
@@ -0,0 +1,19 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { render } from '@testing-library/react';
|
3
|
+
import { Profile } from './Profile';
|
4
|
+
|
5
|
+
const SRC =
|
6
|
+
'https://img.freepik.com/darmowe-zdjecie/dosc-usmiechnieta-radosnie-kobieta-o-jasnych-wlosach-ubrana-swobodnie-wygladajaca-z-zadowoleniem_176420-15187.jpg?w=1380&t=st=1660198496~exp=1660199096~hmac=7401572065d2cd7bb67d9f43dbde5c116b90aad419b179fffac1196df24869f2';
|
7
|
+
|
8
|
+
describe('<Profile />', () => {
|
9
|
+
it('profile should render', () => {
|
10
|
+
render(<Profile src={SRC} alt="Jane Doe" name="Jane Doe" />);
|
11
|
+
});
|
12
|
+
|
13
|
+
it('profile should match snapshot', () => {
|
14
|
+
const { container } = render(
|
15
|
+
<Profile src={SRC} alt="Jane Doe" name="Jane Doe" />,
|
16
|
+
);
|
17
|
+
expect(container).toMatchSnapshot();
|
18
|
+
});
|
19
|
+
});
|
@@ -0,0 +1,60 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import styled from 'styled-components';
|
3
|
+
import { Avatar, Typography } from '../../atoms';
|
4
|
+
import { Initials } from '../../atoms/Initials';
|
5
|
+
|
6
|
+
const { Hero } = Typography;
|
7
|
+
|
8
|
+
type ProfileProps = Partial<React.ComponentProps<typeof Avatar>> & {
|
9
|
+
name: string;
|
10
|
+
children?: React.ReactNode;
|
11
|
+
};
|
12
|
+
|
13
|
+
const getInitials = (text: string): string =>
|
14
|
+
text
|
15
|
+
.split(' ')
|
16
|
+
.map((part) => part[0])
|
17
|
+
.slice(0, 2)
|
18
|
+
.join('');
|
19
|
+
|
20
|
+
export const Profile: React.FC<ProfileProps> = ({
|
21
|
+
src,
|
22
|
+
alt,
|
23
|
+
size,
|
24
|
+
name,
|
25
|
+
children,
|
26
|
+
}) => (
|
27
|
+
<Root>
|
28
|
+
{src ? (
|
29
|
+
<Avatar src={src} alt={alt || name} size={size} />
|
30
|
+
) : (
|
31
|
+
<Initials text={getInitials(name)} size={size} />
|
32
|
+
)}
|
33
|
+
|
34
|
+
<Details>
|
35
|
+
<Name as="span">{name}</Name>
|
36
|
+
{children}
|
37
|
+
</Details>
|
38
|
+
</Root>
|
39
|
+
);
|
40
|
+
|
41
|
+
const Root = styled.div`
|
42
|
+
display: flex;
|
43
|
+
gap: var(--padding-m);
|
44
|
+
align-items: center;
|
45
|
+
`;
|
46
|
+
|
47
|
+
Root.displayName = 'Root';
|
48
|
+
|
49
|
+
const Name = styled(Hero)`
|
50
|
+
font-size: var(--font-bold);
|
51
|
+
`;
|
52
|
+
|
53
|
+
Name.displayName = 'Name';
|
54
|
+
|
55
|
+
const Details = styled.div`
|
56
|
+
display: flex;
|
57
|
+
flex-direction: column;
|
58
|
+
`;
|
59
|
+
|
60
|
+
Details.displayName = 'Details';
|
@@ -0,0 +1 @@
|
|
1
|
+
export { Profile } from './Profile';
|
@@ -0,0 +1,37 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
3
|
+
import { Radio, Size } from './Radio';
|
4
|
+
|
5
|
+
export default {
|
6
|
+
title: 'Molecules/Radio',
|
7
|
+
component: Radio,
|
8
|
+
argTypes: {
|
9
|
+
disabled: {
|
10
|
+
control: 'boolean',
|
11
|
+
defaultValue: false,
|
12
|
+
},
|
13
|
+
size: {
|
14
|
+
control: 'select',
|
15
|
+
options: Object.keys(Size),
|
16
|
+
defaultValue: Size.xl,
|
17
|
+
},
|
18
|
+
},
|
19
|
+
} as ComponentMeta<typeof Radio>;
|
20
|
+
|
21
|
+
const Template: ComponentStory<typeof Radio> = (args) => (
|
22
|
+
<>
|
23
|
+
<Radio {...args} name={'radio'} onChange={() => console.log('change')}/>
|
24
|
+
</>
|
25
|
+
);
|
26
|
+
|
27
|
+
export const Basic = Template.bind({});
|
28
|
+
|
29
|
+
export const Controlled = Template.bind({});
|
30
|
+
Controlled.args = {
|
31
|
+
checked: false,
|
32
|
+
};
|
33
|
+
|
34
|
+
export const WithLabel = Template.bind({});
|
35
|
+
WithLabel.args = {
|
36
|
+
label: 'Label',
|
37
|
+
};
|
@@ -0,0 +1,43 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { render, fireEvent, screen } from '@testing-library/react';
|
3
|
+
import userEvent from '@testing-library/user-event';
|
4
|
+
import { Radio } from './Radio';
|
5
|
+
|
6
|
+
describe('<Radio />', () => {
|
7
|
+
it('should render', () => {
|
8
|
+
render(<Radio />);
|
9
|
+
});
|
10
|
+
it('enabled - should match snapshot', () => {
|
11
|
+
const { container } = render(<Radio label={'Label'}/>);
|
12
|
+
expect(container).toMatchSnapshot();
|
13
|
+
});
|
14
|
+
it('enabled + checked - should match snapshot', () => {
|
15
|
+
const { container } = render(<Radio label={'Label'} defaultChecked />);
|
16
|
+
expect(container).toMatchSnapshot();
|
17
|
+
});
|
18
|
+
it('disabled - should match snapshot', () => {
|
19
|
+
const { container } = render(<Radio label={'Label'} disabled={true} />);
|
20
|
+
expect(container).toMatchSnapshot();
|
21
|
+
});
|
22
|
+
it('should change the value', () => {
|
23
|
+
render(<Radio label={'Test label'}/>);
|
24
|
+
const input = screen.getByLabelText(/Test label/);
|
25
|
+
expect(input).not.toBeChecked();
|
26
|
+
fireEvent.click(input);
|
27
|
+
expect(input).toBeChecked();
|
28
|
+
});
|
29
|
+
it('should allow only one radio button to be checked', async () => {
|
30
|
+
const user = userEvent.setup();
|
31
|
+
render(
|
32
|
+
<form>
|
33
|
+
<Radio name="radio" value="first" label="first" defaultChecked />
|
34
|
+
<Radio name="radio" value="second" label="second" />
|
35
|
+
</form>,
|
36
|
+
);
|
37
|
+
expect(screen.getByLabelText(/first/)).toBeChecked();
|
38
|
+
expect(screen.getByLabelText(/second/)).not.toBeChecked();
|
39
|
+
await user.click(screen.getByLabelText(/second/));
|
40
|
+
expect(screen.getByLabelText(/first/)).not.toBeChecked();
|
41
|
+
expect(screen.getByLabelText(/second/)).toBeChecked();
|
42
|
+
});
|
43
|
+
});
|