From 62abbf8094c918596f3a8070ab170b028a4fdef4 Mon Sep 17 00:00:00 2001 From: Anton Gilgur Date: Thu, 22 Aug 2024 17:42:53 -0400 Subject: [PATCH] one more diff reduction with one hackishness Signed-off-by: Anton Gilgur --- stories/popup.stories.tsx | 520 ++++++++++++++++++++------------------ 1 file changed, 270 insertions(+), 250 deletions(-) diff --git a/stories/popup.stories.tsx b/stories/popup.stories.tsx index 6f153464..49cee1c2 100644 --- a/stories/popup.stories.tsx +++ b/stories/popup.stories.tsx @@ -11,282 +11,302 @@ export default { title: 'Popup', }; -export const Confirmation = () => ( - - {(apis) => ( - - )} - -); +export const Confirmation = () => { + return ( + + {(apis) => ( + + )} + + ); +} Confirmation.storyName = 'confirmation'; export const ConfirmationWithCustomFormInside = () => { const [checked, setChecked] = React.useState(false); + return ( + ( + + {(apis) => ( +
+ +

Checked?: {JSON.stringify(checked)}

+
+ )} + + ) + ); +} +ConfirmationWithCustomFormInside.storyName = 'confirmation with custom form inside'; + +export const Prompt = () => { return ( {(apis) => ( -
- -

Checked?: {JSON.stringify(checked)}

-
+ + ), { validate: (vals) => ({ + firstName: !vals.firstName && 'First Name is required', + lastName: !vals.lastName && 'Last Name is required', + })}); + + action('Prompt values')(values); + }}>Click me )} - ) -}; -ConfirmationWithCustomFormInside.storyName = 'confirmation with custom form inside'; - -export const Prompt = () => ( - - {(apis) => ( - - )} - -); + ); +} Prompt.storyName = 'prompt'; -export const PromptWithCustomSubmit = () => ( - - {(apis) => ( - - )} - -); +export const PromptWithCustomSubmit = () => { + return ( + + {(apis) => ( + + )} + + ); +} PromptWithCustomSubmit.storyName = 'prompt with custom submit'; -export const PromptWithRedTitleAndIconWithCustomSubmit = () => ( - - {(apis) => ( - - )} - -); + { name: 'argo-icon-warning', color: 'failed' }, + 'red'); + }}>Click me + )} + + ); +} PromptWithRedTitleAndIconWithCustomSubmit.storyName = 'prompt with red title and icon, with custom submit'; -export const PromptWithYellowTitleAndIconThreeFieldsAndCustomSubmitVerticalCenterLayoutOfIcon = () => ( - - {(apis) => ( - - )} - -); + { name: 'argo-icon-workflow', color: 'warning' }, + 'yellow'); + }}>Click me + )} + + ); +} PromptWithYellowTitleAndIconThreeFieldsAndCustomSubmitVerticalCenterLayoutOfIcon.storyName = 'prompt with yellow title and icon, three fields and custom submit. Vertical center layout of icon'; -export const PromptWithGreenClockIconAndCustomSubmit = () => ( - - {(apis) => ( - - )} - -); + { name: 'argo-icon-clock', color: 'success' }); + }}>Click me + )} + + ); +} PromptWithGreenClockIconAndCustomSubmit.storyName = 'prompt with green clock icon and custom submit'; -export const PromptWithJustHeadersAndParagraphs = () => ( - - {(apis) => ( - - )} - -); +export const PromptWithJustHeadersAndParagraphs = () => { + return ( + + {(apis) => ( + + )} + + ); +} PromptWithJustHeadersAndParagraphs.storyName = 'prompt with just headers and paragraphs'; -export const PromptWithOnlyParagraphsAdditionalTopPaddingIsOptionalForTheFirstParagraph = () => ( - - {(apis) => ( - - )} - -); +export const PromptWithOnlyParagraphsAdditionalTopPaddingIsOptionalForTheFirstParagraph = () => { + return ( + + {(apis) => ( + + )} + + ); +} PromptWithOnlyParagraphsAdditionalTopPaddingIsOptionalForTheFirstParagraph.storyName = 'prompt with only paragraphs. Additional top padding is optional for the first paragraph'; -export const PromptWithReactCheckboxThatIsCheckedByDefaultUsernameDefaultSetToAdmin = () => ( - - {(apis) => ( - - )} - -); + undefined, + undefined, + { checkboxField: true, username: 'admin' }); + action('Prompt values')(values); + }}>Click me + )} + + ); +} PromptWithReactCheckboxThatIsCheckedByDefaultUsernameDefaultSetToAdmin.storyName = 'prompt with React Checkbox that is checked by default; Username default set to admin';