summaryrefslogtreecommitdiffstats
path: root/toolkit/content/widgets/moz-toggle/moz-toggle.stories.mjs
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /toolkit/content/widgets/moz-toggle/moz-toggle.stories.mjs
parentInitial commit. (diff)
downloadfirefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'toolkit/content/widgets/moz-toggle/moz-toggle.stories.mjs')
-rw-r--r--toolkit/content/widgets/moz-toggle/moz-toggle.stories.mjs96
1 files changed, 96 insertions, 0 deletions
diff --git a/toolkit/content/widgets/moz-toggle/moz-toggle.stories.mjs b/toolkit/content/widgets/moz-toggle/moz-toggle.stories.mjs
new file mode 100644
index 0000000000..fa41e7c888
--- /dev/null
+++ b/toolkit/content/widgets/moz-toggle/moz-toggle.stories.mjs
@@ -0,0 +1,96 @@
+/* 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/. */
+/* eslint-disable import/no-unassigned-import */
+
+import { html, ifDefined } from "../vendor/lit.all.mjs";
+import "./moz-toggle.mjs";
+import "../moz-support-link/moz-support-link.mjs";
+
+export default {
+ title: "UI Widgets/Toggle",
+ component: "moz-toggle",
+ parameters: {
+ status: "in-development",
+ actions: {
+ handles: ["toggle"],
+ },
+ fluent: `
+moz-toggle-aria-label =
+ .aria-label = This is the aria-label
+moz-toggle-label =
+ .label = This is the label
+moz-toggle-description =
+ .label = This is the label
+ .description = This is the description.
+ `,
+ },
+};
+
+const Template = ({
+ pressed,
+ disabled,
+ label,
+ description,
+ ariaLabel,
+ l10nId,
+ hasSupportLink,
+ accessKey,
+}) => html`
+ <div style="max-width: 400px">
+ <moz-toggle
+ ?pressed=${pressed}
+ ?disabled=${disabled}
+ label=${ifDefined(label)}
+ description=${ifDefined(description)}
+ aria-label=${ifDefined(ariaLabel)}
+ data-l10n-id=${ifDefined(l10nId)}
+ data-l10n-attrs="aria-label, description, label"
+ accesskey=${ifDefined(accessKey)}
+ >
+ ${hasSupportLink
+ ? html`
+ <a
+ is="moz-support-link"
+ support-page="addons"
+ slot="support-link"
+ ></a>
+ `
+ : ""}
+ </moz-toggle>
+ </div>
+`;
+
+export const Toggle = Template.bind({});
+Toggle.args = {
+ pressed: true,
+ disabled: false,
+ l10nId: "moz-toggle-aria-label",
+};
+
+export const ToggleDisabled = Template.bind({});
+ToggleDisabled.args = {
+ ...Toggle.args,
+ disabled: true,
+};
+
+export const WithLabel = Template.bind({});
+WithLabel.args = {
+ pressed: true,
+ disabled: false,
+ l10nId: "moz-toggle-label",
+ hasSupportLink: false,
+ accessKey: "h",
+};
+
+export const WithDescription = Template.bind({});
+WithDescription.args = {
+ ...WithLabel.args,
+ l10nId: "moz-toggle-description",
+};
+
+export const WithSupportLink = Template.bind({});
+WithSupportLink.args = {
+ ...WithDescription.args,
+ hasSupportLink: true,
+};