@covalent/components 0.0.0-COVALENT

package/src/status-header/status-header-item.scss

@@ -0,0 +1,17 @@
+:host {
+  --cv-status-header-item-width: 178px;
+
+  display: flex;
+  padding: 14px 16px;
+  align-items: center;
+  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);
+}
+
+span {
+  display: inline-block;
+  width: var(--cv-status-header-item-width);
+  color: var(--mdc-theme-text-secondary-on-background);
+}

package/src/status-header/status-header-item.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentStatusHeaderItem } from './status-header-item';
+
+describe('Status header item', () => {
+  it('should work', () => {
+    expect(new CovalentStatusHeaderItem()).toBeDefined();
+  });
+});

package/src/status-header/status-header-item.ts

@@ -0,0 +1,32 @@
+import { css, html, LitElement, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import styles from './status-header-item.scss?inline';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-status-header-item': CovalentStatusHeaderItem;
+  }
+}
+
+/**
+ * Status header item
+ *
+ * @slot - This element has a slot
+ */
+@customElement('cv-status-header-item')
+export class CovalentStatusHeaderItem extends LitElement {
+  static override styles = [
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+
+  @property()
+  label!: string;
+
+  render() {
+    return html`<span>${this.label}</span> <slot></slot>`;
+  }
+}
+
+export default CovalentStatusHeaderItem;

package/src/status-header/status-header.scss

@@ -0,0 +1,57 @@
+@use './status-header.theme';
+@include status-header.theme();
+
+.status-header-title {
+  padding: 0 0 16px 16px;
+  height: fit-content;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.status-header-title-text {
+  font-family: var(--mdc-typography-headline6-font-family);
+  font-size: var(--mdc-typography-headline6-font-size);
+  font-weight: var(--mdc-typography-headline6-font-weight);
+  line-height: var(--mdc-typography-headline6-line-height);
+}
+
+.status-header-text {
+  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);
+}
+
+.status-header-icon {
+  --mdc-icon-size: 36px;
+
+  border-radius: 50%;
+  min-width: 72px;
+  height: 72px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.status-header-status {
+  padding-left: 32px;
+  padding-bottom: 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.status-header-text-block {
+  display: flex;
+  flex-direction: column;
+  margin-left: 12px;
+  margin-right: 56px;
+
+  .status-header-helper {
+    font-family: var(--mdc-typography-caption-font-family);
+    font-size: var(--mdc-typography-caption-font-size);
+    font-weight: var(--mdc-typography-caption-font-weight);
+    line-height: var(--mdc-typography-caption-line-height);
+  }
+}

package/src/status-header/status-header.spec.ts

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

package/src/status-header/status-header.stories.js

@@ -0,0 +1,114 @@
+import './status-header';
+import './status-header-item';
+import '../icon/icon';
+import '../circular-progress/circular-progress';
+
+export default {
+  title: 'Components/Status Header',
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    state: {
+      options: ['active', 'caution', 'error', 'positive', 'neutral'],
+      control: { type: 'select' },
+    },
+  },
+  args: {
+    state: 'neutral',
+    title: 'Item details',
+    status: 'Status',
+    icon: 'Status',
+  },
+};
+
+const renderIcon = (state, icon) => {
+  if (state === 'active') {
+    return `<cv-circular-progress slot="status-header-icon" indeterminate density="-2"></cv-circular-progress>`;
+  } else if (state === 'pending') {
+    return `<cv-icon slot="status-header-icon" class="covalent-icon">loader_dots</cv-icon>`;
+  } else {
+    return `<cv-icon slot="status-header-icon">${icon}</cv-icon>`;
+  }
+};
+
+const HeaderWithTabs = ({
+  state = 'neutral',
+  status = 'status',
+  title = 'title',
+  icon,
+}) => {
+  return `
+    <cv-status-header state="${state}" statusText="${status}" statusHelper="secondary text" titleText="${title}">
+      ${renderIcon(state, icon)}
+
+      <cv-icon-button slot="status-header-actions" icon="close" dialogAction="close" ></cv-icon-button>
+
+      <cv-status-header-item slot="status-header-text" label="Start time">
+        09/30/21 4:38:50 PM
+      </cv-status-header-item>
+      <cv-status-header-item slot="status-header-text" label="Last heartbeat">
+        09/30/21 4:38:51 PM
+      </cv-status-header-item>
+      <cv-status-header-item slot="status-header-text" label="Platform">
+        linux-x64
+      </cv-status-header-item>
+      <cv-status-header-item slot="status-header-text" label="Softvare version">
+        02.18.00.01-1
+      </cv-status-header-item>
+      <cv-status-header-item slot="status-header-text" label="Primary Cluster">
+        Yes
+      </cv-status-header-item>
+      <cv-status-header-item slot="status-header-text" label="Primary Cluster manager">
+        cs3094-04.labs.teradata.com
+      </cv-status-header-item>
+      <cv-tab-bar activeIndex="0">
+        <cv-tab label="Tab one">
+        </cv-tab>
+        <cv-tab label="Tab two">
+        </cv-tab>
+        <cv-tab label="Tab three">
+        </cv-tab>
+      </cv-tab-bar>
+    </cv-status-header>`;
+};
+
+export const Active = HeaderWithTabs.bind({});
+Active.args = {
+  state: 'active',
+  status: 'Running',
+  title: 'Active item details',
+};
+export const Caution = HeaderWithTabs.bind({});
+Caution.args = {
+  state: 'caution',
+  icon: 'warning',
+  status: 'Caution',
+  title: 'Caution item details',
+};
+export const Error = HeaderWithTabs.bind({});
+Error.args = {
+  state: 'error',
+  icon: 'error',
+  status: 'Error',
+  title: 'Error item details',
+};
+export const Positive = HeaderWithTabs.bind({});
+Positive.args = {
+  state: 'positive',
+  icon: 'done',
+  status: 'Positive',
+  title: 'Positive item details',
+};
+export const Paused = HeaderWithTabs.bind({});
+Paused.args = {
+  icon: 'pause',
+  status: 'Paused',
+  title: 'Paused item details',
+};
+export const Pending = HeaderWithTabs.bind({});
+Pending.args = {
+  state: 'pending',
+  status: 'Pending',
+  title: 'Pending item details',
+};

package/src/status-header/status-header.ts

@@ -0,0 +1,26 @@
+import { css, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { StatusHeaderBase } from './status-header-base';
+import styles from './status-header.scss?inline';
+
+/**
+ * Status header
+ *
+ * @slot - This element has a slot
+ */
+@customElement('cv-status-header')
+export class CovalentStatusHeader extends StatusHeaderBase {
+  static override styles = [
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-status-header': CovalentStatusHeader;
+  }
+}
+
+export default CovalentStatusHeader;

package/src/switch/switch.scss

@@ -0,0 +1,17 @@
+:host {
+  --mdc-theme-surface: var(--mdc-theme-background);
+  --mdc-switch-selected-handle-color: var(--mdc-theme-primary);
+  --mdc-switch-selected-hover-handle-color: var(--mdc-theme-primary);
+  --mdc-switch-selected-focus-handle-color: var(--mdc-theme-primary);
+  --mdc-switch-selected-pressed-handle-color: var(--mdc-theme-primary);
+  --mdc-switch-selected-track-color: var(--mdc-theme-surface-secondary);
+  --mdc-switch-selected-focus-track-color: var(
+    --mdc-theme-surface-secondary-highlight
+  );
+  --mdc-switch-selected-hover-track-color: var(
+    --mdc-theme-surface-secondary-highlight-hover
+  );
+  --mdc-switch-selected-pressed-track-color: var(
+    --mdc-theme-surface-secondary-highlight-hover
+  );
+}

package/src/switch/switch.spec.ts

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

package/src/switch/switch.stories.js

@@ -0,0 +1,41 @@
+import './switch';
+import '../formfield/formfield';
+
+export default {
+  title: 'Components/Switch',
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+    },
+    checked: {
+      control: 'boolean',
+    },
+    label: { control: 'text' },
+    onChange: { action: 'onChange' },
+  },
+};
+
+const Template = ({ disabled, label = 'On/Off', checked, onChange }) => {
+  const switchInput = document.createElement('cv-switch');
+  switchInput.checked = checked;
+  switchInput.disabled = disabled;
+  switchInput.ariaLabel = label;
+
+  switchInput.addEventListener('change', onChange);
+
+  if (label) {
+    const formfield = document.createElement('cv-formfield');
+    formfield.label = label;
+    formfield.appendChild(switchInput);
+
+    return formfield;
+  }
+
+  return `
+    <cv-formfield label="${label}" aria-label="${label}">
+      <cv-switch></cv-switch>
+    </cv-formfield>
+  `;
+};
+
+export const Basic = Template.bind({});

package/src/switch/switch.ts

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

package/src/tab/Overview.mdx

@@ -0,0 +1,38 @@
+import { Canvas, DocsContainer, Meta, Story } from '@storybook/blocks';
+import * as TabStories from './tab.stories';
+
+<Meta of={TabStories} />
+
+<style>
+  {`
+    
+    mwc-tab-bar {
+      border-bottom: 1px solid var(--mdc-theme-border);
+    }
+    .sbdocs .docs-story {
+      min-height: 8rem;
+    }
+
+    `}
+</style>
+
+# Tabs
+
+## Basics
+
+- Add 16px padding to the left and right of the tabs
+
+---
+
+## Examples
+
+<Canvas>
+  <cv-tab-bar>
+    <cv-tab label="Tab one" />
+
+    <cv-tab label="Tab two" />
+
+    <cv-tab label="Tab three" />
+
+  </cv-tab-bar>
+</Canvas>

package/src/tab/tab-bar.spec.ts

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

package/src/tab/tab-bar.ts

@@ -0,0 +1,16 @@
+import { TabBarBase } from '@material/mwc-tab-bar/mwc-tab-bar-base';
+import { styles } from '@material/mwc-tab-bar/mwc-tab-bar.css';
+import { customElement } from 'lit/decorators.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-tab-bar': CovalentTabBar;
+  }
+}
+
+@customElement('cv-tab-bar')
+export class CovalentTabBar extends TabBarBase {
+  static override styles = [styles];
+}
+
+export default CovalentTabBar;

