forked from mirrors/gecko-dev
6219c6dbcb
Backed out changeset af5a48a4b3d3 (bug 1801426) Backed out changeset f4f8e2b95246 (bug 1790483)
53 lines
1.4 KiB
JavaScript
53 lines
1.4 KiB
JavaScript
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
|
|
// Bug 1790483: Lit is not bundled yet, this is dev only.
|
|
// eslint-disable-next-line import/no-unresolved
|
|
import { html, ifDefined } from "../vendor/lit.all.mjs";
|
|
// eslint-disable-next-line import/no-unassigned-import
|
|
import "./fx-toggle.mjs";
|
|
|
|
const fxToggleConfig = {
|
|
title: "Design System/Experiments/FxToggle",
|
|
};
|
|
|
|
const Template = ({ checked, disabled, label, description, ariaLabel }) => html`
|
|
<div style="max-width: 400px">
|
|
<fx-toggle
|
|
?checked=${checked}
|
|
?disabled=${disabled}
|
|
label=${ifDefined(label)}
|
|
description=${ifDefined(description)}
|
|
aria-label=${ifDefined(ariaLabel)}
|
|
></fx-toggle>
|
|
</div>
|
|
`;
|
|
|
|
export const Default = Template.bind({});
|
|
Default.args = {
|
|
checked: true,
|
|
disabled: false,
|
|
ariaLabel: "This is the aria-label",
|
|
};
|
|
|
|
export const Disabled = Template.bind({});
|
|
Disabled.args = {
|
|
...Default.args,
|
|
disabled: true,
|
|
};
|
|
|
|
export const WithLabel = Template.bind({});
|
|
WithLabel.args = {
|
|
checked: true,
|
|
disabled: false,
|
|
label: "This is the label",
|
|
};
|
|
|
|
export const WithDescription = Template.bind({});
|
|
WithDescription.args = {
|
|
...WithLabel.args,
|
|
description: "This is the description",
|
|
};
|
|
|
|
export default fxToggleConfig;
|