@covalent/components 0.0.0-COVALENT

package/src/text-lockup/text-lockup.ts

@@ -0,0 +1,55 @@
+import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import styles from './text-lockup.scss?inline';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-text-lockup': CovalentTextLockup;
+  }
+}
+
+@customElement('cv-text-lockup')
+export class CovalentTextLockup extends LitElement {
+  static override styles = [
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+
+  @property()
+  subText!: string;
+
+  @property()
+  icon?: string;
+
+  @property()
+  state?: 'active' | 'positive' | 'negative' | 'caution';
+
+  @property()
+  scale: 'large' | 'small' = 'small';
+
+  @property({ type: Boolean, reflect: true })
+  trailingSubText = false;
+
+  override render() {
+    const classes: { [key: string]: boolean } = {
+      'subtext--trailing': this.trailingSubText,
+    };
+    classes[`scale--${this.scale}`] = true;
+
+    if (this.state) {
+      classes[`subtext-state--${this.state}`] = true;
+    }
+    return html`<span class="${classMap(classes)}"
+      ><span class="subtext">${this.renderIcon()}${this.subText}</span
+      ><slot></slot
+    ></span>`;
+  }
+
+  renderIcon() {
+    return this.icon ? html`<cv-icon>${this.icon}</cv-icon>` : nothing;
+  }
+}
+
+export default CovalentTextLockup;

package/src/textarea/textarea.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentTextArea } from './textarea';
+
+describe('Text area', () => {
+  it('should work', () => {
+    expect(new CovalentTextArea()).toBeDefined();
+  });
+});

package/src/textarea/textarea.stories.js

@@ -0,0 +1,39 @@
+import './textarea';
+
+export default {
+  title: 'Components/Text area',
+  argTypes: {
+    style: {
+      options: ['outlined', 'filled'],
+      control: { type: 'radio' },
+    },
+  },
+  args: {
+    style: 'outlined',
+    disabled: false,
+  },
+};
+
+const Template = ({ label, style, disabled, required, helper }) => {
+  return `
+        <cv-textarea 
+            label="${label ?? style}"
+            ${style}
+            ${helper ? `helper="${helper}"` : null}
+            ${disabled ? `disabled` : null}
+            ${required ? `required` : null}>
+        </cv-textarea>`;
+};
+
+export const Basic = Template.bind({});
+
+export const Required = Template.bind({});
+Required.args = {
+  required: true,
+};
+
+export const HelperText = Template.bind({});
+HelperText.args = {
+  label: 'Click to see helper text',
+  helper: 'Helper Text',
+};

package/src/textarea/textarea.ts

@@ -0,0 +1,19 @@
+import { css, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { TextAreaBase } from '@material/mwc-textarea/mwc-textarea-base';
+import { styles as baseTextAreaStyles } from '@material/mwc-textarea/mwc-textarea.css';
+import { styles as textfieldStyles } from '@material/mwc-textfield/mwc-textfield.css.js';
+import styles from '../textfield/textfield.scss?inline';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-textarea': CovalentTextArea;
+  }
+}
+
+@customElement('cv-textarea')
+export class CovalentTextArea extends TextAreaBase {
+  static override styles = [textfieldStyles, baseTextAreaStyles, css`${unsafeCSS(styles)}`];
+}
+
+export default CovalentTextArea;

package/src/textfield/textfield.scss

@@ -0,0 +1,34 @@
+:host {
+  --mdc-text-field-label-ink-color: var(
+    --mdc-theme-text-secondary-on-background
+  );
+  --mdc-text-field-ink-color: var(--mdc-theme-text-secondary-on-background);
+  --mdc-text-field-fill-color: var(--mdc-theme-surface-canvas);
+  --mdc-text-field-idle-line-color: var(--mdc-theme-border);
+  --mdc-text-field-hover-line-color: var(--mdc-theme-text-icon-on-background);
+  --mdc-text-field-outlined-idle-border-color: var(--mdc-theme-border);
+  --mdc-text-field-outlined-hover-border-color: var(
+    --mdc-theme-text-icon-on-background
+  );
+  --mdc-text-field-outlined-disabled-border-color: var(--cv-theme-outline-12);
+  --mdc-text-field-disabled-ink-color: var(--cv-theme-on-surface-38);
+  --mdc-typography-subtitle1-font-family: var(
+    --mdc-typography-body1-font-family
+  );
+  --mdc-typography-subtitle1-font-size: var(
+    --mdc-typography-body1-font-size,
+    1rem
+  );
+  --mdc-typography-subtitle1-font-weight: var(
+    --mdc-typography-body1-font-weight,
+    400
+  );
+}
+
+:host([dense]) {
+  height: 48px;
+}
+
+.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon {
+  color: var(--mdc-theme-text-icon-on-background);
+}

