@navinc/base-react-components/src/search-input.story.js

Nav's Pattern Library

import React from 'react'
import SearchInput from './search-input.js'
import readme from './search-input.readme.md'

const results = ['yoyo', 'brolo']

let value
const errors = []

function onChange(result) {
  value = result
}

function resultToQuery(result) {
  return result
}

const Result = ({ result }) => <div>{result}</div>

export default {
  title: 'Form Elements/SearchInput',
  component: SearchInput,
  parameters: {
    readme: { content: readme },
  },
}

export const Basic = (args) => <SearchInput {...args} />

Basic.args = {
  lede: 'Input lede',
  label: 'Input some text',
  type: 'text',
  value,
  placeholder: 'placeholder',
  required: false,
  isInvalid: errors,
  isLoading: false,
  disabled: false,
  errors: errors,
  results: results,
  resultToQuery: resultToQuery,
  Result: Result,
  search: () => {},
  onChange: onChange,
  shouldPositionResultsRelative: false,
}