@momentum-design/components 0.0.2 → 0.0.3

package/scripts/copyFonts.js

@@ -1,31 +0,0 @@
-
-const fse = require('fs-extra');
-const path = require('path');
-const chalk = require('chalk');
-
-const fontsFolder = path.dirname(require.resolve('@momentum-design/fonts/dist/inter/Inter.var.woff2'));
-const root = process.cwd();
-const playwrightPublicDist = path.join(root, 'config', 'playwright', 'public', 'dist', 'fonts');
-const storybookPublicDist = path.join(root, 'config', 'storybook', 'public', 'fonts');
-
-const copyFolderToDest = (srcDir, destDir) => {
-    try {
-        fse.copySync(srcDir, destDir, { overwrite: true })
-    } catch (err) {
-        console.error(err)
-    }
-}
-
-if (process.argv[2] === 'playwright') {
-    copyFolderToDest(fontsFolder, playwrightPublicDist);
-    console.log(chalk.gray('Fonts have been copied successfully to Playwright public!'));
-    return;
-}
-
-if (process.argv[2] === 'storybook') {
-    copyFolderToDest(fontsFolder, storybookPublicDist);
-    console.log(chalk.gray('Fonts have been copied successfully to Storybook public!'));
-    return;
-}
-
-console.log(chalk.red('No type has been provided. Use "playwright" or "storybook" as a argument!'));

package/scripts/copyIcons.js

@@ -1,31 +0,0 @@
-
-const fse = require('fs-extra');
-const path = require('path');
-const chalk = require('chalk');
-
-const iconsFolder = path.dirname(require.resolve('@momentum-design/icons/dist/manifest.json'));
-const root = process.cwd();
-const playwrightPublicDist = path.join(root, 'config', 'playwright', 'public', 'dist', 'icons');
-const storybookPublicDist = path.join(root, 'config', 'storybook', 'public', 'icons');
-
-const copyFolderToDest = (srcDir, destDir) => {
-    try {
-        fse.copySync(srcDir, destDir, { overwrite: true })
-    } catch (err) {
-        console.error(err)
-    }
-}
-
-if (process.argv[2] === 'playwright') {
-    copyFolderToDest(iconsFolder, playwrightPublicDist);
-    console.log(chalk.gray('Icons have been copied successfully to Playwright public!'));
-    return;
-}
-
-if (process.argv[2] === 'storybook') {
-    copyFolderToDest(iconsFolder, storybookPublicDist);
-    console.log(chalk.gray('Icons have been copied successfully to Storybook public!'));
-    return;
-}
-
-console.log(chalk.red('No type has been provided. Use "playwright" or "storybook" as a argument!'));

package/scripts/copyTokens.js

@@ -1,24 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const chalk = require('chalk');
-
-const complete = require.resolve('@momentum-design/tokens/dist/css/core/complete.css');
-const dark = require.resolve('@momentum-design/tokens/dist/css/theme/webex/dark-stable.css');
-const light = require.resolve('@momentum-design/tokens/dist/css/theme/webex/light-stable.css');
-
-const root = process.cwd();
-const playwrightPublicDist = path.join(root, 'config', 'playwright', 'public', 'dist');
-
-
-const copyToFolder = (src, destFolder) => {
-    const dest = path.join(destFolder, path.basename(src));
-    fs.copyFile(src, dest, (err) => {
-        if (err) throw err;
-    });
-}
-
-copyToFolder(complete, playwrightPublicDist);
-copyToFolder(dark, playwrightPublicDist);
-copyToFolder(light, playwrightPublicDist);
-
-console.log(chalk.gray('Tokens have been copied successfully!'));

package/src/components/avatar/avatar.component.ts

