@momentum-design/components 0.0.1

package/src/components/text/fonts.styles.ts

@@ -0,0 +1,99 @@
+import { css } from 'lit';
+
+// todo: change definition to tokens once available
+
+export const fontsStyles = css`
+  :host([type="heading-1"]) {
+    font-size: 7.5rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 125%; /* 9.375rem */
+    text-transform: capitalize;
+  }
+
+  :host([type="heading-2"]) {
+    font-size: 6rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 125%; /* 7.5rem */
+    text-transform: capitalize;
+  }
+
+  :host([type="heading-3"]) {
+    font-size: 3rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 125%; /* 3.75rem */
+  }
+
+  :host([type="heading-4"]) {
+    font-size: 2.5rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 125%; /* 3.125rem */
+  }
+
+  :host([type="heading-5"]) {
+    font-size: 2rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 125%; /* 2.5rem */
+    letter-spacing: 0.5rem;
+    text-transform: uppercase;
+  }
+
+  :host([type="heading-6"]) {
+    font-size: 1.75rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 3rem; /* 171.429% */
+  }
+
+  :host([type="heading-7"]) {
+    font-size: 1.5rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 140%; /* 2.1rem */
+  }
+
+  :host([type="body-large"]) {
+    font-size: 2rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 150%; /* 3rem */
+    margin-block-end: 1.875em; /* paragraph spacing, 30px */
+  }
+
+  :host([type="body-regular"]) {
+    font-size: 1.5rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 150%; /* 2.25rem */
+    margin-block-end: 1.5em; /* paragraph spacing, 24px */
+  }
+
+  :host([type="body-small"]) {
+    font-size: 1.25rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 150%; /* 1.875rem */
+    margin-block-end: 0.125rem; /* paragraph spacing, 2px */
+  }
+
+  :host([type="image-title"]) {
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 150%; /* 1.5rem */
+    letter-spacing: 0.04rem;
+    text-transform: uppercase;
+  }
+
+  :host([type="label"]) {
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 150%; /* 1.5rem */
+    letter-spacing: 0.02rem;
+  }
+`;

package/src/components/text/index.ts

@@ -0,0 +1,12 @@
+import Text from './text.component';
+import { TAG_NAME } from './text.constants';
+
+Text.register(TAG_NAME);
+
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-text']: Text
+    }
+}
+
+export default Text;

package/src/components/text/text.component.ts

@@ -0,0 +1,51 @@
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './text.styles';
+import { Component } from '../../models';
+import type { FontType } from './text.types';
+import { getRole, getAriaLevel } from './text.utils';
+
+/**
+ * Text component, which helps creating a text element aligning with
+ * styling.
+ *
+ * The `type` attribute allows changing the type of text, like `heading-1`, etc.
+ *
+ * For accessibility the `role` and `aria-level` on the component are going to be set
+ * automatically based on the type e.g. heading-1 will lead to `role="heading"` and `aria-level=1`.
+ *
+ * @tag mdc-text
+ * @tagname mdc-text
+ */
+class Text extends Component {
+  /**
+   * Text Type - defines how the text should be rendered
+   *
+   * Possible values: `heading-1` | `heading-2` | `heading-3` | `heading-4`
+  | `heading-5` | `heading-6` | `heading-7` | `body-large` | `body-regular`
+  | `body-small` | `image-title` | `label`;
+   */
+  @property({ attribute: 'type', reflect: true, type: String })
+  public type?: FontType;
+
+  protected handleTypeChanged(): void {
+    this.role = getRole(this.type);
+    this.ariaLevel = getAriaLevel(this.type);
+  }
+
+  protected override updated(changedProperties: Map<string, any>): void {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('type')) {
+      this.handleTypeChanged();
+    }
+  }
+
+  public override render() {
+    return html`<slot></slot>`;
+  }
+
+  public static override styles = styles;
+}
+
+export default Text;

package/src/components/text/text.constants.ts

