@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.
Files changed (41) hide show
  1. package/jest.config.js +1 -1
  2. package/lib/index.esm.js +1 -1
  3. package/lib/index.esm.js.map +1 -1
  4. package/lib/index.js +1 -1
  5. package/lib/index.js.map +1 -1
  6. package/lib/src/components/atoms/Chip/Chip.stories.d.ts +5 -4
  7. package/lib/src/components/atoms/Dot/Dot.stories.d.ts +3 -3
  8. package/lib/src/components/atoms/Icon/Icon.d.ts +1 -0
  9. package/lib/src/components/atoms/Icon/Icon.stories.d.ts +2 -2
  10. package/lib/src/components/atoms/Icon/IconAddition.d.ts +5 -5
  11. package/lib/src/components/atoms/Icon/icons/Eye.d.ts +3 -0
  12. package/lib/src/components/atoms/Icon/icons/Search.d.ts +3 -0
  13. package/lib/src/components/molecules/Checkbox/Checkbox.stories.d.ts +4 -4
  14. package/lib/src/components/molecules/Input/Input.d.ts +8 -8
  15. package/lib/src/components/molecules/Input/Input.stories.d.ts +9 -9
  16. package/lib/src/components/molecules/Radio/Radio.stories.d.ts +4 -4
  17. package/lib/src/components/molecules/Switch/Switch.d.ts +1 -0
  18. package/lib/src/components/organisms/Table/Table.d.ts +12 -0
  19. package/lib/src/components/organisms/Table/Table.stories.d.ts +7 -0
  20. package/lib/src/components/organisms/Table/Table.test.d.ts +1 -0
  21. package/lib/src/components/organisms/Table/index.d.ts +1 -0
  22. package/lib/src/components/organisms/index.d.ts +1 -0
  23. package/lib/src/index.d.ts +4 -4
  24. package/package.json +7 -6
  25. package/src/components/atoms/Chip/Chip.stories.tsx +21 -20
  26. package/src/components/atoms/Icon/Icon.tsx +2 -0
  27. package/src/components/atoms/Icon/IconAddition.tsx +22 -20
  28. package/src/components/atoms/Icon/icons/Eye.tsx +9 -0
  29. package/src/components/atoms/Icon/icons/Search.tsx +9 -0
  30. package/src/components/molecules/Button/BasicButton.tsx +2 -1
  31. package/src/components/molecules/Button/Button.tsx +5 -4
  32. package/src/components/molecules/Input/Input.tsx +51 -47
  33. package/src/components/molecules/Switch/Switch.stories.tsx +3 -0
  34. package/src/components/molecules/Switch/Switch.tsx +3 -0
  35. package/src/components/organisms/Table/Table.stories.tsx +180 -0
  36. package/src/components/organisms/Table/Table.test.tsx +82 -0
  37. package/src/components/organisms/Table/Table.tsx +162 -0
  38. package/src/components/organisms/Table/__snapshots__/Table.test.tsx.snap +101 -0
  39. package/src/components/organisms/Table/index.ts +1 -0
  40. package/src/components/organisms/index.ts +3 -2
  41. package/src/index.ts +4 -4
