@navinc/base-react-components/src/select-pill.js

Nav's Pattern Library

import React from 'react'
import styled from 'styled-components'
import { Chevron, Err, Errors, Field, FieldWrapper, Helper, Input } from './form-elements/shared.js'
import { moz } from './helpers/target-vendor.js'
import Copy from './copy'

const StyledFieldWrapper = styled(FieldWrapper)`
  & > ${Copy} {
    margin-left: 18px;
  }
`

const SelectField = styled(Input).attrs(() => ({ as: 'select' }))`
  width: 100%;
  appearance: none;
  color: inherit;
  cursor: pointer;
  border-radius: 20px;
  font-size: 16px;
  padding: 8px 16px;
  outline: 0;
  background: ${({ isInvalid, theme }) => (isInvalid ? theme.sebastianRed100 : theme.transparentWhite)};
  border: 2px solid ${({ isInvalid, theme }) => (isInvalid ? theme.sebastianRed200 : theme.bubbleBlue500)};

  ${({ disabled, theme }) =>
    disabled &&
    `
    color: ${theme.scuttleGray500};
    border-color: ${theme.scuttleGray200};
    background: ${theme.scuttleGray100};
    cursor: not-allowed
    `};

  &:focus {
    background: ${({ theme }) => theme.bubbleBlue100};
  }

  ${moz`
    // Selects in firefox have extra, unstylable, 3px of whitespace around the text.
    padding-left: 10px;

    // Focusable elements in firefox have a focus ring around sub-elements.
    &:-moz-focusring {
      color: transparent;
      text-shadow:0 0 0 ${({ theme }) => theme.neutral500};
    }
    &:-moz-focusring * {
      color: ${({ theme }) => theme.neutral500};
      text-shadow:none;
    }
  `}
`

const defaultValue = { label: '...', value: '' }

const SelectPill = ({
  className,
  disabled,
  errors = [],
  hasSpaceForErrors,
  helperText,
  isInvalid,
  label,
  onChange,
  options = [],
  required,
  value = defaultValue,
  ...props
}) => (
  <StyledFieldWrapper className={className}>
    {label && (
      <Copy light size="sm">
        {label}
      </Copy>
    )}
    <Field isInvalid={isInvalid} required={required}>
      <SelectField
        disabled={disabled}
        isInvalid={isInvalid}
        onChange={onChange}
        required={required}
        value={value}
        {...props}
      >
        {[defaultValue, ...options].map((option) => {
          const { label = option, value = option } = option
          return (
            <option key={`${label}:${value}`} value={value} hidden={!value}>
              {label}
            </option>
          )
        })}
      </SelectField>
      <Chevron name="actions/carrot-down" disabled={disabled} isInvalid={isInvalid} />
    </Field>
    {helperText && <Helper hasSpaceForHelper={hasSpaceForErrors} helperText={helperText} />}
    <Errors hasSpaceForErrors={hasSpaceForErrors}>
      {!!errors.length && errors.map((err, i) => <Err key={`err-${i}`}>{err}</Err>)}
    </Errors>
  </StyledFieldWrapper>
)

export default styled(SelectPill)``