chore: add a Search component

4 files changed, 151 insertions, 0 deletions

diff --git a/src/components/organisms/toolbar/search.module.scss b/src/components/organisms/toolbar/search.module.scss
new file mode 100644
index 0000000..c310594
--- /dev/null
+++ b/src/components/organisms/toolbar/search.module.scss
@@ -0,0 +1,3 @@
+.modal {
+  padding-bottom: var(--spacing-md);
+}
diff --git a/src/components/organisms/toolbar/search.stories.tsx b/src/components/organisms/toolbar/search.stories.tsx
new file mode 100644
index 0000000..8c2e871
--- /dev/null
+++ b/src/components/organisms/toolbar/search.stories.tsx
@@ -0,0 +1,63 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { useState } from 'react';
+import { IntlProvider } from 'react-intl';
+import SearchComponent from './search';
+
+export default {
+  title: 'Organisms/Toolbar',
+  component: SearchComponent,
+  argTypes: {
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the modal wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    isActive: {
+      control: {
+        type: null,
+      },
+      description: 'Define the modal state: either opened or closed.',
+      type: {
+        name: 'boolean',
+        required: true,
+      },
+    },
+    setIsActive: {
+      control: {
+        type: null,
+      },
+      description: 'A callback function to update modal state.',
+      type: {
+        name: 'function',
+        required: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof SearchComponent>;
+
+const Template: ComponentStory<typeof SearchComponent> = ({
+  isActive,
+  setIsActive: _setIsActive,
+  ...args
+}) => {
+  const [isOpen, setIsOpen] = useState<boolean>(isActive);
+
+  return (
+    <IntlProvider locale="en">
+      <SearchComponent isActive={isOpen} setIsActive={setIsOpen} {...args} />
+    </IntlProvider>
+  );
+};
+
+export const Search = Template.bind({});
+Search.args = {
+  isActive: false,
+};
diff --git a/src/components/organisms/toolbar/search.test.tsx b/src/components/organisms/toolbar/search.test.tsx
new file mode 100644
index 0000000..0ce09d8
--- /dev/null
+++ b/src/components/organisms/toolbar/search.test.tsx
@@ -0,0 +1,19 @@
+import { render, screen } from '@test-utils';
+import Search from './search';
+
+describe('Search', () => {
+  it('renders a button to open search modal', () => {
+    render(<Search isActive={false} setIsActive={() => null} />);
+    expect(screen.getByRole('checkbox')).toHaveAccessibleName('Open search');
+  });
+
+  it('renders a button to close search modal', () => {
+    render(<Search isActive={true} setIsActive={() => null} />);
+    expect(screen.getByRole('checkbox')).toHaveAccessibleName('Close search');
+  });
+
+  it('renders a search form', () => {
+    render(<Search isActive={true} setIsActive={() => null} />);
+    expect(screen.getByRole('searchbox')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/organisms/toolbar/search.tsx b/src/components/organisms/toolbar/search.tsx
new file mode 100644
index 0000000..070bce0
--- /dev/null
+++ b/src/components/organisms/toolbar/search.tsx
@@ -0,0 +1,66 @@
+import Checkbox, { CheckboxProps } from '@components/atoms/forms/checkbox';
+import Label from '@components/atoms/forms/label';
+import MagnifyingGlass from '@components/atoms/icons/magnifying-glass';
+import { VFC } from 'react';
+import { useIntl } from 'react-intl';
+import SearchModal from '../modals/search-modal';
+import sharedStyles from './toolbar-items.module.scss';
+import searchStyles from './search.module.scss';
+
+export type SearchProps = {
+  /**
+   * Set additional classnames to the modal wrapper.
+   */
+  className?: string;
+  /**
+   * The button state.
+   */
+  isActive: CheckboxProps['value'];
+  /**
+   * A callback function to handle button state.
+   */
+  setIsActive: CheckboxProps['setValue'];
+};
+
+const Search: VFC<SearchProps> = ({
+  className = '',
+  isActive,
+  setIsActive,
+}) => {
+  const intl = useIntl();
+  const label = isActive
+    ? intl.formatMessage({
+        defaultMessage: 'Close search',
+        id: 'LDDUNO',
+        description: 'Search: Close label',
+      })
+    : intl.formatMessage({
+        defaultMessage: 'Open search',
+        id: 'Xj+WXB',
+        description: 'Search: Open label',
+      });
+
+  return (
+    <div className={`${sharedStyles.item} ${searchStyles.item}`}>
+      <Checkbox
+        id="search-button"
+        name="search-button"
+        value={isActive}
+        setValue={setIsActive}
+        className={`${sharedStyles.checkbox} ${searchStyles.checkbox}`}
+      />
+      <Label
+        htmlFor="search-button"
+        aria-label={label}
+        className={`${sharedStyles.label} ${searchStyles.label}`}
+      >
+        <MagnifyingGlass />
+      </Label>
+      <SearchModal
+        className={`${sharedStyles.modal} ${searchStyles.modal} ${className}`}
+      />
+    </div>
+  );
+};
+
+export default Search;