fix: Add API to Dropdown Item for Dividers and Icons (#166)

* simpler dropdown item

* fixed prop typing for dropdown item

* icon rendering

* with an icon

* icon prop

* divider tests

* divider

src/components/dropdown/item/DropdownItem.test.tsx

@@ -1,6 +1,7 @@
 import { screen, render } from "@testing-library/react";
 import { DropdownItem } from "./DropdownItem";
 import user from "@testing-library/user-event";
+import { IconProps } from "../..";
 
 it("renders given text", () => {
   const text = "Dropdown Item";
@@ -29,3 +30,29 @@ it("can bind to click event", () => {
   user.click(screen.getByRole("button"));
   expect(onClick).toHaveBeenCalled();
 });
+
+it("can be rendered with an icon", () => {
+  const iconMessage = "Icon Message";
+  const icon: IconProps = {
+    name: "home",
+    message: iconMessage,
+  };
+  render(<DropdownItem icon={icon}>Dropdown Item</DropdownItem>);
+  const foundIconMessage = screen.getByText(iconMessage);
+  expect(foundIconMessage).toBeInTheDocument();
+});
+
+it("can be rendered with a divider", () => {
+  render(<DropdownItem divider>Dropdown Item</DropdownItem>);
+  expect(screen.getByRole("separator")).toBeInTheDocument();
+});
+
+it("can be rendered without a divider explicitly", () => {
+  render(<DropdownItem divider={false}>Dropdown Item</DropdownItem>);
+  expect(screen.queryByRole("separator")).toBeNull();
+});
+
+it("is rendered without a divider by default", () => {
+  render(<DropdownItem>Dropdown Item</DropdownItem>);
+  expect(screen.queryByRole("separator")).toBeNull();
+});

src/components/dropdown/item/DropdownItem.tsx

@@ -1,21 +1,41 @@
 import { PropsWithChildren } from "react";
-import { Button } from "../..";
+import { Button, IconButton, IconButtonProps } from "../..";
+import { IconProps } from "../../icon";
 
-export type DropdownItemProps = PropsWithChildren<{
-  active?: boolean;
-  onClick?: () => void;
-}>;
+export type DropdownItemProps = Omit<IconButtonProps, "icon"> &
+  PropsWithChildren<{
+    active?: boolean;
+    icon?: IconProps;
+    divider?: boolean;
+  }>;
+
+const className = "dropdown-item";
+
+const DropdownDivider = () => <hr className="dropdown-divider" />;
 
 export const DropdownItem = ({
-  children,
   active,
-  onClick,
+  divider,
+  ...buttonProps
 }: DropdownItemProps): JSX.Element => {
   const color = active ? "link" : "white";
 
+  const props: DropdownItemProps = {
+    ...buttonProps,
+    className,
+    color,
+  };
+
+  const dropdownItemButton = props.icon ? (
+    <IconButton icon={props.icon} {...props} />
+  ) : (
+    <Button {...props} />
+  );
+
   return (
-    <Button color={color} className="dropdown-item" onClick={onClick}>
-      {children}
-    </Button>
+    <>
+      {divider && <DropdownDivider />}
+      {dropdownItemButton}
+    </>
   );
 };

src/stories/Dropdown.stories.tsx

@@ -50,12 +50,15 @@ const DumbDropdownTemplate: Story<DropdownProps> = (args) => {
       >
         Dropdown button
       </DropdownTrigger>
-      <DropdownMenu id="dropdown-menu">
+      <DropdownMenu active={args.active || false} id="dropdown-menu">
         <DropdownContent>
           <DropdownItem>Dropdown Item</DropdownItem>
           <DropdownItem>Other dropdown item</DropdownItem>
           <DropdownItem active>Active dropdown item</DropdownItem>
-          <DropdownItem>With a divider</DropdownItem>
+          <DropdownItem icon={{ name: "home", direction: "left" }}>
+            With an icon
+          </DropdownItem>
+          <DropdownItem divider>With a divider</DropdownItem>
         </DropdownContent>
       </DropdownMenu>
     </Dropdown>
@@ -75,7 +78,10 @@ const SmartDropdownTemplate: Story<SmartDropdownProps> = (args) => {
           <DropdownItem>Dropdown Item</DropdownItem>
           <DropdownItem>Other dropdown item</DropdownItem>
           <DropdownItem active>Active dropdown item</DropdownItem>
-          <DropdownItem>With a divider</DropdownItem>
+          <DropdownItem divider>With a divider</DropdownItem>
+          <DropdownItem icon={{ name: "home", direction: "left" }}>
+            With an icon
+          </DropdownItem>
         </Fragment>
       }
     />