@covalent/components 0.0.0-COVALENT

package/src/empty-state/empty-state.stories.js

@@ -0,0 +1,117 @@
+import './empty-state';
+import '../icon/icon';
+import '../card/card';
+import '../button/button';
+
+export default {
+  title: 'Components/Empty state',
+  args: {
+    headline: "You don't have access to this area",
+    subtitle:
+      "You don't have permission to view this application.\nPlease contact your system administrator for further details.",
+    action: false,
+    twoActions: true,
+    icon: 'work',
+  },
+};
+
+// Page empty state
+export const Page = ({ headline, subtitle, action, twoActions, icon }) => {
+  return `
+  <cv-empty-state 
+    headline="${headline}" 
+    subtitle="${subtitle}"
+    icon="${icon}"
+  >
+    ${
+      action && !twoActions
+        ? '<cv-button slot="buttons">Button text</cv-button>'
+        : ''
+    }
+    ${
+      twoActions
+        ? '<cv-button slot="buttons">Button text</cv-button>\n\
+    <cv-button slot="buttons">Button text</cv-button>'
+        : ''
+    }
+</cv-empty-state>`;
+};
+
+export const PageTitleOnly = Page.bind({});
+PageTitleOnly.args = {
+  subtitle: '',
+  action: false,
+  twoActions: false,
+};
+export const PageWithSubtitle = Page.bind({});
+PageWithSubtitle.args = {
+  action: false,
+  twoActions: false,
+};
+export const PageOneAction = Page.bind({});
+PageOneAction.args = {
+  subtitle: '',
+  action: true,
+  twoActions: false,
+};
+export const PageTwoActions = Page.bind({});
+PageTwoActions.args = {
+  subtitle: '',
+  action: false,
+  twoActions: true,
+};
+
+// Card empty state
+const Card = ({
+  cardOutlined,
+  cardTitle,
+  headline,
+  subtitle,
+  action,
+  twoActions,
+}) => {
+  return `
+    <cv-card 
+      cardTitle='${cardTitle}'
+      ${cardOutlined ? 'outlined' : ''}
+    >
+      <cv-empty-state 
+      headline="${headline}" 
+      subtitle="${subtitle}"
+      card
+      >
+          ${
+            action && !twoActions
+              ? '<cv-button slot="buttons">Button text</cv-button>'
+              : ''
+          }
+          ${
+            twoActions
+              ? '<cv-button slot="buttons">Button text</cv-button>\n\
+          <cv-button slot="buttons">Button text</cv-button>'
+              : ''
+          }
+      </cv-empty-state>
+    </cv-card>
+  `;
+};
+
+export const CardNoAction = Card.bind({});
+CardNoAction.args = {
+  cardOutlined: false,
+  action: false,
+  twoActions: false,
+  headline: '',
+  subtitle: "You don't have access to this area",
+  cardTitle: 'Card Title',
+};
+
+export const CardWithAction = Card.bind({});
+CardWithAction.args = {
+  cardOutlined: false,
+  action: true,
+  twoActions: false,
+  headline: '',
+  subtitle: "You don't have access to this area",
+  cardTitle: 'Card Title',
+};

package/src/empty-state/empty-state.ts