package/src/textfield/textfield.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentTextField } from './textfield';
+
+describe('Text field', () => {
+  it('should work', () => {
+    expect(new CovalentTextField()).toBeDefined();
+  });
+});

package/src/textfield/textfield.stories.js

@@ -0,0 +1,60 @@
+import './textfield';
+
+export default {
+  title: 'Components/Text field',
+  argTypes: {
+    style: {
+      options: ['outlined', 'filled'],
+      control: { type: 'radio' },
+    },
+  },
+  args: {
+    style: 'outlined',
+    disabled: false,
+  },
+};
+
+const Template = ({
+  icon,
+  iconTrailing,
+  label,
+  style,
+  disabled,
+  required,
+  helper,
+}) => {
+  return `
+        <cv-textfield 
+            label="${label ?? style}"
+            ${style}
+            ${
+              iconTrailing && icon
+                ? `iconTrailing="${icon}"`
+                : icon
+                ? `icon="${icon}"`
+                : null
+            }
+            ${helper ? `helper="${helper}"` : null}
+            ${disabled ? `disabled` : null}
+            ${required ? `required` : null}>
+        </cv-textfield>`;
+};
+
+export const Basic = Template.bind({});
+
+export const Required = Template.bind({});
+Required.args = {
+  required: true,
+};
+
+export const Icon = Template.bind({});
+Icon.args = {
+  icon: 'houseboat',
+  iconTrailing: false,
+};
+
+export const HelperText = Template.bind({});
+HelperText.args = {
+  label: 'Click to see helper text',
+  helper: 'Helper Text',
+};

package/src/textfield/textfield.ts

@@ -0,0 +1,25 @@
+import { css, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { TextFieldBase } from '@material/mwc-textfield/mwc-textfield-base';
+import { styles as baseTextFieldStyles } from '@material/mwc-textfield/mwc-textfield.css';
+import styles from './textfield.scss?inline';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-textfield': CovalentTextField;
+  }
+}
+
+@customElement('cv-textfield')
+export class CovalentTextField extends TextFieldBase {
+  static override styles = [
+    baseTextFieldStyles,
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+
+  override outlined = true;
+}
+
+export default CovalentTextField;

package/src/theme/_index.scss

@@ -0,0 +1,46 @@
+@mixin css-variable-tokens($theme, $prefix: 'cv-theme') {
+  @each $key, $value in $theme {
+    --#{$prefix}-#{$key}: #{map-get($theme, $key)};
+  }
+}
+
+@mixin components-theme($theme, $typography) {
+  // Covalent theme tokens as css variables
+  @include css-variable-tokens($theme);
+  // Covalent typography tokens as css variables
+  @include css-variable-tokens($typography, 'cv-typography');
+  // Material tokens as css variables
+  @include css-variable-tokens($theme, 'mdc-theme');
+  // Material typography tokens as css variables
+  @include css-variable-tokens($typography, 'mdc-typography');
+
+  // Overrides that dont fit in the theme map
+  --mdc-theme-border: #{map-get($theme, divider)};
+  --mdc-theme-surface-accent: #{map-get($theme, surface-primary)};
+  --mdc-theme-surface-accent-highlight: #{map-get(
+      $theme,
+      surface-primary-highlight
+    )};
+  --mdc-theme-surface-accent-highlight-hover: #{map-get(
+      $theme,
+      surface-primary-highlight-hover
+    )};
+  --mdc-typography-button-letter-spacing: 0;
+
+  // Icons
+  --mdc-icon-font: 'Material Symbols Outlined';
+
+  // Ripple
+  --mdc-ripple-color: #{map-get($theme, on-surface)};
+
+  // Shape
+  --mdc-shape-small: 8px;
+  --mdc-shape-medium: 8px;
+
+  // Tooltip
+  --mdc-plain-tooltip-container-color: #{map-get($theme, inverse-surface)};
+  --mdc-plain-tooltip-supporting-text-color: #{map-get(
+      $theme,
+      inverse-on-surface
+    )};
+}