@@ -1,74 +0,0 @@
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import styles from './avatar.styles';
-import { Component } from '../../models';
-import { AvatarType } from './avatar.types';
-import { DEFAULTS, LENGTH_UNIT } from './avatar.constants';
-
-/**
- * @slot - This is a default/unnamed slot
- *
- * @summary This is MyElement
- *
- * @tag mdc-avatar
- * @tagname mdc-avatar
- */
-class Avatar extends Component {
-  @property({ type: String, reflect: true })
-  type?: AvatarType = DEFAULTS.TYPE;
-
-  @property({ type: String })
-  alt?: string;
-
-  @property({ type: String })
-  src?: string;
-
-  /**
-   * Scale of the avatar
-   */
-  @property({ type: Number })
-  scale?: number = DEFAULTS.SCALE;
-
-  /**
-   * Updates the size by setting the width and height
-   */
-  private updateSize() {
-    if (this.scale) {
-      const value = `${this.scale}${LENGTH_UNIT}`;
-      this.style.width = value;
-      this.style.height = value;
-    }
-  }
-
-  override updated(changedProperties: Map<string, any>) {
-    super.updated(changedProperties);
-
-    if (changedProperties.has('scale')) {
-      this.updateSize();
-    }
-  }
-
-  photoTemplate() {
-    return html`
-      <img
-        src="${ifDefined(this.src)}"
-        alt="${ifDefined(this.alt)}"
-      />
-    `;
-  }
-
-  public override render() {
-    let content;
-    if (this.type === 'photo') {
-      content = this.photoTemplate();
-    } else {
-      content = html``;
-    }
-    return html`${content}`;
-  }
-
-  public static override styles = styles;
-}
-
-export default Avatar;

package/src/components/avatar/avatar.constants.ts

@@ -1,12 +0,0 @@
-import utils from '../../utils/tag-name';
-
-const TAG_NAME = utils.constructTagName('avatar');
-
-const LENGTH_UNIT = 'rem';
-
-const DEFAULTS = {
-  TYPE: 'photo' as const,
-  SCALE: 1.5,
-};
-
-export { TAG_NAME, DEFAULTS, LENGTH_UNIT };

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

@@ -1,70 +0,0 @@
-import { test } from '../../../config/playwright/setup';
-import steps from '../../../config/playwright/setup/steps/accessibility';
-
-test.beforeEach(async ({ componentsPage }) => {
-  await componentsPage.mount({
-    html: `
-        <mdc-avatar alt="test"/>
-      `,
-  });
-});
-
-// TODO: fix e2e test
-test.fixme('mdc-avatar', async ({ componentsPage }) => {
-  const avatar = componentsPage.page.locator('mdc-avatar');
-
-  // initial check for the avatar be visible on the screen:
-  await avatar.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-avatar', { element: avatar });
-  //   });
-  // });
-
-  /**
-   * ATTRIBUTES
-   */
-  await test.step('attributes', async () => {
-    await test.step('attribute X should be present on component by default', async () => {
-      // TODO: add test here
-    });
-  });
-
-  /**
-   * INTERACTIONS
-   */
-  await test.step('interactions', async () => {
-    await test.step('mouse/pointer', async () => {
-      await test.step('component should fire callback x when clicking on it', async () => {
-        // TODO: add test here
-      });
-    });
-
-    await test.step('focus', async () => {
-      await test.step('component should be focusable with tab', async () => {
-        // TODO: add test here
-      });
-
-      // add additional tests here, like tabbing through several parts of the component
-    });
-
-    await test.step('keyboard', async () => {
-      await test.step('component should fire callback x when pressing y', async () => {
-        // TODO: add test here
-      });
-    });
-  });
-});

package/src/components/avatar/avatar.stories.ts

@@ -1,25 +0,0 @@
-import type { Meta, StoryObj, Args } from '@storybook/web-components';
-import '.';
-import { html } from 'lit';
-import { DEFAULTS } from './avatar.constants';
-
-const render = (args: Args) => html`
-  <mdc-avatar src="${args.src}" scale="${args.scale}" type="${args.type}"></mdc-avatar>
-`;
-
-const meta: Meta = {
-  component: 'mdc-avatar',
-  render,
-  argTypes: {},
-};
-
-export default meta;
-
-export const Primary: StoryObj = {
-  args: {
-    // eslint-disable-next-line max-len
-    src: 'https://images.unsplash.com/photo-1583195764036-6dc248ac07d9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2855&q=80',
-    scale: DEFAULTS.SCALE,
-    type: DEFAULTS.TYPE,
-  },
-};

