From 384adecce79a03963b53d5033221d64e561b54ba Mon Sep 17 00:00:00 2001 From: Pavel Keyzik Date: Sat, 9 Dec 2023 10:28:50 +0100 Subject: [PATCH] feat: menu --- src/icons/EditIcon.svg | 8 +++++ src/icons/RemoveIcon.svg | 9 ++++++ src/icons/index.ts | 2 ++ src/stories/components/Menu.mdx | 15 +++++++++ src/styles/components/menu.css | 56 +++++++++++++++++++++++++++++++++ src/styles/main.css | 1 + 6 files changed, 91 insertions(+) create mode 100644 src/icons/EditIcon.svg create mode 100644 src/icons/RemoveIcon.svg create mode 100644 src/stories/components/Menu.mdx create mode 100644 src/styles/components/menu.css diff --git a/src/icons/EditIcon.svg b/src/icons/EditIcon.svg new file mode 100644 index 0000000..7927358 --- /dev/null +++ b/src/icons/EditIcon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/icons/RemoveIcon.svg b/src/icons/RemoveIcon.svg new file mode 100644 index 0000000..0731a03 --- /dev/null +++ b/src/icons/RemoveIcon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/icons/index.ts b/src/icons/index.ts index e9f6436..2d49520 100644 --- a/src/icons/index.ts +++ b/src/icons/index.ts @@ -6,7 +6,9 @@ export { default as CaretLeftIcon } from "./CaretLeftIcon.svg"; export { default as CaretRightIcon } from "./CaretRightIcon.svg"; export { default as CaretUpDownIcon } from "./CaretUpDownIcon.svg"; export { default as CheckIcon } from "./CheckIcon.svg"; +export { default as EditIcon } from "./EditIcon.svg"; export { default as MoreVerticalIcon } from "./MoreVerticalIcon.svg"; export { default as PlusIcon } from "./PlusIcon.svg"; +export { default as RemoveIcon } from "./RemoveIcon.svg"; export { default as VerticalDragAndDropIcon } from "./VerticalDragAndDropIcon.svg"; export { default as XIcon } from "./XIcon.svg"; diff --git a/src/stories/components/Menu.mdx b/src/stories/components/Menu.mdx new file mode 100644 index 0000000..f147d90 --- /dev/null +++ b/src/stories/components/Menu.mdx @@ -0,0 +1,15 @@ +import { Meta } from "@storybook/blocks"; +import { UnstyledWithTheme } from "../../components/UnstyledWithTheme"; +import EditIcon from '../../icons/EditIcon.svg'; +import RemoveIcon from '../../icons/RemoveIcon.svg'; + + + +# Menu + + +
+
Edit Transfer
+
Remove Transaction
+
+ diff --git a/src/styles/components/menu.css b/src/styles/components/menu.css new file mode 100644 index 0000000..c727b1a --- /dev/null +++ b/src/styles/components/menu.css @@ -0,0 +1,56 @@ +:root { + --menu-background: var(--white); + --menu-border: var(--neutral-1); + --menu-item-color: var(--neutral-8); + --menu-item-background-on-hover: var(--neutral-0); + --menu-item-danger-color: rgb(219 31 31); + --menu-item-danger-background-on-hover: rgb(255 0 0 / 10%); +} + +.dark-theme { + --menu-background: var(--neutral-8); + --menu-border: var(--neutral-7); + --menu-item-color: var(--neutral-1); + --menu-item-background-on-hover: var(--neutral-7); + --menu-item-danger-color: rgb(219 31 31); + --menu-item-danger-background-on-hover: rgb(255 0 0 / 10%); +} + +.menu { + --menu-item-padding: var(--space-3); + --menu-item-corner-radius: var(--corner-5); + + z-index: 100; + + width: max-content; + padding: var(--menu-item-padding); + + background: var(--menu-background); + border: 1px solid var(--menu-border); + border-radius: var(--menu-item-corner-radius); +} + +.menu-item { + cursor: pointer; + + display: flex; + gap: 8px; + align-items: center; + + padding: var(--space-5); + + color: var(--menu-item-color); +} + +.menu-item:hover, +.menu-item:focus { + background: var(--menu-item-background-on-hover); + border-radius: calc( + var(--menu-item-corner-radius) - var(--menu-item-padding) + ); +} + +.menu-item-danger { + --menu-item-color: var(--menu-item-danger-color); + --menu-item-background-on-hover: var(--menu-item-danger-background-on-hover); +} diff --git a/src/styles/main.css b/src/styles/main.css index 40a5b00..5ba1bc1 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -21,6 +21,7 @@ @import "./components/widget.css"; @import "./components/subscription.css"; @import "./components/monthly-report.css"; +@import "./components/menu.css"; @import "./components/dialog.css"; @import "./components/date-picker.css";