@designcrowd/fe-shared-lib 1.6.10 → 1.7.0

package/src/experiences/helpers/hex-diff.js

@@ -1,116 +1,116 @@
-/* eslint-disable no-param-reassign */
-/* eslint-disable no-restricted-properties */
-/* eslint-disable prefer-spread */
-/* eslint-disable no-use-before-define */
-/**
- * Mostly copied from
- * https://github.com/Vibrant-Colors/node-vibrant/blob/8843d0094834d4685d1bff3abd77c6dd2daff82c/src/util.ts#L153
- */
-const rgbDiff = (rgb1, rgb2) => {
-  const lab1 = rgbToCIELab.apply(undefined, rgb1);
-  const lab2 = rgbToCIELab.apply(undefined, rgb2);
-  return deltaE94(lab1, lab2);
-};
-
-const hexToRgb = (hex) => {
-  const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return m === null ? null : [m[1], m[2], m[3]].map((s) => parseInt(s, 16));
-};
-
-const rgbToCIELab = (r, g, b) => {
-  const [x, y, z] = rgbToXyz(r, g, b);
-  return xyzToCIELab(x, y, z);
-};
-
-const rgbToXyz = (r, g, b) => {
-  r /= 255;
-  g /= 255;
-  b /= 255;
-  r = r > 0.04045 ? ((r + 0.005) / 1.055) ** 2.4 : r / 12.92;
-  g = g > 0.04045 ? ((g + 0.005) / 1.055) ** 2.4 : g / 12.92;
-  b = b > 0.04045 ? ((b + 0.005) / 1.055) ** 2.4 : b / 12.92;
-
-  r *= 100;
-  g *= 100;
-  b *= 100;
-
-  const x = r * 0.4124 + g * 0.3576 + b * 0.1805;
-  const y = r * 0.2126 + g * 0.7152 + b * 0.0722;
-  const z = r * 0.0193 + g * 0.1192 + b * 0.9505;
-
-  return [x, y, z];
-};
-
-const xyzToCIELab = (x, y, z) => {
-  const REF_X = 95.047;
-  const REF_Y = 100;
-  const REF_Z = 108.883;
-
-  x /= REF_X;
-  y /= REF_Y;
-  z /= REF_Z;
-
-  x = x > 0.008856 ? x ** (1 / 3) : 7.787 * x + 16 / 116;
-  y = y > 0.008856 ? y ** (1 / 3) : 7.787 * y + 16 / 116;
-  z = z > 0.008856 ? z ** (1 / 3) : 7.787 * z + 16 / 116;
-
-  const L = 116 * y - 16;
-  const a = 500 * (x - y);
-  const b = 200 * (y - z);
-
-  return [L, a, b];
-};
-
-const deltaE94 = (lab1, lab2) => {
-  const WEIGHT_L = 1;
-  const WEIGHT_C = 1;
-  const WEIGHT_H = 1;
-
-  const [L1, a1, b1] = lab1;
-  const [L2, a2, b2] = lab2;
-  const dL = L1 - L2;
-  const da = a1 - a2;
-  const db = b1 - b2;
-
-  const xC1 = Math.sqrt(a1 * a1 + b1 * b1);
-  const xC2 = Math.sqrt(a2 * a2 + b2 * b2);
-
-  let xDL = L2 - L1;
-  let xDC = xC2 - xC1;
-  const xDE = Math.sqrt(dL * dL + da * da + db * db);
-
-  let xDH =
-    Math.sqrt(xDE) > Math.sqrt(Math.abs(xDL)) + Math.sqrt(Math.abs(xDC))
-      ? Math.sqrt(xDE * xDE - xDL * xDL - xDC * xDC)
-      : 0;
-
-  const xSC = 1 + 0.045 * xC1;
-  const xSH = 1 + 0.015 * xC1;
-
-  xDL /= WEIGHT_L;
-  xDC /= WEIGHT_C * xSC;
-  xDH /= WEIGHT_H * xSH;
-
-  return Math.sqrt(xDL * xDL + xDC * xDC + xDH * xDH);
-};
-
-// eslint-disable-next-line consistent-return
-const getColorDiffStatus = (d) => {
-  if (d <= 1) {
-    return 'Same';
-  }
-  // Colours are more similar than different
-  if (d <= 30) {
-    return 'Similar';
-  }
-  // Colours are more different than similar
-  if (d > 30) {
-    return 'Different';
-  }
-};
-
-export default function hexDiff(hex1, hex2) {
-  const rgb1 = hexToRgb(hex1);
-  const rgb2 = hexToRgb(hex2);
-  return getColorDiffStatus(rgbDiff(rgb1, rgb2));
-}
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-restricted-properties */
+/* eslint-disable prefer-spread */
+/* eslint-disable no-use-before-define */
+/**
+ * Mostly copied from
+ * https://github.com/Vibrant-Colors/node-vibrant/blob/8843d0094834d4685d1bff3abd77c6dd2daff82c/src/util.ts#L153
+ */
+const rgbDiff = (rgb1, rgb2) => {
+  const lab1 = rgbToCIELab.apply(undefined, rgb1);
+  const lab2 = rgbToCIELab.apply(undefined, rgb2);
+  return deltaE94(lab1, lab2);
+};
+
+const hexToRgb = (hex) => {
+  const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return m === null ? null : [m[1], m[2], m[3]].map((s) => parseInt(s, 16));
+};
+
+const rgbToCIELab = (r, g, b) => {
+  const [x, y, z] = rgbToXyz(r, g, b);
+  return xyzToCIELab(x, y, z);
+};
+
+const rgbToXyz = (r, g, b) => {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  r = r > 0.04045 ? ((r + 0.005) / 1.055) ** 2.4 : r / 12.92;
+  g = g > 0.04045 ? ((g + 0.005) / 1.055) ** 2.4 : g / 12.92;
+  b = b > 0.04045 ? ((b + 0.005) / 1.055) ** 2.4 : b / 12.92;
+
+  r *= 100;
+  g *= 100;
+  b *= 100;
+
+  const x = r * 0.4124 + g * 0.3576 + b * 0.1805;
+  const y = r * 0.2126 + g * 0.7152 + b * 0.0722;
+  const z = r * 0.0193 + g * 0.1192 + b * 0.9505;
+
+  return [x, y, z];
+};
+
+const xyzToCIELab = (x, y, z) => {
+  const REF_X = 95.047;
+  const REF_Y = 100;
+  const REF_Z = 108.883;
+
+  x /= REF_X;
+  y /= REF_Y;
+  z /= REF_Z;
+
+  x = x > 0.008856 ? x ** (1 / 3) : 7.787 * x + 16 / 116;
+  y = y > 0.008856 ? y ** (1 / 3) : 7.787 * y + 16 / 116;
+  z = z > 0.008856 ? z ** (1 / 3) : 7.787 * z + 16 / 116;
+
+  const L = 116 * y - 16;
+  const a = 500 * (x - y);
+  const b = 200 * (y - z);
+
+  return [L, a, b];
+};
+
+const deltaE94 = (lab1, lab2) => {
+  const WEIGHT_L = 1;
+  const WEIGHT_C = 1;
+  const WEIGHT_H = 1;
+
+  const [L1, a1, b1] = lab1;
+  const [L2, a2, b2] = lab2;
+  const dL = L1 - L2;
+  const da = a1 - a2;
+  const db = b1 - b2;
+
+  const xC1 = Math.sqrt(a1 * a1 + b1 * b1);
+  const xC2 = Math.sqrt(a2 * a2 + b2 * b2);
+
+  let xDL = L2 - L1;
+  let xDC = xC2 - xC1;
+  const xDE = Math.sqrt(dL * dL + da * da + db * db);
+
+  let xDH =
+    Math.sqrt(xDE) > Math.sqrt(Math.abs(xDL)) + Math.sqrt(Math.abs(xDC))
+      ? Math.sqrt(xDE * xDE - xDL * xDL - xDC * xDC)
+      : 0;
+
+  const xSC = 1 + 0.045 * xC1;
+  const xSH = 1 + 0.015 * xC1;
+
+  xDL /= WEIGHT_L;
+  xDC /= WEIGHT_C * xSC;
+  xDH /= WEIGHT_H * xSH;
+
+  return Math.sqrt(xDL * xDL + xDC * xDC + xDH * xDH);
+};
+
+// eslint-disable-next-line consistent-return
+const getColorDiffStatus = (d) => {
+  if (d <= 1) {
+    return 'Same';
+  }
+  // Colours are more similar than different
+  if (d <= 30) {
+    return 'Similar';
+  }
+  // Colours are more different than similar
+  if (d > 30) {
+    return 'Different';
+  }
+};
+
+export default function hexDiff(hex1, hex2) {
+  const rgb1 = hexToRgb(hex1);
+  const rgb2 = hexToRgb(hex2);
+  return getColorDiffStatus(rgbDiff(rgb1, rgb2));
+}

