diff --git a/.changeset/afraid-donuts-search.md b/.changeset/afraid-donuts-search.md new file mode 100644 index 0000000000..544de773bb --- /dev/null +++ b/.changeset/afraid-donuts-search.md @@ -0,0 +1,5 @@ +--- +'@marigold/docs': patch +--- + +[DST-518]: Revise "Menu" Page diff --git a/docs/content/components/overlay/menu/menu-action-table.demo.tsx b/docs/content/components/overlay/menu/menu-action-table.demo.tsx new file mode 100644 index 0000000000..0efaf7559d --- /dev/null +++ b/docs/content/components/overlay/menu/menu-action-table.demo.tsx @@ -0,0 +1,78 @@ +import { useState } from 'react'; +import { ActionMenu, Menu, Table } from '@marigold/components'; + +const rows = [ + { + ticketId: 'TCK-001', + eventName: 'Champions League Final', + status: 'Confirmed', + }, + { + ticketId: 'TCK-002', + eventName: 'Rock Concert', + status: 'Pending', + }, + { + ticketId: 'TCK-003', + eventName: 'Broadway Show', + status: 'Cancelled', + }, +]; + +interface Ticket { + ticketId: string; + eventName: string; + status: 'Cancelled' | 'Pending' | 'Confirmed'; +} + +export default () => { + const [tickets, setTickets] = useState(rows); + + const handleViewDetails = (ticket: Ticket) => { + alert( + `Ticket ID: ${ticket.ticketId}\nEvent: ${ticket.eventName}\nStatus: ${ticket.status}` + ); + }; + + return ( + + + ID + Event Name + Status + Action + + + {tickets.map((ticket: Ticket) => ( + + {ticket.ticketId} + {ticket.eventName} + {ticket.status} + + + handleViewDetails(ticket)} + id="view-details" + > + View Details + + + setTickets( + tickets.filter( + ticketItem => ticketItem.ticketId !== ticket.ticketId + ) + ) + } + id="delete" + > + Delete + + + + + ))} + +
+ ); +}; diff --git a/docs/content/components/overlay/menu/menu-action.demo.tsx b/docs/content/components/overlay/menu/menu-action.demo.tsx index f5f1f6e35e..3c54001ec9 100644 --- a/docs/content/components/overlay/menu/menu-action.demo.tsx +++ b/docs/content/components/overlay/menu/menu-action.demo.tsx @@ -3,7 +3,7 @@ import { Menu } from '@marigold/components'; export default () => { return ( - alert(`Your action: ${action}`)}> + alert(`Your action: ${action}`)}> Open in editor Settings Delete diff --git a/docs/content/components/overlay/menu/menu-appearance.demo.tsx b/docs/content/components/overlay/menu/menu-appearance.demo.tsx new file mode 100644 index 0000000000..c52906e33d --- /dev/null +++ b/docs/content/components/overlay/menu/menu-appearance.demo.tsx @@ -0,0 +1,14 @@ +import { Menu } from '@marigold/components'; + +export default () => { + return ( + alert(`Action: ${action}`)} + > + View Ticket Details + Transfer Ticket + Request Refund + + ); +}; diff --git a/docs/content/components/overlay/menu/menu-disabled.demo.tsx b/docs/content/components/overlay/menu/menu-disabled.demo.tsx index ec0876f2ee..9441d2c163 100644 --- a/docs/content/components/overlay/menu/menu-disabled.demo.tsx +++ b/docs/content/components/overlay/menu/menu-disabled.demo.tsx @@ -1,12 +1,13 @@ +import React from 'react'; import { Menu } from '@marigold/components'; export default () => { return ( - - 🍔 Burger - 🍕 Pizza - 🥗 Salad - 🍟 Fries + + 👁️ View Ticket Details + 📥 Download Ticket + ⬆️ Upgrade Seat + 💸 Resell Ticket ); }; diff --git a/docs/content/components/overlay/menu/menu-section.demo.tsx b/docs/content/components/overlay/menu/menu-section.demo.tsx index 469fae7a31..76e7b7a487 100644 --- a/docs/content/components/overlay/menu/menu-section.demo.tsx +++ b/docs/content/components/overlay/menu/menu-section.demo.tsx @@ -1,17 +1,18 @@ +import React from 'react'; import { Menu } from '@marigold/components'; export default () => { return ( - - - 🍔 Burger - 🍕 Pizza - 🍟 Fries + + + 📅 View Match Information + 🏟️ Stadium Guide + 🎉 Fan Zone Activities - - 🍎 Apple - 🍌 Banana - 🍓 Strawberry + + 📞 Contact Support + ❓ View FAQs + 💬 Provide Feedback ); diff --git a/docs/content/components/overlay/menu/menu-selection.demo.tsx b/docs/content/components/overlay/menu/menu-selection.demo.tsx index 5c790d67df..1090d7b444 100644 --- a/docs/content/components/overlay/menu/menu-selection.demo.tsx +++ b/docs/content/components/overlay/menu/menu-selection.demo.tsx @@ -1,16 +1,22 @@ +import React, { useState } from 'react'; import { Menu } from '@marigold/components'; export default () => { + const [preferences, setPreferences] = useState(['newsletter']); return ( - - 🦁 Gryffindor - 🦡 Hufflepuff - 🐦‍⬛ Ravenclaw - 🐍 Slytherin - + <> + void} + > + 📧 Subscribe to Newsletter + 💸 Receive Special Offers + 🔔 Get Product Updates + 🎉 Event Invitations + {' '} + 
Your preferences are : {[...preferences].join(', ')}
+ ); }; diff --git a/docs/content/components/overlay/menu/menu.mdx b/docs/content/components/overlay/menu/menu.mdx index 472a3e33ff..a31a2fa087 100644 --- a/docs/content/components/overlay/menu/menu.mdx +++ b/docs/content/components/overlay/menu/menu.mdx @@ -1,51 +1,71 @@ --- title: Menu -caption: Component for building a menu. +caption: Flexible component for constructing dynamic and customizable menus. +badge: updated --- The `` component allows you to define a menu element. It's useful when you want a list with options or actions. -It is structured in two parts `` and ``. The `` now contains the trigger and the button per default. You also can use the `` which you can use to separate the menu items from each other. - -If you want create a variant, you can style different parts of the `` separate, there is the `container`, `section` and `item` part. +It is structured in two parts `` and ``. The `` contains the trigger and the button per default. You also can use the `` which you can use to separate the menu items from each other. There is also a companion component called `` which you can use if you want to take some actions. You can have a look on how it works in the examples. It works quiet similar to the normal `` component. All you have to add are the ``s. -## Import +## Anatomy -```tsx -import { Menu } from '@marigold/components'; -``` +Anatomy of menu -## Apperance +- **Menu trigger:** The element, such as a button or icon, that opens or activates the menu. - +- **Section:** Menus are made up of a section or multiple sections. -## Props +- **Section header:** Contains a heading to name a section of a group of similar menu items. -### Menu +- **Menu item:** Represent an individual option or action within a Menu component. - +## Appearance -### Menu.Item + - + -### Menu.Section +## Usage - +In general, Menus are used to hide less frequently used or advanced options until users specifically need them. This keeps the interface clean and focused on essential elements. + +Menus are ideal for interactive UI elements, it is distincit from `