@covalent/components 0.0.0-COVALENT

package/src/icon-lockup/icon-lockup.ts

@@ -0,0 +1,125 @@
+import { LitElement, html, css, unsafeCSS, PropertyValues } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import styles from './icon-lockup.scss?inline';
+import '../typography/typography';
+import '../icon/icon';
+
+/**
+ * Icon lockup
+ *
+ * @slot icon - Slot for a custom icon. If provided, this slot content replaces the `icon` property.
+ */
+@customElement('cv-icon-lockup')
+export class CovalentIconLockup extends LitElement {
+  static override styles = [
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+
+  /**
+   * Whether the icon is a covalent icon.
+   */
+  @property({ type: Boolean, reflect: true })
+  covalentIcon = false;
+
+  /**
+   * Whether the icon is filled.
+   */
+  @property({ type: Boolean, reflect: true })
+  filledIcon = false;
+
+  /**
+   * The icon to display.
+   */
+  @property({ type: String })
+  icon = '';
+
+  /**
+   * Scale of the component, controlling font-size and icon size.
+   * Default is "1", but it can be set to other values to scale the component.
+   */
+  @property({ type: String })
+  scale = 'body1';
+
+  /**
+   * State of the component, used to apply different styles based on status.
+   * Example values might include "success", "error", etc.
+   */
+  @property({ type: String })
+  state = 'neutral';
+
+  /**
+   * If true, the icon is displayed after the text (trailing).
+   * If false, the icon is displayed before the text.
+   */
+  @property({ type: Boolean })
+  trailingIcon = false;
+
+  /**
+   * Tracks if the icon slot has content.
+   */
+  @state() private _hasIconSlot = false;
+
+  /**
+   * Checks if there is content in the icon slot and updates `hasIconSlot`.
+   */
+  private checkIconSlot() {
+    const slot = this.shadowRoot?.querySelector(
+      'slot[name="icon"]'
+    ) as HTMLSlotElement;
+    this._hasIconSlot = slot && slot.assignedNodes().length > 0;
+  }
+
+  /**
+   * Template method for rendering the icon. If content is provided in the
+   * `icon` slot, it is displayed instead of the `icon` property.
+   */
+  private iconTemplate() {
+    const classes = {
+      'covalent-icon': this.covalentIcon,
+      filled: this.filledIcon,
+      hidden: this._hasIconSlot,
+    };
+    return html`<slot name="icon"></slot>
+      <cv-icon
+        class=${classMap(classes)}
+        style="${`font-size: var(--cv-typography-${this.scale}-line-height, 16px)`}"
+      >
+        ${this.icon}
+      </cv-icon>`;
+  }
+
+  /**
+   * Renders the component with icon and text. If `trailingIcon` is true,
+   * the icon is displayed after the text. Otherwise, it is displayed before.
+   */
+  render() {
+    const classes = {
+      'icon-lockup': true,
+      [`icon-lockup--${this.state}`]: this.state,
+      'trailing-icon': this.trailingIcon,
+    };
+
+    return html`
+      <cv-typography class=${classMap(classes)} scale="${this.scale}">
+        ${this.iconTemplate()}
+        <div class="text"><slot></slot></div>
+      </cv-typography>
+    `;
+  }
+
+  protected override updated(_changedProperties: PropertyValues): void {
+    super.updated(_changedProperties);
+    this.checkIconSlot();
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-icon-lockup': CovalentIconLockup;
+  }
+}
+
+export default CovalentIconLockup;

package/src/icon-radio/icon-radio-toggle.ts

@@ -0,0 +1,43 @@
+import { css, html, TemplateResult, unsafeCSS } from 'lit';
+import { RadioBase } from '@material/mwc-radio/mwc-radio-base';
+import { styles as radioStyle } from '@material/mwc-radio/mwc-radio.css';
+import { customElement, property } from 'lit/decorators.js';
+import styles from './icon-radio.scss?inline';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-icon-radio-item': CovalentIconRadioToggle;
+  }
+}
+
+@customElement('cv-radio-icon')
+export class CovalentIconRadioToggle extends RadioBase {
+  static override styles = [
+    radioStyle,
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+
+  @property({ type: Boolean }) iconOnly = false;
+
+  // Override the renderRipple method to minimally introduce the icon & text slots without overwritting the render method
+  protected override renderRipple(): TemplateResult | string {
+    const iconSlot = html`<slot name="icon"></slot>`;
+    const textSlot = this.iconOnly
+      ? ''
+      : html`<div><slot name="text"></slot></div>`;
+    const ripple = this.shouldRenderRipple
+      ? html`<mwc-ripple
+          accent
+          .internalUseStateLayerCustomProperties="${this
+            .useStateLayerCustomProperties}"
+          .disabled="${this.disabled}"
+        ></mwc-ripple>`
+      : '';
+
+    return html`${iconSlot}${textSlot}${ripple}`;
+  }
+}
+
+export default CovalentIconRadioToggle;

package/src/icon-radio/icon-radio.scss

@@ -0,0 +1,63 @@
+:host {
+  --mdc-radio-unchecked-color: var(--mdc-theme-text-icon-on-background);
+
+  .mdc-radio__background {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+  }
+}
+
+:host([width='fill']) {
+  width: 100%;
+}
+
+.mdc-radio {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+  row-gap: 8px;
+  width: var(--cv-icon-radio-width, 200px);
+  height: var(--cv-icon-radio-height, 160px);
+  border: solid 2px var(--mdc-theme-border);
+  border-radius: 8px;
+  color: var(--mdc-theme-text-primary-on-background);
+}
+
+.mdc-radio--touch .mdc-radio__native-control {
+  width: 100%;
+  height: 100%;
+}
+
+:host([checked]) .mdc-radio {
+  border: solid 2px var(--mdc-theme-primary);
+  background-color: var(--mdc-theme-surface-primary-highlight);
+
+  &:hover {
+    background-color: var(--mdc-theme-surface-primary-highlight-hover);
+  }
+}
+
+[name='icon']::slotted(*) {
+  font-size: 40px;
+  color: var(--mdc-theme-text-icon-on-background);
+}
+
+[name='text']::slotted(*) {
+  color: var(--mdc-theme-text-primary-on-background);
+  font-family: var(--mdc-typography-body1-font-family);
+  font-size: var(--mdc-typography-body1-font-size);
+  font-weight: var(--mdc-typography-body1-font-weight);
+  line-height: var(--mdc-typography-body1-line-height);
+  letter-spacing: 0.4px;
+}
+
+[name='text']::slotted(*:last-child) {
+  color: var(--mdc-theme-text-secondary-on-background);
+  font-family: var(--mdc-typography-body2-font-family);
+  font-size: var(--mdc-typography-body2-font-size);
+  font-weight: var(--mdc-typography-body2-font-weight);
+  line-height: var(--mdc-typography-body2-line-height);
+}

package/src/icon-radio/icon-radio.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentIconRadioToggle } from './icon-radio-toggle';
+
+describe('Icon radio', () => {
+  it('should work', () => {
+    expect(new CovalentIconRadioToggle()).toBeDefined();
+  });
+});

