forked from mirrors/gecko-dev
eb9fd58f2b
This is still far from perfect given the limitations of the Storybook web components package, but I figured this was worth putting up since it's still an improvement over the current state of our args tables (I think). I'm mostly leaving the default generated `custom-elements-manifest.json` alone save for filtering some internal properties we don't want documented since they shouldn't really be accessed directly. If it seems too strange to just have the `aria-label` attr documented we could possibly remove `attributes` from the docs for now (this happens because it's the only attr where the name is different from the property name). Open to feedback/thoughts on if this is useful or too wonky for now given the weirdness around how Storybook creates naming collisions. Differential Revision: https://phabricator.services.mozilla.com/D162599
55 lines
1.3 KiB
JavaScript
55 lines
1.3 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/. */
|
|
|
|
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",
|
|
component: "moz-toggle",
|
|
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",
|
|
};
|