From 522feeffad43f2b9bd5b8250683ff778cfa4602f Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Wed, 5 Oct 2022 20:45:58 +0800
Subject: [PATCH] storybook: tweak examples
---
apps/storybook/stories/dialog.stories.tsx | 11 +++++++
.../stories/dropdown-menu.stories.tsx | 30 +++++++++----------
2 files changed, 26 insertions(+), 15 deletions(-)
diff --git a/apps/storybook/stories/dialog.stories.tsx b/apps/storybook/stories/dialog.stories.tsx
index b6b34d70..de9a90d9 100644
--- a/apps/storybook/stories/dialog.stories.tsx
+++ b/apps/storybook/stories/dialog.stories.tsx
@@ -46,3 +46,14 @@ export function Basic({
</div>
);
}
+
+Basic.args = {
+ children: (
+ <div>
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius aliquam
+ laudantium explicabo pariatur iste dolorem animi vitae error totam. At
+ sapiente aliquam accusamus facere veritatis.
+ </div>
+ ),
+ title: 'Lorem ipsum, dolor sit amet',
+};
diff --git a/apps/storybook/stories/dropdown-menu.stories.tsx b/apps/storybook/stories/dropdown-menu.stories.tsx
index f7b21266..28f07819 100644
--- a/apps/storybook/stories/dropdown-menu.stories.tsx
+++ b/apps/storybook/stories/dropdown-menu.stories.tsx
@@ -46,16 +46,16 @@ export function Basic({
>) {
const menuItems = [
{
- label: 'Apple',
- value: 'apple',
+ label: 'Profile',
+ value: 'profile',
},
{
- label: 'Banana',
- value: 'banana',
+ label: 'Settings',
+ value: 'settings',
},
{
- label: 'Orange',
- value: 'orange',
+ label: 'Sign Out',
+ value: 'sign-out',
},
];
@@ -79,23 +79,23 @@ export function Basic({
Basic.args = {
align: 'start',
- label: 'Select fruitzz',
+ label: 'More actions',
size: 'regular',
};
export function Align() {
const menuItems = [
{
- label: 'Apple',
- value: 'apple',
+ label: 'Profile',
+ value: 'profile',
},
{
- label: 'Banana',
- value: 'banana',
+ label: 'Settings',
+ value: 'settings',
},
{
- label: 'Orange',
- value: 'orange',
+ label: 'Sign Out',
+ value: 'sign-out',
},
];
@@ -103,7 +103,7 @@ export function Align() {
return (
<div className="flex justify-between">
- <DropdownMenu align="start" label="Select fruit" size="regular">
+ <DropdownMenu align="start" label="Select an action" size="regular">
{menuItems.map(({ label, value }) => (
<DropdownMenu.Item
key={value}
@@ -115,7 +115,7 @@ export function Align() {
/>
))}
</DropdownMenu>
- <DropdownMenu align="end" label="Select fruit" size="regular">
+ <DropdownMenu align="end" label="Select an action" size="regular">
{menuItems.map(({ label, value }) => (
<DropdownMenu.Item
key={value}