package/src/tab/tab.scss

@@ -0,0 +1,10 @@
+:host {
+  --mdc-tab-text-label-color-default: var(
+    --mdc-theme-text-primary-on-background
+  );
+  --mdc-tab-color-default: var(--mdc-theme-text-icon-on-background);
+
+  .mdc-tab:not(.mdc-tab--active) .mdc-tab__text-label {
+    color: var(--mdc-theme-text-primary-on-background);
+  }
+}

package/src/tab/tab.spec.ts

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

package/src/tab/tab.stories.js

@@ -0,0 +1,30 @@
+import './tab-bar';
+import './tab';
+
+export default {
+  title: 'Components/Tabs',
+};
+
+const Template = ({ icon, activeIndex = 0 }) => {
+  return `
+        <cv-tab-bar activeIndex="${activeIndex}">
+            <cv-tab${icon ? ` icon="${icon}"` : ``} label="Tab one">
+            </cv-tab>
+            <cv-tab${icon ? ` icon="${icon}"` : ``} label="Tab two">
+            </cv-tab>
+            <cv-tab${icon ? ` icon="${icon}"` : ``} label="Tab three">
+            </cv-tab>
+        </cv-tab-bar>`;
+};
+
+export const Basic = Template.bind({});
+
+export const Icon = Template.bind({});
+Icon.args = {
+  icon: 'houseboat',
+};
+
+export const Preselected = Template.bind({});
+Preselected.args = {
+  activeIndex: 1,
+};