package/src/icon-radio/icon-radio.stories.js

@@ -0,0 +1,23 @@
+import './icon-radio-toggle';
+
+export default {
+  title: 'Components/Icon Radio',
+  args: {
+    iconOnly: false,
+  },
+};
+
+export const Template = ({ iconOnly }) => {
+  return `
+      <cv-radio-icon ${iconOnly ? 'iconOnly' : ''}>
+        <cv-icon slot="icon">work</cv-icon>
+        <div slot="text">Balanced</div>
+        <div slot="text">Every week</div>
+      </cv-radio-icon>
+      <cv-radio-icon ${iconOnly ? 'iconOnly' : ''}>
+        <cv-icon slot="icon">work</cv-icon>
+        <div slot="text">Balanced</div>
+        <div slot="text">Every week</div>
+      </cv-radio-icon>
+  `;
+};

package/src/index.scss

@@ -0,0 +1 @@
+@forward './theme' show components-theme;

package/src/index.ts

@@ -0,0 +1,57 @@
+export * from './action-ribbon/action-ribbon';
+export * from './alert/alert';
+export * from './app-shell/app-shell';
+export * from './badge/badge';
+export * from './button/button';
+export * from './card/card';
+export * from './checkbox/checkbox';
+export * from './list/check-list-item';
+export * from './chips/chip';
+export * from './chips/chip-set';
+export * from './circular-progress/circular-progress';
+export * from './code-editor/code-editor';
+export * from './code-snippet/code-snippet';
+export * from './dialog/dialog';
+export * from './drawer/drawer';
+export * from './empty-state/empty-state';
+export * from './expansion-panel/expansion-panel';
+export * from './expansion-panel/expansion-panel-item';
+export * from './focused-page/focused-page';
+export * from './formfield/formfield';
+export * from './full-screen-dialog/full-screen-dialog';
+export * from './icon/icon';
+export * from './icon/icon-demo';
+export * from './icon-button/icon-button';
+export * from './icon-button-toggle/icon-button-toggle';
+export * from './icon-checkbox/icon-check-toggle';
+export * from './icon-lockup/icon-lockup';
+export * from './icon-radio/icon-radio-toggle';
+export * from './linear-progress/linear-progress';
+export * from './list/list';
+export * from './list/list-item';
+export * from './menu/menu';
+export * from './list/nav-list-item';
+export * from './notebook-cell/notebook-cell';
+export * from './radio/radio';
+export * from './list/radio-list-item';
+export * from './select/select';
+export * from './side-sheet/side-sheet';
+export * from './slider/slider';
+export * from './slider/slider-range';
+export * from './snackbar/snackbar';
+export * from './status-dialog/status-dialog';
+export * from './status-header/status-header';
+export * from './status-header/status-header-item';
+export * from './switch/switch';
+export * from './tab/tab';
+export * from './tab/tab-bar';
+export * from './textarea/textarea';
+export * from './textfield/textfield';
+export * from './text-lockup/text-lockup';
+export * from './toolbar/toolbar';
+export * from './tooltip/tooltip';
+export * from './top-app-bar/top-app-bar';
+export * from './top-app-bar/top-app-bar-fixed';
+export * from './tree-list/tree-list';
+export * from './tree-list/tree-list-item';
+export * from './typography/typography';

