Skip to content

Commit 76d72fc

Browse files
marklearstmarklearst
committed
feat(menu): refresh stories and popover
1 parent 14ff8ed commit 76d72fc

27 files changed

Lines changed: 611 additions & 443 deletions

‎src/components/menu/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { Menu } from "./menu";
1+
export { Menu } from './menu'

‎src/components/menu/menu-button/menu-button.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
import { MenuButton as HeadlessUiMenuButton } from "@headlessui/react";
2-
import React from "react";
1+
import type { ReactNode } from 'react'
2+
import { MenuButton as HeadlessUiMenuButton } from '@headlessui/react'
33

44
export interface MenuButtonProps {
5-
children: React.ReactNode;
6-
className?: string;
5+
children: ReactNode
6+
className?: string
77
}
88

99
export const MenuButton = ({ children, className }: MenuButtonProps) => {
10-
return (
11-
<HeadlessUiMenuButton as="div" className={className}>
12-
{children}
13-
</HeadlessUiMenuButton>
14-
);
15-
};
10+
return (
11+
<HeadlessUiMenuButton as='div' className={className}>
12+
{children}
13+
</HeadlessUiMenuButton>
14+
)
15+
}

‎src/components/menu/menu-info-item/menu-info-item.stories.tsx‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,32 @@
11
/* eslint-disable react/jsx-props-no-spreading */
2-
import type { Meta, StoryObj } from "@storybook/react";
2+
import type { Meta, StoryObj } from '@storybook/react-vite'
33

4-
import React from "react";
5-
import { MenuInfoItem } from "./menu-info-item";
4+
import { MenuInfoItem } from './menu-info-item'
65

76
const meta: Meta<typeof MenuInfoItem> = {
8-
title: "Menu/MenuInfoItem",
9-
component: MenuInfoItem,
10-
};
7+
title: 'Menu/MenuInfoItem',
8+
component: MenuInfoItem,
9+
args: {
10+
title: 'Title',
11+
subtitle: 'Subtitle',
12+
containerWidth: 208,
13+
},
14+
argTypes: {
15+
title: { control: 'text' },
16+
subtitle: { control: 'text' },
17+
containerWidth: {
18+
control: { type: 'range', min: 120, max: 320, step: 8 },
19+
},
20+
},
21+
}
1122

12-
export default meta;
13-
type Story = StoryObj<typeof MenuInfoItem>;
23+
export default meta
24+
type Story = StoryObj<typeof MenuInfoItem>
1425

1526
export const Default: Story = {
16-
render: () => (
17-
<div className="w-52">
18-
<MenuInfoItem title="Title" subtitle="Subtitle" />
19-
</div>
20-
),
21-
};
27+
render: ({ title, subtitle, containerWidth }) => (
28+
<div style={{ width: containerWidth }}>
29+
<MenuInfoItem title={title} subtitle={subtitle} />
30+
</div>
31+
),
32+
}

‎src/components/menu/menu-info-item/menu-info-item.tsx‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
1-
import React from "react";
2-
31
export interface MenuInfoItemProps {
4-
title: string;
5-
subtitle: string;
2+
title: string
3+
subtitle: string
64
}
75

86
export const MenuInfoItem = ({ title, subtitle }: MenuInfoItemProps) => {
9-
return (
10-
<div className="bg-abusix-neutral-0 px-4 py-3">
11-
<div className="mb-1 truncate font-semibold" title={title}>
12-
{title}
13-
</div>
14-
<div className="truncate text-sm text-neutral-600" title={subtitle}>
15-
{subtitle}
16-
</div>
17-
</div>
18-
);
19-
};
7+
return (
8+
<div className='bg-neutral-0 px-4 py-3'>
9+
<div className='mb-1 truncate font-semibold' title={title}>
10+
{title}
11+
</div>
12+
<div className='truncate text-sm text-neutral-600' title={subtitle}>
13+
{subtitle}
14+
</div>
15+
</div>
16+
)
17+
}

‎src/components/menu/menu-item/menu-item.stories.tsx‎

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,31 @@
1-
import type { Meta, StoryObj } from "@storybook/react";
2-
import React from "react";
3-
import { ChatIcon } from "../../../icons";
1+
import type { Meta, StoryObj } from '@storybook/react-vite'
2+
import { ChatIcon } from '../../../icons'
43

