akeneo-design-system 0.1.227 → 0.1.228

package/lib/components/Avatar/Avatar.d.ts

@@ -1,12 +1,5 @@
 import React from 'react';
-import { Override } from '../../shared';
-declare type AvatarProps = Override<React.HTMLAttributes<HTMLSpanElement>, {
-    username: string;
-    firstName: string;
-    lastName: string;
-    avatarUrl?: string;
-    size?: 'default' | 'big';
-}>;
+import { AvatarProps } from './types';
 declare const Avatar: ({ username, firstName, lastName, avatarUrl, size, ...rest }: AvatarProps) => React.JSX.Element;
 export { Avatar };
 export type { AvatarProps };

package/lib/components/Avatar/Avatar.js

@@ -62,7 +62,7 @@ var Avatar = function (_a) {
     var username = _a.username, firstName = _a.firstName, lastName = _a.lastName, avatarUrl = _a.avatarUrl, _b = _a.size, size = _b === void 0 ? 'default' : _b, rest = __rest(_a, ["username", "firstName", "lastName", "avatarUrl", "size"]);
     var theme = (0, hooks_1.useTheme)();
     var fallback = (firstName.trim().charAt(0) + lastName.trim().charAt(0) || username.substring(0, 2)).toLocaleUpperCase();
-    var title = (firstName + " " + lastName).trim() || username;
+    var title = ((firstName || '') + " " + (lastName || '')).trim() || username;
     var backgroundColor = (0, react_1.useMemo)(function () {
         var colorId = username.split('').reduce(function (s, l) { return s + l.charCodeAt(0); }, 0);
         var colors = [

package/lib/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAqC;AACrC,qEAA8C;AAC9C,qCAAqC;AAErC,qCAAwD;AAExD,IAAM,eAAe,GAAG,2BAAM,CAAC,IAAI,2RAAiC,MAChE,EAeK,uCAEE,EAAiB,gKAMhB,EAAgD,KAC3D,KAxBG,UAAC,EAAM;QAAL,IAAI,UAAA;IACN,OAAA,IAAI,KAAK,SAAS;QAChB,CAAC,KAAC,uBAAG,2NAAA,uJAMF,KACH,CAAC,KAAC,uBAAG,+NAAA,2JAMF,IAAA;AAdL,CAcK,EAEE,IAAA,gBAAQ,EAAC,OAAO,CAAC,EAMhB,UAAC,EAAS;QAAR,OAAO,aAAA;IAAM,OAAA,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;AAAjC,CAAiC,CAC3D,CAAC;AAgCF,IAAM,MAAM,GAAG,UAAC,EAAkF;IAAjF,IAAA,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,YAAgB,EAAhB,IAAI,mBAAG,SAAS,KAAA,EAAK,IAAI,cAApE,0DAAqE,CAAD;IAClF,IAAM,KAAK,GAAG,IAAA,gBAAQ,GAAE,CAAC;IAEzB,IAAM,QAAQ,GAAG,CACf,SAAS,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CACnF,CAAC,iBAAiB,EAAE,CAAC;IACtB,IAAM,KAAK,GAAG,CAAG,SAAS,SAAI,QAAU,CAAA,CAAC,IAAI,EAAE,IAAI,QAAQ,CAAC;IAE5D,IAAM,eAAe,GAAG,IAAA,eAAO,EAAC;QAC9B,IAAM,OAAO,GAAG,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,MAAM,CAAS,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAnB,CAAmB,EAAE,CAAC,CAAC,CAAC;QACpF,IAAM,MAAM,GAAG;YACb,KAAK,CAAC,gBAAgB,CAAC,QAAQ;YAC/B,KAAK,CAAC,gBAAgB,CAAC,WAAW;YAClC,KAAK,CAAC,gBAAgB,CAAC,cAAc;YACrC,KAAK,CAAC,gBAAgB,CAAC,aAAa;YACpC,KAAK,CAAC,gBAAgB,CAAC,OAAO;YAC9B,KAAK,CAAC,gBAAgB,CAAC,WAAW;YAClC,KAAK,CAAC,gBAAgB,CAAC,UAAU;YACjC,KAAK,CAAC,gBAAgB,CAAC,MAAM;YAC7B,KAAK,CAAC,gBAAgB,CAAC,WAAW;YAClC,KAAK,CAAC,gBAAgB,CAAC,SAAS;YAChC,KAAK,CAAC,gBAAgB,CAAC,SAAS;YAChC,KAAK,CAAC,gBAAgB,CAAC,YAAY;SACpC,CAAC;QAEF,OAAO,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IACzC,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,IAAM,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,EAAC,eAAe,EAAE,SAAO,SAAS,MAAG,EAAC,CAAC,CAAC,CAAC,EAAC,eAAe,iBAAA,EAAC,CAAC;IAErF,OAAO,CACL,8BAAC,eAAe,aAAC,IAAI,EAAE,IAAI,IAAM,IAAI,IAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,KAC9D,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CACV,CACnB,CAAC;AACJ,CAAC,CAAC;AAEM,wBAAM"}
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAqC;AACrC,qEAA8C;AAC9C,qCAAqC;AACrC,qCAAwD;AAGxD,IAAM,eAAe,GAAG,2BAAM,CAAC,IAAI,2RAAiC,MAChE,EAeK,uCAEE,EAAiB,gKAMhB,EAAgD,KAC3D,KAxBG,UAAC,EAAM;QAAL,IAAI,UAAA;IACN,OAAA,IAAI,KAAK,SAAS;QAChB,CAAC,KAAC,uBAAG,2NAAA,uJAMF,KACH,CAAC,KAAC,uBAAG,+NAAA,2JAMF,IAAA;AAdL,CAcK,EAEE,IAAA,gBAAQ,EAAC,OAAO,CAAC,EAMhB,UAAC,EAAS;QAAR,OAAO,aAAA;IAAM,OAAA,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;AAAjC,CAAiC,CAC3D,CAAC;AAEF,IAAM,MAAM,GAAG,UAAC,EAAkF;IAAjF,IAAA,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,YAAgB,EAAhB,IAAI,mBAAG,SAAS,KAAA,EAAK,IAAI,cAApE,0DAAqE,CAAD;IAClF,IAAM,KAAK,GAAG,IAAA,gBAAQ,GAAE,CAAC;IAEzB,IAAM,QAAQ,GAAG,CACf,SAAS,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CACnF,CAAC,iBAAiB,EAAE,CAAC;IACtB,IAAM,KAAK,GAAG,CAAA,CAAG,SAAS,IAAI,EAAE,WAAI,QAAQ,IAAI,EAAE,CAAE,CAAA,CAAC,IAAI,EAAE,IAAI,QAAQ,CAAC;IAExE,IAAM,eAAe,GAAG,IAAA,eAAO,EAAC;QAC9B,IAAM,OAAO,GAAG,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,MAAM,CAAS,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAnB,CAAmB,EAAE,CAAC,CAAC,CAAC;QACpF,IAAM,MAAM,GAAG;YACb,KAAK,CAAC,gBAAgB,CAAC,QAAQ;YAC/B,KAAK,CAAC,gBAAgB,CAAC,WAAW;YAClC,KAAK,CAAC,gBAAgB,CAAC,cAAc;YACrC,KAAK,CAAC,gBAAgB,CAAC,aAAa;YACpC,KAAK,CAAC,gBAAgB,CAAC,OAAO;YAC9B,KAAK,CAAC,gBAAgB,CAAC,WAAW;YAClC,KAAK,CAAC,gBAAgB,CAAC,UAAU;YACjC,KAAK,CAAC,gBAAgB,CAAC,MAAM;YAC7B,KAAK,CAAC,gBAAgB,CAAC,WAAW;YAClC,KAAK,CAAC,gBAAgB,CAAC,SAAS;YAChC,KAAK,CAAC,gBAAgB,CAAC,SAAS;YAChC,KAAK,CAAC,gBAAgB,CAAC,YAAY;SACpC,CAAC;QAEF,OAAO,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IACzC,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,IAAM,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,EAAC,eAAe,EAAE,SAAO,SAAS,MAAG,EAAC,CAAC,CAAC,CAAC,EAAC,eAAe,iBAAA,EAAC,CAAC;IAErF,OAAO,CACL,8BAAC,eAAe,aAAC,IAAI,EAAE,IAAI,IAAM,IAAI,IAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,KAC9D,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CACV,CACnB,CAAC;AACJ,CAAC,CAAC;AAEM,wBAAM"}

package/lib/components/Avatar/Avatars.d.ts

@@ -2,7 +2,8 @@ import React from 'react';
 import { Override } from '../../shared';
 declare type AvatarsProps = Override<React.HTMLAttributes<HTMLDivElement>, {
     max: number;
+    maxTitle?: number;
 }>;
-declare const Avatars: ({ max, children, ...rest }: AvatarsProps) => React.JSX.Element;
+declare const Avatars: React.FC<AvatarsProps>;
 export { Avatars };
 export type { AvatarsProps };

package/lib/components/Avatar/Avatars.js

@@ -53,14 +53,30 @@ var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var theme_1 = require("../../theme");
 var AvatarListContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: flex-end;\n  & > * {\n    margin-right: -4px;\n    position: relative;\n  }\n"], ["\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: flex-end;\n  & > * {\n    margin-right: -4px;\n    position: relative;\n  }\n"])));
-var RemainingAvatar = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 32px;\n  width: 32px;\n  display: inline-block;\n  border: 1px solid ", ";\n  line-height: 32px;\n  text-align: center;\n  font-size: 15px;\n  border-radius: 32px;\n  background-color: ", ";\n"], ["\n  height: 32px;\n  width: 32px;\n  display: inline-block;\n  border: 1px solid ", ";\n  line-height: 32px;\n  text-align: center;\n  font-size: 15px;\n  border-radius: 32px;\n  background-color: ", ";\n"])), (0, theme_1.getColor)('grey', 10), (0, theme_1.getColor)('white'));
+var RemainingAvatar = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 32px;\n  width: 32px;\n  border: 1px solid ", ";\n  line-height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 15px;\n  border-radius: 32px;\n  background-color: ", ";\n"], ["\n  height: 32px;\n  width: 32px;\n  border: 1px solid ", ";\n  line-height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 15px;\n  border-radius: 32px;\n  background-color: ", ";\n"])), (0, theme_1.getColor)('grey', 10), (0, theme_1.getColor)('white'));
 var Avatars = function (_a) {
-    var max = _a.max, children = _a.children, rest = __rest(_a, ["max", "children"]);
+    var max = _a.max, _b = _a.maxTitle, maxTitle = _b === void 0 ? 10 : _b, children = _a.children, rest = __rest(_a, ["max", "maxTitle", "children"]);
     var childrenArray = react_1.Children.toArray(children);
     var displayedChildren = childrenArray.slice(0, max);
+    var remainingChildren = childrenArray.slice(max, childrenArray.length + 1);
     var remainingChildrenCount = childrenArray.length - max;
     var reverseChildren = displayedChildren.reverse();
-    return (react_1.default.createElement(AvatarListContainer, __assign({}, rest),
+    var remainingUsersTitle = (0, react_1.useMemo)(function () {
+        var remainingNames = remainingChildren
+            .map(function (child) {
+            if (!react_1.default.isValidElement(child))
+                return;
+            var _a = child.props, firstName = _a.firstName, lastName = _a.lastName, username = _a.username;
+            return ((firstName || '') + " " + (lastName || '')).trim() || username;
+        })
+            .slice(0, maxTitle)
+            .join('\n');
+        if (remainingChildren.length > maxTitle) {
+            return remainingNames.concat('\n', '...');
+        }
+        return remainingNames;
+    }, [maxTitle, remainingChildren]);
+    return (react_1.default.createElement(AvatarListContainer, __assign({ title: rest.title || remainingUsersTitle }, rest),
         remainingChildrenCount > 0 && react_1.default.createElement(RemainingAvatar, null,
             "+",
             remainingChildrenCount),

package/lib/components/Avatar/Avatars.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatars.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatars.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAsC;AACtC,wEAAuC;AAEvC,qCAAwD;AAExD,IAAM,mBAAmB,GAAG,2BAAM,CAAC,GAAG,yNAAkC,sJAQvE,IAAA,CAAC;AAEF,IAAM,eAAe,GAAG,2BAAM,CAAC,IAAI,iRAAA,mFAIb,EAAoB,kHAKpB,EAAiB,KACtC,KANqB,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EAKpB,IAAA,gBAAQ,EAAC,OAAO,CAAC,CACtC,CAAC;AASF,IAAM,OAAO,GAAG,UAAC,EAAsC;IAArC,IAAA,GAAG,SAAA,EAAE,QAAQ,cAAA,EAAK,IAAI,cAAvB,mBAAwB,CAAD;IACtC,IAAM,aAAa,GAAG,gBAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACjD,IAAM,iBAAiB,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IACtD,IAAM,sBAAsB,GAAG,aAAa,CAAC,MAAM,GAAG,GAAG,CAAC;IAC1D,IAAM,eAAe,GAAG,iBAAiB,CAAC,OAAO,EAAE,CAAC;IAEpD,OAAO,CACL,8BAAC,mBAAmB,eAAK,IAAI;QAC1B,sBAAsB,GAAG,CAAC,IAAI,8BAAC,eAAe;;YAAG,sBAAsB,CAAmB;QAC1F,eAAe,CACI,CACvB,CAAC;AACJ,CAAC,CAAC;AAEM,0BAAO"}
+{"version":3,"file":"Avatars.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatars.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+C;AAC/C,wEAAuC;AAEvC,qCAAwD;AAGxD,IAAM,mBAAmB,GAAG,2BAAM,CAAC,GAAG,yNAAkC,sJAQvE,IAAA,CAAC;AAEF,IAAM,eAAe,GAAG,2BAAM,CAAC,IAAI,sSAAA,yDAGb,EAAoB,iKAOpB,EAAiB,KACtC,KARqB,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EAOpB,IAAA,gBAAQ,EAAC,OAAO,CAAC,CACtC,CAAC;AAUF,IAAM,OAAO,GAA2B,UAAC,EAAuC;IAAtC,IAAA,GAAG,SAAA,EAAE,gBAAa,EAAb,QAAQ,mBAAG,EAAE,KAAA,EAAE,QAAQ,cAAA,EAAK,IAAI,cAAtC,+BAAuC,CAAD;IAC7E,IAAM,aAAa,GAAG,gBAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACjD,IAAM,iBAAiB,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IACtD,IAAM,iBAAiB,GAAG,aAAa,CAAC,KAAK,CAAC,GAAG,EAAE,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAC7E,IAAM,sBAAsB,GAAG,aAAa,CAAC,MAAM,GAAG,GAAG,CAAC;IAC1D,IAAM,eAAe,GAAG,iBAAiB,CAAC,OAAO,EAAE,CAAC;IAEpD,IAAM,mBAAmB,GAAG,IAAA,eAAO,EAAC;QAClC,IAAM,cAAc,GAAG,iBAAiB;aACrC,GAAG,CAAC,UAAA,KAAK;YACR,IAAI,CAAC,eAAK,CAAC,cAAc,CAAc,KAAK,CAAC;gBAAE,OAAO;YAChD,IAAA,KAAkC,KAAK,CAAC,KAAK,EAA5C,SAAS,eAAA,EAAE,QAAQ,cAAA,EAAE,QAAQ,cAAe,CAAC;YAEpD,OAAO,CAAA,CAAG,SAAS,IAAI,EAAE,WAAI,QAAQ,IAAI,EAAE,CAAE,CAAA,CAAC,IAAI,EAAE,IAAI,QAAQ,CAAC;QACnE,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,EAAE,QAAQ,CAAC;aAClB,IAAI,CAAC,IAAI,CAAC,CAAC;QAEd,IAAI,iBAAiB,CAAC,MAAM,GAAG,QAAQ,EAAE;YACvC,OAAO,cAAc,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;SAC3C;QAED,OAAO,cAAc,CAAC;IACxB,CAAC,EAAE,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAElC,OAAO,CACL,8BAAC,mBAAmB,aAAC,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,mBAAmB,IAAM,IAAI;QACpE,sBAAsB,GAAG,CAAC,IAAI,8BAAC,eAAe;;YAAG,sBAAsB,CAAmB;QAC1F,eAAe,CACI,CACvB,CAAC;AACJ,CAAC,CAAC;AAEM,0BAAO"}

package/lib/components/Avatar/types.d.ts

@@ -0,0 +1,11 @@
+import { Override } from '../../shared';
+import React from 'react';
+export declare type User = {
+    username: string;
+    firstName: string;
+    lastName: string;
+    avatarUrl?: string;
+};
+export declare type AvatarProps = Override<React.HTMLAttributes<HTMLSpanElement>, User & {
+    size?: 'default' | 'big';
+}>;

package/lib/components/Avatar/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/lib/components/Avatar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/Avatar/types.ts"],"names":[],"mappings":""}

package/lib/components/Dropdown/Dropdown.d.ts

@@ -37,6 +37,7 @@ declare const Dropdown: {
     } & React.RefAttributes<HTMLDivElement>>;
     Surtitle: React.FC<{
         label: string;
+        children?: React.ReactNode;
     }>;
 };
 export { Dropdown };

package/lib/components/Dropdown/Surtitle/Surtitle.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 declare type SurtitleProps = {
     label: string;
+    children?: React.ReactNode;
 };
 declare const Surtitle: React.FC<SurtitleProps>;
 export { Surtitle };

package/lib/components/Navigation/SubNavigationPanel/SubNavigationPanel.d.ts

@@ -6,9 +6,11 @@ declare type SubNavigationPanelProps = {
     close: () => void;
     closeTitle?: string;
     openTitle?: string;
+    noPadding?: boolean;
 };
 declare type SubNavigationPanelCompoundType = ForwardRefExoticComponent<PropsWithoutRef<SubNavigationPanelProps> & RefAttributes<HTMLDivElement>> & {
     Collapsed?: any;
+    Section?: any;
 };
 declare const SubNavigationPanel: SubNavigationPanelCompoundType;
 export { SubNavigationPanel };

package/lib/components/Navigation/SubNavigationPanel/SubNavigationPanel.js

@@ -49,62 +49,50 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SubNavigationPanel = void 0;
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importStar(require("styled-components"));
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var icons_1 = require("../../../icons");
 var theme_1 = require("../../../theme");
-var collapsableStyles = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  opacity: ", ";\n  transition: opacity 0.3s;\n  transition-delay: 0.3s;\n\n  position: relative;\n  z-index: 1;\n  ", "\n"], ["\n  opacity: ", ";\n  transition: opacity 0.3s;\n  transition-delay: 0.3s;\n\n  position: relative;\n  z-index: 1;\n  ", "\n"])), function (_a) {
+var Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border-right: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  transition: width 0.3s linear;\n  width: ", ";\n"], ["\n  background-color: ", ";\n  border-right: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  transition: width 0.3s linear;\n  width: ", ";\n"])), (0, theme_1.getColor)('grey', 20), (0, theme_1.getColor)('grey', 80), function (_a) {
     var isOpen = _a.isOpen;
-    return (isOpen ? 1 : 0);
-}, function (_a) {
-    var isOpen = _a.isOpen;
-    return !isOpen && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: absolute;\n      z-index: 0;\n    "], ["\n      position: absolute;\n      z-index: 0;\n    "])));
-});
-var Panel = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: calc(100% - 54px);\n  width: 100%;\n  position: absolute;\n  overflow-y: ", ";\n  overflow-x: hidden;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: calc(100% - 54px);\n  width: 100%;\n  position: absolute;\n  overflow-y: ", ";\n  overflow-x: hidden;\n"])), function (_a) {
-    var isOpen = _a.isOpen;
-    return (isOpen ? 'auto' : 'hidden');
+    return (isOpen ? '280px' : '40px');
 });
-var PanelContent = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  flex-grow: 1;\n  width: 100%;\n  padding: ", ";\n  ", "\n"], ["\n  box-sizing: border-box;\n  flex-grow: 1;\n  width: 100%;\n  padding: ", ";\n  ", "\n"])), function (_a) {
-    var isOpen = _a.isOpen;
-    return (isOpen ? '30px' : '10px 5px');
-}, collapsableStyles);
-var ToggleButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background: none;\n  border: none;\n  border-top: 1px solid ", ";\n  cursor: pointer;\n  height: 54px;\n  margin: ", ";\n  padding: ", ";\n  transition: margin 0.3s ease-in-out, padding 0.3s ease-in-out;\n  text-align: left;\n  position: absolute;\n  bottom: 0;\n  width: ", ";\n\n  svg {\n    color: ", ";\n    width: 15px;\n  }\n"], ["\n  align-items: center;\n  background: none;\n  border: none;\n  border-top: 1px solid ", ";\n  cursor: pointer;\n  height: 54px;\n  margin: ", ";\n  padding: ", ";\n  transition: margin 0.3s ease-in-out, padding 0.3s ease-in-out;\n  text-align: left;\n  position: absolute;\n  bottom: 0;\n  width: ", ";\n\n  svg {\n    color: ", ";\n    width: 15px;\n  }\n"])), (0, theme_1.getColor)('grey', 80), function (_a) {
+var Content = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  opacity: ", ";\n  transition: ", ";\n  padding: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  opacity: ", ";\n  transition: ", ";\n  padding: ", ";\n"])), function (_a) {
     var isOpen = _a.isOpen;
-    return (isOpen ? '0 20px' : '0');
+    return (isOpen ? '1' : '0');
 }, function (_a) {
     var isOpen = _a.isOpen;
-    return (isOpen ? '0' : '0 12.5px');
+    return (isOpen ? 'opacity 300ms linear 300ms' : 'none');
 }, function (_a) {
-    var isOpen = _a.isOpen;
-    return (isOpen ? '240px' : '40px');
-}, (0, theme_1.getColor)('grey', 100));
-var Container = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: ", ";\n  transition: width 0.3s linear;\n  position: relative;\n  order: -10;\n  background-color: ", ";\n  border-right: 1px solid ", ";\n  flex-shrink: 0;\n  height: 100%;\n  z-index: 802;\n  overflow: hidden;\n"], ["\n  width: ", ";\n  transition: width 0.3s linear;\n  position: relative;\n  order: -10;\n  background-color: ", ";\n  border-right: 1px solid ", ";\n  flex-shrink: 0;\n  height: 100%;\n  z-index: 802;\n  overflow: hidden;\n"])), function (_a) {
-    var isOpen = _a.isOpen;
-    return (isOpen ? '280px' : '40px');
-}, (0, theme_1.getColor)('grey', 20), (0, theme_1.getColor)('grey', 80));
-var Collapsed = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  flex-grow: 1;\n  padding: 10px 5px;\n  ", "\n"], ["\n  flex-grow: 1;\n  padding: 10px 5px;\n  ", "\n"])), collapsableStyles);
-Collapsed.displayName = 'Collapsed';
-Collapsed.defaultProps = {
-    isOpen: false,
-};
+    var noPadding = _a.noPadding;
+    return (noPadding ? '0' : '30px');
+});
+var ToggleButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  background: none;\n  border: none;\n  border-top: 1px solid ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  flex: 0 0 auto;\n  height: 54px;\n  padding: 0;\n  padding-left: 12.5px;\n\n  svg {\n    color: ", ";\n    width: 15px;\n  }\n"], ["\n  align-items: center;\n  background: none;\n  border: none;\n  border-top: 1px solid ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  flex: 0 0 auto;\n  height: 54px;\n  padding: 0;\n  padding-left: 12.5px;\n\n  svg {\n    color: ", ";\n    width: 15px;\n  }\n"])), (0, theme_1.getColor)('grey', 80), (0, theme_1.getColor)('grey', 100));
+var Collapsed = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 10px 5px;\n"], ["\n  padding: 10px 5px;\n"])));
 var SubNavigationPanel = react_1.default.forwardRef(function (_a, forwardedRef) {
-    var children = _a.children, _b = _a.isOpen, isOpen = _b === void 0 ? true : _b, open = _a.open, close = _a.close, _c = _a.closeTitle, closeTitle = _c === void 0 ? '' : _c, _d = _a.openTitle, openTitle = _d === void 0 ? '' : _d, rest = __rest(_a, ["children", "isOpen", "open", "close", "closeTitle", "openTitle"]);
-    var contentChildren = [];
-    var collapsedContent = null;
+    var children = _a.children, _b = _a.isOpen, isOpen = _b === void 0 ? true : _b, open = _a.open, close = _a.close, _c = _a.closeTitle, closeTitle = _c === void 0 ? '' : _c, _d = _a.openTitle, openTitle = _d === void 0 ? '' : _d, _e = _a.noPadding, noPadding = _e === void 0 ? false : _e, rest = __rest(_a, ["children", "isOpen", "open", "close", "closeTitle", "openTitle", "noPadding"]);
+    var collapsedElements = [];
+    var contentElements = [];
     react_1.default.Children.forEach(children, function (child) {
         if (react_1.default.isValidElement(child) && child.type === Collapsed) {
-            collapsedContent = react_1.default.cloneElement(child, { isOpen: !isOpen });
-            return;
+            collapsedElements.push(child);
+        }
+        else {
+            contentElements.push(child);
         }
-        contentChildren.push(child);
     });
+    var _f = react_1.default.useState(isOpen), isOpenTransition = _f[0], setIsOpenTransition = _f[1];
+    (0, react_1.useLayoutEffect)(function () {
+        setIsOpenTransition(isOpen);
+    }, [isOpen]);
     return (react_1.default.createElement(Container, __assign({ ref: forwardedRef, isOpen: isOpen }, rest),
-        react_1.default.createElement(Panel, { isOpen: isOpen },
-            collapsedContent,
-            react_1.default.createElement(PanelContent, { isOpen: isOpen }, isOpen && contentChildren)),
+        !isOpen && collapsedElements,
+        react_1.default.createElement(Content, { isOpen: isOpenTransition, noPadding: noPadding }, isOpen && contentElements),
         react_1.default.createElement(ToggleButton, { isOpen: isOpen, onClick: function () { return (isOpen ? close() : open()); }, title: isOpen ? closeTitle : openTitle, "data-testid": "open-subnavigation-button" }, isOpen ? react_1.default.createElement(icons_1.PanelCloseIcon, null) : react_1.default.createElement(icons_1.PanelOpenIcon, null))));
 });
 exports.SubNavigationPanel = SubNavigationPanel;
