chore: add a SearchForm component

1 files changed, 57 insertions, 0 deletions

diff --git a/src/components/organisms/forms/search-form.tsx b/src/components/organisms/forms/search-form.tsx
new file mode 100644
index 0000000..351d93c
--- /dev/null
+++ b/src/components/organisms/forms/search-form.tsx
@@ -0,0 +1,57 @@
+import Button from '@components/atoms/buttons/button';
+import Form from '@components/atoms/forms/form';
+import MagnifyingGlass from '@components/atoms/icons/magnifying-glass';
+import LabelledField, {
+  LabelledFieldProps,
+} from '@components/molecules/forms/labelled-field';
+import { useState, VFC } from 'react';
+import { useIntl } from 'react-intl';
+import styles from './search-form.module.scss';
+
+export type SearchFormProps = Pick<LabelledFieldProps, 'hideLabel'>;
+
+const SearchForm: VFC<SearchFormProps> = ({ hideLabel }) => {
+  const intl = useIntl();
+  const fieldLabel = intl.formatMessage({
+    defaultMessage: 'Search for:',
+    description: 'SearchForm: field accessible label',
+    id: 'X8oujO',
+  });
+  const buttonLabel = intl.formatMessage({
+    defaultMessage: 'Search',
+    description: 'SearchForm: button accessible name',
+    id: 'WMqQrv',
+  });
+
+  const [value, setValue] = useState<string>('');
+
+  const submitHandler = () => {
+    return;
+  };
+
+  return (
+    <Form grouped={false} onSubmit={submitHandler} className={styles.wrapper}>
+      <LabelledField
+        type="search"
+        id="search-form"
+        name="search-form"
+        label={fieldLabel}
+        value={value}
+        setValue={setValue}
+        hideLabel={hideLabel}
+        className={styles.field}
+      />
+      <Button
+        type="submit"
+        kind="neutral"
+        shape="initial"
+        className={styles.btn}
+        aria-label={buttonLabel}
+      >
+        <MagnifyingGlass className={styles.btn__icon} />
+      </Button>
+    </Form>
+  );
+};
+
+export default SearchForm;