@integrigo/integrigo-ui 1.6.16-d → 1.6.16-f
Sign up to get free protection for your applications and to get access to all the features.
- package/lib/index.esm.js +1 -1
- package/lib/index.js +1 -1
- package/lib/src/components/atoms/Chip/Chip.d.ts +5 -18
- package/lib/src/components/atoms/Divider/Divider.stories.d.ts +4 -4
- package/lib/src/components/atoms/Dot/Dot.stories.d.ts +3 -3
- package/lib/src/components/atoms/Icon/Icon.d.ts +1 -0
- package/lib/src/components/atoms/Icon/Icon.stories.d.ts +2 -2
- package/lib/src/components/atoms/Icon/icons/CalendarSlash.d.ts +3 -0
- package/lib/src/components/molecules/Checkbox/Checkbox.stories.d.ts +4 -4
- package/lib/src/components/molecules/Input/Input.d.ts +1 -1
- package/lib/src/components/molecules/Input/Input.stories.d.ts +9 -9
- package/lib/src/components/molecules/Radio/Radio.stories.d.ts +4 -4
- package/package.json +1 -1
- package/src/components/atoms/Chip/Chip.test.tsx +11 -9
- package/src/components/atoms/Chip/Chip.tsx +91 -79
- package/src/components/atoms/Icon/Icon.tsx +2 -0
- package/src/components/atoms/Icon/icons/CalendarSlash.tsx +9 -0
- package/src/components/molecules/Profile/Profile.tsx +1 -1
@@ -1,26 +1,13 @@
|
|
1
|
-
import { MouseEvent, FC } from
|
2
|
-
import { IconType } from
|
1
|
+
import { MouseEvent, FC } from "react";
|
2
|
+
import { IconType } from "../Icon";
|
3
3
|
declare type OnClickFunctionType = (e: MouseEvent<HTMLDivElement>) => void;
|
4
4
|
export interface ChipProps {
|
5
5
|
iconLeft?: IconType;
|
6
6
|
iconRight?: IconType;
|
7
|
-
size?:
|
8
|
-
label:
|
9
|
-
variant?:
|
7
|
+
size?: 's' | 'm' | 'l' | 'xl';
|
8
|
+
label: React.ReactNode;
|
9
|
+
variant?: 'transparent' | 'white' | 'primary' | 'secondary' | 'grey';
|
10
10
|
onClick?: OnClickFunctionType;
|
11
11
|
}
|
12
|
-
export declare enum ChipVariant {
|
13
|
-
transparent = "transparent",
|
14
|
-
white = "white",
|
15
|
-
primary = "primary",
|
16
|
-
secondary = "secondary",
|
17
|
-
grey = "grey"
|
18
|
-
}
|
19
|
-
export declare enum ChipSize {
|
20
|
-
xl = "xl",
|
21
|
-
l = "l",
|
22
|
-
m = "m",
|
23
|
-
s = "s"
|
24
|
-
}
|
25
12
|
export declare const Chip: FC<ChipProps>;
|
26
13
|
export {};
|
@@ -1,14 +1,14 @@
|
|
1
1
|
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
2
2
|
declare const _default: ComponentMeta<import("styled-components").StyledComponent<"div", any, {
|
3
|
-
variant?: "
|
3
|
+
variant?: "white" | "orange" | "navy" | undefined;
|
4
4
|
}, never>>;
|
5
5
|
export default _default;
|
6
6
|
export declare const Orange: ComponentStory<import("styled-components").StyledComponent<"div", any, {
|
7
|
-
variant?: "
|
7
|
+
variant?: "white" | "orange" | "navy" | undefined;
|
8
8
|
}, never>>;
|
9
9
|
export declare const Navy: ComponentStory<import("styled-components").StyledComponent<"div", any, {
|
10
|
-
variant?: "
|
10
|
+
variant?: "white" | "orange" | "navy" | undefined;
|
11
11
|
}, never>>;
|
12
12
|
export declare const White: ComponentStory<import("styled-components").StyledComponent<"div", any, {
|
13
|
-
variant?: "
|
13
|
+
variant?: "white" | "orange" | "navy" | undefined;
|
14
14
|
}, never>>;
|
@@ -2,7 +2,7 @@
|
|
2
2
|
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
3
3
|
declare const _default: ComponentMeta<import("react").FCS<{
|
4
4
|
icon?: (import("react").SVGProps<SVGSVGElement> & {
|
5
|
-
type: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users";
|
5
|
+
type: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users";
|
6
6
|
size?: "big" | "small" | "ultra-small" | "medium" | {
|
7
7
|
width: number;
|
8
8
|
height: number;
|
@@ -16,7 +16,7 @@ declare const _default: ComponentMeta<import("react").FCS<{
|
|
16
16
|
export default _default;
|
17
17
|
export declare const Icon: ComponentStory<import("react").FCS<{
|
18
18
|
icon?: (import("react").SVGProps<SVGSVGElement> & {
|
19
|
-
type: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users";
|
19
|
+
type: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users";
|
20
20
|
size?: "big" | "small" | "ultra-small" | "medium" | {
|
21
21
|
width: number;
|
22
22
|
height: number;
|
@@ -29,7 +29,7 @@ export declare const Icon: ComponentStory<import("react").FCS<{
|
|
29
29
|
}>>;
|
30
30
|
export declare const Basic: ComponentStory<import("react").FCS<{
|
31
31
|
icon?: (import("react").SVGProps<SVGSVGElement> & {
|
32
|
-
type: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users";
|
32
|
+
type: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users";
|
33
33
|
size?: "big" | "small" | "ultra-small" | "medium" | {
|
34
34
|
width: number;
|
35
35
|
height: number;
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
3
3
|
declare const _default: ComponentMeta<React.FCS<React.SVGProps<SVGSVGElement> & {
|
4
|
-
type: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users";
|
4
|
+
type: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users";
|
5
5
|
size?: "big" | "small" | "ultra-small" | "medium" | {
|
6
6
|
width: number;
|
7
7
|
height: number;
|
@@ -9,7 +9,7 @@ declare const _default: ComponentMeta<React.FCS<React.SVGProps<SVGSVGElement> &
|
|
9
9
|
}>>;
|
10
10
|
export default _default;
|
11
11
|
export declare const SimpleIcon: ComponentStory<React.FCS<React.SVGProps<SVGSVGElement> & {
|
12
|
-
type: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users";
|
12
|
+
type: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users";
|
13
13
|
size?: "big" | "small" | "ultra-small" | "medium" | {
|
14
14
|
width: number;
|
15
15
|
height: number;
|
@@ -1,19 +1,19 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
3
|
-
declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "
|
3
|
+
declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
|
4
4
|
size?: "s" | "m" | "l" | "xl" | undefined;
|
5
5
|
label?: string | undefined;
|
6
6
|
} & React.RefAttributes<HTMLInputElement>>>;
|
7
7
|
export default _default;
|
8
|
-
export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "
|
8
|
+
export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
|
9
9
|
size?: "s" | "m" | "l" | "xl" | undefined;
|
10
10
|
label?: string | undefined;
|
11
11
|
} & React.RefAttributes<HTMLInputElement>>>;
|
12
|
-
export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "
|
12
|
+
export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
|
13
13
|
size?: "s" | "m" | "l" | "xl" | undefined;
|
14
14
|
label?: string | undefined;
|
15
15
|
} & React.RefAttributes<HTMLInputElement>>>;
|
16
|
-
export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "
|
16
|
+
export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
|
17
17
|
size?: "s" | "m" | "l" | "xl" | undefined;
|
18
18
|
label?: string | undefined;
|
19
19
|
} & React.RefAttributes<HTMLInputElement>>>;
|
@@ -13,7 +13,7 @@ export declare type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement
|
|
13
13
|
export declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & FieldProps<any, any> & {
|
14
14
|
label?: string | undefined;
|
15
15
|
validationType?: ValidationType | undefined;
|
16
|
-
icon?: "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "close" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
|
16
|
+
icon?: "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
|
17
17
|
size?: "xl" | "l" | "m" | "s" | undefined;
|
18
18
|
direction?: "ltr" | "rtl" | undefined;
|
19
19
|
onIconClick?: (() => void) | undefined;
|
@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
|
|
3
3
|
declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
|
4
4
|
label?: string | undefined;
|
5
5
|
validationType?: import("../../../types/validation").ValidationType | undefined;
|
6
|
-
icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
|
6
|
+
icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
|
7
7
|
size?: "s" | "m" | "l" | "xl" | undefined;
|
8
8
|
direction?: "rtl" | "ltr" | undefined;
|
9
9
|
onIconClick?: (() => void) | undefined;
|
@@ -12,7 +12,7 @@ export default _default;
|
|
12
12
|
export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
|
13
13
|
label?: string | undefined;
|
14
14
|
validationType?: import("../../../types/validation").ValidationType | undefined;
|
15
|
-
icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
|
15
|
+
icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
|
16
16
|
size?: "s" | "m" | "l" | "xl" | undefined;
|
17
17
|
direction?: "rtl" | "ltr" | undefined;
|
18
18
|
onIconClick?: (() => void) | undefined;
|
@@ -20,7 +20,7 @@ export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<
|
|
20
20
|
export declare const Success: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
|
21
21
|
label?: string | undefined;
|
22
22
|
validationType?: import("../../../types/validation").ValidationType | undefined;
|
23
|
-
icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
|
23
|
+
icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
|
24
24
|
size?: "s" | "m" | "l" | "xl" | undefined;
|
25
25
|
direction?: "rtl" | "ltr" | undefined;
|
26
26
|
onIconClick?: (() => void) | undefined;
|
@@ -28,7 +28,7 @@ export declare const Success: ComponentStory<React.ForwardRefExoticComponent<Omi
|
|
28
28
|
export declare const Error: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
|
29
29
|
label?: string | undefined;
|
30
30
|
validationType?: import("../../../types/validation").ValidationType | undefined;
|
31
|
-
icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
|
31
|
+
icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
|
32
32
|
size?: "s" | "m" | "l" | "xl" | undefined;
|
33
33
|
direction?: "rtl" | "ltr" | undefined;
|
34
34
|
onIconClick?: (() => void) | undefined;
|
@@ -36,7 +36,7 @@ export declare const Error: ComponentStory<React.ForwardRefExoticComponent<Omit<
|
|
36
36
|
export declare const Disabled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
|
37
37
|
label?: string | undefined;
|
38
38
|
validationType?: import("../../../types/validation").ValidationType | undefined;
|
39
|
-
icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
|
39
|
+
icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
|
40
40
|
size?: "s" | "m" | "l" | "xl" | undefined;
|
41
41
|
direction?: "rtl" | "ltr" | undefined;
|
42
42
|
onIconClick?: (() => void) | undefined;
|
@@ -44,7 +44,7 @@ export declare const Disabled: ComponentStory<React.ForwardRefExoticComponent<Om
|
|
44
44
|
export declare const IconLTR: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
|
45
45
|
label?: string | undefined;
|
46
46
|
validationType?: import("../../../types/validation").ValidationType | undefined;
|
47
|
-
icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
|
47
|
+
icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
|
48
48
|
size?: "s" | "m" | "l" | "xl" | undefined;
|
49
49
|
direction?: "rtl" | "ltr" | undefined;
|
50
50
|
onIconClick?: (() => void) | undefined;
|
@@ -52,7 +52,7 @@ export declare const IconLTR: ComponentStory<React.ForwardRefExoticComponent<Omi
|
|
52
52
|
export declare const IconRTL: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
|
53
53
|
label?: string | undefined;
|
54
54
|
validationType?: import("../../../types/validation").ValidationType | undefined;
|
55
|
-
icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
|
55
|
+
icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
|
56
56
|
size?: "s" | "m" | "l" | "xl" | undefined;
|
57
57
|
direction?: "rtl" | "ltr" | undefined;
|
58
58
|
onIconClick?: (() => void) | undefined;
|
@@ -60,7 +60,7 @@ export declare const IconRTL: ComponentStory<React.ForwardRefExoticComponent<Omi
|
|
60
60
|
export declare const DisabledIcon: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
|
61
61
|
label?: string | undefined;
|
62
62
|
validationType?: import("../../../types/validation").ValidationType | undefined;
|
63
|
-
icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
|
63
|
+
icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
|
64
64
|
size?: "s" | "m" | "l" | "xl" | undefined;
|
65
65
|
direction?: "rtl" | "ltr" | undefined;
|
66
66
|
onIconClick?: (() => void) | undefined;
|
@@ -68,7 +68,7 @@ export declare const DisabledIcon: ComponentStory<React.ForwardRefExoticComponen
|
|
68
68
|
export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
|
69
69
|
label?: string | undefined;
|
70
70
|
validationType?: import("../../../types/validation").ValidationType | undefined;
|
71
|
-
icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
|
71
|
+
icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
|
72
72
|
size?: "s" | "m" | "l" | "xl" | undefined;
|
73
73
|
direction?: "rtl" | "ltr" | undefined;
|
74
74
|
onIconClick?: (() => void) | undefined;
|
@@ -1,20 +1,20 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
3
3
|
import { Size } from './Radio';
|
4
|
-
declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "
|
4
|
+
declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
|
5
5
|
size?: Size | undefined;
|
6
6
|
label?: string | undefined;
|
7
7
|
} & React.RefAttributes<HTMLInputElement>>>;
|
8
8
|
export default _default;
|
9
|
-
export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "
|
9
|
+
export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
|
10
10
|
size?: Size | undefined;
|
11
11
|
label?: string | undefined;
|
12
12
|
} & React.RefAttributes<HTMLInputElement>>>;
|
13
|
-
export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "
|
13
|
+
export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
|
14
14
|
size?: Size | undefined;
|
15
15
|
label?: string | undefined;
|
16
16
|
} & React.RefAttributes<HTMLInputElement>>>;
|
17
|
-
export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "
|
17
|
+
export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
|
18
18
|
size?: Size | undefined;
|
19
19
|
label?: string | undefined;
|
20
20
|
} & React.RefAttributes<HTMLInputElement>>>;
|
package/package.json
CHANGED
@@ -1,18 +1,20 @@
|
|
1
|
-
import React from
|
2
|
-
import { render, screen } from
|
3
|
-
import userEvent from
|
4
|
-
import { Chip
|
1
|
+
import React from "react";
|
2
|
+
import { render, screen } from "@testing-library/react";
|
3
|
+
import userEvent from "@testing-library/user-event";
|
4
|
+
import { Chip } from "./Chip";
|
5
5
|
|
6
|
-
describe(
|
7
|
-
it(
|
6
|
+
describe("<Chip />", () => {
|
7
|
+
it("should match snapshot - basic", () => {
|
8
8
|
const { container } = render(<Chip label="Accept" />);
|
9
9
|
expect(container).toMatchSnapshot();
|
10
10
|
});
|
11
|
-
it(
|
12
|
-
const { container } = render(
|
11
|
+
it("should match snapshot - icon", () => {
|
12
|
+
const { container } = render(
|
13
|
+
<Chip label="Accept" variant="primary" iconLeft="close" />
|
14
|
+
);
|
13
15
|
expect(container).toMatchSnapshot();
|
14
16
|
});
|
15
|
-
it(
|
17
|
+
it("should call onclick function", async () => {
|
16
18
|
const user = userEvent.setup();
|
17
19
|
const handleClick = jest.fn();
|
18
20
|
render(<Chip label="Accept" onClick={handleClick} />);
|