+SubNavigationPanel.displayName = 'SubNavigationPanel';
+Collapsed.displayName = 'SubNavigationPanel.Collapsed';
 SubNavigationPanel.Collapsed = Collapsed;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 //# sourceMappingURL=SubNavigationPanel.js.map

package/lib/components/Navigation/SubNavigationPanel/SubNavigationPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubNavigationPanel.js","sourceRoot":"","sources":["../../../../src/components/Navigation/SubNavigationPanel/SubNavigationPanel.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAkG;AAClG,qEAA8C;AAC9C,wCAA6D;AAC7D,wCAA2D;AAE3D,IAAM,iBAAiB,OAAG,uBAAG,kMAAuC,eACvD,EAA8B,uGAMvC,EAKC,IACJ,KAZY,UAAC,EAAQ;QAAP,MAAM,YAAA;IAAM,OAAA,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAAhB,CAAgB,EAMvC,UAAC,EAAQ;QAAP,MAAM,YAAA;IACR,OAAA,CAAC,MAAM,QACP,uBAAG,0HAAA,sDAGF,IAAA;AAJD,CAIC,CACJ,CAAC;AACF,IAAM,KAAK,GAAG,2BAAM,CAAC,GAAG,qOAAuC,oIAM/C,EAA0C,4BAEzD,KAFe,UAAC,EAAQ;QAAP,MAAM,YAAA;IAAM,OAAA,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;AAA5B,CAA4B,CAEzD,CAAC;AAEF,IAAM,YAAY,GAAG,2BAAM,CAAC,GAAG,6JAAuC,2EAIzD,EAA4C,OACrD,EAAiB,IACpB,KAFY,UAAC,EAAQ;QAAP,MAAM,YAAA;IAAM,OAAA,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC;AAA9B,CAA8B,EACrD,iBAAiB,CACpB,CAAC;AAEF,IAAM,YAAY,GAAG,2BAAM,CAAC,MAAM,4aAAuC,0FAI/C,EAAoB,oDAGlC,EAAuC,gBACtC,EAAyC,0IAK3C,EAAyC,2BAGvC,EAAqB,4BAGjC,KAfyB,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EAGlC,UAAC,EAAQ;QAAP,MAAM,YAAA;IAAM,OAAA,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC;AAAzB,CAAyB,EACtC,UAAC,EAAQ;QAAP,MAAM,YAAA;IAAM,OAAA,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,UAAU,CAAC;AAA3B,CAA2B,EAK3C,UAAC,EAAQ;QAAP,MAAM,YAAA;IAAM,OAAA,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;AAA3B,CAA2B,EAGvC,IAAA,gBAAQ,EAAC,MAAM,EAAE,GAAG,CAAC,CAGjC,CAAC;AAEF,IAAM,SAAS,GAAG,2BAAM,CAAC,GAAG,qSAAuC,aACxD,EAAyC,iGAI9B,EAAoB,+BACd,EAAoB,+EAK/C,KAVU,UAAC,EAAQ;QAAP,MAAM,YAAA;IAAM,OAAA,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;AAA3B,CAA2B,EAI9B,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EACd,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,CAK/C,CAAC;AAEF,IAAM,SAAS,GAAG,2BAAM,CAAC,GAAG,sHAAuC,6CAG/D,EAAiB,IACpB,KADG,iBAAiB,CACpB,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AACpC,SAAS,CAAC,YAAY,GAAG;IACvB,MAAM,EAAE,KAAK;CACd,CAAC;AA2CF,IAAM,kBAAkB,GAAmC,eAAK,CAAC,UAAU,CACzE,UACE,EAAiH,EACjH,YAAuC;IADtC,IAAA,QAAQ,cAAA,EAAE,cAAqB,EAAb,MAAM,mBAAG,IAAI,KAAA,EAAE,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,kBAAe,EAAf,UAAU,mBAAG,EAAE,KAAA,EAAE,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EAAK,IAAI,cAAvF,kEAAwF,CAAD;IAGvF,IAAM,eAAe,GAAgB,EAAE,CAAC;IACxC,IAAI,gBAAgB,GAAqB,IAAI,CAAC;IAC9C,eAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,UAAA,KAAK;QACpC,IAAI,eAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,EAAE;YAC3D,gBAAgB,GAAG,eAAK,CAAC,YAAY,CAAC,KAAK,EAAE,EAAC,MAAM,EAAE,CAAC,MAAM,EAAC,CAAC,CAAC;YAChE,OAAO;SACR;QACD,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,8BAAC,SAAS,aAAC,GAAG,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,IAAM,IAAI;QACpD,8BAAC,KAAK,IAAC,MAAM,EAAE,MAAM;YAClB,gBAAgB;YACjB,8BAAC,YAAY,IAAC,MAAM,EAAE,MAAM,IAAG,MAAM,IAAI,eAAe,CAAgB,CAClE;QACR,8BAAC,YAAY,IACX,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,cAAM,OAAA,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,EAA3B,CAA2B,EAC1C,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,iBAC1B,2BAA2B,IAEtC,MAAM,CAAC,CAAC,CAAC,8BAAC,sBAAc,OAAG,CAAC,CAAC,CAAC,8BAAC,qBAAa,OAAG,CACnC,CACL,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAIM,gDAAkB;AAF1B,kBAAkB,CAAC,SAAS,GAAG,SAAS,CAAC"}
+{"version":3,"file":"SubNavigationPanel.js","sourceRoot":"","sources":["../../../../src/components/Navigation/SubNavigationPanel/SubNavigationPanel.tsx"],"names":[],"mappings":"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"}