@@ -0,0 +1,27 @@
+import utils from '../../utils/tag-name';
+import type { FontType } from './text.types';
+
+const TAG_NAME = utils.constructTagName('text');
+
+const DEFAULTS = {
+  TYPE: 'body-regular' as const,
+};
+
+const VALUES: {TYPE: Array<FontType>} = {
+  TYPE: [
+    'heading-1',
+    'heading-2',
+    'heading-3',
+    'heading-4',
+    'heading-5',
+    'heading-6',
+    'heading-7',
+    'body-large',
+    'body-regular',
+    'body-small',
+    'image-title',
+    'label',
+  ],
+};
+
+export { TAG_NAME, DEFAULTS, VALUES };

package/src/components/text/text.e2e-test.ts

@@ -0,0 +1,76 @@
+/* eslint-disable no-restricted-syntax */
+import { expect } from '@playwright/test';
+import { ComponentsPage, test } from '../../../config/playwright/setup';
+import steps from '../../../config/playwright/setup/steps/accessibility';
+import { VALUES } from './text.constants';
+import { FontType } from './text.types';
+import { getAriaLevel, isHeading } from './text.utils';
+
+type SetupOptions = {
+  componentsPage: ComponentsPage;
+  type: FontType;
+  children: any;
+};
+
+const setup = async (args: SetupOptions) => {
+  const { componentsPage, ...restArgs } = args;
+  await componentsPage.mount({
+    html: `
+    <mdc-text type="${restArgs.type}">${restArgs.children}</mdc-text>
+      `,
+    clearDocument: true,
+  });
+  const text = componentsPage.page.locator('mdc-text');
+  await text.waitFor();
+  return text;
+};
+
+const typesToTest: Array<FontType> = VALUES.TYPE;
+
+test.describe('mdc-text', () => {
+  test.use({
+    viewport: {
+      width: 3000,
+      height: 500,
+    },
+  });
+  for (const textType of typesToTest) {
+    test(textType, async ({ componentsPage }) => {
+      const textContent = 'abcdefghijklmnopqrstuvwxyz1234567890';
+      const text = await setup({ componentsPage, type: textType, children: textContent });
+
+      /**
+       * ACCESSIBILITY
+       */
+      await test.step('accessibility', async () => {
+        await steps.automaticA11yCheckStep(componentsPage);
+      });
+
+      /**
+       * VISUAL REGRESSION
+       */
+      // TODO: fix visual regression test on CI
+      // await test.step('visual-regression', async () => {
+      //   await test.step('matches screenshot of element', async () => {
+      //     await componentsPage.visualRegression.takeScreenshot(`mdc-text-${textType}`, { element: text });
+      //   });
+      // });
+
+      /**
+       * ATTRIBUTES
+       */
+      await test.step('attributes', async () => {
+        if (isHeading(textType)) {
+          await test.step('attribute role=heading should be present on component if type is heading', async () => {
+            expect(await text.getAttribute('role')).toBe('heading');
+          });
+
+          await test.step('attribute aria-level should be present on component if type is heading', async () => {
+            const expectedLevel = getAriaLevel(textType);
+            expect(await text.getAttribute('aria-level')).toBe(expectedLevel);
+          });
+        }
+      });
+    });
+  }
+});

package/src/components/text/text.stories.ts

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj, Args } from '@storybook/web-components';
+import '.';
+import { html } from 'lit';
+import { VALUES } from './text.constants';
+
+const render = (args: Args) => html`
+<mdc-text type="${args.type}">${args.children}</mdc-text>
+`;
+
+const meta: Meta = {
+  tags: ['autodocs'],
+  component: 'mdc-text',
+  render,
+  argTypes: {
+    type: {
+      control: 'radio',
+      options: VALUES.TYPE,
+    },
+  },
+};
+
+export default meta;
+
+export const Primary: StoryObj = {
+  args: {
+    type: 'heading-1',
+    children: 'This is a test text',
+  },
+};