5-
import { Menu } from "../menu";
6-
import { MenuItem } from "./menu-item";
4+
import { Menu } from '../menu'
5+
import { MenuItem } from './menu-item'
76

87
const meta: Meta<typeof MenuItem> = {
9-
title: "Menu/MenuItem",
10-
component: MenuItem,
11-
};
8+
title: 'Menu/MenuItem',
9+
component: MenuItem,
10+
}
1211

13-
export default meta;
14-
type Story = StoryObj<typeof MenuItem>;
12+
export default meta
13+
type Story = StoryObj<typeof MenuItem>
1514

1615
export const Default: Story = {
17-
argTypes: {
18-
disabled: {
19-
type: "boolean",
20-
defaultValue: false,
21-
},
16+
argTypes: {
17+
disabled: {
18+
type: 'boolean',
19+
defaultValue: false,
2220
},
23-
render: (args) => (
24-
<div className="w-52">
25-
<Menu>
26-
<MenuItem LeftIcon={ChatIcon} {...args}>
27-
Label
28-
</MenuItem>
29-
</Menu>
30-
</div>
31-
),
32-
};
21+
},
22+
render: (args) => (
23+
<div className='w-52'>
24+
<Menu>
25+
<MenuItem LeftIcon={ChatIcon} {...args}>
26+
Label
27+
</MenuItem>
28+
</Menu>
29+
</div>
30+
),
31+
}

‎src/components/menu/menu-item/menu-item.tsx‎

Lines changed: 32 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,36 @@
1-
import { MenuItem as HeadlessUiMenuItem } from "@headlessui/react";
2-
import React from "react";
1+
import type { ElementType } from 'react'
2+
import { ReactNode } from 'react'
3+
import { MenuItem as HeadlessUiMenuItem } from '@headlessui/react'
34

45
export interface MenuItemProps {
5-
children: React.ReactNode;
6-
LeftIcon?: React.ElementType;
7-
disabled?: boolean;
8-
onClick?: () => void;
6+
children: ReactNode
7+
LeftIcon?: ElementType
8+
disabled?: boolean
9+
onClick?: () => void
910
}
1011

11-
export const MenuItem = ({ children, LeftIcon, disabled = false, onClick }: MenuItemProps) => {
12-
return (
13-
<HeadlessUiMenuItem disabled={disabled}>
14-
<button
15-
type="button"
16-
className="group bg-neutral-0 disabled:bg-neutral-0 relative flex w-full cursor-pointer items-center gap-4 px-4 py-2.5 hover:bg-neutral-100 data-focus:bg-neutral-200"
17-
disabled={disabled}
18-
onKeyDown={onClick}
19-
onClick={onClick}
20-
>
21-
{LeftIcon ? (
22-
<LeftIcon className="h-4 w-4 fill-neutral-600 group-disabled:fill-neutral-400" />
23-
) : null}
24-
<div className="paragraph-200 text-neutral-800 group-disabled:text-neutral-400">
25-
{children}
26-
</div>
27-
</button>
28-
</HeadlessUiMenuItem>
29-
);
30-
};
12+
export const MenuItem = ({
13+
children,
14+
LeftIcon,
15+
disabled = false,
16+
onClick,
17+
}: MenuItemProps) => {
18+
return (
19+
<HeadlessUiMenuItem disabled={disabled}>
20+
<button
21+
type='button'
22+
className='group bg-neutral-0 disabled:bg-neutral-0 relative flex w-full cursor-pointer items-center gap-4 px-4 py-2.5 hover:bg-neutral-100 data-focus:bg-neutral-200'
23+
disabled={disabled}
24+
onKeyDown={onClick}
25+
onClick={onClick}
26+
>
27+
{LeftIcon ?
28+
<LeftIcon className='h-4 w-4 fill-neutral-600 group-disabled:fill-neutral-400' />
29+
: null}
30+
<div className='paragraph-200 text-neutral-800 group-disabled:text-neutral-400'>
31+
{children}
32+
</div>
33+
</button>
34+
</HeadlessUiMenuItem>
35+
)
36+
}

