@momentum-ui/web-components 2.5.4 → 2.5.7

package/jest/imgTransform.js

@@ -0,0 +1,9 @@
+/* eslint-disable */
+module.exports = {
+  process() {
+    return "module.exports = 'fake-file-url';";
+  },
+  getCacheKey() {
+    return "imgTransform";
+  }
+};

package/jest.config.js

@@ -0,0 +1,35 @@
+/* eslint-disable */
+module.exports = {
+  collectCoverage: true,
+  coverageProvider: "v8",
+  transform: {
+    "^.+\\.ts$": "ts-jest",
+    "^.+\\.js$": "babel-jest",
+    "\\.(png|svg|jpg|jpeg)$": "<rootDir>/jest/imgTransform.js",
+    "\\.(scss)$": "<rootDir>/jest/cssTransform.js"
+  },
+  testRegex: "^.+\\.test\\.ts$",
+  testPathIgnorePatterns: ["/node_modules/", "/build/", "/dist/", "/publish/", "/coverage/", "/stats", "/src/components/sass-stats/"],
+  transformIgnorePatterns: ["/node_modules/?!(@open-wc).+js$"],
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
+  moduleNameMapper: {
+    "^@/(.*)$": "<rootDir>/src/$1",
+    "^@css/(.*)$": "<rootDir>/src/assets/styles/$1",
+    "^@img/(.*)$": "<rootDir>/src/assets/images/$1"
+  },
+  globals: {
+    "ts-jest": {
+      diagnostics: false,
+      tsConfig: {
+        target: "ES2016",
+        module: "esnext",
+        moduleResolution: "node",
+        allowJs: true,
+        strict: true,
+        esModuleInterop: true,
+        experimentalDecorators: true,
+        resolveJsonModule: true
+      }
+    }
+  }
+};

package/package.json

