Loading Button molecule

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

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+
+import LoadingButton from './LoadingButton'
+
+describe('Loading Button', () => {
+  it('`data-store-loading-button` is present', () => {
+    const { getByTestId } = render(<LoadingButton loading />)
+
+    expect(getByTestId('store-loading-button')).toHaveAttribute(
+      'data-store-loading-button'
+    )
+  })
+})

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

@@ -0,0 +1,31 @@
+import React, { forwardRef } from 'react'
+
+import Button from '../../atoms/Button'
+import type { ButtonProps } from '../../atoms/Button'
+import Spinner from '../../atoms/Spinner'
+
+export interface LoadingButtonProps extends ButtonProps {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * The current loading state of the button.
+   */
+  loading: boolean
+}
+
+const LoadingButton = forwardRef<HTMLButtonElement, LoadingButtonProps>(
+  function LoadingButton(
+    { children, loading = false, testId = 'store-loading-button', ...props },
+    ref
+  ) {
+    return (
+      <Button ref={ref} data-store-loading-button testId={testId} {...props}>
+        {loading ? <Spinner /> : children}
+      </Button>
+    )
+  }
+)
+
+export default LoadingButton

packages/store-ui/src/molecules/LoadingButton/index.tsx

@@ -0,0 +1,2 @@
+export { default } from './LoadingButton'
+export type { LoadingButtonProps } from './LoadingButton'

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

@@ -0,0 +1,18 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
+import LoadingButton from '../LoadingButton'
+
+# Loading Button
+
+<Canvas>
+  <Story id="molecules-loadingbutton--loadingbutton" />
+</Canvas>
+
+## Props
+
+<ArgsTable of={LoadingButton} />
+
+## CSS Selectors
+
+```css
+[data-store-loading-button] {}
+```

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

@@ -0,0 +1,35 @@
+import type { Story } from '@storybook/react'
+import React from 'react'
+
+import type { ComponentArgTypes } from '../../../typings/utils'
+import type { LoadingButtonProps } from '../LoadingButton'
+import Component from '../LoadingButton'
+import mdx from './LoadingButton.mdx'
+
+const LoadingButtonTemplate: Story<LoadingButtonProps> = ({
+  loading,
+  testId,
+}) => (
+  <Component loading={loading} testId={testId}>
+    Loading Button
+  </Component>
+)
+
+export const LoadingButton = LoadingButtonTemplate.bind({})
+
+const argTypes: ComponentArgTypes<LoadingButtonProps> = {
+  loading: {
+    type: 'boolean',
+    defaultValue: false,
+  },
+}
+
+export default {
+  title: 'Molecules/LoadingButton',
+  argTypes,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+}

themes/theme-b2c-tailwind/src/molecules/index.css

@@ -1,5 +1,6 @@
 @import "./bullets.css";
-@import "./search-input.css";
+@import "./carousel.css";
 @import "./icon-button.css";
+@import "./loading-button.css";
 @import './price-range.css';
-@import "./carousel.css";
+@import "./search-input.css";

themes/theme-b2c-tailwind/src/molecules/loading-button.css

@@ -0,0 +1,10 @@
+[data-store-loading-button] {
+  @apply h-11 w-60 items-center justify-center flex;
+}
+
+[data-store-loading-button] [data-store-spinner] {
+  border-top: 0.2em solid rgba(255, 255, 255, 0.2);
+  border-right: 0.2em solid rgba(255, 255, 255, 0.2);
+  border-bottom: 0.2em solid rgba(255, 255, 255, 0.2);
+  border-left: 0.2em solid #ffffff;
+}