Create 'Bullets' molecule

packages/store-ui/src/molecules/Bullets/Bullets.test.tsx

@@ -0,0 +1,71 @@
+import { render, act, fireEvent } from '@testing-library/react'
+import React from 'react'
+
+import Bullets from './Bullets'
+
+describe('Bullets', () => {
+  it('should have `data-store-bullets` attribute', () => {
+    const { getByTestId } = render(
+      <Bullets totalQuantity={5} activeBullet={2} onClick={() => {}} />
+    )
+
+    expect(getByTestId('store-bullets')).toHaveAttribute('data-store-bullets')
+  })
+
+  it('should render 5 bullets with `data-bullet-item` attribute', () => {
+    const { queryAllByTestId } = render(
+      <Bullets totalQuantity={5} activeBullet={2} onClick={() => {}} />
+    )
+
+    expect(queryAllByTestId('bullet-item')).toHaveLength(5)
+  })
+
+  it('should render only the currently active bullet with a `data-active` attribute', () => {
+    const { queryAllByTestId } = render(
+      <Bullets totalQuantity={5} activeBullet={2} onClick={() => {}} />
+    )
+
+    const bulletItems = queryAllByTestId('bullet-item')
+
+    // eslint-disable-next-line prefer-destructuring
+    const expectedActiveBullet = bulletItems[2]
+
+    expect(bulletItems).toHaveLength(5)
+    expect(expectedActiveBullet).toHaveAttribute('data-active')
+
+    // Remove the currently active bullet, at index 2
+    bulletItems.splice(2, 1)
+    // Validate that no other element has the 'data-active' attribute
+    bulletItems.forEach((bullet) => {
+      expect(bullet).not.toHaveAttribute('data-active')
+    })
+  })
+
+  it('should ensure that onClick is called with the correct bullet index', () => {
+    const updateCurrentBulletMock = jest.fn()
+
+    const { queryAllByTestId } = render(
+      <Bullets
+        totalQuantity={5}
+        activeBullet={2}
+        onClick={updateCurrentBulletMock}
+      />
+    )
+
+    const bulletItems = queryAllByTestId('bullet-item')
+
+    expect(bulletItems).toHaveLength(5)
+
+    // Each bullet is rendered with an <Button /> inside, and the button gets
+    // the onClick handler.
+    const bullets = queryAllByTestId('store-button')
+
+    act(() => {
+      // 'click' the bullet at index 3 (the 4th visible bullet)
+      fireEvent.click(bullets[3])
+    })
+
+    expect(updateCurrentBulletMock).toHaveBeenCalledTimes(1)
+    expect(updateCurrentBulletMock).toHaveBeenCalledWith(expect.any(Object), 3)
+  })
+})

packages/store-ui/src/molecules/Bullets/Bullets.tsx

@@ -0,0 +1,79 @@
+import type { MouseEvent } from 'react'
+import React, { useMemo } from 'react'
+
+import Button from '../../atoms/Button'
+
+export interface BulletsProps {
+  /**
+   * Number of bullets that should be rendered.
+   */
+  totalQuantity: number
+  /**
+   * The currently active bullet (zero-indexed).
+   */
+  activeBullet: number
+  /**
+   * Event handler for clicks on each bullet. The handler will be called with
+   * the index of the bullet that received the click.
+   */
+  onClick: (e: MouseEvent, bulletIdx: number) => void
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+  /**
+   * ID to find each `<li>` rendered by this component in testing tools
+   * (e.g.: cypress, testing-library, and jest).
+   */
+  listItemTestId?: string
+  /**
+   * Function that should be used to generate the aria-label attribute added
+   * to each bullet that is inactive. It receives the bullet index as an
+   * argument so that it can be interpolated in the generated string.
+   */
+  ariaLabelGenerator?: (index: number) => string
+  /**
+   * aria-label attribute to be added to the currently active bullet.
+   */
+  activeAriaLabel?: string
+}
+
+function Bullets({
+  totalQuantity,
+  activeBullet,
+  onClick,
+  testId = 'store-bullets',
+  listItemTestId = 'bullet-item',
+  ariaLabelGenerator = (idx: number) => `Go to page ${idx + 1}`,
+  activeAriaLabel = 'Current page',
+}: BulletsProps) {
+  const bulletIndexes = useMemo(() => [...new Array(totalQuantity).keys()], [
+    totalQuantity,
+  ])
+
+  return (
+    <ol data-store-bullets data-testid={testId}>
+      {bulletIndexes.map((idx) => {
+        const isActive = activeBullet === idx
+        const ariaLabel = ariaLabelGenerator(idx)
+
+        return (
+          <li
+            key={idx}
+            data-testid={listItemTestId}
+            data-bullet-item
+            data-active={isActive || undefined}
+          >
+            <Button
+              aria-label={isActive ? activeAriaLabel : ariaLabel}
+              onClick={(e) => onClick(e, idx)}
+            />
+          </li>
+        )
+      })}
+    </ol>
+  )
+}
+
+export default Bullets

packages/store-ui/src/molecules/Bullets/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Bullets'
+export * from './Bullets'

packages/store-ui/src/molecules/Bullets/stories/Bullets.mdx

@@ -0,0 +1,13 @@
+import { Preview, Props, Story, ArgsTable } from '@storybook/addon-docs/blocks'
+
+import Bullets from '../Bullets'
+
+# Default
+
+<Preview>
+  <Story id="molecules-bullets--bullets" />
+</Preview>
+
+# Props
+
+<ArgsTable of={Bullets} />

packages/store-ui/src/molecules/Bullets/stories/Bullets.stories.tsx

@@ -0,0 +1,39 @@
+import type { Story } from '@storybook/react'
+import React, { Fragment } from 'react'
+
+import type { BulletsProps } from '../Bullets'
+import Component from '../Bullets'
+import mdx from './Bullets.mdx'
+
+const BulletsTemplate: Story<BulletsProps> = (args) => {
+  return (
+    <Fragment>
+      <Component {...args} />
+    </Fragment>
+  )
+}
+
+export const Bullets = BulletsTemplate.bind({})
+Bullets.args = {
+  totalQuantity: 5,
+  activeBullet: 3,
+}
+
+export default {
+  title: 'Molecules/Bullets',
+  component: Bullets,
+  argTypes: {
+    totalQuantity: {
+      control: 'number',
+      defaultValue: 5,
+    },
+    onClick: {
+      action: 'Bullet clicked',
+    },
+  },
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+}

packages/store-ui/src/typings/mdx.d.ts

@@ -0,0 +1,4 @@
+declare module '*.mdx' {
+  const MDXComponent: (props) => JSX.Element
+  export default MDXComponent
+}