@@ -1,11 +1,53 @@
 {
   "name": "@momentum-ui/web-components",
-  "version": "2.5.4",
+  "version": "2.5.7",
   "author": "Yana Harris",
   "license": "MIT",
   "repository": "https://github.com/momentum-design/momentum-ui.git",
   "main": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
+  "scripts": {
+    "start": "npm run dev",
+    "dev": "npm run check && webpack-dev-server --config ./webpack.config.dev.server.ts",
+    "dev:build": "npm run check && webpack --config-name=dev",
+    "dist": "npm run check && webpack --config-name=distProd",
+    "dist:dev": "npm run check && webpack --config-name=distDev",
+    "dist:watch": "npm run check && webpack --config-name=distDevWatch",
+    "check": "check-peer-dependencies --yarn",
+    "npm:auth": "uuip-publish-auth [momentum-ui-private]",
+    "npm:publish": "npm run npm:auth && npm run dist && uuip-publish dist momentum-ui-private && npm run npm:publish:external",
+    "npm:publish:external": "cp -R ./README.md ./publish/ && cd ./publish && json -I -f package.json -e 'this.publishConfig={\"registry\": \"https://registry.npmjs.org\"}' && npm publish",
+    "test": "jest",
+    "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
+    "test:ci": "jest --coverage --updateSnapshot --maxWorkers=4",
+    "storybook:resource": "npx web-component-analyzer src/*components/**/*.ts --outFile .storybook/custom-elements.json",
+    "storybook:dist": "npm run storybook:resource && build-storybook -c .storybook -o .out",
+    "storybook:local": "npm run storybook:resource && storybook-to-ghpages --dry-run --out=.out && npx http-server .out",
+    "storybook": "npm run storybook:resource && start-storybook -p 1234",
+    "deploy-storybook": "storybook-to-ghpages",
+    "storybook:deploy": "npm run deploy-storybook",
+    "storybook:deploy-ci": "storybook-to-ghpages --ci",
+    "snapshot": "npm run storybook:resource && build-storybook && percy-storybook --widths=1280",
+    "postinstall": "npm run build:tokens",
+    "clearVars": "node ./src/utils/clearVars.js",
+    "createTokensModule": "node ./src/utils/createTokenFilesModule.js",
+    "build:tokens": "yarn createTokensModule && node ./src/utils/generateScssFromTokens.js && node ./src/utils/generateColorTableData.js",
+    "sonar": "yarn install && yarn test && node sonar.config.js"
+  },
+  "resolutions": {
+    "jest": "^26.4.2",
+    "jest-config": "^26.4.2",
+    "lit-element": "2.3.1",
+    "lit-html": "1.2.1"
+  },
+  "peerDependencies": {
+    "@momentum-ui/core": "^19.15.14",
+    "@momentum-ui/icons": "^8.27.0",
+    "@momentum-ui/tokens": "^1.7.1",
+    "@momentum-ui/utils": "^6.2.15",
+    "lit-element": "2.3.1",
+    "lit-html": "1.2.1"
+  },
   "dependencies": {
     "@interactjs/actions": "1.10.3",
     "@interactjs/auto-start": "1.10.3",
@@ -23,15 +65,86 @@
     "papaparse": "^5.3.0",
     "sortablejs": "^1.13.0"
   },
-  "peerDependencies": {
+  "devDependencies": {
+    "@babel/core": "^7.9.0",
+    "@babel/preset-env": "^7.9.0",
+    "@interactjs/types": "1.10.3",
     "@momentum-ui/core": "^19.15.14",
     "@momentum-ui/icons": "^8.27.0",
     "@momentum-ui/tokens": "^1.7.1",
     "@momentum-ui/utils": "^6.2.15",
+    "@open-wc/testing-helpers": "1.8.9",
+    "@percy/storybook": "^3.3.0",
+    "@storybook/addon-a11y": "^5.3.18",
+    "@storybook/addon-docs": "^6.0.28",
+    "@storybook/addon-essentials": "^6.0.28",
+    "@storybook/addon-knobs": "^5.3.18",
+    "@storybook/api": "^6.1.10",
+    "@storybook/storybook-deployer": "^2.8.7",
+    "@storybook/theming": "^6.1.10",
+    "@storybook/web-components": "6.2.9",
+    "@types/copy-webpack-plugin": "^5.0.0",
+    "@types/dompurify": "^2.2.1",
+    "@types/highlight.js": "^10.1.0",
+    "@types/html-webpack-plugin": "^3.2.2",
+    "@types/jest": "26.0.10",
+    "@types/luxon": "^1.25.0",
+    "@types/node": "^13.7.7",
+    "@types/papaparse": "^5.2.4",
+    "@types/sortablejs": "^1.10.6",
+    "@types/webpack": "^4.41.7",
+    "@types/webpack-dev-server": "^3.10.0",
+    "@types/webpack-merge": "^5.0.0",
+    "@types/webpack-node-externals": "^1.7.1",
+    "@typescript-eslint/eslint-plugin": "^2.22.0",
+    "@typescript-eslint/parser": "^2.22.0",
+    "alias-resolve-loader": "^2.0.4",
+    "babel-jest": "26.3.0",
+    "babel-loader": "^8.1.0",
+    "check-peer-dependencies": "2.0.1",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^5.1.1",
+    "css-loader": "^3.4.2",
+    "cssstats": "^3.4.1",
+    "elix": "^12.1.4",
+    "eslint": "^6.8.0",
+    "eslint-plugin-prettier": "^3.1.2",
+    "extract-loader": "^4.0.3",
+    "file-loader": "^4.3.0",
+    "fs-extra": "^9.0.1",
+    "fs-path": "^0.0.24",
+    "handlebars": "^4.7.6",
+    "html-webpack-plugin": "^3.2.0",
+    "husky": "3.1.0",
+    "jest": "26.4.2",
+    "jest-config": "26.4.2",
     "lit-element": "2.3.1",
-    "lit-html": "1.2.1"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org"
+    "lit-html": "1.2.1",
+    "lit-scss-loader": "1.0.1",
+    "node-sass": "^4.13.1",
+    "node-sass-tilde-importer": "^1.0.2",
+    "papaparse": "^5.3.0",
+    "prettier": "^1.19.1",
+    "properties-reader": "^2.2.0",
+    "query-selector-shadow-dom": "^0.4.6",
+    "remove-files-webpack-plugin": "^1.4.0",
+    "sass-loader": "^8.0.2",
+    "sonarqube-scanner": "^2.8.1",
+    "string-replace-loader": "^2.3.0",
+    "strip-css-comments": "^4.1.0",
+    "stylelint": "^13.0.0",
+    "stylelint-config-sass-guidelines": "^7.0.0",
+    "stylelint-prettier": "^1.1.2",
+    "ts-jest": "26.3.0",
+    "ts-loader": "^6.2.1",
+    "ts-node": "^8.6.2",
+    "typescript": "^3.8.3",
+    "wc-sass-render": "^1.2.3",
+    "wcag-color": "^1.1.1",
+    "webpack": "^4.42.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3",
+    "webpack-merge": "^5.7.3",
+    "webpack-node-externals": "^1.7.2"
   }
 }

package/sonar-project.properties

@@ -0,0 +1,22 @@
+# must be unique in a given SonarQube instance
+sonar.projectKey=Momentum-UI-Web-Components
+
+# --- optional properties ---
+
+# defaults to project key
+#sonar.projectName=My project
+# defaults to 'not provided'
+#sonar.projectVersion=1.0
+ 
+# Path is relative to the sonar-project.properties file. Defaults to .
+#sonar.sources=.
+ 
+# Encoding of the source code. Default is default system encoding
+#sonar.sourceEncoding=UTF-8
+
+sonar.tests=src
+sonar.test.inclusions=**/*.test.js
+
+sonar.typescript.lcov.reportPaths=coverage/lcov.info
+
+sonar.exclusions=node_modules/**, coverage/**, dist/**, stats, src/**/*.test.*, src/**/*.stories.ts, src/[sandbox]/**, src/assets/**/*, storybook-static/**/*, src/wc_scss/**/tests/*, src/utils/*, src/components/sass-stats/*, src/components/**/tokens/*

package/sonar.config.js

@@ -0,0 +1,22 @@
+const scanner = require("sonarqube-scanner");
+const propertiesReader = require("properties-reader");
+const properties = propertiesReader("./sonar-project.properties");
+
+(function scan() {
+  const myArgs = process.argv.slice(2);
+  const branchName = myArgs.length > 0 ? { "sonar.branch.name": myArgs[0] } : {};
+  scanner(
+    {
+      serverUrl: "https://engci-sonar-sjc.cisco.com/sonar",
+      token: "2e83bdec5368441f6e150b02e7e74aa185522462",
+      options: {
+        "sonar.sources": properties.get("sonar.tests"),
+        "sonar.exclusions": properties.get("sonar.exclusions"),
+        "sonar.test.inclusions": properties.get("sonar.test.inclusions"),
+        "sonar.typescript.lcov.reportPaths": properties.get("sonar.typescript.lcov.reportPaths"),
+        ...branchName
+      }
+    },
+    () => process.exit()
+  );
+})();

package/src/[sandbox]/examples/accordion.ts

@@ -0,0 +1,67 @@
+import "@/components/accordion/Accordion";
+import "@/components/accordion/AccordionItem";
+import "@/components/input/Input";
+import { html } from "lit-element";
+
+export const accordionTemplate = html`
+  <style>
+    .test-class {
+      background-color: aliceblue;
+      flex-direction: column;
+      text-align: left;
+      padding: 0.5rem;
+      border-radius: 0.5rem;
+    }
+    md-accordion-item.part-demo::part(accordion-header) {
+      background-color: #c7c7c7;
+    }
+  </style>
+  <h3>Default</h3>
+  <md-accordion class="part-demo">
+    <md-accordion-item slot="accordion-item" label="Header №1" expanded class="part-demo">
+      <div slot="header-content" class="test-class">
+        <h4>Slotted Header Content</h4>
+        <p>lorem ipsum ploppum bootum flossy noop</p>
+      </div>
+      <div>Panel №1</div>
+    </md-accordion-item>
+    <md-accordion-item slot="accordion-item" label="Header №2">
+      <div>Panel №2</div>
+      <md-input type="text"></md-input>
+      <md-input type="text" disabled></md-input>
+      <md-input type="text"></md-input>
+    </md-accordion-item>
+    <md-accordion-item slot="accordion-item" label="Header №3" expanded>
+      <div>Panel №3</div>
+      <md-input type="text"></md-input>
+    </md-accordion-item>
+    <md-accordion-item slot="accordion-item" label="Header №4" disabled>
+      <div>Panel №4</div>
+    </md-accordion-item>
+    <md-accordion-item slot="accordion-item" label="Header №5">
+      <div>Panel №5</div>
+    </md-accordion-item>
+  </md-accordion>
+  <h3>Multiline</h3>
+  <md-accordion multiple>
+    <md-accordion-item slot="accordion-item" label="Header №1" expanded>
+      <div>Panel №1</div>
+    </md-accordion-item>
+    <md-accordion-item slot="accordion-item" label="Header №2" expanded>
+      <div>Panel №2</div>
+      <md-input type="text"></md-input>
+      <md-input type="text" disabled></md-input>
+      <md-input type="text"></md-input>
+    </md-accordion-item>
+    <md-accordion-item slot="accordion-item" label="Header №3">
+      <div>Panel №3</div>
+      <md-input type="text"></md-input>
+    </md-accordion-item>
+    <md-accordion-item slot="accordion-item" label="Header №4" disabled expanded>
+      <div>Panel №4</div>
+    </md-accordion-item>
+    <md-accordion-item slot="accordion-item" label="Header №5">
+      <div>Panel №5</div>
+    </md-accordion-item>
+  </md-accordion>
+`;

package/src/[sandbox]/examples/alert-banner.ts

@@ -0,0 +1,85 @@
+import "@/components/alert-banner/AlertBanner";
+import "@/components/button/Button";
+import { customElement, html, LitElement, property } from "lit-element";
+
+@customElement("alert-banner-template-sandbox")
+export class AlertBannerTemplateSandbox extends LitElement {
+  @property({ type: Boolean }) default = false;
+  @property({ type: Boolean }) warning = false;
+  @property({ type: Boolean }) error = false;
+
+  async openAlert(kind: string) {
+    switch (kind) {
+      case "default":
+        this.default = true;
+        break;
+      case "warning":
+        this.warning = true;
+        break;
+      case "error":
+        this.error = true;
+        break;
+      default:
+        break;
+    }
+    await this.requestUpdate();
+  }
+
+  async hideAlert(kind: string) {
+    switch (kind) {
+      case "default":
+        this.default = false;
+        break;
+      case "warning":
+        this.warning = false;
+        break;
+      case "error":
+        this.error = false;
+        break;
+      default:
+        break;
+    }
+    await this.requestUpdate();
+  }
+
+  render() {
+    return html`
+      <h2>Alert Banner</h2>
+      <div style="margin-bottom: 15px;">
+        <md-button @click=${() => this.openAlert("warning")}>Trigger Warning Alert</md-button>
+      </div>
+      <div style="margin-bottom: 15px;">
+        <md-button @click=${() => this.openAlert("error")}>Trigger Error Alert</md-button>
+      </div>
+      <div style="margin-bottom: 15px;">
+        <md-button @click=${() => this.openAlert("default")}>Trigger Default Alert</md-button>
+      </div>
+      <md-alert-banner ?show=${this.default} type="default" @alertBanner-hide=${() => this.hideAlert("default")}>
+        Test Alert Message
+      </md-alert-banner>
+      <md-alert-banner
+        ?show="${this.warning}"
+        closable
+        type="warning"
+        @alertBanner-hide=${() => this.hideAlert("warning")}
+      >
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum."
+      </md-alert-banner>
+      <md-alert-banner
+        ?show=${this.error}
+        closable
+        type="error"
+        @alertBanner-hide=${() => this.hideAlert("error")}
+        message="text from a message attribute instead"
+      ></md-alert-banner>
+    `;
+  }
+}
+
+export const alertBannerTemplate = html`
+  <alert-banner-template-sandbox></alert-banner-template-sandbox>
+`;

package/src/[sandbox]/examples/alert.ts

@@ -0,0 +1,27 @@
+import "@/components/alert/Alert";
+import "@/components/badge/Badge";
+import { html } from "lit-element";
+
+export const alertTemplate = html`
+  <md-alert
+    title="EXPLORE NEW HORIZONS Maecenas fermentum est ut elementum vulputate."
+    message="EXPLORE NEW HORIZONS Maecenas fermentum est ut elementum vulputate. Ut vel consequat urna. Ut aliquet ornare massa, quis dapibus quam condimentum id. GET READYEXPLORE NEW HORIZONS Maecenas fermentum est ut elementum vulputate. Ut vel consequat urna. Ut aliquet ornare massa, quis dapibus quam condimentum id."
+    type="success"
+    closable
+    show
+  ></md-alert>
+  <md-alert title="Warning" message="Who's awesome? You are!" type="warn" closable show></md-alert>
+  <md-alert title="Error" message="Who's awesome? You are!" type="error" closable show></md-alert>
+  <md-alert message="Who's awesome? You are!" show closable>
+    <md-badge slot="alert-icon" color="darkmint" circle>
+      <md-icon name="sms_16" color="white"></md-icon>
+    </md-badge>
+  </md-alert>
+  <md-alert message="Who's awesome? You are!" show>
+    <a slot="alert-body" href="/">Test</a>
+    <div slot="alert-footer">
+      <md-button variant="primary"><span slot="text">Blue</span></md-button>
+    </div>
+  </md-alert>
+  <md-alert title="Success" message="Who's awesome? You are!" type="success" inline show></md-alert>
+`;

package/src/[sandbox]/examples/avatar.ts

@@ -0,0 +1,56 @@
+import "@/components/avatar/Avatar";
+import "@/components/avatar/CompositeAvatar";
+import svg from "@img/profile.svg";
+import { html } from "lit-element";
+
+export const avatarTemplate = html`
+  <h3>Basic Large Avatar</h3>
+  <md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44"></md-avatar>
+  <md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44" color="purple"></md-avatar>
+  <md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44" color="mint"></md-avatar>
+  <md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44" color="slate"></md-avatar>
+  <md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44" color="gold"></md-avatar>
+  <md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44" color="pink"></md-avatar>
+  <md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44" color="lime"></md-avatar>
+  <h3>Medium Src Avatar</h3>
+  <md-avatar
+    alt="avatar"
+    title="Kevin Hyde"
+    size="52"
+    src="https://static.skillshare.com/uploads/users/7330753/user-image-large.png"
+  ></md-avatar>
+  <h3>Small Avatar with Custom Image</h3>
+  <md-avatar alt="avatar" title="Kevin Hyde" size="18">
+    <img
+      src="https://st2.depositphotos.com/4967775/11323/v/950/depositphotos_113235752-stock-illustration-avatar-girls-icon-vector-woman.jpg"
+    />
+  </md-avatar>
+  <h3>Medium Type with Custom SVG Image</h3>
+  <md-avatar alt="avatar" title="Kevin Hyde" size="40">
+    <img width="100" height="100" src=${svg} />
+  </md-avatar>
+  <h3>Icon Avatar with Color</h3>
+  <md-avatar alt="avatar" title="Warning Icon" size="80" color="mint" icon-name="warning_20"></md-avatar>
+  <h3>Icon Avatar Status</h3>
+  <md-avatar title="Icon" size="36" type="dnd"></md-avatar>
+  <h3>Icon Avatar Group</h3>
+  <md-avatar title="Icon" type="group"></md-avatar>
+  <h3>Avatar Self</h3>
+  <md-avatar title="Self" type="self" size="24"></md-avatar>
+  <md-avatar title="Self" type="self" size="28"></md-avatar>
+  <md-avatar title="Self" type="self" size="36"></md-avatar>
+  <md-avatar title="Self" type="self" size="40"></md-avatar>
+  <md-avatar title="Self" type="self" size="44"></md-avatar>
+  <md-avatar title="Self" type="self" size="56"></md-avatar>
+  <h3>Icon Avatar Bot</h3>
+  <md-avatar type="bot" title="Tom Smith"></md-avatar>
+  <h3>Icon Avatar Notification</h3>
+  <md-avatar has-notification type="active" size="72" title="Tom Smith"></md-avatar>
+  <h3>Icon Avatar Typing</h3>
+  <md-avatar type="typing" size="84" title="Tom Smith"></md-avatar>
+  <h3>Composite Avatar</h3>
+  <md-composite-avatar size="72">
+    <md-avatar type="typing" has-notification title="Tom Smith"></md-avatar>
+    <md-avatar type="dnd" title="Alyson Hoagland Pace"></md-avatar>
+  </md-composite-avatar>
+`;

package/src/[sandbox]/examples/badge.ts

@@ -0,0 +1,195 @@
+import "@/components/badge/Badge";
+import "@/components/icon/Icon";
+import { html } from "lit-element";
+
+export const badgeTemplate = html`
+  <md-badge aria-label="my aria-label">
+    Default
+  </md-badge>
+  <md-badge color="blue">
+    Blue
+  </md-badge>
+  <md-badge color="red">
+    Red
+  </md-badge>
+  <md-badge color="yellow">
+    Yellow
+  </md-badge>
+  <md-badge color="green">
+    Green
+  </md-badge>
+  <md-badge color="mint">
+    Mint
+  </md-badge>
+  <md-badge color="cyan">
+    Cyan
+  </md-badge>
+
+  <h4 class="sandbox-header">Additional Badges</h4>
+  <md-badge color="gray">
+    Gray
+  </md-badge>
+  <md-badge color="violet">
+    Violet
+  </md-badge>
+  <md-badge color="mint">
+    Mint
+  </md-badge>
+  <md-badge color="gold">
+    Gold
+  </md-badge>
+  <md-badge color="lime">
+    Lime
+  </md-badge>
+  <md-badge color="pink">
+    Pink
+  </md-badge>
+  <md-badge color="orange">
+    Orange
+  </md-badge>
+  <md-badge color="cobalt">
+    Cobalt
+  </md-badge>
+
+  <h3 class="sandbox-header">Lumos Badges</h3>
+  <h4 class="sandbox-header">Circle Badges</h4>
+
+  <md-badge color="green" circle>
+    <md-icon name="handset-active_16"></md-icon>
+  </md-badge>
+  <md-badge color="blue" circle>
+    <md-icon name="chat-active_16"></md-icon>
+  </md-badge>
+  <md-badge color="violet" circle>
+    <md-icon name="chat-active_16"></md-icon>
+  </md-badge>
+
+  <h4 class="sandbox-header">Large Badges</h4>
+
+  <md-badge color="green">
+    <md-icon name="handset-active_16"></md-icon>
+    Voice
+    <span class="counter" style="margin:0 1rem">${"3"}</span>
+  </md-badge>
+
+  <md-badge color="blue">
+    <md-icon name="chat-active_16"></md-icon>
+    Chat
+    <span class="counter" style="margin:0 1rem">${"3"}</span>
+  </md-badge>
+
+  <md-badge color="violet">
+    <md-icon name="icon-email-active_24" size="16"></md-icon>
+    Email
+    <span class="counter" style="margin:0 1rem">${"3"}</span>
+  </md-badge>
+
+  <md-badge color="mint">
+    <md-icon name="share-c-native-adr_12" size="16"></md-icon>
+    Social
+    <span class="counter" style="margin:0 1rem">${"3"}</span>
+  </md-badge>
+
+  <md-badge color="mint" disabled>
+    <md-icon name="share-c-native-adr_12" size="16"></md-icon>
+    Disabled
+    <span class="counter" style="margin:0 1rem">${"3"}</span>
+  </md-badge>
+
+  <h4 class="sandbox-header">Small Badges</h4>
+
+  <md-badge color="mint" small>
+    <md-icon name="handset-active_12"></md-icon>
+    00:01
+  </md-badge>
+
+  <md-badge color="blue" small>
+    <md-icon name="chat-active_12"></md-icon>
+    00:01
+  </md-badge>
+
+  <md-badge color="purple" small>
+    <md-icon name="icon-email-active_24" size="12"></md-icon>
+    00:01
+  </md-badge>
+
+  <md-badge color="darkred" small>
+    <md-icon name="icon-email-active_24" size="12"></md-icon>
+    00:01
+  </md-badge>
+
+  <h4 class="sandbox-header">Split Badges</h4>
+
+  <md-badge color="mint" split>
+    <span slot="split-left">
+      <md-badge color="mint" small circle style="margin:0 .5rem 0 .375rem">
+        <md-icon name="handset-active_16"></md-icon>
+      </md-badge>
+      ${"00:01"}
+    </span>
+    <span slot="split-right">
+      <md-icon name="headset_16" style="margin-right:.375rem;height:1rem"></md-icon>
+      ${"00:01"}
+    </span>
+  </md-badge>
+  <md-badge color="blue" split>
+    <span slot="split-left">
+      <md-badge color="blue" small circle style="margin:0 .5rem 0 .375rem">
+        <md-icon name="chat-active_16"></md-icon>
+      </md-badge>
+      ${"04:31"}
+    </span>
+    <span slot="split-right">
+      <md-icon name="headset_16" style="margin-right:.375rem;height:1rem"></md-icon>
+      ${"00:23"}
+    </span>
+  </md-badge>
+
+  <h4 class="sandbox-header">Communications Status</h4>
+
+  <md-badge split>
+    <span slot="split-left">
+      <md-badge color="green" circle small style="margin-right:.375rem;">
+        <md-icon name="handset-active_12"></md-icon>
+      </md-badge>
+      ${"00:01"}
+    </span>
+    <span slot="split-right">
+      <md-icon name="archive_12" style="margin-right:.375rem;height:1rem"></md-icon>
+      Wrap Up ${"00:01"}
+    </span>
+  </md-badge>
+  <md-badge split>
+    <span slot="split-left">
+      <md-badge color="blue" circle small style="margin-right:.375rem;">
+        <md-icon name="chat-active_12"></md-icon>
+      </md-badge>
+      ${"00:01"}
+    </span>
+    <span slot="split-right">
+      <md-icon name="headset_12" style="margin-right:.375rem;height:1rem"></md-icon>
+      Barbara Hecker ${"00:23"}
+    </span>
+  </md-badge>
+
+  <h4 class="sandbox-header">Compact Badge</h4>
+
+  <md-badge compact>
+    <span>
+      <md-badge color="blue" circle small style="margin-right:.375rem;">
+        <md-icon name="chat-active_12"></md-icon>
+      </md-badge>
+      <span>connected - </span>
+      ${"00:01"}
+    </span>
+  </md-badge>
+
+  <h4 class="sandbox-header">Outlined Badges</h4>
+
+  <md-badge outlined>
+    March 21, 2020
+  </md-badge>
+  <md-badge outlined small>
+    March 21, 2020
+  </md-badge>
+`;