@duetds/components 4.33.0 → 4.34.1

package/lib/collection/components/{duet-upload → duet-upload-aria-status}/duet-upload-aria-status.js

@@ -9,7 +9,7 @@ export class DuetUploadAriaStatus {
      */
     this.statusMessage = null;
     /**
-     * State() variables
+     * Status labels used in the component
      */
     this.statusMessageLabel = null;
     /**
@@ -33,7 +33,7 @@ export class DuetUploadAriaStatus {
      */
     this.inprogress = undefined;
     /**
-     * Component lifecycle events.
+     * Private functions
      */
     this.replacePlaceHolders = (statusString) => {
       const addFiles = (amount) => {
@@ -103,7 +103,7 @@ export class DuetUploadAriaStatus {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "State() variables"
+        "text": "Status labels used in the component"
       },
       "defaultValue": "null"
     },

package/lib/collection/utils/template-utils.js

@@ -0,0 +1,33 @@
+/*!
+ * Built with Duet Design System
+ */
+/**
+ * Produces a function which uses template strings to do simple interpolation from objects.
+ *
+ * Usage:
+ *    var makeMeKing = generateTemplateFn('${name} is now the king of ${country}!');
+ *
+ *    console.log(makeMeKing({ name: 'Bryan', country: 'Scotland'}));
+ *    // Logs 'Bryan is now the king of Scotland!'
+ */
+export const generateTemplateFn = (function () {
+  const cache = {};
+  function generateTemplate(template) {
+    if (typeof template !== "string") {
+      template = template.outerHTML;
+    }
+    let fn = cache[template];
+    if (!fn) {
+      // Replace ${expressions} (etc) with ${map.expressions}.
+      const sanitized = template
+        .replace(/\$\{([\s]*[^;\s\{]+[\s]*)\}/g, function (_, match) {
+        return `\$\{map.${match.trim()}\}`;
+      })
+        // Afterwards, replace anything that's not ${map.expressions}' (etc) with a blank string.
+        .replace(/(\$\{(?!map\.)[^}]+\})/g, "");
+      fn = Function("map", `return \`${sanitized}\``);
+    }
+    return fn;
+  }
+  return generateTemplate;
+})();

package/lib/collection/utils/token-utils.js

@@ -2,24 +2,77 @@
  * Built with Duet Design System
  */
 import * as tokens from "@duetds/tokens";
-const MATCH_DASH_CASE = /-([a-z])/g;
-function replaceDashCase(g) {
-  return g[1].toUpperCase();
+const allowedThemes = ["turva"];
+const MATCH_CAPITAL_CASE = /[A-Z]/g;
+export function isCamelCase(str) {
+  const camel = MATCH_CAPITAL_CASE.test(str);
+  const barredString = !str.includes("_") && !str.includes("-") && !str.includes(" ");
+  return camel && barredString;
 }
-function convertToCamelCase(string) {
-  return string.replace(MATCH_DASH_CASE, replaceDashCase);
+export function isDashCase(str) {
+  const dash = str.includes("-");
+  const barredString = str.includes(" ") || str.includes("_");
+  const barredStartingString = str.charAt(0) === "-";
+  return dash && !barredString && !barredStartingString;
 }
-export function convertToColorName(name) {
-  if (name.indexOf("color-") === -1 && name.indexOf("-") !== -1) {
-    return convertToCamelCase(`color-${name}`);
+export function capitalize(str = "") {
+  return `${str.charAt(0).toUpperCase()}${str.slice(1)}`;
+}
+function lowerCaseFirst(str = "") {
+  return `${str.charAt(0).toLowerCase()}${str.slice(1)}`;
+}
+export function camelize(str = "") {
+  const arr = str.split("-");
+  //loop through each element of the array and capitalize the first letter.'
+  arr.forEach((string, index) => {
+    arr[index] = capitalize(string);
+  });
+  return arr.join("");
+}
+export function getTheme(theme = "") {
+  if (allowedThemes.includes(theme.toLowerCase())) {
+    return theme.toLowerCase();
+  }
+  return "";
+}
+function hasColor(str = "") {
+  return str.indexOf("Color") === 0 || str.indexOf("color") === 0;
+}
+function addColor(str = "") {
+  if (str && !isDashCase(str) && !hasColor(str)) {
+    return `color${capitalize(str)}`;
+  }
+  return str;
+}
+function addTheme(str, theme) {
+  const hasTheme = getTheme(theme).length;
+  if (hasTheme && str.indexOf(theme) === -1) {
+    return `${str}${capitalize(theme)}`;
+  }
+  return str;
+}
+export function getColorByName(name, theme = "") {
+  if (!name) {
+    return undefined;
   }
-  if (name.indexOf("color") === -1) {
-    return convertToCamelCase(`color${name.charAt(0).toUpperCase()}${name.slice(1)}`);
+  const defaultColor = convertToColorName(name);
+  const themedColor = convertToColorName(name, theme);
+  // lets just try to get the color first to save some cycles
+  let resolvedToken = tokens[themedColor];
+  if (!resolvedToken) {
+    resolvedToken = tokens[defaultColor];
   }
-  return convertToCamelCase(name);
+  return resolvedToken;
 }
-export function getColorByName(name) {
-  if (name) {
-    return tokens[convertToColorName(name)];
+export function convertToColorName(name = "", theme = "") {
+  let colorResolution = name;
+  const dash = isDashCase(name);
+  if (dash) {
+    colorResolution = camelize(colorResolution);
   }
+  colorResolution = addColor(colorResolution);
+  colorResolution = addTheme(colorResolution, theme);
+  // takes care of the case where colorPrimaryDark ends up with ColorPrimaryDark
+  colorResolution = lowerCaseFirst(colorResolution);
+  return colorResolution;
 }