Skip to content

Commit

Permalink
fix(storybook): update toggled state in fullscreen dialog
Browse files Browse the repository at this point in the history
  • Loading branch information
@bsahitya
bsahitya committed Nov 4, 2024
1 parent 67f10f7 commit c9ee07b
Show file tree
Hide file tree
Showing 2 changed files with 155 additions and 150 deletions.
146 changes: 74 additions & 72 deletions libs/components/src/focused-page/focused-page.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 -->
Expand Down
159 changes: 81 additions & 78 deletions libs/components/src/full-screen-dialog/full-screen-dialog.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 -->
Expand Down

0 comments on commit c9ee07b

Please sign in to comment.