feat(components): migrate Toggle to TypeScript (#628)

* refactor(components): migrate Toggle to TypeScript

* feat(components): rename Toggle props

This makes the props consistent with the Checkbox and RadioButton components.

BREAKING CHANGE:
The **Toggle** component's `on`, `labelOn`, and `labelOff` props have been renamed to `checked`,
`labelChecked`, and `labelUnchecked` (🤖 _toggle-checked-prop_).

MIGRATION.md

@@ -118,11 +118,12 @@ The affected components are: Badge, Blockquote, Button, ButtonGroup, Card, CardF
 - The `plain` **Button** prop has been removed. Use the new Anchor component or the `tertiary` Button variant instead.
 - The `flat` **Button** variant has been removed (🤖 _button-variant-enum_)
 - The **LoadingButton**'s exit animations have been removed. An action's success or error result should be communicated outside the button (🤖 _exit-animations_)
-- The **RadioButton** and **Switch** components no longer accept the `onToggle` prop. Use the `onChange` prop instead (🤖 _onchange-prop_)
+- The **RadioButton** and **Switch** component's `onToggle` prop has been renamed to `onChange` (🤖 _onchange-prop_)
 - The **Input** and **Textarea** components no longer accept `*ClassName` props. Emotion 10 uses style objects instead of class names. Use the `*Styles` props instead. The `wrapperStyles` prop has been renamed to `labelStyles` (🤖 _input-label-styles-prop_). The `deepRef` prop has been renamed to `ref` (🤖 _input-deepref-prop_)
 - The **Input** and **Textarea** components' `deepRef` prop has been renamed to `ref` (🤖 _input-deepref-prop_)
 - The **Input** and **Textarea** components no longer have an `optional` state. Add "(optional)" to the label text instead.
-- The **Selector** component no longer accepts the `onClick` and `selected` props. Use the `onChange` and `checked` props instead (🤖 _selector-props_). The `value` and `name` have been added as required props.
+- The **Selector** component's `onClick` and `selected` props have been renamed to `onChange` and `checked` (🤖 _selector-props_). The `value` and `name` have been added as required props.
+- The **Toggle** component's `on`, `labelOn`, and `labelOff` props have been renamed to `checked`, `labelChecked`, and `labelUnchecked` (🤖 _toggle-checked-prop_).
 - The **RadioButtonGroup** component's `label` property inside the `options` prop has been renamed to `children`.
 - The **IconButton** component's dimensions and style have changed. It is now consistent with the Button component.
 - The **Hamburger** component's default size has been increased to match the IconButton component.

scripts/static-styles/config.js

@@ -17,22 +17,22 @@ import React from 'react';
 import { entries, isFunction, kebabCase } from 'lodash/fp';
 import { light } from '@sumup/design-tokens';
 
-import {
-  // Badge,
-  ButtonGroup,
-  Card,
-  // Checkbox,
-  Hr,
-  Image,
-  // Input,
-  // Label,
-  RadioButton,
-  // Select,
-  // Selector,
-  Tag,
-  // TextArea,
-  Toggle
-} from '../../src';
+// import {
+//   Badge,
+//   ButtonGroup,
+//   Card,
+//   Checkbox,
+//   Hr,
+//   Image,
+//   Input,
+//   Label,
+//   RadioButton,
+//   Select,
+//   Selector,
+//   Tag,
+//   TextArea,
+//   Toggle
+// } from '../../src';
 
 const element = props => <div {...props} />;
 
@@ -111,9 +111,9 @@ export function getComponentInfo(component, propOverrides = {}) {
   }
 }
 
-// TODO: Make React DocGen work with TypeScript
 export default {
   themes: { light },
+  // TODO: Make React DocGen work with TypeScript
   components: [
     // {
     //   name: 'badge',
@@ -125,19 +125,19 @@ export default {
     // },
     // getComponentInfo(Button, { size: [KILO, MEGA] }),
     // getComponentInfo(Blockquote, {
-    //   size: [Blockquote.KILO, Blockquote.MEGA, Blockquote.GIGA]
+    //   size: ['kilo', 'mega', 'giga']
+    // }),
+    // getComponentInfo(ButtonGroup, {
+    //   align: ['left', 'center', 'right']
     // }),
-    getComponentInfo(ButtonGroup, {
-      align: [ButtonGroup.LEFT, ButtonGroup.CENTER, ButtonGroup.RIGHT]
-    }),
-    {
-      name: 'card',
-      component: Card,
-      props: {
-        shadow: [Card.SINGLE, Card.DOUBLE, Card.TRIPLE],
-        spacing: [Card.MEGA, Card.GIGA]
-      }
-    },
+    // {
+    //   name: 'card',
+    //   component: Card,
+    //   props: {
+    //     shadow: ['single', 'double', 'triple'],
+    //     spacing: ['mega', 'giga']
+    //   }
+    // },
     // getComponentInfo(Checkbox),
     // getComponentInfo(Hamburger),
     // getComponentInfo(Heading, {
@@ -151,8 +151,8 @@ export default {
     //     "zetta"
     //   ]
     // }),
-    { name: 'hr', component: Hr },
-    { name: 'image', component: Image },
+    // { name: 'hr', component: Hr },
+    // { name: 'image', component: Image },
     // getComponentInfo(Input, {
     //   renderPrefix: PropTypes.element,
     //   renderSuffix: PropTypes.element,
@@ -166,24 +166,23 @@ export default {
     // getComponentInfo(ProgressBar, {
     //   size: ['kilo', 'mega', 'giga']
     // }),
-    getComponentInfo(RadioButton),
+    // getComponentInfo(RadioButton),
     // getComponentInfo(Select, {
     //   renderPrefix: PropTypes.element
     // }),
     // { name: 'selector', component: Selector },
-    // TODO: Make React DocGen work with TypeScript
     // getComponentInfo(SubHeading, {
     //   size: ['kilo', 'mega']
     // }),
-    getComponentInfo(Tag, {
-      onRemove: PropTypes.func,
-      prefix: PropTypes.element,
-      suffix: PropTypes.element
-    }),
+    // getComponentInfo(Tag, {
+    //   onRemove: PropTypes.func,
+    //   prefix: PropTypes.element,
+    //   suffix: PropTypes.element
+    // }),
     // getComponentInfo(Text, {
     //   size: ['kilo', 'mega', 'giga']
     // }),
     // getComponentInfo(TextArea),
-    getComponentInfo(Toggle)
+    // getComponentInfo(Toggle)
   ]
 };