package/src/theme/prebuilt/dark-theme.scss

@@ -0,0 +1,17 @@
+@use '@covalent/tokens' as tokens;
+@use '../../data-table/data-table.theme' as data-table;
+@use '../' as theme;
+
+$theme-tokens: map-get(tokens.$tokens, 'theme');
+$dark-tokens: map-get($theme-tokens, 'dark');
+$dark-colors: map-get($dark-tokens, 'colors');
+$typography: map-get(tokens.$tokens, 'typography');
+// Deprecated tokens
+$dark-colors: map-merge($dark-colors, map-get(tokens.$tokens, 'dark'));
+
+// Define the base theme using dark tokens w/ dark tokens
+:root {
+  @include theme.components-theme($dark-colors, $typography);
+
+  @include data-table.data-table-theme($dark-colors);
+}

package/src/theme/prebuilt/light-theme.scss

@@ -0,0 +1,17 @@
+@use '@covalent/tokens' as tokens;
+@use '../../data-table/data-table.theme' as data-table;
+@use '../' as theme;
+
+$theme-tokens: map-get(tokens.$tokens, 'theme');
+$light-tokens: map-get($theme-tokens, 'light');
+$light-colors: map-get($light-tokens, 'colors');
+$typography: map-get(tokens.$tokens, 'typography');
+// Deprecated tokens
+$light-colors: map-merge($light-colors, map-get(tokens.$tokens, 'light'));
+
+// Define the base theme using light tokens w/ light tokens
+:root {
+  @include theme.components-theme($light-colors, $typography);
+
+  @include data-table.data-table-theme($light-colors);
+}

package/src/toolbar/toolbar.scss

@@ -0,0 +1,37 @@
+@use '@material/mwc-top-app-bar/node_modules/@material/top-app-bar/mdc-top-app-bar';
+
+:host {
+  display: block;
+}
+
+:host([sticky]) {
+  position: sticky;
+  top: 0;
+}
+
+.mdc-top-app-bar__title {
+  padding-left: 0;
+}
+
+@media screen and (max-width: 768px) {
+  .mdc-top-app-bar__title {
+    font-family: var(--mdc-typography-subtitle2-font-family);
+    font-size: var(--mdc-typography-subtitle2-font-size);
+    font-weight: var(--mdc-typography-subtitle2-font-weight);
+    line-height: var(--mdc-typography-subtitle2-line-height);
+  }
+}
+
+.mdc-top-app-bar {
+  position: static;
+  background-color: transparent;
+  background-color: var(--mdc-theme-surface);
+  color: var(--mdc-theme-on-surface);
+  border-top-left-radius: var(--cv-border-radius-outer);
+  border-top-right-radius: var(--cv-border-radius-outer);
+}
+
+.mdc-top-app-bar--fixed-adjust,
+.mdc-top-app-bar--dense-fixed-adjust {
+  padding-top: 0;
+}

package/src/toolbar/toolbar.spec.ts

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

package/src/toolbar/toolbar.stories.js

