mayadata-io · arkajyotiMukherjee · Nov 2, 2020 · Nov 2, 2020
diff --git a/src/core/Pills/OutlinedPills/OutlinedPills.stories.tsx b/src/core/Pills/OutlinedPills/OutlinedPills.stories.tsx
@@ -0,0 +1,40 @@
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+import { ThemedBackground } from '../../../utils/storybook';
+import { OutlinedPills } from '../../Pills';
+
+storiesOf('Pills/Outlined Pills', module)
+  // Litmus Portal
+  .add('Litmus Portal', () => (
+    <ThemedBackground platform="litmus-portal">
+      <OutlinedPills label="Outlined Pill" />
+    </ThemedBackground>
+  ))
+
+  // Kubera Chaos
+  .add('Kubera Chaos', () => (
+    <ThemedBackground platform="kubera-chaos">
+      <OutlinedPills label="Outlined Pill" />
+    </ThemedBackground>
+  ))
+
+  // Kubera Propel
+  .add('Kubera Propel', () => (
+    <ThemedBackground platform="kubera-propel">
+      <OutlinedPills label="Outlined Pill" />
+    </ThemedBackground>
+  ))
+
+  // Kubera Portal
+  .add('Kubera Portal', () => (
+    <ThemedBackground platform="kubera-portal">
+      <OutlinedPills label="Outlined Pill" />
+    </ThemedBackground>
+  ))
+
+  // Kubera Core
+  .add('Kubera Core', () => (
+    <ThemedBackground platform="kubera-core">
+      <OutlinedPills label="Outlined Pill" />
+    </ThemedBackground>
+  ));
diff --git a/src/core/Pills/OutlinedPills/OutlinedPills.tsx b/src/core/Pills/OutlinedPills/OutlinedPills.tsx
@@ -0,0 +1,15 @@
+import { Chip } from '@material-ui/core';
+import React from 'react';
+import { ChipBaseProps } from '../base';
+import { useStyles } from './style';
+
+interface OutlinedPillsProps extends ChipBaseProps {
+  label: string;
+}
+
+const OutlinedPills: React.FC<OutlinedPillsProps> = ({ label }) => {
+  const classes = useStyles();
+
+  return <Chip label={label} className={classes.root} />;
+};
+export { OutlinedPills };
diff --git a/src/core/Pills/OutlinedPills/__tests__/OutlinedPills.test.tsx b/src/core/Pills/OutlinedPills/__tests__/OutlinedPills.test.tsx
@@ -0,0 +1,16 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { KuberaThemeProvider } from '../../../../theme';
+import { OutlinedPills } from '../../../Pills';
+
+describe('Basic Pills Component', () => {
+  it('Renders', () => {
+    const { getByText } = render(
+      <KuberaThemeProvider platform="kubera-chaos">
+        <OutlinedPills label="Outlined Pill" />
+      </KuberaThemeProvider>
+    );
+
+    expect(getByText('Outlined Pill')).toBeTruthy();
+  });
+});
diff --git a/src/core/Pills/OutlinedPills/index.ts b/src/core/Pills/OutlinedPills/index.ts
@@ -0,0 +1 @@
+export * from './OutlinedPills';
diff --git a/src/core/Pills/OutlinedPills/style.ts b/src/core/Pills/OutlinedPills/style.ts
@@ -0,0 +1,17 @@
+import { makeStyles, Theme } from '@material-ui/core';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    padding: theme.spacing(0.45, 1.5),
+    borderRadius: '0.1875rem',
+    fontSize: '0.625rem',
+    fontWeight: 500,
+    textTransform: 'none',
+    color: theme.palette.primary.light,
+    height: 'auto',
+    background: 'transparent',
+    border: `0.025rem solid ${theme.palette.primary.dark}`,
+  },
+}));
+
+export { useStyles };
diff --git a/src/core/Pills/index.ts b/src/core/Pills/index.ts
@@ -1,2 +1,3 @@
 export * from './BasicPills';
 export * from './LightPills';
