Added basic Chip Component

__application/component/Chip/Chip.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const StyledChip = styled.div`
+  padding: ${({ styleProps, theme: { component: { Chip: { padding } } } }) => styleProps?.padding ? styleProps?.padding : padding};
+  background-color: ${({ styleProps, theme: { component: { Chip: { primary: { backgroundColor } } } } }) => styleProps?.backgroundColor ? styleProps?.backgroundColor : backgroundColor};
+  color: ${({ styleProps, theme: { component: { Chip: { primary: { color } } } } }) => styleProps?.color ? styleProps?.color : color};
+  border-radius: ${({ styleProps, theme: { component: { Chip: { borderRadius } } } }) => styleProps?.borderRadius ? styleProps?.borderRadius : borderRadius};
+  border: ${({ styleProps, theme: { component: { Chip: { primary: { border } } } } }) => styleProps?.border ? styleProps?.border : border};
+`;
+
+function Chip({ children, styleProps }) {
+  return (
+    <StyledChip styleProps={styleProps}>{children}</StyledChip>
+  );
+}
+
+Chip.propTypes = {
+  children: PropTypes.node.isRequired,
+  styleProps: PropTypes.object,
+};
+
+Chip.defaultProps = {
+  styleProps: {},
+};
+
+export default Chip;

__application/component/Chip/Chip.stories.js

@@ -0,0 +1,43 @@
+import Chip from './Chip';
+
+export default {
+  title: 'Fe-Theme/Chip',
+  component: Chip,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    children: 'This is a chip component',
+  },
+};
+
+export const PrimaryChip = {
+  args: {
+    children: 'This is a primary chip component',
+  },
+};
+
+export const SecondaryChip = {
+  args: {
+    children: 'This is a secondary chip component',
+    styleProps: {
+      border: '1px solid #03567b',
+      borderRadius: '2rem',
+      color: '#03567b',
+      backgroundColor: 'rgba(3, 86, 123, 0.3)',
+    },
+  },
+};
+
+export const CustomChip = {
+  args: {
+    children: 'This is a custom chip component',
+    styleProps: {
+      border: '1px solid rgb(49, 129, 46)',
+      borderRadius: '2rem',
+      color: 'rgb(49, 129, 46)',
+      backgroundColor: 'rgb(239, 252, 245)',
+    },
+  },
+};

__application/component/theme/theme.js

@@ -64,4 +64,19 @@ theme.component.TextBox = {
   },
 };
 
+theme.component.Chip = {
+  borderRadius: '1rem',
+  padding: '1rem',
+  primary: {
+    backgroundColor: 'rgba(0, 54, 78, 0.2)',
+    color: '#00364E',
+    border: '1px solid #00364E',
+  },
+  secondary: {
+    backgroundColor: 'rgba(3, 86, 123, 0.3)',
+    color: '#03567b',
+    border: '1px solid #03567b',
+  },
+};
+
 export default theme;