package/src/linear-progress/linear-progress.scss

@@ -0,0 +1,4 @@
+
+:host {
+  --mdc-linear-progress-buffer-color: var(--mdc-theme-border);
+}

package/src/linear-progress/linear-progress.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentLinearProgress } from './linear-progress';
+
+describe('Linear progress', () => {
+  it('should work', () => {
+    expect(new CovalentLinearProgress()).toBeDefined();
+  });
+});

package/src/linear-progress/linear-progress.stories.js

@@ -0,0 +1,43 @@
+import './linear-progress';
+
+export default {
+  title: 'Components/Linear Progress',
+  parameters: {
+    layout: 'padded',
+    // disables Chromatic's snapshotting on a story level
+    chromatic: { disableSnapshot: true },
+  },
+  argTypes: {
+    progress: {
+      control: { type: 'range', max: 1, min: 0, step: 0.1 },
+    },
+    buffer: {
+      control: { type: 'range', max: 1, min: 0, step: 0.1 },
+    },
+    reverse: {
+      control: 'boolean',
+    },
+  },
+};
+
+const Template = ({ indeterminate, buffer, progress, reverse }) => {
+  const progressBar = document.createElement('cv-linear-progress');
+  progressBar.indeterminate = indeterminate;
+  progressBar.buffer = buffer;
+  progressBar.progress = progress;
+  progressBar.reverse = reverse;
+  progressBar.ariaLabel = 'Example progress bar'
+
+  return progressBar;
+};
+
+export const Indeterminate = Template.bind({});
+Indeterminate.args = {
+  indeterminate: true,
+};
+
+export const Determinate = Template.bind({});
+Determinate.args = {
+  progress: 0.5,
+  buffer: 0.5,
+};

