@carbon/ibm-products-web-components/es-custom/components/tearsheet/utils.js

Carbon for IBM Products Web Components

/**
 * Copyright IBM Corp. 2024
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { BUTTON_KIND } from '@carbon/web-components/es/components/button/defs.js';
import '@carbon/web-components/es-custom/components/tabs/index.js';
import '@carbon/web-components/es-custom/components/text-input/index.js';
import '@carbon/web-components/es-custom/components/textarea/index.js';
import '@carbon/web-components/es-custom/components/slug/index.js';
import '@carbon/web-components/es-custom/components/ai-label/index.js';
import '@carbon/web-components/es-custom/components/toggle-tip/index.js';
import '@carbon/web-components/es-custom/components/dropdown/index.js';
import '@carbon/web-components/es-custom/components/progress-indicator/index.js';
import '@carbon/web-components/es-custom/components/progress-bar/index.js';
import './tearsheet.js';
import '../truncated-text/truncated-text.js';
import { html } from 'lit';
import { prefix } from '../../globals/settings.js';
import styles from './story-styles.scss.js';

/**
 * @license
 *
 * Copyright IBM Corp. 2024, 2024
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
const storyPrefix = 'tearsheet-stories';
const cancelButton = () => {
    var _a;
    (_a = document.querySelector(`${prefix}-tearsheet`)) === null || _a === void 0 ? void 0 : _a.removeAttribute('open');
};
const influencers = {
    'No influencer': 0,
    'Simple influencer': 1,
    'Progress influencer': 2,
};
const getInfluencer = (index) => {
    switch (index) {
        case 1:
            return html `<div
        slot="influencer"
        class=${`${storyPrefix}__dummy-content-block`}
      >
        Influencer
      </div>`;
        case 2:
            return html ` <cds-custom-progress-indicator
        vertical
        slot="influencer"
        class=${`${storyPrefix}__dummy-content-block`}
      >
        <cds-custom-progress-step
          state="complete"
          label="First step"
          secondary-label="Optional label"
          description="Step 1: Getting started with Carbon Design System"
        ></cds-custom-progress-step>
        <cds-custom-progress-step
          label="Second step with tooltip"
          state="current"
        ></cds-custom-progress-step>
        <cds-custom-progress-step
          label="Third step with tooltip"
          state="incomplete"
        ></cds-custom-progress-step>
        <cds-custom-progress-step
          label="Fourth step"
          secondary-label="Example invalid step"
          state="invalid"
        ></cds-custom-progress-step>
        <cds-custom-progress-step
          disabled
          label="Fifth step"
          state="incomplete"
        ></cds-custom-progress-step>
      </cds-custom-progress-indicator>`;
        default:
            return null;
    }
};
const getContent = (index) => {
    switch (index) {
        case 1:
            return html `
        <style>
          ${styles}
        </style>
        <div class=${`${storyPrefix}__dummy-content-block`}>
          <h5>Section</h5>
          <cds-custom-text-input
            label="Input A"
            id="tearsheet-story-text-input-a"
            class="${storyPrefix}text-input"
          ></cds-custom-text-input>
          <cds-custom-text-input
            label="Input B"
            id="tearsheet-story-text-input-b"
            class="${storyPrefix}text-input"
          ></cds-custom-text-input>
        </div>
      `;
        case 2:
            return html ` <style>
          ${styles}
        </style>
        <div class=${`${storyPrefix}__dummy-content-block`}>
          <h5>Section</h5>
          <div class="${storyPrefix}text-inputs">
            <cds-custom-text-input
              label="Input A"
              id="tearsheet-story-text-input-a"
            ></cds-custom-text-input>
            <cds-custom-text-input
              label="Input B"
              id="tearsheet-story-text-input-b"
            ></cds-custom-text-input>
          </div>
          <div class="${storyPrefix}text-inputs">
            <cds-custom-text-input
              label="Input C"
              id="tearsheet-story-text-input-c"
            ></cds-custom-text-input>
            <cds-custom-text-input
              label="Input D"
              id="tearsheet-story-text-input-d"
            ></cds-custom-text-input>
          </div>
          <div class="${storyPrefix}textarea-container">
            <cds-custom-textarea
              label="Notes"
              value="This is a text area"
            ></cds-custom-textarea>
            <cds-custom-textarea
              label="Notes"
              value="This is a text area"
            ></cds-custom-textarea>
            <cds-custom-textarea
              label="Notes"
              value="This is a text area"
            ></cds-custom-textarea>
          </div>
        </div>`;
        default:
            return null;
    }
};
const getLabel = (index) => {
    switch (index) {
        case 1:
            return html `<span slot="label">Optional label for context</span>`;
        case 2:
            return html `<span slot="label"
        >A longer label giving a bit more context
      </span>`;
        default:
            return null;
    }
};
const getActionToolbarItems = (index) => {
    switch (index) {
        case 1:
            return html `<cds-custom-dropdown slot="header-actions" value="option 1">
        ${['option 1', 'option 2', 'option 3', 'option 4'].map((option) => html ` <cds-custom-dropdown-item value="${option}"
              >${option}</cds-custom-dropdown-item
            >`)}
      </cds-custom-dropdown>`;
        case 2:
            return html `
        <cds-custom-button
          slot="header-actions"
          kind=${BUTTON_KIND.SECONDARY}
          size="sm"
          style="width: initial"
        >
          Secondary
        </cds-custom-button>
        <cds-custom-button
          slot="header-actions"
          kind=${BUTTON_KIND.PRIMARY}
          size="sm"
          style="width: initial"
        >
          Primary
        </cds-custom-button>
      `;
        default:
            return null;
    }
};
const toActions = (kinds) => {
    return kinds === null || kinds === void 0 ? void 0 : kinds.map((kind) => {
        return html `<cds-custom-button
      key=${kind}
      slot="actions"
      kind=${kind}
      @click=${kind === 'ghost' && cancelButton}
    >
      ${kind.charAt(0).toUpperCase() + kind.slice(1)}
    </cds-custom-button>`;
    });
};
// TODO: There are problems switching this
const getActionItems = (index) => {
    switch (index) {
        case 1:
            return toActions([BUTTON_KIND.PRIMARY]);
        case 2:
            return toActions([BUTTON_KIND.GHOST, BUTTON_KIND.PRIMARY]);
        case 3:
            return toActions([BUTTON_KIND.DANGER, BUTTON_KIND.PRIMARY]);
        case 4:
            return toActions([
                BUTTON_KIND.GHOST,
                BUTTON_KIND.SECONDARY,
                BUTTON_KIND.PRIMARY,
            ]);
        case 5:
            return toActions([
                BUTTON_KIND.DANGER,
                BUTTON_KIND.SECONDARY,
                BUTTON_KIND.PRIMARY,
            ]);
        case 6:
            return toActions([
                BUTTON_KIND.GHOST,
                BUTTON_KIND.TERTIARY,
                BUTTON_KIND.SECONDARY,
                BUTTON_KIND.PRIMARY,
            ]);
        case 7:
            return toActions([
                BUTTON_KIND.DANGER,
                BUTTON_KIND.TERTIARY,
                BUTTON_KIND.SECONDARY,
                BUTTON_KIND.PRIMARY,
            ]);
        case 8:
            return toActions([
                BUTTON_KIND.GHOST,
                BUTTON_KIND.DANGER,
                BUTTON_KIND.TERTIARY,
                BUTTON_KIND.SECONDARY,
                BUTTON_KIND.PRIMARY,
            ]);
        default:
            return null;
    }
};
const getNavigation = (index) => {
    switch (index) {
        case 1:
            return html ` <div
        className="tearsheet-stories__tabs"
        slot="header-navigation"
      >
        <cds-custom-tabs value="1">
          <cds-custom-tab value="1">Tab 1</cds-custom-tab>
          <cds-custom-tab value="2">Tab 2</cds-custom-tab>
          <cds-custom-tab value="3">Tab 3</cds-custom-tab>
          <cds-custom-tab value="4">Tab 4</cds-custom-tab>
        </cds-custom-tabs>
      </div>`;
        default:
            return null;
    }
};
const getSlug = (index) => {
    switch (index) {
        case 1:
            return html `<cds-custom-slug size="xs" alignment="bottom-right">
        <div slot="body-text">
          <p class="secondary">AI Explained</p>
          <h1>84%</h1>
          <p class="secondary bold">Confidence score</p>
          <!-- //cspell: disable -->
          <p class="secondary">
            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
          </p>
          <!-- //cspell: enable -->
          <hr />
          <p class="secondary">Model type</p>
          <p class="bold">Foundation model</p>
        </div>
      </cds-custom-slug>`;
        default:
            return null;
    }
};
// cspell: disable
const getDecorator = (decorator) => {
    switch (decorator) {
        case 'WITH_AI_LABEL':
            return html `
        <cds-custom-ai-label alignment="bottom-right" slot="decorator">
          <div slot="body-text">
            <p class="secondary">AI Explained</p>
            <h2 class="ai-label-heading">84%</h2>
            <p class="secondary bold">Confidence score</p>
            <p class="secondary">
              Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
              do eiusmod tempor incididunt ut fsil labore et dolore magna
              aliqua.
            </p>
            <hr />
            <p class="secondary">Model type</p>
            <p class="bold">Foundation model</p>
          </div>
        </cds-custom-ai-label>
      `;
        case 'NON_AI_LABEL_DECORATOR':
            return html `
        <cds-custom-toggletip slot="decorator" alignment="bottom">
          <p slot="body-text">
            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
          </p>
          <cds-custom-link slot="actions">Test</cds-custom-link>
          <cds-custom-button slot="actions">Button</cds-custom-button>
        </cds-custom-toggletip>
      `;
        default:
            return;
    }
};
// cspell: enable
const getDescription = (index) => {
    switch (index) {
        case 1:
            return html `
        <span slot="description">
          This is a description for the tearsheet, providing an opportunity to
          describe the flow over a couple of lines in the header of the
          tearsheet.
        </span>
      `;
        case 2:
            return html `
        <span slot="description">
          <c4p-truncated-text
            value="This is a description for the tearsheet, providing an opportunity to describe the flow over a couple of lines in the header of the tearsheet."
            lines="1"
            autoalign="true"
            align="bottom"
          />
        </span>
      `;
        case 3:
            return html `
        <span slot="description">
          <c4p-truncated-text
            value="This is a description for the tearsheet, providing an opportunity to describe the flow over a couple of lines in the header of the tearsheet."
            lines="2"
            autoalign="true"
            align="bottom"
          />
        </span>
      `;
        default:
            return null;
    }
};

export { getActionItems, getActionToolbarItems, getContent, getDecorator, getDescription, getInfluencer, getLabel, getNavigation, getSlug, influencers };
//# sourceMappingURL=utils.js.map