@momentum-ui/web-components 2.16.2 → 2.16.3

package/src/wc_scss/typography/settings.scss

@@ -0,0 +1,300 @@
+// We use these to define default font stacks
+@use "sass:math";
+@use "sass:color";
+@use "@/wc_scss/settings/rem";
+@use "@/wc_scss/colors/settings-base.scss" as color-tokens;
+
+$brand-font-folder: "~@momentum-ui/core/fonts" !default;
+$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
+$font-family-monospace: Consolas, "Liberation Mono", Courier, monospace;
+
+$brand-font-regular: var(--brand-font-regular, "CiscoSansTT Regular", $font-family-sans-serif);
+$brand-font-bold: var(--brand-font-bold, "CiscoSansTT Bold", $font-family-sans-serif);
+$brand-font-bold-oblique: var(--brand-font-bold-oblique, "CiscoSansTT Bold Oblique", $font-family-sans-serif);
+$brand-font-extra-light: var(--brand-font-extra-light, "CiscoSansTT Extra Light", $font-family-sans-serif);
+$brand-font-extra-light-oblique: var(
+  --brand-font-extra-light-oblique,
+  "CiscoSansTT Extra Light Oblique",
+  $font-family-sans-serif
+);
+$brand-font-heavy: var(--brand-font-heavy, "CiscoSansTT Heavy", $font-family-sans-serif);
+$brand-font-heavy-oblique: var(--brand-font-heavy-oblique, "CiscoSansTT Heavy Oblique", $font-family-sans-serif);
+$brand-font-light: var(--brand-font-light, "CiscoSansTT Light", $font-family-sans-serif);
+$brand-font-light-Oblique: var(--brand-font-light-oblique, "CiscoSansTT Light Oblique", $font-family-sans-serif);
+$brand-font-regular-oblique: var(--brand-font-regular-oblique, "CiscoSansTT Regular Oblique", $font-family-sans-serif);
+$brand-font-thin: var(--brand-font-thin, "CiscoSansTT Thin", $font-family-sans-serif);
+$brand-font-thin-oblique: var(--brand-font-thin-oblique, "CiscoSansTT Thin Oblique", $font-family-sans-serif);
+
+$brand-font-medium: var(--brand-font-medium, "CiscoSans-Medium", $font-family-sans-serif);
+
+$body-font-family: $brand-font-regular;
+
+// TODO: Replace variables in app.
+$brand-font-cisco-TT-Bold: $brand-font-bold;
+$brand-font-cisco-TT-Bold-Oblique: $brand-font-bold-oblique;
+$brand-font-cisco-TT-Extra-Light: $brand-font-extra-light;
+$brand-font-cisco-TT-Extra-Light-Oblique: $brand-font-extra-light-oblique;
+$brand-font-cisco-TT-Heavy: $brand-font-heavy;
+$brand-font-cisco-TT-Heavy-Oblique: $brand-font-heavy-oblique;
+$brand-font-cisco-TT-Light: $brand-font-light;
+$brand-font-cisco-TT-Light-Oblique: $brand-font-light-Oblique;
+$brand-font-cisco-TT-Regular: $brand-font-regular;
+$brand-font-cisco-TT-Regular-Oblique: $brand-font-regular-oblique;
+$brand-font-cisco-TT-Thin: $brand-font-thin;
+$brand-font-cisco-TT-Thin-Oblique: $brand-font-thin-oblique;
+
+$font-size-base: 14px;
+$font-size-large: math.ceil($font-size-base * 1.1); // ~16px
+
+$font-size-small: math.ceil($font-size-base * 0.85); // ~12px
+
+$font-size-h1: math.floor($font-size-base * 2.9); // ~40px
+
+$font-size-h2: math.floor($font-size-base * 2.3); // ~32px
+
+$font-size-h3: math.ceil($font-size-base * 1.7); // ~24px
+
+$font-size-h4: math.ceil($font-size-base * 1.25); // ~18px
+
+$font-size-h5: $font-size-base;
+$font-size-h6: math.ceil($font-size-base * 0.85);
+$line-height-base: 1.428571429; // 20/14
+$line-height-computed: math.floor(($font-size-base * $line-height-base));
+
+// We use these to define default font weights
+$font-weight-normal: normal !default;
+$font-weight-bold: bold !default;
+$font-color-primary: color-tokens.$md-gray-90;
+
+$text-color: color-tokens.$md-gray-70;
+
+// We use these to control header font styles
+$header-font-family: $body-font-family !default;
+$header-font-weight: $font-weight-normal !default;
+$header-font-style: normal !default;
+$header-font-color: color-tokens.$md-gray-70 !default;
+
+$header-line-height: 1.4 !default;
+$header-top-margin: 0.2rem !default;
+$header-bottom-margin: 0.5rem !default;
+$header-text-rendering: optimizeLegibility !default;
+
+// We use these to control header font sizes
+$title-heading-font-size-pixel: 62;
+$title-heading-font-size: rem-calc($title-heading-font-size-pixel) !default;
+$h1-font-size-pixel: 48;
+$h1-font-size: rem-calc($h1-font-size-pixel) !default;
+$h2-font-size-pixel: 36;
+$h2-font-size: rem-calc($h2-font-size-pixel) !default;
+$h3-font-size-pixel: 26;
+$h3-font-size: rem-calc($h3-font-size-pixel) !default;
+$h4-font-size-pixel: 20;
+$h4-font-size: rem-calc($h4-font-size-pixel) !default;
+$h5-font-size-pixel: 16;
+$h5-font-size: rem-calc($h5-font-size-pixel) !default;
+$h6-font-size-pixel: 14;
+$h6-font-size: rem-calc($h6-font-size-pixel) !default;
+
+// We use these to control header size reduction on small screens
+$h1-font-reduction: 0 !default;
+$h2-font-reduction: 0 !default;
+$h3-font-reduction: 0 !default;
+$h4-font-reduction: 0 !default;
+$h5-font-reduction: 0 !default;
+$h6-font-reduction: 0 !default;
+
+$base-font-size: rem.$rem-base;
+
+// These control how subheaders are styled.
+$subheader-line-height: 1.4 !default;
+$subheader-font-color: color.scale($header-font-color, $lightness: 35%) !default;
+$subheader-font-weight: $font-weight-normal !default;
+$subheader-top-margin: 0.2rem !default;
+$subheader-bottom-margin: 0.5rem !default;
+
+// A general <small> styling
+$small-font-size: 0.875 !default;
+
+$small-font-color: color.scale($header-font-color, $lightness: 35%) !default;
+
+// We use these to style paragraphs
+$paragraph-font-family: inherit !default;
+$paragraph-font-weight: $font-weight-normal !default;
+$paragraph-font-size-pixel: 14;
+$paragraph-font-size: rem-calc($paragraph-font-size-pixel) !default;
+
+$paragraph-line-height: 1.6 !default;
+$paragraph-margin-bottom: rem-calc(20) !default;
+$paragraph-aside-font-size: rem-calc(14) !default;
+$paragraph-aside-line-height: 1.35 !default;
+$paragraph-aside-font-style: italic !default;
+$paragraph-text-rendering: optimizeLegibility !default;
+
+// body-small/est styling
+$body-small-font-size-pixel: 12;
+$body-small-font-size: rem-calc($body-small-font-size-pixel) !default;
+$body-smallest-font-size-pixel: 10;
+$body-smallest-font-size: rem-calc($body-smallest-font-size-pixel) !default;
+
+$lead-font-size: rem-calc(14) !default;
+
+// We use these to style <code> tags
+$code-color: color-tokens.$md-gray-90 !default;
+$code-font-family: $font-family-monospace !default;
+$code-font-weight: $font-weight-normal !default;
+$code-background-color: transparent !default;
+
+
+$code-border-size: 0 !default;
+
+$code-border-style: solid !default;
+$code-border-color: color.scale($code-background-color, $lightness: -10%) !default;
+$code-padding: rem-calc(2) rem-calc(5) rem-calc(1) !default;
+
+// We use these to style anchors
+$anchor-text-decoration: none !default;
+$anchor-text-decoration-hover: none !default;
+$anchor-font-color: color-tokens.$md-theme-60 !default;
+$anchor-font-color-hover: color-tokens.$md-theme-70 !default;
+
+// We use these to style the <hr> element
+$hr-border-width: 1px !default;
+$hr-border-style: solid !default;
+$hr-border-color: color-tokens.$md-gray-20 !default;
+$hr-margin: rem-calc(20) !default;
+
+// We use these to style lists
+$list-font-family: $paragraph-font-family !default;
+$list-font-size: $paragraph-font-size !default;
+$list-line-height: $paragraph-line-height !default;
+$list-margin-bottom: $paragraph-margin-bottom !default;
+$list-style-position: outside !default;
+$list-side-margin: 1rem !default;
+$list-ordered-side-margin: 1.5rem !default;
+
+$list-side-margin-no-bullet: 0 !default;
+$list-nested-margin: rem-calc(20) !default;
+$definition-list-header-weight: $font-weight-bold !default;
+$definition-list-header-margin-bottom: 0.3rem !default;
+$definition-list-margin-bottom: rem-calc(12) !default;
+
+// We use these to style blockquotes
+$blockquote-font-color: inherit !default;
+$blockquote-padding: rem-calc(9 20 0 19) !default;
+$blockquote-border-width: 4px !default;
+$blockquote-padding: 0.5rem 1rem calc(0.25rem + #{$blockquote-border-width}) 1rem !default;
+$blockquote-border: $blockquote-border-width solid color-tokens.$md-gray-50 !default;
+
+$blockquote-cite-font-size: rem-calc(13) !default;
+$blockquote-cite-font-color: inherit !default;
+$blockquote-cite-link-color: $blockquote-cite-font-color !default;
+
+// Acronym styles
+$acronym-underline: 1px dotted color-tokens.$md-gray-20 !default;
+
+// line height (px) divided by font-size
+$title-heading-line-height: rem-calc(math.div(80, $title-heading-font-size-pixel)) !default;
+$h1-line-height: rem-calc(math.div(64, $h1-font-size-pixel)) !default;
+$h2-line-height: rem-calc(math.div(48, $h2-font-size-pixel)) !default;
+$h3-line-height: rem-calc(math.div(32, $h3-font-size-pixel)) !default;
+$h4-line-height: rem-calc(math.div(32, $h4-font-size-pixel)) !default;
+$h5-line-height: rem-calc(math.div(24, $h5-font-size-pixel)) !default;
+$h6-line-height: rem-calc(math.div(24, $h6-font-size-pixel)) !default;
+$paragraph-line-height: rem-calc(math.div(24, $paragraph-font-size-pixel)) !default;
+$body-small-line-height: rem-calc(math.div(16, $body-small-font-size-pixel)) !default;
+$body-smallest-line-height: rem-calc(math.div(16, $body-smallest-font-size-pixel)) !default;
+
+//------------------------------------
+//    #FONT-SIZE-VARIABLES
+//    create font size map to zurb's foundation
+//------------------------------------
+$fontSizes: (
+  dl: $paragraph-font-size,
+  dt: $paragraph-font-size,
+  dd: $paragraph-font-size,
+  li: $paragraph-font-size,
+  title-heading: $title-heading-font-size,
+  h1: $h1-font-size,
+  h2: $h2-font-size,
+  h3: $h3-font-size,
+  h4: $h4-font-size,
+  h5: $h5-font-size,
+  h6: $h6-font-size,
+  pre: $paragraph-font-size,
+  code: $paragraph-font-size,
+  p: $paragraph-font-size,
+  blockquote: $paragraph-font-size,
+  th: $paragraph-font-size,
+  td: $paragraph-font-size,
+  small: $small-font-size,
+  body-small: $body-small-font-size,
+  body-smallest: $body-smallest-font-size
+);
+
+//------------------------------------
+//    #FONT-FACES-VARIABLES
+//    create font size map to cisco fonts
+//------------------------------------
+
+$fontFaces: (
+  title-heading: $brand-font-thin,
+  h1: $brand-font-thin,
+  h2: $brand-font-light,
+  h3: $brand-font-light,
+  h4: $brand-font-light,
+  h5: $brand-font-light,
+  h6: $brand-font-light,
+  pre: $brand-font-light,
+  code: $font-family-monospace,
+  kbd: $brand-font-light,
+  p: $brand-font-light,
+  small: $brand-font-regular,
+  body-small: $brand-font-regular,
+  body-smallest: $brand-font-regular
+);
+
+$fontVariations: (
+  h1--bold: $brand-font-extra-light,
+  h2--light: $brand-font-extra-light,
+  h2--bold: $brand-font-regular,
+  h3--light: $brand-font-extra-light,
+  h3--bold: $brand-font-regular,
+  h4--bold: $brand-font-regular,
+  h5--bold: $brand-font-regular,
+  h5--heavy: $brand-font-bold,
+  body--bold: $brand-font-regular,
+  body--heavy: $brand-font-bold,
+  body-small--light: $brand-font-light,
+  body-small--bold: $brand-font-bold,
+  body-smallest--light: $brand-font-light,
+  body-smallest--bold: $brand-font-bold
+);
+
+$fontColors: (
+  primary: color-tokens.$md-gray-90,
+  alternate: color-tokens.$md-black-100,
+  secondary: color-tokens.$md-gray-70,
+  disabled: color-tokens.$md-gray-50
+);
+
+//------------------------------------
+//    #LINE-HEIGHT-VARIABLES
+//    create line height map to cisco fonts
+//------------------------------------
+
+$lineHeights: (
+  title-heading: $title-heading-line-height,
+  h1: $h1-line-height,
+  h2: $h2-line-height,
+  h3: $h3-line-height,
+  h4: $h4-line-height,
+  h5: $h5-line-height,
+  h6: $h6-line-height,
+  p: $paragraph-line-height,
+  ul: $list-line-height,
+  ol: $list-line-height,
+  dl: $list-line-height,
+  body-small: $body-small-line-height,
+  body-smallest: $body-smallest-line-height
+);

package/src/wc_scss/typography/typography.scss

@@ -0,0 +1,322 @@
+/** @component typography */
+@use "sass:map";
+
+@include exports("type-bem") {
+  @include align-classes;
+
+  @include brand-font-family-ciscoFont;
+
+  * {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  div,
+  dl,
+  dt,
+  dd,
+  ul,
+  ol,
+  li,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  pre,
+  form,
+  p,
+  blockquote,
+  th,
+  td {
+    font-weight: normal;
+    margin: 0;
+    padding: 0;
+  }
+
+  a {
+    color: $anchor-font-color;
+    line-height: inherit;
+    text-decoration: $anchor-text-decoration;
+
+    &:hover,
+    &:focus {
+      color: $anchor-font-color-hover;
+
+      @if $anchor-text-decoration-hover !=$anchor-text-decoration {
+        text-decoration: $anchor-text-decoration-hover;
+      }
+    }
+
+    &:focus {
+      @include focus-styles;
+    }
+
+    img {
+      border: none;
+    }
+  }
+
+  p {
+    font-family: $paragraph-font-family;
+    font-size: $paragraph-font-size;
+    font-weight: $paragraph-font-weight;
+    margin-bottom: $paragraph-margin-bottom;
+    text-rendering: $paragraph-text-rendering;
+
+    & > code {
+      // fix inline code block line-height
+      line-height: 1em;
+    }
+
+    &.lead {
+      //@include lead;
+      font-size: $lead-font-size;
+    }
+
+    & aside {
+      font-size: $paragraph-aside-font-size;
+      font-style: $paragraph-aside-font-style;
+      line-height: $paragraph-aside-line-height;
+    }
+  }
+
+  .subheader {
+    @include subheader;
+  }
+
+  hr {
+    border: $hr-border-style $hr-border-color;
+    border-width: $hr-border-width 0 0;
+    clear: both;
+    height: 0;
+    margin: $hr-margin 0 ($hr-margin - rem-calc($hr-border-width));
+  }
+
+  em,
+  i {
+    font-style: italic;
+    line-height: inherit;
+  }
+
+  strong,
+  b {
+    font-weight: $font-weight-bold;
+    line-height: inherit;
+  }
+
+  small {
+    font-size: $small-font-size;
+    line-height: inherit;
+  }
+
+  // .body-small {
+  //   @extend %body-small;
+  // }
+
+  // .body-smallest {
+  //   @extend %body-smallest;
+  // }
+
+  code {
+    background-color: $code-background-color;
+    border-color: $code-border-color;
+    border-style: $code-border-style;
+    border-width: $code-border-size;
+    color: $code-color;
+    font-family: $code-font-family;
+    font-weight: $code-font-weight;
+    padding: $code-padding;
+  }
+
+  ul,
+  ol,
+  dl {
+    font-family: $list-font-family;
+    font-size: $list-font-size;
+    line-height: $list-line-height;
+    list-style-position: $list-style-position;
+    margin-bottom: $list-margin-bottom;
+  }
+
+  ul {
+    // Declarations before nested rules
+    margin-#{$default-float}: $list-side-margin;
+
+    &.no-bullet {
+      list-style: none;
+      // Declarations before nested rules
+      margin-#{$default-float}: $list-side-margin-no-bullet;
+
+      li {
+        ul,
+        ol {
+          list-style: none;
+          margin-bottom: 0;
+          margin-#{$default-float}: $list-nested-margin;
+        }
+      }
+    }
+
+    li {
+      ul,
+      ol {
+        margin-bottom: 0;
+        margin-#{$default-float}: $list-nested-margin;
+      }
+    }
+
+    &.square,
+    &.circle,
+    &.disc {
+      li ul {
+        list-style: inherit;
+      }
+    }
+
+    &.square {
+      list-style-type: square;
+      margin-#{$default-float}: $list-side-margin;
+    }
+
+    &.circle {
+      list-style-type: circle;
+      margin-#{$default-float}: $list-side-margin;
+    }
+
+    &.disc {
+      list-style-type: disc;
+      margin-#{$default-float}: $list-side-margin;
+    }
+  }
+
+  ol {
+    // Declarations before nested rules
+    margin-#{$default-float}: $list-ordered-side-margin;
+    li {
+      ul,
+      ol {
+        margin-bottom: 0;
+        margin-#{$default-float}: $list-nested-margin;
+      }
+    }
+  }
+
+  dl {
+    dt {
+      font-weight: $definition-list-header-weight;
+      margin-bottom: $definition-list-header-margin-bottom;
+    }
+
+    dd {
+      margin-bottom: $definition-list-margin-bottom;
+    }
+  }
+
+  abbr,
+  acronym {
+    color: $body-font-color;
+    cursor: $cursor-help-value;
+    font-size: 90%;
+    text-transform: uppercase;
+  }
+
+  abbr {
+    text-transform: none;
+
+    &[title] {
+      border-bottom: $acronym-underline;
+    }
+  }
+
+  blockquote {
+    margin: 0 0 $paragraph-margin-bottom;
+    padding: $blockquote-padding;
+    border-#{$default-float}: $blockquote-border;
+
+    cite {
+      color: $blockquote-cite-font-color;
+      display: block;
+      font-size: $blockquote-cite-font-size;
+
+      &::before {
+        content: "\2014 \0020";
+      }
+
+      a,
+      a:visited {
+        color: $blockquote-cite-link-color;
+      }
+    }
+  }
+
+  blockquote,
+  blockquote p {
+    color: $blockquote-font-color;
+    line-height: $paragraph-line-height;
+  }
+
+  .debug-grid {
+    &::after {
+      @include show-baseline(rgba(255, 0, 0, 0.1667));
+      content: "";
+      display: inline-block;
+      height: 100%;
+      left: 0;
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      z-index: 9998;
+    }
+
+    &::before {
+      pointer-events: none;
+      z-index: 9999;
+    }
+  }
+
+  footer,
+  nav {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    a,
+    span {
+      letter-spacing: normal;
+    }
+  }
+
+  .lead {
+    font-family: $brand-font-regular;
+  }
+
+  @each $variation in map.keys($fontVariations) {
+    $fontFamily: "" !default;
+
+    @if map.has-key($fontVariations, $variation) {
+      $fontFamily: map.get($fontVariations, $variation);
+    }
+
+    .md-#{$variation} {
+      font-family: $fontFamily !important;
+    }
+  }
+
+  @each $fontColorClass in map.keys($fontColors) {
+    $fontColor: "" !default;
+
+    @if map.has-key($fontColors, $fontColorClass) {
+      $fontColor: map.get($fontColors, $fontColorClass);
+    }
+
+    .md-font-color--#{$fontColorClass} {
+      color: $fontColor !important;
+    }
+  }
+}

