@integrigo/integrigo-ui 1.6.16-a → 1.6.16-c

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

@@ -13,7 +13,8 @@ export declare enum ChipVariant {
     transparent = "transparent",
     white = "white",
     primary = "primary",
-    secondary = "secondary"
+    secondary = "secondary",
+    grey = "grey"
 }
 export declare enum ChipSize {
     xl = "xl",

package/package.json

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

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

@@ -1,4 +1,4 @@
-import React, { MouseEvent, FC } from 'react';
+import { MouseEvent, FC } from 'react';
 import styled from 'styled-components';
 import { Icon, IconType } from '../Icon';
 
@@ -18,6 +18,7 @@ export enum ChipVariant {
   white = 'white',
   primary = 'primary',
   secondary = 'secondary',
+  grey = 'grey'
 }
 
 export enum ChipSize {
@@ -91,6 +92,9 @@ const colorVariant = {
   white: {
     fontColor: 'var(--shades-of-grey-100);',
   },
+  grey: {
+    fontColor: 'var(--shades-of-grey-100)',
+  }
 };
 
 export const Chip: FC<ChipProps> = (props: ChipProps) => {
@@ -156,6 +160,20 @@ const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
           }
         `}
       `;
+    case ChipVariant.grey:
+      return `
+        background-color: var(--shades-of-grey-20);
+        
+        ${clickable && `
+          &:hover {
+            background-color: var(--shades-of-grey-40);
+          }
+          
+          &:active {
+            background-color: var(--shades-of-grey-40);
+          }
+        `}
+      `;
     case ChipVariant.white:
       return `
         background-color: var(--color-white);