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
64 lines
1.6 KiB
JavaScript
64 lines
1.6 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-support-link.mjs";
|
|
|
|
MozXULElement.insertFTLIfNeeded(
|
|
"locales-preview/moz-support-link-storybook.ftl"
|
|
);
|
|
MozXULElement.insertFTLIfNeeded("browser/components/mozSupportLink.ftl");
|
|
|
|
const fluentStrings = [
|
|
"storybook-amo-test",
|
|
"storybook-fluent-test",
|
|
"moz-support-link-text",
|
|
];
|
|
|
|
export default {
|
|
title: "Design System/Experiments/MozSupportLink",
|
|
component: "moz-support-link",
|
|
argTypes: {
|
|
"data-l10n-id": {
|
|
options: [fluentStrings[0], fluentStrings[1], fluentStrings[2]],
|
|
control: { type: "select" },
|
|
},
|
|
onClick: { action: "clicked" },
|
|
},
|
|
};
|
|
|
|
const Template = ({
|
|
"data-l10n-id": dataL10nId,
|
|
"support-page": supportPage,
|
|
"utm-content": utmContent,
|
|
}) => html`
|
|
<a
|
|
is="moz-support-link"
|
|
data-l10n-id=${ifDefined(dataL10nId)}
|
|
support-page=${ifDefined(supportPage)}
|
|
utm-content=${ifDefined(utmContent)}
|
|
>
|
|
</a>
|
|
`;
|
|
|
|
export const withAMOUrl = Template.bind({});
|
|
withAMOUrl.args = {
|
|
"data-l10n-id": fluentStrings[0],
|
|
"support-page": "addons",
|
|
"utm-content": "promoted-addon-badge",
|
|
};
|
|
|
|
export const Primary = Template.bind({});
|
|
Primary.args = {
|
|
"support-page": "preferences",
|
|
"utm-content": "",
|
|
};
|
|
|
|
export const withFluentId = Template.bind({});
|
|
withFluentId.args = {
|
|
"data-l10n-id": fluentStrings[1],
|
|
"support-page": "preferences",
|
|
"utm-content": "",
|
|
};
|