nagai/fune
3
0
Fork 0
forked from mirrors/gecko-dev
Code Pull requests Activity

Bug 1818284 - Use Lit to construct the Storybook instance of the new MigrationWizard. r=hjones

Browse source 
This will make it easier to use Storybook to simulate how the MigrationWizard is likely to
be used in practice - which is to say, declaratively.

Differential Revision: https://phabricator.services.mozilla.com/D170666
This commit is contained in:
Mike Conley 2023-02-22 19:44:13 +00:00
parent 89d7b89be1
commit fc12997ae0
2 changed files with 23 additions and 17 deletions
repo.diff.show_diff_stats Download patch file Download diff file Expand all files Collapse all files

13
browser/components/migration/content/migration-wizard.mjs
View file

@ -166,6 +166,19 @@ export class MigrationWizard extends HTMLElement {
);
}
/**
* This setter can be used in the event that the MigrationWizard is being
* inserted via Lit, and the caller wants to set state declaratively using
* a property expression.
*
* @param {object} state
* The state object to pass to setState.
* @see MigrationWizard.setState.
*/
set state(state) {
this.setState(state);
}
/**
* This is the main entrypoint for updating the state and appearance of
* the wizard.

27
browser/components/storybook/stories/migration-wizard.stories.mjs
View file

@ -3,6 +3,7 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
// Imported for side-effects.
import { html } from "lit.all.mjs";
// eslint-disable-next-line import/no-unassigned-import
import "browser/components/migration/content/migration-wizard.mjs";
import { MigrationWizardConstants } from "chrome://browser/content/migration/migration-wizard-constants.mjs";
@ -72,29 +73,21 @@ const FAKE_BROWSER_LIST = [
},
];
const Template = ({ state, dialogMode }) => {
let wiz = document.createElement("migration-wizard");
wiz.toggleAttribute("dialog-mode", dialogMode);
wiz.setState(state);
let card = document.createElement("div");
card.classList.add("card", "card-no-hover");
card.style.width = "fit-content";
card.append(wiz);
let style = document.createElement("style");
style.textContent = `
const Template = ({ state, dialogMode }) => html`
<style>
@media (prefers-reduced-motion: no-preference) {
migration-wizard::part(progress-spinner) {
mask: url(./migration/progress-mask.svg);
}
}
`;
</style>
card.prepend(style);
return card;
};
<div class="card card-no-hover" style="width: fit-content">
<migration-wizard ?dialog-mode=${dialogMode} .state=${state}>
<!-- <panel-list></panel-list> -->
</migration-wizard>
</div>
`;
export const MainSelectorVariant1 = Template.bind({});
MainSelectorVariant1.args = {