@integrigo/integrigo-ui 1.6.17-f → 1.6.17-h
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/jest.config.js +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/index.js.map +1 -1
- package/lib/src/components/atoms/Chip/Chip.stories.d.ts +5 -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/IconAddition.d.ts +5 -5
- package/lib/src/components/atoms/Icon/icons/Eye.d.ts +3 -0
- package/lib/src/components/atoms/Icon/icons/Search.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 +8 -8
- 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/lib/src/components/molecules/Switch/Switch.d.ts +1 -0
- package/lib/src/components/organisms/Table/Table.d.ts +12 -0
- package/lib/src/components/organisms/Table/Table.stories.d.ts +7 -0
- package/lib/src/components/organisms/Table/Table.test.d.ts +1 -0
- package/lib/src/components/organisms/Table/index.d.ts +1 -0
- package/lib/src/components/organisms/index.d.ts +1 -0
- package/lib/src/index.d.ts +4 -4
- package/package.json +7 -6
- package/src/components/atoms/Chip/Chip.stories.tsx +21 -20
- package/src/components/atoms/Icon/Icon.tsx +2 -0
- package/src/components/atoms/Icon/IconAddition.tsx +22 -20
- package/src/components/atoms/Icon/icons/Eye.tsx +9 -0
- package/src/components/atoms/Icon/icons/Search.tsx +9 -0
- package/src/components/molecules/Button/BasicButton.tsx +2 -1
- package/src/components/molecules/Button/Button.tsx +5 -4
- package/src/components/molecules/Input/Input.tsx +51 -47
- package/src/components/molecules/Switch/Switch.stories.tsx +3 -0
- package/src/components/molecules/Switch/Switch.tsx +3 -0
- package/src/components/organisms/Table/Table.stories.tsx +180 -0
- package/src/components/organisms/Table/Table.test.tsx +82 -0
- package/src/components/organisms/Table/Table.tsx +162 -0
- package/src/components/organisms/Table/__snapshots__/Table.test.tsx.snap +101 -0
- package/src/components/organisms/Table/index.ts +1 -0
- package/src/components/organisms/index.ts +3 -2
- package/src/index.ts +4 -4
@@ -1,5 +1,6 @@
|
|
1
|
-
import
|
2
|
-
|
1
|
+
import React from 'react';
|
2
|
+
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
3
|
+
declare const _default: ComponentMeta<React.FCS<import("./Chip").ChipProps>>;
|
3
4
|
export default _default;
|
4
|
-
export declare const Basic: ComponentStory<
|
5
|
-
export declare const Clickable: ComponentStory<
|
5
|
+
export declare const Basic: ComponentStory<React.FCS<import("./Chip").ChipProps>>;
|
6
|
+
export declare const Clickable: ComponentStory<React.FCS<import("./Chip").ChipProps>>;
|
@@ -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" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "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" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "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" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "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" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "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" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "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" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "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" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "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" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "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" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "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" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users";
|
13
13
|
size?: "big" | "small" | "ultra-small" | "medium" | {
|
14
14
|
width: number;
|
15
15
|
height: number;
|
@@ -1,11 +1,11 @@
|
|
1
|
-
import React from
|
2
|
-
import { IconType } from
|
1
|
+
import React from "react";
|
2
|
+
import { IconType } from "./Icon";
|
3
3
|
interface IconAdditionProps {
|
4
4
|
disabled?: boolean;
|
5
5
|
icon?: IconType;
|
6
|
-
direction?:
|
7
|
-
colorVariant?:
|
8
|
-
size?:
|
6
|
+
direction?: "rtl" | "ltr";
|
7
|
+
colorVariant?: "grey" | "white" | "ghost";
|
8
|
+
size?: "xl" | "l" | "m" | "s";
|
9
9
|
onClick?: () => void;
|
10
10
|
}
|
11
11
|
export declare const IconAddition: React.FC<IconAdditionProps>;
|
@@ -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>, "size" | "type"> & {
|
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>, "size" | "type"> & {
|
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>, "size" | "type"> & {
|
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>, "size" | "type"> & {
|
17
17
|
size?: "s" | "m" | "l" | "xl" | undefined;
|
18
18
|
label?: string | undefined;
|
19
19
|
} & React.RefAttributes<HTMLInputElement>>>;
|
@@ -1,19 +1,19 @@
|
|
1
|
-
import React from
|
2
|
-
import { FieldProps } from
|
3
|
-
import { ValidationType } from
|
4
|
-
import { IconType } from
|
5
|
-
export declare type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>,
|
1
|
+
import React from "react";
|
2
|
+
import { FieldProps } from "formik";
|
3
|
+
import { ValidationType } from "../../../types/validation";
|
4
|
+
import { IconType } from "../../atoms/Icon";
|
5
|
+
export declare type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & FieldProps & {
|
6
6
|
label?: string;
|
7
7
|
validationType?: ValidationType;
|
8
8
|
icon?: IconType;
|
9
|
-
size?:
|
10
|
-
direction?:
|
9
|
+
size?: "xl" | "l" | "m" | "s";
|
10
|
+
direction?: "ltr" | "rtl";
|
11
11
|
onIconClick?: () => void;
|
12
12
|
};
|
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" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "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" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "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" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "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" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "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" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "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" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "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" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "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" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "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" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "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" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "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" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "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" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "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" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "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" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "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" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "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" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "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" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "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" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "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" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "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" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "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>, "size" | "type"> & {
|
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>, "size" | "type"> & {
|
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>, "size" | "type"> & {
|
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>, "size" | "type"> & {
|
18
18
|
size?: Size | undefined;
|
19
19
|
label?: string | undefined;
|
20
20
|
} & React.RefAttributes<HTMLInputElement>>>;
|
@@ -7,6 +7,7 @@ interface SwitchOption {
|
|
7
7
|
export interface SwitchProps {
|
8
8
|
options: [SwitchOption, SwitchOption] | [SwitchOption, SwitchOption, SwitchOption];
|
9
9
|
active?: SwitchOption["id"];
|
10
|
+
onClick: (id: SwitchOption["id"]) => void;
|
10
11
|
}
|
11
12
|
export declare const Switch: React.FC<SwitchProps>;
|
12
13
|
export {};
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { Column } from '@tanstack/react-table';
|
3
|
+
declare type Variant = 'primary' | 'secondary';
|
4
|
+
declare type Alignment = 'left' | 'right' | 'center';
|
5
|
+
export interface Props<T extends Record<string, unknown>> extends React.TableHTMLAttributes<HTMLTableElement> {
|
6
|
+
data: T[];
|
7
|
+
columns: Column<T>[];
|
8
|
+
variant?: Variant;
|
9
|
+
textAlign?: Alignment;
|
10
|
+
}
|
11
|
+
export declare const Table: <T extends Record<string, unknown>>({ data, columns, variant, textAlign, ...props }: Props<T>) => JSX.Element;
|
12
|
+
export {};
|
@@ -0,0 +1,7 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { Table } from './Table';
|
3
|
+
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
4
|
+
declare const _default: ComponentMeta<(<T extends Record<string, unknown>>({ data, columns, variant, textAlign, ...props }: import("./Table").Props<T>) => JSX.Element)>;
|
5
|
+
export default _default;
|
6
|
+
export declare const Primary: ComponentStory<typeof Table>;
|
7
|
+
export declare const WithProfile: ComponentStory<typeof Table>;
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -0,0 +1 @@
|
|
1
|
+
export { Table } from './Table';
|
package/lib/src/index.d.ts
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
export { Alert, Avatar, Card, Divider, DateTime, Icon, Nav, Pill, Typography, Spinner, Chip, Dot, Gradient, } from
|
2
|
-
export { InfoCard, Input, TextArea, Button, Checkbox, Dropdown, Profile, Radio, Tile, Switch, } from
|
3
|
-
export { Menu, Setting, Modal, Select } from
|
4
|
-
export { GlobalStyles as IntegrigoUI, Color } from
|
1
|
+
export { Alert, Avatar, Card, Divider, DateTime, Icon, Nav, Pill, Typography, Spinner, Chip, Dot, Gradient, } from './components/atoms';
|
2
|
+
export { InfoCard, Input, TextArea, Button, Checkbox, Dropdown, Profile, Radio, Tile, Switch, } from './components/molecules';
|
3
|
+
export { Menu, Setting, Modal, Select, Table } from './components/organisms';
|
4
|
+
export { GlobalStyles as IntegrigoUI, Color } from './styles';
|
package/package.json
CHANGED
@@ -3,7 +3,7 @@
|
|
3
3
|
"publishConfig": {
|
4
4
|
"registry": "https://npm.pkg.github.com/integrigo"
|
5
5
|
},
|
6
|
-
"version": "1.6.
|
6
|
+
"version": "1.6.17h",
|
7
7
|
"main": "lib/index.js",
|
8
8
|
"module": "lib/index.esm.js",
|
9
9
|
"types": "lib/index.d.ts",
|
@@ -14,11 +14,11 @@
|
|
14
14
|
"@babel/preset-typescript": "^7.18.6",
|
15
15
|
"@rollup/plugin-commonjs": "^21.0.2",
|
16
16
|
"@rollup/plugin-node-resolve": "^13.1.3",
|
17
|
-
"@storybook/addon-actions": "^6.5.
|
18
|
-
"@storybook/addon-essentials": "^6.5.
|
19
|
-
"@storybook/addon-interactions": "^6.5.
|
20
|
-
"@storybook/addon-links": "^6.5.
|
21
|
-
"@storybook/react": "^6.5.
|
17
|
+
"@storybook/addon-actions": "^6.5.12",
|
18
|
+
"@storybook/addon-essentials": "^6.5.12",
|
19
|
+
"@storybook/addon-interactions": "^6.5.12",
|
20
|
+
"@storybook/addon-links": "^6.5.12",
|
21
|
+
"@storybook/react": "^6.5.12",
|
22
22
|
"@storybook/testing-library": "^0.0.13",
|
23
23
|
"@testing-library/jest-dom": "^5.16.4",
|
24
24
|
"@testing-library/react": "^13.3.0",
|
@@ -55,6 +55,7 @@
|
|
55
55
|
"typescript": "^4.7.4"
|
56
56
|
},
|
57
57
|
"dependencies": {
|
58
|
+
"@tanstack/react-table": "8.5.13",
|
58
59
|
"formik": "^2.2.9"
|
59
60
|
},
|
60
61
|
"peerDependencies": {
|
@@ -1,47 +1,48 @@
|
|
1
|
-
import
|
2
|
-
import {
|
3
|
-
import {
|
1
|
+
import React from 'react';
|
2
|
+
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
3
|
+
import { action } from '@storybook/addon-actions';
|
4
|
+
import { Chip } from './Chip';
|
4
5
|
|
5
6
|
export default {
|
6
|
-
title:
|
7
|
+
title: 'Atoms/Chip',
|
7
8
|
component: Chip,
|
8
9
|
argTypes: {
|
9
10
|
label: {
|
10
|
-
name:
|
11
|
+
name: 'label',
|
11
12
|
type: {
|
12
|
-
name:
|
13
|
+
name: 'string',
|
13
14
|
required: true,
|
14
15
|
},
|
15
|
-
defaultValue:
|
16
|
+
defaultValue: 'Accept',
|
16
17
|
},
|
17
18
|
size: {
|
18
|
-
name:
|
19
|
+
name: 'size',
|
19
20
|
type: {
|
20
|
-
name:
|
21
|
+
name: 'string',
|
21
22
|
required: false,
|
22
23
|
},
|
23
24
|
control: {
|
24
|
-
type:
|
25
|
+
type: 'select',
|
25
26
|
},
|
26
|
-
options: [
|
27
|
-
defaultValue:
|
27
|
+
options: ['s', 'm', 'l', 'xl'],
|
28
|
+
defaultValue: 'xl',
|
28
29
|
},
|
29
30
|
variant: {
|
30
|
-
name:
|
31
|
+
name: 'variant',
|
31
32
|
type: {
|
32
|
-
name:
|
33
|
+
name: 'string',
|
33
34
|
required: false,
|
34
35
|
},
|
35
36
|
control: {
|
36
|
-
type:
|
37
|
+
type: 'select',
|
37
38
|
},
|
38
|
-
options: [
|
39
|
-
defaultValue:
|
39
|
+
options: ['transparent', 'white', 'primary', 'secondary', 'grey'],
|
40
|
+
defaultValue: 'primary',
|
40
41
|
},
|
41
42
|
onClick: {
|
42
|
-
name:
|
43
|
+
name: 'onClick',
|
43
44
|
type: {
|
44
|
-
name:
|
45
|
+
name: 'function',
|
45
46
|
required: false,
|
46
47
|
},
|
47
48
|
defaultValue: null,
|
@@ -55,5 +56,5 @@ export const Basic = Template.bind({});
|
|
55
56
|
|
56
57
|
export const Clickable = Template.bind({});
|
57
58
|
Clickable.args = {
|
58
|
-
onClick: action(
|
59
|
+
onClick: action('clicked'),
|
59
60
|
};
|
@@ -23,6 +23,7 @@ import Envelope from "./icons/Envelope";
|
|
23
23
|
import ExclamationCircle from "./icons/ExclamationCircle";
|
24
24
|
import ExclamationTriangle from "./icons/ExclamationTriangle";
|
25
25
|
import Exit from "./icons/Exit";
|
26
|
+
import Eye from "./icons/Eye";
|
26
27
|
import Facebook from "./icons/Facebook";
|
27
28
|
import Heart from "./icons/Heart";
|
28
29
|
import HeartAlt from "./icons/HeartAlt";
|
@@ -69,6 +70,7 @@ export const iconHashMap = {
|
|
69
70
|
"exclamation-circle": ExclamationCircle,
|
70
71
|
"exclamation-triangle": ExclamationTriangle,
|
71
72
|
exit: Exit,
|
73
|
+
eye: Eye,
|
72
74
|
facebook: Facebook,
|
73
75
|
heart: Heart,
|
74
76
|
"heart-alt": HeartAlt,
|
@@ -1,25 +1,25 @@
|
|
1
|
-
import React from
|
2
|
-
import styled from
|
3
|
-
import { Color } from
|
4
|
-
import { Icon, IconType } from
|
1
|
+
import React from "react";
|
2
|
+
import styled from "styled-components";
|
3
|
+
import { Color } from "../../../styles";
|
4
|
+
import { Icon, IconType } from "./Icon";
|
5
5
|
|
6
6
|
interface IconAdditionProps {
|
7
7
|
disabled?: boolean;
|
8
8
|
icon?: IconType;
|
9
|
-
direction?:
|
10
|
-
colorVariant?:
|
11
|
-
size?:
|
9
|
+
direction?: "rtl" | "ltr";
|
10
|
+
colorVariant?: "grey" | "white" | "ghost";
|
11
|
+
size?: "xl" | "l" | "m" | "s";
|
12
12
|
onClick?: () => void;
|
13
13
|
}
|
14
14
|
|
15
15
|
const sizeVariant = {
|
16
16
|
xl: {
|
17
17
|
size: 24,
|
18
|
-
offset:
|
18
|
+
offset: 14,
|
19
19
|
},
|
20
20
|
l: {
|
21
21
|
size: 20,
|
22
|
-
offset:
|
22
|
+
offset: 10,
|
23
23
|
},
|
24
24
|
m: {
|
25
25
|
size: 16,
|
@@ -27,16 +27,16 @@ const sizeVariant = {
|
|
27
27
|
},
|
28
28
|
s: {
|
29
29
|
size: 10,
|
30
|
-
offset:
|
30
|
+
offset: 5,
|
31
31
|
},
|
32
32
|
};
|
33
33
|
|
34
34
|
export const IconAddition: React.FC<IconAdditionProps> = ({
|
35
35
|
disabled,
|
36
36
|
icon,
|
37
|
-
direction =
|
38
|
-
colorVariant =
|
39
|
-
size =
|
37
|
+
direction = "ltr",
|
38
|
+
colorVariant = "grey",
|
39
|
+
size = "m",
|
40
40
|
onClick,
|
41
41
|
}) => {
|
42
42
|
const clickable = !!onClick;
|
@@ -56,7 +56,7 @@ export const IconAddition: React.FC<IconAdditionProps> = ({
|
|
56
56
|
direction={direction}
|
57
57
|
clickable={clickable && !disabled}
|
58
58
|
size={size}
|
59
|
-
narrow={colorVariant ===
|
59
|
+
narrow={colorVariant === "ghost"}
|
60
60
|
>
|
61
61
|
<Icon
|
62
62
|
type={icon}
|
@@ -70,18 +70,20 @@ export const IconAddition: React.FC<IconAdditionProps> = ({
|
|
70
70
|
|
71
71
|
const IconWrapper = styled.div<{
|
72
72
|
clickable?: boolean;
|
73
|
-
direction?:
|
73
|
+
direction?: "rtl" | "ltr";
|
74
74
|
narrow: boolean;
|
75
|
-
size:
|
75
|
+
size: "xl" | "l" | "m" | "s";
|
76
76
|
}>`
|
77
77
|
position: absolute;
|
78
78
|
z-index: 2;
|
79
|
-
|
79
|
+
top: 50%;
|
80
|
+
transform: translateY(-50%);
|
80
81
|
height: ${(p) => sizeVariant[p.size].size}px;
|
81
82
|
width: ${(p) => sizeVariant[p.size].size}px;
|
82
|
-
cursor: ${(p) => (p.clickable ?
|
83
|
+
cursor: ${(p) => (p.clickable ? "pointer" : "auto")};
|
84
|
+
|
83
85
|
${(p) =>
|
84
|
-
p.direction ===
|
86
|
+
p.direction === "ltr"
|
85
87
|
? `left: ${p.narrow ? 0 : sizeVariant[p.size].offset}px`
|
86
88
|
: `right: ${p.narrow ? 0 : sizeVariant[p.size].offset}px`};
|
87
89
|
|
@@ -91,4 +93,4 @@ const IconWrapper = styled.div<{
|
|
91
93
|
}
|
92
94
|
`;
|
93
95
|
|
94
|
-
IconWrapper.displayName =
|
96
|
+
IconWrapper.displayName = "IconWrapper";
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import React from "react";
|
2
|
+
|
3
|
+
const Eye: React.FCS = (props) => (
|
4
|
+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
|
5
|
+
<path d="M21.9199 11.6C19.8999 6.91 16.0999 4 11.9999 4C7.89994 4 4.09994 6.91 2.07994 11.6C2.02488 11.7262 1.99646 11.8623 1.99646 12C1.99646 12.1377 2.02488 12.2738 2.07994 12.4C4.09994 17.09 7.89994 20 11.9999 20C16.0999 20 19.8999 17.09 21.9199 12.4C21.975 12.2738 22.0034 12.1377 22.0034 12C22.0034 11.8623 21.975 11.7262 21.9199 11.6ZM11.9999 18C8.82994 18 5.82994 15.71 4.09994 12C5.82994 8.29 8.82994 6 11.9999 6C15.1699 6 18.1699 8.29 19.8999 12C18.1699 15.71 15.1699 18 11.9999 18ZM11.9999 8C11.2088 8 10.4355 8.2346 9.77766 8.67412C9.11987 9.11365 8.60718 9.73836 8.30443 10.4693C8.00168 11.2002 7.92246 12.0044 8.0768 12.7804C8.23114 13.5563 8.61211 14.269 9.17152 14.8284C9.73093 15.3878 10.4437 15.7688 11.2196 15.9231C11.9955 16.0775 12.7998 15.9983 13.5307 15.6955C14.2616 15.3928 14.8863 14.8801 15.3258 14.2223C15.7653 13.5645 15.9999 12.7911 15.9999 12C15.9999 10.9391 15.5785 9.92172 14.8284 9.17157C14.0782 8.42143 13.0608 8 11.9999 8ZM11.9999 14C11.6044 14 11.2177 13.8827 10.8888 13.6629C10.5599 13.4432 10.3036 13.1308 10.1522 12.7654C10.0008 12.3999 9.9612 11.9978 10.0384 11.6098C10.1155 11.2219 10.306 10.8655 10.5857 10.5858C10.8654 10.3061 11.2218 10.1156 11.6098 10.0384C11.9977 9.96126 12.3999 10.0009 12.7653 10.1522C13.1308 10.3036 13.4431 10.56 13.6629 10.8889C13.8826 11.2178 13.9999 11.6044 13.9999 12C13.9999 12.5304 13.7892 13.0391 13.4142 13.4142C13.0391 13.7893 12.5304 14 11.9999 14Z" />
|
6
|
+
</svg>
|
7
|
+
);
|
8
|
+
|
9
|
+
export default Eye;
|