feat(Lozenge): add default lozenge type in LozengeType enum

kronostechnologies · Jul 15, 2022 · 74d2869 · 74d2869
1 parent 30b477c
commit 74d2869
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 2 deletions.
diff --git a/packages/react/src/components/lozenge/lozenge.test.tsx b/packages/react/src/components/lozenge/lozenge.test.tsx
@@ -16,6 +16,12 @@ describe('Lozenge', () => {
         expect(tree).toMatchSnapshot();
     });
 
+    test('default matches the snapshot', () => {
+        const tree = renderWithTheme(<Lozenge type='default'>default</Lozenge>);
+
+        expect(tree).toMatchSnapshot();
+    });
+
     test('success matches the snapshot', () => {
         const tree = renderWithTheme(<Lozenge type='success'>success</Lozenge>);
 

diff --git a/packages/react/src/components/lozenge/lozenge.test.tsx.snap b/packages/react/src/components/lozenge/lozenge.test.tsx.snap
@@ -36,6 +36,42 @@ exports[`Lozenge alert matches the snapshot 1`] = `
 </span>
 `;
 
+exports[`Lozenge default matches the snapshot 1`] = `
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #F1F2F2;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius-half);
+  box-sizing: border-box;
+  color: #60666E;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-size: 0.75rem;
+  font-weight: var(--font-semi-bold);
+  line-height: 0.875rem;
+  max-width: 312px;
+  overflow: hidden;
+  padding: 0 var(--spacing-half);
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+<span
+  class="c0"
+>
+  default
+</span>
+`;
+
 exports[`Lozenge info matches the snapshot 1`] = `
 .c0 {
   -webkit-align-items: center;

diff --git a/packages/react/src/components/lozenge/lozenge.tsx b/packages/react/src/components/lozenge/lozenge.tsx
@@ -6,7 +6,7 @@ import { Icon, IconName } from '../icon/icon';
 
 const MAXIMUM_LENGTH = '312px';
 
-export type LozengeType = 'success' | 'alert' | 'warning' | 'info' | 'disabled';
+export type LozengeType = 'default' | 'success' | 'alert' | 'warning' | 'info' | 'disabled';
 
 interface StyledLozengeProps {
     $isMobile: boolean;
@@ -27,6 +27,7 @@ function getLozengeBackgroundColor({ $type, theme }: StyledLozengeProps): string
         case 'info':
             // TODO: add this color in default themes
             return '#f9f7fb';
+        case 'default':
         default:
             return theme.greys['light-grey'];
     }
@@ -44,6 +45,7 @@ function getLozengeBorderColor({ $type, theme }: StyledLozengeProps): string {
             return theme.notifications['warning-3.1'];
         case 'info':
             return theme.notifications['info-1.1'];
+        case 'default':
         default:
             return theme.greys['dark-grey'];
     }
@@ -61,6 +63,7 @@ function getLozengeColor({ $type, theme }: StyledLozengeProps): string {
             return theme.notifications['warning-3.1'];
         case 'info':
             return theme.notifications['info-1.1'];
+        case 'default':
         default:
             return theme.greys['dark-grey'];
     }

diff --git a/packages/storybook/stories/lozenge.stories.tsx b/packages/storybook/stories/lozenge.stories.tsx
@@ -26,7 +26,8 @@ const TypeDecorator = styled.div`
 
 export const Type: Story = () => (
     <>
-        <Lozenge>default</Lozenge>
+        <Lozenge>default no type</Lozenge>
+        <Lozenge type='default'>default</Lozenge>
         <Lozenge type='success'>success</Lozenge>
         <Lozenge type='alert'>alert</Lozenge>
         <Lozenge type='warning'>warning</Lozenge>