1efc441126
This component inherits most of its starting functionality from the moz-input-text component, and so moz-input-search appears relatively barebones at the moment. Having the basic component in tree will allow us to add the necessary features to this component more easily. The overlapping functionality with moz-input-text is covered by the newly added test, test_moz_input_search. This test file is effectively a copy and paste of the test_moz_input_text file until the search specific features are added. Additionally, we added a new test helper function, testCommonInputEvents, that covers the common events that all input elements generate. This component is another example of extending existing reusable components which allows relatively quick standing up of new components. Differential Revision: https://phabricator.services.mozilla.com/D234109
135 lines
3.4 KiB
JavaScript
135 lines
3.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/. */
|
|
|
|
import { html, ifDefined } from "../vendor/lit.all.mjs";
|
|
import "./moz-input-search.mjs";
|
|
|
|
export default {
|
|
title: "UI Widgets/Input Search",
|
|
component: "moz-input-search",
|
|
argTypes: {
|
|
l10nId: {
|
|
options: [
|
|
"moz-input-search-label",
|
|
"moz-input-search-placeholder",
|
|
"moz-input-search-description",
|
|
"moz-input-search-label-wrapped",
|
|
],
|
|
control: { type: "select" },
|
|
},
|
|
},
|
|
parameters: {
|
|
status: "in-development",
|
|
handles: ["change", "input"],
|
|
fluent: `
|
|
moz-input-search-label =
|
|
.label = This is a search input
|
|
moz-input-search-placeholder =
|
|
.label = This is a search input
|
|
.placeholder = Placeholder text
|
|
moz-input-search-description =
|
|
.label = This is a search input
|
|
.description = Description for the search input
|
|
.placeholder = Placeholder text
|
|
moz-input-search-label-wrapped =
|
|
.label = Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique justo leo, ac pellentesque lacus gravida vitae. Nam pellentesque suscipit venenatis.
|
|
`,
|
|
},
|
|
};
|
|
|
|
const Template = ({
|
|
name,
|
|
value,
|
|
iconSrc,
|
|
disabled,
|
|
l10nId,
|
|
description,
|
|
supportPage,
|
|
accessKey,
|
|
hasSlottedDescription,
|
|
hasSlottedSupportLink,
|
|
}) => html`
|
|
<moz-input-search
|
|
name=${name}
|
|
value=${ifDefined(value || null)}
|
|
iconsrc=${ifDefined(iconSrc || null)}
|
|
?disabled=${disabled}
|
|
data-l10n-id=${l10nId}
|
|
support-page=${ifDefined(supportPage || null)}
|
|
accesskey=${ifDefined(accessKey || null)}
|
|
>
|
|
${hasSlottedDescription
|
|
? html`<div slot="description">${description}</div>`
|
|
: ""}
|
|
${hasSlottedSupportLink
|
|
? html`<a slot="support-link" href="www.example.com">Click me!</a>`
|
|
: ""}
|
|
</moz-input-search>
|
|
`;
|
|
|
|
export const Default = Template.bind({});
|
|
Default.args = {
|
|
name: "example-moz-input-search",
|
|
value: "",
|
|
iconSrc: "",
|
|
disabled: false,
|
|
l10nId: "moz-input-search-label",
|
|
supportPage: "",
|
|
accessKey: "",
|
|
hasSlottedDescription: false,
|
|
hasSlottedSupportLink: false,
|
|
};
|
|
|
|
export const WithPlaceholder = Template.bind({});
|
|
WithPlaceholder.args = {
|
|
...Default.args,
|
|
l10nId: "moz-input-search-placeholder",
|
|
};
|
|
|
|
export const WithIcon = Template.bind({});
|
|
WithIcon.args = {
|
|
...Default.args,
|
|
iconSrc: "chrome://global/skin/icons/highlights.svg",
|
|
};
|
|
|
|
export const withDescription = Template.bind({});
|
|
withDescription.args = {
|
|
...Default.args,
|
|
l10nId: "moz-input-search-description",
|
|
};
|
|
|
|
export const WithSlottedDescription = Template.bind({});
|
|
WithSlottedDescription.args = {
|
|
...Default.args,
|
|
description: "This is a custom slotted description.",
|
|
hasSlottedDescription: true,
|
|
};
|
|
|
|
export const Disabled = Template.bind({});
|
|
Disabled.args = {
|
|
...Default.args,
|
|
l10nId: "moz-input-search-description",
|
|
disabled: true,
|
|
};
|
|
|
|
export const WithAccesskey = Template.bind({});
|
|
WithAccesskey.args = {
|
|
...Default.args,
|
|
accessKey: "s",
|
|
};
|
|
|
|
export const WithSupportLink = Template.bind({});
|
|
WithSupportLink.args = {
|
|
...Default.args,
|
|
supportPage: "support-page",
|
|
l10nId: "moz-input-search-description",
|
|
};
|
|
|
|
export const WithSlottedSupportLink = Template.bind({});
|
|
WithSlottedSupportLink.args = {
|
|
...Default.args,
|
|
hasSlottedSupportLink: true,
|
|
l10nId: "moz-input-search-description",
|
|
};
|