@synerise/ds-color-picker 0.1.7 → 0.2.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.2.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@0.1.8...@synerise/ds-color-picker@0.2.0) (2023-02-03)
+
+
+### Features
+
+* **color-picker:** color change logic separately for each input ([8eefaf0](https://github.com/Synerise/synerise-design/commit/8eefaf0b5028b4b916110d554f06b025bd2cdf45))
+* **color-picker:** color change logic separately for each input ([54283f7](https://github.com/Synerise/synerise-design/commit/54283f7ab79b0da75ef78e26671a8ad675b04f44))
+* **color-picker:** descriptions of methods and names ([45be774](https://github.com/Synerise/synerise-design/commit/45be774dff8bd50b6b201dbfed0a2d1d09a2b1a8))
+
+
+
+
+
+## [0.1.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@0.1.7...@synerise/ds-color-picker@0.1.8) (2023-01-30)
+
+
+### Bug Fixes
+
+* **color-picker:** bugs ([9702cad](https://github.com/Synerise/synerise-design/commit/9702cada1d33b94275681b905cba291684cf7732))
+* **color-picker:** main wrapper for the color-picker component ([6c3ad7e](https://github.com/Synerise/synerise-design/commit/6c3ad7ea4d1b2a4a089a0494126a2f12962588df))
+* **color-picker:** max-width of dropdown overlay ([42d2f60](https://github.com/Synerise/synerise-design/commit/42d2f60a7be3f63d486c8f27029f5602650fe1c7))
+* **color-picker:** utils for colorPicker component ([d78395d](https://github.com/Synerise/synerise-design/commit/d78395d29b366f2a3edf06edc83351865e7bb875))
+
+
+
+
+
 ## [0.1.7](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@0.1.6...@synerise/ds-color-picker@0.1.7) (2023-01-12)
 
 **Note:** Version bump only for package @synerise/ds-color-picker

package/dist/ColorPicker.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ColorPickerProps } from './ColorPicker.types';
-export declare function ColorPicker({ value, onChange, colors, onSaveColors, infix, placeholder, inputProps, maxSavedColors, tooltipText, isShownSavedColors, size, errorText, description, }: ColorPickerProps): JSX.Element;
+declare const ColorPicker: ({ maxWidth, value, onChange, colors, onSaveColors, infix, placeholder, inputProps, maxSavedColors, tooltipText, isShownSavedColors, size, errorText, description, }: ColorPickerProps) => JSX.Element;
 export default ColorPicker;

package/dist/ColorPicker.js

@@ -9,10 +9,14 @@ import * as copy from 'copy-to-clipboard';
 import Tooltip from '@synerise/ds-tooltip';
 import Dropdown from '@synerise/ds-dropdown';
 import { useOnClickOutside } from '@synerise/ds-utils';
+import { isValidHexColor, isValidTextColor, convert3DigitHexTo6Digit, filterAlphanumeric, standardizeColor } from './utils';
 import ColorPickerStyles from './ColorPicker.styles';
-export function ColorPicker(_ref) {
-  var _ref$value = _ref.value,
-      value = _ref$value === void 0 ? '#ffffff' : _ref$value,
+var DEFAULT_MAX_WIDTH_PICKER = 228;
+var DEFAULT_COLOR = '#ffffff';
+
+var ColorPicker = function ColorPicker(_ref) {
+  var maxWidth = _ref.maxWidth,
+      value = _ref.value,
       onChange = _ref.onChange,
       _ref$colors = _ref.colors,
       colors = _ref$colors === void 0 ? [] : _ref$colors,
@@ -33,18 +37,80 @@ export function ColorPicker(_ref) {
       description = _ref.description;
 
   var _React$useState = React.useState(value),
-      color = _React$useState[0],
-      setColor = _React$useState[1];
+      colorTextInput = _React$useState[0],
+      setColorTextInput = _React$useState[1];
 
-  var _React$useState2 = React.useState(-1),
-      pressed = _React$useState2[0],
-      setPressed = _React$useState2[1];
+  var _React$useState2 = React.useState(value),
+      colorHexInput = _React$useState2[0],
+      setColorHexInput = _React$useState2[1];
 
-  var onChangeColor = function onChangeColor(colorValue) {
-    setColor(colorValue);
-    onChange && onChange(colorValue);
-  };
+  var _React$useState3 = React.useState(value),
+      lastValidTextColor = _React$useState3[0],
+      setLastValidTextColor = _React$useState3[1];
+
+  var _React$useState4 = React.useState(value),
+      lastValidHexColor = _React$useState4[0],
+      setLastValidHexColor = _React$useState4[1];
+
+  var _React$useState5 = React.useState(-1),
+      pressed = _React$useState5[0],
+      setPressed = _React$useState5[1];
+
+  var _React$useState6 = React.useState(false),
+      dropdownVisible = _React$useState6[0],
+      setDropdownVisible = _React$useState6[1];
+
+  var _React$useState7 = React.useState(colors),
+      savedColors = _React$useState7[0],
+      setSavedColors = _React$useState7[1];
+
+  React.useEffect(function () {
+    if (lastValidHexColor) {
+      onChange && onChange(lastValidHexColor);
+    }
+  }, [onChange, lastValidHexColor]);
+  var onChangeTextColor = React.useCallback(function (colorValue) {
+    setColorTextInput(colorValue);
+
+    if (isValidTextColor(colorValue)) {
+      var standardizedColor = standardizeColor(colorValue);
+      setLastValidTextColor(colorValue);
+      setColorHexInput(standardizedColor);
+      setLastValidHexColor(standardizedColor);
+    } else if (isValidHexColor(colorValue)) {
+      var fullHexColor = convert3DigitHexTo6Digit(colorValue);
+      setLastValidTextColor(fullHexColor);
+      setColorHexInput(fullHexColor);
+      setLastValidHexColor(fullHexColor);
+    }
+
+    setPressed(-1);
+  }, []);
+  var onChangeHexColor = React.useCallback(function (colorValue) {
+    setColorHexInput(colorValue);
 
+    if (isValidHexColor(colorValue)) {
+      var fullHexColor = convert3DigitHexTo6Digit(colorValue);
+      setColorTextInput(fullHexColor);
+      setLastValidTextColor(fullHexColor);
+      setLastValidHexColor(fullHexColor);
+    }
+
+    setPressed(-1);
+  }, []);
+  var onBlurHandler = React.useCallback(function () {
+    setColorTextInput(lastValidTextColor);
+    setColorHexInput(lastValidHexColor);
+  }, [lastValidHexColor, lastValidTextColor]);
+  var onClickHandler = React.useCallback(function () {
+    setDropdownVisible(!dropdownVisible);
+  }, [dropdownVisible]);
+  React.useEffect(function () {
+    if (!value || !isValidTextColor(value) || !isValidHexColor(value)) {
+      onChangeTextColor(DEFAULT_COLOR);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []);
   var heightOfDropdown = React.useCallback(function () {
     if (errorText || description) {
       if (errorText && description) {
@@ -56,25 +122,14 @@ export function ColorPicker(_ref) {
 
     return 4;
   }, [errorText, description]);
-
-  var _React$useState3 = React.useState(false),
-      dropdownVisible = _React$useState3[0],
-      setDropdownVisible = _React$useState3[1];
-
   var ref = React.useRef(null);
   useOnClickOutside(ref, function () {
     setDropdownVisible(false);
   });
 
-  var _React$useState4 = React.useState(colors),
-      savedColors = _React$useState4[0],
-      setSavedColors = _React$useState4[1];
-
-  var hash = '#';
-
   var saveColor = function saveColor() {
     setSavedColors(function (ar) {
-      var colorsArray = (color ? [color].concat(ar) : ar).slice(0, maxSavedColors);
+      var colorsArray = (lastValidHexColor ? [lastValidHexColor].concat(ar) : ar).slice(0, maxSavedColors);
       onSaveColors && onSaveColors(colorsArray);
       return colorsArray;
     });
@@ -90,8 +145,8 @@ export function ColorPicker(_ref) {
     size: 16,
     component: /*#__PURE__*/React.createElement(FormulaPlusM, null)
   }))), infix({
-    color: color,
-    setColor: onChangeColor
+    color: colorTextInput,
+    setColor: onChangeTextColor
   }), savedColors.length > 0 && /*#__PURE__*/React.createElement(Tags, {
     tagShape: TagShape.SINGLE_CHARACTER_SQUARE // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
     // @ts-ignore
@@ -107,43 +162,46 @@ export function ColorPicker(_ref) {
         })),
         color: colorEntry,
         onClick: function onClick() {
-          onChangeColor(colorEntry);
+          onChangeHexColor(colorEntry);
           setPressed(i);
         }
       };
-    }),
-    disabled: false
+    })
   }));
   var dropdown = /*#__PURE__*/React.createElement(ColorPickerStyles.Container, {
     ref: ref,
     size: size
   }, /*#__PURE__*/React.createElement(ReactColorful, {
-    color: color,
-    onChange: onChangeColor
+    color: lastValidHexColor,
+    onChange: onChangeHexColor
   }), /*#__PURE__*/React.createElement(ColorPickerStyles.PrefixTag, {
-    height: isShownSavedColors
+    height: isShownSavedColors,
+    size: size
   }, /*#__PURE__*/React.createElement(Tag, {
     shape: TagShape.SINGLE_CHARACTER_SQUARE,
-    color: color,
-    disabled: false
+    color: lastValidHexColor
   })), /*#__PURE__*/React.createElement(ColorPickerStyles.SubContainer, {
     savedColors: isShownSavedColors
   }, /*#__PURE__*/React.createElement(ColorPickerStyles.ColorPickerInput, {
-    value: color.substr(1),
+    value: colorHexInput && filterAlphanumeric(colorHexInput),
     prefixel: /*#__PURE__*/React.createElement(ColorPickerStyles.PreffixWrapper, null, "#"),
     onChange: function onChange(ev) {
-      return setColor(hash + ev.target.value);
+      onChangeHexColor("#" + ev.target.value);
     },
+    onBlur: onBlurHandler,
     placeholder: placeholder,
     icon1: /*#__PURE__*/React.createElement(ColorPickerStyles.CopyIcon, {
       onClick: function onClick() {
-        copy(color);
+        lastValidHexColor && copy(lastValidHexColor);
       },
       component: /*#__PURE__*/React.createElement(CopyClipboardM, null)
     }),
-    icon1Tooltip: /*#__PURE__*/React.createElement("span", null, tooltipText)
+    icon1Tooltip: /*#__PURE__*/React.createElement("span", null, tooltipText || 'Copy to clipboard')
   }), isShownSavedColors && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Divider, null), swatchSection)));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, maxWidth && maxWidth >= DEFAULT_MAX_WIDTH_PICKER && /*#__PURE__*/React.createElement(ColorPickerStyles.ColorPickerModalStyle, {
+    maxWidth: maxWidth
+  }), /*#__PURE__*/React.createElement(Dropdown, {
+    overlayClassName: "color-picker-overlay",
     align: {
       offset: [0, heightOfDropdown()]
     },
@@ -153,19 +211,20 @@ export function ColorPicker(_ref) {
   }, /*#__PURE__*/React.createElement(ColorPickerStyles.ColorPickerSelect, _extends({
     prefix: /*#__PURE__*/React.createElement(ColorPickerStyles.ColorTag, {
       shape: TagShape.SINGLE_CHARACTER_ROUND,
-      color: color,
-      disabled: false
+      color: lastValidHexColor,
+      disabled: false,
+      onClick: onClickHandler
     }),
+    onClick: onClickHandler,
     onChange: function onChange(ev) {
-      return setColor(ev.target.value);
+      onChangeTextColor(ev.target.value);
     },
+    onBlur: onBlurHandler,
     placeholder: placeholder,
-    onClick: function onClick() {
-      return setDropdownVisible(!dropdownVisible);
-    },
-    value: color,
+    value: colorTextInput,
     description: description,
     errorText: errorText
   }, inputProps))));
-}
+};
+
 export default ColorPicker;

package/dist/ColorPicker.styles.d.ts

@@ -38,10 +38,14 @@ export declare const ColorPickerSelect: import("styled-components").StyledCompon
 }), any, {}, never>;
 export declare const PrefixTag: import("styled-components").StyledComponent<"div", any, {
     height?: boolean | undefined;
+    size?: "S" | "M" | "L" | undefined;
 }, never>;
 export declare const SwatchSectionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PreffixWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ValueWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ColorPickerModalStyle: import("styled-components").GlobalStyleComponent<{
+    maxWidth: number;
+}, import("styled-components").DefaultTheme>;
 declare const _default: {
     Container: import("styled-components").StyledComponent<"div", any, {
         size?: "S" | "M" | "L" | undefined;
@@ -52,6 +56,7 @@ declare const _default: {
     ColorTag: import("styled-components").StyledComponent<import("react").FC<import("@synerise/ds-tags/dist/Tag/Tag.types").Props>, any, {}, never>;
     PrefixTag: import("styled-components").StyledComponent<"div", any, {
         height?: boolean | undefined;
+        size?: "S" | "M" | "L" | undefined;
     }, never>;
     AddColorButton: import("styled-components").StyledComponent<typeof Button, any, {}, never>;
     SwatchSectionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -91,5 +96,8 @@ declare const _default: {
     })> & {
         displayName: string;
     }), any, {}, never>;
+    ColorPickerModalStyle: import("styled-components").GlobalStyleComponent<{
+        maxWidth: number;
+    }, import("styled-components").DefaultTheme>;
 };
 export default _default;

package/dist/ColorPicker.styles.js

@@ -1,4 +1,8 @@
-import styled from 'styled-components'; // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+var _templateObject;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import styled, { createGlobalStyle } from 'styled-components'; // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
 // @ts-ignore
 
 import { TagsStyles, Tag } from '@synerise/ds-tags';
@@ -14,11 +18,11 @@ export var TagDot = styled.div.withConfig({
 }, function (props) {
   return props.theme.palette.white;
 });
-var SIZE_DEFAULT = 167;
+var SIZE_DEFAULT = 168;
 var Container = styled.div.withConfig({
   displayName: "ColorPickerstyles__Container",
   componentId: "sc-1iu8b6j-1"
-})(["@media (min-width:200px){min-width:200px;margin:-8px;background-color:", ";}.react-colorful__last-control{margin:24px 56px 8px 17px;border-radius:4px;height:8px;}.react-colorful__saturation{border-bottom:0px;border-radius:4px 4px 0 0;height:96px;.react-colorful__interactive{height:96px;}}&&& .ds-tag{width:16px;height:16px;margin:0px 4px 8px;border:1px solid ", ";&:hover{", "{display:flex;}}}.react-colorful__pointer{width:16px;height:16px;}.react-colorful{width:268px;max-width:268px;height:", "px;}.react-colorful__hue-pointer{border:1px solid ", ";box-shadow:none !important;.react-colorful__pointer-fill{background-color:", " !important;}}.ant-divider-horizontal{margin:16px 0px;}", "{margin-bottom:-8px;}"], function (props) {
+})(["width:100%;@media (min-width:200px){min-width:200px;margin:-8px;background-color:", ";}.react-colorful__last-control{margin:24px 56px 8px 17px;border-radius:4px;height:8px;}.react-colorful__saturation{border-bottom:0px;border-radius:4px 4px 0 0;height:96px;.react-colorful__interactive{width:100%;height:100%;}}&&& .ds-tag{width:16px;height:16px;border:1px solid ", ";margin:0 0 0 4px;&:hover{", "{display:flex;}}}.react-colorful__pointer{width:16px;height:16px;}.react-colorful{width:100%;height:", "px;}.react-colorful__hue-pointer{border:1px solid ", ";box-shadow:none !important;.react-colorful__pointer-fill{background-color:", " !important;}}.ant-divider-horizontal{margin:16px 0px;}", "{margin-bottom:-8px;}"], function (props) {
   return props.theme.palette.white;
 }, function (props) {
   return props.theme.palette['grey-300'];
@@ -32,8 +36,8 @@ var Container = styled.div.withConfig({
 var SubContainer = styled.div.withConfig({
   displayName: "ColorPickerstyles__SubContainer",
   componentId: "sc-1iu8b6j-2"
-})(["padding:", ";"], function (props) {
-  return props.savedColors ? '8px 16px 16px' : '8px 16px 0;';
+})(["padding:8px 16px 16px;margin-bottom:", ";"], function (props) {
+  return props.savedColors ? "0" : "-16px";
 });
 export var ColorTag = styled(Tag).withConfig({
   displayName: "ColorPickerstyles__ColorTag",
@@ -44,7 +48,7 @@ export var ColorTag = styled(Tag).withConfig({
 export var AddColorButton = styled(Button).withConfig({
   displayName: "ColorPickerstyles__AddColorButton",
   componentId: "sc-1iu8b6j-4"
-})(["&&&.ant-btn{width:16px;height:16px;margin-right:2px;}"]);
+})(["&&&.ant-btn{width:16px;height:16px;margin-right:0;}"]);
 export var CopyIcon = styled(Icon).withConfig({
   displayName: "ColorPickerstyles__CopyIcon",
   componentId: "sc-1iu8b6j-5"
@@ -60,12 +64,10 @@ export var ColorPickerSelect = styled(Input).withConfig({
 export var PrefixTag = styled.div.withConfig({
   displayName: "ColorPickerstyles__PrefixTag",
   componentId: "sc-1iu8b6j-8"
-})(["&&& .ds-tag{width:24px;height:24px;border:1px solid ", ";cursor:auto;&:hover:before{cursor:auto;filter:brightness(100%);}}position:absolute;right:", ";bottom:", ";z-index:2;cursor:auto;"], function (props) {
+})(["&&& .ds-tag{margin:0;width:24px;height:24px;border:1px solid ", ";cursor:auto;&:hover:before{cursor:auto;filter:brightness(100%);}}position:absolute;right:16px;top:", "px;z-index:2;cursor:auto;"], function (props) {
   return props.theme.palette['grey-300'];
 }, function (props) {
-  return props.height ? '12px' : '12px';
-}, function (props) {
-  return props.height ? '97px' : '48px';
+  return (ColorPickerSize[props.size] || SIZE_DEFAULT) - 25;
 });
 export var SwatchSectionWrapper = styled.div.withConfig({
   displayName: "ColorPickerstyles__SwatchSectionWrapper",
@@ -74,11 +76,17 @@ export var SwatchSectionWrapper = styled.div.withConfig({
 export var PreffixWrapper = styled.div.withConfig({
   displayName: "ColorPickerstyles__PreffixWrapper",
   componentId: "sc-1iu8b6j-10"
-})(["padding:6px 12px;"]);
+})(["margin:0px 12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:", ";"], function (props) {
+  return props.theme.palette['grey-500'];
+});
 export var ValueWrapper = styled.div.withConfig({
   displayName: "ColorPickerstyles__ValueWrapper",
   componentId: "sc-1iu8b6j-11"
 })(["display:flex;font-size:12px;"]);
+export var ColorPickerModalStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n.color-picker-overlay {\n  min-width: unset !important;\n  max-width: ", "px; \n  width: 100%;\n}"])), function (_ref) {
+  var maxWidth = _ref.maxWidth;
+  return maxWidth;
+});
 export default {
   Container: Container,
   SubContainer: SubContainer,
@@ -91,5 +99,6 @@ export default {
   CopyIcon: CopyIcon,
   ColorPickerInput: ColorPickerInput,
   TagDot: TagDot,
-  ColorPickerSelect: ColorPickerSelect
+  ColorPickerSelect: ColorPickerSelect,
+  ColorPickerModalStyle: ColorPickerModalStyle
 };

package/dist/ColorPicker.types.d.ts

@@ -5,11 +5,12 @@ export declare type ColorHookType = {
     setColor: (color: string) => void;
 };
 export declare enum ColorPickerSize {
-    'S' = 135,
-    'M' = 167,
-    'L' = 199
+    'S' = 136,
+    'M' = 168,
+    'L' = 200
 }
 export interface ColorPickerProps extends Partial<Pick<HTMLInputElement, 'placeholder'>> {
+    maxWidth?: number;
     value?: string;
     onChange?: (color: string) => void;
     colors?: string[];

package/dist/ColorPicker.types.js

@@ -1,7 +1,7 @@
 export var ColorPickerSize;
 
 (function (ColorPickerSize) {
-  ColorPickerSize[ColorPickerSize["S"] = 135] = "S";
-  ColorPickerSize[ColorPickerSize["M"] = 167] = "M";
-  ColorPickerSize[ColorPickerSize["L"] = 199] = "L";
+  ColorPickerSize[ColorPickerSize["S"] = 136] = "S";
+  ColorPickerSize[ColorPickerSize["M"] = 168] = "M";
+  ColorPickerSize[ColorPickerSize["L"] = 200] = "L";
 })(ColorPickerSize || (ColorPickerSize = {}));

package/dist/utils.d.ts

@@ -0,0 +1,21 @@
+export declare const filterAlphanumeric: (colorValue: string) => string;
+export declare const isValidHexColor: (hex: string) => boolean;
+/**
+ *
+ * Method that creates an option element and then assigns a colour to its styles.
+ * If the colour is correct, it is assigned to the element and can then be checked against the input data.
+ *
+ * @param {string} strColor
+ * @returns {boolean}
+ */
+export declare const isValidTextColor: (strColor: string) => boolean;
+/**
+ *
+ * A method that converts color in user-understandable notation to HEX notation.
+ * It uses the canvas element for this
+ *
+ * @param {string} color
+ * @returns {string}
+ */
+export declare const standardizeColor: (color: string) => string;
+export declare const convert3DigitHexTo6Digit: (hexColor: string) => string;

package/dist/utils.js

@@ -0,0 +1,58 @@
+var alphanumericRegex = /[^a-zA-Z0-9]+/g;
+var hexColorRegex = /^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6})$/;
+export var filterAlphanumeric = function filterAlphanumeric(colorValue) {
+  return colorValue.replace(alphanumericRegex, '');
+};
+export var isValidHexColor = function isValidHexColor(hex) {
+  return hexColorRegex.test(hex);
+};
+/**
+ *
+ * Method that creates an option element and then assigns a colour to its styles.
+ * If the colour is correct, it is assigned to the element and can then be checked against the input data.
+ *
+ * @param {string} strColor
+ * @returns {boolean}
+ */
+
+export var isValidTextColor = function isValidTextColor(strColor) {
+  if (!strColor) return false; // eslint-disable-next-line no-undef
+
+  var s = new Option().style;
+  s.color = strColor;
+  return s.color === strColor;
+};
+/**
+ *
+ * A method that converts color in user-understandable notation to HEX notation.
+ * It uses the canvas element for this
+ *
+ * @param {string} color
+ * @returns {string}
+ */
+
+export var standardizeColor = function standardizeColor(color) {
+  var ctx = document.createElement('canvas').getContext('2d');
+
+  if (ctx) {
+    ctx.fillStyle = color;
+    return ctx.fillStyle;
+  }
+
+  return '';
+};
+export var convert3DigitHexTo6Digit = function convert3DigitHexTo6Digit(hexColor) {
+  var alphaHexColor = filterAlphanumeric(hexColor);
+
+  if (alphaHexColor.length === 3) {
+    var newAlphaHexColor = ''; // eslint-disable-next-line no-plusplus
+
+    for (var i = 0; i < alphaHexColor.length; i++) {
+      newAlphaHexColor += alphaHexColor[i] + alphaHexColor[i];
+    }
+
+    return "#" + newAlphaHexColor;
+  }
+
+  return hexColor;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-color-picker",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "description": "Color-Picker Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -45,5 +45,5 @@
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "f7e3eb0af66bff4d1bdec91b30d2075cc0799567"
+  "gitHead": "05f16eaafa3de3ec33cc0d9a6712864646a0617e"
 }