feat(components): adding @divrags status header component

libs/components/src/icon/icon.stories.js

@@ -127,7 +127,7 @@ export default {
     size: {
       options: ['64px', '48px', '24px', '16px'],
       control: { type: 'select' },
-      defaultValue: 'houseboat',
+      defaultValue: '48px',
     },
 
     onClick: { action: 'onClick' },

libs/components/src/index.ts

@@ -24,6 +24,8 @@ export * from './select/select';
 export * from './slider/slider';
 export * from './slider/slider-range';
 export * from './snackbar/snackbar';
+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';

libs/components/src/snackbar/_snackbar.theme.scss

@@ -3,8 +3,9 @@
 @mixin snack-bar-theme($theme) {
   $accent: map-get($theme, primary);
   $icon-on-dark: map-get($theme, text-icon-on-dark);
+  $text-on-dark: map-get($theme, text-primary-on-dark);
 
-  --mdc-snackbar-action-color: #{$accent};
+  --mdc-snackbar-action-color: #{$text-on-dark};
 
   td-snackbar {
     td-icon-button {

libs/components/src/status-header/_status-header.theme.scss

@@ -0,0 +1,75 @@
+@mixin theme {
+  .status-header {
+    --td-status-header-background: transparent;
+    --td-status-header-icon-background: var(
+      --mdc-theme-surface-neutral-highlight-hover
+    );
+    --td-status-header-icon-color: var(--mdc-theme-text-icon-on-background);
+    --td-status-header-status-color: var(--mdc-theme-on-surface);
+
+    background-color: var(--td-status-header-background);
+
+    .status-header-content {
+      max-width: inherit;
+      flex-direction: column;
+    }
+
+    .status-header-icon {
+      background-color: var(--td-status-header-icon-background);
+      color: var(--td-status-header-icon-color);
+    }
+
+    .status-header-text {
+      --mdc-theme-primary: var(--mdc-theme-surface-neutral-highlight-hover);
+      --mdc-theme-on-surface: var(--mdc-theme-text-icon-on-background);
+
+      color: var(--td-status-header-status-color);
+    }
+
+    .status-header-title-text {
+      color: var(--mdc-theme-on-surface);
+    }
+
+    &.active {
+      --td-status-header-background: var(
+        --mdc-theme-surface-secondary-highlight
+      );
+      --td-status-header-icon-background: var(
+        --mdc-theme-surface-secondary-highlight-hover
+      );
+      --td-status-header-icon-color: var(--mdc-theme-secondary);
+      --td-status-header-status-color: var(--mdc-theme-secondary);
+    }
+
+    &.caution {
+      --td-status-header-background: var(--mdc-theme-surface-caution-highlight);
+      --td-status-header-icon-background: var(
+        --mdc-theme-surface-caution-highlight-hover
+      );
+      --td-status-header-icon-color: var(--mdc-theme-caution);
+      --td-status-header-status-color: var(--mdc-theme-caution);
+    }
+
+    &.error {
+      --td-status-header-background: var(
+        --mdc-theme-surface-negative-highlight
+      );
+      --td-status-header-icon-background: var(
+        --mdc-theme-surface-negative-highlight-hover
+      );
+      --td-status-header-icon-color: var(--mdc-theme-negative);
+      --td-status-header-status-color: var(--mdc-theme-negative);
+    }
+
+    &.positive {
+      --td-status-header-background: var(
+        --mdc-theme-surface-positive-highlight
+      );
+      --td-status-header-icon-background: var(
+        --mdc-theme-surface-positive-highlight-hover
+      );
+      --td-status-header-icon-color: var(--mdc-theme-positive);
+      --td-status-header-status-color: var(--mdc-theme-positive);
+    }
+  }
+}

libs/components/src/status-header/status-header-base.ts

@@ -0,0 +1,42 @@
+import { html, LitElement } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { property } from 'lit/decorators.js';
+
+export class StatusHeaderBase extends LitElement {
+  @property() state: 'active' | 'positive' | 'caution' | 'error' | 'neutral' =
+    'neutral';
+  @property({ type: String }) statusText = '';
+  @property({ type: String }) statusHelper = '';
+  @property({ type: String }) titleText = '';
+
+  protected override render() {
+    const classes = {
+      active: this.state === 'active',
+      caution: this.state === 'caution',
+      error: this.state === 'error',
+      positive: this.state === 'positive',
+    };
+
+    return html`
+      <div class="status-header ${classMap(classes)}">
+        <div class="status-header-title">
+          <div class="status-header-title-text">${this.titleText}</div>
+          <slot name="status-header-actions"></slot>
+        </div>
+        <div class="status-header-status">
+          <div class="status-header-icon">
+            <slot name="status-header-icon"></slot>
+          </div>
+          <div class="status-header-text-block">
+            <div class="status-header-text">${this.statusText}</div>
+            <div class="status-header-helper">${this.statusHelper}</div>
+          </div>
+          <div class="status-header-slot">
+            <slot name="status-header-text"></slot>
+          </div>
+        </div>
+        <slot></slot>
+      </div>
+    `;
+  }
+}

libs/components/src/status-header/status-header-item.scss

@@ -0,0 +1,14 @@
+:host {
+  --td-status-header-item-width: 178px;
+
+  display: block;
+  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(--td-status-header-item-width);
+}

libs/components/src/status-header/status-header-item.ts

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

libs/components/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);
+  }
+}

libs/components/src/status-header/status-header.stories.js

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

libs/components/src/status-header/status-header.ts

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

libs/components/src/tab/tab.stories.js

@@ -11,14 +11,11 @@ export default {
 const Template = ({ icon, activeIndex = 0 }) => {
   return `
         <td-tab-bar activeIndex="${activeIndex}">
-            <td-tab ${icon ? `icon="${icon}"` : null}
-                     label="Tab one">
+            <td-tab${icon ? ` icon="${icon}"` : ``} label="Tab one">
             </td-tab>
-            <td-tab ${icon ? `icon="${icon}"` : null}
-                     label="Tab two">
+            <td-tab${icon ? ` icon="${icon}"` : ``} label="Tab two">
             </td-tab>
-            <td-tab ${icon ? `icon="${icon}"` : null}
-                     label="Tab three">
+            <td-tab${icon ? ` icon="${icon}"` : ``} label="Tab three">
             </td-tab>
         </td-tab-bar>`;
 };