Migrate Label component to TS

ui/components/component-library/label/index.ts

@@ -0,0 +1,2 @@
+export { Label } from './label';
+export type { LabelComponent, LabelProps } from './label.types';

ui/components/component-library/label/label.stories.js → ui/components/component-library/label/label.stories.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import {
-  DISPLAY,
-  FLEX_DIRECTION,
+  Display,
+  FlexDirection,
   AlignItems,
   IconColor,
 } from '../../../helpers/constants/design-system';
@@ -37,21 +38,21 @@ export default {
   args: {
     children: 'Label',
   },
-};
+} as ComponentMeta<typeof Label>;
 
-const Template = (args) => <Label {...args} />;
+const Template: ComponentStory<typeof Label> = (args) => <Label {...args} />;
 
 export const DefaultStory = Template.bind({});
 DefaultStory.storyName = 'Default';
 
-export const Children = (args) => (
+export const Children: ComponentStory<typeof Label> = (args) => (
   <Box
-    display={DISPLAY.INLINE_FLEX}
-    flexDirection={FLEX_DIRECTION.COLUMN}
+    display={Display.InlineFlex}
+    flexDirection={FlexDirection.Column}
     gap={2}
   >
     <Label {...args}>Plain text</Label>
-    <Label {...args} display={DISPLAY.FLEX} alignItems={AlignItems.flexStart}>
+    <Label {...args} display={Display.Flex} alignItems={AlignItems.flexStart}>
       Text and icon
       <Icon
         color={IconColor.iconAlternative}
@@ -61,8 +62,8 @@ export const Children = (args) => (
     </Label>
     <Label
       {...args}
-      display={DISPLAY.INLINE_FLEX}
-      flexDirection={FLEX_DIRECTION.COLUMN}
+      display={Display.InlineFlex}
+      flexDirection={FlexDirection.Column}
       alignItems={AlignItems.flexStart}
     >
       Label that wraps an input
@@ -71,13 +72,13 @@ export const Children = (args) => (
   </Box>
 );
 
-export const HtmlFor = (args) => {
+export const HtmlFor: ComponentStory<typeof Label> = (args) => {
   const [value, setValue] = useState('');
   const handleOnChange = (e) => {
     setValue(e.target.value);
   };
   return (
-    <Box display={DISPLAY.INLINE_FLEX} flexDirection={FLEX_DIRECTION.COLUMN}>
+    <Box display={Display.InlineFlex} flexDirection={FlexDirection.Column}>
       <Label {...args} />
       <TextField
         id="add-network"

ui/components/component-library/label/label.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import classnames from 'classnames';
+import { Text } from '../text';
+import type { TextProps } from '../text';
+import {
+  FontWeight,
+  TextVariant,
+  Display,
+  AlignItems,
+} from '../../../helpers/constants/design-system';
+import type { PolymorphicRef } from '../box';
+import { LabelProps, LabelComponent } from './label.types';
+
+export const Label: LabelComponent = React.forwardRef(
+  <C extends React.ElementType = 'label'>(
+    { htmlFor, className, children, ...props }: LabelProps<C>,
+    ref?: PolymorphicRef<C>,
+  ) => {
+    return (
+      <Text
+        className={classnames(
+          'mm-label',
+          { 'mm-label--html-for': Boolean(htmlFor) },
+          className ?? '',
+        )}
+        as="label"
+        htmlFor={htmlFor}
+        variant={TextVariant.bodyMd}
+        fontWeight={FontWeight.Medium}
+        display={Display.InlineFlex}
+        alignItems={AlignItems.center}
+        ref={ref}
+        {...(props as TextProps<C>)}
+      >
+        {children}
+      </Text>
+    );
+  },
+);

ui/components/component-library/label/label.types.ts

@@ -0,0 +1,24 @@
+import type { PolymorphicComponentPropWithRef } from '../box';
+import type { TextStyleUtilityProps } from '../text';
+
+export interface LabelStyleUtilityProps extends TextStyleUtilityProps {
+  /**
+   * The id of the input associated with the label
+   */
+  htmlFor?: string;
+  /**
+   * Additional classNames to assign to the Label component
+   */
+  className?: string;
+  /**
+   * The content of the Label component
+   */
+  children: string | React.ReactNode;
+}
+
+export type LabelProps<C extends React.ElementType> =
+  PolymorphicComponentPropWithRef<C, LabelStyleUtilityProps>;
+
+export type LabelComponent = <C extends React.ElementType = 'label'>(
+  props: LabelProps<C>,
+) => React.ReactElement | null;