@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,17 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { render } from '@testing-library/react';
|
3
|
+
import { Avatar } from './Avatar';
|
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('<Avatar />', () => {
|
9
|
+
it('avatar should render', () => {
|
10
|
+
render(<Avatar src={SRC} alt="Jane Doe" />);
|
11
|
+
});
|
12
|
+
|
13
|
+
it('avatar should match snapshot', () => {
|
14
|
+
const { container } = render(<Avatar src={SRC} alt="Jane Doe" />);
|
15
|
+
expect(container).toMatchSnapshot();
|
16
|
+
});
|
17
|
+
});
|
@@ -0,0 +1,34 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import styled from 'styled-components';
|
3
|
+
|
4
|
+
type AvatarProps = {
|
5
|
+
src: string;
|
6
|
+
alt: string;
|
7
|
+
size?: 's' | 'm' | 'l' | 'xl' | 'xxl';
|
8
|
+
};
|
9
|
+
|
10
|
+
const sizeVariant = {
|
11
|
+
s: 20,
|
12
|
+
m: 32,
|
13
|
+
l: 53,
|
14
|
+
xl: 64,
|
15
|
+
xxl: 94,
|
16
|
+
};
|
17
|
+
|
18
|
+
export const Avatar: React.FC<AvatarProps> = ({ src, alt, size = 'm' }) => {
|
19
|
+
return (
|
20
|
+
<Image
|
21
|
+
src={src}
|
22
|
+
alt={alt}
|
23
|
+
width={sizeVariant[size]}
|
24
|
+
height={sizeVariant[size]}
|
25
|
+
/>
|
26
|
+
);
|
27
|
+
};
|
28
|
+
|
29
|
+
const Image = styled.img`
|
30
|
+
object-fit: cover;
|
31
|
+
border-radius: 50%;
|
32
|
+
`;
|
33
|
+
|
34
|
+
Image.displayName = 'Image';
|
@@ -0,0 +1,13 @@
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
2
|
+
|
3
|
+
exports[`<Avatar /> avatar should match snapshot 1`] = `
|
4
|
+
<div>
|
5
|
+
<img
|
6
|
+
alt="Jane Doe"
|
7
|
+
class="sc-bdvvtL btXxWo"
|
8
|
+
height="32"
|
9
|
+
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"
|
10
|
+
width="32"
|
11
|
+
/>
|
12
|
+
</div>
|
13
|
+
`;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { Avatar } from './Avatar';
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
3
|
+
|
4
|
+
import { Card } from './Card';
|
5
|
+
|
6
|
+
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
|
7
|
+
export default {
|
8
|
+
title: 'Atoms/Card',
|
9
|
+
component: Card,
|
10
|
+
argTypes: {
|
11
|
+
size: {
|
12
|
+
control: 'select',
|
13
|
+
options: ['s', 'm', 'l'],
|
14
|
+
defaultValue: 'l',
|
15
|
+
},
|
16
|
+
},
|
17
|
+
} as ComponentMeta<typeof Card>;
|
18
|
+
|
19
|
+
const Template: ComponentStory<typeof Card> = (args) => (
|
20
|
+
<Card {...args}>Content</Card>
|
21
|
+
);
|
22
|
+
|
23
|
+
export const Basic = Template.bind({});
|
24
|
+
Basic.args = {};
|
25
|
+
|
26
|
+
export const Inversed = Template.bind({});
|
27
|
+
Inversed.args = {
|
28
|
+
inverse: true,
|
29
|
+
};
|
@@ -0,0 +1,32 @@
|
|
1
|
+
import styled from 'styled-components';
|
2
|
+
|
3
|
+
export interface CardProps {
|
4
|
+
inverse?: boolean;
|
5
|
+
size?: 's' | 'm' | 'l';
|
6
|
+
}
|
7
|
+
|
8
|
+
const sizeVariants = {
|
9
|
+
s: {
|
10
|
+
padding: 16,
|
11
|
+
borderRadius: 5,
|
12
|
+
},
|
13
|
+
m: {
|
14
|
+
padding: 16,
|
15
|
+
borderRadius: 16,
|
16
|
+
},
|
17
|
+
l: {
|
18
|
+
padding: 32,
|
19
|
+
borderRadius: 24,
|
20
|
+
},
|
21
|
+
};
|
22
|
+
|
23
|
+
export const Card = styled.div<CardProps>`
|
24
|
+
background-color: ${(p) =>
|
25
|
+
p.inverse ? 'var(--color-navy)' : 'var(--color-white)'};
|
26
|
+
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
27
|
+
color: ${(p) => (p.inverse ? 'var(--color-white)' : 'var(--color-navy)')};
|
28
|
+
padding: ${(p) => sizeVariants[p.size || 'l'].padding}px;
|
29
|
+
border-radius: ${(p) => sizeVariants[p.size || 'l'].borderRadius}px;
|
30
|
+
`;
|
31
|
+
|
32
|
+
Card.displayName = 'Card';
|
@@ -0,0 +1 @@
|
|
1
|
+
export { Card } from './Card';
|
@@ -0,0 +1,62 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
3
|
+
import { action } from '@storybook/addon-actions';
|
4
|
+
import { Chip, ChipVariant, ChipSize } from './Chip';
|
5
|
+
|
6
|
+
export default {
|
7
|
+
title: 'Atoms/Chip',
|
8
|
+
component: Chip,
|
9
|
+
argTypes: {
|
10
|
+
label: {
|
11
|
+
name: 'label',
|
12
|
+
type: {
|
13
|
+
name: 'string',
|
14
|
+
required: true,
|
15
|
+
},
|
16
|
+
defaultValue: 'Accept',
|
17
|
+
},
|
18
|
+
size: {
|
19
|
+
name: 'size',
|
20
|
+
type: {
|
21
|
+
name: 'string',
|
22
|
+
required: false,
|
23
|
+
},
|
24
|
+
control: {
|
25
|
+
type: 'select',
|
26
|
+
},
|
27
|
+
options: Object.keys(ChipSize),
|
28
|
+
defaultValue: ChipSize.xl,
|
29
|
+
},
|
30
|
+
variant: {
|
31
|
+
name: 'variant',
|
32
|
+
type: {
|
33
|
+
name: 'string',
|
34
|
+
required: false,
|
35
|
+
},
|
36
|
+
control: {
|
37
|
+
type: 'select',
|
38
|
+
},
|
39
|
+
options: Object.keys(ChipVariant),
|
40
|
+
defaultValue: ChipVariant.primary,
|
41
|
+
},
|
42
|
+
onClick: {
|
43
|
+
name: 'onClick',
|
44
|
+
type: {
|
45
|
+
name: 'function',
|
46
|
+
required: false,
|
47
|
+
},
|
48
|
+
defaultValue: null,
|
49
|
+
},
|
50
|
+
},
|
51
|
+
} as ComponentMeta<typeof Chip>;
|
52
|
+
|
53
|
+
const Template: ComponentStory<typeof Chip> = (args) => (
|
54
|
+
<Chip {...args} />
|
55
|
+
);
|
56
|
+
|
57
|
+
export const Basic = Template.bind({});
|
58
|
+
|
59
|
+
export const Clickable = Template.bind({});
|
60
|
+
Clickable.args = {
|
61
|
+
onClick: action('clicked'),
|
62
|
+
};
|
@@ -0,0 +1,23 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { render, screen } from '@testing-library/react';
|
3
|
+
import userEvent from '@testing-library/user-event';
|
4
|
+
import { Chip, ChipVariant } from './Chip';
|
5
|
+
|
6
|
+
describe('<Chip />', () => {
|
7
|
+
it('should match snapshot - basic', () => {
|
8
|
+
const { container } = render(<Chip label="Accept" />);
|
9
|
+
expect(container).toMatchSnapshot();
|
10
|
+
});
|
11
|
+
it('should match snapshot - icon', () => {
|
12
|
+
const { container } = render(<Chip label="Accept" variant={ChipVariant.primary} iconLeft="close" />);
|
13
|
+
expect(container).toMatchSnapshot();
|
14
|
+
});
|
15
|
+
it('should call onclick function', async () => {
|
16
|
+
const user = userEvent.setup();
|
17
|
+
const handleClick = jest.fn();
|
18
|
+
render(<Chip label="Accept" onClick={handleClick} />);
|
19
|
+
expect(handleClick).not.toHaveBeenCalled();
|
20
|
+
await user.click(screen.getByText(/Accept/));
|
21
|
+
expect(handleClick).toHaveBeenCalled();
|
22
|
+
});
|
23
|
+
});
|
@@ -0,0 +1,233 @@
|
|
1
|
+
import React, { MouseEvent, FC } from 'react';
|
2
|
+
import styled from 'styled-components';
|
3
|
+
import { Icon, IconType } from '../Icon';
|
4
|
+
|
5
|
+
type OnClickFunctionType = (e: MouseEvent<HTMLDivElement>) => void;
|
6
|
+
|
7
|
+
export interface ChipProps {
|
8
|
+
iconLeft?: IconType,
|
9
|
+
iconRight?: IconType,
|
10
|
+
size?: ChipSize,
|
11
|
+
label: string;
|
12
|
+
variant?: ChipVariant;
|
13
|
+
onClick?: OnClickFunctionType;
|
14
|
+
}
|
15
|
+
|
16
|
+
export enum ChipVariant {
|
17
|
+
transparent = 'transparent',
|
18
|
+
white = 'white',
|
19
|
+
primary = 'primary',
|
20
|
+
secondary = 'secondary',
|
21
|
+
}
|
22
|
+
|
23
|
+
export enum ChipSize {
|
24
|
+
xl = 'xl',
|
25
|
+
l = 'l',
|
26
|
+
m = 'm',
|
27
|
+
s = 's',
|
28
|
+
}
|
29
|
+
|
30
|
+
const sizeVariant = {
|
31
|
+
xl: {
|
32
|
+
iconSize: {
|
33
|
+
width: 25,
|
34
|
+
height: 25,
|
35
|
+
},
|
36
|
+
gap: '12.5px',
|
37
|
+
paddingY: '12.5px',
|
38
|
+
paddingX: '17.5px',
|
39
|
+
border: '2px',
|
40
|
+
fontSize: '20px',
|
41
|
+
lineHeight: '30px',
|
42
|
+
},
|
43
|
+
l: {
|
44
|
+
iconSize: {
|
45
|
+
width: 20,
|
46
|
+
height: 20,
|
47
|
+
},
|
48
|
+
gap: '10px',
|
49
|
+
paddingY: '10px',
|
50
|
+
paddingX: '14px',
|
51
|
+
border: '2px',
|
52
|
+
fontSize: '16px',
|
53
|
+
lineHeight: '24px',
|
54
|
+
},
|
55
|
+
m: {
|
56
|
+
iconSize: {
|
57
|
+
width: 15,
|
58
|
+
height: 15,
|
59
|
+
},
|
60
|
+
gap: '7.5px',
|
61
|
+
paddingY: '7.5px',
|
62
|
+
paddingX: '10.5px',
|
63
|
+
border: '2px',
|
64
|
+
fontSize: '12px',
|
65
|
+
lineHeight: '18px',
|
66
|
+
},
|
67
|
+
s: {
|
68
|
+
iconSize: {
|
69
|
+
width: 10,
|
70
|
+
height: 10,
|
71
|
+
},
|
72
|
+
gap: '5px',
|
73
|
+
paddingY: '5px',
|
74
|
+
paddingX: '7px',
|
75
|
+
border: '1.5px',
|
76
|
+
fontSize: '8px',
|
77
|
+
lineHeight: '12px',
|
78
|
+
},
|
79
|
+
};
|
80
|
+
|
81
|
+
const colorVariant = {
|
82
|
+
primary: {
|
83
|
+
fontColor: 'var(--shades-of-grey-0)',
|
84
|
+
},
|
85
|
+
secondary: {
|
86
|
+
fontColor: 'var(--color-orange)',
|
87
|
+
},
|
88
|
+
transparent: {
|
89
|
+
fontColor: 'var(--shades-of-grey-100)',
|
90
|
+
},
|
91
|
+
white: {
|
92
|
+
fontColor: 'var(--shades-of-grey-100);',
|
93
|
+
},
|
94
|
+
};
|
95
|
+
|
96
|
+
export const Chip: FC<ChipProps> = (props: ChipProps) => {
|
97
|
+
const {
|
98
|
+
iconLeft, iconRight, label, size = ChipSize.m, variant = ChipVariant.primary, onClick,
|
99
|
+
} = props;
|
100
|
+
|
101
|
+
return (
|
102
|
+
<ChipWrapper size={size} variant={variant} onClick={onClick}>
|
103
|
+
{iconLeft && (
|
104
|
+
<IconWrapper>
|
105
|
+
<Icon
|
106
|
+
type={iconLeft}
|
107
|
+
fill={colorVariant[variant].fontColor}
|
108
|
+
size={sizeVariant[size].iconSize}
|
109
|
+
/>
|
110
|
+
</IconWrapper>
|
111
|
+
)}
|
112
|
+
<Text size={size}>{label}</Text>
|
113
|
+
{iconRight && (
|
114
|
+
<IconWrapper>
|
115
|
+
<Icon
|
116
|
+
type={iconRight}
|
117
|
+
fill={colorVariant[variant].fontColor}
|
118
|
+
size={sizeVariant[size].iconSize}
|
119
|
+
/>
|
120
|
+
</IconWrapper>
|
121
|
+
)}
|
122
|
+
</ChipWrapper>
|
123
|
+
);
|
124
|
+
};
|
125
|
+
|
126
|
+
const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
|
127
|
+
switch (variant) {
|
128
|
+
case ChipVariant.secondary:
|
129
|
+
return `
|
130
|
+
background-color: var(--color-white);
|
131
|
+
opacity: 0.9;
|
132
|
+
border-color: var(--color-orange);
|
133
|
+
border-style: solid;
|
134
|
+
|
135
|
+
${clickable && `
|
136
|
+
cursor: pointer;
|
137
|
+
|
138
|
+
&:hover {
|
139
|
+
opacity: 0.8;
|
140
|
+
}
|
141
|
+
|
142
|
+
&:active {
|
143
|
+
opacity: 0.65;
|
144
|
+
}
|
145
|
+
`}
|
146
|
+
`;
|
147
|
+
case ChipVariant.transparent:
|
148
|
+
return `
|
149
|
+
${clickable && `
|
150
|
+
&:hover {
|
151
|
+
background-color: var(--shades-of-grey-40);
|
152
|
+
}
|
153
|
+
|
154
|
+
&:active {
|
155
|
+
background-color: var(--shades-of-grey-60);
|
156
|
+
}
|
157
|
+
`}
|
158
|
+
`;
|
159
|
+
case ChipVariant.white:
|
160
|
+
return `
|
161
|
+
background-color: var(--color-white);
|
162
|
+
border-color: var(--shades-of-grey-40);
|
163
|
+
border-style: solid;
|
164
|
+
|
165
|
+
${clickable && `
|
166
|
+
&:hover {
|
167
|
+
background-color: var(--shades-of-grey-20);
|
168
|
+
}
|
169
|
+
|
170
|
+
&:active {
|
171
|
+
border-color: var(--shades-of-grey-100);
|
172
|
+
}
|
173
|
+
`}
|
174
|
+
`;
|
175
|
+
case ChipVariant.primary:
|
176
|
+
default:
|
177
|
+
return `
|
178
|
+
background-color: var(--color-orange);
|
179
|
+
border-color: var(--color-orange);
|
180
|
+
border-style: solid;
|
181
|
+
|
182
|
+
${clickable && `
|
183
|
+
&:hover {
|
184
|
+
opacity: 0.8;
|
185
|
+
}
|
186
|
+
|
187
|
+
&:active {
|
188
|
+
opacity: 0.65;
|
189
|
+
}
|
190
|
+
`}
|
191
|
+
`;
|
192
|
+
}
|
193
|
+
};
|
194
|
+
|
195
|
+
Chip.displayName = 'Chip';
|
196
|
+
|
197
|
+
const ChipWrapper = styled.div<{ size: ChipSize, variant: ChipVariant, onClick?: OnClickFunctionType }>`
|
198
|
+
border-radius: 100px;
|
199
|
+
display: flex;
|
200
|
+
justify-content: center;
|
201
|
+
width: min-content;
|
202
|
+
|
203
|
+
${(p) => `
|
204
|
+
border-width: ${sizeVariant[p.size].border};
|
205
|
+
padding: ${sizeVariant[p.size].paddingY} ${sizeVariant[p.size].paddingX};
|
206
|
+
color: ${colorVariant[p.variant].fontColor};
|
207
|
+
${getVariantStyles(p.variant, typeof p.onClick === 'function')}
|
208
|
+
${typeof p.onClick === 'function' && `
|
209
|
+
cursor: pointer;
|
210
|
+
`}
|
211
|
+
`}
|
212
|
+
`;
|
213
|
+
|
214
|
+
const IconWrapper = styled.span`
|
215
|
+
display: flex;
|
216
|
+
align-items: center;
|
217
|
+
`;
|
218
|
+
|
219
|
+
IconWrapper.displayName = 'IconWrapper';
|
220
|
+
|
221
|
+
const Text = styled.span<{
|
222
|
+
size: ChipSize
|
223
|
+
}>`
|
224
|
+
color: inherit;
|
225
|
+
font-weight: bold;
|
226
|
+
${(p) => `
|
227
|
+
margin: 0 ${sizeVariant[p.size].gap};
|
228
|
+
line-height: ${sizeVariant[p.size].lineHeight};
|
229
|
+
font-size: ${sizeVariant[p.size].fontSize};
|
230
|
+
`}
|
231
|
+
`;
|
232
|
+
|
233
|
+
Text.displayName = 'Text';
|
@@ -0,0 +1,58 @@
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
2
|
+
|
3
|
+
exports[`<Radio /> should match snapshot - basic 1`] = `
|
4
|
+
<div>
|
5
|
+
<div
|
6
|
+
class="sc-gsDKAQ beQSVy"
|
7
|
+
>
|
8
|
+
<span
|
9
|
+
class="sc-hKwDye idViEF"
|
10
|
+
>
|
11
|
+
Accept
|
12
|
+
</span>
|
13
|
+
</div>
|
14
|
+
</div>
|
15
|
+
`;
|
16
|
+
|
17
|
+
exports[`<Radio /> should match snapshot - icon 1`] = `
|
18
|
+
<div>
|
19
|
+
<div
|
20
|
+
class="sc-gsDKAQ beQSVy"
|
21
|
+
>
|
22
|
+
<span
|
23
|
+
class="sc-dkPtRN doqhX"
|
24
|
+
>
|
25
|
+
<svg
|
26
|
+
fill="var(--shades-of-grey-0)"
|
27
|
+
height="15"
|
28
|
+
viewBox="0 0 14 14"
|
29
|
+
width="15"
|
30
|
+
xmlns="http://www.w3.org/2000/svg"
|
31
|
+
>
|
32
|
+
<path
|
33
|
+
d="m8.41 7 4.3-4.29a1.004 1.004 0 1 0-1.42-1.42L7 5.59l-4.29-4.3a1.004 1.004 0 0 0-1.42 1.42L5.59 7l-4.3 4.29a1 1 0 0 0 0 1.42.998.998 0 0 0 1.42 0L7 8.41l4.29 4.3a.998.998 0 0 0 1.42 0 .997.997 0 0 0 .219-1.095.998.998 0 0 0-.22-.325L8.41 7Z"
|
34
|
+
/>
|
35
|
+
</svg>
|
36
|
+
</span>
|
37
|
+
<span
|
38
|
+
class="sc-hKwDye idViEF"
|
39
|
+
>
|
40
|
+
Accept
|
41
|
+
</span>
|
42
|
+
</div>
|
43
|
+
</div>
|
44
|
+
`;
|
45
|
+
|
46
|
+
exports[`<Radio /> should match snapshot 1`] = `
|
47
|
+
<div>
|
48
|
+
<div
|
49
|
+
class="sc-gsDKAQ beQSVy"
|
50
|
+
>
|
51
|
+
<span
|
52
|
+
class="sc-hKwDye idViEF"
|
53
|
+
>
|
54
|
+
Accept
|
55
|
+
</span>
|
56
|
+
</div>
|
57
|
+
</div>
|
58
|
+
`;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { Chip } from './Chip';
|
@@ -0,0 +1,27 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
3
|
+
|
4
|
+
import { Divider } from './Divider';
|
5
|
+
|
6
|
+
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
|
7
|
+
export default {
|
8
|
+
title: 'Atoms/Divider',
|
9
|
+
component: Divider,
|
10
|
+
} as ComponentMeta<typeof Divider>;
|
11
|
+
|
12
|
+
const Template: ComponentStory<typeof Divider> = (args) => <Divider {...args} />;
|
13
|
+
|
14
|
+
export const Orange = Template.bind({});
|
15
|
+
Orange.args = {
|
16
|
+
variant: 'orange',
|
17
|
+
};
|
18
|
+
|
19
|
+
export const Navy = Template.bind({});
|
20
|
+
Navy.args = {
|
21
|
+
variant: 'navy',
|
22
|
+
};
|
23
|
+
|
24
|
+
export const White = Template.bind({});
|
25
|
+
White.args = {
|
26
|
+
variant: 'white',
|
27
|
+
};
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import styled from 'styled-components';
|
2
|
+
|
3
|
+
type DividerProps = {
|
4
|
+
variant?: 'orange' | 'navy' | 'white';
|
5
|
+
};
|
6
|
+
|
7
|
+
export const Divider = styled.div<DividerProps>`
|
8
|
+
width: 100%;
|
9
|
+
height: 2px;
|
10
|
+
background-color: ${(p) => `var(--color-${p.variant || 'navy'})`};
|
11
|
+
opacity: 0.2;
|
12
|
+
`;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { Divider } from './Divider';
|
@@ -0,0 +1,35 @@
|
|
1
|
+
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
2
|
+
import { Dot } from './Dot';
|
3
|
+
|
4
|
+
export default {
|
5
|
+
title: 'Atoms/Dot',
|
6
|
+
component: Dot,
|
7
|
+
argTypes: {
|
8
|
+
size: {
|
9
|
+
name: 'size',
|
10
|
+
type: {
|
11
|
+
name: 'string',
|
12
|
+
required: false,
|
13
|
+
},
|
14
|
+
control: {
|
15
|
+
type: 'select',
|
16
|
+
},
|
17
|
+
options: ['xl', 'l', 'm', 's'],
|
18
|
+
defaultValue: 'm',
|
19
|
+
},
|
20
|
+
},
|
21
|
+
} as ComponentMeta<typeof Dot>;
|
22
|
+
|
23
|
+
const Template: ComponentStory<typeof Dot> = (args) => <Dot {...args} />;
|
24
|
+
|
25
|
+
export const Icon = Template.bind({
|
26
|
+
icon: {
|
27
|
+
type: 'bell',
|
28
|
+
},
|
29
|
+
});
|
30
|
+
|
31
|
+
const TemplateWithChildren: ComponentStory<typeof Dot> = (args) => (
|
32
|
+
<Dot {...args}>7</Dot>
|
33
|
+
);
|
34
|
+
|
35
|
+
export const Basic = TemplateWithChildren.bind({});
|
@@ -0,0 +1,42 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import styled from 'styled-components';
|
3
|
+
import { Icon } from '../Icon';
|
4
|
+
|
5
|
+
type DotProps = {
|
6
|
+
icon?: React.ComponentProps<typeof Icon>;
|
7
|
+
children?: React.ReactNode;
|
8
|
+
size?: 'xl' | 'l' | 'm' | 's';
|
9
|
+
};
|
10
|
+
|
11
|
+
const sizeVariant = {
|
12
|
+
xl: 32,
|
13
|
+
l: 24,
|
14
|
+
m: 18,
|
15
|
+
s: 12,
|
16
|
+
};
|
17
|
+
|
18
|
+
export const Dot: React.FCS<DotProps> = ({
|
19
|
+
icon,
|
20
|
+
children,
|
21
|
+
className,
|
22
|
+
size = 'm',
|
23
|
+
}) => {
|
24
|
+
return (
|
25
|
+
<Root className={className} size={size}>
|
26
|
+
{icon ? <Icon {...icon} /> : children}
|
27
|
+
</Root>
|
28
|
+
);
|
29
|
+
};
|
30
|
+
|
31
|
+
const Root = styled.div<{ size: 'xl' | 'l' | 'm' | 's' }>`
|
32
|
+
background-color: var(--color-orange);
|
33
|
+
color: var(--color-white);
|
34
|
+
width: ${(p) => sizeVariant[p.size]}px;
|
35
|
+
height: ${(p) => sizeVariant[p.size]}px;
|
36
|
+
border-radius: ${(p) => sizeVariant[p.size] / 2}px;
|
37
|
+
line-height: ${(p) => sizeVariant[p.size]}px;
|
38
|
+
font-size: ${(p) => sizeVariant[p.size] / 2}px;
|
39
|
+
display: flex;
|
40
|
+
justify-content: center;
|
41
|
+
align-items: center;
|
42
|
+
`;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { Dot } from './Dot';
|
@@ -0,0 +1,32 @@
|
|
1
|
+
import styled from 'styled-components';
|
2
|
+
import { fieldSizeVariants } from './fieldSizeVariants';
|
3
|
+
|
4
|
+
interface FieldLabelProps {
|
5
|
+
sizeVariant: 'xl' | 'l' | 'm' | 's';
|
6
|
+
position?: 'inline' | 'block';
|
7
|
+
disabled?: boolean;
|
8
|
+
}
|
9
|
+
|
10
|
+
export const FieldLabel = styled.div<FieldLabelProps>`
|
11
|
+
${(p) =>
|
12
|
+
p.position === 'inline'
|
13
|
+
? `
|
14
|
+
position: relative;
|
15
|
+
display: flex;
|
16
|
+
align-items: center;
|
17
|
+
`
|
18
|
+
: `
|
19
|
+
position: absolute;
|
20
|
+
left: 0;
|
21
|
+
z-index: 10;
|
22
|
+
bottom: calc(100% - ${fieldSizeVariants[p.sizeVariant].font} - 4px);
|
23
|
+
`}
|
24
|
+
|
25
|
+
& label > span {
|
26
|
+
color: ${(p) =>
|
27
|
+
p.disabled ? 'var(--shades-of-grey-40)' : 'var(--shades-of-grey-80)'};
|
28
|
+
font-size: ${(p) => fieldSizeVariants[p.sizeVariant].font};
|
29
|
+
}
|
30
|
+
`;
|
31
|
+
|
32
|
+
FieldLabel.displayName = 'InputLabel';
|