calendar-dialog-acceptance.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/themes/shared/mail/calendar/calendarDialog.css";

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

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

export default {

  title: "Widgets/Calendar/Acceptance",

  component: "calendar-dialog-acceptance",

  tags: ["autodocs"],

};

const AcceptanceTemplate = () => html`

  <div id="attendance-widget">

    <input id="going" type="radio" name="attendance" value="ACCEPTED" />

    <label for="going" class="option">

      <span class="icon"></span

      ><span data-l10n-id="calendar-dialog-accept"></span>

    </label>

    <input

      id="maybe"

      type="radio"

      name="attendance"

      value="TENTATIVE"

      checked="checked"

/>

    <label for="maybe" class="option">

      <span class="icon"></span

      ><span data-l10n-id="calendar-dialog-accept-tentative"></span>

    </label>

    <input id="not-going" type="radio" name="attendance" value="DECLINED" />

    <label for="not-going" class="option">

      <span class="icon"></span

      ><span data-l10n-id="calendar-dialog-decline"></span>

    </label>

    <div class="toggle"></div>

  </div>

`;

export const CalendarDialogAcceptance = AcceptanceTemplate.bind({});