[ tor-browser ].git.dasho

      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 "lit.all.mjs";
      6 // Imported for side-effects.
      7 import "../../aboutlogins/content/components/login-command-button.mjs";
      8 
      9 const BUTTON_TYPES = {
     10  Edit: "login-item-edit-button",
     11  "Copy Username": "login-item-copy-username-button-text",
     12  "Copy Password": "login-item-copy-password-button-text",
     13  Remove: "about-logins-login-item-remove-button",
     14 };
     15 
     16 const BUTTON_ICONS = {
     17  Edit: "chrome://global/skin/icons/edit.svg",
     18  "Copy Username": "chrome://global/skin/icons/edit-copy.svg",
     19  "Copy Password": "chrome://global/skin/icons/edit-copy.svg",
     20  Remove: "chrome://global/skin/icons/delete.svg",
     21 };
     22 
     23 const BUTTON_VARIANT = {
     24  Regular: "",
     25  Danger: "primary danger-button",
     26  Primary: "primary",
     27  Icon: "ghost-button icon-button",
     28 };
     29 
     30 export default {
     31  title: "Domain-specific UI Widgets/Credential Management/Command Button",
     32  component: "login-command-button",
     33  argTypes: {
     34    l10nId: {
     35      options: Object.keys(BUTTON_TYPES),
     36      mapping: BUTTON_TYPES,
     37      control: { type: "select" },
     38      defaultValue: "Edit",
     39    },
     40    icon: {
     41      options: Object.keys(BUTTON_ICONS),
     42      mapping: BUTTON_ICONS,
     43      control: { type: "select" },
     44      defaultValue: "Edit",
     45    },
     46    variant: {
     47      options: Object.keys(BUTTON_VARIANT),
     48      mapping: BUTTON_VARIANT,
     49      control: { type: "select" },
     50      defaultValue: "Regular",
     51    },
     52  },
     53 };
     54 
     55 window.MozXULElement.insertFTLIfNeeded("browser/aboutLogins.ftl");
     56 
     57 const Template = ({ onClick, l10nId, icon, variant, disabled, tooltip }) => {
     58  return html`
     59    <login-command-button
     60      .onClick=${onClick}
     61      .l10nId=${l10nId}
     62      .icon=${icon}
     63      .variant=${variant}
     64      .disabled=${disabled}
     65      .tooltip=${tooltip}
     66    >
     67    </login-command-button>
     68  `;
     69 };
     70 
     71 export const WorkingButton = Template.bind({});
     72 WorkingButton.args = {
     73  onClick: () => alert("I work Woohoo!!"),
     74  l10nId: "login-item-edit-button",
     75  icon: "chrome://global/skin/icons/edit.svg",
     76  variant: "",
     77  disabled: false,
     78  tooltip: "Lorem ipsum dolor",
     79 };
     80 
     81 export const DisabledButton = Template.bind({});
     82 DisabledButton.args = {
     83  onClick: () => alert("I shouldn't be working..."),
     84  l10nId: "login-item-edit-button",
     85  icon: "chrome://global/skin/icons/edit.svg",
     86  variant: "",
     87  disabled: true,
     88  tooltip: "Lorem ipsum dolor",
     89 };
	tor-browser The Tor Browser
	git clone https://git.dasho.dev/tor-browser.git
	Log \| Files \| Refs \| README \| LICENSE