package/src/components/avatar/avatar.styles.ts

@@ -1,20 +0,0 @@
-import { css } from 'lit';
-
-const styles = css`
-  :host {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 100vh;
-    position: relative;
-    width: fit-content;
-  }
-  img {
-    border-radius: 100vh;
-    height: inherit;
-    width: inherit;
-    object-fit: cover;
-  }
-`;
-
-export default styles;

package/src/components/avatar/avatar.types.ts

@@ -1 +0,0 @@
-export type AvatarType = 'photo' | 'text' | 'icon' | 'multiuser'

package/src/components/avatar/index.ts

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

package/src/components/badge/badge.component.ts

@@ -1,121 +0,0 @@
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { StyleInfo, styleMap } from 'lit/directives/style-map.js';
-import { Component } from '../../models';
-import { DEFAULTS, WARNING_ICON_NAME } from './badge.constants';
-import styles from './badge.styles';
-import type { BadgeType } from './badge.types';
-
-/**
- * @slot - This is a default/unnamed slot
- *
- * @summary This is MyElement
- *
- * @tag mdc-badge
- * @tagname mdc-badge
- */
-class Badge extends Component {
-  /**
-   * Type of the badge
-   * Can be `regular`, `icon`, `text` or `warning`
-   *
-   * Default: `regular`
-   */
-  @property({ type: String, reflect: true })
-  type?: BadgeType = DEFAULTS.TYPE;
-
-  /**
-   * Scale of the badge (works in combination with length unit)
-   *
-   * Default: `1`
-   */
-  @property({ type: Number })
-  scale?: number = DEFAULTS.SCALE;
-
-  /**
-   * Length unit attribute for scale
-   *
-   * Default: `rem`
-   */
-  @property({ type: String, attribute: 'length-unit' })
-  lengthUnit?: string = DEFAULTS.LENGTH_UNIT;
-
-  /**
-   * If `type` is set to `icon`, attribute `iconName` can
-   * be used to choose which icon should be shown
-   *
-   * If no `iconName` is provided, no icon will be rendered.
-   */
-  @property({ type: String, attribute: 'icon-name' })
-  iconName?: string;
-
-  /**
-   * If `type` is set to `text`, attribute `text` can
-   * be used to pass in any text to be displayed in the badge.
-   */
-  @property({ type: String })
-  text?: string;
-
-  private updateSize() {
-    // if (this.scale && this.lengthUnit) {
-    //   const value = `${this.scale}${this.lengthUnit}`;
-    //   this.style.height = value;
-    //   if (this.type !== 'text') {
-    //     this.style.width = value;
-    //   }
-    // }
-  }
-
-  override updated(changedProperties: Map<string, any>) {
-    super.updated(changedProperties);
-    if (changedProperties.has('scale') || changedProperties.has('lengthUnit')) {
-      this.updateSize();
-    }
-  }
-
-  iconTemplate() {
-    return html`<div class="mdc-badge-icon-container">
-      <mdc-icon name="${this.iconName}" scale="100" length-unit="%"></mdc-icon>
-    </div>`;
-  }
-
-  textTemplate() {
-    return html`${this.text}`;
-  }
-
-  warningTemplate() {
-    return html` <mdc-icon name="${WARNING_ICON_NAME}" class="mdc-badge-warning"></mdc-icon> `;
-  }
-
-  public override render() {
-    let content;
-    const size = `${this.scale}${this.lengthUnit}`;
-    let sizeStyles: StyleInfo = { width: size, height: size };
-
-    switch (this.type) {
-      case 'regular':
-        content = html``;
-        break;
-      case 'icon':
-        content = this.iconTemplate();
-        break;
-      case 'text':
-        content = this.textTemplate();
-        // make width flexible when text -> only set the height:
-        sizeStyles = { height: sizeStyles.height };
-        break;
-      case 'warning':
-        content = this.warningTemplate();
-        break;
-      default:
-        content = html``;
-        break;
-    }
-
-    return html`<div class="mdc-badge-container" style=${styleMap(sizeStyles)}>${content}</div>`;
-  }
-
-  public static override styles = styles;
-}
-
-export default Badge;

