tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

content-search-handoff-ui.stories.mjs (2421B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 
      5 // eslint-disable-next-line import/no-unresolved
      6 import { html } from "lit.all.mjs";
      7 import "./contentSearchHandoffUI.mjs";
      8 
      9 window.MozXULElement.insertFTLIfNeeded("branding/brand.ftl");
     10 window.MozXULElement.insertFTLIfNeeded("browser/newtab/newtab.ftl");
     11 window.MozXULElement.insertFTLIfNeeded("browser/aboutPrivateBrowsing.ftl");
     12 
     13 export default {
     14  title: "Domain-specific UI Widgets/Search/Handoff Search Bar",
     15  component: "content-search-handoff-ui",
     16  argTypes: {},
     17 };
     18 
     19 /**
     20 * This little dance lets us mock out the response that the ContentSearch
     21 * parent/child actor pair returns when the ContentSearchHandoffUIController
     22 * requests engine information.
     23 */
     24 addEventListener("ContentSearchClient", e => {
     25  switch (e.detail.type) {
     26    case "GetEngine": {
     27      // We use the setTimeout(0) to queue up the response to occur on the next
     28      // tick of the event loop.
     29      setTimeout(() => {
     30        e.target.dispatchEvent(
     31          new CustomEvent("ContentSearchService", {
     32            detail: {
     33              type: "Engine",
     34              data: {
     35                engine: {
     36                  name: "Google",
     37                  iconData: "chrome://global/skin/icons/search-glass.svg",
     38                  isConfigEngine: true,
     39                },
     40                isPrivateEngine: false,
     41              },
     42            },
     43          })
     44        );
     45      }, 0);
     46      break;
     47    }
     48  }
     49 });
     50 
     51 const Template = ({ fakeFocus, disabled }) => html`
     52  <style>
     53    .search-inner-wrapper {
     54      display: flex;
     55      min-height: 52px;
     56      margin: 0 auto;
     57      width: 720px;
     58    }
     59    content-search-handoff-ui {
     60      --content-search-handoff-ui-fill: light-dark(#000000, #ffffff);
     61      height: 50px;
     62      width: 100%;
     63    }
     64  </style>
     65 
     66  <div class="search-inner-wrapper">
     67    <content-search-handoff-ui
     68      ?fakeFocus=${fakeFocus}
     69      ?disabled=${disabled}
     70    ></content-search-handoff-ui>
     71  </div>
     72 `;
     73 
     74 export const Focused = Template.bind({});
     75 Focused.args = {
     76  fakeFocus: true,
     77  disabled: false,
     78 };
     79 
     80 export const Unfocused = Template.bind({});
     81 Unfocused.args = {
     82  fakeFocus: false,
     83  disabled: false,
     84 };
     85 export const Disabled = Template.bind({});
     86 Disabled.args = {
     87  fakeFocus: true,
     88  disabled: true,
     89 };