From c9ee07b9d297017d6b4e16ef7e1755d07b3aacab Mon Sep 17 00:00:00 2001
From: Sahitya Buddharaju <sahitya.buddharaju@gmail.com>
Date: Mon, 4 Nov 2024 10:25:10 -0600
Subject: [PATCH] fix(storybook): update toggled state in fullscreen dialog

---
 .../src/focused-page/focused-page.stories.js  | 146 ++++++++--------
 .../full-screen-dialog.stories.js             | 159 +++++++++---------
 2 files changed, 155 insertions(+), 150 deletions(-)

diff --git a/libs/components/src/focused-page/focused-page.stories.js b/libs/components/src/focused-page/focused-page.stories.js
index 738eb32d6f..0757c293fb 100644
--- a/libs/components/src/focused-page/focused-page.stories.js
+++ b/libs/components/src/focused-page/focused-page.stories.js
@@ -25,11 +25,14 @@ const Template = ({ helpOpen, helpResizable, hideTopBorder }) => {
     'DOMContentLoaded',
     () => {
       const helpCloseButton = document.body.querySelector('.help-close');
+      const helpToggleButton = document.body.querySelector('.help-toggle');
       helpCloseButton.addEventListener('click', () => {
         const dialog = document.body.querySelector('#focused-page');
         dialog.helpOpen = false;
+        helpToggleButton.on = false;
+        helpToggleButton.toggledOn = false;
       });
-      const helpToggleButton = document.body.querySelector('.help-toggle');
+
       helpToggleButton.addEventListener('click', () => {
         const dialog = document.body.querySelector('#focused-page');
         dialog.helpOpen = !dialog.helpOpen;
@@ -44,82 +47,81 @@ const Template = ({ helpOpen, helpResizable, hideTopBorder }) => {
   }${helpOpen ? ' helpOpen' : ''}${hideTopBorder ? ' hideTopBorder' : ''}>
     <!-- Content to be rendered in the focused page component -->
     <!-- Replace with any content as desired -->
-    <div style="margin: 0.5rem;">
-        <cv-toolbar>
-            <span slot="title">
-                <cv-typography scale="headline4">
-                    Connect data source
-                </cv-typography>
-            </span>
-            <cv-icon-button-toggle onIcon="help" offIcon="help" class="help-toggle"
-                slot="actionItems"></cv-icon-button-toggle>
-        </cv-toolbar>
-        <div style="display:flex; gap: 3rem; flex-wrap: wrap; padding: 2rem 1rem 1.5rem; max-width: 1200px">
-            <div>
-                <div style="display:flex;">
-                    <span>
-                        <cv-icon-button-toggle onIcon="info" offIcon="info" toggledOn></cv-icon-button-toggle>
-                    </span>
-                    <div style="display: inline-block; margin: 0 0 1rem 1rem;">
-                        <cv-typography scale="subtitle1">
-                            Select model
-                        </cv-typography>
-                        <cv-typography scale="caption">
-                            Select the industry data model for your organization
-                        </cv-typography>
-                    </div>
-                </div>
-                <div style="display:flex; margin-top: 1rem;">
-                    <span>
-                        <cv-icon-button-toggle onIcon="info" offIcon="info" toggledOn></cv-icon-button-toggle>
-                    </span>
-                    <div style="display: inline-block; margin: 0 0 1rem 1rem;">
-                        <cv-typography scale="subtitle1">
-                            Review details
-                        </cv-typography>
-                        <cv-typography scale="caption">
-                            Preview the selected model and sample schema
-                        </cv-typography>
-                    </div>
+    
+    <cv-toolbar>
+        <span slot="title">
+            <cv-typography scale="headline4">
+                Connect data source
+            </cv-typography>
+        </span>
+        <cv-icon-button-toggle onIcon="help" offIcon="help" class="help-toggle"
+            slot="actionItems"></cv-icon-button-toggle>
+    </cv-toolbar>
+    <div style="display:flex; gap: 3rem; flex-wrap: wrap; padding: 2rem 1rem 1.5rem; max-width: 1200px">
+        <div>
+            <div style="display:flex;">
+                <span>
+                    <cv-icon-button-toggle onIcon="info" offIcon="info" toggledOn></cv-icon-button-toggle>
+                </span>
+                <div style="display: inline-block; margin: 0 0 1rem 1rem;">
+                    <cv-typography scale="subtitle1">
+                        Select model
+                    </cv-typography>
+                    <cv-typography scale="caption">
+                        Select the industry data model for your organization
+                    </cv-typography>
                 </div>
-                <div style="display:flex; margin-top: 1rem;">
-                    <span>
-                        <cv-icon-button-toggle onIcon="info" offIcon="info" toggledOn></cv-icon-button-toggle>
-                    </span>
-                    <div style="display: inline-block; margin: 0 0 1rem 1rem;">
-                        <cv-typography scale="subtitle1">
-                            Install
-                        </cv-typography>
-                        <cv-typography scale="caption">
-                            Acknowledge creation of database and install
-                        </cv-typography>
-                    </div>
+            </div>
+            <div style="display:flex; margin-top: 1rem;">
+                <span>
+                    <cv-icon-button-toggle onIcon="info" offIcon="info" toggledOn></cv-icon-button-toggle>
+                </span>
+                <div style="display: inline-block; margin: 0 0 1rem 1rem;">
+                    <cv-typography scale="subtitle1">
+                        Review details
+                    </cv-typography>
+                    <cv-typography scale="caption">
+                        Preview the selected model and sample schema
+                    </cv-typography>
                 </div>
             </div>
-            <div
-                style="display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 1rem; flex: 1">
-                <cv-radio-icon>
-                    <cv-icon slot="icon">work</cv-icon>
-                    <div slot="text">Balanced</div>
-                    <div slot="text">Every week</div>
-                </cv-radio-icon>
-                <cv-radio-icon>
-                    <cv-icon slot="icon">work</cv-icon>
-                    <div slot="text">Balanced</div>
-                    <div slot="text">Every week</div>
-                </cv-radio-icon>
-                <cv-radio-icon>
-                    <cv-icon slot="icon">work</cv-icon>
-                    <div slot="text">Balanced</div>
-                    <div slot="text">Every week</div>
-                </cv-radio-icon>
-                <cv-radio-icon>
-                    <cv-icon slot="icon">work</cv-icon>
-                    <div slot="text">Balanced</div>
-                    <div slot="text">Every week</div>
-                </cv-radio-icon>
+            <div style="display:flex; margin-top: 1rem;">
+                <span>
+                    <cv-icon-button-toggle onIcon="info" offIcon="info" toggledOn></cv-icon-button-toggle>
+                </span>
+                <div style="display: inline-block; margin: 0 0 1rem 1rem;">
+                    <cv-typography scale="subtitle1">
+                        Install
+                    </cv-typography>
+                    <cv-typography scale="caption">
+                        Acknowledge creation of database and install
+                    </cv-typography>
+                </div>
             </div>
         </div>
+        <div
+            style="display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 1rem; flex: 1">
+            <cv-radio-icon>
+                <cv-icon slot="icon">work</cv-icon>
+                <div slot="text">Balanced</div>
+                <div slot="text">Every week</div>
+            </cv-radio-icon>
+            <cv-radio-icon>
+                <cv-icon slot="icon">work</cv-icon>
+                <div slot="text">Balanced</div>
+                <div slot="text">Every week</div>
+            </cv-radio-icon>
+            <cv-radio-icon>
+                <cv-icon slot="icon">work</cv-icon>
+                <div slot="text">Balanced</div>
+                <div slot="text">Every week</div>
+            </cv-radio-icon>
+            <cv-radio-icon>
+                <cv-icon slot="icon">work</cv-icon>
+                <div slot="text">Balanced</div>
+                <div slot="text">Every week</div>
+            </cv-radio-icon>
+        </div>
     </div>
     <!-- Content rendered in the help section of the component -->
     <!-- Replace with any content as desired -->
diff --git a/libs/components/src/full-screen-dialog/full-screen-dialog.stories.js b/libs/components/src/full-screen-dialog/full-screen-dialog.stories.js
index acb1672849..aedabb7b1f 100644
--- a/libs/components/src/full-screen-dialog/full-screen-dialog.stories.js
+++ b/libs/components/src/full-screen-dialog/full-screen-dialog.stories.js
@@ -24,23 +24,27 @@ const Template = ({ helpOpen, helpResizable, open, escapeKeyAction }) => {
     'DOMContentLoaded',
     () => {
       const button = document.body.querySelector('#dialog-button');
+      const helpCloseButton = document.body.querySelector('.help-close');
+      const helpToggleButton = document.body.querySelector('.help-toggle');
+      const fullscreenCloseButton = document.body.querySelector(
+        '.full-screen-dialog-close'
+      );
       button.addEventListener('click', () => {
         const dialog = document.body.querySelector('#dialog1');
         dialog.open = true;
       });
-      const helpCloseButton = document.body.querySelector('.help-close');
+
       helpCloseButton.addEventListener('click', () => {
         const dialog = document.body.querySelector('#dialog1');
         dialog.helpOpen = false;
+        helpToggleButton.on = false;
+        helpToggleButton.toggledOn = false;
       });
-      const helpToggleButton = document.body.querySelector('.help-toggle');
+
       helpToggleButton.addEventListener('click', () => {
         const dialog = document.body.querySelector('#dialog1');
         dialog.helpOpen = !dialog.helpOpen;
       });
-      const fullscreenCloseButton = document.body.querySelector(
-        '.full-screen-dialog-close'
-      );
       fullscreenCloseButton.addEventListener('click', () => {
         const dialog = document.body.querySelector('#dialog1');
         dialog.open = false;
@@ -58,84 +62,83 @@ const Template = ({ helpOpen, helpResizable, open, escapeKeyAction }) => {
   }${helpOpen ? ' helpOpen' : ''}>
     <!-- Content to be rendered in the full-screen dialog component -->
     <!-- Replace with any content as desired -->
-    <div style="margin: 0.5rem;">
-        <cv-toolbar>
-            <span slot="title">
-                <cv-typography scale="headline4">
-                    Connect data source
-                </cv-typography>
-            </span>
-            <cv-icon-button-toggle onIcon="help" offIcon="help" class="help-toggle"
-                slot="actionItems"></cv-icon-button-toggle>
-            <cv-icon-button icon="close" class="full-screen-dialog-close"
-                slot="actionItems"></cv-icon-button>
-        </cv-toolbar>
-        <div style="display:flex; gap: 3rem; flex-wrap: wrap; padding: 2rem 1rem 1.5rem; max-width: 1200px">
-            <div>
-                <div style="display:flex;">
-                    <span>
-                        <cv-icon-button-toggle onIcon="info" offIcon="info" toggledOn></cv-icon-button-toggle>
-                    </span>
-                    <div style="display: inline-block; margin: 0 0 1rem 1rem;">
-                        <cv-typography scale="subtitle1">
-                            Select model
-                        </cv-typography>
-                        <cv-typography scale="caption">
-                            Select the industry data model for your organization
-                        </cv-typography>
-                    </div>
-                </div>
-                <div style="display:flex; margin-top: 1rem;">
-                    <span>
-                        <cv-icon-button-toggle onIcon="info" offIcon="info" toggledOn></cv-icon-button-toggle>
-                    </span>
-                    <div style="display: inline-block; margin: 0 0 1rem 1rem;">
-                        <cv-typography scale="subtitle1">
-                            Review details
-                        </cv-typography>
-                        <cv-typography scale="caption">
-                            Preview the selected model and sample schema
-                        </cv-typography>
-                    </div>
+    
+    <cv-toolbar>
+        <span slot="title">
+            <cv-typography scale="headline4">
+                Connect data source
+            </cv-typography>
+        </span>
+        <cv-icon-button-toggle onIcon="help" offIcon="help" class="help-toggle"
+            slot="actionItems"></cv-icon-button-toggle>
+        <cv-icon-button icon="close" class="full-screen-dialog-close"
+            slot="actionItems"></cv-icon-button>
+    </cv-toolbar>
+    <div style="display:flex; gap: 3rem; flex-wrap: wrap; padding: 2rem 1rem 1.5rem; max-width: 1200px">
+        <div>
+            <div style="display:flex;">
+                <span>
+                    <cv-icon-button-toggle onIcon="info" offIcon="info" toggledOn></cv-icon-button-toggle>
+                </span>
+                <div style="display: inline-block; margin: 0 0 1rem 1rem;">
+                    <cv-typography scale="subtitle1">
+                        Select model
+                    </cv-typography>
+                    <cv-typography scale="caption">
+                        Select the industry data model for your organization
+                    </cv-typography>
                 </div>
-                <div style="display:flex; margin-top: 1rem;">
-                    <span>
-                        <cv-icon-button-toggle onIcon="info" offIcon="info" toggledOn></cv-icon-button-toggle>
-                    </span>
-                    <div style="display: inline-block; margin: 0 0 1rem 1rem;">
-                        <cv-typography scale="subtitle1">
-                            Install
-                        </cv-typography>
-                        <cv-typography scale="caption">
-                            Acknowledge creation of database and install
-                        </cv-typography>
-                    </div>
+            </div>
+            <div style="display:flex; margin-top: 1rem;">
+                <span>
+                    <cv-icon-button-toggle onIcon="info" offIcon="info" toggledOn></cv-icon-button-toggle>
+                </span>
+                <div style="display: inline-block; margin: 0 0 1rem 1rem;">
+                    <cv-typography scale="subtitle1">
+                        Review details
+                    </cv-typography>
+                    <cv-typography scale="caption">
+                        Preview the selected model and sample schema
+                    </cv-typography>
                 </div>
             </div>
-            <div
-                style="display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 1rem; flex: 1">
-                <cv-radio-icon>
-                    <cv-icon slot="icon">work</cv-icon>
-                    <div slot="text">Balanced</div>
-                    <div slot="text">Every week</div>
-                </cv-radio-icon>
-                <cv-radio-icon>
-                    <cv-icon slot="icon">work</cv-icon>
-                    <div slot="text">Balanced</div>
-                    <div slot="text">Every week</div>
-                </cv-radio-icon>
-                <cv-radio-icon>
-                    <cv-icon slot="icon">work</cv-icon>
-                    <div slot="text">Balanced</div>
-                    <div slot="text">Every week</div>
-                </cv-radio-icon>
-                <cv-radio-icon>
-                    <cv-icon slot="icon">work</cv-icon>
-                    <div slot="text">Balanced</div>
-                    <div slot="text">Every week</div>
-                </cv-radio-icon>
+            <div style="display:flex; margin-top: 1rem;">
+                <span>
+                    <cv-icon-button-toggle onIcon="info" offIcon="info" toggledOn></cv-icon-button-toggle>
+                </span>
+                <div style="display: inline-block; margin: 0 0 1rem 1rem;">
+                    <cv-typography scale="subtitle1">
+                        Install
+                    </cv-typography>
+                    <cv-typography scale="caption">
+                        Acknowledge creation of database and install
+                    </cv-typography>
+                </div>
             </div>
         </div>
+        <div
+            style="display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 1rem; flex: 1">
+            <cv-radio-icon>
+                <cv-icon slot="icon">work</cv-icon>
+                <div slot="text">Balanced</div>
+                <div slot="text">Every week</div>
+            </cv-radio-icon>
+            <cv-radio-icon>
+                <cv-icon slot="icon">work</cv-icon>
+                <div slot="text">Balanced</div>
+                <div slot="text">Every week</div>
+            </cv-radio-icon>
+            <cv-radio-icon>
+                <cv-icon slot="icon">work</cv-icon>
+                <div slot="text">Balanced</div>
+                <div slot="text">Every week</div>
+            </cv-radio-icon>
+            <cv-radio-icon>
+                <cv-icon slot="icon">work</cv-icon>
+                <div slot="text">Balanced</div>
+                <div slot="text">Every week</div>
+            </cv-radio-icon>
+        </div>
     </div>
     <!-- Content rendered in the help section of the component -->
     <!-- Replace with any content as desired -->