package/src/linear-progress/linear-progress.ts

@@ -0,0 +1,18 @@
+import { css, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { LinearProgressBase } from '@material/mwc-linear-progress/mwc-linear-progress-base';
+import { styles as baseStyles } from '@material/mwc-linear-progress/mwc-linear-progress.css';
+import styles from './linear-progress.scss?inline';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-linear-progress': CovalentLinearProgress;
+  }
+}
+
+@customElement('cv-linear-progress')
+export class CovalentLinearProgress extends LinearProgressBase {
+  static override styles = [baseStyles, css`${unsafeCSS(styles)}`];
+}
+
+export default CovalentLinearProgress;

package/src/list/Overview.mdx

@@ -0,0 +1,91 @@
+import { Canvas, DocsContainer, Meta, Story } from '@storybook/blocks';
+import * as ListStories from './list.stories';
+
+<Meta of={ListStories} />
+
+<style>
+  {`
+    .docs-story > div:first-of-type .innerZoomElementWrapper > div {
+        border: none !important;
+    }
+    .docs-story mwc-list {
+      margin: 0 auto;
+      max-width: 30rem;
+    }
+    `}
+</style>
+
+# Lists
+
+## Anatomy
+
+A list item may contain:
+
+- 1, 2 or 3 lines of text
+- A leading icon or avatar image
+- A trailing icon
+
+<Canvas>
+  <cv-list>
+    <cv-list-item graphic="avatar" hasMeta twoline>
+      <span>Two-line list item</span>
+      <span slot="secondary">Secondary line</span>
+      <cv-icon slot="graphic">folder</cv-icon>
+      <cv-icon slot="meta">help</cv-icon>
+    </cv-list-item>
+  </cv-list>
+</Canvas>
+
+## Displaying status
+
+Show as a byline in your list item. Do not use the main icon or avatar - this is reserved for showing object type.
+
+<Canvas>
+  <cv-list>
+    <cv-list-item twoline graphic="avatar">
+      <span>User Name</span>
+
+      <span slot="secondary" class="status-caution">
+        <cv-icon>warning</cv-icon>
+        Warning
+      </span>
+
+      <cv-icon slot="graphic" class="inverted">
+        tag\_faces
+      </cv-icon>
+    </cv-list-item>
+
+    <li divider role="separator" />
+
+    <cv-list-item twoline graphic="avatar">
+      <span>User Name</span>
+
+      <span slot="secondary" class="status-negative">
+        <cv-icon>error</cv-icon>
+        Error
+      </span>
+
+      <cv-icon slot="graphic" class="inverted">
+        tag\_faces
+      </cv-icon>
+    </cv-list-item>
+
+    <li divider role="separator" />
+
+    <cv-list-item twoline graphic="avatar">
+      <span>User Name</span>
+
+      <span slot="secondary" class="status-positive">
+        <cv-icon>check</cv-icon>
+        Successful
+      </span>
+
+      <cv-icon slot="graphic" class="inverted">
+        tag\_faces
+      </cv-icon>
+    </cv-list-item>
+
+    <li divider role="separator" />
+
+  </cv-list>
+</Canvas>

package/src/list/_list.theme.scss

