1 files changed, 54 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..7441cad91b
--- /dev/null
+++ b/toolkit/content/widgets/moz-toggle/moz-toggle.stories.mjs
@@ -0,0 +1,54 @@
+/* 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/. */
+
+import { html, ifDefined } from "../vendor/lit.all.mjs";
+// eslint-disable-next-line import/no-unassigned-import
+import "./moz-toggle.mjs";
+
+export default {
+  title: "Design System/Experiments/MozToggle",
+  parameters: {
+    actions: {
+      handles: ["toggle"],
+    },
+  },
+};
+
+const Template = ({ pressed, disabled, label, description, ariaLabel }) => html`
+  <div style="max-width: 400px">
+    <moz-toggle
+      ?pressed=${pressed}
+      ?disabled=${disabled}
+      label=${ifDefined(label)}
+      description=${ifDefined(description)}
+      aria-label=${ifDefined(ariaLabel)}
+    ></moz-toggle>
+  </div>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  pressed: 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 = {
+  pressed: true,
+  disabled: false,
+  label: "This is the label",
+};
+
+export const WithDescription = Template.bind({});
+WithDescription.args = {
+  ...WithLabel.args,
+  description: "This is the description",
+};