calendar-dialog-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-row.mjs";

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

export default {

  title: "Widgets/Calendar/Dialog Row",

  component: "calendar-dialog-row",

  tags: ["autodocs"],

};

const RowTemplateDefault = () => html`

  <template id="calendarDialogRowTemplate" xmlns="http://www.w3.org/1999/xhtml">

    <div class="row">

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

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

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

    </div>

  </template>

  <calendar-dialog-row>

    <img

      slot="icon"

      class="icon-location"

      src=""

      data-l10n-id="calendar-dialog-location-row-icon"

/>

    <span slot="label" class="row-label">Test Label</span>

    <div slot="content">Test Content Description</div>

  </calendar-dialog-row>

`;

const RowTemplateLabelOnly = () => html`

  <template id="calendarDialogRowTemplate" xmlns="http://www.w3.org/1999/xhtml">

    <div class="row">

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

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

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

    </div>

  </template>

  <calendar-dialog-row>

    <img

      slot="icon"

      class="icon-reminder"

      src=""

      data-l10n-id="calendar-dialog-reminder-row-icon"

/>

    <span slot="label" class="row-label">10 minutes before event</span>

  </calendar-dialog-row>

`;

const RowTemplateLocationLink = () => html`

  <template id="calendarDialogRowTemplate" xmlns="http://www.w3.org/1999/xhtml">

    <div class="row">

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

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

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

    </div>

  </template>

  <calendar-dialog-row>

    <img

      slot="icon"

      class="icon-location"

      src=""

      data-l10n-id="calendar-dialog-location-row-icon"

/>

    <div slot="label">

<a

        id="locationLink"

        class="text-link"

        href="https://www.thunderbird.net/"

        https://www.thunderbird.net/

      </a>

    </div>

  </calendar-dialog-row>

`;

const RowTemplateDescription = () => html`

  <template id="calendarDialogRowTemplate" xmlns="http://www.w3.org/1999/xhtml">

    <div class="row">

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

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

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

    </div>

  </template>

  <calendar-dialog-row>

    <img

      slot="icon"

      class="icon-description"

      src=""

      data-l10n-id="calendar-dialog-description-row-icon"

/>

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

    <div

      id="calendarDescriptionContent"

      slot="content"

      class="truncated-content"

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo nibh

      id mattis lacinia. Cras mi nisl, dapibus eu dui a, tempor bibendum felis.

      Pellentesque ut sollicitudin tortor.

      <br />

      <br />

      Suspendisse arcu lorem, aliquet id ex sit amet, fermentum aliquet mi.

      Donec sapien dolor, ullamcorper tincidunt imperdiet in, sollicitudin ut

      leo.

      <br />

      <br />

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo nibh

      id mattis lacinia. Cras mi nisl, dapibus eu dui a, tempor bibendum felis.

      Pellentesque ut sollicitudin tortor.

      <br />

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo nibh

      id mattis lacinia. Cras mi nisl, dapibus eu dui a, tempor bibendum felis.

      Pellentesque ut sollicitudin tortor.

    </div>

  </calendar-dialog-row>

`;

export const CalendarDialogRow = RowTemplateDefault.bind({});

export const CalendarDialogRowLabelOnly = RowTemplateLabelOnly.bind({});

export const CalendarDialogRowLocationLink = RowTemplateLocationLink.bind({});

export const CalendarDialgoRowDescription = RowTemplateDescription.bind({});