Convert Badge and Branding to Typescript (#1801)

common/styles/styleExports.ts

@@ -0,0 +1,38 @@
+import { isHexColor } from 'common/utils/style-utils';
+import * as themeMap from './themeMap';
+
+const themeMapValues = Object.entries(themeMap);
+
+type StyleObjectType = {
+  [key: string]: string;
+};
+
+export const breakpointsObject: StyleObjectType = themeMapValues.reduce((object, [key, value]) => {
+  const isBreakpoint = key.includes('ViewportWidth');
+
+  if (isBreakpoint) {
+    object[key] = value; // eslint-disable-line no-param-reassign
+  }
+
+  return object;
+}, {} as StyleObjectType);
+
+export const brandColorsObject: StyleObjectType = themeMapValues.reduce(
+  (object, [key, value]) => {
+    if (isHexColor(value)) {
+      object[key] = value; // eslint-disable-line no-param-reassign
+    }
+
+    return object;
+  },
+  {} as StyleObjectType,
+);
+
+export const fontsObject: StyleObjectType = themeMapValues.reduce((object, [key, value]) => {
+  if (key.includes('Font')) {
+    // Remove extra quotes from font name
+    object[key] = value.replace(/^"(.*)"$/, '$1'); // eslint-disable-line no-param-reassign
+  }
+
+  return object;
+}, {} as StyleObjectType);

components/Badge/Badge.js → components/Badge/Badge.tsx

@@ -1,19 +1,26 @@
-import { bool, element, oneOfType, string } from 'prop-types';
 import classNames from 'classnames';
 
-Badge.propTypes = {
-  className: string,
-  icon: element.isRequired, // TODO: Create custom proptype accepting only `<svg>` or `<img>`
-  label: oneOfType([string, element]).isRequired,
-  isImageFirst: bool,
+export type BadgePropsType = {
+  /**
+   * SVG icon to be used as the badge.
+   */
+  icon: React.ReactElement;
+  /**
+   * Optional label that is rendered with the badge.
+   */
+  label: string | React.ReactElement;
+  /**
+   * Applies classnames to the base `figure` element for styling.
+   */
+  className?: string;
+  /**
+   * Sets whether the label is rendered above, or below, the badge..
+   * @default - true  
+   */
+  isImageFirst?: boolean;
 };
 
-Badge.defaultProps = {
-  className: undefined,
-  isImageFirst: true,
-};
-
-function Badge({ className, icon, isImageFirst, label }) {
+function Badge({ className = undefined, icon, isImageFirst = true, label }: BadgePropsType) {
   return (
     <figure
       className={classNames(

components/Badge/__stories__/Badge.stories.tsx

@@ -0,0 +1,44 @@
+import { Meta, StoryObj } from '@storybook/react'
+import GithubIcon from 'public/static/images/icons/github_logo.svg';
+import TwitterIcon from 'public/static/images/icons/twitter_logo.svg';
+import PinterestIcon from 'public/static/images/icons/pinterest_logo.svg';
+import Badge from '../Badge';
+
+const icons = {
+  github: <GithubIcon />,
+  twitter: <TwitterIcon />,
+  pinterest: <PinterestIcon />,
+};
+
+type BadgeStoryType = StoryObj<typeof Badge>
+
+export const GitHubBadge: BadgeStoryType = {
+  render: args => <Badge {...args} />,
+  args: {
+    icon: icons.github,
+    label: 'GitHub Badge'
+  }
+}
+
+export const TwitterBadge: BadgeStoryType = {
+  render: args => <Badge {...args} />,
+  args: {
+    icon: icons.twitter,
+    label: 'Twitter Badge'
+  }
+}
+
+export const PinterestBadge: BadgeStoryType = {
+  render: args => <Badge {...args} />,
+  args: {
+    icon: icons.pinterest,
+    label: 'Pinterest Badge'
+  }
+}
+
+const meta: Meta<typeof Badge> ={
+  title: 'Badge',
+  component: Badge
+}
+
+export default meta

components/Badge/__tests__/Badge.test.js → components/Badge/__tests__/Badge.test.tsx

@@ -17,7 +17,7 @@ describe('Badge', () => {
 
   it('should render the image after the label when `isImageFirst` is true', () => {
     const { container } = render(<Badge icon={badgeIcon} label="Badge Icon" isImageFirst />);
-
+    // @ts-expect-error
     const { childNodes } = container.firstChild;
 
     const [firstItem, secondItem] = childNodes;
@@ -30,7 +30,7 @@ describe('Badge', () => {
     const { container } = render(
       <Badge icon={badgeIcon} label="Badge Icon" isImageFirst={false} />,
     );
-
+    // @ts-expect-error
     const { childNodes } = container.firstChild;
 
     const [firstItem, secondItem] = childNodes;

components/Branding/Swatch/Swatch.js → components/Branding/Swatch/Swatch.tsx

@@ -6,7 +6,12 @@ Swatch.propTypes = {
   hexCode: string.isRequired,
 };
 
-function Swatch({ colorName, hexCode }) {
+export type Swatch = {
+  colorName: string;
+  hexCode: string;
+};
+
+function Swatch({ colorName, hexCode }: Swatch) {
   return (
     <figure className="border-1 border-solid border-[#333333] p-4 m-6 w-56">
       <ScreenReaderOnly>{`A block of the color ${colorName}`}</ScreenReaderOnly>