feat(components): Migrate Badge component to typescript (#624)

* Initial refactor to ts of the Badge component * Conclude refactoring of Badge component * Fix lint issues * Update Badge snapshot
sumup-oss · Jun 23, 2020 · f90c47d · f90c47d
1 parent 47b2842
commit f90c47d
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 107 deletions.
diff --git a/scripts/static-styles/config.js b/scripts/static-styles/config.js
@@ -18,7 +18,7 @@ import { entries, isFunction, kebabCase } from 'lodash/fp';
 import { light } from '@sumup/design-tokens';
 
 import {
-  Badge,
+  // Badge,
   ButtonGroup,
   Card,
   Checkbox,
@@ -115,14 +115,14 @@ export function getComponentInfo(component, propOverrides = {}) {
 export default {
   themes: { light },
   components: [
-    {
-      name: 'badge',
-      component: Badge,
-      props: {
-        color: ['neutral', 'primary', 'success', 'warning', 'danger'],
-        circle: PropTypes.bool
-      }
-    },
+    // {
+    //   name: 'badge',
+    //   component: Badge,
+    //   props: {
+    //     color: ['neutral', 'primary', 'success', 'warning', 'danger'],
+    //     circle: PropTypes.bool
+    //   }
+    // },
     // getComponentInfo(Button, { size: [KILO, MEGA] }),
     // getComponentInfo(Blockquote, {
     //   size: [Blockquote.KILO, Blockquote.MEGA, Blockquote.GIGA]

diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap
@@ -62,7 +62,7 @@ exports[`Storyshots Components/Badge Base 1`] = `
 }
 
 <div
-  class="circuit-0 circuit-1"
+  class="circuit-0"
 >
   Badge
 </div>
@@ -101,7 +101,7 @@ exports[`Storyshots Components/Badge Circular 1`] = `
 }
 
 <div
-  class="circuit-0 circuit-1"
+  class="circuit-0"
 >
   42
 </div>
@@ -146,7 +146,7 @@ exports[`Storyshots Components/Badge Clickable 1`] = `
 }
 
 <button
-  class="circuit-0 circuit-1"
+  class="circuit-0"
 >
   Click me
 </button>
@@ -172,7 +172,7 @@ HTMLCollection [
 }
 
 <div
-    class="circuit-0 circuit-1"
+    class="circuit-0"
   >
     Neutral
   </div>,
@@ -194,7 +194,7 @@ HTMLCollection [
 }
 
 <div
-    class="circuit-0 circuit-1"
+    class="circuit-0"
   >
     Primary
   </div>,
@@ -216,7 +216,7 @@ HTMLCollection [
 }
 
 <div
-    class="circuit-0 circuit-1"
+    class="circuit-0"
   >
     Success
   </div>,
@@ -238,7 +238,7 @@ HTMLCollection [
 }
 
 <div
-    class="circuit-0 circuit-1"
+    class="circuit-0"
   >
     Warning
   </div>,
@@ -260,7 +260,7 @@ HTMLCollection [
 }
 
 <div
-    class="circuit-0 circuit-1"
+    class="circuit-0"
   >
     Danger
   </div>,
@@ -12468,7 +12468,7 @@ tbody .circuit-18:last-child td {
 `;
 
 exports[`Storyshots Components/Table With Component Rows 1`] = `
-.circuit-24 {
+.circuit-23 {
   border-radius: 999999px;
   color: #FFFFFF;
   display: inline-block;
@@ -12485,7 +12485,7 @@ exports[`Storyshots Components/Table With Component Rows 1`] = `
   background-color: #8CC13F;
 }
 
-.circuit-34 {
+.circuit-32 {
   border-radius: 999999px;
   color: #FFFFFF;
   display: inline-block;
@@ -12519,36 +12519,36 @@ exports[`Storyshots Components/Table With Component Rows 1`] = `
   background-color: #DB4D4D;
 }
 
-.circuit-44 {
+.circuit-41 {
   position: relative;
   box-shadow: 0 0 0 1px rgba(12,15,20,0.07), 0 0 1px 0 rgba(12,15,20,0.07),0 2px 2px 0 rgba(12,15,20,0.07);
 }
 
-.circuit-42 {
+.circuit-39 {
   border-radius: 4px;
 }
 
 @media (max-width:767px) {
-  .circuit-42 {
+  .circuit-39 {
     height: unset;
     margin-left: 145px;
     overflow-x: auto;
   }
 }
 
-.circuit-40 {
+.circuit-37 {
   background-color: #FFFFFF;
   border-collapse: separate;
   width: 100%;
 }
 
 @media (max-width:767px) {
-  .circuit-40 {
+  .circuit-37 {
     margin-left: -145px;
     width: calc(100% + 145px);
   }
 
-  .circuit-40:after {
+  .circuit-37:after {
     content: '';
     background-image: linear-gradient( 90deg,rgba(0,0,0,0.12),transparent );
     height: 100%;
@@ -12648,7 +12648,7 @@ tbody .circuit-6:last-child td {
   }
 }
 
-.circuit-16 {
+.circuit-15 {
   background-color: #FFFFFF;
   border-bottom: 1px solid #D8DDE1;
   padding: 24px;
@@ -12685,13 +12685,13 @@ tbody .circuit-6:last-child td {
 }
 
 <div
-  class="circuit-44 circuit-45"
+  class="circuit-41 circuit-42"
 >
   <div
-    class="circuit-42 circuit-43"
+    class="circuit-39 circuit-40"
   >
     <table
-      class="circuit-40 circuit-41"
+      class="circuit-37 circuit-38"
     >
       <thead
         class="circuit-8 circuit-9"
@@ -12741,11 +12741,11 @@ tbody .circuit-6:last-child td {
             Apple
           </td>
           <td
-            class="circuit-16 circuit-3"
+            class="circuit-15 circuit-3"
             data-testid="table-cell"
           >
             <div
-              class="circuit-14 circuit-15"
+              class="circuit-14"
             >
               Fruit
             </div>
@@ -12770,11 +12770,11 @@ tbody .circuit-6:last-child td {
             Broccoli
           </td>
           <td
-            class="circuit-16 circuit-3"
+            class="circuit-15 circuit-3"
             data-testid="table-cell"
           >
             <div
-              class="circuit-24 circuit-15"
+              class="circuit-23"
             >
               Vegetable
             </div>
@@ -12799,11 +12799,11 @@ tbody .circuit-6:last-child td {
             Chickpeas
           </td>
           <td
-            class="circuit-16 circuit-3"
+            class="circuit-15 circuit-3"
             data-testid="table-cell"
           >
             <div
-              class="circuit-34 circuit-15"
+              class="circuit-32"
             >
               Legume
             </div>

diff --git a/src/components/Badge/Badge.spec.js → src/components/Badge/Badge.spec.tsx b/src/components/Badge/Badge.spec.js → src/components/Badge/Badge.spec.tsx
@@ -15,6 +15,15 @@
 
 import React from 'react';
 
+import {
+  create,
+  render,
+  renderToHtml,
+  axe,
+  act,
+  userEvent
+} from '../../util/test-utils';
+
 import Badge from '.';
 
 describe('Badge', () => {
@@ -63,7 +72,7 @@ describe('Badge', () => {
      * Should accept a working ref
      */
     it('should accept a working ref', () => {
-      const tref = React.createRef();
+      const tref = React.createRef<HTMLDivElement>();
       const { container } = render(<Badge ref={tref} />);
       const div = container.querySelector('div');
       expect(tref.current).toBe(div);
@@ -89,7 +98,7 @@ describe('Badge', () => {
     );
 
     act(() => {
-      fireEvent.click(getByTestId('badge'));
+      userEvent.click(getByTestId('badge'));
     });
 
     expect(onClick).toHaveBeenCalledTimes(1);

diff --git a/src/components/Badge/Badge.story.js → src/components/Badge/Badge.story.tsx b/src/components/Badge/Badge.story.js → src/components/Badge/Badge.story.tsx
@@ -13,8 +13,8 @@
  * limitations under the License.
  */
 
-import React, { Fragment } from 'react';
-import { select, boolean } from '@storybook/addon-knobs/react';
+import React, { FunctionComponent, Fragment } from 'react';
+import { select, boolean } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 
 import docs from './Badge.docs.mdx';
@@ -28,21 +28,19 @@ export default {
   }
 };
 
-export const base = () => (
+export const base: FunctionComponent = () => (
   <Badge
-    color={select('Color', [
-      'neutral',
-      'primary',
-      'success',
-      'warning',
-      'danger'
-    ])}
+    color={select(
+      'Color',
+      ['neutral', 'primary', 'success', 'warning', 'danger'],
+      'neutral'
+    )}
   >
     Badge
   </Badge>
 );
 
-export const colors = () => (
+export const colors: FunctionComponent = () => (
   <Fragment>
     <Badge color={'neutral'}>Neutral</Badge>
     <Badge color={'primary'}>Primary</Badge>
@@ -52,13 +50,13 @@ export const colors = () => (
   </Fragment>
 );
 
-export const circular = () => (
+export const circular: FunctionComponent = () => (
   <Badge color={'primary'} circle={boolean('Circular', true)}>
     42
   </Badge>
 );
 
-export const clickable = () => (
+export const clickable: FunctionComponent = () => (
   <Badge color={'primary'} onClick={action('onClick')} as="button">
     Click me
   </Badge>