akeneo-design-system 0.1.178 → 0.1.181

package/lib/components/Block/Block.d.ts

@@ -1,18 +1,21 @@
 import React, { ReactNode } from 'react';
 import { Override } from '../../shared';
 declare type BlockProps = Override<Override<React.ButtonHTMLAttributes<HTMLButtonElement>, React.AnchorHTMLAttributes<HTMLAnchorElement>>, {
-    action?: ReactNode;
+    title: string;
+    actions?: ReactNode;
     ariaLabel?: string;
     ariaLabelledBy?: string;
     ariaDescribedBy?: string;
     children?: ReactNode;
-}>;
-declare const Block: React.ForwardRefExoticComponent<Omit<Override<React.ButtonHTMLAttributes<HTMLButtonElement>, React.AnchorHTMLAttributes<HTMLAnchorElement>>, "children" | "ariaLabel" | "ariaLabelledBy" | "ariaDescribedBy" | "action"> & {
-    action?: ReactNode;
-    ariaLabel?: string | undefined;
-    ariaLabelledBy?: string | undefined;
-    ariaDescribedBy?: string | undefined;
-    children?: ReactNode;
-} & React.RefAttributes<HTMLButtonElement>>;
+} & ({
+    isOpen: boolean;
+    collapseButtonLabel: string;
+    onCollapse: (isOpen: boolean) => void;
+} | {
+    isOpen?: undefined;
+    collapseButtonLabel?: undefined;
+    onCollapse?: undefined;
+})>;
+declare const Block: React.ForwardRefExoticComponent<BlockProps & React.RefAttributes<HTMLButtonElement>>;
 export { Block };
 export type { BlockProps };

package/lib/components/Block/Block.js

@@ -44,35 +44,54 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Block = void 0;
 var react_1 = __importStar(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
+var styled_components_1 = __importStar(require("styled-components"));
 var theme_1 = require("../../theme");
+var icons_1 = require("../../icons");
 var IconButton_1 = require("../IconButton/IconButton");
-var ActionsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: none;\n  align-items: center;\n"], ["\n  display: none;\n  align-items: center;\n"])));
-var Container = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding: 0 20px;\n  border-style: solid;\n  border-width: 1px;\n  border-radius: 2px;\n  height: 50px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-family: inherit;\n  font-size: ", ";\n  font-weight: 400;\n\n  background-color: ", ";\n  border-color: ", ";\n  color: ", ";\n\n  &:hover {\n    background-color: ", ";\n    ", " {\n      display: flex;\n    }\n  }\n"], ["\n  box-sizing: border-box;\n  padding: 0 20px;\n  border-style: solid;\n  border-width: 1px;\n  border-radius: 2px;\n  height: 50px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-family: inherit;\n  font-size: ", ";\n  font-weight: 400;\n\n  background-color: ", ";\n  border-color: ", ";\n  color: ", ";\n\n  &:hover {\n    background-color: ", ";\n    ", " {\n      display: flex;\n    }\n  }\n"])), (0, theme_1.getFontSize)('default'), (0, theme_1.getColor)('white'), (0, theme_1.getColor)('grey', 80), (0, theme_1.getColor)('grey', 140), (0, theme_1.getColor)('grey', 20), ActionsContainer);
+var ANIMATION_DURATION = 100;
+var ActionsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  column-gap: 10px;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  align-items: center;\n  column-gap: 10px;\n  justify-content: space-between;\n"])));
+var BlockTitle = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: 24px;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: 24px;\n"])));
+var BlockContent = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  overflow-wrap: break-word;\n  white-space: break-spaces;\n  color: ", ";\n  margin-top: ", "px;\n  ", "\n"], ["\n  overflow-wrap: break-word;\n  white-space: break-spaces;\n  color: ", ";\n  margin-top: ", "px;\n  ", "\n"])), (0, theme_1.getColor)('grey', 140), function (_a) {
+    var $height = _a.$height, isCollapsable = _a.isCollapsable;
+    return (0 === $height && isCollapsable ? 0 : 5);
+}, function (_a) {
+    var isCollapsable = _a.isCollapsable, $height = _a.$height, $overflow = _a.$overflow, shouldAnimate = _a.shouldAnimate;
+    return isCollapsable && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      max-height: ", "px;\n      overflow: ", ";\n      ", "\n    "], ["\n      max-height: ", "px;\n      overflow: ", ";\n      ", "\n    "])), $height, $overflow, shouldAnimate && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        transition: all ", "ms ease-in-out;\n        transition-property: max-height, margin-top;\n      "], ["\n        transition: all ", "ms ease-in-out;\n        transition-property: max-height, margin-top;\n      "])), ANIMATION_DURATION));
+});
+var Container = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding: 10px 15px;\n  border-style: solid;\n  border-width: 1px;\n  border-radius: 2px;\n  display: flex;\n  flex-direction: column;\n  font-family: inherit;\n  font-size: ", ";\n  font-weight: 400;\n\n  background-color: ", ";\n  border-color: ", ";\n  color: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  box-sizing: border-box;\n  padding: 10px 15px;\n  border-style: solid;\n  border-width: 1px;\n  border-radius: 2px;\n  display: flex;\n  flex-direction: column;\n  font-family: inherit;\n  font-size: ", ";\n  font-weight: 400;\n\n  background-color: ", ";\n  border-color: ", ";\n  color: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), (0, theme_1.getFontSize)('default'), (0, theme_1.getColor)('white'), (0, theme_1.getColor)('grey', 80), (0, theme_1.getColor)('grey', 140), (0, theme_1.getColor)('grey', 20));
 var Block = react_1.default.forwardRef(function (_a, forwardedRef) {
-    var action = _a.action, ariaDescribedBy = _a.ariaDescribedBy, ariaLabel = _a.ariaLabel, ariaLabelledBy = _a.ariaLabelledBy, children = _a.children, rest = __rest(_a, ["action", "ariaDescribedBy", "ariaLabel", "ariaLabelledBy", "children"]);
+    var title = _a.title, actions = _a.actions, ariaDescribedBy = _a.ariaDescribedBy, ariaLabel = _a.ariaLabel, ariaLabelledBy = _a.ariaLabelledBy, isOpen = _a.isOpen, collapseButtonLabel = _a.collapseButtonLabel, onCollapse = _a.onCollapse, children = _a.children, rest = __rest(_a, ["title", "actions", "ariaDescribedBy", "ariaLabel", "ariaLabelledBy", "isOpen", "collapseButtonLabel", "onCollapse", "children"]);
+    var _b = (0, react_1.useState)(0), contentHeight = _b[0], setContentHeight = _b[1];
+    var _c = (0, react_1.useState)(false), shouldAnimate = _c[0], setShouldAnimate = _c[1];
+    var contentRef = (0, react_1.useRef)(null);
+    var isCollapsable = undefined !== collapseButtonLabel && undefined !== onCollapse && undefined !== isOpen;
+    var handleCollapse = function () { return onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse(!isOpen); };
+    (0, react_1.useEffect)(function () {
+        if (!isCollapsable)
+            return;
+        setContentHeight(function (contentHeight) {
+            var _a, _b;
+            var scrollHeight = (_b = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight) !== null && _b !== void 0 ? _b : 0;
+            return 0 === scrollHeight ? contentHeight : scrollHeight;
+        });
+        var shouldAnimateTimeoutId = window.setTimeout(function () {
+            setShouldAnimate(true);
+        }, ANIMATION_DURATION);
+        return function () {
+            window.clearTimeout(shouldAnimateTimeoutId);
+        };
+    }, [children]);
     return (react_1.default.createElement(Container, __assign({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref: forwardedRef }, rest),
-        react_1.default.createElement("div", null, react_1.default.Children.map(children, function (child) {
-            var _a;
-            if ((0, react_1.isValidElement)(child)) {
-                return react_1.default.cloneElement(child, { size: (_a = child.props.size) !== null && _a !== void 0 ? _a : 18 });
-            }
-            return child;
-        })),
-        react_1.default.createElement(ActionsContainer, null, (0, react_1.isValidElement)(action) && action.type === IconButton_1.IconButton
-            ? (0, react_1.cloneElement)(action, {
-                level: 'tertiary',
-                ghost: 'borderless',
-                size: 'small',
-            })
-            : action)));
+        react_1.default.createElement(BlockTitle, null,
+            title,
+            react_1.default.createElement(ActionsContainer, null,
+                actions,
+                !isCollapsable ? null : (react_1.default.createElement(IconButton_1.IconButton, { icon: isOpen ? react_1.default.createElement(icons_1.ArrowUpIcon, null) : react_1.default.createElement(icons_1.ArrowDownIcon, null), title: collapseButtonLabel, level: "tertiary", ghost: true, size: "small", onClick: handleCollapse })))),
+        !isCollapsable ? null : (react_1.default.createElement(BlockContent, { ref: contentRef, isCollapsable: isCollapsable, "$overflow": shouldAnimate || !isOpen ? 'hidden' : 'inherit', "$height": true === isOpen ? contentHeight : 0, shouldAnimate: shouldAnimate, "aria-hidden": !isOpen }, children))));
 });
 exports.Block = Block;
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
 //# sourceMappingURL=Block.js.map

