calendar-dialog-toggleable-row.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/components/calendar/content/calendar-dialog-toggleable-row.mjs";

import "mail/themes/shared/mail/calendar/calendarDialog.css";

export default {

  title: "Widgets/Calendar/Toggleable Dialog Row",

  component: "calendar-dialog-toggleable-row",

  tags: ["autodocs"],

};

const calendarDialogToggleableRowTemplate = html`

  <template

    id="calendarDialogToggleableRowTemplate"

    xmlns="http://www.w3.org/1999/xhtml"

    <div class="row">

      <slot name="icon"></slot>

      <label class="toggle-label">

        <slot name="label"></slot>

        <input class="toggle-checkbox" type="checkbox" />

      </label>

      <slot name="content"></slot>

    </div>

  </template>

`;

const uncheckedTemplate = () => html`

  ${calendarDialogToggleableRowTemplate}

  <calendar-dialog-toggleable-row>

    <img slot="icon" class="icon-location" src="" alt="" />

    <span slot="label" class="row-label">Location</span>

    <div slot="content">Location details</div>

  </calendar-dialog-toggleable-row>

`;

const checkedTemplate = () => html`

  ${calendarDialogToggleableRowTemplate}

  <calendar-dialog-toggleable-row checked>

    <img slot="icon" class="icon-location" src="" alt="" />

    <span slot="label" class="row-label">Location</span>

    <div slot="content">Location details</div>

  </calendar-dialog-toggleable-row>

`;

export const Unchecked = uncheckedTemplate.bind({});

export const Checked = checkedTemplate.bind({});