package/src/components/text/text.styles.ts

@@ -0,0 +1,17 @@
+import { css } from 'lit';
+import { fontsStyles } from './fonts.styles';
+
+const styles = [
+  css`
+    :host {
+      --mdc-text-font-family: var(--mdc-themeprovider-font-family);
+
+      display: block;
+      font-family: var(--mdc-text-font-family);
+    }
+  `,
+  // type specific font styles:
+  fontsStyles,
+];
+
+export default styles;

package/src/components/text/text.types.ts

@@ -0,0 +1,13 @@
+export type FontType =
+  | 'heading-1'
+  | 'heading-2'
+  | 'heading-3'
+  | 'heading-4'
+  | 'heading-5'
+  | 'heading-6'
+  | 'heading-7'
+  | 'body-large'
+  | 'body-regular'
+  | 'body-small'
+  | 'image-title'
+  | 'label';

package/src/components/text/text.utils.ts

@@ -0,0 +1,51 @@
+import { FontType } from './text.types';
+
+/**
+ * Split the passed in type and return the parts
+ */
+const getTypeParts = (type: FontType) => {
+  const parts = type.split('-');
+  return { firstPart: parts[0], secondPart: parts[1] };
+};
+
+/**
+ * Check if passed in type is a heading
+ * @param type - type to check
+ * @returns boolean, true if it is a heading
+ */
+const isHeading = (type: FontType) => {
+  const { firstPart, secondPart } = getTypeParts(type);
+  return firstPart === 'heading' && +secondPart > 0 && +secondPart < 7;
+};
+
+/**
+ * Get corresponding aria-role to type
+ * @param type - type to find corresponding role for
+ * @returns role
+ */
+const getRole = (type?: FontType) => {
+  if (type) {
+    if (isHeading(type)) {
+      return 'heading';
+    }
+    return 'paragraph';
+  }
+  return null;
+};
+
+/**
+ * Get corresponding aria-level to type
+ * @param type type to find corresponding level for
+ * @returns aria-level (has to be a number)
+ */
+const getAriaLevel = (type?: FontType) => {
+  if (type) {
+    if (isHeading(type)) {
+      const { secondPart } = getTypeParts(type);
+      return secondPart;
+    }
+  }
+  return null;
+};
+
+export { isHeading, getAriaLevel, getRole };

package/src/components/themeprovider/index.ts

@@ -0,0 +1,12 @@
+import ThemeProvider from './themeprovider.component';
+import { TAG_NAME } from './themeprovider.constants';
+
+ThemeProvider.register(TAG_NAME);
+
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-themeprovider']: ThemeProvider
+    }
+}
+
+export default ThemeProvider;

package/src/components/themeprovider/themeprovider.component.ts