package/stats/cssStats.js

@@ -0,0 +1,17 @@
+const path = require("path");
+const cssstats = require("cssstats");
+const writeFileSyncRecursive = require('./writeFileSyncRecursive')
+
+module.exports = function analyzeCSS(module, data) {
+  try {
+    const stats = cssstats(data, {
+      specificityGraph: true,
+      sortedSpecificityGraph: true,
+      repeatedSelectors: true,
+      propertyResets: true
+    });
+    writeFileSyncRecursive(`stats/json/${module}.json`, JSON.stringify(stats, null, 2), "utf-8");
+  } catch (err) {
+    console.log(`"${module}" not analyzed: `, err);
+  }
+};

package/stats/stats-loader.js

@@ -0,0 +1,23 @@
+const { getNormalizedPlatformPath } = require("./utils");
+const writeFileSyncRecursive = require("./writeFileSyncRecursive");
+const analyzeCSS = require("./cssStats.js");
+
+const isWin = process.platform === "win32";
+
+module.exports = async function(source) {
+  const location = this.resourcePath;
+
+  const components_base = getNormalizedPlatformPath("src/components/");
+  const scss_sub_path = getNormalizedPlatformPath("/scss/");
+  const components_base_idx = location.indexOf(components_base);
+  const scss_sub_path_idx = location.indexOf(scss_sub_path);
+
+  if (components_base_idx > 0 && scss_sub_path_idx > 0) {
+    const name = location.substring(location.indexOf(components_base) + 15, location.indexOf(scss_sub_path));
+    analyzeCSS(name, source);
+
+    writeFileSyncRecursive(`stats/css/${name}.css`, source, "utf-8");
+  }
+
+  return source;
+};

