Select Input react component

src/SelectInput/SelectInput.stories.tsx

@@ -0,0 +1,55 @@
+import React, {useState} from 'react'
+import {Meta} from '@storybook/react'
+
+import {BaseStyles, Box, ThemeProvider} from '..'
+import {SelectInput, SelectInputProps} from '.'
+
+export default {
+  title: 'Forms/Select Input',
+  component: SelectInput,
+  decorators: [
+    Story => {
+      return (
+        <ThemeProvider>
+          <BaseStyles>
+            <Box paddingTop={5}>{Story()}</Box>
+          </BaseStyles>
+        </ThemeProvider>
+      )
+    }
+  ],
+  argTypes: {
+    disabled: {
+      name: 'Disabled',
+      defaultValue: false,
+      control: {
+        type: 'boolean'
+      }
+    },
+    size: {
+      name: 'Sizes',
+      options: ['small', 'medium', 'large'],
+      control: {type: 'radio'}
+    }
+  }
+} as Meta
+
+export const Default = ({...args}: SelectInputProps) => {
+  const [selectedValue, setSelected] = useState<string | undefined>(undefined)
+  const handleChange = () => {
+    setSelected(selectedValue)
+  }
+
+  return (
+    <>
+      <Box as="form" p={3} sx={{display: 'flex', alignItems: 'flex-start'}}>
+        <SelectInput selectedValue={selectedValue} onSelect={handleChange} {...args}>
+          <SelectInput.Option value="">Choose your option</SelectInput.Option>
+          <SelectInput.Option value="1">1</SelectInput.Option>
+          <SelectInput.Option value="2">2</SelectInput.Option>
+          <SelectInput.Option value="3">3</SelectInput.Option>
+        </SelectInput>
+      </Box>
+    </>
+  )
+}

src/SelectInput/SelectInput.tsx

@@ -0,0 +1,46 @@
+import React, {HTMLAttributes, ComponentPropsWithRef} from 'react'
+import styled from 'styled-components'
+import TextInputWrapper from '../_TextInputWrapper'
+import UnstyledSelectInput from './_UnstyledSelectInput'
+import {SxProp} from '../sx'
+import {TriangleDownIcon, TriangleUpIcon} from '@primer/octicons-react'
+
+const SelectCaret = styled.span`
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+`
+
+export type SelectInputProps = {
+  disabled?: boolean
+  selectedValue?: string | undefined
+  children: React.ReactNode
+  size?: 'small' | 'large'
+} & SxProp &
+  HTMLAttributes<HTMLButtonElement> &
+  ComponentPropsWithRef<typeof UnstyledSelectInput>
+
+type OptionProps = {children: string; value: string | undefined}
+
+const OptionComponent = (props: OptionProps) => {
+  return <option>{props.children}</option>
+}
+
+const SelectInputComponent = React.forwardRef<HTMLSelectElement, SelectInputProps>(
+  ({sx, size, selectedValue, children, ...props}: SelectInputProps, ref) => {
+    return (
+      <TextInputWrapper disabled={props.disabled} sx={sx} variant={size}>
+        <UnstyledSelectInput ref={ref} value={selectedValue} {...props}>
+          {children}
+        </UnstyledSelectInput>
+        <SelectCaret>
+          <TriangleUpIcon />
+          <TriangleDownIcon />
+        </SelectCaret>
+      </TextInputWrapper>
+    )
+  }
+)
+
+const SelectInput = Object.assign(SelectInputComponent, {Option: OptionComponent})
+
+export {SelectInput}

src/SelectInput/_UnstyledSelectInput.tsx

@@ -0,0 +1,19 @@
+import styled from 'styled-components'
+import sx from '../sx'
+
+const UnstyledSelectInput = styled.select`
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  &:focus {
+    outline: 0;
+  }
+
+  ${sx};
+`
+
+export default UnstyledSelectInput

src/SelectInput/index.ts

@@ -0,0 +1 @@
+export {SelectInput, SelectInputProps} from './SelectInput'