diginet-core-ui 1.3.78 → 1.3.79

package/styles/color-helper.js

@@ -1,5 +1,4 @@
 /* eslint-disable no-undef */
-
 /**
  * Returns a number whose value is limited to the given range.
  *
@@ -14,48 +13,41 @@ const clamp = (value, min = 0, max = 1) => {
       console.error(`DigiNet-CORE-UI: The value provided ${value} is out of range [${min}, ${max}].`);
     }
   }
-
   return Math.min(Math.max(min, value), max);
 };
+
 /**
  * Converts a color from CSS hex format to CSS rgb format.
  *
  * @param {string} color - Hex color, i.e. #nnn or #nnnnnn
  * @returns {string} A CSS rgb color string
  */
-
-
 export const hexToRgb = color => {
   color = color.substr(1);
   const re = new RegExp(`.{1,${color.length >= 6 ? 2 : 1}}`, 'g');
   let colors = color.match(re);
-
   if (colors && colors[0].length === 1) {
     colors = colors.map(n => n + n);
   }
-
   return colors ? `rgb${colors.length === 4 ? 'a' : ''}(${colors.map((n, index) => {
     return index < 3 ? parseInt(n, 16) : Math.round(parseInt(n, 16) / 255 * 1000) / 1000;
   }).join(', ')})` : '';
 };
-
 const intToHex = int => {
   const hex = int.toString(16);
   return hex.length === 1 ? `0${hex}` : hex;
 };
+
 /**
  * Converts a color from CSS rgb format to CSS hex format.
  *
  * @param {string} color - RGB color, i.e. rgb(n, n, n)
  * @returns {string} A CSS rgb color string, i.e. #nnnnnn
  */
