login-doorhanger-username-field.stories.mjs

Enable keyboard shortcuts

/* 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

 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

// eslint-disable-next-line import/no-unresolved

import { html, ifDefined } from "lit.all.mjs";

import "./login-doorhanger-username-field.mjs";

export default {

  title:

    "Domain-specific UI Widgets/Credential Management/Doorhanger Username Field",

  component: "login-doorhanger-username-field",

  parameters: {

    status: "in-development",

    handles: ["change", "input", "dropmarker-click"],

    fluent: `

login-doorhanger-username-label =

  .label = Username:

`,

},

};

const Template = ({

  name: fieldName,

  value,

  disabled,

  l10nId,

  showDropmarker,

}) => html`

  <login-doorhanger-username-field

    name=${fieldName}

    value=${ifDefined(value || null)}

    ?disabled=${disabled}

    ?showdropmarker=${showDropmarker}

    data-l10n-id=${l10nId}

  ></login-doorhanger-username-field>

`;

export const Default = Template.bind({});

Default.args = {

  name: "doorhanger-username",

  value: "",

  disabled: false,

  l10nId: "login-doorhanger-username-label",

  showDropmarker: false,

};

export const WithDropmarker = Template.bind({});

WithDropmarker.args = {

  ...Default.args,

  value: "user@example.com",

  showDropmarker: true,

};