feat(components): remove static properties from components (#607)

I couldn't figure out a way to type the static properties in TypeScript. Since all components will be migrated to TypeScript eventually, we should remove the static properties now since it's a breaking change. When using TypeScript, they're no longer needed anyway. BREAKING CHANGE: All static properties on components have been removed. Use plain, lowercase strings instead. BREAKING CHANGE: The `styleConstants` export has been removed. Use plain, lowercase strings instead.
sumup-oss · Jun 8, 2020 · 23eb9e8 · 23eb9e8
1 parent 9056caf
commit 23eb9e8
Show file tree

Hide file tree

Showing 59 changed files with 198 additions and 574 deletions.
diff --git a/scripts/static-styles/config.js b/scripts/static-styles/config.js
@@ -14,7 +14,7 @@
  */
 
 import React from 'react';
-import { entries, values, isFunction, kebabCase } from 'lodash/fp';
+import { entries, isFunction, kebabCase } from 'lodash/fp';
 import { light } from '@sumup/design-tokens';
 
 import {
@@ -33,12 +33,9 @@ import {
   SubHeading,
   Tag,
   TextArea,
-  Toggle,
-  styleConstants
+  Toggle
 } from '../../src';
 
-const { colorNames } = styleConstants;
-
 const element = props => <div {...props} />;
 
 export const PropTypes = {
@@ -123,7 +120,7 @@ export default {
       name: 'badge',
       component: Badge,
       props: {
-        color: values(colorNames),
+        color: ['neutral', 'primary', 'success', 'warning', 'danger'],
         circle: PropTypes.bool
       }
     },

diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap
@@ -11311,7 +11311,6 @@ tbody .circuit-36:hover th {
             aria-sort="none"
             class="circuit-6 circuit-7"
             data-testid="table-header"
-            scope="col"
           >
             <button
               class="circuit-4 circuit-5"
@@ -11370,7 +11369,6 @@ tbody .circuit-36:hover th {
             aria-sort="none"
             class="circuit-16 circuit-7"
             data-testid="table-header"
-            scope="col"
           >
             <button
               class="circuit-4 circuit-5"
@@ -11420,14 +11418,12 @@ tbody .circuit-36:hover th {
           <th
             class="circuit-18 circuit-7"
             data-testid="table-header"
-            scope="col"
           >
             Permissions
           </th>
           <th
             class="circuit-20 circuit-7"
             data-testid="table-header"
-            scope="col"
           >
             Status
           </th>
@@ -11443,7 +11439,6 @@ tbody .circuit-36:hover th {
           <th
             class="circuit-26 circuit-7"
             data-testid="table-header"
-            scope="row"
           >
             Lorem ipsum dolor
           </th>
@@ -11483,7 +11478,6 @@ tbody .circuit-36:hover th {
           <th
             class="circuit-26 circuit-7"
             data-testid="table-header"
-            scope="row"
           >
             Ipsum dolor sit amet
           </th>
@@ -11522,7 +11516,6 @@ tbody .circuit-36:hover th {
           <th
             class="circuit-26 circuit-7"
             data-testid="table-header"
-            scope="row"
           >
             Dolor sit amet, consectetur adipiscing
           </th>
@@ -11812,7 +11805,6 @@ tbody .circuit-10:last-child td {
             aria-sort="none"
             class="circuit-6 circuit-7"
             data-testid="table-header"
-            scope="col"
           >
             <button
               class="circuit-4 circuit-5"
@@ -11877,7 +11869,6 @@ tbody .circuit-10:last-child td {
           <th
             class="circuit-14 circuit-7"
             data-testid="table-header"
-            scope="row"
           >
             Schweiz
           </th>
@@ -11897,7 +11888,6 @@ tbody .circuit-10:last-child td {
           <th
             class="circuit-14 circuit-7"
             data-testid="table-header"
-            scope="row"
           >
             Österreich
           </th>
@@ -11917,7 +11907,6 @@ tbody .circuit-10:last-child td {
           <th
             class="circuit-14 circuit-7"
             data-testid="table-header"
-            scope="row"
           >
             Deutschland
           </th>
@@ -11937,7 +11926,6 @@ tbody .circuit-10:last-child td {
           <th
             class="circuit-14 circuit-7"
             data-testid="table-header"
-            scope="row"
           >
             Liechtenstein
           </th>
@@ -11957,7 +11945,6 @@ tbody .circuit-10:last-child td {
           <th
             class="circuit-14 circuit-7"
             data-testid="table-header"
-            scope="row"
           >
             Italien
           </th>
@@ -12291,7 +12278,6 @@ tbody .circuit-18:last-child td {
             aria-sort="none"
             class="circuit-6 circuit-7"
             data-testid="table-header"
-            scope="col"
           >
             <button
               class="circuit-4 circuit-5"
@@ -12350,7 +12336,6 @@ tbody .circuit-18:last-child td {
             aria-sort="none"
             class="circuit-16 circuit-7"
             data-testid="table-header"
-            scope="col"
           >
             <button
               class="circuit-4 circuit-5"
@@ -12407,7 +12392,6 @@ tbody .circuit-18:last-child td {
           <th
             class="circuit-22 circuit-7"
             data-testid="table-header"
-            scope="row"
           >
             Apple
           </th>
@@ -12433,7 +12417,6 @@ tbody .circuit-18:last-child td {
           <th
             class="circuit-22 circuit-7"
             data-testid="table-header"
-            scope="row"
           >
             Broccoli
           </th>
@@ -12459,7 +12442,6 @@ tbody .circuit-18:last-child td {
           <th
             class="circuit-22 circuit-7"
             data-testid="table-header"
-            scope="row"
           >
             Chickpeas
           </th>
@@ -12719,7 +12701,6 @@ tbody .circuit-6:last-child td {
           <th
             class="circuit-0 circuit-1"
             data-testid="table-header"
-            scope="col"
           >
             Name
           </th>
@@ -12734,7 +12715,6 @@ tbody .circuit-6:last-child td {
           <th
             class="circuit-4 circuit-1"
             data-testid="table-header"
-            scope="col"
           >
             Type
           </th>
@@ -12748,7 +12728,6 @@ tbody .circuit-6:last-child td {
           <th
             class="circuit-10 circuit-1"
             data-testid="table-header"
-            scope="row"
           >
             Apple
           </th>
@@ -12778,7 +12757,6 @@ tbody .circuit-6:last-child td {
           <th
             class="circuit-10 circuit-1"
             data-testid="table-header"
-            scope="row"
           >
             Broccoli
           </th>
@@ -12808,7 +12786,6 @@ tbody .circuit-6:last-child td {
           <th
             class="circuit-10 circuit-1"
             data-testid="table-header"
-            scope="row"
           >
             Chickpeas
           </th>
@@ -12877,7 +12854,6 @@ exports[`Storyshots Components/Table/TableHeader Base 1`] = `
 <th
   class="circuit-0 circuit-1"
   data-testid="table-header"
-  scope="col"
   style="width: 300px; align-self: center;"
 >
   Header

diff --git a/src/components/Badge/Badge.js b/src/components/Badge/Badge.js
@@ -20,30 +20,29 @@ import { css } from '@emotion/core';
 import isPropValid from '@emotion/is-prop-valid';
 
 import { subHeadingKilo, focusOutline } from '../../styles/style-helpers';
-import { colorNames } from '../../styles/constants';
 
 const COLOR_MAP = {
-  [colorNames.SUCCESS]: {
+  success: {
     default: 'g500',
     hover: 'g700',
     active: 'g900'
   },
-  [colorNames.WARNING]: {
+  warning: {
     default: 'y500',
     hover: 'y700',
     active: 'y900'
   },
-  [colorNames.DANGER]: {
+  danger: {
     default: 'r500',
     hover: 'r700',
     active: 'r900'
   },
-  [colorNames.PRIMARY]: {
+  primary: {
     default: 'b500',
     hover: 'b700',
     active: 'b900'
   },
-  [colorNames.NEUTRAL]: {
+  neutral: {
     default: 'n500',
     hover: 'n700',
     active: 'n900'
@@ -122,12 +121,6 @@ const Badge = React.forwardRef((props, ref) => (
 
 Badge.displayName = 'Badge';
 
-Badge.NEUTRAL = colorNames.NEUTRAL;
-Badge.PRIMARY = colorNames.PRIMARY;
-Badge.SUCCESS = colorNames.SUCCESS;
-Badge.WARNING = colorNames.WARNING;
-Badge.DANGER = colorNames.DANGER;
-
 Badge.propTypes = {
   /**
    * Callback for the click event.
@@ -138,11 +131,11 @@ Badge.propTypes = {
    */
   circle: PropTypes.bool,
   color: PropTypes.oneOf([
-    Badge.NEUTRAL,
-    Badge.PRIMARY,
-    Badge.SUCCESS,
-    Badge.WARNING,
-    Badge.DANGER
+    'neutral',
+    'primary',
+    'success',
+    'warning',
+    'danger'
   ]),
   /**
    * The ref to the html button dom element
@@ -157,7 +150,7 @@ Badge.propTypes = {
 
 Badge.defaultProps = {
   circle: false,
-  color: Badge.NEUTRAL,
+  color: 'neutral',
   ref: undefined
 };
 

diff --git a/src/components/Badge/Badge.spec.js b/src/components/Badge/Badge.spec.js
@@ -28,22 +28,22 @@ describe('Badge', () => {
 
   describe('rendering color variations', () => {
     it('should render with success colors', () => {
-      const actual = create(<Badge color={Badge.SUCCESS} />);
+      const actual = create(<Badge color={'success'} />);
       expect(actual).toMatchSnapshot();
     });
 
     it('should render with warning colors', () => {
-      const actual = create(<Badge color={Badge.WARNING} />);
+      const actual = create(<Badge color={'warning'} />);
       expect(actual).toMatchSnapshot();
     });
 
     it('should render with danger colors', () => {
-      const actual = create(<Badge color={Badge.DANGER} />);
+      const actual = create(<Badge color={'danger'} />);
       expect(actual).toMatchSnapshot();
     });
 
     it('should render with primary colors', () => {
-      const actual = create(<Badge color={Badge.PRIMARY} />);
+      const actual = create(<Badge color={'primary'} />);
       expect(actual).toMatchSnapshot();
     });
   });

diff --git a/src/components/Badge/Badge.story.js b/src/components/Badge/Badge.story.js
@@ -16,9 +16,6 @@
 import React, { Fragment } from 'react';
 import { select, boolean } from '@storybook/addon-knobs/react';
 import { action } from '@storybook/addon-actions';
-import { values } from 'lodash/fp';
-
-import { colorNames } from '../../styles/constants';
 
 import docs from './Badge.docs.mdx';
 import Badge from './Badge';
@@ -33,27 +30,37 @@ export default {
 };
 
 export const base = () => (
-  <Badge color={select('Color', values(colorNames))}>Badge</Badge>
+  <Badge
+    color={select('Color', [
+      'neutral',
+      'primary',
+      'success',
+      'warning',
+      'danger'
+    ])}
+  >
+    Badge
+  </Badge>
 );
 
 export const colors = () => (
   <Fragment>
-    <Badge color={Badge.NEUTRAL}>Neutral</Badge>
-    <Badge color={Badge.PRIMARY}>Primary</Badge>
-    <Badge color={Badge.SUCCESS}>Success</Badge>
-    <Badge color={Badge.WARNING}>Warning</Badge>
-    <Badge color={Badge.DANGER}>Danger</Badge>
+    <Badge color={'neutral'}>Neutral</Badge>
+    <Badge color={'primary'}>Primary</Badge>
+    <Badge color={'success'}>Success</Badge>
+    <Badge color={'warning'}>Warning</Badge>
+    <Badge color={'danger'}>Danger</Badge>
   </Fragment>
 );
 
 export const circular = () => (
-  <Badge color={Badge.PRIMARY} circle={boolean('Circular', true)}>
+  <Badge color={'primary'} circle={boolean('Circular', true)}>
     42
   </Badge>
 );
 
 export const clickable = () => (
-  <Badge color={Badge.PRIMARY} onClick={action('onClick')} as="button">
+  <Badge color={'primary'} onClick={action('onClick')} as="button">
     Click me
   </Badge>
 );