akeneo-design-system 0.1.165 → 0.1.166

package/lib/components/Input/ColorInput/Color.d.ts

@@ -0,0 +1,3 @@
+declare const convertColorToLongHexColor: (value: string) => string;
+declare const isValidColor: (value: string) => boolean;
+export { isValidColor, convertColorToLongHexColor };

package/lib/components/Input/ColorInput/Color.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertColorToLongHexColor = exports.isValidColor = void 0;
+var convertColorToLongHexColor = function (value) {
+    if (!isValidShortHexColor(value))
+        return value;
+    return "#" + value[1] + value[1] + value[2] + value[2] + value[3] + value[3];
+};
+exports.convertColorToLongHexColor = convertColorToLongHexColor;
+var isValidShortHexColor = function (value) {
+    return /^#[A-Fa-f0-9]{3}$/.test(value);
+};
+var isValidLongHexColor = function (value) {
+    return /^#[A-Fa-f0-9]{6}$/.test(value);
+};
+var isValidColor = function (value) {
+    return isValidLongHexColor(value) || isValidShortHexColor(value);
+};
+exports.isValidColor = isValidColor;
+//# sourceMappingURL=Color.js.map

package/lib/components/Input/ColorInput/Color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Color.js","sourceRoot":"","sources":["../../../../src/components/Input/ColorInput/Color.ts"],"names":[],"mappings":";;;AAAA,IAAM,0BAA0B,GAAG,UAAC,KAAa;IAC/C,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC;QAAE,OAAO,KAAK,CAAC;IAE/C,OAAO,MAAI,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAG,CAAC;AAC/E,CAAC,CAAC;AAcoB,gEAA0B;AAZhD,IAAM,oBAAoB,GAAG,UAAC,KAAa;IACzC,OAAO,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AACzC,CAAC,CAAC;AAEF,IAAM,mBAAmB,GAAG,UAAC,KAAa;IACxC,OAAO,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AACzC,CAAC,CAAC;AAEF,IAAM,YAAY,GAAG,UAAC,KAAa;IACjC,OAAO,mBAAmB,CAAC,KAAK,CAAC,IAAI,oBAAoB,CAAC,KAAK,CAAC,CAAC;AACnE,CAAC,CAAC;AAEM,oCAAY"}

package/lib/components/Input/ColorInput/ColorInput.d.ts

@@ -0,0 +1,15 @@
+import React, { InputHTMLAttributes } from 'react';
+import { InputProps } from '../common/InputProps';
+import { Override } from '../../../shared';
+declare type ColorInputProps = Override<Override<InputHTMLAttributes<HTMLInputElement>, InputProps<string>>, ({
+    readOnly?: true;
+} | {
+    readOnly?: false;
+    onChange: (newValue: string) => void;
+}) & {
+    value: string;
+    placeholder?: string;
+    invalid?: boolean;
+}>;
+declare const ColorInput: React.ForwardRefExoticComponent<ColorInputProps & React.RefAttributes<HTMLInputElement>>;
+export { ColorInput };

package/lib/components/Input/ColorInput/ColorInput.js