package/src/tab/tab.ts

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

package/src/text-lockup/text-lockup.scss

@@ -0,0 +1,66 @@
+.subtext--trailing {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.subtext {
+  display: flex;
+  align-items: center;
+
+  --mdc-icon-size: 16px;
+
+  color: var(--mdc-theme-text-secondary-on-background);
+  font-family: var(--mdc-typography-caption-font-family);
+  font-size: var(--mdc-typography-caption-font-size);
+  font-weight: var(--mdc-typography-caption-font-weight);
+  line-height: var(--mdc-typography-caption-line-height);
+  margin-bottom: 2px;
+
+  cv-icon {
+    margin-right: 8px;
+  }
+}
+
+slot {
+  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);
+  margin-bottom: 8px;
+}
+
+.scale--large {
+  .subtext {
+    --mdc-icon-size: 24px;
+
+    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);
+    margin-bottom: 2px;
+  }
+
+  slot {
+    font-family: var(--mdc-typography-headline4-font-family);
+    font-size: var(--mdc-typography-headline4-font-size);
+    font-weight: var(--mdc-typography-headline4-font-weight);
+    line-height: var(--mdc-typography-headline4-line-height);
+    margin-bottom: 8px;
+  }
+}
+
+.subtext-state--positive .subtext {
+  color: var(--mdc-theme-positive);
+}
+
+.subtext-state--negative .subtext {
+  color: var(--mdc-theme-negative);
+}
+
+.subtext-state--caution .subtext {
+  color: var(--mdc-theme-caution);
+}
+
+.subtext-state--active .subtext {
+  color: var(--mdc-theme-accent);
+}

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

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

