fix: badge migration

package.json

@@ -105,7 +105,7 @@
   "dependencies": {
     "@babel/runtime": "^7.0.0",
     "@momentum-design/animations": "^0.0.4",
-    "@momentum-design/components": "0.39.4",
+    "@momentum-design/components": "0.39.5",
     "@momentum-design/fonts": "0.0.8",
     "@momentum-design/icons": "0.10.0",
     "@momentum-design/tokens": "0.5.0",

src/components/Badge/Badge.constants.ts

@@ -1,16 +1,9 @@
-const CLASS_PREFIX = 'md-badge';
+import { TYPE } from '@momentum-design/components/dist/components/badge/badge.constants.js';
 
-const DEFAULTS = {
-  SIZE: 18,
-};
-
-const SIZES = {
-  18: 18,
-  12: 12,
-};
+const TYPES = Object.values(TYPE);
 
-const STYLE = {
-  wrapper: `${CLASS_PREFIX}-wrapper`,
-};
+const DEFAULTS = {
+  TYPE: 'dot',
+} as const;
 
-export { CLASS_PREFIX, DEFAULTS, SIZES, STYLE };
+export { DEFAULTS, TYPES };

src/components/Badge/Badge.documentation.mdx

@@ -1,4 +1,4 @@
 <Badge />` is an independent component.
 
-It has 2 sizes: The small size (12px) is simply the unread-bold icon. The medium size (18px) is a
-pill-shape div that can accept Text inside.
+It has different types - read more about them here:
+https://momentum-design.github.io/momentum-design/storybook-static/index.html?path=/docs/components-badge--docs

src/components/Badge/Badge.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-unresolved */
 import React, { FC } from 'react';
 import { Story } from '@storybook/react';
 import {
@@ -11,6 +12,7 @@ import {
 
 import Badge, { BadgeProps, BADGE_CONSTANTS as CONSTANTS } from './';
 import Documentation from './Badge.documentation.mdx';
+import { TYPES } from './Badge.constants';
 
 const DocsPage: FC = () => (
   <>
@@ -35,8 +37,45 @@ export default {
 };
 
 const argTypes = {
-  children: {
-    description: 'Provides the child text for this element.',
+  type: {
+    description: 'Modifies the type of the badge',
+    options: [undefined, ...TYPES],
+    control: { type: 'select' },
+    table: {
+      type: {
+        summary: 'number',
+      },
+      defaultValue: {
+        summary: CONSTANTS.DEFAULTS.TYPE,
+      },
+    },
+  },
+  counter: {
+    description: 'Provides the counter number for this element. \n\n (when `type` === counter)',
+    control: { type: 'number' },
+    table: {
+      type: {
+        summary: 'number',
+      },
+      defaultValue: {
+        summary: undefined,
+      },
+    },
+  },
+  maxCounter: {
+    description: 'Provides the maxCounter number for this element. \n\n (when `type` === counter)',
+    control: { type: 'number' },
+    table: {
+      type: {
+        summary: 'number',
+      },
+      defaultValue: {
+        summary: undefined,
+      },
+    },
+  },
+  iconName: {
+    description: 'Provides the iconName for this element. \n\n (when `type` === icon)',
     control: { type: 'text' },
     table: {
       type: {
@@ -47,50 +86,25 @@ const argTypes = {
       },
     },
   },
-  size: {
-    description: 'Modifies the size of this element.',
-    options: [undefined, ...Object.values(CONSTANTS.SIZES)],
-    control: { type: 'select' },
+  overlay: {
+    description: 'Provides the overlay attribute for this element.',
+    control: { type: 'boolean' },
     table: {
       type: {
-        summary: 'number',
+        summary: 'boolean',
       },
       defaultValue: {
-        summary: CONSTANTS.DEFAULTS.SIZE,
+        summary: undefined,
       },
     },
   },
 };
 
 const Template: Story<BadgeProps> = (args: BadgeProps) => {
-  return <Badge {...args}>{args.children}</Badge>;
-};
-
-const MultiTemplate: Story<BadgeProps> = (args: BadgeProps, { parameters }) => {
-  const mutatedArgs = { ...args };
-  const { children } = mutatedArgs;
-  delete mutatedArgs.children;
-
-  const { variants } = parameters;
-
-  const items = variants.map((variant, index: number) => (
-    <Badge key={index} {...variant} {...args}>
-      {children}
-    </Badge>
-  ));
-
-  return <>{items}</>;
+  return <Badge {...args} />;
 };
 
 const Example = Template.bind({});
 Example.argTypes = { ...argTypes };
 
-const Sizes = MultiTemplate.bind({});
-Sizes.parameters = {
-  variants: [{}, { size: 18 }, { size: 12 }],
-};
-
-Sizes.argTypes = { ...argTypes };
-delete Sizes.argTypes.size;
-
-export { Example, Sizes };
+export { Example };

src/components/Badge/Badge.tsx

@@ -1,32 +1,33 @@
 import React, { FC } from 'react';
 import classnames from 'classnames';
 
-import './Badge.style.scss';
-import { Props } from './Badge.types';
-import { DEFAULTS, STYLE } from './Badge.constants';
-
-import Icon from '../Icon/Icon';
+import type { Props } from './Badge.types';
+import { DEFAULTS } from './Badge.constants';
+import { Badge as MdcBadge } from '@momentum-design/components/dist/react';
 
 const Badge: FC<Props> = (props: Props) => {
-  const { className, id, size, style } = props;
+  const {
+    className,
+    id,
+    style,
+    type = DEFAULTS.TYPE,
+    counter,
+    maxCounter,
+    iconName,
+    overlay,
+  } = props;
+
   return (
-    <div
-      className={classnames(STYLE.wrapper, className)}
+    <MdcBadge
+      type={type}
+      counter={counter}
+      maxCounter={maxCounter}
+      iconName={iconName}
+      overlay={overlay}
+      className={classnames(className)}
       id={id}
       style={style}
-      data-size={size || DEFAULTS.SIZE}
-    >
-      {props.size == 18 ? (
-        props.children
-      ) : props.size == 12 ? (
-        <Icon
-          name="unread"
-          weight="bold"
-          scale={12}
-          fillColor={'var(--mds-color-theme-background-accent-normal)'}
-        />
-      ) : null}
-    </div>
+    />
   );
 };
 

src/components/Badge/Badge.types.ts

@@ -1,28 +1,60 @@
-import { CSSProperties } from 'react';
+import type { BadgeType } from '@momentum-design/components';
+import type IconKeys from '@momentum-design/icons/dist/types/types';
+import type { CSSProperties } from 'react';
 
 export interface Props {
   /**
-   * Custom class for overriding this component's CSS.
+   * Type of the badge, mapping from momentum-design
+   * see https://momentum-design.github.io/momentum-design/en/components/ for more information
    */
-  className?: string;
+  type?: BadgeType;
 
   /**
-   * Custom id for overriding this component's CSS.
+   * Current counter number
+   *
+   * When type === counter
    */
-  id?: string;
+  counter?: number;
 
   /**
-   * Custom style for overriding this component's CSS.
+   * Max counter number, if `counter` > maxCounter, `+` will be appended
+   *
+   * When type === counter
    */
-  style?: CSSProperties;
+  maxCounter?: number;
+
+  /**
+   * Max counter number, if `counter` > maxCounter, `+` will be appended
+   *
+   * When type === icon
+   */
+  iconName?: IconKeys;
+
+  /**
+   * Max counter number, if `counter` > maxCounter, `+` will be appended
+   *
+   * When type === icon
+   */
+  variant?: 'primary' | 'secondary';
 
   /**
-   * Child component of this Badge
+   * If the badge should be used as a overlay (having a border)
+   * Like placed on a button for indicating notifications.
    */
-  children?: string;
+  overlay?: boolean;
 
   /**
-   * Size index of this Badge
+   * Custom class for overriding this component's CSS.
+   */
+  className?: string;
+
+  /**
+   * Custom id for overriding this component's CSS.
    */
-  size?: number;
+  id?: string;
+
+  /**
+   * Custom style for overriding this component's CSS.
+   */
+  style?: CSSProperties;
 }