@covalent/components 0.0.0-COVALENT

package/src/tree-list/tree-list.ts

@@ -0,0 +1,53 @@
+import { css, html, LitElement, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import styles from './tree-list.scss?inline';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-tree-list': CovalentTreeList;
+  }
+}
+// Wraps cv-tree-list-item components
+@customElement('cv-tree-list')
+export class CovalentTreeList extends LitElement {
+  static override styles = [
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+  override render() {
+    return html`
+      <div class="container">
+        <div class="content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+// Create event listener for cv-tree-list-item's select event.
+document.addEventListener('select', (e: Event) => {
+  handleSelect(e);
+});
+const handleSelect = (e: Event): void => {
+  // All cv-tree-list-item components.
+  const items: any[] = Array.from(
+    document?.querySelectorAll('cv-tree-list-item')
+  );
+
+  // Currently selected item.
+  const target: HTMLElement = e.target as HTMLElement;
+  const current = target.shadowRoot?.querySelector('div.itemContent');
+
+  // Find previously selected element and remove the styling.
+  items.forEach((item) => {
+    item
+      .shadowRoot?.querySelector('div.itemContent')
+      ?.classList.remove('selected');
+  });
+
+  // Add the selected styling to the currently selected item.
+  current?.classList.add('selected');
+};
+
+export default CovalentTreeList;

package/src/typography/typography.scss

@@ -0,0 +1,45 @@
+@use '@material/typography/mdc-typography';
+@use '@covalent/tokens' as tokens;
+@use '../theme' as theme;
+
+$theme-tokens: map-get(tokens.$tokens, 'theme');
+$light-tokens: map-get($theme-tokens, 'light');
+$light-colors: map-get($light-tokens, 'colors');
+$dark-tokens: map-get($theme-tokens, 'dark');
+$dark-colors: map-get($dark-tokens, 'colors');
+// Merge deprecated tokens
+$light-colors: map-merge($light-colors, map-get(tokens.$tokens, light));
+$dark-colors: map-merge($dark-colors, map-get(tokens.$tokens, dark));
+
+// For convience re-define theme tokens scoped to a light/dark class
+:root {
+  @include theme.components-theme(
+    map-merge($light-colors, map-get(tokens.$tokens, light)),
+    map-get(tokens.$tokens, typography)
+  );
+}
+
+.dark {
+  @include theme.components-theme(
+    map-merge($dark-colors, map-get(tokens.$tokens, dark)),
+    map-get(tokens.$tokens, typography)
+  );
+}
+
+:host {
+  color: var(--cv-theme-on-surface-variant);
+  display: block;
+}
+
+// Header typography should be darker color
+:host([scale='headline1']),
+:host([scale='headline2']),
+:host([scale='headline3']),
+:host([scale='headline4']),
+:host([scale='headline5']),
+:host([scale='headline6']),
+:host([scale='subtitle1']),
+:host([scale='subtitle2']),
+:host([scale='button']) {
+  color: var(--cv-theme-on-surface);
+}

package/src/typography/typography.spec.ts

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

package/src/typography/typography.stories.js

@@ -0,0 +1,23 @@
+import './typography';
+
+export default {
+  title: 'Components/Text',
+};
+
+export const Basic = () => {
+  return `
+    <cv-typography scale="headline1">Headline 1</cv-typography>
+    <cv-typography scale="headline2">Headline 2</cv-typography>
+    <cv-typography scale="headline3">Headline 3</cv-typography>
+    <cv-typography scale="headline4">Headline 4</cv-typography>
+    <cv-typography scale="headline5">Headline 5</cv-typography>
+    <cv-typography scale="headline6">Headline 6</cv-typography>
+    <cv-typography scale="subtitle2">Subtitle 1</cv-typography>
+    <cv-typography scale="subtitle2">Subtitle 2</cv-typography>
+    <cv-typography scale="button">Button</cv-typography>
+    <cv-typography scale="caption">Caption</cv-typography>
+    <cv-typography scale="overline">Overline</cv-typography>
+    <cv-typography scale="body1">Body 1</cv-typography>
+    <cv-typography scale="body2">Body 2</cv-typography>
+  `;
+};

package/src/typography/typography.ts

@@ -0,0 +1,27 @@
+import { css, html, LitElement, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import styles from './typography.scss?inline';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-typography': CovalentTypography;
+  }
+}
+
+@customElement('cv-typography')
+export class CovalentTypography extends LitElement {
+  static override styles = [
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+
+  @property()
+  scale = 'body1';
+
+  override render() {
+    return html`<slot class="mdc-typography--${this.scale}"></slot>`;
+  }
+}
+
+export default CovalentTypography;

package/stories/Introduction.mdx

@@ -0,0 +1,47 @@
+import { Meta, DocsContainer } from '@storybook/blocks';
+
+<Meta
+  title="Introduction"
+  parameters={{
+    layout: 'fullscreen',
+    previewTabs: {
+      canvas: { hidden: true },
+    },
+  }}
+/>
+
+# Covalent Design System
+
+We're merging the Teradata Design System and Covalent into a single
+comprehensive product. In the short term, just use the nav to browse
+the raw components. We'll layer in documenation over time.
+
+Ping us in the **#design-system** channel on Slack for help.
+
+<div className="link-list">
+  <a className="link-item" href="./?path=/docs/components-app-shell--overview">
+    <span>
+      <strong>App shell</strong>
+      Our standard starter app, great for multi-level UIs that need to show a dashboard,
+      subsections with lists of items, and detail pages to view those items.
+    </span>
+  </a>
+
+{' '}
+<a
+  className="link-item"
+  href="https://github.com/Teradata/covalent/tree/main/docs/COMPONENTS_QUICKSTART.md"
+>
+  <span>
+    <strong>Getting started</strong>A quick how to guide on including these
+    components in a html page
+  </span>
+</a>
+
+  <a className="link-item" href="https://github.com/Teradata/covalent/tree/main/docs/COMPONENTS_THEMING.md">
+    <span>
+      <strong>Theming</strong>Learn how to apply light or dark themes for these
+      web components
+    </span>
+  </a>
+</div>