Merge branch 'master' into feature/bolt-spacing-system-regular

boltdesignsystem · Apr 27, 2020 · c198d9f · c198d9f
2 parents 860d729 + a946abb
commit c198d9f
Show file tree

Hide file tree

Showing 12 changed files with 69 additions and 136 deletions.
diff --git a/.boltrc.js b/.boltrc.js
@@ -49,11 +49,6 @@ const nonImageFixtures = globby.sync([
 ]);
 const itemsToCopy = [];
 
-const allComponentPackages = globby
-  .sync(path.join(__dirname, './packages/components/*/package.json'))
-  .map(pkgPath => require(pkgPath))
-  .map(pkg => pkg.name);
-
 nonImageFixtures.forEach(fixturePath => {
   itemsToCopy.push({
     from: path.join(__dirname, fixturePath),
@@ -74,10 +69,7 @@ module.exports = {
   iconDir: [],
   components: {
     global: [
-      ...allComponentPackages,
-      '@bolt/components-animate',
-      '@bolt/micro-journeys',
-      '@bolt/analytics-autolink',
+      ...siteConfig.components.global,
     ],
   },
   images: {

diff --git a/docs-site/.boltrc.js b/docs-site/.boltrc.js
@@ -64,7 +64,8 @@ const config = deepmerge(baseConfig, {
         dist: '../www/images',
       },
       {
-        base: './src/pages/pattern-lab/_patterns/03-blueprints/00-assets/images',
+        base:
+          './src/pages/pattern-lab/_patterns/03-blueprints/00-assets/images',
         glob: '**',
         dist: '../www/images',
       },
@@ -89,8 +90,12 @@ const config = deepmerge(baseConfig, {
        */
 
       // helper components that are only used internally
+
+      // @todo: look into removing these three lines once the lazy queue-related perf updates get in
+      '@bolt/analytics-autolink', // why isn't this in @bolt/starter-kit?!
       '@bolt/analytics-autotrack',
       '@bolt/blueprints',
+
       '@bolt/components-radio-switch',
       '@bolt/components-page-footer',
       '@bolt/components-page-header',
@@ -158,4 +163,7 @@ const config = deepmerge(baseConfig, {
   ],
 });
 
+// removing here first before removing from @bolt/starter-kit directly
+delete config.components.individual;
+
 module.exports = config;
diff --git a/docs-site/package.json b/docs-site/package.json
@@ -16,6 +16,7 @@
     "build:noisy": "bolt build --verbosity 5",
     "build:pl": "bolt prep && npx lerna exec --scope @bolt/uikit-workshop --loglevel=silent -- yarn run build",
     "build:prod": "bolt build --prod --no-ssr",
+    "build:webpack": "bolt webpack --prod",
     "clean": "cd ../ && npm run clean",
     "prep": "bolt prep",
     "serve": "bolt serve",

diff --git a/docs-site/src/templates/_site-footer.twig b/docs-site/src/templates/_site-footer.twig
@@ -1,46 +1,3 @@
-  {% if bolt.data.config.lang is iterable %}
-    {% set lang = bolt.data.config.lang[0] %}
-  {% else %}
-    {% set lang = bolt.data.config.lang %}
-  {% endif %}
-
-  {# @TODO: how do we get this to use the exact same values from our global .js config without having the source of truth live as a .yml or .json file...? #}
-  {% set legacyManifestConfig = "@bolt-assets/bolt-webpack-manifest#{lang != "" ? "-" ~ lang : ""}.json" %}
-  {% set modernManifestConfig = "@bolt-assets/bolt-webpack-manifest#{lang != "" ? "-" ~ lang : ""}.modern.json" %}
-
-  {% set legacyAssets = [] %}
-  {% set modernAssets = [] %}
-
-  {% if fileExists(legacyManifestConfig) %}
-    {% set legacyAssets = get_data(legacyManifestConfig) %}
-  {% endif %}
-
-  {% if fileExists(modernManifestConfig) %}
-    {% set modernAssets = get_data(modernManifestConfig) %}
-  {% endif %}
-
-  {% if bolt.data.config.esModules %}
-    {% if bolt.data.config.compat == true %}
-      <script nomodule src="{{ legacyAssets["bolt-global.js"] | default("/build/bolt-global.js") }}?cacheBuster={{ cacheBuster }}" async></script>
-    {% endif %}
-
-    <script type="module" src="{{ modernAssets["bolt-global.js"] | default("/build/bolt-global.modern.js") }}" async></script>
-
-  {% else %}
-    <script src="{{ legacyAssets["bolt-global.js"] | default("/build/bolt-global.js") }}?cacheBuster={{ cacheBuster }}" async></script>
-  {% endif %}
-
-  <script type="module">
-    if (!sessionStorage.fontsLoadedCriticalFoftPreloadPolyfill){
-      document.documentElement.classList.add('js-fonts-loaded');
-      sessionStorage.fontsLoadedCriticalFoftPreloadPolyfill = true;
-    }
-  </script>
-
-  <script nomodule>
-    document.documentElement.classList.add('js-fonts-loaded');
-  </script>
-
   <script src="https://www.google-analytics.com/analytics.js" async></script>
 
   {{ patternLabFoot | raw }}

diff --git a/docs-site/src/templates/_site-head.twig b/docs-site/src/templates/_site-head.twig
@@ -6,16 +6,10 @@
 
 
 {# @TODO: how do we get this to use the exact same values from our global .js config without having the source of truth live as a .yml or .json file...? #}
-{% set legacyManifestConfig = "@bolt-assets/bolt-webpack-manifest#{lang != "" ? "-" ~ lang : ""}.json" %}
 {% set modernManifestConfig = "@bolt-assets/bolt-webpack-manifest#{lang != "" ? "-" ~ lang : ""}.modern.json" %}
 
-{% set legacyAssets = [] %}
 {% set modernAssets = [] %}
 
-{% if fileExists(legacyManifestConfig) %}
-  {% set legacyAssets = get_data(legacyManifestConfig) %}
-{% endif %}
-
 {% if fileExists(modernManifestConfig) %}
   {% set modernAssets = get_data(modernManifestConfig) %}
 {% endif %}
@@ -35,7 +29,7 @@
 {% set cacheBuster = bolt.data.config.prod ? "?v=" ~ bolt.data.fullManifest.version : "" %}
 
 {% set htmlClasses = [
-  bolt.data.config.prod ? '' : 'js-fonts-loaded',
+  'js-fonts-loaded',
   currentUrl == 'index.html' ? 'u-bolt-min-height-screen u-bolt-flex' : ''
 ] %}
 
@@ -50,28 +44,11 @@
     <link rel="preconnect dns-prefetch" href="https://www.google-analytics.com"/>
 
     <!-- async load PL's CSS -->
-    <link rel="stylesheet" href="{{ legacyAssets["bolt-global.css"] | default("/build/bolt-global.css") }}" media="all" />
+    <link rel="stylesheet" href="{{ modernAssets["bolt-global.css"] | default("/build/bolt-global.css") }}" media="all" />
     <link rel="preload" href="/pattern-lab/styleguide/css/pattern-lab.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
 
-    {# critical path scripts for non-ES Module browsers #}
-    {% if bolt.data.config.compat == true %}
-      <script nomodule>
-        {% if fileExists("@bolt-assets/bolt-critical-path-polyfills.cjs.js") %}
-          {{ inline(legacyAssets["bolt-critical-path-polyfills.cjs.js"] | default("")) }}
-        {% endif %}
-
-        {% if fileExists("@bolt-assets/bolt-components-critical-css.js") %}
-          {{ inline( legacyAssets["bolt-components-critical-css-vars.js"] | default("") ) }}
-        {% endif %}
-      </script>
-    {% endif %}
-
     {# shared critical path scripts #}
     <script>
-      if (sessionStorage.fontsLoadedCriticalFoftPreloadPolyfill){
-        document.documentElement.classList.add('js-fonts-loaded');
-      }
-
       window.drupalSettings = {
         google_analytics: {
           trackCrossDomains: ['github.com']
@@ -84,17 +61,12 @@
       window.bolt.data.fullManifest.version = window.bolt.data.fullManifest.version || {{ bolt.data.fullManifest.version|json_encode|raw }};
     </script>
 
+    <script type="module" src="{{ modernAssets["bolt-global.js"] | default("/build/bolt-global.modern.js") }}" async></script>
+
     <noscript>
       <link href="/pattern-lab/styleguide/css/pattern-lab.css" rel="stylesheet">
     </noscript>
 
-    {# @TODO: wire this up to use Critical CSS #}
-    <style>
-      {% if fileExists("@bolt-assets/bolt-components-critical-fonts.css") %}
-        {# {{ inline( legacyAssets["bolt-components-critical-fonts.css"] | default("") ) }} #}
-      {% endif %}
-    </style>
-
     <link rel="image_src" href="/images/bolt-logo-480.png">
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=LbyzAXRqNz">
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=LbyzAXRqNz">

diff --git a/packages/base-starter-kit/.boltrc.js b/packages/base-starter-kit/.boltrc.js
@@ -31,6 +31,7 @@ module.exports = {
       '@bolt/components-grid',
       '@bolt/components-headline',
       '@bolt/components-hero',
+      '@bolt/components-li',
       '@bolt/components-icon',
       '@bolt/components-image',
       '@bolt/components-link',
@@ -51,6 +52,7 @@ module.exports = {
       '@bolt/components-smooth-scroll',
       '@bolt/components-stack',
       '@bolt/components-sticky',
+      '@bolt/components-ratio',
       '@bolt/components-table',
       '@bolt/components-tabs',
       '@bolt/components-teaser',

diff --git a/packages/base-starter-kit/package.json b/packages/base-starter-kit/package.json
@@ -44,6 +44,7 @@
     "@bolt/components-icon": "^2.21.0",
     "@bolt/components-icons": "^2.21.0",
     "@bolt/components-image": "^2.22.0",
+    "@bolt/components-li": "^2.22.0",
     "@bolt/components-link": "^2.22.0",
     "@bolt/components-list": "^2.22.0",
     "@bolt/components-logo": "^2.21.0",
@@ -57,6 +58,7 @@
     "@bolt/components-pagination": "^2.21.0",
     "@bolt/components-placeholder": "^2.21.0",
     "@bolt/components-popover": "^2.22.0",
+    "@bolt/components-ratio": "^2.22.0",
     "@bolt/components-share": "^2.22.0",
     "@bolt/components-site": "^2.21.0",
     "@bolt/components-smooth-scroll": "^2.21.0",

diff --git a/packages/components/bolt-link/package.json b/packages/components/bolt-link/package.json
@@ -18,8 +18,7 @@
   "style": "index.scss",
   "dependencies": {
     "@bolt/components-icon": "^2.21.0",
-    "@bolt/core-v3.x": "^2.22.0",
-    "ajv": "^6.5.4"
+    "@bolt/core-v3.x": "^2.22.0"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/components/bolt-list/src/list.js b/packages/components/bolt-list/src/list.js
@@ -8,14 +8,11 @@ import {
 } from '@bolt/core-v3.x/utils';
 import classNames from 'classnames/bind';
 import { withLitHtml } from '@bolt/core-v3.x/renderers/renderer-lit-html';
-import Ajv from 'ajv';
 
 import themes from '@bolt/global/styles/06-themes/_themes.all.scss';
 import styles from './list.scss';
 import schema from '../list.schema.yml';
 
-const ajv = new Ajv({ useDefaults: 'shared' });
-
 let cx = classNames.bind(styles);
 
 // define which specific props to provide to children that subscribe
@@ -51,30 +48,10 @@ class BoltList extends withContext(withLitHtml) {
   constructor(self) {
     self = super(self);
     self.useShadow = hasNativeShadowDomSupport;
-    self.validate = ajv.compile(schema);
+    this.schema = schema;
     return self;
   }
 
-  validateProps(propData) {
-    const validatedData = propData;
-
-    // remove default strings in prop data so schema validation can fill in the default
-    for (let property in validatedData) {
-      if (validatedData[property] === '') {
-        delete validatedData[property];
-      }
-    }
-
-    let isValid = this.validate(validatedData);
-
-    // bark at any schema validation errors
-    if (!isValid) {
-      // console.log(this.validate.errors);
-    }
-
-    return validatedData;
-  }
-
   render() {
     const {
       tag,

diff --git a/packages/core-v3.x/package.json b/packages/core-v3.x/package.json
@@ -18,7 +18,6 @@
     "@webcomponents/shadydom": "^1.6.1",
     "@webcomponents/template": "^1.4.1",
     "@webcomponents/webcomponentsjs": "^2.3.0",
-    "ajv": "^6.10.1",
     "camelcase": "^5.3.1",
     "change-case": "^3.1.0",
     "classnames": "^2.2.6",
@@ -30,6 +29,7 @@
     "es6-promise": "^4.2.8",
     "get-own-property-symbols": "^0.9.3",
     "html-element": "^2.3.0",
+    "jsonschema": "^1.2.6",
     "lit-element": "^2.2.0",
     "lit-html": "^1.1.2",
     "lodash.merge": "^4.6.2",

diff --git a/packages/core-v3.x/renderers/bolt-base.js b/packages/core-v3.x/renderers/bolt-base.js
@@ -1,9 +1,10 @@
-import Ajv from 'ajv';
-import { props } from 'skatejs';
 import { withLifecycle } from 'skatejs/dist/esnext/with-lifecycle.js';
 import { withUpdate } from 'skatejs/dist/esnext/with-update.js';
 import { withRenderer } from 'skatejs/dist/esnext/with-renderer.js';
 import camelcase from 'camelcase';
+import { Validator } from 'jsonschema';
+const v = new Validator();
+
 import {
   shouldUseShadowDom,
   hasNativeShadowDomSupport,
@@ -23,6 +24,8 @@ export function shadow(elem) {
   );
 }
 
+const formattedSchemas = [];
+
 export const withComponent = (Base = HTMLElement) =>
   withLifecycle(withUpdate(withRenderer(Base)));
 
@@ -88,8 +91,11 @@ export class BoltBase extends withComponent(HTMLElement) {
   }
 
   validateProps(propData) {
-    var validatedData = propData;
-    const ajv = new Ajv({ useDefaults: 'shared', coerceTypes: true });
+    if (!this.schema) {
+      return propData;
+    }
+
+    const validatedData = propData;
 
     // remove default strings in prop data so schema validation can fill in the default
     for (let property in validatedData) {
@@ -98,29 +104,41 @@ export class BoltBase extends withComponent(HTMLElement) {
       }
     }
 
-    // Skip this if formatted schema data is already stored
-    if (this.schema && !this.formattedSchema) {
-      this.formattedSchema = {};
-      Object.assign(this.formattedSchema, this.schema);
-      Object.keys(this.formattedSchema.properties).map(key => {
-        this.formattedSchema.properties = renameKey(
-          key,
-          camelcase(key),
-          this.formattedSchema.properties,
-        );
-      });
-    }
+    this.formattedSchema = this.schema;
 
-    if (this.formattedSchema) {
-      let isValid = ajv.validate(this.formattedSchema, validatedData);
+    Object.keys(this.formattedSchema.properties).map(key => {
+      this.formattedSchema.properties = renameKey(
+        key,
+        camelcase(key),
+        this.formattedSchema.properties,
+      );
+    });
 
-      // bark at any schema validation errors
-      if (!isValid) {
-        console.log(ajv.errors);
-      }
+    const schemaDefaults = Object.keys(this.formattedSchema.properties).reduce(
+      (schemaProperties, propertyName) => {
+        if (this.formattedSchema.properties[propertyName].default) {
+          schemaProperties[propertyName] = this.formattedSchema.properties[
+            propertyName
+          ].default;
+        }
+        return schemaProperties;
+      },
+      {},
+    );
+
+    const propsWithDefaultData = Object.assign({}, schemaDefaults, propData);
+
+    const validationResult = v.validate(
+      propsWithDefaultData,
+      this.formattedSchema,
+    );
+
+    // bark at any schema validation errors
+    if (!validationResult.valid) {
+      console.log(validationResult);
     }
 
-    return validatedData;
+    return validationResult.instance;
   }
 
   /**