Source code
Revision control
Copy as Markdown
Other Tools
/* 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
// eslint-disable-next-line import/no-unresolved
import { html } from "lit.all.mjs";
import "./contentSearchHandoffUI.mjs";
window.MozXULElement.insertFTLIfNeeded("branding/brand.ftl");
window.MozXULElement.insertFTLIfNeeded("browser/newtab/newtab.ftl");
window.MozXULElement.insertFTLIfNeeded("browser/aboutPrivateBrowsing.ftl");
export default {
title: "Domain-specific UI Widgets/Search/Handoff Search Bar",
component: "content-search-handoff-ui",
argTypes: {},
};
/**
* This little dance lets us mock out the response that the ContentSearch
* parent/child actor pair returns when the ContentSearchHandoffUIController
* requests engine information.
*/
addEventListener("ContentSearchClient", e => {
switch (e.detail.type) {
case "GetEngine": {
// We use the setTimeout(0) to queue up the response to occur on the next
// tick of the event loop.
setTimeout(() => {
e.target.dispatchEvent(
new CustomEvent("ContentSearchService", {
detail: {
type: "Engine",
data: {
engine: {
name: "Google",
iconData: "chrome://global/skin/icons/search-glass.svg",
isConfigEngine: true,
},
isPrivateEngine: false,
},
},
})
);
}, 0);
break;
}
}
});
const Template = ({ fakeFocus, disabled }) => html`
<style>
.search-inner-wrapper {
display: flex;
min-height: 52px;
margin: 0 auto;
width: 720px;
}
content-search-handoff-ui {
--content-search-handoff-ui-fill: light-dark(#000000, #ffffff);
height: 50px;
width: 100%;
}
</style>
<div class="search-inner-wrapper">
<content-search-handoff-ui
?fakeFocus=${fakeFocus}
?disabled=${disabled}
></content-search-handoff-ui>
</div>
`;
export const Focused = Template.bind({});
Focused.args = {
fakeFocus: true,
disabled: false,
};
export const Unfocused = Template.bind({});
Unfocused.args = {
fakeFocus: false,
disabled: false,
};
export const Disabled = Template.bind({});
Disabled.args = {
fakeFocus: true,
disabled: true,
};