package/src/experiences/helpers/tracking.js

@@ -1,5 +1,5 @@
-export default function trackEvent(obj) {
-  if (!obj || !window) return;
-  window.dataLayer = window.dataLayer || [];
-  window.dataLayer.push(obj);
-}
+export default function trackEvent(obj) {
+  if (!obj || !window) return;
+  window.dataLayer = window.dataLayer || [];
+  window.dataLayer.push(obj);
+}

package/src/experiences/mixins/mediaQueryMixin.js

@@ -1,31 +1,31 @@
-// copied from BrandCrowd.Nuxt/src/client/mixins/mediaQueryMixin.js
-
-export const BREAKPOINTS = {
-  SMALL: 640,
-  MEDIUM: 768,
-  LARGE: 1024,
-};
-
-export default {
-  data() {
-    return {
-      isMobile: false,
-      isLargerThanMobile: false,
-      isDesktop: false,
-    };
-  },
-  mounted() {
-    this.checkWindowWidth();
-    window.addEventListener('resize', this.checkWindowWidth);
-  },
-  unmounted() {
-    window.removeEventListener('resize', this.checkWindowWidth);
-  },
-  methods: {
-    checkWindowWidth() {
-      this.isMobile = window.innerWidth < BREAKPOINTS.SMALL;
-      this.isLargerThanMobile = window.innerWidth > BREAKPOINTS.SMALL;
-      this.isDesktop = window.innerWidth >= BREAKPOINTS.LARGE;
-    },
-  },
-};
+// copied from BrandCrowd.Nuxt/src/client/mixins/mediaQueryMixin.js
+
+export const BREAKPOINTS = {
+  SMALL: 640,
+  MEDIUM: 768,
+  LARGE: 1024,
+};
+
+export default {
+  data() {
+    return {
+      isMobile: false,
+      isLargerThanMobile: false,
+      isDesktop: false,
+    };
+  },
+  mounted() {
+    this.checkWindowWidth();
+    window.addEventListener('resize', this.checkWindowWidth);
+  },
+  unmounted() {
+    window.removeEventListener('resize', this.checkWindowWidth);
+  },
+  methods: {
+    checkWindowWidth() {
+      this.isMobile = window.innerWidth < BREAKPOINTS.SMALL;
+      this.isLargerThanMobile = window.innerWidth > BREAKPOINTS.SMALL;
+      this.isDesktop = window.innerWidth >= BREAKPOINTS.LARGE;
+    },
+  },
+};