+export * from './OutlinedPills';
diff --git a/src/core/Text/Header/Header.stories.tsx b/src/core/Text/Header/Header.stories.tsx
@@ -7,44 +7,49 @@ storiesOf('Text/HeaderText', module)
   // Litmus Portal
   .add('Litmus Portal', () => (
     <ThemedBackground platform="litmus-portal" row>
-      <Header>Header Text</Header>
-      <Header variant="bold">Header Text</Header>
-      <Header color={'green'}>Header Text</Header>
+      <Header>Header Text Primary</Header>
+      <Header variant="bold">Header Text Bold</Header>
+      <Header variant="small">Header Text Small</Header>
+      <Header color={'green'}>Header Text Colored</Header>
     </ThemedBackground>
   ))
 
   // Kubera Chaos
   .add('Kubera Chaos', () => (
     <ThemedBackground platform="kubera-chaos" row>
-      <Header>Header Text</Header>
-      <Header variant="bold">Header Text</Header>
-      <Header color={'green'}>Header Text</Header>
+      <Header>Header Text Primary</Header>
+      <Header variant="bold">Header Text Bold</Header>
+      <Header variant="small">Header Text Small</Header>
+      <Header color={'green'}>Header Text Colored</Header>
     </ThemedBackground>
   ))
 
   // Kubera Propel
   .add('Kubera Propel', () => (
     <ThemedBackground platform="kubera-propel" row>
-      <Header>Header Text</Header>
-      <Header variant="bold">Header Text</Header>
-      <Header color={'green'}>Header Text</Header>
+      <Header>Header Text Primary</Header>
+      <Header variant="bold">Header Text Bold</Header>
+      <Header variant="small">Header Text Small</Header>
+      <Header color={'green'}>Header Text Colored</Header>
     </ThemedBackground>
   ))
 
   // Kubera Portal
   .add('Kubera Portal', () => (
     <ThemedBackground platform="kubera-portal" row>
-      <Header>Header Text</Header>
-      <Header variant="bold">Header Text</Header>
-      <Header color={'green'}>Header Text</Header>
+      <Header>Header Text Primary</Header>
+      <Header variant="bold">Header Text Bold</Header>
+      <Header variant="small">Header Text Small</Header>
+      <Header color={'green'}>Header Text Colored</Header>
     </ThemedBackground>
   ))
 
   // Kubera Core
   .add('Kubera Core', () => (
     <ThemedBackground platform="kubera-core" row>
-      <Header>Header Text</Header>
-      <Header variant="bold">Header Text</Header>
-      <Header color={'green'}>Header Text</Header>
+      <Header>Header Text Primary</Header>
+      <Header variant="bold">Header Text Bold</Header>
+      <Header variant="small">Header Text Small</Header>
+      <Header color={'green'}>Header Text Colored</Header>
     </ThemedBackground>
   ));
diff --git a/src/core/Text/Header/Header.tsx b/src/core/Text/Header/Header.tsx
@@ -1,9 +1,7 @@
+import Typography from '@material-ui/core/Typography';
 import React from 'react';
+import { TypographyBaseProps, Variant } from '../base';
 import { useStyles } from './styles';