package/src/text-lockup/text-lockup.stories.js

@@ -0,0 +1,67 @@
+import './text-lockup';
+import iconList from '../../../icons/material-codepoints.json';
+
+const MAT_ICON_LIST = Object.keys(iconList);
+
+export default {
+  title: 'Components/Text lockup',
+  argTypes: {
+    scale: {
+      options: ['large', 'small'],
+      control: { type: 'radio' },
+    },
+    icon: {
+      options: MAT_ICON_LIST,
+      control: { type: 'select' },
+    },
+    subTextState: {
+      options: ['active', 'positive', 'negative', 'caution'],
+      control: { type: 'select' },
+    },
+  },
+  args: {
+    scale: 'small',
+    text: 'TDICAM-8523411',
+    subText: 'environment Id',
+    subTextTrailing: false,
+  },
+};
+
+export const textLockup = ({
+  icon,
+  scale,
+  subText,
+  subTextState,
+  subTextTrailing,
+  text,
+}) => {
+  return `
+    <cv-text-lockup
+      subtext="${subText}"
+      scale="${scale}"
+      ${icon ? `icon="${icon}"` : ''}
+      ${subTextState ? `state="${subTextState}"` : ''}
+      ${subTextTrailing ? 'trailingSubText' : ''}>${text}</cv-text-lockup>
+  `;
+};
+
+export const textLockupLarge = textLockup.bind({});
+textLockupLarge.args = {
+  scale: 'large',
+};
+
+export const textLockupTrailing = textLockup.bind({});
+textLockupTrailing.args = {
+  text: 'Jan 12th, 2022 at 5:10pm',
+  subText: 'Date last ran successfully',
+  subTextTrailing: true,
+};
+
+export const textLockupWithIcon = textLockup.bind({});
+textLockupWithIcon.args = {
+  icon: 'warning',
+  text: 'Daily production backup job',
+  subText: 'completed with issues',
+  subTextState: 'caution',
+  subTextTrailing: true,
+};