@@ -0,0 +1,93 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorInput = void 0;
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var icons_1 = require("../../../icons");
+var theme_1 = require("../../../theme");
+var Color_1 = require("./Color");
+var ColorInputContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 12px;\n  border: 1px solid ", ";\n  border-radius: 2px;\n  height: 74px;\n  gap: 10px;\n  outline-style: none;\n  box-sizing: border-box;\n  background: ", ";\n  cursor: ", ";\n  overflow: hidden;\n  ", "\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 12px;\n  border: 1px solid ", ";\n  border-radius: 2px;\n  height: 74px;\n  gap: 10px;\n  outline-style: none;\n  box-sizing: border-box;\n  background: ", ";\n  cursor: ", ";\n  overflow: hidden;\n  ", "\n"])), function (_a) {
+    var invalid = _a.invalid;
+    return (invalid ? (0, theme_1.getColor)('red', 100) : (0, theme_1.getColor)('grey', 80));
+}, function (_a) {
+    var readOnly = _a.readOnly;
+    return (readOnly ? (0, theme_1.getColor)('grey', 20) : (0, theme_1.getColor)('white'));
+}, function (_a) {
+    var readOnly = _a.readOnly;
+    return (readOnly ? 'not-allowed' : 'auto');
+}, function (_a) {
+    var readOnly = _a.readOnly;
+    return !readOnly && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      &:focus-within {\n        box-shadow: 0 0 0 2px ", ";\n      }\n    "], ["\n      &:focus-within {\n        box-shadow: 0 0 0 2px ", ";\n      }\n    "])), (0, theme_1.getColor)('blue', 40));
+});
+var ColorPicker = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 47px;\n  height: 47px;\n  border: none;\n  padding: 0;\n  ::-moz-color-swatch-wrapper {\n    padding: 0;\n  }\n  ::-webkit-color-swatch-wrapper {\n    padding: 0;\n  }\n  ::-webkit-color-swatch {\n    border: none;\n  }\n  ::-moz-color-swatch {\n    border: none;\n  }\n"], ["\n  width: 47px;\n  height: 47px;\n  border: none;\n  padding: 0;\n  ::-moz-color-swatch-wrapper {\n    padding: 0;\n  }\n  ::-webkit-color-swatch-wrapper {\n    padding: 0;\n  }\n  ::-webkit-color-swatch {\n    border: none;\n  }\n  ::-moz-color-swatch {\n    border: none;\n  }\n"])));
+var TextInput = styled_components_1.default.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border: none;\n  flex: 1;\n  outline: none;\n  color: ", ";\n  background: transparent;\n  cursor: ", ";\n  height: 100%;\n\n  &::placeholder {\n    opacity: 1;\n    color: ", ";\n  }\n"], ["\n  border: none;\n  flex: 1;\n  outline: none;\n  color: ", ";\n  background: transparent;\n  cursor: ", ";\n  height: 100%;\n\n  &::placeholder {\n    opacity: 1;\n    color: ", ";\n  }\n"])), function (_a) {
+    var readOnly = _a.readOnly;
+    return (readOnly ? (0, theme_1.getColor)('grey', 100) : (0, theme_1.getColor)('grey', 140));
+}, function (_a) {
+    var readOnly = _a.readOnly;
+    return (readOnly ? 'not-allowed' : 'auto');
+}, (0, theme_1.getColor)('grey', 100));
+var ReadOnlyIcon = (0, styled_components_1.default)(icons_1.LockIcon)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-left: 4px;\n"], ["\n  margin-left: 4px;\n"])));
+var ErrorIcon = (0, styled_components_1.default)(icons_1.DangerIcon)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  padding: 0 16px 0 15px;\n"], ["\n  padding: 0 16px 0 15px;\n"])));
+var ColorInput = (0, react_1.forwardRef)(function (_a, forwardedRef) {
+    var invalid = _a.invalid, onChange = _a.onChange, value = _a.value, readOnly = _a.readOnly, rest = __rest(_a, ["invalid", "onChange", "value", "readOnly"]);
+    var handleChange = (0, react_1.useCallback)(function (event) {
+        if (!readOnly && onChange)
+            onChange(event.currentTarget.value);
+    }, [readOnly, onChange]);
+    if (!value.startsWith('#')) {
+        value = "#" + value;
+    }
+    return (react_1.default.createElement(ColorInputContainer, { invalid: invalid || !(0, Color_1.isValidColor)(value), readOnly: readOnly },
+        (0, Color_1.isValidColor)(value) ? (react_1.default.createElement(ColorPicker, { type: "color", value: (0, Color_1.convertColorToLongHexColor)(value), onChange: handleChange, disabled: readOnly })) : (react_1.default.createElement(ErrorIcon, { role: "alert", size: 16 })),
+        react_1.default.createElement(TextInput, __assign({ ref: forwardedRef, value: value, onChange: handleChange, type: "text", readOnly: readOnly, disabled: readOnly, "aria-invalid": invalid || !(0, Color_1.isValidColor)(value) }, rest)),
+        readOnly && react_1.default.createElement(ReadOnlyIcon, { size: 16 })));
+});
+exports.ColorInput = ColorInput;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+//# sourceMappingURL=ColorInput.js.map