@@ -0,0 +1,61 @@
+import { css, unsafeCSS } from 'lit';
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import styles from './empty-state.scss?inline';
+import '../icon/icon';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-empty-state': CovalentEmptyState;
+  }
+}
+
+@customElement('cv-empty-state')
+export class CovalentEmptyState extends LitElement {
+  static override styles = [
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+
+  @property({ type: String }) headline = '';
+  @property({ type: String }) subtitle = '';
+  @property({ type: String }) icon = '';
+  @property({ type: Boolean }) card = false;
+  override render() {
+    return html`
+      <div
+        class="content mdc-typography"
+        style=${this.card ? 'width: 632px; height: 300px;' : ''}
+      >
+        ${this.icon
+          ? html` <div class="icon-background">
+              <cv-icon class="covalent-icon">${this.icon}</cv-icon>
+            </div>`
+          : ''}
+        ${this.headline
+          ? html`<h6 class="mdc-typography--headline6">${this.headline}</h6>`
+          : ''}
+        ${this.subtitle
+          ? html` <p
+              key="{line}"
+              class="mdc-typography--body2"
+              style=${this.headline ? '' : 'margin-top:16px;'}
+            >
+              ${this.subtitle.split(/\n/).map((line) => {
+                return html`${line}<br />`;
+              })}
+            </p>`
+          : ''}
+        <div
+          class="buttonContainer"
+          style=${this.subtitle ? '' : 'margin-top:0;'}
+        >
+          <slot name="buttons"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+export default CovalentEmptyState;

package/src/expansion-panel/Overview.mdx

@@ -0,0 +1,108 @@
+import { Canvas, DocsContainer, Meta, Story } from '@storybook/blocks';
+import './expansion-panel';
+import './expansion-panel-item';
+import '../button/button';
+import incorrectExample from './expansion-panel-incorrect-example.png';
+
+import * as ExpansionPanelStories from './expansion-panel.stories';
+
+<Meta of={ExpansionPanelStories} />
+
+<style>
+  {`
+    #story--example-button--outlined,
+    #story--example-button--text {
+      margin-right: 8px;
+    }
+    .buttonFooter{
+      display:flex; 
+      align-items:center;
+    }
+    .buttonContainer {
+      margin-left:auto;
+    }
+    cv-button {
+      margin-left:5px;
+    }
+    img {
+      width:550px;
+    }
+    `}
+</style>
+
+# Expansion panel
+
+## Anatomy
+
+Set of expandable panels stacked up similar to data table.
+
+#### Interactions and behavior
+
+- Click on the expandable panel anywhere to get the extra information.
+- Unexpanded items group into single cards, one before and one after the open panel.
+- The expanded panel separates into its own card. Only one panel may be open at a time.
+
+<Canvas>
+  <cv-expansion-panel titleWidth="16em">
+    <cv-expansion-panel-item title="Title" contentPreview="Content preview">
+      <div slot="content">Content</div>
+    </cv-expansion-panel-item>
+
+    <cv-expansion-panel-item title="Lorem ipsum dolor" contentPreview="Content preview">
+      <div slot="content">Content</div>
+    </cv-expansion-panel-item>
+
+    <cv-expansion-panel-item title="Lorem ipsum dolor" contentPreview="Content preview">
+      <div slot="content">Content</div>
+    </cv-expansion-panel-item>
+
+    <cv-expansion-panel-item title="Lorem ipsum dolor" contentPreview="Content preview">
+      <div slot="content">Content</div>
+    </cv-expansion-panel-item>
+
+  </cv-expansion-panel>
+</Canvas>
+
+---
+
+## Common mistakes
+
+#### Call to action placement on expanded panel
+
+Do not add any call to action (button/link) on the expansion panel header because
+the expansion panel header is clickable and when clicked on expanded state, it
+collapses the panel. If absolutely needed, the call to actions can be added at
+the bottom of expanded region.
+
+##### Correct
+
+Call to action is located in the footer.
+
+<Canvas>
+  <form>
+    <cv-expansion-panel titleWidth="16em">
+      <cv-expansion-panel-item title="Title" contentPreview="Content preview" showFooter>
+        <div slot="content">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        </div>
+
+        <div slot="footer" class="buttonFooter">
+          <div>You have unsaved changes</div>
+
+          <div class="buttonContainer">
+            <cv-button outlined label="Cancel" />
+
+            <cv-button raised label="Save" class="primary accent" />
+          </div>
+        </div>
+      </cv-expansion-panel-item>
+    </cv-expansion-panel>
+
+  </form>
+</Canvas>
+
+##### Incorrect
+
+Call to action is located in the header.
+
+<img src={incorrectExample} alt="Incorrect footer use" />

package/src/expansion-panel/expansion-panel-item.scss

@@ -0,0 +1,243 @@
+:host([isTopPanel]) {
+  .panel {
+    border-radius: 8px 8px 0 0;
+  }
+}
+
+:host([isBottomPanel]) {
+  .panel {
+    border-radius: 0 0 8px 8px;
+    border: none;
+  }
+}
+
+:host([isSinglePanel]) {
+  .panel {
+    border-radius: 8px;
+    border: none;
+  }
+}
+
+:host([isInnerPanel]) {
+  .panel {
+    border-radius: 0;
+  }
+}
+
+:host([open][isInnerPanel]) {
+  .panel {
+    border-radius: 8px;
+    margin-top: 16px;
+    margin-bottom: 16px;
+    border-bottom: 0;
+  }
+
+  .header {
+    min-height: 64px;
+    max-height: 64px;
+  }
+
+  .dropdown {
+    grid-template-rows: 1fr;
+  }
+
+  .closedIcon {
+    display: none;
+  }
+
+  .openedIcon {
+    display: inline-block;
+  }
+
+  ::slotted([slot='content']) {
+    padding-bottom: 16px;
+  }
+}
+
+:host([open][isTopPanel]) {
+  .panel {
+    border-radius: 8px;
+    margin-bottom: 16px;
+    border-bottom: 0;
+  }
+
+  .header {
+    min-height: 64px;
+    max-height: 64px;
+  }
+
+  .dropdown {
+    grid-template-rows: 1fr;
+  }
+
+  .closedIcon {
+    display: none;
+  }
+
+  .openedIcon {
+    display: inline-block;
+  }
+
+  ::slotted([slot='content']) {
+    padding-bottom: 16px;
+  }
+}
+
+:host([open][isBottomPanel]) {
+  .panel {
+    border-radius: 8px;
+    margin-top: 16px;
+    border-bottom: 0;
+  }
+
+  .header {
+    min-height: 64px;
+    max-height: 64px;
+  }
+
+  .dropdown {
+    grid-template-rows: 1fr;
+  }
+
+  .closedIcon {
+    display: none;
+  }
+
+  .openedIcon {
+    display: inline-block;
+  }
+
+  ::slotted([slot='content']) {
+    padding-bottom: 16px;
+  }
+}
+
+:host([open][isSinglePanel]) {
+  .header {
+    min-height: 64px;
+    max-height: 64px;
+  }
+
+  .dropdown {
+    grid-template-rows: 1fr;
+  }
+
+  .closedIcon {
+    display: none;
+  }
+
+  .openedIcon {
+    display: inline-block;
+  }
+
+  ::slotted([slot='content']) {
+    padding-bottom: 16px;
+  }
+}
+
+:host([belowOpenInnerPanel]) {
+  .panel {
+    border-radius: 8px 8px 0 0;
+  }
+}
+
+:host([aboveOpenInnerPanel]) {
+  .panel {
+    border-radius: 0 0 8px 8px;
+    border-bottom: none;
+  }
+}
+
+:host([separateSinglePanel]) {
+  .panel {
+    border-radius: 8px;
+    border-bottom: none;
+  }
+}
+
+:host {
+  .panel {
+    border-bottom: 1px solid var(--mdc-theme-border, rgba(0, 0, 0, 12%));
+    background-color: var(--cv-theme-surface-container, #ffffff);
+    transition:
+      margin-bottom 0.5s,
+      margin-top 0.5s;
+  }
+
+  .header {
+    min-height: 48px;
+    max-height: 48px;
+    padding: 0 24px;
+    display: flex;
+    align-items: center;
+    transition:
+      min-height 0.5s,
+      max-height 0.5s;
+    cursor: pointer;
+  }
+
+  .title {
+    width: var(--cv-expansion-panel-item-title-width, 200px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 87%));
+    font-family: var(--mdc-typography-body1-font-family, Arial);
+    font-size: var(--mdc-typography-body1-font-size, 14px);
+    font-style: normal;
+    font-weight: var(--mdc-typography-body1-font-weight, 400);
+    line-height: var(--mdc-typography-body1-line-height, 20px);
+    letter-spacing: 0.25px;
+  }
+
+  .contentPreview {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding-left: 16px;
+    color: var(--mdc-theme-text-secondary-on-background, rgba(0, 0, 0, 54%));
+    font-family: var(--mdc-typography-body1-font-family, Arial);
+    font-size: var(--mdc-typography-body1-font-size, 14px);
+    font-style: normal;
+    font-weight: var(--mdc-typography-body1-font-weight, 400);
+    line-height: var(--mdc-typography-body1-line-height, 20px);
+    letter-spacing: 0.25px;
+  }
+
+  cv-icon {
+    padding-left: 16px;
+    margin-left: auto;
+  }
+
+  .dropdown {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 0.5s;
+    color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 87%));
+    font-family: var(--mdc-typography-body1-font-family, Arial);
+    font-size: var(--mdc-typography-body1-font-size, 14px);
+    font-style: normal;
+    font-weight: var(--mdc-typography-body1-font-weight, 400);
+    line-height: var(--mdc-typography-body1-line-height, 20px);
+    letter-spacing: 0.25px;
+  }
+
+  .content {
+    overflow-y: hidden;
+  }
+
+  .content slot {
+    display: block;
+    padding: 0 24px;
+  }
+
+  .footer {
+    overflow-y: hidden;
+    padding: 16px 24px;
+    border-top: 1px solid var(--mdc-theme-border, rgba(0, 0, 0, 12%));
+  }
+
+  .openedIcon {
+    display: none;
+  }
+}

package/src/expansion-panel/expansion-panel-item.ts

@@ -0,0 +1,95 @@
+import { LitElement, css, html, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import styles from './expansion-panel-item.scss?inline';
+import '../icon/icon';
+
+@customElement('cv-expansion-panel-item')
+export class CovalentExpansionPanelItem extends LitElement {
+  static override styles = [
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+
+  @property({ type: Number }) index = 0;
+
+  @property({ type: Boolean, reflect: true, attribute: 'open' }) open = false;
+  @property({ type: Boolean, reflect: true, attribute: 'isTopPanel' })
+  isTopPanel = false;
+  @property({ type: Boolean, reflect: true, attribute: 'isInnerPanel' })
+  isInnerPanel = false;
+  @property({ type: Boolean, reflect: true, attribute: 'isBottomPanel' })
+  isBottomPanel = false;
+  @property({ type: Boolean, reflect: true, attribute: 'isSinglePanel' })
+  isSinglePanel = false;
+
+  @property({ type: Boolean, reflect: true, attribute: 'belowOpenInnerPanel' })
+  belowOpenInnerPanel = false;
+  @property({ type: Boolean, reflect: true, attribute: 'aboveOpenInnerPanel' })
+  aboveOpenInnerPanel = false;
+  // if the panel right below the top panel or right above the bottom panel is opened,
+  // the very top or bottom panel becomes a single panel
+  @property({ type: Boolean, reflect: true, attribute: 'separateSinglePanel' })
+  separateSinglePanel = false;
+
+  @property({ type: String }) title = 'Title';
+  @property({ type: String }) contentPreview = '';
+  @property({ type: Boolean, reflect: true }) showFooter = false;
+  @property({ type: Boolean, reflect: true }) noSurface = false;
+
+  render() {
+    return html`
+      <div class="panel">
+        <div class="header" @click=${this._toggleContent}>
+          <span class="title">${this.title}<slot name="title"></slot></span>
+          <span class="contentPreview"
+            >${this.contentPreview}<slot name="preview"></slot
+          ></span>
+          <cv-icon class="closedIcon">expand_more</cv-icon>
+          <cv-icon class="openedIcon">expand_less</cv-icon>
+        </div>
+
+        <div class="dropdown">
+          <div class="content">
+            <slot name="content"></slot>
+            ${this.showFooter
+              ? html`
+                  <div class="footer">
+                    <slot name="footer"></slot>
+                  </div>
+                `
+              : ''}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  resetPanel() {
+    this.belowOpenInnerPanel = false;
+    this.aboveOpenInnerPanel = false;
+    this.separateSinglePanel = false;
+    this.open = false;
+  }
+
+  private _toggleContent() {
+    this.open = !this.open;
+
+    const event = new CustomEvent('cv-expansionPanel-togglePanel', {
+      detail: {
+        message: `Panel opened: ${this}`,
+        bubbles: true,
+        composed: true,
+        open: this.open,
+        index: this.index,
+      },
+    });
+    window.dispatchEvent(event);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-expansion-panel-item': CovalentExpansionPanelItem;
+  }
+}

package/src/expansion-panel/expansion-panel.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentExpansionPanel } from './expansion-panel';
+
+describe('Expansion panel', () => {
+  it('should work', () => {
+    expect(new CovalentExpansionPanel()).toBeDefined();
+  });
+});