package/src/experiences/mixins/themeMixin.js

@@ -1,22 +1,22 @@
-export default {
-  props: {
-    theme: {
-      type: String,
-      required: false,
-      default: 'brandCrowd',
-    },
-    availableThemes: {
-      type: Object,
-      required: false,
-      default: undefined,
-    },
-  },
-  computed: {
-    isPartnerTheme() {
-      if (this.availableThemes && this.theme) {
-        return this.theme.toLowerCase() !== this.availableThemes.BRAND_CROWD.toLowerCase();
-      }
-      return false;
-    },
-  },
-};
+export default {
+  props: {
+    theme: {
+      type: String,
+      required: false,
+      default: 'brandCrowd',
+    },
+    availableThemes: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+  },
+  computed: {
+    isPartnerTheme() {
+      if (this.availableThemes && this.theme) {
+        return this.theme.toLowerCase() !== this.availableThemes.BRAND_CROWD.toLowerCase();
+      }
+      return false;
+    },
+  },
+};

package/src/experiences/models/websiteContextualModel.ts

@@ -1,11 +1,11 @@
-export const WEBSITE_UPGRADE_CONTEXT_TYPES = {
-  ContactForm: 'ContactForm',
-  Videos: 'Videos',
-  Maps: 'Maps',
-  AddPage: 'AddPage',
-  Publish: 'Publish',
-  RemoveWatermark: 'RemoveWatermark',
-  GoogleAd: 'GoogleAd',
-} as const;
-
-export type WebsiteContextUpgradeType = keyof typeof WEBSITE_UPGRADE_CONTEXT_TYPES;
+export const WEBSITE_UPGRADE_CONTEXT_TYPES = {
+  ContactForm: 'ContactForm',
+  Videos: 'Videos',
+  Maps: 'Maps',
+  AddPage: 'AddPage',
+  Publish: 'Publish',
+  RemoveWatermark: 'RemoveWatermark',
+  GoogleAd: 'GoogleAd',
+} as const;
+
+export type WebsiteContextUpgradeType = keyof typeof WEBSITE_UPGRADE_CONTEXT_TYPES;