package/lib/components/Input/ColorInput/ColorInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInput.js","sourceRoot":"","sources":["../../../../src/components/Input/ColorInput/ColorInput.tsx"],"names":[],"mappings":"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"}

package/lib/components/Input/index.d.ts

@@ -1,5 +1,6 @@
 export * from './BooleanInput/BooleanInput';
 export * from './common';
+export * from './ColorInput/ColorInput';
 export * from './MediaFileInput/FileInfo';
 export * from './MediaFileInput/MediaFileInput';
 export * from './MediaLinkInput/MediaLinkInput';

package/lib/components/Input/index.js

@@ -12,6 +12,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./BooleanInput/BooleanInput"), exports);
 __exportStar(require("./common"), exports);
+__exportStar(require("./ColorInput/ColorInput"), exports);
 __exportStar(require("./MediaFileInput/FileInfo"), exports);
 __exportStar(require("./MediaFileInput/MediaFileInput"), exports);
 __exportStar(require("./MediaLinkInput/MediaLinkInput"), exports);

package/lib/components/Input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Input/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,8DAA4C;AAC5C,2CAAyB;AACzB,4DAA0C;AAC1C,kEAAgD;AAChD,kEAAgD;AAChD,sEAAoD;AACpD,4DAA0C;AAC1C,4DAA0C;AAC1C,0DAAwC;AACxC,sDAAoC;AACpC,gEAA8C;AAC9C,wDAAsC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Input/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,8DAA4C;AAC5C,2CAAyB;AACzB,0DAAwC;AACxC,4DAA0C;AAC1C,kEAAgD;AAChD,kEAAgD;AAChD,sEAAoD;AACpD,4DAA0C;AAC1C,4DAA0C;AAC1C,0DAAwC;AACxC,sDAAoC;AACpC,gEAA8C;AAC9C,wDAAsC"}

package/lib/shared/key.d.ts

