@momentum-design/components 0.0.1

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@momentum-design/components",
+  "packageManager": "yarn@3.2.4",
+  "engines": {
+    "node": ">=20.0.0",
+    "npm": ">=8.0.0",
+    "yarn": ">=3.0.0"
+  },
+  "main": "./dist/module/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": "./dist/module/",
+    "./module": "./dist/module",
+    "./browser": "./dist/browser"
+  },
+  "scripts": {
+    "analyze": "yarn analyze:prebuild && yarn analyze:postbuild",
+    "analyze:postbuild": "echo \"script 'analyze:postbuild' has not been implemented\"",
+    "analyze:prebuild": "echo \"script 'analyze:prebuild' has not been implemented\"",
+    "dev": "concurrently --names 'manifest,storybook' -c 'blue.bold,magenta.bold' 'yarn:dev:generate-manifest' 'yarn:dev:storybook'",
+    "dev:generate-manifest": "custom-elements-manifest analyze --config config/custom-elements-manifest.config.js",
+    "dev:storybook:setup": "concurrently --names 'copy:icons,copy:fonts' -c 'cyan.bold,blue.bold' 'yarn copy:icons storybook' 'yarn copy:fonts storybook'",
+    "dev:storybook": "yarn dev:storybook:setup && storybook dev -p 6006 -c config/storybook",
+    "build:browser:e2e": "node config/esbuild/esbuild-e2e.config.js",
+    "build:browser": "node config/esbuild/esbuild.config.js",
+    "build:module": "tsc --project \"./tsconfig.module.json\"",
+    "build": "yarn build:module && yarn build:browser",
+    "clean": "yarn clean:dist",
+    "clean:dist": "rimraf ./dist",
+    "copy:tokens": "node scripts/copyTokens.js",
+    "copy:icons": "node scripts/copyIcons.js",
+    "copy:fonts": "node scripts/copyFonts.js",
+    "docs": "echo \"script 'docs' has not been implemented\"",
+    "publish": "yarn publish:npmjs",
+    "publish:npmjs": "yarn npm publish --access=public",
+    "test": "yarn test:prebuild && yarn test:postbuild",
+    "test:postbuild": "yarn test:e2e",
+    "test:prebuild": "echo \"script 'test:prebuild' has not been implemented\"",
+    "test:e2e:report": "yarn playwright show-report",
+    "test:e2e:setup": "concurrently --names 'copy:tokens,copy:icons,copy:fonts' -c 'magenta.bold,cyan.bold,blue.bold' 'yarn copy:tokens' 'yarn copy:icons playwright' 'yarn copy:fonts playwright' && yarn build:browser:e2e",
+    "test:e2e": "playwright test --config './config/playwright/playwright.config.ts'",
+    "test:e2e:ui": "yarn test:e2e --ui",
+    "build-storybook": "storybook build -c config/storybook",
+    "clean:plop": "rimraf ./config/plop/dist",
+    "build:plop": "yarn clean:plop && node ./config/plop/esbuild.config.plop.js",
+    "generate:component": "yarn build:plop && plop --plopfile config/plop/dist/plopfile.mjs"
+  },
+  "dependencies": {
+    "@lit-labs/context": "^0.5.1",
+    "@momentum-design/icons": "^0.0.0",
+    "@momentum-design/tokens": "^0.0.0",
+    "lit": "^3.1.4"
+  },
+  "devDependencies": {
+    "@axe-core/playwright": "^4.9.1",
+    "@custom-elements-manifest/analyzer": "^0.10.3",
+    "@playwright/test": "^1.45.3",
+    "@storybook/addon-a11y": "^8.2.5",
+    "@storybook/addon-controls": "^8.2.5",
+    "@storybook/addon-essentials": "^8.2.5",
+    "@storybook/addon-links": "^8.2.5",
+    "@storybook/blocks": "^8.2.5",
+    "@storybook/manager-api": "^8.2.5",
+    "@storybook/theming": "^8.2.5",
+    "@storybook/web-components": "^8.2.5",
+    "@storybook/web-components-vite": "^8.2.5",
+    "chalk": "^4.1.2",
+    "concurrently": "^8.2.2",
+    "esbuild": "^0.23.0",
+    "eslint-plugin-lit": "^1.14.0",
+    "fs-extra": "^11.2.0",
+    "plop": "^4.0.1",
+    "rimraf": "^6.0.1",
+    "storybook": "^8.2.5",
+    "typescript": "^4.8.4"
+  },
+  "version": "0.0.1"
+}

package/scripts/copyFonts.js

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

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

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

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

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

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

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

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

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

package/src/components/avatar/index.ts

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

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

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

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

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

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

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

package/src/components/badge/index.ts

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