package/src/components/badge/badge.constants.ts

@@ -1,13 +0,0 @@
-import utils from '../../utils/tag-name';
-
-const TAG_NAME = utils.constructTagName('badge');
-
-const WARNING_ICON_NAME = 'warning-badge-filled';
-
-const DEFAULTS = {
-  TYPE: 'regular' as const,
-  SCALE: 1,
-  LENGTH_UNIT: 'rem',
-};
-
-export { TAG_NAME, DEFAULTS, WARNING_ICON_NAME };

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

@@ -1,68 +0,0 @@
-import { test } from '../../../config/playwright/setup';
-import steps from '../../../config/playwright/setup/steps/accessibility';
-
-test.beforeEach(async ({ componentsPage }) => {
-  await componentsPage.mount({
-    html: `
-        <mdc-badge />
-      `,
-  });
-});
-
-test('mdc-badge', async ({ componentsPage }) => {
-  const badge = componentsPage.page.locator('mdc-badge');
-
-  // initial check for the badge be visible on the screen:
-  await badge.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-badge', { element: badge });
-  //   });
-  // });
-
-  /**
-   * ATTRIBUTES
-   */
-  await test.step('attributes', async () => {
-    await test.step('attribute X should be present on component by default', async () => {
-      // TODO: add test here
-    });
-  });
-
-  /**
-   * INTERACTIONS
-   */
-  await test.step('interactions', async () => {
-    await test.step('mouse/pointer', async () => {
-      await test.step('component should fire callback x when clicking on it', async () => {
-        // TODO: add test here
-      });
-    });
-
-    await test.step('focus', async () => {
-      await test.step('component should be focusable with tab', async () => {
-        // TODO: add test here
-      });
-
-      // add additional tests here, like tabbing through several parts of the component
-    });
-
-    await test.step('keyboard', async () => {
-      await test.step('component should fire callback x when pressing y', async () => {
-        // TODO: add test here
-      });
-    });
-  });
-});

package/src/components/badge/badge.stories.ts

@@ -1,33 +0,0 @@
-import type { Meta, StoryObj, Args } from '@storybook/web-components';
-import '.';
-import { html } from 'lit';
-import { DEFAULTS } from './badge.constants';
-
-const render = (args: Args) => html`
-  <mdc-badge
-    type="${args.type}"
-    icon-name="${args.iconName}"
-    scale="${args.scale}"
-    length-unit="${args.lengthUnit}"
-    text="${args.text}"
-  ></mdc-badge>
-`;
-
-const meta: Meta = {
-  tags: ['autodocs'],
-  component: 'mdc-badge',
-  render,
-  argTypes: {},
-};
-
-export default meta;
-
-export const Primary: StoryObj = {
-  args: {
-    type: DEFAULTS.TYPE,
-    iconName: 'accessibility-regular',
-    scale: 1,
-    lengthUnit: 'rem',
-    text: '99+',
-  },
-};

package/src/components/badge/badge.styles.ts

@@ -1,26 +0,0 @@
-import { css } from 'lit';
-import { hostFitContentStyles } from '../../utils/styles';
-
-const styles = [
-  hostFitContentStyles,
-  css`
-    :host {
-      --mdc-badge-icon-background-color: var(--mds-color-theme-background-accent-normal);
-    }
-
-    .mdc-badge-container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: 9999px;
-      background-color: var(--mdc-badge-icon-background-color);
-    }
-
-    .mdc-badge-icon-container {
-      height: 80%;
-      width: 80%;
-    }
-  `,
-];
-
-export default styles;

package/src/components/badge/badge.types.ts

@@ -1 +0,0 @@
-export type BadgeType = 'regular' | 'text' | 'icon' | 'warning';

package/src/components/badge/index.ts

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