akeneo-design-system 0.1.228 → 0.1.230

package/lib/icons/ChecklistIcon.js

@@ -0,0 +1,38 @@
+"use strict";
+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 __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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChecklistIcon = void 0;
+var react_1 = __importDefault(require("react"));
+var ChecklistIcon = function (_a) {
+    var title = _a.title, _b = _a.size, size = _b === void 0 ? 24 : _b, _c = _a.color, color = _c === void 0 ? 'currentColor' : _c, props = __rest(_a, ["title", "size", "color"]);
+    return (react_1.default.createElement("svg", __assign({ viewBox: "0 0 24 24", width: size, height: size }, props),
+        title && react_1.default.createElement("title", null, title),
+        react_1.default.createElement("g", { stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", strokeLinecap: "round", strokeLinejoin: "round" },
+            react_1.default.createElement("path", { d: "M9.48723 4.21967C9.78012 4.51256 9.78012 4.98744 9.48723 5.28033L6.0564 8.71115C5.37299 9.39457 4.26495 9.39457 3.58153 8.71115L2.21967 7.3493C1.92678 7.0564 1.92678 6.58153 2.21967 6.28864C2.51256 5.99574 2.98744 5.99574 3.28033 6.28864L4.64219 7.65049C4.73982 7.74812 4.89811 7.74813 4.99574 7.65049L8.42657 4.21967C8.71946 3.92678 9.19433 3.92678 9.48723 4.21967ZM12 6.68066C12 6.40452 12.2239 6.18066 12.5 6.18066H21.5C21.7761 6.18066 22 6.40452 22 6.68066C22 6.95681 21.7761 7.18066 21.5 7.18066H12.5C12.2239 7.18066 12 6.95681 12 6.68066ZM10 12.6807C10 12.4045 10.2239 12.1807 10.5 12.1807H21.5C21.7761 12.1807 22 12.4045 22 12.6807C22 12.9568 21.7761 13.1807 21.5 13.1807H10.5C10.2239 13.1807 10 12.9568 10 12.6807ZM10 18.6807C10 18.4045 10.2239 18.1807 10.5 18.1807H21.5C21.7761 18.1807 22 18.4045 22 18.6807C22 18.9568 21.7761 19.1807 21.5 19.1807H10.5C10.2239 19.1807 10 18.9568 10 18.6807ZM6.47409 18.681C6.47409 17.9954 5.91831 17.4396 5.23271 17.4396C4.54712 17.4396 3.99133 17.9954 3.99133 18.681C3.99133 19.3666 4.54712 19.9224 5.23271 19.9224C5.91831 19.9224 6.47409 19.3666 6.47409 18.681ZM6.47409 12.6807C6.47409 11.9951 5.91831 11.4393 5.23271 11.4393C4.54712 11.4393 3.99133 11.9951 3.99133 12.6807C3.99133 13.3663 4.54712 13.922 5.23271 13.922C5.91831 13.922 6.47409 13.3663 6.47409 12.6807Z", stroke: color }))));
+};
+exports.ChecklistIcon = ChecklistIcon;
+//# sourceMappingURL=ChecklistIcon.js.map

package/lib/icons/ChecklistIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChecklistIcon.js","sourceRoot":"","sources":["../../src/icons/ChecklistIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAG1B,IAAM,aAAa,GAAG,UAAC,EAA+D;IAA9D,IAAA,KAAK,WAAA,EAAE,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EAAE,aAAsB,EAAtB,KAAK,mBAAG,cAAc,KAAA,EAAK,KAAK,cAAnD,0BAAoD,CAAD;IAAiB,OAAA,CACzF,gDAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,IAAM,KAAK;QAC1D,KAAK,IAAI,6CAAQ,KAAK,CAAS;QAChC,qCAAG,MAAM,EAAC,MAAM,EAAC,WAAW,EAAC,GAAG,EAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO;YAC1G,wCACE,CAAC,EAAC,kyCAAkyC,EACpyC,MAAM,EAAE,KAAK,GACb,CACA,CACA,CACP,CAAA;CAAA,CAAC;AAEM,sCAAa"}

package/lib/icons/WorkflowIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IconProps } from './IconProps';
+declare const WorkflowIcon: ({ title, size, color, ...props }: IconProps) => React.JSX.Element;
+export { WorkflowIcon };

package/lib/icons/WorkflowIcon.js