‎src/components/menu/menu-items/menu-items.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import { MenuItems as HeadlessUiMenuItems } from "@headlessui/react";
2-
import React from "react";
1+
import type { ReactNode } from 'react'
2+
import { MenuItems as HeadlessUiMenuItems } from '@headlessui/react'
33

44
export interface MenuItemsProps {
5-
children: React.ReactNode;
5+
children: ReactNode
66
}
77
export const MenuItems = ({ children }: MenuItemsProps) => {
8-
return (
9-
<HeadlessUiMenuItems className="bg-neutral-0 absolute right-0 z-10 mt-2 flex w-52 flex-col rounded-md py-2 shadow-md outline-hidden">
10-
{children}
11-
</HeadlessUiMenuItems>
12-
);
13-
};
8+
return (
9+
<HeadlessUiMenuItems className='bg-neutral-0 absolute right-0 z-10 mt-2 flex w-52 flex-col rounded-md py-2 shadow-md outline-hidden'>
10+
{children}
11+
</HeadlessUiMenuItems>
12+
)
13+
}

‎src/components/menu/menu-separator/menu-separator.stories.tsx‎

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,28 @@
11
/* eslint-disable react/jsx-props-no-spreading */
2-
import type { Meta, StoryObj } from "@storybook/react";
2+
import type { Meta, StoryObj } from '@storybook/react-vite'
33

4-
import React from "react";
5-
import { MenuSeparator } from "./menu-separator";
4+
import { MenuSeparator } from './menu-separator'
65

76
const meta: Meta<typeof MenuSeparator> = {
8-
title: "Menu/MenuSeparator",
9-
component: MenuSeparator,
10-
};
7+
title: 'Menu/MenuSeparator',
8+
component: MenuSeparator,
9+
args: {
10+
containerWidth: 208,
11+
},
12+
argTypes: {
13+
containerWidth: {
14+
control: { type: 'range', min: 120, max: 320, step: 8 },
15+
},
16+
},
17+
}
1118

12-
export default meta;
13-
type Story = StoryObj<typeof MenuSeparator>;
19+
export default meta
20+
type Story = StoryObj<typeof MenuSeparator>
1421

1522
export const Default: Story = {
16-
render: () => (
17-
<div className="w-52">
18-
<MenuSeparator />
19-
</div>
20-
),
21-
};
23+
render: ({ containerWidth }) => (
24+
<div style={{ width: containerWidth }}>
25+
<MenuSeparator />
26+
</div>
27+
),
28+
}

‎src/components/menu/menu-separator/menu-separator.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import React from "react";
2-
31
export const MenuSeparator = () => {
4-
return <hr className="h-px border-none bg-neutral-300" />;
5-
};
2+
return <hr className='h-px border-none bg-neutral-300' />
3+
}

‎src/components/menu/menu-title/menu-title.stories.tsx‎

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,29 @@
11
/* eslint-disable react/jsx-props-no-spreading */
2-
import type { Meta, StoryObj } from "@storybook/react";
3-
import React from "react";
4-
import { MenuTitle } from "./menu-title";
2+
import type { Meta, StoryObj } from '@storybook/react-vite'
3+
import { MenuTitle } from './menu-title'
54

65
const meta: Meta<typeof MenuTitle> = {
7-
title: "Menu/MenuTitle",
8-
component: MenuTitle,
9-
};
6+
title: 'Menu/MenuTitle',
7+
component: MenuTitle,
8+
args: {
9+
title: 'Title',
10+
containerWidth: 208,
11+
},
12+
argTypes: {
13+
title: { control: 'text' },
14+
containerWidth: {
15+
control: { type: 'range', min: 120, max: 320, step: 8 },
16+
},
17+
},
18+
}
1019

11-
export default meta;
12-
type Story = StoryObj<typeof MenuTitle>;
20+
export default meta
21+
type Story = StoryObj<typeof MenuTitle>
1322

1423
export const Default: Story = {
15-
render: () => (
16-
<div className="w-52">
17-
<MenuTitle>Title</MenuTitle>
18-
</div>
19-
),
20-
};
24+
render: ({ title, containerWidth }) => (
25+
<div style={{ width: containerWidth }}>
26+
<MenuTitle>{title}</MenuTitle>
27+
</div>
28+
),
29+
}

0 commit comments

Comments
 (0)