feat(components): emptySelectorButton creation

components/src/atoms/buttons/EmptySelectorButton.stories.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react'
+import { Box } from '../../primitives'
+import { EmptySelectorButton as EmptySelectorButtonComponent } from './EmptySelectorButton'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof EmptySelectorButtonComponent> = {
+  title: 'Library/Atoms/Buttons/EmptySelectorButton',
+  component: EmptySelectorButtonComponent,
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+        options: ['large', 'small'],
+      },
+      defaultValue: 'large',
+    },
+    textAlignment: {
+      controls: {
+        type: 'select',
+        options: ['left', 'middle'],
+      },
+      defaultValue: 'left',
+    },
+  },
+  decorators: [
+    (Story, context) => (
+      <Box width="39.25rem" height="8.5rem">
+        <Story id="content" />
+      </Box>
+    ),
+  ],
+}
+export default meta
+
+type Story = StoryObj<typeof EmptySelectorButtonComponent>
+
+export const EmptySelectorButton: Story = {
+  args: {
+    text: 'mock text',
+    iconName: 'plus',
+    size: 'small',
+    textAlignment: 'left',
+    onClick: () => {},
+  },
+}

components/src/atoms/buttons/EmptySelectorButton.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react'
+import { Flex } from '../../primitives'
+import {
+  BORDERS,
+  COLORS,
+  Icon,
+  SPACING,
+  StyledText,
+  Btn,
+  JUSTIFY_CENTER,
+  JUSTIFY_START,
+  ALIGN_CENTER,
+  FLEX_MAX_CONTENT,
+} from '../..'
+import type { IconName } from '../..'
+
+interface EmptySelectorButtonProps {
+  onClick: () => void
+  text: string
+  size: 'large' | 'small'
+  textAlignment: 'left' | 'middle'
+  iconName?: IconName
+}
+
+//  used for helix and Opentrons Ai
+export function EmptySelectorButton(
+  props: EmptySelectorButtonProps
+): JSX.Element {
+  const { onClick, text, iconName, size, textAlignment } = props
+  const sizing = size === 'large' ? '100%' : FLEX_MAX_CONTENT
+
+  return (
+    <Btn onClick={onClick} width={sizing} height={sizing}>
+      <Flex
+        gridGap={SPACING.spacing4}
+        padding={SPACING.spacing12}
+        backgroundColor={COLORS.blue30}
+        borderRadius={BORDERS.borderRadius8}
+        border={`2px dashed ${COLORS.blue50}`}
+        width={sizing}
+        height={sizing}
+        alignItems={ALIGN_CENTER}
+        justifyContent={
+          textAlignment === 'middle' ? JUSTIFY_CENTER : JUSTIFY_START
+        }
+      >
+        {iconName != null ? (
+          <Icon
+            name={iconName}
+            height="1.25rem"
+            width="1.25rem"
+            data-testid={`EmptySelectorButton_${iconName}`}
+          />
+        ) : null}
+        <StyledText desktopStyle="bodyDefaultSemiBold">{text}</StyledText>
+      </Flex>
+    </Btn>
+  )
+}

components/src/atoms/buttons/__tests__/EmptySelectorButton.test.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react'
+import '@testing-library/jest-dom/vitest'
+import { fireEvent, screen } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { renderWithProviders } from '../../../testing/utils'
+import { EmptySelectorButton } from '../EmptySelectorButton'
+
+const render = (props: React.ComponentProps<typeof EmptySelectorButton>) => {
+  return renderWithProviders(<EmptySelectorButton {...props} />)[0]
+}
+
+describe('EmptySelectorButton', () => {
+  let props: React.ComponentProps<typeof EmptySelectorButton>
+  beforeEach(() => {
+    props = {
+      onClick: vi.fn(),
+      text: 'mock text',
+      iconName: 'add',
+      textAlignment: 'left',
+      size: 'large',
+    }
+  })
+  it('renders the props and button cta', () => {
+    render(props)
+    fireEvent.click(screen.getByText('mock text'))
+    expect(props.onClick).toHaveBeenCalled()
+    screen.getByTestId('EmptySelectorButton_add')
+  })
+})

components/src/atoms/buttons/index.ts

@@ -1,4 +1,5 @@
 export * from './AlertPrimaryButton'
+export * from './EmptySelectorButton'
 export * from './LargeButton'
 export * from './PrimaryButton'
 export * from './RadioButton'