@rei/cedar 11.0.1 → 13.0.0-alpha.kurt-test

package/dist/lib/src/utils/{propValidator.mjs → propValidator.js}

@@ -4,10 +4,11 @@
  * @param {Array} validArr -- Array of values that are considered "valid"
  * @param {Boolean} responsive -- Enables validation of validArr values with '@sm', '@md', '@lg' added to them
  */
-function validateProp(propValue, validArr, responsive = true) {
-  const strArr = propValue.split(' ');
-  return strArr.every(mod => {
-    const modValid = validArr.some(validStr => {
+function validateProp(propValue, validArr) {
+  var responsive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var strArr = propValue.split(' ');
+  return strArr.every(function (mod) {
+    var modValid = validArr.some(function (validStr) {
       if (responsive) {
         return mod === validStr || mod === "".concat(validStr, "@xs") || mod === "".concat(validStr, "@sm") || mod === "".concat(validStr, "@md") || mod === "".concat(validStr, "@lg");
       }
@@ -23,4 +24,4 @@ function validateProp(propValue, validArr, responsive = true) {
   });
 }
 
-export default validateProp;
+export { validateProp as default };

package/dist/style/cedar-full.css

@@ -2,7 +2,6 @@
 @import url('@rei/cedar/dist/style/cdr-accordion.css');
 @import url('@rei/cedar/dist/style/cdr-accordion-group.css');
 @import url('@rei/cedar/dist/style/cdr-banner.css');
-@import url('@rei/cedar/dist/style/cdr-banner-vars.css');
 @import url('@rei/cedar/dist/style/cdr-breadcrumb.css');
 @import url('@rei/cedar/dist/style/cdr-button.css');
 @import url('@rei/cedar/dist/style/cdr-caption.css');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rei/cedar",
-  "version": "11.0.1",
+  "version": "13.0.0-alpha.kurt-test",
   "description": "REI Cedar Component Library",
   "homepage": "https://rei.github.io/rei-cedar/",
   "license": "MIT",
@@ -13,7 +13,7 @@
   },
   "author": "REI Software Engineering",
   "main": "dist/cedar.js",
-  "module": "dist/lib/src/index.mjs",
+  "module": "dist/lib/src/index.js",
   "style": "dist/style/cedar-full.css",
   "files": [
     "dist"
@@ -24,17 +24,17 @@
   },
   "scripts": {
     "prepublishOnly": "npm-run-all lint build",
-    "dev:build": "npm run build:cssfonts && npm run build:icons && cross-env NODE_ENV=dev rollup -c rollup.config.dev.js",
+    "dev:build": "npm run build:cssfonts && npm run build:icons && npm run build:cjs && cross-env NODE_ENV=dev rollup -c rollup.config.dev.js",
     "dev": "npm run dev:build -- -w",
     "build": "npm-run-all clean build:cssfonts build:icons build:cjs build:esm build:extractcss",
     "build:cjs": "cross-env NODE_ENV=prod BABEL_ENV=cjs rollup -c rollup.config.js",
     "build:esm": "cross-env NODE_ENV=prod BABEL_ENV=esm rollup -c rollup.config.js",
-    "unit": "jest",
+    "unit": "BABEL_ENV=cjs jest",
     "e2e": "cross-env NODE_ENV=test rollup -c rollup.config.dev.js && node test/e2e/runner.js",
     "test": "npm-run-all unit e2e",
     "clean": "rm -rf dist",
-    "lint": "npm-run-all lint:js lint:styles",
-    "lint:js": "eslint --ext .js,.vue,.jsx src",
+    "lint": "# npm-run-all lint:js lint:styles",
+    "lint:js": "eslint --ext .js,.vue src",
     "lint:styles": "stylelint src/**/*.scss",
     "prepush": "npm-run-all lint unit",
     "reference": "backstop reference --configPath=backstop.js",
@@ -48,51 +48,53 @@
     "build:icons": "node src/components/icon/build/generate.js"
   },
   "devDependencies": {
-    "@babel/cli": "^7.14.3",
-    "@babel/core": "^7.14.3",
-    "@babel/plugin-syntax-jsx": "^7.12.13",
-    "@babel/preset-env": "^7.14.2",
+    "@babel/cli": "^7.13.16",
+    "@babel/core": "^7.13.16",
+    "@babel/plugin-transform-runtime": "^7.13.15",
+    "@babel/preset-env": "^7.13.15",
     "@babel/register": "^7.13.16",
+    "@betit/rollup-plugin-rename-extensions": "^0.1.0",
     "@commitlint/cli": "^9.1.2",
     "@commitlint/config-conventional": "^11.0.0",
-    "@rei/cdr-tokens": "^10.0.2",
+    "@rei/cdr-tokens": "^10.0.0",
     "@rei/cedar-icons": "^2.2.0",
     "@rollup/plugin-alias": "^3.1.2",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@vue/babel-preset-jsx": "^1.2.4",
-    "@vue/test-utils": "^1.1.3",
-    "autoprefixer": "^10.0.0",
+    "@vitejs/plugin-vue": "^1.10.1",
+    "@vue/compiler-sfc": "^3.1.2",
+    "@vue/test-utils": "^2.0.0-rc.9",
+    "autoprefixer": "^10.2.5",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
     "babel-plugin-istanbul": "^6.0.0",
-    "backstopjs": "^5.3.7",
-    "chalk": "^4.1.1",
+    "backstopjs": "^5.3.0",
+    "chalk": "^4.1.0",
     "chromedriver": "^94.0.0",
-    "codecov": "^3.8.2",
+    "codecov": "^3.8.1",
+    "concat": "^1.0.3",
+    "core-js-pure": "^3.15.1",
     "cross-env": "^7.0.3",
     "cross-spawn": "^7.0.3",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^7.27.0",
+    "eslint": "^7.24.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-friendly-formatter": "^4.0.1",
     "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-plugin-import": "^2.23.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-tree-shaking": "^1.8.0",
     "eslint-plugin-vue": "^7.9.0",
-    "eslint-plugin-vue-a11y": "0.0.31",
     "fs-extra": "^10.0.0",
-    "glob": "^7.1.7",
-    "husky": "^4.2.5",
+    "glob": "^7.1.6",
+    "husky": "^4.3.8",
     "inquirer": "^8.1.0",
     "jest": "^26.6.3",
-    "jest-css-modules-transform": "^4.2.1",
-    "jsdom": "^16.4.0",
+    "jest-css-modules-transform": "^4.2.0",
+    "jsdom": "^16.5.3",
     "jsdom-global": "^3.0.2",
     "klaw-sync": "^6.0.0",
     "lodash": "^4.17.21",
-    "nightwatch": "^1.7.11",
+    "nightwatch": "^1.6.3",
     "nightwatch-axe": "^0.1.5",
-    "node-cmd": "^4.0.0",
-    "node-sass": "^6.0.1",
+    "node-sass": "^6.0.0",
     "node-sass-package-importer": "^5.3.2",
     "npm-publish-prerelease": "^1.0.2",
     "npm-run-all": "^4.1.5",
@@ -105,8 +107,9 @@
     "postcss-pxtorem": "^6.0.0",
     "postcss-scss": "^3.0.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.50.0",
+    "rollup": "^2.45.2",
     "rollup-plugin-analyzer": "^4.0.0",
+    "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-json": "^4.0.0",
@@ -117,21 +120,30 @@
     "rollup-plugin-serve": "^1.1.0",
     "rollup-plugin-styles": "^3.14.1",
     "rollup-plugin-svg": "^2.0.0",
-    "rollup-plugin-vue": "^5.1.9",
+    "rollup-plugin-vue": "^6.0.0",
+    "sass": "^1.44.0",
     "serve-handler": "^6.1.3",
     "sinon": "^11.1.0",
     "stylelint": "^13.13.1",
     "stylelint-config-recommended-scss": "^4.2.0",
     "stylelint-scss": "^3.19.0",
     "tinycolor2": "^1.4.2",
-    "vue": "^2.6.12",
-    "vue-router": "^3.5.1",
-    "vue-template-compiler": "^2.6.12"
+    "vite": "^2.6.14",
+    "vue": "^3.2.23",
+    "vue-jest": "^5.0.0-alpha.10",
+    "vue-router": "^4.0.10"
   },
   "engines": {
-    "node": ">= 8.0.0",
+    "node": ">= 10.0.0",
     "npm": ">= 6.0.0"
   },
+  "browserslist": [
+    "Chrome >= 77",
+    "Firefox >= 70",
+    "iOS > 11",
+    "Safari >= 9",
+    "Edge >= 17"
+  ],
   "config": {
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
@@ -143,10 +155,13 @@
     }
   },
   "dependencies": {
-    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
-    "clsx": "^1.1.1",
-    "core-js": "^3.14.0",
-    "lodash-es": "^4.17.21",
+    "@babel/runtime": "^7.13.16",
+    "@babel/runtime-corejs3": "^7.13.16",
+    "lodash": "^4.17.21",
     "tabbable": "^4.0.0"
+  },
+  "peerDependencies": {
+    "@vue/compiler-sfc": "^3.2.23",
+    "vue": "^3.2.23"
   }
 }

package/dist/lib/src/components/accordion/CdrAccordion.mjs

@@ -1,198 +0,0 @@
-import clsx from 'clsx';
-import IconCaretDown from '../icon/comps/caret-down.mjs';
-import modifier from '../../mixins/modifier.mjs';
-import modules_b5678f63 from './styles/CdrAccordion.mjs';
-
-var CdrAccordion = {
-  name: 'CdrAccordion',
-  components: {
-    IconCaretDown
-  },
-  mixins: [modifier],
-  inject: {
-    unwrap: {
-      default: {
-        value: false
-      }
-    }
-  },
-  props: {
-    /**
-     * The unique id of an accordion.
-     */
-    id: {
-      type: String,
-      required: true
-    },
-
-    /**
-     * Toggle this value to open/close the accordion.
-     */
-    opened: {
-      type: Boolean,
-      default: false
-    },
-
-    /**
-     * Sets a compact style.
-     */
-    compact: {
-      type: Boolean,
-      default: false
-    },
-
-    /**
-     * Sets a border-aligned style.
-     */
-    borderAligned: {
-      type: Boolean,
-      default: false
-    },
-    // Sets the heading level
-    level: {
-      type: [String, Number],
-      required: true
-    }
-  },
-
-  data() {
-    return {
-      focused: false,
-      maxHeight: this.opened ? 'none' : 0,
-      // set maxHeight to none if initialized as open
-      style: modules_b5678f63
-    };
-  },
-
-  computed: {
-    baseClass() {
-      return 'cdr-accordion';
-    },
-
-    styleClass() {
-      const styles = [];
-
-      if (this.compact) {
-        styles.push(this.modifyClassName(this.baseClass, 'compact'));
-      }
-
-      if (this.borderAligned) {
-        styles.push(this.modifyClassName(this.baseClass, 'border-aligned'));
-      }
-
-      return styles.join(' ');
-    },
-
-    unwrapClass() {
-      return this.unwrap.value ? this.modifyClassName(this.baseClass, 'unwrap') : null;
-    },
-
-    focusedClass() {
-      return this.focused ? this.modifyClassName(this.baseClass, 'focused') : null;
-    },
-
-    isOpenClass() {
-      return this.opened || this.unwrap.value ? 'open' : 'closed';
-    },
-
-    listeners() {
-      return this.unwrap.value ? {} : {
-        click: this.onClick,
-        focus: this.onFocus,
-        blur: this.onBlur
-      };
-    }
-
-  },
-  watch: {
-    opened() {
-      // reset maxHeight before animating
-      this.maxHeight = !this.opened ? "".concat(this.$refs['accordion-content'].clientHeight, "px") : 0; // nextTick is not sufficient here, must wait for CSS to re-paint
-
-      setTimeout(() => {
-        // on next frame, set maxHeight to new value
-        this.maxHeight = this.opened ? "".concat(this.$refs['accordion-content'].clientHeight, "px") : 0;
-        setTimeout(() => {
-          // after animation is complete, remove max-height so content can reflow
-          this.maxHeight = this.opened ? 'none' : 0;
-        }, 350); // cdr-duration-3x + 50ms
-      }, 50);
-    }
-
-  },
-
-  mounted() {
-    /*
-      The intent here is to give maxHeight an actual pixel value when the accordion
-      is initialized as open. This guarantees that the open-to-close animation is
-      nice and smooth the first time they click it.
-    */
-    if (this.opened && this.$refs['accordion-content']) {
-      this.maxHeight = 'none';
-    }
-  },
-
-  methods: {
-    onClick(event) {
-      this.$emit('accordion-toggle', event);
-    },
-
-    onFocus() {
-      this.focused = true;
-    },
-
-    onBlur() {
-      this.focused = false;
-    }
-
-  },
-
-  render() {
-    const h = arguments[0];
-    const Heading = "h".concat(this.level);
-    const HeadingContent = this.unwrap.value ? 'div' : 'button';
-    return h("div", {
-      "class": !this.unwrap.value && clsx(this.style[this.baseClass], this.modifierClass, this.styleClass, this.focusedClass),
-      "attrs": {
-        "id": "".concat(this.id, "-accordion")
-      },
-      "ref": "accordion-container"
-    }, [h(Heading, {
-      "class": this.unwrap.value ? this.style['cdr-accordion__header--unwrapped'] : this.style['cdr-accordion__header']
-    }, [h(HeadingContent, {
-      "class": [!this.unwrap.value && this.style['cdr-accordion__button'], 'js-cdr-accordion-button'],
-      "attrs": {
-        "id": this.id,
-        "aria-expanded": !this.unwrap.value && "".concat(this.opened),
-        "aria-controls": !this.unwrap.value && "".concat(this.id, "-collapsible")
-      },
-      "on": { ...this.listeners
-      }
-    }, [h("span", {
-      "class": this.style['cdr-accordion__label'],
-      "attrs": {
-        "id": "".concat(this.id, "-label")
-      }
-    }, [this.$slots.label]), !this.unwrap.value && h("icon-caret-down", {
-      "class": clsx(this.style['cdr-accordion__icon'], this.isOpenClass),
-      "attrs": {
-        "size": this.compact ? 'small' : null
-      }
-    })])]), h("div", {
-      "class": clsx(this.style['cdr-accordion__content-container'], this.isOpenClass),
-      "style": {
-        maxHeight: this.unwrap.value ? 'none' : this.maxHeight
-      }
-    }, [h("div", {
-      "class": clsx(this.style['cdr-accordion__content'], this.isOpenClass, this.unwrapClass),
-      "attrs": {
-        "aria-hidden": !this.unwrap.value && "".concat(!this.opened),
-        "id": "".concat(this.id, "-collapsible")
-      },
-      "ref": "accordion-content"
-    }, [this.$slots.default])])]);
-  }
-
-};
-
-export default CdrAccordion;

package/dist/lib/src/components/accordion/CdrAccordionGroup.mjs

@@ -1,119 +0,0 @@
-import debounce from 'lodash-es/debounce';
-import clsx from 'clsx';
-import validateProp from '../../utils/propValidator.mjs';
-import breakpoints from '../../mixins/breakpoints.mjs';
-import modules_6e2f679e from './styles/CdrAccordionGroup.mjs';
-
-var CdrAccordionGroup = {
-  name: 'CdrAccordionGroup',
-  mixins: [breakpoints],
-
-  provide() {
-    return {
-      unwrap: this.isUnwrapped
-    };
-  },
-
-  props: {
-    unwrap: {
-      type: [String, Boolean],
-      default: false,
-      validator: value => {
-        if (typeof value === 'string') {
-          return validateProp(value, ['@xs', '@sm', '@md', '@lg'], false);
-        }
-
-        return typeof value === 'boolean';
-      }
-    }
-  },
-
-  data() {
-    return {
-      style: modules_6e2f679e,
-      accordionButtons: [],
-      currentIdx: 0,
-      isUnwrapped: {
-        value: this.unwrap
-      }
-    };
-  },
-
-  computed: {
-    nextIdx() {
-      const idx = this.currentIdx + 1;
-      return idx >= this.accordionButtons.length ? 0 : idx; // if at the last, go to first
-    },
-
-    prevIdx() {
-      const idx = this.currentIdx - 1;
-      return idx <= -1 ? this.accordionButtons.length - 1 : idx; // if at first, go to last
-    }
-
-  },
-
-  mounted() {
-    // get all of the buttons in the group
-    this.accordionButtons = this.$el.querySelectorAll('.js-cdr-accordion-button');
-
-    if (typeof this.unwrap === 'string') {
-      this.isUnwrapped.value = this.unwrap.indexOf(this.getCurrentBreakpoint()) !== -1;
-      window.addEventListener('resize', debounce(() => {
-        this.isUnwrapped.value = this.unwrap.indexOf(this.getCurrentBreakpoint()) !== -1;
-      }, 300));
-    }
-  },
-
-  methods: {
-    handleKeyDown(e) {
-      // something besides the button is focused
-      if (this.currentIdx === -1) return;
-      const {
-        key
-      } = e;
-
-      switch (key) {
-        case 'Home':
-          e.preventDefault();
-          this.accordionButtons[0].focus();
-          break;
-
-        case 'End':
-          e.preventDefault();
-          this.accordionButtons[this.accordionButtons.length - 1].focus();
-          break;
-
-        case 'ArrowDown':
-        case 'Down':
-          e.preventDefault();
-          this.accordionButtons[this.nextIdx].focus();
-          break;
-
-        case 'ArrowUp':
-        case 'Up':
-          e.preventDefault();
-          this.accordionButtons[this.prevIdx].focus();
-          break;
-      }
-    },
-
-    focusin(e) {
-      // find out which, if any, button is focused
-      this.currentIdx = Array.prototype.indexOf.call(this.accordionButtons, e.target);
-    }
-
-  },
-
-  render(h) {
-    return h("ul", {
-      "class": clsx(this.style['cdr-accordion-group']),
-      "on": {
-        "focusin": this.focusin,
-        "keydown": this.handleKeyDown
-      }
-    }, [this.$slots.default.map(vNode => vNode.tag !== undefined ? h('li', vNode, [vNode]) : '')]);
-  }
-
-};
-
-export default CdrAccordionGroup;

package/dist/lib/src/components/accordion/styles/CdrAccordion.mjs

@@ -1,3 +0,0 @@
-var modules_b5678f63 = {"cdr-accordion":"cdr-accordion_11-0-1","cdr-accordion__button":"cdr-accordion__button_11-0-1","cdr-accordion__label":"cdr-accordion__label_11-0-1","cdr-accordion__header":"cdr-accordion__header_11-0-1","cdr-accordion__header--unwrapped":"cdr-accordion__header--unwrapped_11-0-1","cdr-accordion__icon":"cdr-accordion__icon_11-0-1","cdr-accordion__content-container":"cdr-accordion__content-container_11-0-1","cdr-accordion__content":"cdr-accordion__content_11-0-1","cdr-accordion--unwrap":"cdr-accordion--unwrap_11-0-1","cdr-accordion--border-aligned":"cdr-accordion--border-aligned_11-0-1","cdr-accordion--compact":"cdr-accordion--compact_11-0-1","cdr-accordion--focused":"cdr-accordion--focused_11-0-1"};
-
-export default modules_b5678f63;

package/dist/lib/src/components/accordion/styles/CdrAccordionGroup.mjs

@@ -1,3 +0,0 @@
-var modules_6e2f679e = {"cdr-accordion-group":"cdr-accordion-group_11-0-1","cdr-accordion":"cdr-accordion_11-0-1"};
-
-export default modules_6e2f679e;

package/dist/lib/src/components/banner/CdrBanner.mjs

@@ -1,61 +0,0 @@
-import clsx from 'clsx';
-import validateProp from '../../utils/propValidator.mjs';
-import BuildClass from '../../mixins/buildClass.mjs';
-import modules_0306f71a from './styles/CdrBanner.mjs';
-
-var CdrBanner = {
-  name: 'CdrBanner',
-  mixins: [BuildClass],
-  props: {
-    type: {
-      type: String,
-      validator: value => validateProp(value, ['info', 'warning', 'success', 'error', 'default']),
-      default: 'default'
-    }
-  },
-
-  data() {
-    return {
-      style: modules_0306f71a
-    };
-  },
-
-  computed: {
-    baseClass() {
-      return 'cdr-banner';
-    },
-
-    typeClass() {
-      return this.modifyClassName(this.baseClass, this.type);
-    },
-
-    prominenceClass() {
-      return this.$slots['message-body'] ? this.modifyClassName("".concat(this.baseClass, "__wrapper"), 'prominence') : undefined;
-    }
-
-  },
-
-  render() {
-    const h = arguments[0];
-    return h("div", {
-      "class": clsx(this.style[this.baseClass], this.typeClass)
-    }, [h("div", {
-      "class": clsx(this.style['cdr-banner__wrapper'], this.prominenceClass)
-    }, [h("div", {
-      "class": clsx(this.style['cdr-banner__main'])
-    }, [this.$slots['icon-left'] && h("div", {
-      "class": clsx(this.style['cdr-banner__icon-left'])
-    }, [this.$slots['icon-left']]), h("span", {
-      "class": this.style['cdr-banner__message']
-    }, [this.$slots.default]), this.$slots['icon-right'] && h("div", {
-      "class": this.style['cdr-banner__icon-right']
-    }, [this.$slots['icon-right']])]), this.$slots['message-body'] && h("div", {
-      "class": this.style['cdr-banner__message-body']
-    }, [this.$slots['message-body']])]), this.$slots['info-action'] && h("div", {
-      "class": this.style['cdr-banner__info-action']
-    }, [this.$slots['info-action']])]);
-  }
-
-};
-
-export default CdrBanner;

package/dist/lib/src/components/banner/styles/CdrBanner.mjs

@@ -1,3 +0,0 @@
-var modules_0306f71a = {"cdr-banner":"cdr-banner_11-0-1","cdr-banner__wrapper--prominence":"cdr-banner__wrapper--prominence_11-0-1","cdr-banner__main":"cdr-banner__main_11-0-1","cdr-banner__icon-left":"cdr-banner__icon-left_11-0-1","cdr-banner__message":"cdr-banner__message_11-0-1","cdr-banner__message-body":"cdr-banner__message-body_11-0-1","cdr-banner__icon-right":"cdr-banner__icon-right_11-0-1","cdr-banner__info-action":"cdr-banner__info-action_11-0-1","cdr-banner--default":"cdr-banner--default_11-0-1","cdr-banner__wrapper":"cdr-banner__wrapper_11-0-1","cdr-banner--info":"cdr-banner--info_11-0-1","cdr-banner--warning":"cdr-banner--warning_11-0-1","cdr-banner--success":"cdr-banner--success_11-0-1","cdr-banner--error":"cdr-banner--error_11-0-1"};
-
-export default modules_0306f71a;