-import { TypographyBaseProps } from '../base';
-import Typography from '@material-ui/core/Typography';
-
-type Variant = 'bold' | undefined;
 
 interface HeaderProps extends TypographyBaseProps {
   variant?: Variant;
@@ -17,6 +15,8 @@ const Header: React.FC<HeaderProps> = ({ color, variant, children }) => {
     switch (variant) {
       case 'bold':
         return classes.bold;
+      case 'small':
+        return classes.small;
       default:
         return classes.primary;
     }

diff --git a/src/core/Text/Header/styles.ts b/src/core/Text/Header/styles.ts
@@ -16,6 +16,9 @@ const useStyles = makeStyles((theme: Theme) => ({
   bold: {
     fontWeight: 'bold',
   },
+  small: {
+    fontSize: '1.5rem',
+  },
 }));
 
 export { useStyles };
diff --git a/src/core/Text/Paragraph/Paragraph.stories.tsx b/src/core/Text/Paragraph/Paragraph.stories.tsx
@@ -7,44 +7,49 @@ storiesOf('Text/ParagraphText', module)
   // Litmus Portal
   .add('Litmus Portal', () => (
     <ThemedBackground platform="litmus-portal" row>
-      <Paragraph>Paragraph Text</Paragraph>
-      <Paragraph color={'green'}>Paragraph Text</Paragraph>
-      <Paragraph variant="small">Paragraph Text</Paragraph>
+      <Paragraph>Paragraph Text Primary</Paragraph>
+      <Paragraph color={'green'}>Paragraph Text Colored</Paragraph>
+      <Paragraph variant="small">Paragraph Text Small</Paragraph>
+      <Paragraph variant="bold">Paragraph Text Bold</Paragraph>
     </ThemedBackground>
   ))
 
   // Kubera Chaos
   .add('Kubera Chaos', () => (
     <ThemedBackground platform="kubera-chaos" row>
-      <Paragraph>Paragraph Text</Paragraph>
-      <Paragraph color={'green'}>Paragraph Text</Paragraph>
-      <Paragraph variant="small">Paragraph Text</Paragraph>
+      <Paragraph>Paragraph Text Primary</Paragraph>
+      <Paragraph color={'green'}>Paragraph Text Colored</Paragraph>
+      <Paragraph variant="small">Paragraph Text Small</Paragraph>
+      <Paragraph variant="bold">Paragraph Text Bold</Paragraph>
     </ThemedBackground>
   ))
 
   // Kubera Propel
   .add('Kubera Propel', () => (
     <ThemedBackground platform="kubera-propel" row>
-      <Paragraph>Paragraph Text</Paragraph>
-      <Paragraph color={'green'}>Paragraph Text</Paragraph>
-      <Paragraph variant="small">Paragraph Text</Paragraph>
+      <Paragraph>Paragraph Text Primary</Paragraph>
+      <Paragraph color={'green'}>Paragraph Text Colored</Paragraph>
+      <Paragraph variant="small">Paragraph Text Small</Paragraph>
+      <Paragraph variant="bold">Paragraph Text Bold</Paragraph>
     </ThemedBackground>
   ))
 
   // Kubera Portal
   .add('Kubera Portal', () => (
     <ThemedBackground platform="kubera-portal" row>
-      <Paragraph>Paragraph Text</Paragraph>
-      <Paragraph color={'green'}>Paragraph Text</Paragraph>
-      <Paragraph variant="small">Paragraph Text</Paragraph>
+      <Paragraph>Paragraph Text Primary</Paragraph>
+      <Paragraph color={'green'}>Paragraph Text Colored</Paragraph>
+      <Paragraph variant="small">Paragraph Text Small</Paragraph>
+      <Paragraph variant="bold">Paragraph Text Bold</Paragraph>
     </ThemedBackground>
   ))
 
   // Kubera Core
   .add('Kubera Core', () => (
     <ThemedBackground platform="kubera-core" row>
-      <Paragraph>Paragraph Text</Paragraph>
-      <Paragraph color={'green'}>Paragraph Text</Paragraph>
-      <Paragraph variant="small">Paragraph Text</Paragraph>
+      <Paragraph>Paragraph Text Primary</Paragraph>
+      <Paragraph color={'green'}>Paragraph Text Colored</Paragraph>
+      <Paragraph variant="small">Paragraph Text Small</Paragraph>
+      <Paragraph variant="bold">Paragraph Text Bold</Paragraph>
     </ThemedBackground>
   ));
diff --git a/src/core/Text/Paragraph/Paragraph.tsx b/src/core/Text/Paragraph/Paragraph.tsx
@@ -1,9 +1,7 @@
+import Typography from '@material-ui/core/Typography';
 import React from 'react';
+import { TypographyBaseProps, Variant } from '../base';
 import { useStyles } from './styles';
-import { TypographyBaseProps } from '../base';
-import Typography from '@material-ui/core/Typography';
-
-type Variant = 'small' | undefined;
 
 interface ParagraphProps extends TypographyBaseProps {
   variant?: Variant;
@@ -15,6 +13,8 @@ const Paragraph: React.FC<ParagraphProps> = ({ color, variant, children }) => {
 
   function getVarinat(variant: Variant): string {
     switch (variant) {
+      case 'bold':
+        return classes.bold;
       case 'small':
         return classes.small;
       default:

diff --git a/src/core/Text/Paragraph/styles.ts b/src/core/Text/Paragraph/styles.ts
@@ -13,6 +13,9 @@ const useStyles = makeStyles((theme: Theme) => ({
   primary: {
     fontWeight: 'normal',
   },
+  bold: {
+    fontWeight: 'bold',
+  },
   small: {
     fontSize: '0.75rem',
     fontWeight: 'normal',

diff --git a/src/core/Text/Subtitle/Subtitle.stories.tsx b/src/core/Text/Subtitle/Subtitle.stories.tsx
@@ -1,50 +1,55 @@
-import React from 'react';
 import { storiesOf } from '@storybook/react';
+import React from 'react';
 import { ThemedBackground } from '../../../utils/storybook';
 import { Subtitle } from './Subtitle';
 
 storiesOf('Text/SubtitleText', module)
   // Litmus Portal
   .add('Litmus Portal', () => (
     <ThemedBackground platform="litmus-portal" row>
-      <Subtitle>Subtitle Text</Subtitle>
-      <Subtitle color={'green'}>Subtitle Text</Subtitle>
-      <Subtitle variant="small">Subtitle Text</Subtitle>
+      <Subtitle>Subtitle Text Primary</Subtitle>
+      <Subtitle color={'green'}>Subtitle Text Colored</Subtitle>
+      <Subtitle variant="bold">Subtitle Text Bold</Subtitle>
+      <Subtitle variant="small">Subtitle Text Small</Subtitle>
     </ThemedBackground>
   ))
 
   // Kubera Chaos
   .add('Kubera Chaos', () => (
     <ThemedBackground platform="kubera-chaos" row>
-      <Subtitle>Subtitle Text</Subtitle>
-      <Subtitle color={'green'}>Subtitle Text</Subtitle>
-      <Subtitle variant="small">Subtitle Text</Subtitle>
+      <Subtitle>Subtitle Text Primary</Subtitle>
+      <Subtitle color={'green'}>Subtitle Text Colored</Subtitle>
+      <Subtitle variant="bold">Subtitle Text Bold</Subtitle>
+      <Subtitle variant="small">Subtitle Text Small</Subtitle>
     </ThemedBackground>
   ))
 
   // Kubera Propel
   .add('Kubera Propel', () => (
     <ThemedBackground platform="kubera-propel" row>
-      <Subtitle>Subtitle Text</Subtitle>
-      <Subtitle color={'green'}>Subtitle Text</Subtitle>
-      <Subtitle variant="small">Subtitle Text</Subtitle>
+      <Subtitle>Subtitle Text Primary</Subtitle>
+      <Subtitle color={'green'}>Subtitle Text Colored</Subtitle>
+      <Subtitle variant="bold">Subtitle Text Bold</Subtitle>
+      <Subtitle variant="small">Subtitle Text Small</Subtitle>
     </ThemedBackground>
   ))
 
   // Kubera Portal
   .add('Kubera Portal', () => (
     <ThemedBackground platform="kubera-portal" row>
-      <Subtitle>Subtitle Text</Subtitle>
-      <Subtitle color={'green'}>Subtitle Text</Subtitle>
-      <Subtitle variant="small">Subtitle Text</Subtitle>
+      <Subtitle>Subtitle Text Primary</Subtitle>
+      <Subtitle color={'green'}>Subtitle Text Colored</Subtitle>
+      <Subtitle variant="bold">Subtitle Text Bold</Subtitle>
+      <Subtitle variant="small">Subtitle Text Small</Subtitle>
     </ThemedBackground>
   ))
 
   // Kubera Core
   .add('Kubera Core', () => (
     <ThemedBackground platform="kubera-core" row>
-      <Subtitle>Subtitle Text</Subtitle>
-      <Subtitle color={'green'}>Subtitle Text</Subtitle>
-      <Subtitle variant="small">Subtitle Text</Subtitle>
+      <Subtitle>Subtitle Text Primary</Subtitle>
+      <Subtitle color={'green'}>Subtitle Text Colored</Subtitle>
+      <Subtitle variant="bold">Subtitle Text Bold</Subtitle>
+      <Subtitle variant="small">Subtitle Text Small</Subtitle>
     </ThemedBackground>
   ));
diff --git a/src/core/Text/Subtitle/Subtitle.tsx b/src/core/Text/Subtitle/Subtitle.tsx
@@ -1,9 +1,7 @@
+import Typography from '@material-ui/core/Typography';
 import React from 'react';
+import { TypographyBaseProps, Variant } from '../base';
 import { useStyles } from './styles';
-import { TypographyBaseProps } from '../base';
-import Typography from '@material-ui/core/Typography';
-
-type Variant = 'small' | undefined;
 
 interface SubtitleProps extends TypographyBaseProps {
   variant?: Variant;
@@ -15,6 +13,8 @@ const Subtitle: React.FC<SubtitleProps> = ({ color, variant, children }) => {
 
   function getVariant(variant: Variant): string {
     switch (variant) {
+      case 'bold':
+        return classes.bold;
       case 'small':
         return classes.small;
       default:

diff --git a/src/core/Text/Subtitle/styles.ts b/src/core/Text/Subtitle/styles.ts
@@ -13,6 +13,9 @@ const useStyles = makeStyles((theme: Theme) => ({
   primary: {
     fontWeight: 'normal',
   },
+  bold: {
+    fontWeight: 'bold',
+  },
   small: {
     fontSize: '0.75rem',
     fontWeight: 'normal',

diff --git a/src/core/Text/base.ts b/src/core/Text/base.ts
@@ -4,3 +4,5 @@ export type TypographyBaseProps = Omit<
   TypographyProps,
   'variant' | 'variantMapping' | 'color' | 'paragraph'
 >;
+
+export type Variant = 'bold' | 'small' | undefined;