fix: migrate dividerdot by using bullet component

src/components/DividerDot/DividerDot.constants.ts

@@ -1,6 +1,8 @@
 const CLASS_PREFIX = 'md-divider-dot';
 
-const DEFAULTS = {};
+const DEFAULTS = {
+  SIZE: 'small' as const,
+};
 
 const STYLE = {
   wrapper: `${CLASS_PREFIX}-wrapper`,

src/components/DividerDot/DividerDot.stories.args.ts

@@ -1,5 +1,19 @@
 import { commonStyles } from '../../storybook/helper.stories.argtypes';
+import { DEFAULTS } from './DividerDot.constants';
 
 export default {
   ...commonStyles,
+  size: {
+    description: 'To set the size of DividerDot',
+    options: ['small', 'medium', 'large'],
+    control: { type: 'select' },
+    table: {
+      type: {
+        summary: 'string',
+      },
+      defaultValue: {
+        summary: DEFAULTS.SIZE,
+      },
+    },
+  },
 };

src/components/DividerDot/DividerDot.style.scss

@@ -1,9 +1,5 @@
 .md-divider-dot-wrapper {
   display: inline-block;
-  width: 0.25rem;
-  height: 0.25rem;
   margin: 0 0.25rem;
   vertical-align: middle;
-  background-color: var(--mds-color-theme-outline-primary-normal);
-  border-radius: 50%;
 }

src/components/DividerDot/DividerDot.tsx

@@ -1,17 +1,20 @@
 import React, { FC } from 'react';
 import classnames from 'classnames';
 
-import { STYLE } from './DividerDot.constants';
-import { Props } from './DividerDot.types';
+import { Bullet as MdcBullet } from '@momentum-design/components/dist/react';
+import type { Props } from './DividerDot.types';
+import { DEFAULTS, STYLE } from './DividerDot.constants';
 import './DividerDot.style.scss';
 
 /**
  * The DividerDot component.
  */
 const DividerDot: FC<Props> = (props: Props) => {
-  const { className, id, style } = props;
+  const { className, id, style, size = DEFAULTS.SIZE } = props;
 
-  return <div className={classnames(className, STYLE.wrapper)} id={id} style={style} />;
+  return (
+    <MdcBullet size={size} className={classnames(className, STYLE.wrapper)} id={id} style={style} />
+  );
 };
 
 export default DividerDot;

src/components/DividerDot/DividerDot.types.ts

@@ -1,6 +1,13 @@
 import { CSSProperties } from 'react';
 
 export interface Props {
+  /**
+   * Size of the Divider dot
+   *
+   * @default 'small'
+   */
+  size?: 'small' | 'medium' | 'large';
+
   /**
    * Custom class for overriding this component's CSS.
    */

src/components/DividerDot/DividerDot.unit.test.tsx

@@ -1,95 +1,113 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, waitFor } from '@testing-library/react';
 
 import DividerDot, { DIVIDER_DOT_CONSTANTS as CONSTANTS } from './';
 
 describe('<DividerDot />', () => {
+  const setup = async (component: any) => {
+    const { container } = render(component);
+
+    // we have to wait for the web component to be rendered
+    await waitFor(() => {
+      expect(container.querySelector('mdc-bullet')).toBeTruthy();
+    });
+
+    return container;
+  };
+
   describe('snapshot', () => {
-    it('should match snapshot', () => {
-      expect.assertions(1);
+    it('should match snapshot', async () => {
+      expect.assertions(2);
 
-      const container = mount(<DividerDot />);
+      const container = await setup(<DividerDot />);
 
       expect(container).toMatchSnapshot();
     });
 
-    it('should match snapshot with className', () => {
-      expect.assertions(1);
+    it('should match snapshot with className', async () => {
+      expect.assertions(2);
 
       const className = 'example-class';
 
-      const container = mount(<DividerDot className={className} />);
+      const container = await setup(<DividerDot className={className} />);
 
       expect(container).toMatchSnapshot();
     });
 
-    it('should match snapshot with id', () => {
-      expect.assertions(1);
+    it('should match snapshot with id', async () => {
+      expect.assertions(2);
 
       const id = 'example-id';
 
-      const container = mount(<DividerDot id={id} />);
+      const container = await setup(<DividerDot id={id} />);
 
       expect(container).toMatchSnapshot();
     });
 
-    it('should match snapshot with style', () => {
-      expect.assertions(1);
+    it('should match snapshot with style', async () => {
+      expect.assertions(2);
 
       const style = { color: 'pink' };
 
-      const container = mount(<DividerDot style={style} />);
+      const container = await setup(<DividerDot style={style} />);
 
       expect(container).toMatchSnapshot();
     });
   });
 
   describe('attributes', () => {
-    it('should have its wrapper class', () => {
-      expect.assertions(1);
+    it('should have its wrapper class', async () => {
+      expect.assertions(2);
 
-      const element = mount(<DividerDot />)
-        .find(DividerDot)
-        .getDOMNode();
+      const container = await setup(<DividerDot />);
+      const element = container.querySelector('mdc-bullet');
 
       expect(element.classList.contains(CONSTANTS.STYLE.wrapper)).toBe(true);
     });
 
-    it('should have provided class when className is provided', () => {
-      expect.assertions(1);
+    it('should have provided class when className is provided', async () => {
+      expect.assertions(2);
 
       const className = 'example-class';
 
-      const element = mount(<DividerDot className={className} />)
-        .find(DividerDot)
-        .getDOMNode();
+      const container = await setup(<DividerDot className={className} />);
+      const element = container.querySelector('mdc-bullet');
 
       expect(element.classList.contains(className)).toBe(true);
     });
 
-    it('should have provided id when id is provided', () => {
-      expect.assertions(1);
+    it('should have provided id when id is provided', async () => {
+      expect.assertions(2);
 
       const id = 'example-id';
 
-      const element = mount(<DividerDot id={id} />)
-        .find(DividerDot)
-        .getDOMNode();
+      const container = await setup(<DividerDot id={id} />);
+      const element = container.querySelector('mdc-bullet');
 
       expect(element.id).toBe(id);
     });
 
-    it('should have provided style when style is provided', () => {
-      expect.assertions(1);
+    it('should have provided style when style is provided', async () => {
+      expect.assertions(2);
 
       const style = { color: 'pink' };
       const styleString = 'color: pink;';
 
-      const element = mount(<DividerDot style={style} />)
-        .find(DividerDot)
-        .getDOMNode();
+      const container = await setup(<DividerDot style={style} />);
+      const element = container.querySelector('mdc-bullet');
 
       expect(element.getAttribute('style')).toBe(styleString);
     });
+
+    it('should have provided size when size is provided', async () => {
+      expect.assertions(2);
+
+      const size = 'large';
+
+      const container = await setup(<DividerDot size={size} />);
+      const element = container.querySelector('mdc-bullet');
+
+      expect(element.getAttribute('size')).toBe(size);
+    });
   });
 });

src/components/DividerDot/DividerDot.unit.test.tsx.snap

@@ -1,49 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<DividerDot /> snapshot should match snapshot 1`] = `
-<DividerDot>
-  <div
-    className="md-divider-dot-wrapper"
+<div>
+  <mdc-bullet
+    class="md-divider-dot-wrapper"
+    size="small"
   />
-</DividerDot>
+</div>
 `;
 
 exports[`<DividerDot /> snapshot should match snapshot with className 1`] = `
-<DividerDot
-  className="example-class"
->
-  <div
-    className="example-class md-divider-dot-wrapper"
+<div>
+  <mdc-bullet
+    class="example-class md-divider-dot-wrapper"
+    size="small"
   />
-</DividerDot>
+</div>
 `;
 
 exports[`<DividerDot /> snapshot should match snapshot with id 1`] = `
-<DividerDot
-  id="example-id"
->
-  <div
-    className="md-divider-dot-wrapper"
+<div>
+  <mdc-bullet
+    class="md-divider-dot-wrapper"
     id="example-id"
+    size="small"
   />
-</DividerDot>
+</div>
 `;
 
 exports[`<DividerDot /> snapshot should match snapshot with style 1`] = `
-<DividerDot
-  style={
-    Object {
-      "color": "pink",
-    }
-  }
->
-  <div
-    className="md-divider-dot-wrapper"
-    style={
-      Object {
-        "color": "pink",
-      }
-    }
+<div>
+  <mdc-bullet
+    class="md-divider-dot-wrapper"
+    size="small"
+    style="color: pink;"
   />
-</DividerDot>
+</div>
 `;