Getting started for developers

npm login --scope=@maersk-global --registry=https://npm.pkg.github.com

Username: YOUR_GITHUB_CORPORATE_USERNAME
Password: YOUR_GITHUB_PERSONAL_ACCESS_TOKEN #(!!remember this's not your GitHub password!!)
Email: YOUR_CORPORATE_EMAIL

//npm.pkg.github.com/:_authToken=TOKEN
@maersk-global:registry=https://npm.pkg.github.com

:root {
  --your-primary-background-color-token: var(--mds_brand_appearance_primary_default_background-color);
}
.your-class {
  background-color: var(--your-primary-background-color-token);
}

:root {
  --your-primary-background-color-token: var(--mds_brand_appearance_primary_default_background-color);
}

.your-class {
  background-color: var(--your-primary-background-color-token);
}

<mc-multi-select
  listsearch
  label="Pick an option"
  .labels=${{
    selectAll: 'Select everything',
    clearAll: 'Clear everything',
    summary: '{{selectedItems}} out of {{totalItems}} options selected',
    searchPlaceholder: 'Find an option...',
    noResultsFound: 'No options found',
  }}
>
  <mc-option value="1" label="Option 1"></mc-option>
  <mc-option value="2" label="Option 2"></mc-option>
</mc-multi-select>

<mc-multi-select
  .labels=${{
    selectAll: 'Choose all options'
    // Other labels will use default translations based on document.lang
  }}
>
  <!-- options -->
</mc-multi-select>

import type { IMcMultiSelectLabels } from '@maersk-global/mds-components-core-multi-select/types';

const customLabels: Partial<IMcMultiSelectLabels> = {
  selectAll: 'Select everything',
  clearAll: 'Clear everything',
  summary: '{{selectedItems}} out of {{totalItems}} options selected',
  searchPlaceholder: 'Type to search...',
  noResultsFound: 'No matches found',
};

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => /^mc-/.test(tag),
        },
      },
    }),
  ],
});

app.config.isCustomElement = (tag) => tag.startsWith('mc-');

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => {
        options.compilerOptions = {
          ...(options.compilerOptions || {}),
          isCustomElement: (tag) => /^mc-/.test(tag),
        };
        return options;
      });
  },
};

npm i copyfiles -D

"scripts": {
  "dev": "npm run copy:icons && nuxi dev",
  "build": "npm run copy:icons && nuxi build",
  "copy:icons": "copyfiles --up 1 node_modules/@maersk-global/icons/js/**/* public"
}

// mds-config plugin
import { MdsConfig } from '@maersk-global/mds-config';
MdsConfig.iconsDynamicImportPath = '/';

export default () => {};

// nuxt.config.js
import { defineNuxtConfig } from 'nuxt/config';

export default defineNuxtConfig({
  css: [
    '@maersk-global/fonts/<YOUR_BRAND>/fonts.css',
    '@maersk-global/mds-foundations/css/foundations.css',
    '@maersk-global/mds-design-tokens/<YOUR_BRAND>/light/css/design-tokens-px.css',
  ],
  plugins: [{ src: '~/plugins/mds-config.ts' }], // => the plugin must be imported here
});

<template>
  <mc-button icon="star" @click="goToStep(1)" type="button">Hello!!</mc-button>
</template>

<script lang="ts" setup>
  import '@maersk-global/mds-components-core-button';

  const goToStep = (currentindex: number) => {
    stepIndicatorCurrentIndex.value = currentindex;
  };
</script>

'use client';
import { useState, useEffect } from 'react';
import { McButton } from '@maersk-global/mds-react-wrapper';

export const Button = () => {
  const [isClient, setIsClient] = useState(false);
  useEffect(() => {
    setIsClient(true);
  }, []);
  return isClient ? (
    <McButton
      icon="star"
      label="Hello!!"
      click={(): void => {
        console.log('Button got clicked!!');
      }}
    ></McButton>
  ) : null;
};

@import '~@maersk-global/mds-foundations/css/foundations';

import { IconPosition } from '@maersk-global/mds-components-core/mc-button/types';
const [buttonIconPosition, setButtonIconPosition] = React.useState < IconPosition > 'left';
<McButton iconposition={buttonIconPosition}></McButton>;

{
  "html.customData": ["node_modules/@maersk-global/mds-components-core/web-components.html-data.json"]
}

/* src/declarations.d.ts */

import type { McButton, McInput } from '@maersk-global/mds-components-core';
import type { LitElement } from 'lit';
import type { DefineComponent } from 'vue';
// and so on...

// Denotes a class type.
type Constructable = abstract new (...args: unknown[]) => unknown;

// A string union of all static and instance/prototype properties keys.
type LitElementKey = keyof typeof LitElement | keyof InstanceType<typeof LitElement>;

// Generic type for defining a Vue component.
type DefineMaerskComponent<T extends Constructable> = DefineComponent<Partial<Omit<InstanceType<T>, LitElementKey>>>;

declare module 'vue' {
  export interface GlobalComponents {
    McInput: DefineMaerskComponent<typeof McInput>;
    McButton: DefineMaerskComponent<typeof McButton>;
    // and so on...
  }
}

/* src/declarations.d.ts */

import type { LitElement } from 'lit';
import type { DefineComponent } from 'vue';

// Denotes a class type.
type Constructable = abstract new (...args: unknown[]) => unknown;

// A string union of all static and instance/prototype properties keys.
type LitElementKey = keyof typeof LitElement | keyof InstanceType<typeof LitElement>;

