@carbon/ibm-products-web-components/es-custom/components/side-panel/_story-assets/index.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 { html } from 'lit';
import styles from '../story-styles.scss.js';
import { BUTTON_KIND } from '@carbon/web-components/es/components/button/defs.js';

/**
 * 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 = 'side-panel-stories__';
const getContent = (index) => {
    switch (index) {
        case 1:
            return html `
        <style>
          ${styles}
        </style>
        <h5>Section</h5>
        <cds-custom-text-input
          label="Input A"
          id="side-panel-story-text-input-a"
          class="${storyPrefix}text-input"
        ></cds-custom-text-input>
        <cds-custom-text-input
          label="Input B"
          id="side-panel-story-text-input-b"
          class="${storyPrefix}text-input"
        ></cds-custom-text-input>
      `;
        case 2:
            return html `
        <style>
          ${styles}
        </style>
        <h5>Section</h5>
        <div class="${storyPrefix}text-inputs">
          <cds-custom-text-input
            label="Input A"
            id="side-panel-story-text-input-a"
          ></cds-custom-text-input>
          <cds-custom-text-input
            label="Input B"
            id="side-panel-story-text-input-b"
          ></cds-custom-text-input>
        </div>
        <div class="${storyPrefix}text-inputs">
          <cds-custom-text-input
            label="Input C"
            id="side-panel-story-text-input-c"
          ></cds-custom-text-input>
          <cds-custom-text-input
            label="Input D"
            id="side-panel-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>
      `;
        default:
            return null;
    }
};
const getSubTitle = (index) => {
    switch (index) {
        case 1:
            return html `<div slot="subtitle">This is your subtitle slot.</div>`;
        case 2:
            return html `<div slot="subtitle">
        I am your subtitle slot for <strong>adding detail</strong> that can be
        one or two lines.
      </div>`;
        default:
            return null;
    }
};
const getActionToolbarItems = (index) => {
    switch (index) {
        case 1:
            return html `
        <cds-custom-button slot="action-toolbar">Copy</cds-custom-button>
        <cds-custom-button
          slot="action-toolbar"
          aria-label="Settings"
          has-icon-only="true"
          kind=${BUTTON_KIND.GHOST}
          size="sm"
          tooltip-text="Settings"
        >
        </cds-custom-button>
        <cds-custom-button
          slot="action-toolbar"
          aria-label="Delete"
          has-icon-only="true"
          kind=${BUTTON_KIND.GHOST}
          size="sm"
          tooltip-text="Delete"
        >
        </cds-custom-button>
      `;
        default:
            return null;
    }
};
// TODO: There are problems switching this
const getActionItems = (index) => {
    switch (index) {
        case 1:
            return html `<cds-custom-button key="p" slot="actions" kind=${BUTTON_KIND.PRIMARY}
        >Primary</cds-custom-button
      >`;
        case 2:
            return html `
        <cds-custom-button slot="actions" kind=${BUTTON_KIND.GHOST}>Ghost</cds-custom-button>
        <cds-custom-button slot="actions" kind=${BUTTON_KIND.PRIMARY}
          >Primary</cds-custom-button
        >
      `;
        case 3:
            return html ` <cds-custom-button slot="actions" kind=${BUTTON_KIND.DANGER}
          >Danger</cds-custom-button
        >
        <cds-custom-button slot="actions" kind=${BUTTON_KIND.PRIMARY}
          >Primary</cds-custom-button
        >`;
        case 4:
            return html ` <cds-custom-button slot="actions" kind=${BUTTON_KIND.GHOST}
          >Ghost</cds-custom-button
        >
        <cds-custom-button slot="actions" kind=${BUTTON_KIND.SECONDARY}
          >Secondary</cds-custom-button
        >
        <cds-custom-button slot="actions" kind=${BUTTON_KIND.PRIMARY}
          >Primary</cds-custom-button
        >`;
        case 5:
            return html `<cds-custom-button
          key="danger"
          slot="actions"
          kind=${BUTTON_KIND.DANGER}
          >Danger</cds-custom-button
        >
        <cds-custom-button key="secondary" slot="actions" kind=${BUTTON_KIND.SECONDARY}
          >Secondary</cds-custom-button
        >
        <cds-custom-button key="primary" slot="actions" kind=${BUTTON_KIND.PRIMARY}
          >Primary</cds-custom-button
        >`;
        case 6:
            return html `<cds-custom-button
          key="danger"
          slot="actions"
          kind=${BUTTON_KIND.DANGER}
          >Danger</cds-custom-button
        >
        <cds-custom-button key="tertiary" slot="actions" kind=${BUTTON_KIND.TERTIARY}
          >Tertiary</cds-custom-button
        >
        <cds-custom-button key="secondary" slot="actions" kind=${BUTTON_KIND.SECONDARY}
          >Secondary</cds-custom-button
        >
        <cds-custom-button key="primary" slot="actions" kind=${BUTTON_KIND.PRIMARY}
          >Primary</cds-custom-button
        >`;
        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;
    }
};

export { getActionItems, getActionToolbarItems, getContent, getSlug, getSubTitle };
//# sourceMappingURL=index.js.map