Skip to content

Commit

Permalink
Merge pull request #1193 from mi6/1184-add-code-example-for-using-a-d…
Browse files Browse the repository at this point in the history 
…ropdown-button-to-open-a-popover-menu

feat(root): add new example for dropdown button with popover menu
  • Loading branch information
@GCHQ-Developer-112
GCHQ-Developer-112 authored Nov 6, 2024
2 parents ec4dc29 + df7c62d commit 4f7c52e
Show file tree
Hide file tree
Showing 2 changed files with 688 additions and 427 deletions.
263 changes: 262 additions & 1 deletion src/content/structured/components/buttons/code.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ tabs:
]
---

import { IcButton } from "@ukic/react";
import { IcButton, IcMenuGroup, IcMenuItem, IcPopoverMenu } from "@ukic/react";
import { useState } from "react";

## Component demo

Expand Down Expand Up @@ -967,3 +968,263 @@ return (
Upload multiple files
</IcButton>
</ComponentPreview>

### Dropdown button with popover menu

export const snippetsDropdownButton = [
{
technology: "Web component",
snippets: {
short: `<ic-button
dropdown="true"
variant="primary"
id="dropdown-button-popover"
onclick="handleClick()"
>
Actions
</ic-button>
<ic-popover-menu
anchor="dropdown-button-popover"
aria-label="popover"
id="dropdown-button-popover-menu"
>
<ic-menu-group label="Sort">
<ic-menu-item label="Sort ascending">
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M7.03 9.97H11.03V18.89L13.04 18.92V9.97H17.03L12.03 4.97Z"
/>
</svg>
</ic-menu-item>
<ic-menu-item label="Sort descending">
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path d="M7.03 13.92H11.03V5L13.04 4.97V13.92H17.03L12.03 18.92Z" />
</svg>
</ic-menu-item>
</ic-menu-group>
<ic-menu-item label="Filter" variant="toggle">
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M2.39 1.73L1.11 3L9 10.89V15.87C8.96 16.16 9.06 16.47 9.29 16.7L13.3 20.71C13.69 21.1 14.32 21.1 14.71 20.71C14.94 20.5 15.04 20.18 15 19.88V16.89L20.84 22.73L22.11 21.46L15 14.35V14.34L13 12.35L11 10.34L4.15 3.5L2.39 1.73M6.21 3L8.2 5H16.96L13.11 9.91L15 11.8V10.75L19.79 4.62C20.13 4.19 20.05 3.56 19.62 3.22C19.43 3.08 19.22 3 19 3H6.21M11 12.89L13 14.89V17.58L11 15.58V12.89Z"
/>
</svg>
</ic-menu-item>
<ic-menu-group label="Manage columns">
<ic-menu-item label="Hide column" variant="toggle">
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M2,5.27L3.28,4L20,20.72L18.73,22L15.65,18.92C14.5,19.3 13.28,19.5 12,19.5C7,19.5 2.73,16.39 1,12C1.69,10.24 2.79,8.69 4.19,7.46L2,5.27M12,9A3,3 0 0,1 15,12C15,12.35 14.94,12.69 14.83,13L11,9.17C11.31,9.06 11.65,9 12,9M12,4.5C17,4.5 21.27,7.61 23,12C22.18,14.08 20.79,15.88 19,17.19L17.58,15.76C18.94,14.82 20.06,13.54 20.82,12C19.17,8.64 15.76,6.5 12,6.5C10.91,6.5 9.84,6.68 8.84,7L7.3,5.47C8.74,4.85 10.33,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C12.69,17.5 13.37,17.43 14,17.29L11.72,15C10.29,14.85 9.15,13.71 9,12.28L5.6,8.87C4.61,9.72 3.78,10.78 3.18,12Z"
/>
</svg>
</ic-menu-item>
<ic-menu-item label="Column width">
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path d="M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z" />
</svg>
</ic-menu-item>
</ic-menu-group>
</ic-popover-menu>`,
long: `{shortCode}
<script>
let icPopover = document.querySelector('#dropdown-button-popover-menu');
let icButton = document.querySelector('#dropdown-button-popover');
function handleClick() {
icPopover.open = !icPopover.open;
}
icPopover.addEventListener('icPopoverClosed', (ev) => {
icButton.setAttribute('dropdown-expanded', false);
});
</script>`,
},
},
{
technology: "React",
snippets: {
short: `<IcButton
dropdown
dropdownExpanded={popoverOpen}
variant="primary"
id="dropdown-button-popover"
onClick={handlePopoverToggled}
>
Actions
</IcButton>
<IcPopoverMenu
anchor="dropdown-button-popover"
aria-label="popover"
open={popoverOpen}
onIcPopoverClosed={handlePopoverClosed}
>
<IcMenuGroup label="Sort">
<IcMenuItem label="Sort ascending">
<SlottedSVG
slot="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
path={mdiArrowUpThin}
/>
</IcMenuItem>
<IcMenuItem label="Sort descending">
<SlottedSVG
slot="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
path={mdiArrowDownThin}
/>
</IcMenuItem>
</IcMenuGroup>
<IcMenuItem label="Filter" variant="toggle">
<SlottedSVG
slot="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
path={mdiFilterOffOutline}
/>
</IcMenuItem>
<IcMenuGroup label="Manage columns">
<IcMenuItem label="Hide column" variant="toggle">
<SlottedSVG
slot="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
path={mdiEyeOffOutline}
/>
</IcMenuItem>
<IcMenuItem label="Column width">
<SlottedSVG
slot="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
path={mdiSwapHorizontal}
/>
</IcMenuItem>
</IcMenuGroup>
</IcPopoverMenu>`,
long: [
{
language: "Typescript",
snippet: `const [popoverOpen, setPopoverOpen] = useState<boolean>(false);
const handlePopoverToggled = () => setPopoverOpen(value => !value);
const handlePopoverClosed = () => setPopoverOpen(false);
return (
<>
{shortCode}
</>
)`,
},
{
language: "Javascript",
snippet: `const [popoverOpen, setPopoverOpen] = useState(false);
const handlePopoverToggled = () => setPopoverOpen(value => !value);
const handlePopoverClosed = () => setPopoverOpen(false);
return (
<>
{shortCode}
</>
)`,
},
],
},
},
];

export const DropdownButtonPopover = () => {
const [popoverOpen, setPopoverOpen] = useState(false);
const handlePopoverToggled = () => setPopoverOpen((value) => !value);
const handlePopoverClosed = () => setPopoverOpen(false);
return (
<>
<IcButton
dropdown
dropdownExpanded={popoverOpen}
variant="primary"
id="dropdown-button-popover"
onClick={handlePopoverToggled}
>
Actions
</IcButton>
<IcPopoverMenu
anchor="dropdown-button-popover"
aria-label="popover"
open={popoverOpen}
onIcPopoverClosed={handlePopoverClosed}
>
<IcMenuGroup label="Sort">
<IcMenuItem label="Sort ascending">
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path d="M7.03 9.97H11.03V18.89L13.04 18.92V9.97H17.03L12.03 4.97Z" />
</svg>
</IcMenuItem>
<IcMenuItem label="Sort descending">
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path d="M7.03 13.92H11.03V5L13.04 4.97V13.92H17.03L12.03 18.92Z" />
</svg>
</IcMenuItem>
</IcMenuGroup>
<IcMenuItem label="Filter" variant="toggle">
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path d="M2.39 1.73L1.11 3L9 10.89V15.87C8.96 16.16 9.06 16.47 9.29 16.7L13.3 20.71C13.69 21.1 14.32 21.1 14.71 20.71C14.94 20.5 15.04 20.18 15 19.88V16.89L20.84 22.73L22.11 21.46L15 14.35V14.34L13 12.35L11 10.34L4.15 3.5L2.39 1.73M6.21 3L8.2 5H16.96L13.11 9.91L15 11.8V10.75L19.79 4.62C20.13 4.19 20.05 3.56 19.62 3.22C19.43 3.08 19.22 3 19 3H6.21M11 12.89L13 14.89V17.58L11 15.58V12.89Z" />
</svg>
</IcMenuItem>
<IcMenuGroup label="Manage columns">
<IcMenuItem label="Hide column" variant="toggle">
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path d="M2,5.27L3.28,4L20,20.72L18.73,22L15.65,18.92C14.5,19.3 13.28,19.5 12,19.5C7,19.5 2.73,16.39 1,12C1.69,10.24 2.79,8.69 4.19,7.46L2,5.27M12,9A3,3 0 0,1 15,12C15,12.35 14.94,12.69 14.83,13L11,9.17C11.31,9.06 11.65,9 12,9M12,4.5C17,4.5 21.27,7.61 23,12C22.18,14.08 20.79,15.88 19,17.19L17.58,15.76C18.94,14.82 20.06,13.54 20.82,12C19.17,8.64 15.76,6.5 12,6.5C10.91,6.5 9.84,6.68 8.84,7L7.3,5.47C8.74,4.85 10.33,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C12.69,17.5 13.37,17.43 14,17.29L11.72,15C10.29,14.85 9.15,13.71 9,12.28L5.6,8.87C4.61,9.72 3.78,10.78 3.18,12Z" />
</svg>
</IcMenuItem>
<IcMenuItem label="Column width">
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path d="M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z" />
</svg>
</IcMenuItem>
</IcMenuGroup>
</IcPopoverMenu>
</>
);
};

<ComponentPreview
style={{
display: "flex",
justifyContent: "center",
}}
snippets={snippetsDropdownButton}
>
<DropdownButtonPopover />
</ComponentPreview>
Loading

0 comments on commit 4f7c52e

Please sign in to comment.