@momentum-design/components 0.0.2 → 0.0.3

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

@@ -1,99 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,76 +0,0 @@
-/* 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

@@ -1,29 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,32 +0,0 @@
-/* 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

@@ -1,18 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

@@ -1,22 +0,0 @@
-.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;
-}