package/lib/components/Block/Block.js.map

@@ -1 +1 @@
-{"version":3,"file":"Block.js","sourceRoot":"","sources":["../../../src/components/Block/Block.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA0E;AAC1E,wEAAuC;AACvC,qCAAqE;AAGrE,uDAAqE;AAgCrE,IAAM,gBAAgB,GAAG,2BAAM,CAAC,GAAG,iHAAA,8CAGlC,IAAA,CAAC;AAEF,IAAM,SAAS,GAAG,2BAAM,CAAC,GAAG,yfAAmB,4PAWhC,EAAsB,gDAGf,EAAiB,qBACrB,EAAoB,cAC3B,EAAqB,0CAGR,EAAoB,SACtC,EAAgB,wCAIrB,KAbc,IAAA,mBAAW,EAAC,SAAS,CAAC,EAGf,IAAA,gBAAQ,EAAC,OAAO,CAAC,EACrB,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EAC3B,IAAA,gBAAQ,EAAC,MAAM,EAAE,GAAG,CAAC,EAGR,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EACtC,gBAAgB,CAIrB,CAAC;AAEF,IAAM,KAAK,GAAG,eAAK,CAAC,UAAU,CAC5B,UACE,EAAmF,EACnF,YAAoC;IADnC,IAAA,MAAM,YAAA,EAAE,eAAe,qBAAA,EAAE,SAAS,eAAA,EAAE,cAAc,oBAAA,EAAE,QAAQ,cAAA,EAAK,IAAI,cAAtE,wEAAuE,CAAD;IAGtE,OAAO,CACL,8BAAC,SAAS,iCACU,eAAe,gBACrB,SAAS,qBACJ,cAAc,EAC/B,GAAG,EAAE,YAAY,IACb,IAAI;QAER,2CACG,eAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAA,KAAK;;YACjC,IAAI,IAAA,sBAAc,EAAY,KAAK,CAAC,EAAE;gBACpC,OAAO,eAAK,CAAC,YAAY,CAAC,KAAK,EAAE,EAAC,IAAI,EAAE,MAAA,KAAK,CAAC,KAAK,CAAC,IAAI,mCAAI,EAAE,EAAC,CAAC,CAAC;aAClE;YAED,OAAO,KAAK,CAAC;QACf,CAAC,CAAC,CACE;QACN,8BAAC,gBAAgB,QACd,IAAA,sBAAc,EAAkB,MAAM,CAAC,IAAI,MAAM,CAAC,IAAI,KAAK,uBAAU;YACpE,CAAC,CAAC,IAAA,oBAAY,EAAC,MAAM,EAAE;gBACnB,KAAK,EAAE,UAAU;gBACjB,KAAK,EAAE,YAAY;gBACnB,IAAI,EAAE,OAAO;aACd,CAAC;YACJ,CAAC,CAAC,MAAM,CACO,CACT,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEM,sBAAK"}
+{"version":3,"file":"Block.js","sourceRoot":"","sources":["../../../src/components/Block/Block.tsx"],"names":[],"mappings":"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"}

package/lib/components/Table/Table.d.ts

@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 import { Override } from '../../shared';
 declare type TableProps = Override<React.HTMLAttributes<HTMLTableElement>, {
     isSelectable?: boolean;
+    hasWarningRows?: boolean;
     displayCheckbox?: boolean;
     children?: ReactNode;
 } & ({
@@ -12,7 +13,7 @@ declare type TableProps = Override<React.HTMLAttributes<HTMLTableElement>, {
     onReorder: (updatedIndices: number[]) => void;
 })>;
 declare const Table: {
-    ({ isSelectable, displayCheckbox, isDragAndDroppable, onReorder, children, ...rest }: TableProps): JSX.Element;
+    ({ isSelectable, hasWarningRows, displayCheckbox, isDragAndDroppable, onReorder, children, ...rest }: TableProps): JSX.Element;
     Header: React.ForwardRefExoticComponent<import("./TableHeader/TableHeader").TableHeaderProps & React.RefAttributes<HTMLTableSectionElement>>;
     HeaderCell: React.ForwardRefExoticComponent<{
         isSortable?: boolean | undefined;
@@ -21,10 +22,11 @@ declare const Table: {
         children?: React.ReactNode;
     } & React.RefAttributes<HTMLTableHeaderCellElement>>;
     Body: React.ForwardRefExoticComponent<import("./TableBody/TableBody").TableBodyProps & React.RefAttributes<HTMLTableSectionElement>>;
-    Row: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLTableRowElement>, "children" | "onClick" | "onDragEnd" | "onDragStart" | "isSelected" | "rowIndex" | "onSelectToggle"> & {
+    Row: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLTableRowElement>, "children" | "onClick" | "onDragEnd" | "onDragStart" | "level" | "isSelected" | "rowIndex" | "onSelectToggle"> & {
         children?: React.ReactNode;
         onSelectToggle?: ((isSelected: boolean) => void) | undefined;
         isSelected?: boolean | undefined;
+        level?: "warning" | undefined;
         onClick?: ((event: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void) | undefined;
         rowIndex?: number | undefined;
         onDragStart?: ((rowIndex: number) => void) | undefined;

package/lib/components/Table/Table.js

@@ -60,8 +60,8 @@ var TableContext_1 = require("./TableContext");
 var TableBody_1 = require("./TableBody/TableBody");
 var TableContainer = styled_components_1.default.table(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-collapse: collapse;\n  width: 100%;\n"], ["\n  border-collapse: collapse;\n  width: 100%;\n"])));
 var Table = function (_a) {
-    var _b = _a.isSelectable, isSelectable = _b === void 0 ? false : _b, _c = _a.displayCheckbox, displayCheckbox = _c === void 0 ? false : _c, _d = _a.isDragAndDroppable, isDragAndDroppable = _d === void 0 ? false : _d, _e = _a.onReorder, onReorder = _e === void 0 ? undefined : _e, children = _a.children, rest = __rest(_a, ["isSelectable", "displayCheckbox", "isDragAndDroppable", "onReorder", "children"]);
-    var providerValue = (0, react_1.useMemo)(function () { return ({ isSelectable: isSelectable, displayCheckbox: displayCheckbox, isDragAndDroppable: isDragAndDroppable, onReorder: onReorder }); }, [isSelectable, displayCheckbox, isDragAndDroppable, onReorder]);
+    var _b = _a.isSelectable, isSelectable = _b === void 0 ? false : _b, _c = _a.hasWarningRows, hasWarningRows = _c === void 0 ? false : _c, _d = _a.displayCheckbox, displayCheckbox = _d === void 0 ? false : _d, _e = _a.isDragAndDroppable, isDragAndDroppable = _e === void 0 ? false : _e, _f = _a.onReorder, onReorder = _f === void 0 ? undefined : _f, children = _a.children, rest = __rest(_a, ["isSelectable", "hasWarningRows", "displayCheckbox", "isDragAndDroppable", "onReorder", "children"]);
+    var providerValue = (0, react_1.useMemo)(function () { return ({ isSelectable: isSelectable, hasWarningRows: hasWarningRows, displayCheckbox: displayCheckbox, isDragAndDroppable: isDragAndDroppable, onReorder: onReorder }); }, [isSelectable, hasWarningRows, displayCheckbox, isDragAndDroppable, onReorder]);
     return (react_1.default.createElement(TableContext_1.TableContext.Provider, { value: providerValue },
         react_1.default.createElement(TableContainer, __assign({}, rest), children)));
 };

package/lib/components/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAgD;AAChD,wEAAuC;AACvC,mDAAgD;AAChD,yDAAsD;AACtD,qEAAkE;AAClE,qEAAkE;AAClE,gDAA6C;AAC7C,+CAA4C;AAC5C,mDAAgD;AAGhD,IAAM,cAAc,GAAG,2BAAM,CAAC,KAAK,qHAAA,kDAGlC,IAAA,CAAC;AA8CF,IAAM,KAAK,GAAG,UAAC,EAOF;IANX,IAAA,oBAAoB,EAApB,YAAY,mBAAG,KAAK,KAAA,EACpB,uBAAuB,EAAvB,eAAe,mBAAG,KAAK,KAAA,EACvB,0BAA0B,EAA1B,kBAAkB,mBAAG,KAAK,KAAA,EAC1B,iBAAqB,EAArB,SAAS,mBAAG,SAAS,KAAA,EACrB,QAAQ,cAAA,EACL,IAAI,cANM,kFAOd,CADQ;IAEP,IAAM,aAAa,GAAG,IAAA,eAAO,EAC3B,cAAM,OAAA,CAAC,EAAC,YAAY,cAAA,EAAE,eAAe,iBAAA,EAAE,kBAAkB,oBAAA,EAAE,SAAS,WAAA,EAAC,CAAC,EAAhE,CAAgE,EACtE,CAAC,YAAY,EAAE,eAAe,EAAE,kBAAkB,EAAE,SAAS,CAAC,CAC/D,CAAC;IAEF,OAAO,CACL,8BAAC,2BAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa;QACzC,8BAAC,cAAc,eAAK,IAAI,GAAG,QAAQ,CAAkB,CAC/B,CACzB,CAAC;AACJ,CAAC,CAAC;AAgBM,sBAAK;AAdb,yBAAW,CAAC,WAAW,GAAG,cAAc,CAAC;AACzC,iCAAe,CAAC,WAAW,GAAG,kBAAkB,CAAC;AACjD,qBAAS,CAAC,WAAW,GAAG,YAAY,CAAC;AACrC,mBAAQ,CAAC,WAAW,GAAG,WAAW,CAAC;AACnC,qBAAS,CAAC,WAAW,GAAG,YAAY,CAAC;AACrC,iCAAe,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAEjD,KAAK,CAAC,MAAM,GAAG,yBAAW,CAAC;AAC3B,KAAK,CAAC,UAAU,GAAG,iCAAe,CAAC;AACnC,KAAK,CAAC,IAAI,GAAG,qBAAS,CAAC;AACvB,KAAK,CAAC,GAAG,GAAG,mBAAQ,CAAC;AACrB,KAAK,CAAC,IAAI,GAAG,qBAAS,CAAC;AACvB,KAAK,CAAC,UAAU,GAAG,iCAAe,CAAC"}
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAgD;AAChD,wEAAuC;AACvC,mDAAgD;AAChD,yDAAsD;AACtD,qEAAkE;AAClE,qEAAkE;AAClE,gDAA6C;AAC7C,+CAA4C;AAC5C,mDAAgD;AAGhD,IAAM,cAAc,GAAG,2BAAM,CAAC,KAAK,qHAAA,kDAGlC,IAAA,CAAC;AAmDF,IAAM,KAAK,GAAG,UAAC,EAQF;IAPX,IAAA,oBAAoB,EAApB,YAAY,mBAAG,KAAK,KAAA,EACpB,sBAAsB,EAAtB,cAAc,mBAAG,KAAK,KAAA,EACtB,uBAAuB,EAAvB,eAAe,mBAAG,KAAK,KAAA,EACvB,0BAA0B,EAA1B,kBAAkB,mBAAG,KAAK,KAAA,EAC1B,iBAAqB,EAArB,SAAS,mBAAG,SAAS,KAAA,EACrB,QAAQ,cAAA,EACL,IAAI,cAPM,oGAQd,CADQ;IAEP,IAAM,aAAa,GAAG,IAAA,eAAO,EAC3B,cAAM,OAAA,CAAC,EAAC,YAAY,cAAA,EAAE,cAAc,gBAAA,EAAE,eAAe,iBAAA,EAAE,kBAAkB,oBAAA,EAAE,SAAS,WAAA,EAAC,CAAC,EAAhF,CAAgF,EACtF,CAAC,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,kBAAkB,EAAE,SAAS,CAAC,CAC/E,CAAC;IAEF,OAAO,CACL,8BAAC,2BAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa;QACzC,8BAAC,cAAc,eAAK,IAAI,GAAG,QAAQ,CAAkB,CAC/B,CACzB,CAAC;AACJ,CAAC,CAAC;AAgBM,sBAAK;AAdb,yBAAW,CAAC,WAAW,GAAG,cAAc,CAAC;AACzC,iCAAe,CAAC,WAAW,GAAG,kBAAkB,CAAC;AACjD,qBAAS,CAAC,WAAW,GAAG,YAAY,CAAC;AACrC,mBAAQ,CAAC,WAAW,GAAG,WAAW,CAAC;AACnC,qBAAS,CAAC,WAAW,GAAG,YAAY,CAAC;AACrC,iCAAe,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAEjD,KAAK,CAAC,MAAM,GAAG,yBAAW,CAAC;AAC3B,KAAK,CAAC,UAAU,GAAG,iCAAe,CAAC;AACnC,KAAK,CAAC,IAAI,GAAG,qBAAS,CAAC;AACvB,KAAK,CAAC,GAAG,GAAG,mBAAQ,CAAC;AACrB,KAAK,CAAC,IAAI,GAAG,qBAAS,CAAC;AACvB,KAAK,CAAC,UAAU,GAAG,iCAAe,CAAC"}

package/lib/components/Table/TableContext.d.ts

@@ -1,5 +1,6 @@
 declare type TableContextType = {
     isSelectable: boolean;
+    hasWarningRows: boolean;
     displayCheckbox: boolean;
     isDragAndDroppable: boolean;
     onReorder: ((reorderedIndices: number[]) => void) | undefined;

package/lib/components/Table/TableContext.js

@@ -4,6 +4,7 @@ exports.TableContext = void 0;
 var react_1 = require("react");
 var TableContext = (0, react_1.createContext)({
     isSelectable: false,
+    hasWarningRows: false,
     displayCheckbox: false,
     isDragAndDroppable: false,
     onReorder: undefined,

package/lib/components/Table/TableContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableContext.js","sourceRoot":"","sources":["../../../src/components/Table/TableContext.ts"],"names":[],"mappings":";;;AAAA,+BAAoC;AASpC,IAAM,YAAY,GAAG,IAAA,qBAAa,EAAmB;IACnD,YAAY,EAAE,KAAK;IACnB,eAAe,EAAE,KAAK;IACtB,kBAAkB,EAAE,KAAK;IACzB,SAAS,EAAE,SAAS;CACrB,CAAC,CAAC;AAEK,oCAAY"}
+{"version":3,"file":"TableContext.js","sourceRoot":"","sources":["../../../src/components/Table/TableContext.ts"],"names":[],"mappings":";;;AAAA,+BAAoC;AAUpC,IAAM,YAAY,GAAG,IAAA,qBAAa,EAAmB;IACnD,YAAY,EAAE,KAAK;IACnB,cAAc,EAAE,KAAK;IACrB,eAAe,EAAE,KAAK;IACtB,kBAAkB,EAAE,KAAK;IACzB,SAAS,EAAE,SAAS;CACrB,CAAC,CAAC;AAEK,oCAAY"}

package/lib/components/Table/TableHeader/TableHeader.js

@@ -58,16 +58,18 @@ var TableHead = styled_components_1.default.thead(templateObject_2 || (templateO
     return undefined !== sticky && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      th {\n        position: sticky;\n        top: ", "px;\n        z-index: 1;\n        background-color: ", ";\n      }\n    "], ["\n      th {\n        position: sticky;\n        top: ", "px;\n        z-index: 1;\n        background-color: ", ";\n      }\n    "])), sticky, (0, theme_1.getColor)('white'));
 });
 var SelectColumn = styled_components_1.default.th(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 40px;\n"], ["\n  width: 40px;\n"])));
-var OrderColumn = styled_components_1.default.th(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 40px;\n  background: linear-gradient(to top, ", " 1px, ", " 0px);\n"], ["\n  width: 40px;\n  background: linear-gradient(to top, ", " 1px, ", " 0px);\n"])), (0, theme_1.getColor)('grey', 120), (0, theme_1.getColor)('white'));
+var HasWarningColumn = styled_components_1.default.th(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 20px;\n  background: linear-gradient(to top, ", " 1px, ", " 0px);\n"], ["\n  width: 20px;\n  background: linear-gradient(to top, ", " 1px, ", " 0px);\n"])), (0, theme_1.getColor)('grey', 120), (0, theme_1.getColor)('white'));
+var OrderColumn = styled_components_1.default.th(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 40px;\n  background: linear-gradient(to top, ", " 1px, ", " 0px);\n"], ["\n  width: 40px;\n  background: linear-gradient(to top, ", " 1px, ", " 0px);\n"])), (0, theme_1.getColor)('grey', 120), (0, theme_1.getColor)('white'));
 var TableHeader = react_1.default.forwardRef(function (_a, forwardedRef) {
     var children = _a.children, sticky = _a.sticky, rest = __rest(_a, ["children", "sticky"]);
-    var _b = react_1.default.useContext(TableContext_1.TableContext), isSelectable = _b.isSelectable, isDragAndDroppable = _b.isDragAndDroppable;
+    var _b = react_1.default.useContext(TableContext_1.TableContext), isSelectable = _b.isSelectable, isDragAndDroppable = _b.isDragAndDroppable, hasWarningRows = _b.hasWarningRows;
     return (react_1.default.createElement(TableHead, { sticky: sticky, ref: forwardedRef },
         react_1.default.createElement("tr", __assign({}, rest),
             isSelectable && react_1.default.createElement(SelectColumn, null),
+            hasWarningRows && react_1.default.createElement(HasWarningColumn, null),
             isDragAndDroppable && react_1.default.createElement(OrderColumn, null),
             children)));
 });
 exports.TableHeader = TableHeader;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 //# sourceMappingURL=TableHeader.js.map

package/lib/components/Table/TableHeader/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","sourceRoot":"","sources":["../../../../src/components/Table/TableHeader/TableHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA4C;AAC5C,qEAA8C;AAC9C,wCAA2D;AAC3D,gDAA6C;AAE7C,IAAM,SAAS,GAAG,2BAAM,CAAC,KAAK,+EAAuC,MACjE,EASC,IACJ,KAVG,UAAC,EAAQ;QAAP,MAAM,YAAA;IACR,OAAA,SAAS,KAAK,MAAM,QACpB,uBAAG,wMAAA,wDAGQ,EAAM,sDAEO,EAAiB,kBAExC,KAJU,MAAM,EAEO,IAAA,gBAAQ,EAAC,OAAO,CAAC,CAExC;AARD,CAQC,CACJ,CAAC;AAEF,IAAM,YAAY,GAAG,2BAAM,CAAC,EAAE,uFAAA,oBAE7B,IAAA,CAAC;AACF,IAAM,WAAW,GAAG,2BAAM,CAAC,EAAE,mJAAA,0DAEW,EAAqB,QAAS,EAAiB,UACtF,KADuC,IAAA,gBAAQ,EAAC,MAAM,EAAE,GAAG,CAAC,EAAS,IAAA,gBAAQ,EAAC,OAAO,CAAC,CACtF,CAAC;AAcF,IAAM,WAAW,GAAG,eAAK,CAAC,UAAU,CAClC,UAAC,EAA6C,EAAE,YAA0C;IAAxF,IAAA,QAAQ,cAAA,EAAE,MAAM,YAAA,EAAK,IAAI,cAA1B,sBAA2B,CAAD;IACnB,IAAA,KAAqC,eAAK,CAAC,UAAU,CAAC,2BAAY,CAAC,EAAlE,YAAY,kBAAA,EAAE,kBAAkB,wBAAkC,CAAC;IAE1E,OAAO,CACL,8BAAC,SAAS,IAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,YAAY;QAC1C,iDAAQ,IAAI;YAET,YAAY,IAAI,8BAAC,YAAY,OAAG;YAChC,kBAAkB,IAAI,8BAAC,WAAW,OAAG;YACrC,QAAQ,CACN,CACK,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEM,kCAAW"}
+{"version":3,"file":"TableHeader.js","sourceRoot":"","sources":["../../../../src/components/Table/TableHeader/TableHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA4C;AAC5C,qEAA8C;AAC9C,wCAA2D;AAC3D,gDAA6C;AAE7C,IAAM,SAAS,GAAG,2BAAM,CAAC,KAAK,+EAAuC,MACjE,EASC,IACJ,KAVG,UAAC,EAAQ;QAAP,MAAM,YAAA;IACR,OAAA,SAAS,KAAK,MAAM,QACpB,uBAAG,wMAAA,wDAGQ,EAAM,sDAEO,EAAiB,kBAExC,KAJU,MAAM,EAEO,IAAA,gBAAQ,EAAC,OAAO,CAAC,CAExC;AARD,CAQC,CACJ,CAAC;AAEF,IAAM,YAAY,GAAG,2BAAM,CAAC,EAAE,uFAAA,oBAE7B,IAAA,CAAC;AACF,IAAM,gBAAgB,GAAG,2BAAM,CAAC,EAAE,mJAAA,0DAEM,EAAqB,QAAS,EAAiB,UACtF,KADuC,IAAA,gBAAQ,EAAC,MAAM,EAAE,GAAG,CAAC,EAAS,IAAA,gBAAQ,EAAC,OAAO,CAAC,CACtF,CAAC;AACF,IAAM,WAAW,GAAG,2BAAM,CAAC,EAAE,mJAAA,0DAEW,EAAqB,QAAS,EAAiB,UACtF,KADuC,IAAA,gBAAQ,EAAC,MAAM,EAAE,GAAG,CAAC,EAAS,IAAA,gBAAQ,EAAC,OAAO,CAAC,CACtF,CAAC;AAcF,IAAM,WAAW,GAAG,eAAK,CAAC,UAAU,CAClC,UAAC,EAA6C,EAAE,YAA0C;IAAxF,IAAA,QAAQ,cAAA,EAAE,MAAM,YAAA,EAAK,IAAI,cAA1B,sBAA2B,CAAD;IACnB,IAAA,KAAqD,eAAK,CAAC,UAAU,CAAC,2BAAY,CAAC,EAAlF,YAAY,kBAAA,EAAE,kBAAkB,wBAAA,EAAE,cAAc,oBAAkC,CAAC;IAE1F,OAAO,CACL,8BAAC,SAAS,IAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,YAAY;QAC1C,iDAAQ,IAAI;YAET,YAAY,IAAI,8BAAC,YAAY,OAAG;YAChC,cAAc,IAAI,8BAAC,gBAAgB,OAAG;YACtC,kBAAkB,IAAI,8BAAC,WAAW,OAAG;YACrC,QAAQ,CACN,CACK,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEM,kCAAW"}

package/lib/components/Table/TableRow/TableRow.d.ts

@@ -1,18 +1,21 @@
 import React, { ReactNode, HTMLAttributes, MouseEvent } from 'react';
 import { Override } from '../../../shared';
+declare type Level = 'warning';
 declare type TableRowProps = Override<HTMLAttributes<HTMLTableRowElement>, {
     children?: ReactNode;
     onSelectToggle?: (isSelected: boolean) => void;
     isSelected?: boolean;
+    level?: Level;
     onClick?: (event: MouseEvent<HTMLTableRowElement>) => void;
     rowIndex?: number;
     onDragStart?: (rowIndex: number) => void;
     onDragEnd?: () => void;
 }>;
-declare const TableRow: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLTableRowElement>, "children" | "onClick" | "onDragEnd" | "onDragStart" | "isSelected" | "rowIndex" | "onSelectToggle"> & {
+declare const TableRow: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLTableRowElement>, "children" | "onClick" | "onDragEnd" | "onDragStart" | "level" | "isSelected" | "rowIndex" | "onSelectToggle"> & {
     children?: ReactNode;
     onSelectToggle?: ((isSelected: boolean) => void) | undefined;
     isSelected?: boolean | undefined;
+    level?: "warning" | undefined;
     onClick?: ((event: MouseEvent<HTMLTableRowElement>) => void) | undefined;
     rowIndex?: number | undefined;
     onDragStart?: ((rowIndex: number) => void) | undefined;

package/lib/components/Table/TableRow/TableRow.js

@@ -54,7 +54,7 @@ var TableContext_1 = require("../TableContext");
 var TableCell_1 = require("../TableCell/TableCell");
 var icons_1 = require("../../../icons");
 var usePlaceholderPosition_1 = require("../../../hooks/usePlaceholderPosition");
-var RowContainer = styled_components_1.default.tr(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &:hover > td {\n    opacity: 1;\n    ", "\n  }\n\n  &:hover > td > div {\n    opacity: 1;\n  }\n"], ["\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &:hover > td {\n    opacity: 1;\n    ", "\n  }\n\n  &:hover > td > div {\n    opacity: 1;\n  }\n"])), function (_a) {
+var RowContainer = styled_components_1.default.tr(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &:hover > td {\n    opacity: 1;\n    ", "\n  }\n\n  &:hover > td > div {\n    opacity: 1;\n  }\n\n  ", ";\n"], ["\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &:hover > td {\n    opacity: 1;\n    ", "\n  }\n\n  &:hover > td > div {\n    opacity: 1;\n  }\n\n  ", ";\n"])), function (_a) {
     var isSelected = _a.isSelected;
     return isSelected && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      > td {\n        background-color: ", ";\n      }\n    "], ["\n      > td {\n        background-color: ", ";\n      }\n    "])), (0, theme_1.getColor)('blue', 20));
 }, function (_a) {
@@ -72,16 +72,20 @@ var RowContainer = styled_components_1.default.tr(templateObject_7 || (templateO
 }, function (_a) {
     var isClickable = _a.isClickable;
     return isClickable && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        background-color: ", ";\n      "], ["\n        background-color: ", ";\n      "])), (0, theme_1.getColor)('grey', 20));
+}, function (_a) {
+    var level = _a.level;
+    return level === 'warning' && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      > td {\n        :first-child {\n          padding: 0 0 0 5px;\n        }\n        background-color: ", ";\n      }\n    "], ["\n      > td {\n        :first-child {\n          padding: 0 0 0 5px;\n        }\n        background-color: ", ";\n      }\n    "])), (0, theme_1.getColor)('yellow', 10));
 });
-var CheckboxContainer = styled_components_1.default.td(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background: none !important;\n  opacity: ", ";\n  cursor: auto;\n\n  > div {\n    justify-content: center;\n  }\n"], ["\n  background: none !important;\n  opacity: ", ";\n  cursor: auto;\n\n  > div {\n    justify-content: center;\n  }\n"])), function (_a) {
+var CheckboxContainer = styled_components_1.default.td(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background: none !important;\n  opacity: ", ";\n  cursor: auto;\n\n  > div {\n    justify-content: center;\n  }\n"], ["\n  background: none !important;\n  opacity: ", ";\n  cursor: auto;\n\n  > div {\n    justify-content: center;\n  }\n"])), function (_a) {
     var isVisible = _a.isVisible;
     return (isVisible ? 1 : 0);
 });
-var HandleCell = (0, styled_components_1.default)(TableCell_1.TableCell)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  cursor: grab;\n  width: 20px;\n\n  > div {\n    justify-content: center;\n  }\n\n  :active {\n    cursor: grabbing;\n  }\n"], ["\n  cursor: grab;\n  width: 20px;\n\n  > div {\n    justify-content: center;\n  }\n\n  :active {\n    cursor: grabbing;\n  }\n"])));
+var HandleCell = (0, styled_components_1.default)(TableCell_1.TableCell)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  cursor: grab;\n  width: 20px;\n\n  > div {\n    justify-content: center;\n  }\n\n  :active {\n    cursor: grabbing;\n  }\n"], ["\n  cursor: grab;\n  width: 20px;\n\n  > div {\n    justify-content: center;\n  }\n\n  :active {\n    cursor: grabbing;\n  }\n"])));
+var WarningIcon = (0, styled_components_1.default)(icons_1.DangerIcon)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), (0, theme_1.getColor)('yellow', 120));
 var TableRow = (0, react_1.forwardRef)(function (_a, forwardedRef) {
-    var _b = _a.rowIndex, rowIndex = _b === void 0 ? 0 : _b, isSelected = _a.isSelected, onSelectToggle = _a.onSelectToggle, onClick = _a.onClick, draggable = _a.draggable, onDragStart = _a.onDragStart, onDragEnd = _a.onDragEnd, children = _a.children, rest = __rest(_a, ["rowIndex", "isSelected", "onSelectToggle", "onClick", "draggable", "onDragStart", "onDragEnd", "children"]);
+    var _b = _a.rowIndex, rowIndex = _b === void 0 ? 0 : _b, isSelected = _a.isSelected, level = _a.level, onSelectToggle = _a.onSelectToggle, onClick = _a.onClick, draggable = _a.draggable, onDragStart = _a.onDragStart, onDragEnd = _a.onDragEnd, children = _a.children, rest = __rest(_a, ["rowIndex", "isSelected", "level", "onSelectToggle", "onClick", "draggable", "onDragStart", "onDragEnd", "children"]);
     var _c = (0, usePlaceholderPosition_1.usePlaceholderPosition)(rowIndex), placeholderPosition = _c[0], placeholderDragEnter = _c[1], placeholderDragLeave = _c[2], placeholderDragEnd = _c[3];
-    var _d = (0, react_1.useContext)(TableContext_1.TableContext), isSelectable = _d.isSelectable, displayCheckbox = _d.displayCheckbox, isDragAndDroppable = _d.isDragAndDroppable;
+    var _d = (0, react_1.useContext)(TableContext_1.TableContext), isSelectable = _d.isSelectable, displayCheckbox = _d.displayCheckbox, isDragAndDroppable = _d.isDragAndDroppable, hasWarningRows = _d.hasWarningRows;
     if (isSelectable && (undefined === isSelected || undefined === onSelectToggle)) {
         throw Error('A row in a selectable table should have the prop "isSelected" and "onSelectToggle"');
     }
@@ -100,15 +104,16 @@ var TableRow = (0, react_1.forwardRef)(function (_a, forwardedRef) {
         placeholderDragEnd();
         onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd();
     };
-    return (react_1.default.createElement(RowContainer, __assign({ ref: forwardedRef, isClickable: undefined !== onClick, isSelected: !!isSelected, isDragAndDroppable: isDragAndDroppable, onClick: onClick, placeholderPosition: isDragAndDroppable ? placeholderPosition : 'none', draggable: isDragAndDroppable && draggable, "data-draggable-index": rowIndex, onDragEnter: handleDragEnter, onDragLeave: placeholderDragLeave, onDragStart: handleDragStart, onDragEnd: handleDragEnd }, rest),
+    return (react_1.default.createElement(RowContainer, __assign({ ref: forwardedRef, isClickable: undefined !== onClick, isSelected: !!isSelected, level: level, isDragAndDroppable: isDragAndDroppable, onClick: onClick, placeholderPosition: isDragAndDroppable ? placeholderPosition : 'none', draggable: isDragAndDroppable && draggable, "data-draggable-index": rowIndex, onDragEnter: handleDragEnter, onDragLeave: placeholderDragLeave, onDragStart: handleDragStart, onDragEnd: handleDragEnd }, rest),
         isSelectable && (react_1.default.createElement(CheckboxContainer, { "aria-hidden": !displayCheckbox && !isSelected, isVisible: displayCheckbox || !!isSelected, onClick: handleCheckboxChange },
             react_1.default.createElement(components_1.Checkbox, { checked: !!isSelected, onChange: function (_value, e) {
                     handleCheckboxChange(e);
                 } }))),
         isDragAndDroppable && (react_1.default.createElement(HandleCell, { onMouseDown: function () { return onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(rowIndex); }, onMouseUp: onDragEnd, "data-testid": "dragAndDrop" },
             react_1.default.createElement(icons_1.RowIcon, { size: 16 }))),
+        hasWarningRows && react_1.default.createElement(TableCell_1.TableCell, null, level === 'warning' && react_1.default.createElement(WarningIcon, { size: 16 })),
         children));
 });
 exports.TableRow = TableRow;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
 //# sourceMappingURL=TableRow.js.map

package/lib/components/Table/TableRow/TableRow.js.map

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

package/package.json

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

package/src/components/Block/Block.stories.mdx

@@ -1,17 +1,20 @@
+import {useState} from 'react';
 import {Meta, Story, ArgsTable, Canvas} from '@storybook/addon-docs';
 import {action} from '@storybook/addon-actions';
 import {Block} from './Block';
 import {IconButton} from '../IconButton/IconButton';
-import {CloseIcon, EditIcon, MoreIcon} from '../../icons';
+import {CloseIcon, ArrowDownIcon, MoreIcon} from '../../icons';
 
 <Meta
   title="Components/Block"
   component={Block}
   argTypes={{
+    title: {control: {type: 'text'}},
     children: {control: {type: 'text'}},
   }}
   args={{
-    children: 'I am a block',
+    title: 'I am a block',
+    children: 'I am the block content',
   }}
 />
 
@@ -36,22 +39,35 @@ Use this playground to test the block component
 
 <ArgsTable story="Standard" />
 
+## Without Actions
+
+<Canvas>
+  <Story name="Without Actions">
+    {args => {
+      return (
+        <>
+          <Block {...args} title="Block without action" />
+        </>
+      );
+    }}
+  </Story>
+</Canvas>
+
+
 ## With Actions
 
 <Canvas>
-  <Story name="With Action">
+  <Story name="With Actions">
     {args => {
+      const [isOpen, setOpen] = useState(false);
       return (
         <>
-          <Block {...args}>
-            Block without action
-          </Block>
           <Block
-            {...args}
-            action={<IconButton key="remove" icon={<CloseIcon />} title='Remove' onClick={action('Remove block')} />}
-          >
-            Block with action
-          </Block>
+            {...args} title="Block with actions" isOpen={isOpen} onCollapse={setOpen} collapseButtonLabel="Collapse"
+            actions={<>
+              <IconButton level="danger" ghost size="small" key="remove" icon={<CloseIcon />} title='Remove' onClick={action('Remove block')} />
+            </>}
+          />
         </>
       );
     }}

package/src/components/Block/Block.tsx

@@ -1,17 +1,22 @@
-import React, {cloneElement, isValidElement, ReactNode, Ref} from 'react';
-import styled from 'styled-components';
+import React, {ReactNode, Ref, useEffect, useRef, useState} from 'react';
+import styled, {css} from 'styled-components';
 import {AkeneoThemedProps, getColor, getFontSize} from '../../theme';
 import {Override} from '../../shared';
-import {IconProps} from '../../icons';
-import {IconButton, IconButtonProps} from '../IconButton/IconButton';
+import {ArrowDownIcon, ArrowUpIcon} from '../../icons';
+import {IconButton} from '../IconButton/IconButton';
 
 type BlockProps = Override<
   Override<React.ButtonHTMLAttributes<HTMLButtonElement>, React.AnchorHTMLAttributes<HTMLAnchorElement>>,
   {
+    /**
+     * Title of the block.
+     */
+    title: string;
+
     /**
      * Add an action that will be displayed on the right of the block.
      */
-    action?: ReactNode;
+    actions?: ReactNode;
 
     /**
      * Accessibility label to describe shortly the button.
@@ -29,27 +34,78 @@ type BlockProps = Override<
     ariaDescribedBy?: string;
 
     /**
-     * Children of the button.
+     * Children of the block.
      */
     children?: ReactNode;
-  }
+  } & (
+    | {
+        /**
+         * Whether or not the Block is open.
+         */
+        isOpen: boolean;
+
+        /**
+         * Label of the collapse button.
+         */
+        collapseButtonLabel: string;
+
+        /**
+         * Handler called when the collapse button is clicked.
+         */
+        onCollapse: (isOpen: boolean) => void;
+      }
+    | {
+        isOpen?: undefined;
+        collapseButtonLabel?: undefined;
+        onCollapse?: undefined;
+      }
+  )
 >;
 
+const ANIMATION_DURATION = 100;
+
 const ActionsContainer = styled.div`
-  display: none;
+  display: flex;
   align-items: center;
+  column-gap: 10px;
+  justify-content: space-between;
+`;
+
+const BlockTitle = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 24px;
+`;
+
+const BlockContent = styled.div<
+  {isCollapsable: boolean; $height: number; $overflow: string; shouldAnimate: boolean} & AkeneoThemedProps
+>`
+  overflow-wrap: break-word;
+  white-space: break-spaces;
+  color: ${getColor('grey', 140)};
+  margin-top: ${({$height, isCollapsable}) => (0 === $height && isCollapsable ? 0 : 5)}px;
+  ${({isCollapsable, $height, $overflow, shouldAnimate}) =>
+    isCollapsable &&
+    css`
+      max-height: ${$height}px;
+      overflow: ${$overflow};
+      ${shouldAnimate &&
+      css`
+        transition: all ${ANIMATION_DURATION}ms ease-in-out;
+        transition-property: max-height, margin-top;
+      `}
+    `}
 `;
 
 const Container = styled.div<AkeneoThemedProps>`
   box-sizing: border-box;
-  padding: 0 20px;
+  padding: 10px 15px;
   border-style: solid;
   border-width: 1px;
   border-radius: 2px;
-  height: 50px;
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  flex-direction: column;
   font-family: inherit;
   font-size: ${getFontSize('default')};
   font-weight: 400;
@@ -60,17 +116,51 @@ const Container = styled.div<AkeneoThemedProps>`
 
   &:hover {
     background-color: ${getColor('grey', 20)};
-    ${ActionsContainer} {
-      display: flex;
-    }
   }
 `;
 
 const Block = React.forwardRef<HTMLButtonElement, BlockProps>(
   (
-    {action, ariaDescribedBy, ariaLabel, ariaLabelledBy, children, ...rest}: BlockProps,
+    {
+      title,
+      actions,
+      ariaDescribedBy,
+      ariaLabel,
+      ariaLabelledBy,
+      isOpen,
+      collapseButtonLabel,
+      onCollapse,
+      children,
+      ...rest
+    }: BlockProps,
     forwardedRef: Ref<HTMLButtonElement>
   ) => {
+    const [contentHeight, setContentHeight] = useState<number>(0);
+    const [shouldAnimate, setShouldAnimate] = useState<boolean>(false);
+    const contentRef = useRef<HTMLDivElement>(null);
+
+    const isCollapsable = undefined !== collapseButtonLabel && undefined !== onCollapse && undefined !== isOpen;
+
+    const handleCollapse = () => onCollapse?.(!isOpen);
+
+    useEffect(() => {
+      if (!isCollapsable) return;
+
+      setContentHeight(contentHeight => {
+        const scrollHeight = contentRef.current?.scrollHeight ?? 0;
+
+        return 0 === scrollHeight ? contentHeight : scrollHeight;
+      });
+
+      const shouldAnimateTimeoutId = window.setTimeout(() => {
+        setShouldAnimate(true);
+      }, ANIMATION_DURATION);
+
+      return () => {
+        window.clearTimeout(shouldAnimateTimeoutId);
+      };
+    }, [children]);
+
     return (
       <Container
         aria-describedby={ariaDescribedBy}
@@ -79,24 +169,35 @@ const Block = React.forwardRef<HTMLButtonElement, BlockProps>(
         ref={forwardedRef}
         {...rest}
       >
-        <div>
-          {React.Children.map(children, child => {
-            if (isValidElement<IconProps>(child)) {
-              return React.cloneElement(child, {size: child.props.size ?? 18});
-            }
-
-            return child;
-          })}
-        </div>
-        <ActionsContainer>
-          {isValidElement<IconButtonProps>(action) && action.type === IconButton
-            ? cloneElement(action, {
-                level: 'tertiary',
-                ghost: 'borderless',
-                size: 'small',
-              })
-            : action}
-        </ActionsContainer>
+        <BlockTitle>
+          {title}
+
+          <ActionsContainer>
+            {actions}
+            {!isCollapsable ? null : (
+              <IconButton
+                icon={isOpen ? <ArrowUpIcon /> : <ArrowDownIcon />}
+                title={collapseButtonLabel}
+                level="tertiary"
+                ghost
+                size="small"
+                onClick={handleCollapse}
+              />
+            )}
+          </ActionsContainer>
+        </BlockTitle>
+        {!isCollapsable ? null : (
+          <BlockContent
+            ref={contentRef}
+            isCollapsable={isCollapsable}
+            $overflow={shouldAnimate || !isOpen ? 'hidden' : 'inherit'}
+            $height={true === isOpen ? contentHeight : 0}
+            shouldAnimate={shouldAnimate}
+            aria-hidden={!isOpen}
+          >
+            {children}
+          </BlockContent>
+        )}
       </Container>
     );
   }

package/src/components/Block/Block.unit.tsx

@@ -2,47 +2,100 @@ import React from 'react';
 import {fireEvent, render, screen} from '../../storybook/test-util';
 import {Block} from './Block';
 import {IconButton} from '../IconButton/IconButton';
-import {PlusIcon, CloseIcon} from '../../icons';
+import {CloseIcon, EditIcon, PlusIcon} from '../../icons';
 
 test('it renders without actions', () => {
-  render(<Block>My block</Block>);
+  render(<Block title="I am a block" />);
 
-  expect(screen.getByText('My block')).toBeInTheDocument();
+  expect(screen.getByText('I am a block')).toBeInTheDocument();
 });
 
-test('it renders action passed by props', () => {
+test('it renders actions passed by props', () => {
   const onRemove = jest.fn();
+  const onEdit = jest.fn();
 
   render(
-    <Block action={<IconButton key="delete" icon={<CloseIcon />} onClick={onRemove} title="Remove" />}>My block</Block>
+    <Block
+      title="My block"
+      actions={
+        <>
+          <IconButton
+            level="tertiary"
+            ghost="borderless"
+            size="small"
+            key="edit"
+            icon={<EditIcon />}
+            title="Edit"
+            onClick={onEdit}
+          />
+          <IconButton
+            level="tertiary"
+            ghost="borderless"
+            size="small"
+            key="remove"
+            icon={<CloseIcon />}
+            title="Remove"
+            onClick={onRemove}
+          />
+        </>
+      }
+    />
   );
 
+  const editIconButton = screen.getByTitle('Edit');
+  fireEvent.click(editIconButton);
+  expect(onEdit).toBeCalled();
+
   const removeIconButton = screen.getByTitle('Remove');
   fireEvent.click(removeIconButton);
   expect(onRemove).toBeCalled();
 });
 
+test('it supports collapsing', () => {
+  const onCollapse = jest.fn();
+  const isOpen = false;
+  jest.useFakeTimers();
+
+  render(
+    <Block title="My block" isOpen={isOpen} onCollapse={onCollapse} collapseButtonLabel="Collapse" actions={<></>}>
+      I am a block
+    </Block>
+  );
+
+  const collapseIconButton = screen.getByTitle('Collapse');
+  fireEvent.click(collapseIconButton);
+
+  jest.runAllTimers();
+
+  expect(onCollapse).toBeCalled();
+  expect(screen.getByText('I am a block')).toBeInTheDocument();
+});
+
 test('Block supports forwardRef', () => {
   const ref = {current: null};
 
-  render(<Block ref={ref}>My block</Block>);
+  render(<Block title="My block" ref={ref} />);
 
   expect(ref.current).not.toBe(null);
 });
 
 test('Block supports ...rest props', () => {
-  render(<Block data-testid="my_value">My block</Block>);
+  render(<Block title="My block" data-testid="my_value" />);
 
   expect(screen.getByTestId('my_value')).toBeInTheDocument();
 });
 
 test('it renders children with icon', () => {
+  const onCollapse = jest.fn();
+  const isOpen = false;
+
   render(
-    <Block>
-      <PlusIcon data-testid="children-icon" /> My block
+    <Block title="My block" isOpen={isOpen} onCollapse={onCollapse} collapseButtonLabel="Collapse" actions={<></>}>
+      <PlusIcon data-testid="children-icon" />
+      Icon
     </Block>
   );
 
-  expect(screen.getByText('My block')).toBeInTheDocument();
+  expect(screen.getByText('Icon')).toBeInTheDocument();
   expect(screen.getByTestId('children-icon')).toBeInTheDocument();
 });

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

@@ -475,3 +475,56 @@ If you want your `Table.Header` to stay on top when scrolling in the Table, just
     }}
   </Story>
 </Canvas>
+
+## Table with warning rows
+
+<Canvas>
+    <Story name="Warning rows">
+        {args => {
+            return (
+                <Scrollable height={250}>
+                    <Table hasWarningRows={true}>
+                        <Table.Header sticky={0}>
+                            <Table.HeaderCell>Name</Table.HeaderCell>
+                            <Table.HeaderCell>Family</Table.HeaderCell>
+                            <Table.HeaderCell>Order</Table.HeaderCell>
+                            <Table.HeaderCell>Genus</Table.HeaderCell>
+                            <Table.HeaderCell>Conservation status</Table.HeaderCell>
+                            <Table.HeaderCell>Actions</Table.HeaderCell>
+                        </Table.Header>
+                        <Table.Body>
+                            <Table.Row level="warning">
+                                <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>
+                                <Table.Cell rowTitle={args.displayRowTitle}>Red panda</Table.Cell>
+                                <Table.Cell>Ailuridae</Table.Cell>
+                                <Table.Cell>Carnivora</Table.Cell>
+                                <Table.Cell>Ailurus</Table.Cell>
+                                <Table.Cell>
+                                    <Badge level="warning">vu</Badge>
+                                </Table.Cell>
+                                <Table.ActionCell>
+                                    <Button level="primary" ghost>
+                                        Button
+                                    </Button>
+                                </Table.ActionCell>
+                            </Table.Row>
+                        </Table.Body>
+                    </Table>
+                </Scrollable>
+            );
+        }}
+    </Story>
+</Canvas>

package/src/components/Table/Table.tsx

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

package/src/components/Table/TableContext.ts

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

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

@@ -19,6 +19,10 @@ const TableHead = styled.thead<{sticky?: number} & AkeneoThemedProps>`
 const SelectColumn = styled.th`
   width: 40px;
 `;
+const HasWarningColumn = 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);
@@ -38,13 +42,14 @@ type TableHeaderProps = {
 
 const TableHeader = React.forwardRef<HTMLTableSectionElement, TableHeaderProps>(
   ({children, sticky, ...rest}: TableHeaderProps, forwardedRef: Ref<HTMLTableSectionElement>) => {
-    const {isSelectable, isDragAndDroppable} = React.useContext(TableContext);
+    const {isSelectable, isDragAndDroppable, hasWarningRows} = React.useContext(TableContext);
 
     return (
       <TableHead sticky={sticky} ref={forwardedRef}>
         <tr {...rest}>
           {/* Add new column for checkbox to be displayed properly in the tbody */}
           {isSelectable && <SelectColumn />}
+          {hasWarningRows && <HasWarningColumn />}
           {isDragAndDroppable && <OrderColumn />}
           {children}
         </tr>

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

@@ -14,12 +14,15 @@ import {Checkbox} from '../../../components';
 import {Override} from '../../../shared';
 import {TableContext} from '../TableContext';
 import {TableCell} from '../TableCell/TableCell';
-import {RowIcon} from '../../../icons';
+import {RowIcon, DangerIcon} from '../../../icons';
 import {PlaceholderPosition, usePlaceholderPosition} from '../../../hooks/usePlaceholderPosition';
 
+type Level = 'warning';
+
 const RowContainer = styled.tr<
   {
     isSelected: boolean;
+    level: Level;
     isClickable: boolean;
     isDragAndDroppable: boolean;
     placeholderPosition: PlaceholderPosition;
@@ -73,6 +76,17 @@ const RowContainer = styled.tr<
   &:hover > td > div {
     opacity: 1;
   }
+
+  ${({level}) =>
+    level === 'warning' &&
+    css`
+      > td {
+        :first-child {
+          padding: 0 0 0 5px;
+        }
+        background-color: ${getColor('yellow', 10)};
+      }
+    `};
 `;
 
 const CheckboxContainer = styled.td<{isVisible: boolean}>`
@@ -98,6 +112,10 @@ const HandleCell = styled(TableCell)`
   }
 `;
 
+const WarningIcon = styled(DangerIcon)`
+  color: ${getColor('yellow', 120)};
+`;
+
 type TableRowProps = Override<
   HTMLAttributes<HTMLTableRowElement>,
   {
@@ -116,6 +134,11 @@ type TableRowProps = Override<
      */
     isSelected?: boolean;
 
+    /**
+     * Define if the row has a warning
+     */
+    level?: Level;
+
     /**
      * Function called when the user clicks on the row
      */
@@ -143,6 +166,7 @@ const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
     {
       rowIndex = 0,
       isSelected,
+      level,
       onSelectToggle,
       onClick,
       draggable,
@@ -156,7 +180,7 @@ const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
     const [placeholderPosition, placeholderDragEnter, placeholderDragLeave, placeholderDragEnd] =
       usePlaceholderPosition(rowIndex);
 
-    const {isSelectable, displayCheckbox, isDragAndDroppable} = useContext(TableContext);
+    const {isSelectable, displayCheckbox, isDragAndDroppable, hasWarningRows} = useContext(TableContext);
     if (isSelectable && (undefined === isSelected || undefined === onSelectToggle)) {
       throw Error('A row in a selectable table should have the prop "isSelected" and "onSelectToggle"');
     }
@@ -185,6 +209,7 @@ const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
         ref={forwardedRef}
         isClickable={undefined !== onClick}
         isSelected={!!isSelected}
+        level={level}
         isDragAndDroppable={isDragAndDroppable}
         onClick={onClick}
         placeholderPosition={isDragAndDroppable ? placeholderPosition : 'none'}
@@ -215,6 +240,7 @@ const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
             <RowIcon size={16} />
           </HandleCell>
         )}
+        {hasWarningRows && <TableCell>{level === 'warning' && <WarningIcon size={16} />}</TableCell>}
         {children}
       </RowContainer>
     );