@@ -0,0 +1,66 @@
+import './toolbar';
+
+import '../button/button';
+import '../icon-button/icon-button';
+
+export default {
+  title: 'Components/Toolbar',
+  args: {
+    title: 'Page title',
+    dense: false,
+    filter: true,
+    search: true,
+    add: true,
+    secondaryAction: true,
+    action: true,
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Toolbar = ({
+  dense,
+  title,
+  filter,
+  search,
+  add,
+  secondaryAction,
+  action,
+}) => {
+  return `
+    <cv-toolbar ${dense ? 'dense' : ''}>
+      <span slot="title">${title}</span> 
+      ${
+        filter
+          ? '<cv-icon-button icon="filter_list" slot="actionItems"></cv-icon-button>'
+          : ''
+      }
+      ${
+        search
+          ? '<cv-icon-button icon="search" slot="actionItems"></cv-icon-button>'
+          : ''
+      }
+      ${
+        add
+          ? '<cv-icon-button icon="add" slot="actionItems"></cv-icon-button>'
+          : ''
+      }
+      ${
+        secondaryAction
+          ? '<cv-button outlined slot="actionItems">Button text</cv-button>'
+          : ''
+      }
+      ${
+        action
+          ? '<cv-button outlined slot="actionItems">Button text</cv-button>'
+          : ''
+      }
+    </cv-toolbar>
+  `;
+};
+
+export const denseToolbar = Toolbar.bind({});
+denseToolbar.args = {
+  dense: 'true',
+};

package/src/toolbar/toolbar.ts

@@ -0,0 +1,27 @@
+import { css, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { TopAppBarBase } from '@material/mwc-top-app-bar/mwc-top-app-bar-base';
+import styles from './toolbar.scss?inline';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-toolbar': CovalentToolbar;
+  }
+}
+
+@customElement('cv-toolbar')
+export class CovalentToolbar extends TopAppBarBase {
+  static override styles = [
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+
+  /**
+   * position sticky when scrolled
+   */
+  @property({ type: Boolean, reflect: true })
+  sticky = false;
+}
+
+export default CovalentToolbar;

package/src/tooltip/tooltip.scss

@@ -0,0 +1,16 @@
+@use '@material/tooltip/tooltip-theme' as tooltip-theme;
+@use '@material/tooltip/styles' as tooltip;
+
+@include tooltip-theme.fill-color(var(--mdc-plain-tooltip-container-color));
+@include tooltip-theme.label-ink-color(
+  var(--mdc-plain-tooltip-supporting-text-color)
+);
+
+.mdc-tooltip {
+  @include tooltip-theme.rich-fill-color(var(--cv-theme-surface-container));
+  @include tooltip-theme.rich-text-ink-color(
+    var(--cv-theme-on-surface-variant),
+    var(--cv-theme-on-surface-variant),
+    var(--mdc-theme-accent)
+  );
+}

package/src/tooltip/tooltip.spec.ts

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

package/src/tooltip/tooltip.stories.js

@@ -0,0 +1,72 @@
+import './tooltip';
+import '../icon/icon';
+
+export default {
+  title: 'Components/Tooltip',
+  argTypes: {
+    showDelayInMs: {
+      control: 'number',
+      label: 'show delay in milliseconds',
+    },
+    hideDelayInMs: {
+      control: 'number',
+      label: 'hide delay in milliseconds',
+    },
+  },
+  args: {
+    content: "I'm a tooltip!",
+  },
+};
+
+const Template = ({
+  richTitle,
+  isRich,
+  isPersistent,
+  content,
+  showDelayInMs,
+  hideDelayInMs,
+}) => {
+  document.addEventListener('DOMContentLoaded', () => {
+    window.tooltip.anchor = window.button;
+  });
+  return `
+    <cv-icon
+      style="font-size: 36px;"
+      aria-expanded="true"
+      aria-haspopup="dialog"
+      id="button">
+      help
+    </cv-icon>
+    <cv-tooltip
+      id="tooltip"
+      ${richTitle ? `richTitle="${richTitle}"` : ''}
+      ${showDelayInMs >= 0 ? `showDelay="${showDelayInMs}"` : ''}
+      ${hideDelayInMs >= 0 ? `hideDelay="${hideDelayInMs}"` : ''}
+      ${isRich ? 'rich' : ''}
+      ${isPersistent ? 'persistent' : ''}>
+      ${content}
+    </cv-tooltip>
+  `;
+};
+
+export const Basic = Template.bind({});
+
+export const Rich = Template.bind({});
+Rich.args = {
+  isRich: true,
+  isPersistent: true,
+  richTitle: 'This is the rich title!',
+  content: `
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
+      pretium vitae est et dapibus. Aenean sit amet felis eu lorem fermentum
+      aliquam sit amet sit amet eros.
+      <a class="mdc-tooltip__content-link" href="http://teradata.com" target="_blank">Learn more</a>.
+      <cv-button slot="actionItems" label="Action"></button>
+  `,
+};
+
+export const NoDelay = Template.bind({});
+NoDelay.args = {
+  showDelayInMs: 0,
+  hideDelayInMs: 0,
+};