package/stats/utils.js

@@ -0,0 +1,5 @@
+const path = require("path");
+
+module.exports = {
+  getNormalizedPlatformPath: (_path) => _path && typeof _path === "string" ? _path.replace(/\//g, path.sep) : ""
+};

package/stats/writeFileSyncRecursive.js

@@ -0,0 +1,20 @@
+const path = require('path');
+const fs = require("fs");
+const { getNormalizedPlatformPath } = require("./utils");
+
+module.exports = function writeFileSyncRecursive(filename, content, charset) {
+  const _filename = getNormalizedPlatformPath(filename);
+  const folders = _filename.split(path.sep).slice(0, -1);
+  if (folders.length) {
+    // create folder path if it doesn't exist
+    folders.reduce((last, folder) => {
+      const folderPath = path.resolve(last ? getNormalizedPlatformPath(`${last}/${folder}`) : folder);
+      if (!fs.existsSync(folderPath) || !fs.lstatSync(folderPath).isDirectory()) {
+        fs.mkdirSync(folderPath);
+      }
+      return folderPath;
+    });
+  }
+
+  fs.writeFileSync(_filename, content, charset);
+};

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2016",
+    "module": "commonjs",
+    "strict": true,
+    "esModuleInterop": true
+  },
+  "files": [
+    "webpack.config.ts",
+    "webpack.config.dev.server.ts",
+    "webpack.plugin.LoadChunks.ts",
+  ]
+}