@@ -0,0 +1,91 @@
+import { property } from 'lit/decorators.js';
+import { DEFAULTS, THEMES } from './themeprovider.constants';
+import { Provider } from '../../models';
+import ThemeProviderContext from './themeprovider.context';
+import styles from './themeprovider.styles';
+import type { Theme } from './themeprovider.types';
+
+/**
+ * ThemeProvider component, which sets the theme css variables
+ * for the child dom nodes and allows to be consumed from sub components
+ * (see providerUtils.consume for how to consume)
+ *
+ * ThemeProvider also includes the different font faces available
+ * for Text components.
+ *
+ * @tag mdc-themeprovider
+ * @tagname mdc-themeprovider
+ */
+class ThemeProvider extends Provider<ThemeProviderContext> {
+  constructor() {
+    // initialise the context by running the Provider constructor:
+    super({
+      context: ThemeProviderContext.context,
+      initialValue: new ThemeProviderContext(DEFAULTS.THEME),
+    });
+  }
+
+  public static get Context() {
+    return ThemeProviderContext.context;
+  }
+
+  /**
+   * Available themes to switch to
+   *
+   * Has to be a space separated string, like className
+   * e.g.: `mds-theme-stable-darkWebex mds-theme-stable-lightWebex`
+   */
+  @property({ type: String })
+  themes: string = THEMES.join(' ');
+
+  /**
+   * Current theme attribute
+   *
+   * Has to be fully qualified, such that
+   * the theme name matches the className of the respective
+   * theme stylesheet
+   */
+  @property({ type: String })
+  theme: Theme = DEFAULTS.THEME;
+
+  protected override updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('theme')) {
+      this.updateActiveThemeClass();
+    }
+  }
+
+  /**
+   * Update all observing components of this
+   * provider to update the theme
+   */
+  protected updateContext(): void {
+    let shouldUpdateConsumers = false;
+
+    if (this.context.value.theme !== this.theme) {
+      this.context.value.theme = this.theme;
+
+      shouldUpdateConsumers = true;
+    }
+
+    if (shouldUpdateConsumers) {
+      this.context.updateObservers();
+    }
+  }
+
+  /**
+   * Function to update the active theme classname to update the theme tokens
+   * as CSS variables on the web component.
+   */
+  private updateActiveThemeClass() {
+    // remove all existing theme classes from the classList:
+    this.classList.remove(...this.themes.split(' '));
+    // add current theme class to classList:
+    this.classList.add(this.theme);
+  }
+
+  public static override styles = styles;
+}
+
+export default ThemeProvider;

package/src/components/themeprovider/themeprovider.constants.ts

@@ -0,0 +1,32 @@
+/* eslint-disable implicit-arrow-linebreak */
+import utils from '../../utils/tag-name';
+import type { Theme } from './themeprovider.types';
+import themeProviderUtils from './themeprovider.utils';
+
+const TAG_NAME = utils.constructTagName('themeprovider');
+
+// Some themes are disabled until tokens are available for those themes
+const THEME_NAMES = {
+  // DARK_BRONZE: 'darkBronze' as const,
+  // DARK_INDIGO: 'darkIndigo' as const,
+  // DARK_JADE: 'darkJade' as const,
+  // DARK_LAVENDER: 'darkLavender' as const,
+  // DARK_ROSE: 'darkRose' as const,
+  DARK_WEBEX: 'darkWebex' as const,
+  // LIGHT_BRONZE: 'lightBronze' as const,
+  // LIGHT_INDIGO: 'lightIndigo' as const,
+  // LIGHT_JADE: 'lightJade' as const,
+  // LIGHT_LAVENDER: 'lightLavender' as const,
+  // LIGHT_ROSE: 'lightRose' as const,
+  LIGHT_WEBEX: 'lightWebex' as const,
+};
+
+const THEMES = Object.values(THEME_NAMES).map(
+  (themeName) => themeProviderUtils.getFullQualifiedTheme(themeName),
+);
+
+const DEFAULTS = {
+  THEME: themeProviderUtils.getFullQualifiedTheme(THEME_NAMES.DARK_WEBEX) as Theme<typeof THEME_NAMES.DARK_WEBEX>,
+};
+
+export { DEFAULTS, THEME_NAMES, THEMES, TAG_NAME };

package/src/components/themeprovider/themeprovider.context.ts

@@ -0,0 +1,18 @@
+import { createContext } from '@lit-labs/context';
+
+import { TAG_NAME } from './themeprovider.constants';
+import type { Theme } from './themeprovider.types';
+
+class ThemeProviderContext {
+  public theme?: Theme;
+
+  // create typed lit context as part of the ThemeProviderContext
+  public static context = createContext<ThemeProviderContext>(TAG_NAME);
+
+  // constructor to allow setting the defaultTheme
+  constructor(defaultTheme?: Theme) {
+    this.theme = defaultTheme;
+  }
+}
+
+export default ThemeProviderContext;

package/src/components/themeprovider/themeprovider.e2e-test.ts