package/package.json

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

package/src/components/Avatar/Avatar.stories.mdx

@@ -92,7 +92,7 @@ You can use a dedicated component to display avatar list. After a defined maximu
         <>
           <Avatars
             max={5}
-            title="Helen Doe&#10;Isabel Doe&#10;John Doe&#10;Kurt Doe&#10;Leonard Doe"
+            maxTitle={5}
           >
             <Avatar
               {...args}

package/src/components/Avatar/Avatar.tsx

@@ -1,8 +1,8 @@
 import React, {useMemo} from 'react';
 import styled, {css} from 'styled-components';
 import {useTheme} from '../../hooks';
-import {Override} from '../../shared';
 import {AkeneoThemedProps, getColor} from '../../theme';
+import {AvatarProps} from './types';
 
 const AvatarContainer = styled.span<AvatarProps & AkeneoThemedProps>`
   ${({size}) =>
@@ -31,43 +31,13 @@ const AvatarContainer = styled.span<AvatarProps & AkeneoThemedProps>`
   cursor: ${({onClick}) => (onClick ? 'pointer' : 'default')};
 `;
 
-type AvatarProps = Override<
-  React.HTMLAttributes<HTMLSpanElement>,
-  {
-    /**
-     * Username to use as fallback if the avatar is not provided and the Firstname and Lastname are empty.
-     */
-    username: string;
-
-    /**
-     * Firstname to use as fallback with the Lastname if the avatar is not provided.
-     */
-    firstName: string;
-
-    /**
-     * Lastname to use as fallback with the Firstname if the avatar is not provided.
-     */
-    lastName: string;
-
-    /**
-     * Url of the avatar image.
-     */
-    avatarUrl?: string;
-
-    /**
-     * Size of the avatar.
-     */
-    size?: 'default' | 'big';
-  }
->;
-
 const Avatar = ({username, firstName, lastName, avatarUrl, size = 'default', ...rest}: AvatarProps) => {
   const theme = useTheme();
 
   const fallback = (
     firstName.trim().charAt(0) + lastName.trim().charAt(0) || username.substring(0, 2)
   ).toLocaleUpperCase();
-  const title = `${firstName} ${lastName}`.trim() || username;
+  const title = `${firstName || ''} ${lastName || ''}`.trim() || username;
 
   const backgroundColor = useMemo(() => {
     const colorId = username.split('').reduce<number>((s, l) => s + l.charCodeAt(0), 0);

package/src/components/Avatar/Avatars.tsx

@@ -1,7 +1,8 @@
-import React, {Children} from 'react';
+import React, {Children, useMemo} from 'react';
 import styled from 'styled-components';
 import {Override} from '../../shared';
 import {AkeneoThemedProps, getColor} from '../../theme';
+import {AvatarProps} from './types';
 
 const AvatarListContainer = styled.div<AvatarsProps & AkeneoThemedProps>`
   display: flex;