@@ -1,6 +1,7 @@
 declare enum Key {
     Space = " ",
     Enter = "Enter",
+    NumpadEnter = "NumpadEnter",
     Backspace = "Backspace",
     Escape = "Escape",
     ArrowLeft = "ArrowLeft",

package/lib/shared/key.js

@@ -5,6 +5,7 @@ var Key;
 (function (Key) {
     Key["Space"] = " ";
     Key["Enter"] = "Enter";
+    Key["NumpadEnter"] = "NumpadEnter";
     Key["Backspace"] = "Backspace";
     Key["Escape"] = "Escape";
     Key["ArrowLeft"] = "ArrowLeft";

package/lib/shared/key.js.map

@@ -1 +1 @@
-{"version":3,"file":"key.js","sourceRoot":"","sources":["../../src/shared/key.ts"],"names":[],"mappings":";;;AAAA,IAAK,GAWJ;AAXD,WAAK,GAAG;IACN,kBAAW,CAAA;IACX,sBAAe,CAAA;IACf,8BAAuB,CAAA;IACvB,wBAAiB,CAAA;IACjB,8BAAuB,CAAA;IACvB,gCAAyB,CAAA;IACzB,8BAAuB,CAAA;IACvB,0BAAmB,CAAA;IACnB,wBAAiB,CAAA;IACjB,kBAAW,CAAA;AACb,CAAC,EAXI,GAAG,KAAH,GAAG,QAWP;AAEO,kBAAG"}
+{"version":3,"file":"key.js","sourceRoot":"","sources":["../../src/shared/key.ts"],"names":[],"mappings":";;;AAAA,IAAK,GAYJ;AAZD,WAAK,GAAG;IACN,kBAAW,CAAA;IACX,sBAAe,CAAA;IACf,kCAA2B,CAAA;IAC3B,8BAAuB,CAAA;IACvB,wBAAiB,CAAA;IACjB,8BAAuB,CAAA;IACvB,gCAAyB,CAAA;IACzB,8BAAuB,CAAA;IACvB,0BAAmB,CAAA;IACnB,wBAAiB,CAAA;IACjB,kBAAW,CAAA;AACb,CAAC,EAZI,GAAG,KAAH,GAAG,QAYP;AAEO,kBAAG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akeneo-design-system",
-  "version": "0.1.165",
+  "version": "0.1.166",
   "description": "Akeneo design system",
   "main": "lib/index.js",
   "scripts": {

package/src/components/Input/ColorInput/Color.ts

@@ -0,0 +1,19 @@
+const convertColorToLongHexColor = (value: string): string => {
+  if (!isValidShortHexColor(value)) return value;
+
+  return `#${value[1]}${value[1]}${value[2]}${value[2]}${value[3]}${value[3]}`;
+};
+
+const isValidShortHexColor = (value: string): boolean => {
+  return /^#[A-Fa-f0-9]{3}$/.test(value);
+};
+
+const isValidLongHexColor = (value: string): boolean => {
+  return /^#[A-Fa-f0-9]{6}$/.test(value);
+};
+
+const isValidColor = (value: string): boolean => {
+  return isValidLongHexColor(value) || isValidShortHexColor(value);
+};
+
+export {isValidColor, convertColorToLongHexColor};

package/src/components/Input/ColorInput/Color.unit.ts

@@ -0,0 +1,17 @@
+import {convertColorToLongHexColor, isValidColor} from './Color';
+
+test('it returns if the hex color is valid', () => {
+  expect(isValidColor('#f0f')).toBe(true);
+  expect(isValidColor('#F0F')).toBe(true);
+  expect(isValidColor('#ffffff')).toBe(true);
+  expect(isValidColor('#FFFF0F')).toBe(true);
+  expect(isValidColor('#FFFFFG')).toBe(false);
+  expect(isValidColor('#FFG')).toBe(false);
+  expect(isValidColor('#FFFF')).toBe(false);
+  expect(isValidColor('#FFFFFFF')).toBe(false);
+});
+
+test('it convert color to long hex color', () => {
+  expect(convertColorToLongHexColor('#ff00ff')).toBe('#ff00ff');
+  expect(convertColorToLongHexColor('#f0f')).toBe('#ff00ff');
+});

package/src/components/Input/ColorInput/ColorInput.stories.mdx

@@ -0,0 +1,77 @@
+import {useState} from 'react';
+import {Meta, Story, ArgsTable, Canvas} from '@storybook/addon-docs/blocks';
+import {ColorInput} from './ColorInput.tsx';
+
+<Meta
+  title="Components/Inputs/Color input"
+  component={ColorInput}
+  argTypes={{
+    readOnly: {
+      control: {type: 'boolean'},
+      description:
+        'Defines if the input should be read only. If defined so, the user cannot change the value of the input.',
+      table: {type: {summary: 'boolean'}},
+    },
+    onChange: {
+      description: 'The handler called when the value of the input changes.',
+      table: {type: {summary: '(newValue: string) => void'}},
+    },
+  }}
+  args={{
+    value: '#9452ba',
+    placeholder: 'Please enter a value in the ColorInput',
+  }}
+/>
+
+# ColorInput (Beta)
+
+## Usage
+
+Color input component allows the user to enter a color in hexadecimal format.
+
+### Placeholder text
+
+The placeholder text provides tips or examples of items to enter. Placeholder text disappears when the user begins entering data.
+
+## Playground
+
+<Canvas>
+  <Story name="Standard">
+    {args => {
+      const [value, setValue] = useState(args.value);
+      return <ColorInput {...args} value={value} onChange={setValue} />;
+    }}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Standard" />
+
+## Variation on readOnly
+
+<Canvas>
+  <Story name="Read only">
+    {args => {
+      return (
+        <>
+          <ColorInput value="#000" readOnly={false} />
+          <ColorInput value="#008542" readOnly={true} />
+        </>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Variation on invalid
+
+<Canvas>
+  <Story name="Invalid">
+    {args => {
+      return (
+        <>
+          <ColorInput value="#ffe000" invalid={false} />
+          <ColorInput value="not a color" invalid={true} />
+        </>
+      );
+    }}
+  </Story>
+</Canvas>

package/src/components/Input/ColorInput/ColorInput.tsx

@@ -0,0 +1,146 @@
+import React, {ChangeEvent, forwardRef, InputHTMLAttributes, Ref, useCallback} from 'react';
+import styled, {css} from 'styled-components';
+import {InputProps} from '../common/InputProps';
+import {DangerIcon, LockIcon} from '../../../icons';
+import {Override} from '../../../shared';
+import {AkeneoThemedProps, getColor} from '../../../theme';
+import {isValidColor, convertColorToLongHexColor} from './Color';
+
+const ColorInputContainer = styled.div<{readOnly: boolean} & AkeneoThemedProps>`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 12px;
+  border: 1px solid ${({invalid}) => (invalid ? getColor('red', 100) : getColor('grey', 80))};
+  border-radius: 2px;
+  height: 74px;
+  gap: 10px;
+  outline-style: none;
+  box-sizing: border-box;
+  background: ${({readOnly}) => (readOnly ? getColor('grey', 20) : getColor('white'))};
+  cursor: ${({readOnly}) => (readOnly ? 'not-allowed' : 'auto')};
+  overflow: hidden;
+  ${({readOnly}) =>
+    !readOnly &&
+    css`
+      &:focus-within {
+        box-shadow: 0 0 0 2px ${getColor('blue', 40)};
+      }
+    `}
+`;
+
+const ColorPicker = styled.input`
+  width: 47px;
+  height: 47px;
+  border: none;
+  padding: 0;
+  ::-moz-color-swatch-wrapper {
+    padding: 0;
+  }
+  ::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+  ::-webkit-color-swatch {
+    border: none;
+  }
+  ::-moz-color-swatch {
+    border: none;
+  }
+`;
+
+const TextInput = styled.input<{readOnly: boolean} & AkeneoThemedProps>`
+  border: none;
+  flex: 1;
+  outline: none;
+  color: ${({readOnly}) => (readOnly ? getColor('grey', 100) : getColor('grey', 140))};
+  background: transparent;
+  cursor: ${({readOnly}) => (readOnly ? 'not-allowed' : 'auto')};
+  height: 100%;
+
+  &::placeholder {
+    opacity: 1;
+    color: ${getColor('grey', 100)};
+  }
+`;
+
+const ReadOnlyIcon = styled(LockIcon)`
+  margin-left: 4px;
+`;
+
+const ErrorIcon = styled(DangerIcon)`
+  padding: 0 16px 0 15px;
+`;
+
+type ColorInputProps = Override<
+  Override<InputHTMLAttributes<HTMLInputElement>, InputProps<string>>,
+  (
+    | {
+        readOnly?: true;
+      }
+    | {
+        readOnly?: false;
+        onChange: (newValue: string) => void;
+      }
+  ) & {
+    /**
+     * Value of the input.
+     */
+    value: string;
+
+    /**
+     * Placeholder displayed when the input is empty.
+     */
+    placeholder?: string;
+
+    /**
+     * Defines if the input is valid or not.
+     */
+    invalid?: boolean;
+  }
+>;
+
+/**
+ * The ColorInput component allows the user to enter a color in hexadecimal format.
+ */
+const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(
+  ({invalid, onChange, value, readOnly, ...rest}: ColorInputProps, forwardedRef: Ref<HTMLInputElement>) => {
+    const handleChange = useCallback(
+      (event: ChangeEvent<HTMLInputElement>) => {
+        if (!readOnly && onChange) onChange(event.currentTarget.value);
+      },
+      [readOnly, onChange]
+    );
+
+    if (!value.startsWith('#')) {
+      value = `#${value}`;
+    }
+
+    return (
+      <ColorInputContainer invalid={invalid || !isValidColor(value)} readOnly={readOnly}>
+        {isValidColor(value) ? (
+          <ColorPicker
+            type="color"
+            value={convertColorToLongHexColor(value)}
+            onChange={handleChange}
+            disabled={readOnly}
+          />
+        ) : (
+          <ErrorIcon role="alert" size={16} />
+        )}
+        <TextInput
+          ref={forwardedRef}
+          value={value}
+          onChange={handleChange}
+          type="text"
+          readOnly={readOnly}
+          disabled={readOnly}
+          aria-invalid={invalid || !isValidColor(value)}
+          {...rest}
+        />
+        {readOnly && <ReadOnlyIcon size={16} />}
+      </ColorInputContainer>
+    );
+  }
+);
+
+export {ColorInput};

package/src/components/Input/ColorInput/ColorInput.unit.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import {ColorInput} from './ColorInput';
+import {fireEvent, render, screen} from '../../../storybook/test-util';
+
+test('it renders and handle changes', () => {
+  const handleChange = jest.fn();
+
+  render(
+    <>
+      <label htmlFor="myInput">My label</label>
+      <ColorInput id="myInput" value="#ff0000" onChange={handleChange} />
+    </>
+  );
+
+  fireEvent.change(screen.getByLabelText('My label'), {target: {value: '#00ff00'}});
+
+  expect(handleChange).toHaveBeenCalledWith('#00ff00');
+});
+
+test('it renders and does not call onChange if readOnly', () => {
+  const handleChange = jest.fn();
+
+  render(
+    <>
+      <label htmlFor="myInput">My label</label>
+      <ColorInput id="myInput" readOnly={true} value="#ff0000" onChange={handleChange} />
+    </>
+  );
+
+  fireEvent.change(screen.getByLabelText('My label'), {target: {value: '#00ff00'}});
+
+  expect(handleChange).not.toHaveBeenCalledWith('#00ff00');
+});
+
+test('it displays an error icon when the color is invalid', () => {
+  render(
+    <>
+      <label htmlFor="myInput">My label</label>
+      <ColorInput id="myInput" value="not a valid color" />
+    </>
+  );
+
+  expect(screen.getByRole('alert')).toBeInTheDocument();
+});
+
+test('it accepts color without a leading #', () => {
+  render(
+    <>
+      <label htmlFor="myInput">My label</label>
+      <ColorInput id="myInput" value="00ff00" />
+    </>
+  );
+
+  expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+});
+
+test('ColorInput supports forwardRef', () => {
+  const ref = {current: null};
+
+  render(<ColorInput value="#ff0000" onChange={jest.fn()} ref={ref} />);
+
+  expect(ref.current).not.toBe(null);
+});
+
+test('ColorInput supports ...rest props', () => {
+  render(<ColorInput value="#ff0000" onChange={jest.fn()} data-testid="my_value" />);
+
+  expect(screen.getByTestId('my_value')).toBeInTheDocument();
+});

package/src/components/Input/index.ts

@@ -1,5 +1,6 @@
 export * from './BooleanInput/BooleanInput';
 export * from './common';
+export * from './ColorInput/ColorInput';
 export * from './MediaFileInput/FileInfo';
 export * from './MediaFileInput/MediaFileInput';
 export * from './MediaLinkInput/MediaLinkInput';

package/src/shared/key.ts

@@ -1,6 +1,7 @@
 enum Key {
   Space = ' ',
   Enter = 'Enter',
+  NumpadEnter = 'NumpadEnter',
   Backspace = 'Backspace',
   Escape = 'Escape',
   ArrowLeft = 'ArrowLeft',