@@ -0,0 +1,89 @@
+import { expect } from '@playwright/test';
+import { ComponentsPage, test } from '../../../config/playwright/setup';
+import steps from '../../../config/playwright/setup/steps/accessibility';
+import { THEME_NAMES } from './themeprovider.constants';
+import type { ThemeName } from './themeprovider.types';
+import utils from './themeprovider.utils';
+
+test.beforeEach(async ({ componentsPage, theme }) => {
+  const themeClass = utils.getFullQualifiedTheme(theme);
+  await componentsPage.mount({
+    html: `
+    <mdc-themeprovider class="themeWrapper" id="local" theme="${themeClass}">
+      <p>Current theme: ${themeClass}</p>
+      <div>
+        <div class="colorBox" style="background: var(--mds-color-theme-text-accent-normal);"></div>
+        <div class="colorBox" style="background: var(--mds-color-theme-text-warning-normal);"></div>
+        <div class="colorBox" style="background: var(--mds-color-theme-background-alert-success-normal);"></div>
+      </div>
+    </mdc-themeprovider>
+      `,
+  });
+});
+
+const testToRun = async (componentsPage: ComponentsPage, theme: ThemeName) => {
+  const themeprovider = componentsPage.page.locator('mdc-themeprovider#local');
+
+  // get fully qualified theme
+  const themeClass = utils.getFullQualifiedTheme(theme);
+  const oppositeThemeClass = themeClass.includes('darkWebex')
+    ? utils.getFullQualifiedTheme('lightWebex')
+    : utils.getFullQualifiedTheme('darkWebex');
+
+  // initial check for the themeprovider be visible on the screen:
+  await themeprovider.waitFor();
+
+  /**
+   * ACCESSIBILITY
+   */
+  await test.step('accessibility', async () => {
+    await steps.automaticA11yCheckStep(componentsPage);
+  });
+
+  /**
+   * VISUAL REGRESSION
+   */
+  // TODO: fix visual regression test on CI
+  // await test.step('visual-regression', async () => {
+  //   await test.step('matches screenshot of element', async () => {
+  //     await componentsPage.visualRegression.takeScreenshot(`mdc-themeprovider-${theme}`, {
+  //       element: themeprovider,
+  //     });
+  //   });
+  // });
+
+  /**
+   * ATTRIBUTES
+   */
+  await test.step('attributes', async () => {
+    await test.step('attribute theme should be present on component by default', async () => {
+      expect(await themeprovider.getAttribute('theme')).toBe(themeClass);
+    });
+
+    await test.step('corresponding theme class should be present on component by default', async () => {
+      expect(await themeprovider.getAttribute('class')).toContain(themeClass);
+      expect(await themeprovider.getAttribute('class')).not.toContain(oppositeThemeClass);
+    });
+  });
+};
+
+// test.describe('mdc-themeprovider', () => {
+//   test.use({
+//     theme: THEME_NAMES.DARK_WEBEX,
+//   });
+
+//   test('dark', async ({ componentsPage, theme }) => {
+//     await testToRun(componentsPage, theme);
+//   });
+// });
+
+test.describe('mdc-themeprovider', () => {
+  test.use({
+    theme: THEME_NAMES.LIGHT_WEBEX,
+  });
+
+  // TODO: fix e2e test
+  test.fixme('light', async ({ componentsPage, theme }) => {
+    await testToRun(componentsPage, theme);
+  });
+});

package/src/components/themeprovider/themeprovider.stories.styles.css

@@ -0,0 +1,22 @@
+.themeWrapper {
+  display: flex;
+  flex-direction: column;
+  width: calc(30%);
+  background: var(--mds-color-theme-background-solid-primary-normal);
+  padding: 10px;
+  border: 1px solid var(--mds-color-theme-text-primary-normal)
+}
+
+.themeWrapper+.themeWrapper {
+  margin-top: 10px;
+}
+
+.colorBox {
+  width: 100%;
+  height: 10px;
+  border-radius: 5px;
+}
+
+.colorBox+.colorBox {
+  margin-top: 10px;
+}