@@ -16,10 +17,11 @@ const AvatarListContainer = styled.div<AvatarsProps & AkeneoThemedProps>`
 const RemainingAvatar = styled.span`
   height: 32px;
   width: 32px;
-  display: inline-block;
   border: 1px solid ${getColor('grey', 10)};
   line-height: 32px;
-  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-size: 15px;
   border-radius: 32px;
   background-color: ${getColor('white')};
@@ -29,17 +31,37 @@ type AvatarsProps = Override<
   React.HTMLAttributes<HTMLDivElement>,
   {
     max: number;
+    maxTitle?: number;
   }
 >;
 
-const Avatars = ({max, children, ...rest}: AvatarsProps) => {
+const Avatars: React.FC<AvatarsProps> = ({max, maxTitle = 10, children, ...rest}) => {
   const childrenArray = Children.toArray(children);
   const displayedChildren = childrenArray.slice(0, max);
+  const remainingChildren = childrenArray.slice(max, childrenArray.length + 1);
   const remainingChildrenCount = childrenArray.length - max;
   const reverseChildren = displayedChildren.reverse();
 
+  const remainingUsersTitle = useMemo(() => {
+    const remainingNames = remainingChildren
+      .map(child => {
+        if (!React.isValidElement<AvatarProps>(child)) return;
+        const {firstName, lastName, username} = child.props;
+
+        return `${firstName || ''} ${lastName || ''}`.trim() || username;
+      })
+      .slice(0, maxTitle)
+      .join('\n');
+
+    if (remainingChildren.length > maxTitle) {
+      return remainingNames.concat('\n', '...');
+    }
+
+    return remainingNames;
+  }, [maxTitle, remainingChildren]);
+
   return (
-    <AvatarListContainer {...rest}>
+    <AvatarListContainer title={rest.title || remainingUsersTitle} {...rest}>
       {remainingChildrenCount > 0 && <RemainingAvatar>+{remainingChildrenCount}</RemainingAvatar>}
       {reverseChildren}
     </AvatarListContainer>

package/src/components/Avatar/Avatars.unit.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {render, screen} from '../../storybook/test-util';
+import {fireEvent, render, screen} from '../../storybook/test-util';
 import {Avatar} from './Avatar';
 import {Avatars} from './Avatars';
 
@@ -24,7 +24,7 @@ test('renders a maximum number of avatars', () => {
   );
 
   expect(screen.getByTitle('John Doe')).toBeInTheDocument();
-  expect(screen.queryByTitle('Leonard Doe')).not.toBeInTheDocument();
+  expect(screen.queryByText('LD')).not.toBeInTheDocument();
   expect(screen.getByText('+1')).toBeInTheDocument();
 });
 
@@ -39,3 +39,23 @@ test('supports ...rest props', () => {
 
   expect(screen.getByTestId('my_value')).toBeInTheDocument();
 });
+
+test('displays remaining users names on plus hover', () => {
+  const invalidChild = 'I should not be in the title';
+  render(
+    <Avatars max={1} maxTitle={1}>
+      <Avatar username="dSchrute" firstName="Dwight" lastName="Schrute" />
+      <Avatar username="mscott" firstName=" " lastName="  " />
+      <Avatar username="kMalone" firstName="Kevin" lastName="Malone" />
+      {invalidChild}
+    </Avatars>
+  );
+
+  expect(screen.getByText('DS')).toBeInTheDocument();
+  expect(screen.getByText('+3')).toBeInTheDocument();
+  // Kevin Malone should not be visible as it should be part of the +1
+  expect(screen.queryByText('mscott')).not.toBeInTheDocument();
+
+  fireEvent.mouseOver(screen.getByText('+3'));
+  expect(screen.getByTitle('mscott ...')).toBeInTheDocument();
+});

package/src/components/Avatar/types.ts

@@ -0,0 +1,34 @@
+import {Override} from '../../shared';
+import React from 'react';
+
+export type User = {
+  /**
+   * Username to use as fallback if the avatar is not provided and the Firstname and Lastname are empty.
+   */
+  username: string;
+
+  /**
+   * Firstname to use as fallback with the Lastname if the avatar is not provided.
+   */
+  firstName: string;
+
+  /**
+   * Lastname to use as fallback with the Firstname if the avatar is not provided.
+   */
+  lastName: string;
+
+  /**
+   * Url of the avatar image.
+   */
+  avatarUrl?: string;
+};
+
+export type AvatarProps = Override<
+  React.HTMLAttributes<HTMLSpanElement>,
+  User & {
+    /**
+     * Size of the avatar.
+     */
+    size?: 'default' | 'big';
+  }
+>;

package/src/components/Dropdown/Surtitle/Surtitle.tsx

@@ -19,7 +19,7 @@ const Title = styled.span`
   text-overflow: ellipsis;
 `;
 
-type SurtitleProps = {label: string};
+type SurtitleProps = {label: string; children?: React.ReactNode};
 
 const Surtitle: React.FC<SurtitleProps> = ({label, children, ...rest}) => (
   <SurtitleContainer {...rest}>

package/src/components/Navigation/SubNavigationPanel/SubNavigationPanel.stories.mdx

@@ -1,10 +1,12 @@
-import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs';
-import { SubNavigationPanel } from './SubNavigationPanel.tsx';
-import { SpaceContainer } from '../../../storybook/PreviewGallery';
-import { useBooleanState } from '../../../hooks';
-import { MoreVerticalIcon } from "../../../icons";
-import { Dropdown } from "../../Dropdown/Dropdown";
-import { Link } from "../../Link/Link";
+import {Meta, Story, ArgsTable, Canvas} from '@storybook/addon-docs';
+import {SubNavigationPanel} from './SubNavigationPanel.tsx';
+import {SpaceContainer} from '../../../storybook/PreviewGallery';
+import {useBooleanState} from '../../../hooks';
+import {MoreVerticalIcon} from '../../../icons';
+import {Dropdown} from '../../Dropdown/Dropdown';
+import {Link} from '../../Link/Link';
+import {useState} from 'react';
+import {Collapse} from '../../Collapse/Collapse';
 
 <Meta
   title="Components/Navigation/SubNavigationPanel"
@@ -12,7 +14,7 @@ import { Link } from "../../Link/Link";
     SubNavigationPanel: SubNavigationPanel,
     'SubNavigationPanel.Collapsed': SubNavigationPanel.Collapsed,
   }}
-  args={{ children: 'Some content', isOpen: true, closeTitle: 'Close', openTitle: 'Open' }}
+  args={{children: 'Some content', isOpen: true, closeTitle: 'Close', openTitle: 'Open'}}
 />
 
 # SubNavigationPanel
@@ -33,9 +35,10 @@ When the panel is collapsed the content is hidden.
 <Canvas>
   <Story name="Standard">
     {args => {
+      const [isOpen, open, close] = useBooleanState(true);
       return (
         <SpaceContainer height={200}>
-          <SubNavigationPanel {...args} />
+          <SubNavigationPanel {...args} isOpen={isOpen} open={open} close={close} />
         </SpaceContainer>
       );
     }}
@@ -44,34 +47,44 @@ When the panel is collapsed the content is hidden.
 
 <ArgsTable story="Standard" />
 
-## Panel is collapsed
+## Panel with scrollable content
 
 <Canvas>
-  <Story name="Collapsed">
+  <Story name="ScrollableContent">
     {args => {
+      const [isOpen, open, close] = useBooleanState(true);
       return (
         <SpaceContainer height={200}>
-          <SubNavigationPanel {...args} isOpen={false} />
+          <SubNavigationPanel {...args} isOpen={isOpen} open={open} close={close}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            <br />
+            Fusce sed quam pharetra, lacinia nisl at, luctus ex.
+            <br />
+            Donec pretium est a augue dapibus, at semper ipsum vestibulum.
+            <br />
+            Aenean blandit metus a nibh blandit porta.
+            <br />
+            Phasellus placerat ligula sit amet vestibulum tristique.
+          </SubNavigationPanel>
         </SpaceContainer>
       );
     }}
   </Story>
 </Canvas>
 
-
-## Panel with collapsed and expanded content
+## Panel with collapsed content using Dropdown component
 
 <Canvas>
   <Story name="CollapsedExpandedContent">
     {args => {
-      const [isOpen, open, close] = useBooleanState(true);
+      const [isOpen, open, close] = useBooleanState(false);
       const [isDropdownOpen, openDropDown, closeDropDown] = useBooleanState(false);
       return (
         <SpaceContainer height={200}>
           <SubNavigationPanel {...args} isOpen={isOpen} open={open} close={close}>
             <SubNavigationPanel.Collapsed>
               <Dropdown>
-                <MoreVerticalIcon title="Collapsed Content" onClick={openDropDown} />
+                <MoreVerticalIcon title="More" onClick={openDropDown} />
                 {isDropdownOpen && (
                   <Dropdown.Overlay onClose={closeDropDown}>
                     <Dropdown.ItemCollection>
@@ -81,15 +94,74 @@ When the panel is collapsed the content is hidden.
                 )}
               </Dropdown>
             </SubNavigationPanel.Collapsed>
-            <Link>Expanded Content</Link>
-            <div>Expanded Content</div>
-            <div>Expanded Content</div>
-            <div>Expanded Content</div>
-            <div>Expanded Content</div>
-            <div>Expanded Content</div>
-            <div>Expanded Content</div>
-            <div>Expanded Content</div>
-            <div>Expanded Content</div>
+            Some content
+          </SubNavigationPanel>
+        </SpaceContainer>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Panel without padding
+
+<Canvas>
+  <Story name="ContentWithoutPadding">
+    {args => {
+      const [isOpen, open, close] = useBooleanState(true);
+      const [collapse, setCollapse] = useState(1);
+      return (
+        <SpaceContainer height={200}>
+          <SubNavigationPanel {...args} isOpen={isOpen} open={open} close={close} noPadding>
+            Some content
+          </SubNavigationPanel>
+        </SpaceContainer>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Panel using Collapse components
+
+<Canvas>
+  <Story name="ContentWithCollapseComponent">
+    {args => {
+      const [isOpen, open, close] = useBooleanState(true);
+      const [collapse, setCollapse] = useState(1);
+      return (
+        <SpaceContainer height={200}>
+          <SubNavigationPanel {...args} isOpen={isOpen} open={open} close={close} noPadding>
+            <Collapse
+              label="First Collapse"
+              collapseButtonLabel="Collapse"
+              isOpen={collapse === 1}
+              onCollapse={() => setCollapse(1)}
+            >
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              <br />
+              Fusce sed quam pharetra, lacinia nisl at, luctus ex.
+              <br />
+              Donec pretium est a augue dapibus, at semper ipsum vestibulum.
+              <br />
+              Aenean blandit metus a nibh blandit porta.
+              <br />
+              Phasellus placerat ligula sit amet vestibulum tristique.
+            </Collapse>
+            <Collapse
+              label="Second Collapse"
+              collapseButtonLabel="Collapse"
+              isOpen={collapse === 2}
+              onCollapse={() => setCollapse(2)}
+            >
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              <br />
+              Fusce sed quam pharetra, lacinia nisl at, luctus ex.
+              <br />
+              Donec pretium est a augue dapibus, at semper ipsum vestibulum.
+              <br />
+              Aenean blandit metus a nibh blandit porta.
+              <br />
+              Phasellus placerat ligula sit amet vestibulum tristique.
+            </Collapse>
           </SubNavigationPanel>
         </SpaceContainer>
       );

package/src/components/Navigation/SubNavigationPanel/SubNavigationPanel.tsx

@@ -1,54 +1,42 @@
-import React, {ForwardRefExoticComponent, PropsWithoutRef, ReactNode, RefAttributes} from 'react';
-import styled, {css} from 'styled-components';
+import React, {ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, useLayoutEffect} from 'react';
+import styled from 'styled-components';
 import {PanelCloseIcon, PanelOpenIcon} from '../../../icons';
 import {AkeneoThemedProps, getColor} from '../../../theme';
 
-const collapsableStyles = css<{isOpen: boolean} & AkeneoThemedProps>`
-  opacity: ${({isOpen}) => (isOpen ? 1 : 0)};
-  transition: opacity 0.3s;
-  transition-delay: 0.3s;
-
-  position: relative;
-  z-index: 1;
-  ${({isOpen}) =>
-    !isOpen &&
-    css`
-      position: absolute;
-      z-index: 0;
-    `}
-`;
-const Panel = styled.div<{isOpen: boolean} & AkeneoThemedProps>`
+const Container = styled.div<{isOpen: boolean} & AkeneoThemedProps>`
+  background-color: ${getColor('grey', 20)};
+  border-right: 1px solid ${getColor('grey', 80)};
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  height: calc(100% - 54px);
-  width: 100%;
-  position: absolute;
-  overflow-y: ${({isOpen}) => (isOpen ? 'auto' : 'hidden')};
-  overflow-x: hidden;
+  height: 100%;
+  transition: width 0.3s linear;
+  width: ${({isOpen}) => (isOpen ? '280px' : '40px')};
 `;
 
-const PanelContent = styled.div<{isOpen: boolean} & AkeneoThemedProps>`
-  box-sizing: border-box;
+const Content = styled.div<{isOpen: boolean; noPadding: boolean}>`
+  display: flex;
+  flex-direction: column;
   flex-grow: 1;
-  width: 100%;
-  padding: ${({isOpen}) => (isOpen ? '30px' : '10px 5px')};
-  ${collapsableStyles}
+  overflow-x: hidden;
+  overflow-y: auto;
+  opacity: ${({isOpen}) => (isOpen ? '1' : '0')};
+  transition: ${({isOpen}) => (isOpen ? 'opacity 300ms linear 300ms' : 'none')};
+  padding: ${({noPadding}) => (noPadding ? '0' : '30px')};
 `;
 
-const ToggleButton = styled.button<{isOpen: boolean} & AkeneoThemedProps>`
+const ToggleButton = styled.button<AkeneoThemedProps>`
   align-items: center;
   background: none;
   border: none;
   border-top: 1px solid ${getColor('grey', 80)};
+  box-sizing: border-box;
   cursor: pointer;
+  display: flex;
+  flex: 0 0 auto;
   height: 54px;
-  margin: ${({isOpen}) => (isOpen ? '0 20px' : '0')};
-  padding: ${({isOpen}) => (isOpen ? '0' : '0 12.5px')};
-  transition: margin 0.3s ease-in-out, padding 0.3s ease-in-out;
-  text-align: left;
-  position: absolute;
-  bottom: 0;
-  width: ${({isOpen}) => (isOpen ? '240px' : '40px')};
+  padding: 0;
+  padding-left: 12.5px;
 
   svg {
     color: ${getColor('grey', 100)};
@@ -56,30 +44,10 @@ const ToggleButton = styled.button<{isOpen: boolean} & AkeneoThemedProps>`
   }
 `;
 
-const Container = styled.div<{isOpen: boolean} & AkeneoThemedProps>`
-  width: ${({isOpen}) => (isOpen ? '280px' : '40px')};
-  transition: width 0.3s linear;
-  position: relative;
-  order: -10;
-  background-color: ${getColor('grey', 20)};
-  border-right: 1px solid ${getColor('grey', 80)};
-  flex-shrink: 0;
-  height: 100%;
-  z-index: 802;
-  overflow: hidden;
-`;
-
-const Collapsed = styled.div<{isOpen: boolean} & AkeneoThemedProps>`
-  flex-grow: 1;
+const Collapsed = styled.div`
   padding: 10px 5px;
-  ${collapsableStyles}
 `;
 
-Collapsed.displayName = 'Collapsed';
-Collapsed.defaultProps = {
-  isOpen: false,
-};
-
 type SubNavigationPanelProps = {
   /**
    * The content of the panel.
@@ -110,12 +78,18 @@ type SubNavigationPanelProps = {
    * Opening title to display for the ToggleButton
    */
   openTitle?: string;
+
+  /**
+   * Whether or not the panel should have padding.
+   */
+  noPadding?: boolean;
 };
 
 type SubNavigationPanelCompoundType = ForwardRefExoticComponent<
   PropsWithoutRef<SubNavigationPanelProps> & RefAttributes<HTMLDivElement>
 > & {
   Collapsed?: any;
+  Section?: any;
 };
 
 /**
@@ -123,25 +97,40 @@ type SubNavigationPanelCompoundType = ForwardRefExoticComponent<
  */
 const SubNavigationPanel: SubNavigationPanelCompoundType = React.forwardRef<HTMLDivElement, SubNavigationPanelProps>(
   (
-    {children, isOpen: isOpen = true, open, close, closeTitle = '', openTitle = '', ...rest}: SubNavigationPanelProps,
+    {
+      children,
+      isOpen = true,
+      open,
+      close,
+      closeTitle = '',
+      openTitle = '',
+      noPadding = false,
+      ...rest
+    }: SubNavigationPanelProps,
     forwardedRef: React.Ref<HTMLDivElement>
   ) => {
-    const contentChildren: ReactNode[] = [];
-    let collapsedContent: ReactNode | null = null;
+    const collapsedElements: React.ReactNode[] = [];
+    const contentElements: React.ReactNode[] = [];
+
     React.Children.forEach(children, child => {
       if (React.isValidElement(child) && child.type === Collapsed) {
-        collapsedContent = React.cloneElement(child, {isOpen: !isOpen});
-        return;
+        collapsedElements.push(child);
+      } else {
+        contentElements.push(child);
       }
-      contentChildren.push(child);
     });
 
+    const [isOpenTransition, setIsOpenTransition] = React.useState<boolean>(isOpen);
+    useLayoutEffect(() => {
+      setIsOpenTransition(isOpen);
+    }, [isOpen]);
+
     return (
       <Container ref={forwardedRef} isOpen={isOpen} {...rest}>
-        <Panel isOpen={isOpen}>
-          {collapsedContent}
-          <PanelContent isOpen={isOpen}>{isOpen && contentChildren}</PanelContent>
-        </Panel>
+        {!isOpen && collapsedElements}
+        <Content isOpen={isOpenTransition} noPadding={noPadding}>
+          {isOpen && contentElements}
+        </Content>
         <ToggleButton
           isOpen={isOpen}
           onClick={() => (isOpen ? close() : open())}
@@ -155,6 +144,9 @@ const SubNavigationPanel: SubNavigationPanelCompoundType = React.forwardRef<HTML
   }
 );
 
+SubNavigationPanel.displayName = 'SubNavigationPanel';
+Collapsed.displayName = 'SubNavigationPanel.Collapsed';
+
 SubNavigationPanel.Collapsed = Collapsed;
 
 export {SubNavigationPanel};

package/src/components/Navigation/SubNavigationPanel/SubNavigationPanel.unit.tsx

@@ -76,7 +76,7 @@ test('it shows collapsed content', () => {
   );
 
   expect(queryByText('SubNavigationPanel content')).not.toBeInTheDocument();
-  expect(getByText('Collapsed content')).toBeVisible();
+  expect(getByText('Collapsed content')).toBeInTheDocument();
 });
 
 test('it hides collapsed content', () => {
@@ -89,6 +89,6 @@ test('it hides collapsed content', () => {
     </SubNavigationPanel>
   );
 
-  expect(queryByText('SubNavigationPanel content')).toBeInTheDocument();
-  expect(getByText('Collapsed content')).not.toBeVisible();
+  expect(getByText('SubNavigationPanel content')).toBeInTheDocument();
+  expect(queryByText('Collapsed content')).not.toBeInTheDocument();
 });