feat(components): adding text lockup component

libs/components/src/index.ts

@@ -34,6 +34,7 @@ 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 './top-app-bar/top-app-bar';
 export * from './top-app-bar/top-app-bar-fixed';

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

libs/components/src/text-lockup/text-lockup.spec.ts

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

libs/components/src/text-lockup/text-lockup.stories.js

@@ -0,0 +1,74 @@
+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' },
+      defaultValue: 'small',
+    },
+    text: {
+      control: 'text',
+      defaultValue: 'TDICAM-8523411',
+    },
+    icon: {
+      options: MAT_ICON_LIST,
+      control: { type: 'select' },
+    },
+    subText: {
+      control: 'text',
+      defaultValue: 'environment Id',
+    },
+    subTextState: {
+      options: ['active', 'positive', 'negative', 'caution'],
+      control: { type: 'select' },
+    },
+    subTextTrailing: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+  },
+};
+
+export const textLockup = ({
+  icon,
+  scale,
+  subText,
+  subTextState,
+  subTextTrailing,
+  text,
+}) => {
+  return `
+    <td-text-lockup
+      subtext="${subText}"
+      scale="${scale}"
+      ${icon ? `icon="${icon}"` : ''}
+      ${subTextState ? `state="${subTextState}"` : ''}
+      ${subTextTrailing ? 'trailingSubText' : ''}>${text}</td-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,
+};

libs/components/src/text-lockup/text-lockup.ts

@@ -0,0 +1,49 @@
+import { html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import styles from './text-lockup.scss';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'td-text-lockup': CovalentTextLockup;
+  }
+}
+
+@customElement('td-text-lockup')
+export class CovalentTextLockup extends LitElement {
+  static override styles = [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`<td-icon>${this.icon}</td-icon>` : nothing;
+  }
+}

libs/components/webpack.config.js

@@ -45,6 +45,7 @@ module.exports = {
     tabBar: './libs/components/src/tab/tab-bar.ts',
     textArea: './libs/components/src/textarea/textarea.ts',
     textField: './libs/components/src/textfield/textfield.ts',
+    textLockup: './libs/components/src/text-lockup/text-lockup.ts',
     toolbar: './libs/components/src/toolbar/toolbar.ts',
     topAppBar: './libs/components/src/top-app-bar/top-app-bar.ts',
     topAppBarFixed: './libs/components/src/top-app-bar/top-app-bar-fixed.ts',