From 87a117af4cd5cf930988f484ffacd23fdee52733 Mon Sep 17 00:00:00 2001 From: Jose Fernando Gomez Flores Date: Wed, 22 Nov 2023 09:27:56 -0600 Subject: [PATCH 1/3] fix: remove dialogs in the overview page and fix link issues --- .../src/dialog/dialog-overview.stories.mdx | 20 ------------------- .../stories/Introduction.stories.mdx | 4 ++-- 2 files changed, 2 insertions(+), 22 deletions(-) diff --git a/libs/components/src/dialog/dialog-overview.stories.mdx b/libs/components/src/dialog/dialog-overview.stories.mdx index 7acaae3fc3..c660568c8c 100644 --- a/libs/components/src/dialog/dialog-overview.stories.mdx +++ b/libs/components/src/dialog/dialog-overview.stories.mdx @@ -39,23 +39,3 @@ import { Canvas, Meta, DocsContainer, Story } from '@storybook/addon-docs'; - Use only when the user has to make a decision RIGHT NOW - It's always better to do the action and then allow an "undo" option rather than using an "Are you sure?" dialog - To notify the user less intrusively, consider using a [snackbar](?path=/story/components-snackbar--basic) instead - ---- - -## Anatomy - -
-  
-
- ---- - -## Examples - -
-  
-
- -
-  
-
diff --git a/libs/components/stories/Introduction.stories.mdx b/libs/components/stories/Introduction.stories.mdx index 8e66a0cab3..adf958b66a 100644 --- a/libs/components/stories/Introduction.stories.mdx +++ b/libs/components/stories/Introduction.stories.mdx @@ -19,14 +19,14 @@ the raw components. We'll layer in documenation over time. Ping us in the **#design-system** channel on Slack for help.
- + App shell Our standard starter app, great for multi-level UIs that need to show a dashboard, subsections with lists of items, and detail pages to view those items. - + Kitchen sinkA large collection of all our components on a single screen, to give a high level overview of what's available and to From 78fdaa24808532b87fe9b045b26053dd3b990075 Mon Sep 17 00:00:00 2001 From: github-actions Date: Wed, 22 Nov 2023 12:53:03 -0500 Subject: [PATCH 2/3] fix(components): dialog stories --- .../src/dialog/dialog-overview.stories.mdx | 46 ++++---- libs/components/src/dialog/dialog.stories.js | 100 +++++++++--------- 2 files changed, 75 insertions(+), 71 deletions(-) diff --git a/libs/components/src/dialog/dialog-overview.stories.mdx b/libs/components/src/dialog/dialog-overview.stories.mdx index c660568c8c..5430634ea2 100644 --- a/libs/components/src/dialog/dialog-overview.stories.mdx +++ b/libs/components/src/dialog/dialog-overview.stories.mdx @@ -3,9 +3,6 @@ import { Canvas, Meta, DocsContainer, Story } from '@storybook/addon-docs'; - - # Dialogs ## Basics @@ -39,3 +17,27 @@ import { Canvas, Meta, DocsContainer, Story } from '@storybook/addon-docs'; - Use only when the user has to make a decision RIGHT NOW - It's always better to do the action and then allow an "undo" option rather than using an "Are you sure?" dialog - To notify the user less intrusively, consider using a [snackbar](?path=/story/components-snackbar--basic) instead + +--- + +## Anatomy + +
+  
+
+ +--- + +## Examples + +### Logout + +
+  
+
+ +### Destructive dialog + +
+  
+
diff --git a/libs/components/src/dialog/dialog.stories.js b/libs/components/src/dialog/dialog.stories.js index ffb174a8ef..768c155de0 100644 --- a/libs/components/src/dialog/dialog.stories.js +++ b/libs/components/src/dialog/dialog.stories.js @@ -3,64 +3,71 @@ import './dialog'; export default { title: 'Components/Dialog', - properties: { - darkMode: { current: 'dark', stylePreview: true }, - }, }; -const Template = ({ isDark }) => { - return `
- - Dialog body text - Action 2 - Action 1 - -
`; +const Template = () => { + document.addEventListener( + 'DOMContentLoaded', + () => { + const button = document.body.querySelector('#dialog-button'); + button.addEventListener('click', () => { + const dialog = document.body.querySelector('#dialog1'); + dialog.open = true; + }); + }, + { once: true } + ); + return ` + Open basic dialog + + Dialog body text + Action 2 + Action 1 + `; }; export const Basic = dialogComponent.bind({}); -Basic.parameters = { - docs: { - inlineStories: false, - }, -}; export const Anatomy = Template.bind({}); -Anatomy.parameters = { - docs: { - inlineStories: false, - }, -}; const templateLogout = ({}) => { - return ` + document.addEventListener( + 'DOMContentLoaded', + () => { + const button = document.body.querySelector('#logout-button'); + button.addEventListener('click', () => { + const dialog = document.body.querySelector('#example-logout'); + dialog.open = true; + }); + }, + { once: true } + ); + return ` + Open logout dialog + Due to inactivity, you’ll be logged out in 3 minutes to protect your security. - Log out - Stay logged in + Log out + Stay logged in `; }; export const Logout = templateLogout.bind({}); -Logout.parameters = { - docs: { - inlineStories: false, - }, -}; const templateUDF = ({}) => { - return ` - + document.addEventListener( + 'DOMContentLoaded', + () => { + const button = document.body.querySelector('#udf-button'); + button.addEventListener('click', () => { + const dialog = document.body.querySelector('#example-udf'); + dialog.open = true; + }); + }, + { once: true } + ); + return ` + Open UDF dialog +
Function to delete
@@ -69,14 +76,9 @@ const templateUDF = ({}) => { - Delete - Cancel + Delete + Cancel `; }; export const UDF = templateUDF.bind({}); -UDF.parameters = { - docs: { - inlineStories: false, - }, -}; From c2773973434244467582417b2c1c0a97acc2fd9c Mon Sep 17 00:00:00 2001 From: Jose Fernando Gomez Flores Date: Tue, 28 Nov 2023 04:14:34 -0600 Subject: [PATCH 3/3] fix: correction in link path --- libs/components/stories/Introduction.stories.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/libs/components/stories/Introduction.stories.mdx b/libs/components/stories/Introduction.stories.mdx index adf958b66a..4edf6cc38e 100644 --- a/libs/components/stories/Introduction.stories.mdx +++ b/libs/components/stories/Introduction.stories.mdx @@ -19,14 +19,14 @@ the raw components. We'll layer in documenation over time. Ping us in the **#design-system** channel on Slack for help.
- + App shell Our standard starter app, great for multi-level UIs that need to show a dashboard, subsections with lists of items, and detail pages to view those items. - + Kitchen sinkA large collection of all our components on a single screen, to give a high level overview of what's available and to