-
-
 export const rgbToHex = color => {
   if (color.indexOf('#') === 0) {
     return color;
   }
-
   const {
     values
   } = decomposeColor(color);
@@ -67,19 +59,16 @@ export const rgbToHex = color => {
  * @param {string} color - RGBA color, i.e. rgba(n, n, n, f)
  * @returns {string} A CSS rgb A color string, i.e. #nnnnnnnn
  */
-
 export const rgbaToHexA = color => {
   let sep = color.indexOf(',') > -1 ? ',' : ' ';
-  color = color.substr(5).split(')')[0].split(sep); // Strip the slash if using space-separated syntax
+  color = color.substr(5).split(')')[0].split(sep);
 
+  // Strip the slash if using space-separated syntax
   if (color.indexOf('/') > -1) color.splice(3, 1);
-
   for (let R in color) {
     let r = color[R];
-
     if (r.indexOf('%') > -1) {
       let p = r.substr(0, r.length - 1) / 100;
-
       if (R < 3) {
         color[R] = Math.round(p * 255);
       } else {
@@ -87,24 +76,23 @@ export const rgbaToHexA = color => {
       }
     }
   }
-
   let r = (+color[0]).toString(16),
-      g = (+color[1]).toString(16),
-      b = (+color[2]).toString(16),
-      a = Math.round(+color[3] * 255).toString(16);
+    g = (+color[1]).toString(16),
+    b = (+color[2]).toString(16),
+    a = Math.round(+color[3] * 255).toString(16);
   if (r.length == 1) r = '0' + r;
   if (g.length == 1) g = '0' + g;
   if (b.length == 1) b = '0' + b;
   if (a.length == 1) a = '0' + a;
   return '#' + r + g + b + a;
 };
+
 /**
  * Converts a color from hsl format to rgb format.
  *
  * @param {string} color - HSL color values
  * @returns {string} rgb color values
  */
-
 export const hslToRgb = color => {
   color = decomposeColor(color);
   const {
@@ -114,22 +102,19 @@ export const hslToRgb = color => {
   const s = values[1] / 100;
   const l = values[2] / 100;
   const a = s * Math.min(l, 1 - l);
-
   const f = (n, k = (n + h / 30) % 12) => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
-
   let type = 'rgb';
   const rgb = [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];
-
   if (color.type === 'hsla') {
     type += 'a';
     rgb.push(values[3]);
   }
-
   return recomposeColor({
     type,
     values: rgb
   });
 };
+
 /**
  * Returns an object with the type and values of a color.
  *
@@ -138,23 +123,18 @@ export const hslToRgb = color => {
  * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
  * @returns {object} - A  color object: {type: string, values: number[]}
  */
-
 export const decomposeColor = color => {
   if (color.type) {
     return color;
   }
-
   if (color.charAt(0) === '#') {
     return decomposeColor(hexToRgb(color));
   }
-
   const marker = color.indexOf('(');
   const type = color.substring(0, marker);
-
   if (['rgb', 'rgba', 'hsl', 'hsla'].indexOf(type) === -1) {
     throw 'DigiNet-CORE-UI: Unsupported `%s` color.\n' + 'We support the following formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla().', color;
   }
-
   let values = color.substring(marker + 1, color.length - 1).split(',');
   values = values.map(value => parseFloat(value));
   return {
@@ -162,6 +142,7 @@ export const decomposeColor = color => {
     values
   };
 };
+
 /**
  * Converts a color object with type and values to a string.
  *
@@ -170,7 +151,6 @@ export const decomposeColor = color => {
  * @param {array} color.values - [n,n,n] or [n,n,n,n]
  * @returns {string} A CSS color string
  */
-
 export const recomposeColor = color => {
   const {
     type
@@ -178,7 +158,6 @@ export const recomposeColor = color => {
   let {
     values
   } = color;
-
   if (type.indexOf('rgb') !== -1) {
     // Only convert the first 3 values to int (i.e. not alpha)
     values = values.map((n, i) => i < 3 ? parseInt(n, 10) : n);
@@ -186,9 +165,9 @@ export const recomposeColor = color => {
     values[1] = `${values[1]}%`;
     values[2] = `${values[2]}%`;
   }
-
   return `${type}(${values.join(', ')})`;
 };
+
 /**
  * Calculates the contrast ratio between two colors.
  *
@@ -198,12 +177,12 @@ export const recomposeColor = color => {
  * @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
  * @returns {number} A contrast ratio value in the range 0 - 21.
  */
-
 export const getContrastRatio = (foreground, background) => {
   const lumA = getLuminance(foreground);
   const lumB = getLuminance(background);
   return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
 };
+
 /**
  * The relative brightness of any point in a color space,
  * normalized to 0 for darkest black and 1 for lightest white.
@@ -213,18 +192,18 @@ export const getContrastRatio = (foreground, background) => {
  * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
  * @returns {number} The relative brightness of the color in the range 0 - 1
  */
-
 export const getLuminance = color => {
   color = decomposeColor(color);
   let rgb = color.type === 'hsl' ? decomposeColor(hslToRgb(color)).values : color.values;
   rgb = rgb.map(val => {
     val /= 255; // normalized
-
     return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4;
-  }); // Truncate at 3 digits
+  });
 
+  // Truncate at 3 digits
   return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
 };
+
 /**
  * Darken or lighten a color, depending on its luminance.
  * Light colors are darkened, dark colors are lightened.
@@ -233,10 +212,10 @@ export const getLuminance = color => {
  * @param {number} coefficient=0.15 - multiplier in the range 0 - 1
  * @returns {string} A CSS color string. Hex input values are returned as rgb
  */
-
 export const emphasize = (color, coefficient = 0.15) => {
   return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
 };
+
 /**
  * Set the absolute transparency of a color.
  * Any existing alpha values are overwritten.
@@ -245,18 +224,16 @@ export const emphasize = (color, coefficient = 0.15) => {
  * @param {number} value - value to set the alpha channel to in the range 0 -1
  * @returns {string} A CSS color string. Hex input values are returned as rgb
  */
-
 export const fade = (color, value) => {
   color = decomposeColor(color);
   value = clamp(value);
-
   if (color.type === 'rgb' || color.type === 'hsl') {
     color.type += 'a';
   }
-
   color.values[3] = value;
   return recomposeColor(color);
 };
+
 /**
  * Darkens a color.
  *
@@ -264,13 +241,11 @@ export const fade = (color, value) => {
  * @param {number} coefficient - multiplier in the range 0 - 1
  * @returns {string} A CSS color string. Hex input values are returned as rgb
  */
-
 export const darken = (color, coefficient) => {
   if (isColorName(color)) color = isColorName(color);
   if (!isColor(color)) return;
   color = decomposeColor(color);
   coefficient = clamp(coefficient);
-
   if (color.type.indexOf('hsl') !== -1) {
     color.values[2] *= 1 - coefficient;
   } else if (color.type.indexOf('rgb') !== -1) {
@@ -278,9 +253,9 @@ export const darken = (color, coefficient) => {
       color.values[i] *= 1 - coefficient;
     }
   }
-
   return recomposeColor(color);
 };
+
 /**
  * Lightens a color.
  *
@@ -288,13 +263,11 @@ export const darken = (color, coefficient) => {
  * @param {number} coefficient - multiplier in the range 0 - 1
  * @returns {string} A CSS color string. Hex input values are returned as rgb
  */
-
 export const lighten = (color, coefficient) => {
   if (isColorName(color)) color = isColorName(color);
   if (!isColor(color)) return;
   color = decomposeColor(color);
   coefficient = clamp(coefficient);
-
   if (color.type.indexOf('hsl') !== -1) {
     color.values[2] += (100 - color.values[2]) * coefficient;
   } else if (color.type.indexOf('rgb') !== -1) {
@@ -302,27 +275,26 @@ export const lighten = (color, coefficient) => {
       color.values[i] += (255 - color.values[i]) * coefficient;
     }
   }
-
   return recomposeColor(color);
 };
+
 /**
  * Validate a color string.
  *
  * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
  * @returns {boolean} is a color
  */
-
 export const isColor = color => {
   const regex = /(^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$|^(rgb|hsl)a\((\d{1,3}%?,\s?){3}(1|0|0?\.\d+)\)$|^(rgb|hsl)\(\d{1,3}%?(,\s?\d{1,3}%?){2}\)$)/gim;
   return regex.test(color);
 };
+
 /**
  * Detect a color string type.
  *
  * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
  * @returns {string | false} color type, string or false
  */
-
 export const detectColor = color => {
   if (color && isColor(color)) {
     if (/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(color)) return 'hex';
@@ -332,35 +304,33 @@ export const detectColor = color => {
     if (/^hsl\(\d{1,3}%?(,\s?\d{1,3}%?){2}\)$/i.test(color)) return 'hsl';
     if (/^hsla\((\d{1,3}%?,\s?){3}(1|0|0?\.\d+)\)$/i.test(color)) return 'hsla';
   }
-
   return null;
 };
+
 /**
  * Validate a color name.
  *
  * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
  * @returns {boolean} is a color
  */
-
 export const isColorName = color => {
   let ctx = document.createElement('canvas').getContext('2d');
   ctx.fillStyle = color;
   return ctx.fillStyle === '#000000' ? false : ctx.fillStyle;
 };
+
 /**
  * Convert from #ffffff to rgba()
  * @param hex color - #ffffff
  * @param {number} alpha - 0.5
  * @returns {string} color - rgba()
  */
-
 export const hexToRGBA = (hex, alpha) => {
   if (isColorName(hex)) hex = isColorName(hex);
   if (!isColor(hex)) return;
   var r = parseInt(hex.slice(1, 3), 16),
-      g = parseInt(hex.slice(3, 5), 16),
-      b = parseInt(hex.slice(5, 7), 16);
-
+    g = parseInt(hex.slice(3, 5), 16),
+    b = parseInt(hex.slice(5, 7), 16);
   if (alpha) {
     return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')';
   } else {

package/styles/colors.js

@@ -1,5 +1,6 @@
-import { hexToRGBA } from './color-helper'; //color brand
+import { hexToRGBA } from './color-helper';
 
+//color brand
 export const white = '#fff';
 export const brand1 = '#E9EAF0';
 export const brand2 = '#D4D6E2';
@@ -31,8 +32,8 @@ export const brand26 = '#E4E5ED';
 export const brand27 = '#E0E1EA';
 export const brand28 = '#DBDDE7';
 export const brand29 = '#D7D8E4';
-export const brand30 = '#D2D4E1'; //// blue
-
+export const brand30 = '#D2D4E1';
+//// blue
 export const blue1 = '#E8F3FF';
 export const blue2 = '#D1E7FF';
 export const blue3 = '#B9DBFF';
@@ -53,7 +54,8 @@ export const blue16 = '#C0DEFF';
 export const blue17 = '#B5D9FF';
 export const blue18 = '#ABD3FF';
 export const blue19 = '#A0CEFF';
-export const blue20 = '#96C8FF'; ///dark
+export const blue20 = '#96C8FF';
+///dark
 
 export const dark1 = '#EAEAEC';
 export const dark2 = '#D4D5D9';
@@ -75,7 +77,9 @@ export const dark16 = '#C5C6CC';
 export const dark17 = '#BCBDC3';
 export const dark18 = '#B2B3BB';
 export const dark19 = '#A8AAB2';
-export const dark20 = '#9FA0AA'; /// Info
+export const dark20 = '#9FA0AA';
+
+/// Info
 
 export const info1 = '#CCF5FF';
 export const info2 = '#99E6FF';
@@ -85,8 +89,9 @@ export const info5 = '#0095FF';
 export const info6 = '#0073DB';
 export const info7 = '#0056B7';
 export const info8 = '#003C93';
-export const info9 = '#002B7A'; // success
+export const info9 = '#002B7A';
 
+// success
 export const success1 = '#C9FCD3';
 export const success2 = '#95F9B2';
 export const success3 = '#5FEE96';
@@ -95,8 +100,9 @@ export const success5 = '#00C875';
 export const success6 = '#00AC75';
 export const success7 = '#009070';
 export const success8 = '#007466';
-export const success9 = '#00605E'; //warning
+export const success9 = '#00605E';
 
+//warning
 export const warning1 = '#FFF4CC';
 export const warning2 = '#FFE799';
 export const warning3 = '#FFD666';
@@ -105,8 +111,9 @@ export const warning5 = '#FFAA00';
 export const warning6 = '#DB8A00';
 export const warning7 = '#B76D00';
 export const warning8 = '#935300';
-export const warning9 = '#7A4000'; //danger
+export const warning9 = '#7A4000';
 
+//danger
 export const danger1 = '#FFDCD8';
 export const danger2 = '#FFB3B1';
 export const danger3 = '#FF8A93';
@@ -115,8 +122,9 @@ export const danger5 = '#FF3D71';
 export const danger6 = '#DB2C6C';
 export const danger7 = '#B71E65';
 export const danger8 = '#93135B';
-export const danger9 = '#7A0B54'; //FORMAL
+export const danger9 = '#7A0B54';
 
+//FORMAL
 export const formal1 = '#CED7F6';
 export const formal2 = '#A0B0EE';
 export const formal3 = '#697ccE';

package/styles/general.js

@@ -5,17 +5,18 @@ import { parseToPixel } from './utils';
 export const rootSpacing = 4;
 export let rootZIndex = 1500;
 export const typographyTypes = ['t1', 't2', 't3', 't4', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p1', 'p2', 'p3', 'title1', 'title2', 'title3', 'title4', 'heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6', 'paragraph1', 'paragraph2', 'paragraph3'];
+
 /**
  * get value spacing with rootZIndex
  * @param number
  * @return {number}
  */
-
 export const zIndex = number => {
   number = Number(number || 0);
   if (isNaN(number)) return rootZIndex;
   return rootZIndex + number;
 };
+
 /**
  * get value spacing with rootSpacing
  * @param {(number|number[])} vl - default 1
@@ -28,11 +29,11 @@ export const getSpacing = (vl = 1) => {
     return vl.flatMap(i => isNaN(i) ? i : i * rootSpacing + 'px').join(' ');
   }
 };
+
 /**
  * replace rootZIndex
  * @param number
  */
-
 export const setZIndex = number => {
   number = Number(number || 0);
   if (!isNaN(number)) rootZIndex = number;
@@ -100,6 +101,9 @@ export const borderRadius4px = css`
 export const borderRadius50 = css`
     border-radius: 50%;
 `;
+export const borderRadius100 = css`
+    border-radius: 100%;
+`;
 export const borderBox = css`
     box-sizing: border-box;
 `;

package/styles/typography.js

@@ -18,13 +18,13 @@ const fontWeightRegular = css`
 `;
 const fontWeightNormal = css`
     font-weight: normal;
-`; // follow rules line-height = fontsize + 4
+`;
 
+// follow rules line-height = fontsize + 4
 const getFontSize = size => css`
     font-size: ${parseToPixel(size)};
     line-height: ${parseToPixel(size + 4)};
 `;
-
 const title1 = css`
     ${fontNormal};
     ${fontWeightBold};
@@ -103,10 +103,10 @@ const helperText = css`
 `;
 export const typography = [[title1, ['title1', 't1']], [title2, ['title2', 't2']], [title3, ['title3', 't3']], [title4, ['title4', 't4']], [heading1, ['heading1', 'h1']], [heading2, ['heading2', 'h2']], [heading3, ['heading3', 'h3']], [heading4, ['heading4', 'h4']], [heading5, ['heading5', 'h5']], [heading6, ['heading6', 'h6']], [paragraph1, ['paragraph1', 'p1']], [paragraph2, ['paragraph2', 'p2']], [paragraph3, ['paragraph3', 'p3']], [uppercase, ['uppercase']], [label, ['label']], [helperText, ['helperText']]].reduce((obj, [value, keys]) => {
   for (const key of keys) {
-    obj = { ...obj,
+    obj = {
+      ...obj,
       [key]: value
     };
   }
-
   return obj;
 }, {});

package/styles/utils.js

@@ -1,22 +1,22 @@
 import { color as colors } from './colors';
+
 /**
  * Parse to pixel
  *
  * @param {number} vl
  * @returns {string}
  */
-
 export const parseToPixel = vl => {
   if (!vl) return '1px';
   return typeof vl === 'string' ? vl : `${vl}px`;
 };
+
 /**
  * Get color from CORE colors
  *
  * @param {string} cl
  * @returns {string}
  */
-
 export const getColor = cl => {
   return colors[cl] || cl;
 };

package/theme/createBreakpoints.js

@@ -1,22 +1,22 @@
 // Sorted ASC by size. That's important.
 // It can't be configured as it's used statically for propTypes.
 export const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
-
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
     val: values[key]
-  })) || []; // Sort in ascending order
-
+  })) || [];
+  // Sort in ascending order
   breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
   return breakpointsAsArray.reduce((acc, obj) => {
-    return { ...acc,
+    return {
+      ...acc,
       [obj.key]: obj.val
     };
   }, {});
-}; // Keep in mind that @media is inclusive by the CSS specification.
-
+};
 
+// Keep in mind that @media is inclusive by the CSS specification.
 const createBreakpoints = breakpoints => {
   const {
     // The breakpoint **start** at this value.
@@ -31,53 +31,43 @@ const createBreakpoints = breakpoints => {
       lg: 1200,
       // large
       xl: 1536 // extra-large
-
     },
+
     unit = 'px',
     step = 5,
     ...other
   } = breakpoints;
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
-
   const up = (key, removeMedia = false) => {
     const value = typeof values[key] === 'number' ? values[key] : key;
     return `${removeMedia ? '' : '@media '}(min-width:${value}${unit})`;
   };
-
   const down = (key, removeMedia = false) => {
     const value = typeof values[key] === 'number' ? values[key] : key;
     return `${removeMedia ? '' : '@media '}(max-width:${value - step / 100}${unit})`;
   };
-
   const between = (start, end, removeMedia = false) => {
     const endIndex = keys.indexOf(end);
     return `${removeMedia ? '' : '@media '}(min-width:${typeof values[start] === 'number' ? values[start] : start}${unit}) and ` + `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100}${unit})`;
   };
-
   const only = (key, removeMedia = false) => {
     if (keys.indexOf(key) + 1 < keys.length) {
       return between(key, keys[keys.indexOf(key) + 1], removeMedia);
     }
-
     return up(key, removeMedia);
   };
-
   const not = (key, removeMedia = false) => {
     // handle first and last key separately, for better readability
     const keyIndex = keys.indexOf(key);
-
     if (keyIndex === 0) {
       return up(keys[1], removeMedia);
     }
-
     if (keyIndex === keys.length - 1) {
       return down(keys[keyIndex], removeMedia);
     }
-
     return between(key, keys[keys.indexOf(key) + 1]).replace('@media', removeMedia ? 'not all and' : '@media not all and');
   };
-
   return {
     keys,
     values: sortedValues,
@@ -90,5 +80,4 @@ const createBreakpoints = breakpoints => {
     ...other
   };
 };
-
 export default createBreakpoints;

package/theme/make-styles.js

@@ -5,17 +5,15 @@ import theme from './settings';
 export const makeStylesCache = createCache({
   key: 'css'
 });
-
 const makeStyles = styles => {
   return (props = {}) => {
     const cache = makeStylesCache;
-
     if (typeof styles === 'function') {
       styles = styles(theme);
     }
-
     const result = Object.keys(styles).reduce((acc, key) => {
-      const _styles = { ...styles[key]
+      const _styles = {
+        ...styles[key]
       };
       Object.keys(_styles).forEach(item => {
         if (typeof _styles[item] === 'function') _styles[item] = _styles[item](props);
@@ -28,5 +26,4 @@ const makeStyles = styles => {
     return result;
   };
 };
-
 export default makeStyles;

package/theme/set-theme.js

@@ -1,9 +1,8 @@
 import Settings from './settings';
-
 const saveNewTheme = (newTheme, ingredient) => {
   if (typeof newTheme === 'object' && typeof ingredient === 'object') {
-    const newThemeArr = Object.keys(newTheme); // const ingredientArr = Object.keys(ingredient);
-
+    const newThemeArr = Object.keys(newTheme);
+    // const ingredientArr = Object.keys(ingredient);
     newThemeArr.forEach(key => {
       if (newTheme[key] && ingredient[key]) {
         if (typeof newTheme[key] === 'object' && typeof ingredient[key] === 'object') {
@@ -17,19 +16,17 @@ const saveNewTheme = (newTheme, ingredient) => {
     });
   }
 };
+
 /**
  * set theme setting as global
  * @param {Object} theme
  */
-
-
 export const setTheme = theme => {
   if (theme && typeof theme === 'object') {
     const themeKeys = Object.keys(theme);
     themeKeys.forEach(key => {
       const newTheme = theme[key];
       const ingredient = Settings[key];
-
       if (newTheme && ingredient) {
         saveNewTheme(newTheme, ingredient);
       }