tb-banner.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/. */

import { html } from "lit";

import "mail/base/content/widgets/tb-banner.mjs";

import "mail/themes/shared/mail/colors.css";

import "mail/themes/shared/mail/spacings.css";

import "mail/themes/shared/mail/variables.css";

import "mail/themes/shared/mail/layout.css";

import "mail/themes/shared/mail/widgets.css";

import "mail/themes/shared/mail/icons.css";

export default {

  title: "Widgets/Banner",

  component: "tb-banner",

  tags: ["autodocs"],

  argTypes: {

    variant: {

      control: "select",

      options: ["info", "success", "warning", "danger"],

},

    expanded: {

      control: "boolean",

},

},

};

const bannerTemplate = html`

  <!-- #include mail/base/content/widgets/tb-banner.inc.xhtml -->

  <template id="tbBannerTemplate">

    <details class="banner">

      <summary>

        <img id="icon" class="icon" alt="" />

        <div id="title" class="title">

          <slot name="title"></slot>

        </div>

        <span id="actionText" class="action-text" hidden="hidden"></span>

      </summary>

      <div id="description" class="description" hidden="hidden">

        <slot name="description"></slot>

      </div>

    </details>

  </template>

`;

const PlaygroundTemplate = ({

  variant,

  titleContent,

  descriptionContent,

  expanded,

}) => html`

  ${bannerTemplate}

  <tb-banner variant=${variant} ?expanded=${expanded}>

    <span slot="title">${titleContent}</span>

    <span slot="description">${descriptionContent}</span>

  </tb-banner>

`;

export const Playground = PlaygroundTemplate.bind({});

Playground.args = {

  variant: "info",

  titleContent: "Connection settings saved",

  descriptionContent: "Thunderbird will use these settings when checking mail.",

  expanded: false,

};

export const NoDescription = () => html`

  ${bannerTemplate}

  <tb-banner variant="success">

    <span slot="title">Connection settings saved</span>

  </tb-banner>

`;

export const HTMLDescriptionExpanded = () => html`

  ${bannerTemplate}

  <tb-banner variant="danger" expanded>

    <span slot="title">Please resolve the following errors:</span>

    <ul slot="description">

      <li>

        <a href="#">Hostname</a>, <a href="#">Hostname</a>, and

        <a href="#">Port</a>

      </li>

    </ul>

  </tb-banner>

`;