// Generic type for defining a Vue component.
type DefineMaerskComponent<T extends Constructable> = DefineComponent<Partial<Omit<InstanceType<T>, LitElementKey>>>;

// Import of the "@maersk-global/mds-components-core" module as an object type.
type MaerskComponentsModule = typeof import('@maersk-global/mds-components-core');

// Mapped type over "@maersk-global/mds-components-core", selecting any keys staring with `Mc`.
type MaerskComponents = {
  [K in keyof MaerskComponentsModule]: K extends `Mc${infer _Rest}`
    ? DefineMaerskComponent<MaerskComponentsModule[K]>
    : never;
};

declare module 'vue' {
  // Extend the `MaerskComponents` type to include all component definitions globally in Vue.
  export interface GlobalComponents extends MaerskComponents {
    // More custom global components can be added here...
  }
}

npm i -D @testing-library/react @testing-library/jest-dom @babel/preset-env babel-jest ts-jest jest-environment-jsdom

module.exports = {
  presets: ['@babel/preset-env'],
};

module.exports = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testEnvironment: 'jest-environment-jsdom',
  transform: {
    '^.+\\.(ts|tsx)?$': 'ts-jest',
    '^.+\\.(js|jsx)$': 'babel-jest',
  },
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/__mocks__/fileMock.js',
    '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
  },
  transformIgnorePatterns: [
    'node_modules/(?!(@maersk-global)|(@material)|(lit)|(@lit)|(@lit-labs)|(lit-element)|(lit-html)|(.*\\.mjs$))',
  ],
};

import '@testing-library/jest-dom';

const intersectionObserverMock = () => ({
  observe: () => null,
  unobserve: () => null,
  disconnect: () => null,
});
window.IntersectionObserver = jest.fn().mockImplementation(intersectionObserverMock);

HTMLDialogElement.prototype.show = jest.fn(function () {
  this.open = true;
});
HTMLDialogElement.prototype.showModal = jest.fn(function () {
  this.open = true;
});
HTMLDialogElement.prototype.close = jest.fn(function () {
  this.open = false;
});
// See https://github.com/jsdom/jsdom/issues/3236 - JSDOM doesn't support container queries or the
// most modern CSS. This suppresses that error
const originalConsoleError = console.error;
console.error = (message, ...optionalParams) => {
  if (message.toString().includes('Could not parse CSS stylesheet')) {
    return;
  }
  originalConsoleError(message, ...optionalParams);
};

// fileMock.js
module.exports = 'test-file-stub';

// styleMock.js
module.exports = {};

{
  "compilerOptions": {
    "types": ["jest", "@testing-library/jest-dom"]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "__tests__/**/*.tsx"]
}

import { render } from '@testing-library/react';
import App from '../src/app';

describe('App', () => {
  it('should render successfully', () => {
    const { baseElement } = render(<App />);
    expect(baseElement).toBeTruthy();
  });
});

// src/App.tsx
import { McButton } from '@maersk-global/mds-react-wrapper/components-core/mc-button';
import { useState } from 'react';

export const App = () => {
  const [label, setLabel] = useState('Test');
  return <McButton data-testid="mcButton" click={() => setLabel('Another Test')} label={label}></McButton>;
};

// __tests__/app.spec.tsx
import { fireEvent, render, screen } from '@testing-library/react';
import { IMcButton } from '@maersk-global/mds-components-core-button/types';
import { App } from '../src/app';

describe('App', () => {
  it('should be able to click on mc-button', () => {
    render(<App />);
    const button = screen.getByTestId('mcButton') as IMcButton & HTMLElement;
    // OR:
    // const button = container.querySelector('mc-button') as IMcButton & HTMLElement;
    fireEvent.click(button);
    expect(button.label).toBe('Another Test');
  });
});

// src/App.tsx
import { McButton } from '@maersk-global/mds-react-wrapper/components-core/mc-button';
import { useState } from 'react';

export const App = () => {
  const [label, setLabel] = useState('Test');
  return <McButton data-testid="mcButton" click={() => setLabel('Another Test')} label={label}></McButton>;
};

// __tests__/app.spec.tsx
import { render } from '@testing-library/react';
import { screen, findByShadowLabelText } from 'shadow-dom-testing-library';
import { IMcButton } from '@maersk-global/mds-components-core-button/types';
import { App } from '../src/app';

describe('App', () => {
  it('can test elements in shadowDOM in mc-button using findByShadowText', async () => {
    render(<Button />);
    const button = screen.findByShadowText('Test') as unknown as IMcButton & HTMLElement;
    expect(await button).toBeInTheDocument();
  });

  it('can test elements in shadowDOM in mc-button using findByShadowLabelText', async () => {
    const { container } = render(<Button />);
    const mcButton = container.querySelector('mc-button') as unknown as IMcButton & HTMLElement;
    const button = await findByShadowLabelText(mcButton, 'Test');
    expect(await button).toBeInTheDocument();
  });
});

includeShadowDom: true,

const testLabel = 'Hello World';

//set the label in Cypress if needed
cy.get('mc-button').invoke('attr', 'label', testLabel);

//query for the label element's text, trim it and compare to the arraged one
cy.get('mc-button').find('[data-cy="label"]')(($label) => {
  expect($label.text().trim()).equal(testLabel);
});

const testText = 'Hello World';

// perform a native real click on the component
cy.get('mc-input').realClick();

// fires native system keydown events and fills the input
cy.realType(testText);

// check that the input's value is the arranged text
cy.get('mc-input').should('have.value', testText);