diff --git a/src/components/dropdown/item/DropdownItem.test.tsx b/src/components/dropdown/item/DropdownItem.test.tsx
index 8628b781..a0dfd13c 100644
--- a/src/components/dropdown/item/DropdownItem.test.tsx
+++ b/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(Dropdown Item);
+ const foundIconMessage = screen.getByText(iconMessage);
+ expect(foundIconMessage).toBeInTheDocument();
+});
+
+it("can be rendered with a divider", () => {
+ render(Dropdown Item);
+ expect(screen.getByRole("separator")).toBeInTheDocument();
+});
+
+it("can be rendered without a divider explicitly", () => {
+ render(Dropdown Item);
+ expect(screen.queryByRole("separator")).toBeNull();
+});
+
+it("is rendered without a divider by default", () => {
+ render(Dropdown Item);
+ expect(screen.queryByRole("separator")).toBeNull();
+});
diff --git a/src/components/dropdown/item/DropdownItem.tsx b/src/components/dropdown/item/DropdownItem.tsx
index e24dcef7..c8ca776a 100644
--- a/src/components/dropdown/item/DropdownItem.tsx
+++ b/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 &
+ PropsWithChildren<{
+ active?: boolean;
+ icon?: IconProps;
+ divider?: boolean;
+ }>;
+
+const className = "dropdown-item";
+
+const DropdownDivider = () =>
;
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 ? (
+
+ ) : (
+
+ );
+
return (
-
+ <>
+ {divider && }
+ {dropdownItemButton}
+ >
);
};
diff --git a/src/stories/Dropdown.stories.tsx b/src/stories/Dropdown.stories.tsx
index 6b942269..a0396ff5 100644
--- a/src/stories/Dropdown.stories.tsx
+++ b/src/stories/Dropdown.stories.tsx
@@ -50,12 +50,15 @@ const DumbDropdownTemplate: Story = (args) => {
>
Dropdown button
-