package/src/themes/base.js

@@ -1,20 +1,20 @@
-/*
-  Theme: Base
-  All child themes are extended from this base theme.
-*/
-
-module.exports = {
-  colors: {
-    black: "#000000",
-    current: "currentColor",
-    transparent: "transparent",
-    white: "#FFFFFF",
-    "social-facebook": "#1877f2",
-    "social-twitter": "#1DA1F2",
-    "social-google": "#EA4335",
-    "social-linkedin": "#0077B5",
-    "social-youtube": "#FF0000",
-    "social-pinterest": "#BD081C",
-    "social-instagram": "#BC2A8D",
-  },
-};
+/*
+  Theme: Base
+  All child themes are extended from this base theme.
+*/
+
+module.exports = {
+  colors: {
+    black: "#000000",
+    current: "currentColor",
+    transparent: "transparent",
+    white: "#FFFFFF",
+    "social-facebook": "#1877f2",
+    "social-twitter": "#1DA1F2",
+    "social-google": "#EA4335",
+    "social-linkedin": "#0077B5",
+    "social-youtube": "#FF0000",
+    "social-pinterest": "#BD081C",
+    "social-instagram": "#BC2A8D",
+  },
+};

package/src/themes/bc.js

@@ -1,95 +1,95 @@
-/*
-  Theme: Brand Crowd
-  Docs: https://docs.google.com/spreadsheets/d/1yCMFAAlecLQIdOhpwPvg2lvPv2vPo6o42sdAj_XzGiw/edit#gid=0
-*/
-
-const baseTheme = require("./base");
-const _ = require("lodash");
-
-module.exports = _.merge({}, baseTheme, {
-  fontFamily: {
-    sans: "Lato, Helvetica, sans-serif",
-  },
-  colors: {
-    primary: {
-      100: "#FCD1D9",
-      200: "#FAA4B2",
-      300: "#F7768C",
-      400: "#F54965",
-      500: "#F21B3F",
-      600: "#C21632",
-      700: "#911026",
-      800: "#610B19",
-    },
-    secondary: {
-      100: "#DEDEDE",
-      200: "#BDBDBD",
-      300: "#9B9B9B ",
-      400: "#7A7A7A",
-      500: "#595959",
-      600: "#474747",
-      700: "#353535",
-      800: "#242424",
-    },
-    success: {
-      100: "#D3EECF",
-      200: "#A7DC9F",
-      300: "#66C258 ",
-      400: "#50B940",
-      500: "#24A810",
-      600: "#1D860D",
-      700: "#16650A",
-      800: "#0E4306",
-    },
-    info: {
-      100: "#CCEAF7",
-      200: "#99D5EF",
-      300: "#66C1E7",
-      400: "#33ACDF",
-      500: "#0097D7",
-      600: "#0079AC",
-      700: "#005B81",
-      800: "#003C56",
-    },
-    warning: {
-      100: "#FDEFD5",
-      200: "#FADFAA",
-      300: "#F8CF80 ",
-      400: "#F5BF55",
-      500: "#F3AF2B",
-      600: "#C28C22",
-      700: "#92691A",
-      800: "#614611",
-    },
-    error: {
-      100: "#FCD1D9",
-      200: "#FAA4B2",
-      300: "#F7768C",
-      400: "#F54965",
-      500: "#F21B3F",
-      600: "#C21632",
-      700: "#911026",
-      800: "#610B19",
-    },
-    grayscale: {
-      100: "#FFFFFF",
-      200: "#F4F4F4",
-      300: "#EFEFEF",
-      400: "#E6E6E6",
-      500: "#D0D0D0",
-      600: "#5E5E5E",
-      700: "#2B2B2B",
-      800: "#111517",
-    },
-    discount: {
-      100: "#D3EECF",
-      200: "#A7DC9F",
-      300: "#66C258 ",
-      400: "#50B940",
-      500: "#24A810",
-      600: "#1D860D",
-      700: "#16650A",
-      800: "#0E4306",
-    },
-  },
-});
+/*
+  Theme: Brand Crowd
+  Docs: https://docs.google.com/spreadsheets/d/1yCMFAAlecLQIdOhpwPvg2lvPv2vPo6o42sdAj_XzGiw/edit#gid=0
+*/
+
+const baseTheme = require("./base");
+const _ = require("lodash");
+
+module.exports = _.merge({}, baseTheme, {
+  fontFamily: {
+    sans: "Lato, Helvetica, sans-serif",
+  },
+  colors: {
+    primary: {
+      100: "#FCD1D9",
+      200: "#FAA4B2",
+      300: "#F7768C",
+      400: "#F54965",
+      500: "#F21B3F",
+      600: "#C21632",
+      700: "#911026",
+      800: "#610B19",
+    },
+    secondary: {
+      100: "#DEDEDE",
+      200: "#BDBDBD",
+      300: "#9B9B9B ",
+      400: "#7A7A7A",
+      500: "#595959",
+      600: "#474747",
+      700: "#353535",
+      800: "#242424",
+    },
+    success: {
+      100: "#D3EECF",
+      200: "#A7DC9F",
+      300: "#66C258 ",
+      400: "#50B940",
+      500: "#24A810",
+      600: "#1D860D",
+      700: "#16650A",
+      800: "#0E4306",
+    },
+    info: {
+      100: "#CCEAF7",
+      200: "#99D5EF",
+      300: "#66C1E7",
+      400: "#33ACDF",
+      500: "#0097D7",
+      600: "#0079AC",
+      700: "#005B81",
+      800: "#003C56",
+    },
+    warning: {
+      100: "#FDEFD5",
+      200: "#FADFAA",
+      300: "#F8CF80 ",
+      400: "#F5BF55",
+      500: "#F3AF2B",
+      600: "#C28C22",
+      700: "#92691A",
+      800: "#614611",
+    },
+    error: {
+      100: "#FCD1D9",
+      200: "#FAA4B2",
+      300: "#F7768C",
+      400: "#F54965",
+      500: "#F21B3F",
+      600: "#C21632",
+      700: "#911026",
+      800: "#610B19",
+    },
+    grayscale: {
+      100: "#FFFFFF",
+      200: "#F4F4F4",
+      300: "#EFEFEF",
+      400: "#E6E6E6",
+      500: "#D0D0D0",
+      600: "#5E5E5E",
+      700: "#2B2B2B",
+      800: "#111517",
+    },
+    discount: {
+      100: "#D3EECF",
+      200: "#A7DC9F",
+      300: "#66C258 ",
+      400: "#50B940",
+      500: "#24A810",
+      600: "#1D860D",
+      700: "#16650A",
+      800: "#0E4306",
+    },
+  },
+});

package/src/themes/bp.js

@@ -1,21 +1,21 @@
-/*
-  Theme: Brand Page
-*/
-
-const baseTheme = require("./base");
-const _ = require("lodash");
-
-module.exports = _.merge({}, baseTheme, {
-  colors: {
-    grayscale: {
-      100: "#FFFFFF",
-      200: "#F4F4F4",
-      300: "#EFEFEF",
-      400: "#E6E6E6",
-      500: "#D0D0D0",
-      600: "#5E5E5E",
-      700: "#2B2B2B",
-      800: "#111517",
-    },
-  },
-});
+/*
+  Theme: Brand Page
+*/
+
+const baseTheme = require("./base");
+const _ = require("lodash");
+
+module.exports = _.merge({}, baseTheme, {
+  colors: {
+    grayscale: {
+      100: "#FFFFFF",
+      200: "#F4F4F4",
+      300: "#EFEFEF",
+      400: "#E6E6E6",
+      500: "#D0D0D0",
+      600: "#5E5E5E",
+      700: "#2B2B2B",
+      800: "#111517",
+    },
+  },
+});