@@ -1,5 +1,6 @@
1
- import { ComponentMeta, ComponentStory } from "@storybook/react";
2
- declare const _default: ComponentMeta<import("react").FCS<import("./Chip").ChipProps>>;
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<import("react").FCS<import("./Chip").ChipProps>>;
5
- export declare const Clickable: ComponentStory<import("react").FCS<import("./Chip").ChipProps>>;
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;
@@ -22,6 +22,7 @@ export declare const iconHashMap: {
22
22
  "exclamation-circle": React.FCS<{}>;
23
23
  "exclamation-triangle": React.FCS<{}>;
24
24
  exit: React.FCS<{}>;
25
+ eye: React.FCS<{}>;
25
26
  facebook: React.FCS<{}>;
26
27
  heart: React.FCS<{}>;
27
28
  "heart-alt": React.FCS<{}>;
@@ -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 'react';
2
- import { IconType } from './Icon';
1
+ import React from "react";
2
+ import { IconType } from "./Icon";
3
3
  interface IconAdditionProps {
4
4
  disabled?: boolean;
5
5
  icon?: IconType;
6
- direction?: 'rtl' | 'ltr';
7
- colorVariant?: 'grey' | 'white' | 'ghost';
8
- size?: 'xl' | 'l' | 'm' | 's';
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>;
@@ -0,0 +1,3 @@
1
+ import React from "react";
2
+ declare const Eye: React.FCS;
3
+ export default Eye;
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ declare const Search: React.FCS;
3
+ export default Search;
@@ -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>, "type" | "size"> & {
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>, "type" | "size"> & {
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>, "type" | "size"> & {
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>, "type" | "size"> & {
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 '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 & {
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?: 'xl' | 'l' | 'm' | 's';
10
- direction?: 'ltr' | 'rtl';
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>, "type" | "size"> & {
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>, "type" | "size"> & {
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>, "type" | "size"> & {
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>, "type" | "size"> & {
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';
@@ -2,3 +2,4 @@ export { Menu } from './Menu';
2
2
  export { Setting } from './Setting';
3
3
  export { Modal } from './Modal';
4
4
  export { Select } from './Select';
5
+ export { Table } from './Table';
@@ -1,4 +1,4 @@
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 } from "./components/organisms";
4
- export { GlobalStyles as IntegrigoUI, Color } from "./styles";
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.17f",
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.10",
18
- "@storybook/addon-essentials": "^6.5.10",
19
- "@storybook/addon-interactions": "^6.5.10",
20
- "@storybook/addon-links": "^6.5.10",
21
- "@storybook/react": "^6.5.10",
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 { ComponentMeta, ComponentStory } from "@storybook/react";
2
- import { action } from "@storybook/addon-actions";
3
- import { Chip } from "./Chip";
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: "Atoms/Chip",
7
+ title: 'Atoms/Chip',
7
8
  component: Chip,
8
9
  argTypes: {
9
10
  label: {
10
- name: "label",
11
+ name: 'label',
11
12
  type: {
12
- name: "string",
13
+ name: 'string',
13
14
  required: true,
14
15
  },
15
- defaultValue: "Accept",
16
+ defaultValue: 'Accept',
16
17
  },
17
18
  size: {
18
- name: "size",
19
+ name: 'size',
19
20
  type: {
20
- name: "string",
21
+ name: 'string',
21
22
  required: false,
22
23
  },
23
24
  control: {
24
- type: "select",
25
+ type: 'select',
25
26
  },
26
- options: ["s", "m", "l", "xl"],
27
- defaultValue: "xl",
27
+ options: ['s', 'm', 'l', 'xl'],
28
+ defaultValue: 'xl',
28
29
  },
29
30
  variant: {
30
- name: "variant",
31
+ name: 'variant',
31
32
  type: {
32
- name: "string",
33
+ name: 'string',
33
34
  required: false,
34
35
  },
35
36
  control: {
36
- type: "select",
37
+ type: 'select',
37
38
  },
38
- options: ["transparent", "white", "primary", "secondary", "grey"],
39
- defaultValue: "primary",
39
+ options: ['transparent', 'white', 'primary', 'secondary', 'grey'],
40
+ defaultValue: 'primary',
40
41
  },
41
42
  onClick: {
42
- name: "onClick",
43
+ name: 'onClick',
43
44
  type: {
44
- name: "function",
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("clicked"),
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 'react';
2
- import styled from 'styled-components';
3
- import { Color } from '../../../styles';
4
- import { Icon, IconType } from './Icon';
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?: 'rtl' | 'ltr';
10
- colorVariant?: 'grey' | 'white' | 'ghost';
11
- size?: 'xl' | 'l' | 'm' | 's';
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: 16,
18
+ offset: 14,
19
19
  },
20
20
  l: {
21
21
  size: 20,
22
- offset: 12,
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: 6,
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 = 'ltr',
38
- colorVariant = 'grey',
39
- size = 'm',
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 === 'ghost'}
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?: 'rtl' | 'ltr';
73
+ direction?: "rtl" | "ltr";
74
74
  narrow: boolean;
75
- size: 'xl' | 'l' | 'm' | 's';
75
+ size: "xl" | "l" | "m" | "s";
76
76
  }>`
77
77
  position: absolute;
78
78
  z-index: 2;
79
- bottom: calc(${(p) => sizeVariant[p.size].offset}px);
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 ? 'pointer' : 'auto')};
83
+ cursor: ${(p) => (p.clickable ? "pointer" : "auto")};
84
+
83
85
  ${(p) =>
84
- p.direction === 'ltr'
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 = 'IconWrapper';
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;