tor-browser

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

setting-control.stories.mjs (4249B)

      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 } from "chrome://global/content/vendor/lit.all.mjs";
      6 import "chrome://browser/content/preferences/widgets/setting-control.mjs";
      7 
      8 export default {
      9  title: "Domain-specific UI Widgets/Settings/Setting Control",
     10  component: "setting-control",
     11  parameters: {
     12    status: "in-development",
     13    handles: ["click", "input", "change"],
     14    fluent: `
     15 checkbox-example-input =
     16  .label = Checkbox example of setting-control
     17  .description = Could have a description like moz-checkbox.
     18 select-example-input =
     19  .label = Select example of setting-control
     20  .description = Could have a description like moz-select.
     21 select-option-0 =
     22  .label = Option 0
     23 select-option-1 =
     24  .label = Option 1
     25 select-option-2 =
     26  .label = Option 2
     27 radio-example-input =
     28  .label = Radio example of setting-control
     29  .description = Could have a description like moz-radio-group.
     30 radio-option-0 =
     31  .label = Option 0
     32 radio-option-1 =
     33  .label = Option 1
     34  .description = It's a full moz-radio
     35 radio-option-2 =
     36  .label = Option 2
     37 extension-controlled-input =
     38  .label = Setting controlled by extension
     39 extension-controlled-message = <strong>My Extension</strong> requires Controlled Setting.
     40 disable-extension =
     41  .label = Disable extension
     42  .tooltiptext = Disable extension
     43 extension-controlled-enable-2 = Storybook Only: Refresh the page to enable the extension. To re-enable this extension visit <a data-l10n-name="addons-link">Extensions and themes</a>.`,
     44  },
     45 };
     46 
     47 const Template = ({ config, setting }) => html`
     48  <link
     49    rel="stylesheet"
     50    href="chrome://browser/content/preferences/widgets/setting-control.css"
     51  /><setting-control .config=${config} .setting=${setting}></setting-control>
     52 `;
     53 
     54 const DEFAULT_SETTING = {
     55  value: 1,
     56  on() {},
     57  off() {},
     58  userChange() {},
     59  getControlConfig: c => c,
     60  controllingExtensionInfo: {},
     61  visible: true,
     62 };
     63 
     64 export const Checkbox = Template.bind({});
     65 Checkbox.args = {
     66  config: {
     67    id: "checkbox-example",
     68    l10nId: "checkbox-example-input",
     69  },
     70  setting: DEFAULT_SETTING,
     71 };
     72 
     73 export const Select = Template.bind({});
     74 Select.args = {
     75  config: {
     76    id: "select-example",
     77    l10nId: "select-example-input",
     78    control: "moz-select",
     79    supportPage: "example-support",
     80    options: [
     81      {
     82        value: 0,
     83        l10nId: "select-option-0",
     84      },
     85      {
     86        value: 1,
     87        l10nId: "select-option-1",
     88      },
     89      {
     90        value: 2,
     91        l10nId: "select-option-2",
     92      },
     93    ],
     94  },
     95  setting: DEFAULT_SETTING,
     96 };
     97 
     98 export const Radio = Template.bind({});
     99 Radio.args = {
    100  config: {
    101    id: "radio-example",
    102    l10nId: "radio-example-input",
    103    control: "moz-radio-group",
    104    supportPage: "example-support",
    105    options: [
    106      {
    107        value: 0,
    108        l10nId: "radio-option-0",
    109      },
    110      {
    111        value: 1,
    112        l10nId: "radio-option-1",
    113        supportPage: "support-page",
    114      },
    115      {
    116        value: 2,
    117        l10nId: "radio-option-2",
    118      },
    119    ],
    120  },
    121  setting: DEFAULT_SETTING,
    122 };
    123 
    124 export const ExtensionControlled = Template.bind({});
    125 ExtensionControlled.args = {
    126  config: {
    127    id: "extension-controlled-example",
    128    l10nId: "extension-controlled-input",
    129    pref: "privacy.userContext.enabled",
    130    controllingExtensionInfo: {
    131      storeId: "privacy.containers",
    132      /* Example of a Fluent string used for the message bar:
    133       * extension-controlled-message = <strong>{ $name }</strong> requires Container Tabs.
    134       * */
    135      l10nId: "extension-controlled-message",
    136      supportPage: "preferences",
    137    },
    138  },
    139  setting: {
    140    ...DEFAULT_SETTING,
    141    disableControllingExtension() {
    142      delete this.controllingExtensionInfo.id;
    143      delete this.controllingExtensionInfo.name;
    144      document
    145        .querySelector("with-common-styles")
    146        .shadowRoot.querySelector("setting-control")
    147        .requestUpdate();
    148    },
    149    controllingExtensionInfo: {
    150      id: "extension-controlled-example",
    151      l10nId: "extension-controlled-message",
    152      name: "My Extension",
    153      supportPage: "preferences",
    154    },
    155  },
    156 };