@@ -0,0 +1,100 @@
+@use '@material/list' as list;
+@use '@material/list/evolution-mixins' as evolution-mixins;
+
+:host {
+  $border: var(--mdc-theme-border);
+  $text: var(--mdc-theme-on-surface-variant);
+
+  --mdc-list-single-line-height: 48px;
+  --mdc-list-two-line-height: 72px;
+
+  // --- web component --- //
+
+  @include list.deprecated-divider-color($border);
+  @include evolution-mixins.divider-color($border);
+
+  // Menu
+  .mdc-menu .mdc-deprecated-list {
+    @include list.deprecated-item-primary-text-ink-color($text);
+  }
+
+  // --- non-web component --- //
+
+  .mdc-list {
+    @include evolution-mixins.one-line-item-height(
+      var(--mdc-list-single-line-height, 48px)
+    );
+    @include evolution-mixins.two-line-item-height(
+      var(--mdc-list-two-line-height, 72px)
+    );
+
+    .mdc-list-item {
+      height: var(--mdc-list-single-line-height, 48px);
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+    }
+
+    &.mdc-list--two-line .mdc-list-item {
+      height: var(--mdc-list-two-line-height, 72px);
+
+      .mdc-list-item__primary-text {
+        display: block;
+        margin-bottom: -8px;
+      }
+    }
+  }
+
+  .mdc-deprecated-list.mdc-deprecated-list--avatar-list
+    .mdc-deprecated-list-item__graphic,
+  cv-list-item[graphic='avatar'] cv-icon[slot='graphic'] {
+    background-color: var(--mdc-theme-surface-neutral-highlight);
+  }
+
+  cv-list-item,
+  cv-check-list-item,
+  .mdc-list,
+  .cv-list-item,
+  .mdc-deprecated-list,
+  .mdc-deprecated-list-item__text,
+  .mdc-list-item__primary-text {
+    font-family: var(--mdc-typography-font-family);
+    font-size: var(--mdc-typography-body1-font-size);
+    font-weight: var(--mdc-typography-body1-font-weight);
+    line-height: var(--mdc-typography-body1-line-height);
+  }
+
+  cv-list-item {
+    span[slot='secondary'] {
+      cv-icon {
+        font-size: 1rem;
+        margin-right: 0.25rem;
+        position: relative;
+        top: 3px;
+      }
+
+      &.status-caution {
+        color: var(--mdc-theme-caution);
+      }
+
+      &.status-negative {
+        color: var(--mdc-theme-negative);
+      }
+
+      &.status-positive {
+        color: var(--mdc-theme-positive);
+      }
+    }
+  }
+
+  .beta-list-item {
+    --mdc-theme-primary: #{var(--mdc-theme-surface-caution)};
+  }
+
+  // Divider
+  [divider] {
+    border-bottom: 1px solid;
+    list-style: none;
+    border-color: var(--mdc-theme-border, rgba(black, 0.12));
+  }
+}

package/src/list/check-list-item.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentCheckListItem } from './check-list-item';
+
+describe('Check list expansion item', () => {
+  it('should work', () => {
+    expect(new CovalentCheckListItem()).toBeDefined();
+  });
+});

package/src/list/check-list-item.ts

@@ -0,0 +1,25 @@
+import { CheckListItemBase } from '@material/mwc-list/mwc-check-list-item-base';
+import { styles as controlStyle } from '@material/mwc-list/mwc-control-list-item.css';
+import { styles } from '@material/mwc-list/mwc-list-item.css';
+import covalentStyles from './list-item.scss?inline';
+import { customElement } from 'lit/decorators.js';
+import { css, unsafeCSS } from 'lit';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-check-list-item': CovalentCheckListItem;
+  }
+}
+
+@customElement('cv-check-list-item')
+export class CovalentCheckListItem extends CheckListItemBase {
+  static override styles = [
+    styles,
+    controlStyle,
+    css`
+      ${unsafeCSS(covalentStyles)}
+    `,
+  ];
+}
+
+export default CovalentCheckListItem;