feat: created dropdown component (#139)

* feat: created dropdown component

* chore: resolved comments from pr

* chore: changed none to unset for max width

---------

Co-authored-by: Dawn Carrasco <[email protected]>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govconnex/ui",
-  "version": "0.0.176",
+  "version": "0.0.178",
   "description": "GovConnex UI - React Component Library",
   "scripts": {
     "build:tokens": "./tokens-build.sh",

src/components/Dropdown/ComponentSummary.mdx

@@ -0,0 +1,4 @@
+The Dropdown component is a customizable selection input that displays a list of options for users to choose from. It supports multiple selections, search functionality, and clear selection, providing an intuitive user experience. Features include contextual labels, placeholder text, and the ability to select or clear multiple options. This component is ideal for form inputs and advanced filter sections, enhancing the ease and efficiency of filtering and selection tasks.
+
+##Figma Link
+No figma link

src/components/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,135 @@
+import React from "react";
+import {ComponentStory, ComponentMeta} from "@storybook/react";
+import Dropdown from "./Dropdown";
+import {withDesign} from "storybook-addon-designs";
+import ComponentSummary from "./ComponentSummary.mdx";
+import ReactDOMServer from "react-dom/server";
+import Box from "../Box";
+import SvgIcon from "../SvgIcon";
+import {faCheckCircle} from "@fortawesome/pro-solid-svg-icons";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Components/Dropdown",
+  component: Dropdown,
+  decorators: [withDesign],
+  parameters: {
+    docs: {
+      description: {
+        component: ReactDOMServer.renderToString(<ComponentSummary />),
+      },
+    },
+  },
+} as ComponentMeta<typeof Dropdown>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof Dropdown> = (args) => (
+  <Box cs={{width: "300px"}}>
+    <Dropdown {...args} />
+  </Box>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Select Option",
+  placeholder: "Choose an option",
+  options: [
+    {id: "1", text: "Option 1", selected: true},
+    {id: "2", text: "Option 2"},
+    {id: "3", text: "Option 3"},
+  ],
+  "data-testid": "dropdown",
+  "data-cy": "dropdown",
+};
+
+export const WithSelectedOption = Template.bind({});
+WithSelectedOption.args = {
+  ...Default.args,
+  defaultValue: "1",
+  maxWidth: "40%",
+};
+
+export const MultipleSelect = Template.bind({});
+MultipleSelect.args = {
+  ...Default.args,
+  multipleSelect: true,
+  selectedIndicator: <SvgIcon icon={faCheckCircle} />,
+};
+
+export const WithChipSelect = Template.bind({});
+WithChipSelect.args = {
+  ...Default.args,
+  multipleSelect: true,
+  selectedIndicator: <SvgIcon icon={faCheckCircle} />,
+  hasSelectedCount: true,
+};
+
+export const AllSelected = Template.bind({});
+AllSelected.args = {
+  label: "All Selected Option",
+  placeholder: "Choose an option",
+  options: [
+    {id: "1", text: "Option 1", selected: true},
+    {id: "2", text: "Option 2", selected: true},
+    {id: "3", text: "Option 3", selected: true},
+  ],
+  "data-testid": "dropdown",
+  "data-cy": "dropdown",
+  multipleSelect: true,
+  selectedIndicator: <SvgIcon icon={faCheckCircle} />,
+  hasSelectedCount: true,
+};
+
+export const WithCategory = Template.bind({});
+WithCategory.args = {
+  label: "Selected Option",
+  placeholder: "Choose an option",
+  options: [
+    {id: "1", text: "Option 1", category: "a"},
+    {id: "2", text: "Option 2", selected: true, category: "a"},
+    {id: "3", text: "Option 3", selected: true, category: "b"},
+  ],
+  "data-testid": "dropdown",
+  "data-cy": "dropdown",
+  multipleSelect: true,
+  selectedIndicator: <SvgIcon icon={faCheckCircle} />,
+  hasSelectedCount: true,
+};
+
+export const WithLoadingState = Template.bind({});
+WithLoadingState.args = {
+  ...Default.args,
+  loading: true,
+  loadingIndicator: <div>Loading...</div>,
+};
+
+export const WithSearch = Template.bind({});
+WithSearch.args = {
+  ...Default.args,
+  hasSearch: true,
+};
+
+export const WithClearSelection = Template.bind({});
+WithClearSelection.args = {
+  ...Default.args,
+  hasClearSelection: true,
+  onClearSelection: () => {
+    console.log("cleared");
+  },
+};
+
+export const WithCustomEndAdornment = Template.bind({});
+WithCustomEndAdornment.args = {
+  ...Default.args,
+  options: [
+    {id: "1", text: "Option 1", endAdornment: <SvgIcon icon={faCheckCircle} />},
+    {id: "2", text: "Option 2", endAdornment: <SvgIcon icon={faCheckCircle} />},
+    {id: "3", text: "Option 3", endAdornment: <SvgIcon icon={faCheckCircle} />},
+  ],
+};
+
+export const WithError = Template.bind({});
+WithError.args = {
+  ...Default.args,
+  error: "An error occurred",
+};

src/components/Dropdown/Dropdown.styles.ts

@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+const StyledDropdown = styled.div``;
+
+export default StyledDropdown;

src/components/Dropdown/Dropdown.test.tsx

@@ -0,0 +1,110 @@
+import React from "react";
+import {render, fireEvent, waitFor} from "../test-utils";
+import Dropdown from "./Dropdown";
+
+describe("Dropdown Component", () => {
+  const options = [
+    {id: "1", text: "Option 1", selected: false, category: "Category 1"},
+    {id: "2", text: "Option 2", selected: true, category: "Category 1"},
+    {id: "3", text: "Option 3", selected: false, category: "Category 2"},
+  ];
+
+  it("renders the Dropdown component with the label and placeholder", () => {
+    const {getByText, getByPlaceholderText} = render(
+      <Dropdown label="Dropdown Label" placeholder="Select an option" options={options} />
+    );
+    const label = getByText("Dropdown Label");
+    const placeholder = getByPlaceholderText("Select an option");
+
+    expect(label).toBeInTheDocument();
+    expect(placeholder).toBeInTheDocument();
+  });
+
+  it("opens the dropdown when the input is clicked", async () => {
+    const {getByText, getByRole} = render(
+      <Dropdown label="Dropdown" options={options} />
+    );
+    const input = getByRole("textbox");
+
+    fireEvent.click(input);
+
+    await waitFor(() => {
+      expect(getByText("Option 1")).toBeInTheDocument();
+      expect(getByText("Option 2")).toBeInTheDocument();
+    });
+  });
+
+  it("selects an option and triggers onChange callback", async () => {
+    const onChange = jest.fn();
+    const {getByRole, getByText} = render(
+      <Dropdown label="Dropdown" options={options} onChange={onChange} />
+    );
+    const input = getByRole("textbox");
+
+    fireEvent.click(input);
+    const option1 = getByText("Option 1");
+    fireEvent.click(option1);
+
+    expect(onChange).toHaveBeenCalledWith("1", false);
+  });
+
+  it("closes the dropdown on option selection if not multipleSelect", async () => {
+    const {getByRole, getByText, queryByText} = render(
+      <Dropdown label="Dropdown" options={options} />
+    );
+    const input = getByRole("textbox");
+
+    fireEvent.click(input);
+    const option1 = getByText("Option 1");
+    fireEvent.click(option1);
+
+    await waitFor(() => {
+      expect(queryByText("Option 1")).not.toBeInTheDocument();
+    });
+  });
+
+  it("renders search input when hasSearch is true", () => {
+    const {getByRole} = render(<Dropdown label="Dropdown" options={options} hasSearch />);
+    const input = getByRole("textbox");
+    fireEvent.click(input);
+
+    const searchInput = getByRole("searchbox");
+    expect(searchInput).toBeInTheDocument();
+  });
+
+  it("renders clear selection button when hasClearSelection is true", async () => {
+    const onClearSelection = jest.fn();
+    const {getByRole, getByText} = render(
+      <Dropdown
+        label="Dropdown"
+        options={options}
+        hasClearSelection
+        onClearSelection={onClearSelection}
+      />
+    );
+    const input = getByRole("textbox");
+    fireEvent.click(input);
+
+    const clearButton = getByText("Clear Selection");
+    fireEvent.click(clearButton);
+
+    expect(onClearSelection).toHaveBeenCalledTimes(1);
+  });
+
+  it("shows loading spinner when loading is true", async () => {
+    const {getByText, getByRole} = render(
+      <Dropdown
+        label="Dropdown"
+        options={options}
+        loading
+        loadingIndicator="inline-loading"
+      />
+    );
+    const input = getByRole("textbox");
+    fireEvent.click(input);
+
+    await waitFor(() => {
+      expect(getByText("inline-loading")).toBeInTheDocument();
+    });
+  });
+});