@integrigo/integrigo-ui 1.6.16-e → 1.6.16-f

package/lib/src/components/atoms/Chip/Chip.d.ts

@@ -4,23 +4,10 @@ declare type OnClickFunctionType = (e: MouseEvent<HTMLDivElement>) => void;
 export interface ChipProps {
     iconLeft?: IconType;
     iconRight?: IconType;
-    size?: ChipSize;
+    size?: 's' | 'm' | 'l' | 'xl';
     label: React.ReactNode;
-    variant?: ChipVariant;
+    variant?: 'transparent' | 'white' | 'primary' | 'secondary' | 'grey';
     onClick?: OnClickFunctionType;
 }
-export declare enum ChipVariant {
-    transparent = "transparent",
-    white = "white",
-    primary = "primary",
-    secondary = "secondary",
-    grey = "grey"
-}
-export declare enum ChipSize {
-    xl = "xl",
-    l = "l",
-    m = "m",
-    s = "s"
-}
 export declare const Chip: FC<ChipProps>;
 export {};

package/lib/src/components/atoms/Divider/Divider.stories.d.ts

@@ -1,14 +1,14 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 declare const _default: ComponentMeta<import("styled-components").StyledComponent<"div", any, {
-    variant?: "orange" | "navy" | "white" | undefined;
+    variant?: "white" | "orange" | "navy" | undefined;
 }, never>>;
 export default _default;
 export declare const Orange: ComponentStory<import("styled-components").StyledComponent<"div", any, {
-    variant?: "orange" | "navy" | "white" | undefined;
+    variant?: "white" | "orange" | "navy" | undefined;
 }, never>>;
 export declare const Navy: ComponentStory<import("styled-components").StyledComponent<"div", any, {
-    variant?: "orange" | "navy" | "white" | undefined;
+    variant?: "white" | "orange" | "navy" | undefined;
 }, never>>;
 export declare const White: ComponentStory<import("styled-components").StyledComponent<"div", any, {
-    variant?: "orange" | "navy" | "white" | undefined;
+    variant?: "white" | "orange" | "navy" | undefined;
 }, never>>;

package/lib/src/components/molecules/Checkbox/Checkbox.stories.d.ts

@@ -1,19 +1,19 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     size?: "s" | "m" | "l" | "xl" | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
 export default _default;
-export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     size?: "s" | "m" | "l" | "xl" | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
-export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     size?: "s" | "m" | "l" | "xl" | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
-export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     size?: "s" | "m" | "l" | "xl" | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;

package/lib/src/components/molecules/Radio/Radio.stories.d.ts

@@ -1,20 +1,20 @@
 import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Size } from './Radio';
-declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     size?: Size | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
 export default _default;
-export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     size?: Size | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
-export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     size?: Size | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
-export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     size?: Size | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/integrigo"
   },
-  "version": "1.6.16e",
+  "version": "1.6.16f",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/src/components/atoms/Chip/Chip.test.tsx

@@ -1,18 +1,20 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { Chip, ChipVariant } from './Chip';
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Chip } from "./Chip";
 
-describe('<Chip />', () => {
-  it('should match snapshot - basic', () => {
+describe("<Chip />", () => {
+  it("should match snapshot - basic", () => {
     const { container } = render(<Chip label="Accept" />);
     expect(container).toMatchSnapshot();
   });
-  it('should match snapshot - icon', () => {
-    const { container } = render(<Chip label="Accept" variant={ChipVariant.primary} iconLeft="close" />);
+  it("should match snapshot - icon", () => {
+    const { container } = render(
+      <Chip label="Accept" variant="primary" iconLeft="close" />
+    );
     expect(container).toMatchSnapshot();
   });
-  it('should call onclick function', async () => {
+  it("should call onclick function", async () => {
     const user = userEvent.setup();
     const handleClick = jest.fn();
     render(<Chip label="Accept" onClick={handleClick} />);

package/src/components/atoms/Chip/Chip.tsx

@@ -7,27 +7,12 @@ type OnClickFunctionType = (e: MouseEvent<HTMLDivElement>) => void;
 export interface ChipProps {
   iconLeft?: IconType;
   iconRight?: IconType;
-  size?: ChipSize;
+  size?: 's' | 'm' | 'l' | 'xl';
   label: React.ReactNode;
-  variant?: ChipVariant;
+  variant?: 'transparent' | 'white' | 'primary' | 'secondary' | 'grey';
   onClick?: OnClickFunctionType;
 }
 
-export enum ChipVariant {
-  transparent = "transparent",
-  white = "white",
-  primary = "primary",
-  secondary = "secondary",
-  grey = "grey",
-}
-
-export enum ChipSize {
-  xl = "xl",
-  l = "l",
-  m = "m",
-  s = "s",
-}
-
 const sizeVariant = {
   xl: {
     iconSize: {
@@ -102,8 +87,8 @@ export const Chip: FC<ChipProps> = (props: ChipProps) => {
     iconLeft,
     iconRight,
     label,
-    size = ChipSize.m,
-    variant = ChipVariant.primary,
+    size = 'm',
+    variant = 'primary',
     onClick,
   } = props;
 
@@ -132,9 +117,9 @@ export const Chip: FC<ChipProps> = (props: ChipProps) => {
   );
 };
 
-const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
+const getVariantStyles = (variant: ChipProps['variant'], clickable: boolean): string => {
   switch (variant) {
-    case ChipVariant.secondary:
+    case 'secondary':
       return `
         background-color: var(--color-white);
         opacity: 0.9;
@@ -156,7 +141,7 @@ const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
         `
         }
       `;
-    case ChipVariant.transparent:
+    case 'transparent':
       return `        
         ${
           clickable &&
@@ -171,7 +156,7 @@ const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
         `
         }
       `;
-    case ChipVariant.grey:
+    case 'grey':
       return `
         background-color: var(--shades-of-grey-20);
         
@@ -188,7 +173,7 @@ const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
         `
         }
       `;
-    case ChipVariant.white:
+    case 'white':
       return `
         background-color: var(--color-white);
         border-color: var(--shades-of-grey-40);
@@ -207,7 +192,7 @@ const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
         `
         }
       `;
-    case ChipVariant.primary:
+    case 'primary':
     default:
       return `
         background-color: var(--color-orange);
@@ -233,8 +218,8 @@ const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
 Chip.displayName = "Chip";
 
 const ChipWrapper = styled.div<{
-  size: ChipSize;
-  variant: ChipVariant;
+  size: Exclude<ChipProps['size'], undefined>;
+  variant: Exclude<ChipProps['variant'], undefined>;
   onClick?: OnClickFunctionType;
 }>`
   border-radius: 100px;
@@ -264,7 +249,7 @@ const IconWrapper = styled.span`
 IconWrapper.displayName = "IconWrapper";
 
 const Text = styled.span<{
-  size: ChipSize;
+  size: Exclude<ChipProps['size'], undefined>;
 }>`
   color: inherit;
   font-weight: bold;