Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-04 02:01:58 -05:00
Code Issues Activity

Added static DropdownMenu component to Admin X DS (#16896)

Browse source 
refs https://github.com/TryGhost/Team/issues/3328

<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at 8a276bc</samp>

This pull request adds a new DropdownMenu component to the admin-x-ds
global library. It also includes a storybook file to showcase the
component's usage and appearance.

---------

Co-authored-by: Djordje Vlaisavljevic <dzvlais@gmail.com>
This commit is contained in:
Fabien 'egg' O'Carroll 2023-05-31 07:49:40 -04:00 • committed by GitHub
parent d07a3177bf
commit 8b85f936fc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 60 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ghost/admin-x-settings/src/admin-x-ds/assets/icons/menu-horizontal.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="16" width="16"><g><circle cx="3.25" cy="12" r="3.25" fill="currentColor"></circle><circle cx="12" cy="12" r="3.25" fill="currentColor"></circle><circle cx="20.75" cy="12" r="3.25" fill="currentColor"></circle></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 287 B

18
ghost/admin-x-settings/src/admin-x-ds/global/DropdownMenu.stories.tsx Normal file
View file

@ -0,0 +1,18 @@
import type {Meta, StoryObj} from '@storybook/react';
import DropdownMenu from './DropdownMenu';
const meta = {
title: 'Global / DropdownMenu',
component: DropdownMenu,
tags: ['autodocs']
} satisfies Meta<typeof DropdownMenu>;
export default meta;
type Story = StoryObj<typeof DropdownMenu>;
export const Default: Story = {
args: {
}
};

41
ghost/admin-x-settings/src/admin-x-ds/global/DropdownMenu.tsx Normal file
View file

@ -0,0 +1,41 @@
import Icon from './Icon';
import React from 'react';
// export type DropdownMenuItem = {
// label: string;
// }
interface MenuProps {
test?: string;
// trigger?: React.ReactNode;
// items: DropdownMenuItem[];
}
const DropdownMenu: React.FC<MenuProps> = ({test}) => {
return (
/* DropdownMenu */
<div className="relative inline-block text-left">
{/* DropdownMenu Trigger */}
<div>
<button aria-expanded="true" aria-haspopup="true" className="bg-gray-100 text-gray-400 hover:text-gray-600 focus:ring-indigo-500 focus:ring-offset-gray-100 flex items-center rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2" id="menu-button" type="button">
<span className="sr-only">Open menu</span>
<Icon name="menu-horizontal" />
</button>
</div>
{test}
{/* DropdownMenu List */}
<div aria-labelledby="menu-button" aria-orientation="vertical" className="absolute left-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none" role="menu">
<div className="py-1" role="none">
{/* DropdownMenu Item */}
<button className="block w-full cursor-pointer px-4 py-2 text-left text-sm text-grey-900 hover:bg-grey-100" type="button">Item</button>
{/* DropdownMenu Item */}
<button className="block w-full cursor-pointer px-4 py-2 text-left text-sm text-grey-900 hover:bg-grey-100" type="button">Item</button>
{/* DropdownMenu Item */}
<button className="block w-full cursor-pointer px-4 py-2 text-left text-sm text-grey-900 hover:bg-grey-100" type="button">Item</button>
</div>
</div>
</div>
);
};
export default DropdownMenu;