Search

const PreviewEn = () => {
  return (
    <Search>
      <Search.Input aria-label='Søk' />
      <Search.Clear />
      <Button>Search</Button>
    </Search>
  );
};

render(<PreviewEn />)

const VariantsEn = () => {
  return (
    <>
      <Search>
        <Search.Input aria-label='Søk' />
        <Search.Clear />
      </Search>

      <Divider style={{ marginTop: 'var(--ds-size-4)' }} />

      <Search>
        <Search.Input aria-label='Søk' />
        <Search.Clear />
        <Button>Search</Button>
      </Search>

      <Divider style={{ marginTop: 'var(--ds-size-4)' }} />

      <Search>
        <Search.Input aria-label='Søk' />
        <Search.Clear />
        <Button variant='secondary'>Search</Button>
      </Search>
    </>
  );
};

render(<VariantsEn />)

const WithLabelEn = () => {
  return (
    <Field>
      <Label>Search for cats</Label>
      <Search>
        <Search.Input name='cat-search' />
        <Search.Clear />
        <Button>Search</Button>
      </Search>
    </Field>
  );
};

render(<WithLabelEn />)

const Form = () => {
  const [value, setValue] = useState<string>();
  const [submittedValue, setSubmittedValue] = useState<string>();

  return (
    <>
      <form
        onSubmit={(e) => {
          // Prevent navigation from Storybook
          e.preventDefault();
          setSubmittedValue(value);
        }}
      >
        <Search>
          <Search.Input
            aria-label='Søk'
            value={value}
            onChange={(e) => setValue(e.target.value)}
          />
          <Search.Clear />
          <Search.Button />
        </Search>
      </form>

      <Paragraph data-size='md' style={{ marginTop: 'var(--ds-size-2)' }}>
        Submitted value: {submittedValue}
      </Paragraph>
    </>
  );
};

render(<Form />)