package/src/expansion-panel/expansion-panel.stories.js

@@ -0,0 +1,76 @@
+import './expansion-panel';
+import './expansion-panel-item';
+import '../icon/icon';
+import '../action-ribbon/action-ribbon';
+import '../button/button';
+import '../icon/icon';
+
+export default {
+  title: 'Components/Expansion panel',
+  args: {
+    icon: 'description',
+    noSurface: false,
+  },
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export const Basic = ({ icon, noSurface }) => {
+  return `
+    <cv-expansion-panel ${noSurface ? 'noSurface' : ''} titleWidth='16em'>
+
+      <cv-expansion-panel-item
+      title="Title"
+      contentPreview="Content preview"
+      showFooter
+      >
+        <div slot="content">
+         Culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </div>
+        <div slot="footer">
+          Basic footer
+        </div>
+      </cv-expansion-panel-item>
+
+      <cv-expansion-panel-item
+      title="Lorem ipsum dolor sit amet"
+      contentPreview="Content preview"
+      showFooter
+      >
+        <div slot="content">Mxollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+        <div slot="footer" style="display:flex; align-items:center">
+          <div style="color:rgba(255, 255, 255, 0.54)">You have unsaved changes</div>
+          <div style="margin-left:auto">
+            <cv-button outlined label="Cancel"></cv-button>
+            <cv-button raised label="Save" class="primary accent"></cv-button>
+          </div>
+        </div>
+      </cv-expansion-panel-item>
+
+      <cv-expansion-panel-item
+      title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do"
+      contentPreview="Content preview"
+      >
+        <div slot="content">
+          Content
+        </div>
+      </cv-expansion-panel-item>
+
+      <cv-expansion-panel-item
+      title="Lorem ipsum dolor"
+      >
+        <div slot="content">
+          Content
+        </div>      
+      </cv-expansion-panel-item>
+
+    </cv-expansion-panel>
+    `;
+};
+
+export const NoSurface = Basic.bind({});
+
+NoSurface.args = {
+  noSurface: true,
+};