Create 'Bullets' molecule

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

@@ -0,0 +1,36 @@
+import type { Meta, Story } from '@storybook/react'
+import type { MouseEvent } from 'react'
+import React, { useState, Fragment } from 'react'
+
+import type { BulletsProps } from './Bullets'
+import Bullets from './Bullets'
+
+export default {
+  title: 'Atoms/Bullets',
+} as Meta
+
+const BulletsTemplate: Story<BulletsProps> = (args) => {
+  const [activeBullet, setActiveBullet] = useState(3)
+
+  const handleClick = (_: MouseEvent, idx: number) => {
+    setActiveBullet(idx)
+  }
+
+  return (
+    <Fragment>
+      <Bullets
+        activeBullet={activeBullet}
+        totalQuantity={args.totalQuantity}
+        onClick={handleClick}
+      />
+      <p>{`The currently active bullet is ${
+        activeBullet + 1
+      } (index ${activeBullet})`}</p>
+    </Fragment>
+  )
+}
+
+export const Default = BulletsTemplate.bind({})
+Default.args = {
+  totalQuantity: 5,
+}

packages/store-ui/src/atoms/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/atoms/Bullets/Bullets.tsx

@@ -0,0 +1,44 @@
+import type { MouseEvent } from 'react'
+import React from 'react'
+
+import Button from '../Button'
+
+export interface BulletsProps {
+  totalQuantity: number
+  activeBullet: number
+  onClick: (e: MouseEvent, bulletIdx: number) => void
+  testId?: string
+}
+
+function Bullets({
+  totalQuantity,
+  activeBullet,
+  onClick,
+  testId = 'store-bullets',
+}: BulletsProps) {
+  const bulletIndexes = [...new Array(totalQuantity).keys()]
+
+  return (
+    <ol data-store-bullets data-testid={testId}>
+      {bulletIndexes.map((idx) => {
+        const isActive = activeBullet === idx
+
+        return (
+          <li
+            key={idx}
+            data-testid="bullet-item"
+            data-bullet-item
+            data-active={isActive || undefined}
+          >
+            <Button
+              aria-label={isActive ? 'Current page' : `Go to page ${idx + 1}`}
+              onClick={(e) => onClick(e, idx)}
+            />
+          </li>
+        )
+      })}
+    </ol>
+  )
+}
+
+export default Bullets

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

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