tor-browser

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

nav-notice.stories.mjs (3067B)

      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 import { html, ifDefined } from "chrome://global/content/vendor/lit.all.mjs";
      6 import "chrome://browser/content/preferences/widgets/nav-notice.mjs";
      7 
      8 const THEMES = {
      9  Default: {},
     10  Magenta: {
     11    themeBg: "hsla(335, 91%,75%, 1)",
     12    themeFg: "hsla(0, 0%, 0%, 1)",
     13  },
     14  "Ocean Blue": {
     15    themeBg: "hsla(234, 90%, 19%, 1)",
     16    themeFg: "hsla(0, 0%, 100%, 1)",
     17  },
     18  "Marigold Yellow": {
     19    themeBg: "hsla(45, 92%, 77%, 1)",
     20    themeFg: "hsla(0, 0%, 0%, 1)",
     21  },
     22  "Brick Red": {
     23    themeBg: "hsla(11, 87%, 32%, 1)",
     24    themeFg: "hsla(0, 0%, 100%, 1)",
     25  },
     26 };
     27 
     28 export default {
     29  title: "Domain-specific UI Widgets/Settings/Nav Notice",
     30  component: "nav-notice",
     31  argTypes: {
     32    theme: {
     33      options: Object.keys(THEMES),
     34      mapping: THEMES,
     35      control: "select",
     36    },
     37  },
     38  parameters: {
     39    status: "in-development",
     40    fluent: `
     41 enterprise-notice =
     42  .label = Your browser is being managed by your organization
     43 profile-notice =
     44  .label = Original profile
     45 page-nav =
     46  .heading = Settings
     47 search-placeholder =
     48  .placeholder = Search settings
     49 account-sync = Account and sync
     50  .title = Account and sync
     51 home-startup = Home and startup
     52  .title = Home and startup
     53 search = Search
     54  .title = Search
     55 `,
     56  },
     57 };
     58 
     59 const pageNavTemplate = theme => {
     60  return html`<style>
     61      moz-page-nav {
     62        max-width: 254px;
     63      }
     64    </style>
     65    <moz-page-nav data-l10n-id="page-nav">
     66      <moz-input-search
     67        slot="subheading"
     68        data-l10n-id="search-placeholder"
     69      ></moz-input-search>
     70      ${EnterpriseNotice({ slot: "subheading", ...EnterpriseNotice.args })}
     71      ${ProfileNotice({ slot: "subheading", theme, ...ProfileNotice.args })}
     72      <moz-page-nav-button view="view-one" data-l10n-id="account-sync">
     73      </moz-page-nav-button>
     74      <moz-page-nav-button view="view-two" data-l10n-id="home-startup">
     75      </moz-page-nav-button>
     76      <moz-page-nav-button view="view-three" data-l10n-id="search">
     77      </moz-page-nav-button>
     78    </moz-page-nav>`;
     79 };
     80 
     81 const Template = ({ iconSrc, href, l10nId, inPageNav, theme, slot }) => {
     82  if (inPageNav) {
     83    return pageNavTemplate(theme);
     84  }
     85 
     86  return html`
     87    <nav-notice
     88      iconsrc=${iconSrc}
     89      href=${ifDefined(href)}
     90      data-l10n-id=${l10nId}
     91      slot=${ifDefined(slot)}
     92      .theme=${theme}
     93    ></nav-notice>
     94  `;
     95 };
     96 
     97 export const EnterpriseNotice = Template.bind({});
     98 EnterpriseNotice.args = {
     99  l10nId: "enterprise-notice",
    100  iconSrc: "chrome://global/skin/icons/rating-star.svg#full",
    101  href: "",
    102  inPageNav: false,
    103  theme: THEMES.Default,
    104 };
    105 
    106 export const ProfileNotice = Template.bind({});
    107 ProfileNotice.args = {
    108  ...EnterpriseNotice.args,
    109  l10nId: "profile-notice",
    110  iconSrc: "chrome://global/skin/icons/highlights.svg",
    111  href: "about:profiles",
    112 };
    113 
    114 export const InPageNav = Template.bind({});
    115 InPageNav.args = {
    116  inPageNav: true,
    117 };