@central-design-system/components 2.12.0 → 2.13.0-beta.2

package/dist/types/CdsButton.ts

@@ -12,6 +12,8 @@ export default class CdsButton extends Vue {
 
   @Prop({ type: Boolean, default: false }) public disabled?: boolean;
 
+  @Prop({ type: Boolean, default: false }) public inverse?: boolean;
+
   @Prop({ type: Boolean, default: false }) public iconOnly?: boolean;
 
   @Prop({ type: Boolean, default: false }) public iconAfter?: boolean;

package/dist/types/CdsFooter.ts

@@ -0,0 +1,17 @@
+import { Component, Vue, Prop } from 'vue-property-decorator';
+import { PropType } from 'vue';
+import { CdsLinkItem } from '../../CdsLink/types/CdsLink';
+
+export type CdsFooterItems = {
+  title: string;
+  links: CdsLinkItem[];
+}
+
+export type CdsFooterAppearance = 'primary' | 'secondary' | 'inverse';
+
+@Component('CdsPromoFooter')
+export default class CdsPromoFooter extends Vue {
+  @Prop({ type: Array as PropType<CdsFooterItems[]>, required: true }) items: CdsFooterItems[];
+
+  @Prop({ type: String as PropType<CdsFooterAppearance>, required: false, default: 'primary' }) appearance?: CdsFooterAppearance;
+}

package/dist/types/CdsFooterService.ts

@@ -0,0 +1,16 @@
+import { Component, Vue, Prop } from 'vue-property-decorator';
+import { PropType } from 'vue';
+import { CdsLinkItem } from '../../CdsLink/types/CdsLink';
+
+export type CdsFooterAppearance = 'primary' | 'secondary';
+
+export type CdsFooterAlign = 'start' | 'center' | 'end' | 'between';
+
+@Component('CdsFooter')
+export default class CdsFooter extends Vue {
+  @Prop({ type: Array as PropType<CdsLinkItem[]>, required: true }) items: CdsLinkItem[];
+
+  @Prop({ type: String as PropType<CdsFooterAppearance>, required: false, default: 'primary' }) appearance?: CdsFooterAppearance;
+
+  @Prop({ type: String as PropType<CdsFooterAlign>, required: false, default: 'start' }) align?: CdsFooterAlign;
+}

package/dist/types/CdsHeader.ts

@@ -0,0 +1,19 @@
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { PropType } from 'vue';
+import { CdsLinkItem } from '../../CdsLink/types/CdsLink';
+
+export type HeaderAppearance = 'primary' | 'inverse' | 'transparent';
+export type HeaderAlign = 'start' | 'center' | 'end';
+export type HeaderNavItems = CdsLinkItem & {
+  active?: boolean;
+  children: HeaderNavItems[];
+}
+
+@Component('CdsHeader')
+export default class CdsHeader extends Vue {
+  @Prop({ type: String as PropType<HeaderAppearance>, default: 'primary' }) public appearance?: string;
+
+  @Prop({ type: String as PropType<HeaderAlign>, default: 'start' }) public align?: string;
+
+  @Prop({ type: Array as PropType<HeaderNavItems[]>, default: [] }) public navItems?: HeaderNavItems[];
+}

package/dist/types/CdsHeaderService.ts

@@ -0,0 +1,4 @@
+import { Component, Vue } from "vue-property-decorator";
+
+@Component('CdsHeaderService')
+export default class CdsHeaderService extends Vue {}

package/dist/types/CdsLink.ts

@@ -1,5 +1,13 @@
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
+export type CdsLinkItem = {
+  to: string;
+  text: string;
+  disable?: boolean;
+  useRouter?: boolean;
+  blank?: boolean;
+}
+
 @Component('CdsLink')
 export default class CdsLink extends Vue {
   @Prop({ type: String, default: '' }) public text?: string;

package/dist/utils/convertRemToPx.js

@@ -0,0 +1,9 @@
+const convertRemToPixels = (rem) => {
+  if (rem.includes('rem')) {
+    rem = rem.replace('rem', '');
+  }
+
+  return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+};
+
+export default convertRemToPixels;

package/dist/utils/index.js

@@ -1 +1 @@
-import validationProps from"./validationProps";import suffixPropName from"./suffixPropName";import isCorrectTag from"./isCorrectTag";import memoize from"./memoize";export{validationProps,suffixPropName,isCorrectTag,memoize};
+import validationProps from"./validationProps";import suffixPropName from"./suffixPropName";import isCorrectTag from"./isCorrectTag";import memoize from"./memoize";import convertRemToPx from"./convertRemToPx";export{validationProps,suffixPropName,isCorrectTag,memoize,convertRemToPx};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@central-design-system/components",
-  "version": "2.12.0",
+  "version": "2.13.0-beta.2",
   "license": "ISC",
   "contributors": [
     {
@@ -31,57 +31,57 @@
     "postinstall": "node build/utils/postInstall.js"
   },
   "dependencies": {
-    "change-case": "^3.1.0",
-    "flatpickr": "^4.6.9",
-    "v-runtime-template": "^1.10.0",
-    "vanilla-masker": "^1.2.0",
-    "vue": "^2.6.12",
+    "change-case": "3.1.0",
+    "flatpickr": "4.6.9",
+    "v-runtime-template": "1.10.0",
+    "vanilla-masker": "1.2.0",
+    "vue": "2.6.14",
     "vue-upload-component": "git+https://github.com/b2bcenter/vue-upload-component#vue2"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@vue/babel-preset-app": "^4.5.10",
+    "@babel/core": "7.16.0",
+    "@vue/babel-preset-app": "4.5.15",
     "@vue/server-test-utils": "1.0.0-beta.29",
     "@vue/test-utils": "1.2.0",
-    "autoprefixer": "^9.6.4",
+    "autoprefixer": "9.6.4",
     "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "^24.8.0",
-    "babel-loader": "^8.2.2",
-    "chalk": "^4.1.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^7.0.0",
-    "core-js": "^3.19.3",
-    "cross-env": "^5.2.0",
-    "css-loader": "^5.0.1",
-    "css-minimizer-webpack-plugin": "^1.2.0",
-    "cssnano": "^4.1.10",
-    "expect": "^24.7.1",
-    "flush-promises": "^1.0.2",
-    "html-webpack-plugin": "^5.0.0-beta.5",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^24.8.0",
-    "jest-css-modules": "^2.1.0",
-    "jest-fetch-mock": "^2.1.2",
-    "jest-serializer-vue": "^2.0.2",
-    "jest-transform-stub": "^2.0.0",
-    "mini-css-extract-plugin": "^2.5.3",
-    "node-sass": "^6.0.1",
-    "postcss-loader": "^3.0.0",
-    "sass-loader": "^10.1.0",
-    "sass-rem": "^3.0.0",
-    "sinon": "^7.3.2",
-    "style-loader": "^1.0.0",
-    "terser-webpack-plugin": "^5.1.1",
-    "vue-jest": "^3.0.4",
-    "vue-loader": "^15.9.6",
-    "vue-property-decorator": "^9.1.2",
-    "vue-style-loader": "^4.1.2",
-    "vue-template-compiler": "^2.6.12",
-    "webpack": "^5.15.0",
-    "webpack-bundle-analyzer": "^4.3.0",
-    "webpack-cli": "^4.3.1",
-    "webpack-merge": "^5.7.3",
-    "webpackbar": "^5.0.0-3"
+    "babel-jest": "24.9.0",
+    "babel-loader": "8.2.3",
+    "chalk": "4.1.0",
+    "clean-webpack-plugin": "3.0.0",
+    "copy-webpack-plugin": "7.0.0",
+    "core-js": "3.19.3",
+    "cross-env": "5.2.1",
+    "css-loader": "5.2.7",
+    "css-minimizer-webpack-plugin": "1.3.0",
+    "cssnano": "4.1.11",
+    "expect": "24.9.0",
+    "flush-promises": "1.0.2",
+    "html-webpack-plugin": "5.5.0",
+    "identity-obj-proxy": "3.0.0",
+    "jest": "24.9.0",
+    "jest-css-modules": "2.1.0",
+    "jest-fetch-mock": "2.1.2",
+    "jest-serializer-vue": "2.0.2",
+    "jest-transform-stub": "2.0.0",
+    "mini-css-extract-plugin": "2.5.3",
+    "node-sass": "6.0.1",
+    "postcss-loader": "3.0.0",
+    "sass-loader": "10.2.0",
+    "sass-rem": "3.0.0",
+    "sinon": "7.5.0",
+    "style-loader": "1.3.0",
+    "terser-webpack-plugin": "5.2.1",
+    "vue-jest": "3.0.7",
+    "vue-loader": "15.9.8",
+    "vue-property-decorator": "9.1.2",
+    "vue-style-loader": "4.1.3",
+    "vue-template-compiler": "2.6.14",
+    "webpack": "5.65.0",
+    "webpack-bundle-analyzer": "4.5.0",
+    "webpack-cli": "4.9.1",
+    "webpack-merge": "5.8.0",
+    "webpackbar": "5.0.2"
   },
   "browserslist": [
     "last 2 version",