@@ -0,0 +1,40 @@
+"use strict";
+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 __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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WorkflowIcon = void 0;
+var react_1 = __importDefault(require("react"));
+var WorkflowIcon = function (_a) {
+    var title = _a.title, _b = _a.size, size = _b === void 0 ? 24 : _b, _c = _a.color, color = _c === void 0 ? 'currentColor' : _c, props = __rest(_a, ["title", "size", "color"]);
+    return (react_1.default.createElement("svg", __assign({ viewBox: "0 0 24 24", width: size, height: size }, props),
+        react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.1379 5.49999H8V4.49999H17.1379C19.2709 4.49999 21 6.29085 21 8.49999C21 10.7091 19.2709 12.5 17.1379 12.5H14V11.5H17.1379C18.7377 11.5 20.0345 10.1568 20.0345 8.49999C20.0345 6.84313 18.7377 5.49999 17.1379 5.49999Z", fill: color }),
+        react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.88571 18H19.3408L19.83 18.5L19.3408 19H5.88571C3.73969 19 2 17.7091 2 15.5C2 13.2908 3.73969 11.5 5.88571 11.5H8V12.5H5.88571C4.2762 12.5 2.97143 13.8431 2.97143 15.5C2.97143 17.1568 4.2762 18 5.88571 18Z", fill: color }),
+        react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7 3H3L3 7H7V3ZM3 2C2.44772 2 2 2.44772 2 3V7C2 7.55228 2.44772 8 3 8H7C7.55228 8 8 7.55228 8 7V3C8 2.44772 7.55228 2 7 2H3Z", fill: color }),
+        react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13 10.2H9V13.8H13V10.2ZM9 9C8.44772 9 8 9.53726 8 10.2V13.8C8 14.4627 8.44772 15 9 15H13C13.5523 15 14 14.4627 14 13.8V10.2C14 9.53726 13.5523 9 13 9H9Z", fill: color }),
+        react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M20.8731 18.1966C21.0423 18.3695 21.0423 18.6305 20.8731 18.8034L18.8731 20.8476C18.6893 21.0355 18.3733 21.0519 18.1672 20.8843C17.9611 20.7168 17.9431 20.4286 18.1269 20.2407L19.83 18.5L18.1269 16.7593C17.9431 16.5714 17.9611 16.2832 18.1672 16.1157C18.3733 15.9481 18.6893 15.9645 18.8731 16.1524L20.8731 18.1966Z", fill: color })));
+};
+exports.WorkflowIcon = WorkflowIcon;
+//# sourceMappingURL=WorkflowIcon.js.map

package/lib/icons/WorkflowIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkflowIcon.js","sourceRoot":"","sources":["../../src/icons/WorkflowIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAG1B,IAAM,YAAY,GAAG,UAAC,EAA+D;IAA9D,IAAA,KAAK,WAAA,EAAE,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EAAE,aAAsB,EAAtB,KAAK,mBAAG,cAAc,KAAA,EAAK,KAAK,cAAnD,0BAAoD,CAAD;IAAiB,OAAA,CACxF,gDAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,IAAM,KAAK;QAC3D,wCACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,6NAA6N,EAC/N,IAAI,EAAE,KAAK,GACX;QACF,wCACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,iNAAiN,EACnN,IAAI,EAAE,KAAK,GACX;QACF,wCACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,8HAA8H,EAChI,IAAI,EAAE,KAAK,GACX;QACF,wCACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,2JAA2J,EAC7J,IAAI,EAAE,KAAK,GACX;QACF,wCACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,8TAA8T,EAChU,IAAI,EAAE,KAAK,GACX,CACE,CACP,CAAA;CAAA,CAAC;AAEM,oCAAY"}

package/lib/icons/index.d.ts

@@ -51,6 +51,7 @@ export * from './DownloadIcon';
 export * from './DragDropIcon';
 export * from './EditIcon';
 export * from './EntityIcon';
+export * from './ChecklistIcon';
 export * from './EntityMultiIcon';
 export * from './EraseIcon';
 export * from './ExpandIcon';
@@ -119,3 +120,4 @@ export * from './UserIcon';
 export * from './ValueIcon';
 export * from './ViewIcon';
 export * from './WaveIcon';
+export * from './WorkflowIcon';

package/lib/icons/index.js

@@ -63,6 +63,7 @@ __exportStar(require("./DownloadIcon"), exports);
 __exportStar(require("./DragDropIcon"), exports);
 __exportStar(require("./EditIcon"), exports);
 __exportStar(require("./EntityIcon"), exports);
+__exportStar(require("./ChecklistIcon"), exports);
 __exportStar(require("./EntityMultiIcon"), exports);
 __exportStar(require("./EraseIcon"), exports);
 __exportStar(require("./ExpandIcon"), exports);
@@ -131,4 +132,5 @@ __exportStar(require("./UserIcon"), exports);
 __exportStar(require("./ValueIcon"), exports);
 __exportStar(require("./ViewIcon"), exports);
 __exportStar(require("./WaveIcon"), exports);
+__exportStar(require("./WorkflowIcon"), exports);
 //# sourceMappingURL=index.js.map

package/lib/icons/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/icons/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,iDAA+B;AAC/B,qDAAmC;AACnC,+CAA6B;AAC7B,8CAA4B;AAC5B,kDAAgC;AAChC,kDAAgC;AAChC,mDAAiC;AACjC,sDAAoC;AACpC,gDAA8B;AAC9B,+CAA6B;AAC7B,wDAAsC;AACtC,kDAAgC;AAChC,yDAAuC;AACvC,sDAAoC;AACpC,sDAAoC;AACpC,6DAA2C;AAC3C,wDAAsC;AACtC,uDAAqC;AACrC,wDAAsC;AACtC,sDAAoC;AACpC,0DAAwC;AACxC,kDAAgC;AAChC,6CAA2B;AAC3B,4CAA0B;AAC1B,mDAAiC;AACjC,8CAA4B;AAC5B,iDAA+B;AAC/B,sDAAoC;AACpC,6CAA2B;AAC3B,iDAA+B;AAC/B,8CAA4B;AAC5B,qDAAmC;AACnC,mDAAiC;AACjC,8CAA4B;AAC5B,8CAA4B;AAC5B,6CAA2B;AAC3B,+CAA6B;AAC7B,gDAA8B;AAC9B,kDAAgC;AAChC,oDAAkC;AAClC,gDAA8B;AAC9B,6CAA2B;AAC3B,gDAA8B;AAC9B,+CAA6B;AAC7B,oDAAkC;AAClC,6CAA2B;AAC3B,+CAA6B;AAC7B,+CAA6B;AAC7B,mDAAiC;AACjC,iDAA+B;AAC/B,iDAA+B;AAC/B,6CAA2B;AAC3B,+CAA6B;AAC7B,oDAAkC;AAClC,8CAA4B;AAC5B,+CAA6B;AAC7B,yDAAuC;AACvC,qDAAmC;AACnC,gDAA8B;AAC9B,6CAA2B;AAC3B,gDAA8B;AAC9B,iDAA+B;AAC/B,gDAA8B;AAC9B,+CAA6B;AAC7B,iDAA+B;AAC/B,oDAAkC;AAClC,kDAAgC;AAChC,oDAAkC;AAClC,gDAA8B;AAC9B,qDAAmC;AACnC,6CAA2B;AAC3B,mDAAiC;AACjC,6CAA2B;AAC3B,+CAA6B;AAC7B,6CAA2B;AAC3B,kDAAgC;AAChC,8CAA4B;AAC5B,2CAAyB;AACzB,6CAA2B;AAC3B,kDAAgC;AAChC,iDAA+B;AAC/B,4CAA0B;AAC1B,8CAA4B;AAC5B,6CAA2B;AAC3B,6CAA2B;AAC3B,+CAA6B;AAC7B,+CAA6B;AAC7B,6CAA2B;AAC3B,6CAA2B;AAC3B,kDAAgC;AAChC,kDAAgC;AAChC,+CAA6B;AAC7B,+CAA6B;AAC7B,6CAA2B;AAC3B,qDAAmC;AACnC,qDAAmC;AACnC,mDAAiC;AACjC,kDAAgC;AAChC,6CAA2B;AAC3B,6CAA2B;AAC3B,0DAAwC;AACxC,gDAA8B;AAC9B,qDAAmC;AACnC,gDAA8B;AAC9B,gDAA8B;AAC9B,4CAA0B;AAC1B,+CAA6B;AAC7B,gDAA8B;AAC9B,iDAA+B;AAC/B,6CAA2B;AAC3B,iDAA+B;AAC/B,+CAA6B;AAC7B,8CAA4B;AAC5B,4CAA0B;AAC1B,kDAAgC;AAChC,+CAA6B;AAC7B,+CAA6B;AAC7B,6CAA2B;AAC3B,8CAA4B;AAC5B,6CAA2B;AAC3B,6CAA2B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/icons/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,iDAA+B;AAC/B,qDAAmC;AACnC,+CAA6B;AAC7B,8CAA4B;AAC5B,kDAAgC;AAChC,kDAAgC;AAChC,mDAAiC;AACjC,sDAAoC;AACpC,gDAA8B;AAC9B,+CAA6B;AAC7B,wDAAsC;AACtC,kDAAgC;AAChC,yDAAuC;AACvC,sDAAoC;AACpC,sDAAoC;AACpC,6DAA2C;AAC3C,wDAAsC;AACtC,uDAAqC;AACrC,wDAAsC;AACtC,sDAAoC;AACpC,0DAAwC;AACxC,kDAAgC;AAChC,6CAA2B;AAC3B,4CAA0B;AAC1B,mDAAiC;AACjC,8CAA4B;AAC5B,iDAA+B;AAC/B,sDAAoC;AACpC,6CAA2B;AAC3B,iDAA+B;AAC/B,8CAA4B;AAC5B,qDAAmC;AACnC,mDAAiC;AACjC,8CAA4B;AAC5B,8CAA4B;AAC5B,6CAA2B;AAC3B,+CAA6B;AAC7B,gDAA8B;AAC9B,kDAAgC;AAChC,oDAAkC;AAClC,gDAA8B;AAC9B,6CAA2B;AAC3B,gDAA8B;AAC9B,+CAA6B;AAC7B,oDAAkC;AAClC,6CAA2B;AAC3B,+CAA6B;AAC7B,+CAA6B;AAC7B,mDAAiC;AACjC,iDAA+B;AAC/B,iDAA+B;AAC/B,6CAA2B;AAC3B,+CAA6B;AAC7B,kDAAgC;AAChC,oDAAkC;AAClC,8CAA4B;AAC5B,+CAA6B;AAC7B,yDAAuC;AACvC,qDAAmC;AACnC,gDAA8B;AAC9B,6CAA2B;AAC3B,gDAA8B;AAC9B,iDAA+B;AAC/B,gDAA8B;AAC9B,+CAA6B;AAC7B,iDAA+B;AAC/B,oDAAkC;AAClC,kDAAgC;AAChC,oDAAkC;AAClC,gDAA8B;AAC9B,qDAAmC;AACnC,6CAA2B;AAC3B,mDAAiC;AACjC,6CAA2B;AAC3B,+CAA6B;AAC7B,6CAA2B;AAC3B,kDAAgC;AAChC,8CAA4B;AAC5B,2CAAyB;AACzB,6CAA2B;AAC3B,kDAAgC;AAChC,iDAA+B;AAC/B,4CAA0B;AAC1B,8CAA4B;AAC5B,6CAA2B;AAC3B,6CAA2B;AAC3B,+CAA6B;AAC7B,+CAA6B;AAC7B,6CAA2B;AAC3B,6CAA2B;AAC3B,kDAAgC;AAChC,kDAAgC;AAChC,+CAA6B;AAC7B,+CAA6B;AAC7B,6CAA2B;AAC3B,qDAAmC;AACnC,qDAAmC;AACnC,mDAAiC;AACjC,kDAAgC;AAChC,6CAA2B;AAC3B,6CAA2B;AAC3B,0DAAwC;AACxC,gDAA8B;AAC9B,qDAAmC;AACnC,gDAA8B;AAC9B,gDAA8B;AAC9B,4CAA0B;AAC1B,+CAA6B;AAC7B,gDAA8B;AAC9B,iDAA+B;AAC/B,6CAA2B;AAC3B,iDAA+B;AAC/B,+CAA6B;AAC7B,8CAA4B;AAC5B,4CAA0B;AAC1B,kDAAgC;AAChC,+CAA6B;AAC7B,+CAA6B;AAC7B,6CAA2B;AAC3B,8CAA4B;AAC5B,6CAA2B;AAC3B,6CAA2B;AAC3B,iDAA+B"}

package/package.json

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

package/src/components/Dropdown/Item/Item.tsx

@@ -193,6 +193,7 @@ const Item = React.forwardRef<HTMLDivElement, ItemProps>(
         disabled={disabled}
         aria-disabled={disabled}
         isActive={isActive}
+        title={title}
         {...rest}
         ref={forwardedRef}
       >

package/src/components/Input/MultiSelectInput/ChipInput.tsx

@@ -24,7 +24,9 @@ const Container = styled.ul<AkeneoThemedProps & {invalid: boolean}>`
   }
 `;
 
-const Chip = styled.li<AkeneoThemedProps & {isSelected: boolean; readOnly: boolean; isErrored: boolean}>`
+const Chip = styled.li<
+  AkeneoThemedProps & {isSelected: boolean; readOnly: boolean; isErrored: boolean; isLocked: boolean}
+>`
   list-style-type: none;
   padding: 3px 15px;
   padding-left: ${({readOnly}) => (readOnly ? '15px' : '4px')};
@@ -35,8 +37,8 @@ const Chip = styled.li<AkeneoThemedProps & {isSelected: boolean; readOnly: boole
   align-items: center;
   height: 30px;
   box-sizing: border-box;
-  color: ${({readOnly, isErrored}) =>
-    isErrored ? getColor('red', 100) : readOnly ? getColor('grey', 100) : getColor('grey', 140)};
+  color: ${({readOnly, isErrored, isLocked}) =>
+    isErrored ? getColor('red', 100) : readOnly || isLocked ? getColor('grey', 100) : getColor('grey', 140)};
 `;
 
 const Input = styled.input`
@@ -76,6 +78,10 @@ const ReadOnlyIcon = styled(LockIcon)`
   color: ${getColor('grey', 100)};
 `;
 
+const LockedValueIcon = styled(LockIcon)`
+  padding-right: 5px;
+`;
+
 const RemoveButton = styled(IconButton)<AkeneoThemedProps & {isErrored: boolean}>`
   background-color: transparent;
   margin-left: -3px;
@@ -100,6 +106,7 @@ type ChipInputProps = {
   onRemove: (chipCode: string) => void;
   onSearchChange: (searchValue: string) => void;
   onFocus?: () => void;
+  lockedValues?: string[];
 };
 
 const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
@@ -116,6 +123,7 @@ const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
       onRemove,
       onSearchChange,
       onFocus,
+      lockedValues,
     }: ChipInputProps,
     forwardedRef: Ref<HTMLInputElement>
   ) => {
@@ -148,10 +156,11 @@ const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
           <Chip
             key={chip.code}
             readOnly={readOnly}
+            isLocked={lockedValues?.includes(chip.code)}
             isErrored={invalidValue.includes(chip.code)}
             isSelected={index === value.length - 1 && isLastSelected}
           >
-            {!readOnly && (
+            {!readOnly && !lockedValues?.includes(chip.code) && (
               <RemoveButton
                 title={removeLabel}
                 ghost="borderless"
@@ -162,6 +171,7 @@ const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
                 isErrored={invalidValue.includes(chip.code)}
               />
             )}
+            {lockedValues?.includes(chip.code) && <LockedValueIcon size={16} />}
             {chip.label}
           </Chip>
         ))}

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

@@ -102,6 +102,30 @@ The placeholder text provides tips or examples of items to enter. Placeholder te
   </Story>
 </Canvas>
 
+## Variation on locked values
+
+<Canvas>
+  <Story name="LockedValues">
+    {args => {
+      const [value, setValue] = useState(['en_US', 'fr_FR', 'de_DE']);
+      return (
+          <MultiSelectInput
+            value={value}
+            placeholder="Placeholder"
+            emptyResultLabel="No match found"
+            lockedValues={['en_US', 'fr_FR']}
+            onChange={setValue}
+          >
+            <MultiSelectInput.Option value="en_US">English (United States)</MultiSelectInput.Option>
+            <MultiSelectInput.Option value="fr_FR">French (France)</MultiSelectInput.Option>
+            <MultiSelectInput.Option value="de_DE">German (Germany)</MultiSelectInput.Option>
+            <MultiSelectInput.Option value="es_ES">Spanish (Spain)</MultiSelectInput.Option>
+          </MultiSelectInput>
+      );
+    }}
+  </Story>
+</Canvas>
+
 ## Variation on invalid
 
 <Canvas>

package/src/components/Input/MultiSelectInput/MultiSelectInput.tsx

@@ -146,6 +146,11 @@ type MultiMultiSelectInputProps = Override<
      */
     verticalPosition?: VerticalPosition;
 
+    /**
+     * Values that cannot be unselected
+     */
+    lockedValues?: string[];
+
     /**
      * Callback called when the user hit enter on the field.
      */
@@ -191,6 +196,7 @@ const MultiSelectInput = ({
   onNextPage,
   onSearchChange,
   disableInternalSearch = false,
+  lockedValues = [],
   'aria-labelledby': ariaLabelledby,
   ...rest
 }: MultiMultiSelectInputProps) => {
@@ -289,6 +295,7 @@ const MultiSelectInput = ({
           onSearchChange={handleSearch}
           onRemove={handleRemove}
           onFocus={handleFocus}
+          lockedValues={lockedValues}
         />
         {!readOnly && (
           <ActionContainer>

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

@@ -326,6 +326,26 @@ test('MultiSelectInput supports ...rest props', () => {
   expect(screen.getByTestId('my_value')).toBeInTheDocument();
 });
 
+test('MultiSelectInput supports locked values prop', () => {
+  const onChange = jest.fn();
+  render(
+    <MultiSelectInput
+      value={['fr_FR', 'en_US']}
+      data-testid="my_value"
+      removeLabel="Remove"
+      openLabel="Open"
+      emptyResultLabel="Empty result"
+      onChange={onChange}
+      lockedValues={['fr_FR']}
+    >
+      <MultiSelectInput.Option value="en_US">English</MultiSelectInput.Option>
+      <MultiSelectInput.Option value="fr_FR">French</MultiSelectInput.Option>
+      <MultiSelectInput.Option value="es_ES">Spanish</MultiSelectInput.Option>
+    </MultiSelectInput>
+  );
+  expect(screen.getByTestId('my_value')).toBeInTheDocument();
+});
+
 test('MultiSelectInput does not support duplicated options', () => {
   const mockConsole = jest.spyOn(console, 'error').mockImplementation();
   expect(() => {

package/src/components/KeyFigure/KeyFigure.stories.mdx

@@ -1,6 +1,7 @@
 import {Meta, Story, ArgsTable, Canvas} from '@storybook/addon-docs';
 import {KeyFigure, KeyFigureGrid} from './KeyFigure';
 import * as Icons from '../../icons';
+import {Tooltip} from '../Tooltip/Tooltip';
 
 <Meta
   title="Components/KeyFigure"
@@ -71,7 +72,10 @@ Key figures are used in dashboards to illustrate metrics.
             <KeyFigure.Figure>123</KeyFigure.Figure>
           </KeyFigure>
           <KeyFigure icon={React.createElement(Icons[args.icon])} title="Key figure 3">
-            <KeyFigure.Figure>456</KeyFigure.Figure>
+            <KeyFigure.Figure>
+              456
+              <Tooltip iconSize={16}>More informations on this figure</Tooltip>
+            </KeyFigure.Figure>
           </KeyFigure>
           <KeyFigure icon={React.createElement(Icons[args.icon])} title="Key figure 4">
             <KeyFigure.Figure label="Average:">789454</KeyFigure.Figure>

package/src/components/KeyFigure/KeyFigure.tsx

@@ -12,6 +12,8 @@ const FigureContainer = styled.div`
   color: ${getColor('brand', 100)};
   font-size: 16px;
   margin: 0 15px 0 3px;
+  display: flex;
+  align-items: center;
 
   :only-child {
     margin: 0;

package/src/components/ProgressBar/ProgressBar.tsx

@@ -14,11 +14,8 @@ const progressBarAnimation = keyframes`
 
 const Header = styled.div`
   display: flex;
-  align-items: stretch;
-  flex-direction: row;
   font-size: ${getFontSize('default')};
-  flex-flow: row wrap;
-  margin-bottom: -4px;
+  justify-content: space-between;
 `;
 
 const Title = styled.div`
@@ -27,24 +24,11 @@ const Title = styled.div`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 100%;
-  flex-grow: 1;
-  margin-bottom: 4px;
-
-  /* When header div is greater than 300px the flex-basic is negative, progress label is on same line */
-  /* When header div is lower than 300px the flex-basic is positive, progress label is move to new line */
-  flex-basis: calc((301px - 100%) * 999);
 `;
 
 const ProgressLabel = styled.div`
   color: ${getColor('grey', 120)};
-  flex-grow: 0;
-  flex-basis: auto;
-  flex-shrink: 1;
-  margin-bottom: 4px;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 `;
 
 const ProgressBarBackground = styled.div<{size: ProgressBarSize} & AkeneoThemedProps>`
@@ -177,11 +161,9 @@ const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
       <ProgressBarContainer ref={forwardedRef} {...rest}>
         {(title || progressLabel) && (
           <Header>
-            {title && (
-              <Title title={title} id={labelId} htmlFor={progressBarId}>
-                {title}
-              </Title>
-            )}
+            <Title title={title} id={labelId} htmlFor={progressBarId}>
+              {title}
+            </Title>
             {progressLabel && <ProgressLabel title={progressLabel}>{progressLabel}</ProgressLabel>}
           </Header>
         )}

package/src/components/SwitcherButton/SwitcherButton.tsx

@@ -112,7 +112,7 @@ const SwitcherButton = forwardRef<HTMLDivElement, SwitcherButtonProps>(
 
     return (
       <SwitcherButtonContainer ref={forwardedRef} {...rest}>
-        <LabelAndValueContainer id={buttonId} onClick={onClick} $inline={inline}>
+        <LabelAndValueContainer type="button" id={buttonId} onClick={onClick} $inline={inline}>
           <Label htmlFor={buttonId} $inline={inline}>
             {label ? (inline ? `${label}:` : label) : ''}
           </Label>

package/src/components/Table/Table.stories.mdx

@@ -487,14 +487,14 @@ If you want your `Table.Header` to stay on top when scrolling in the Table, just
   </Story>
 </Canvas>
 
-## Table with warning rows
+## Table with warning and locked rows
 
 <Canvas>
-    <Story name="Warning rows">
+    <Story name="Warning and locked rows">
         {args => {
             return (
                 <Scrollable height={250}>
-                    <Table hasWarningRows={true}>
+                    <Table hasWarningRows={true} hasLockedRows={true}>
                         <Table.Header sticky={0}>
                             <Table.HeaderCell>Name</Table.HeaderCell>
                             <Table.HeaderCell>Family</Table.HeaderCell>
@@ -504,6 +504,20 @@ If you want your `Table.Header` to stay on top when scrolling in the Table, just
                             <Table.HeaderCell>Actions</Table.HeaderCell>
                         </Table.Header>
                         <Table.Body>
+                            <Table.Row level="tertiary">
+                                <Table.Cell rowTitle={args.displayRowTitle}>Giant panda</Table.Cell>
+                                <Table.Cell>Ursidae</Table.Cell>
+                                <Table.Cell>Carnivora</Table.Cell>
+                                <Table.Cell>Ursus</Table.Cell>
+                                <Table.Cell>
+                                    <Badge level="warning">vu</Badge>
+                                </Table.Cell>
+                                <Table.ActionCell>
+                                    <Button level="primary" ghost>
+                                        Button
+                                    </Button>
+                                </Table.ActionCell>
+                            </Table.Row>
                             <Table.Row level="warning">
                                 <Table.Cell rowTitle={args.displayRowTitle}>Giant panda</Table.Cell>
                                 <Table.Cell>Ursidae</Table.Cell>

package/src/components/Table/Table.tsx

@@ -27,6 +27,11 @@ type TableProps = Override<
      */
     hasWarningRows?: boolean;
 
+    /**
+     * Define if the table has some locked rows.
+     */
+    hasLockedRows?: boolean;
+
     /**
      * Define if the checkbox should be always displayed or displayed on hover.
      * This props should be true when one element is checked.
@@ -66,6 +71,7 @@ type TableProps = Override<
 const Table = ({
   isSelectable = false,
   hasWarningRows = false,
+  hasLockedRows = false,
   displayCheckbox = false,
   isDragAndDroppable = false,
   onReorder = undefined,
@@ -73,8 +79,8 @@ const Table = ({
   ...rest
 }: TableProps) => {
   const providerValue = useMemo(
-    () => ({isSelectable, hasWarningRows, displayCheckbox, isDragAndDroppable, onReorder}),
-    [isSelectable, hasWarningRows, displayCheckbox, isDragAndDroppable, onReorder]
+    () => ({isSelectable, hasWarningRows, hasLockedRows, displayCheckbox, isDragAndDroppable, onReorder}),
+    [isSelectable, hasWarningRows, hasLockedRows, displayCheckbox, isDragAndDroppable, onReorder]
   );
 
   return (

package/src/components/Table/TableContext.ts

@@ -3,6 +3,7 @@ import {createContext} from 'react';
 type TableContextType = {
   isSelectable: boolean;
   hasWarningRows: boolean;
+  hasLockedRows: boolean;
   displayCheckbox: boolean;
   isDragAndDroppable: boolean;
   onReorder: ((reorderedIndices: number[]) => void) | undefined;
@@ -11,6 +12,7 @@ type TableContextType = {
 const TableContext = createContext<TableContextType>({
   isSelectable: false,
   hasWarningRows: false,
+  hasLockedRows: false,
   displayCheckbox: false,
   isDragAndDroppable: false,
   onReorder: undefined,

package/src/components/Table/TableHeader/TableHeader.tsx

@@ -23,6 +23,10 @@ const HasWarningColumn = styled.th`
   width: 20px;
   background: linear-gradient(to top, ${getColor('grey', 120)} 1px, ${getColor('white')} 0px);
 `;
+const HasLockedColumn = styled.th`
+  width: 20px;
+  background: linear-gradient(to top, ${getColor('grey', 120)} 1px, ${getColor('white')} 0px);
+`;
 const OrderColumn = styled.th`
   width: 40px;
   background: linear-gradient(to top, ${getColor('grey', 120)} 1px, ${getColor('white')} 0px);
@@ -42,7 +46,7 @@ type TableHeaderProps = {
 
 const TableHeader = React.forwardRef<HTMLTableSectionElement, TableHeaderProps>(
   ({children, sticky, ...rest}: TableHeaderProps, forwardedRef: Ref<HTMLTableSectionElement>) => {
-    const {isSelectable, isDragAndDroppable, hasWarningRows} = React.useContext(TableContext);
+    const {isSelectable, isDragAndDroppable, hasWarningRows, hasLockedRows} = React.useContext(TableContext);
 
     return (
       <TableHead sticky={sticky} ref={forwardedRef}>
@@ -52,6 +56,7 @@ const TableHeader = React.forwardRef<HTMLTableSectionElement, TableHeaderProps>(
           {hasWarningRows && <HasWarningColumn />}
           {isDragAndDroppable && <OrderColumn />}
           {children}
+          {hasLockedRows && <HasLockedColumn />}
         </tr>
       </TableHead>
     );

package/src/components/Table/TableRow/TableRow.tsx

@@ -14,10 +14,10 @@ import {Checkbox} from '../../../components';
 import {Override} from '../../../shared';
 import {TableContext} from '../TableContext';
 import {TableCell} from '../TableCell/TableCell';
-import {RowIcon, DangerIcon} from '../../../icons';
+import {RowIcon, DangerIcon, LockIcon} from '../../../icons';
 import {PlaceholderPosition, usePlaceholderPosition} from '../../../hooks/usePlaceholderPosition';
 
-type Level = 'warning';
+type Level = 'warning' | 'tertiary';
 
 const RowContainer = styled.tr<
   {
@@ -78,15 +78,22 @@ const RowContainer = styled.tr<
   }
 
   ${({level}) =>
-    level === 'warning' &&
-    css`
-      > td {
-        :first-child {
-          padding: 0 0 0 5px;
-        }
-        background-color: ${getColor('yellow', 10)};
-      }
-    `};
+    level === 'warning'
+      ? css`
+          > td {
+            :first-child {
+              padding: 0 0 0 5px;
+            }
+            background-color: ${getColor('yellow', 10)};
+          }
+        `
+      : level === 'tertiary' &&
+        css`
+          > td {
+            background-color: ${getColor('grey', 20)};
+            color: ${getColor('grey', 120)};
+          }
+        `};
 `;
 
 const CheckboxContainer = styled.td<{isVisible: boolean}>`
@@ -112,6 +119,15 @@ const HandleCell = styled(TableCell)`
   }
 `;
 
+const getIcon = (level: Level) => {
+  switch (level) {
+    case 'warning':
+      return <WarningIcon />;
+    case 'tertiary':
+      return <LockIcon />;
+  }
+};
+
 const WarningIcon = styled(DangerIcon)`
   color: ${getColor('yellow', 120)};
 `;
@@ -180,7 +196,7 @@ const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
     const [placeholderPosition, placeholderDragEnter, placeholderDragLeave, placeholderDragEnd] =
       usePlaceholderPosition(rowIndex);
 
-    const {isSelectable, displayCheckbox, isDragAndDroppable, hasWarningRows} = useContext(TableContext);
+    const {isSelectable, displayCheckbox, isDragAndDroppable, hasWarningRows, hasLockedRows} = useContext(TableContext);
     if (isSelectable && (undefined === isSelected || undefined === onSelectToggle)) {
       throw Error('A row in a selectable table should have the prop "isSelected" and "onSelectToggle"');
     }
@@ -240,8 +256,17 @@ const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
             <RowIcon size={16} />
           </HandleCell>
         )}
-        {hasWarningRows && <TableCell>{level === 'warning' && <WarningIcon size={16} />}</TableCell>}
+        {hasWarningRows && (
+          <TableCell>
+            {level === 'warning' && React.cloneElement(getIcon(level), {size: 16, 'data-testid': 'warning-icon'})}
+          </TableCell>
+        )}
         {children}
+        {hasLockedRows && (
+          <TableCell>
+            {level === 'tertiary' && React.cloneElement(getIcon(level), {size: 16, 'data-testid': 'lock-icon'})}
+          </TableCell>
+        )}
       </RowContainer>
     );
   }

package/src/components/Table/TableRow/TableRow.unit.tsx

@@ -101,3 +101,33 @@ test('Table.Row supports ...rest props', () => {
 
   expect(screen.getByTestId('my_value')).toBeInTheDocument();
 });
+
+test('it renders warning icon when row has a warning', () => {
+  render(
+    <Table hasWarningRows>
+      <Table.Body>
+        <Table.Row level="warning">
+          <Table.Cell>A value</Table.Cell>
+          <Table.Cell>Another value</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  );
+
+  expect(screen.getByTestId('warning-icon')).toBeInTheDocument();
+});
+
+test('it renders lock icon when row is locked', () => {
+  render(
+    <Table hasLockedRows>
+      <Table.Body>
+        <Table.Row level="tertiary">
+          <Table.Cell>A value</Table.Cell>
+          <Table.Cell>Another value</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  );
+
+  expect(screen.getByTestId('lock-icon')).toBeInTheDocument();
+});