diff --git a/lib/components/Avatar/Avatar.d.ts b/lib/components/Avatar/Avatar.d.ts index 5d59acf7..7a3d2cd3 100644 --- a/lib/components/Avatar/Avatar.d.ts +++ b/lib/components/Avatar/Avatar.d.ts @@ -1,12 +1,5 @@ import React from 'react'; -import { Override } from '../../shared'; -declare type AvatarProps = Override, { - 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 }; diff --git a/lib/components/Avatar/Avatar.js b/lib/components/Avatar/Avatar.js index 21ec7d75..0d813dd0 100644 --- a/lib/components/Avatar/Avatar.js +++ b/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 = [ diff --git a/lib/components/Avatar/Avatar.js.map b/lib/components/Avatar/Avatar.js.map index 76bc8b80..002b18b2 100644 --- a/lib/components/Avatar/Avatar.js.map +++ b/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"} \ No newline at end of file +{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/lib/components/Avatar/Avatars.d.ts b/lib/components/Avatar/Avatars.d.ts index 2c362e63..f609857b 100644 --- a/lib/components/Avatar/Avatars.d.ts +++ b/lib/components/Avatar/Avatars.d.ts @@ -2,7 +2,8 @@ import React from 'react'; import { Override } from '../../shared'; declare type AvatarsProps = Override, { max: number; + maxTitle?: number; }>; -declare const Avatars: ({ max, children, ...rest }: AvatarsProps) => React.JSX.Element; +declare const Avatars: React.FC; export { Avatars }; export type { AvatarsProps }; diff --git a/lib/components/Avatar/Avatars.js b/lib/components/Avatar/Avatars.js index 28dd3a5d..a9f6362e 100644 --- a/lib/components/Avatar/Avatars.js +++ b/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), diff --git a/lib/components/Avatar/Avatars.js.map b/lib/components/Avatar/Avatars.js.map index d35cb9b4..c188244d 100644 --- a/lib/components/Avatar/Avatars.js.map +++ b/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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/lib/components/Avatar/types.d.ts b/lib/components/Avatar/types.d.ts new file mode 100644 index 00000000..be9b088e --- /dev/null +++ b/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, User & { + size?: 'default' | 'big'; +}>; diff --git a/lib/components/Avatar/types.js b/lib/components/Avatar/types.js new file mode 100644 index 00000000..11e638d1 --- /dev/null +++ b/lib/components/Avatar/types.js @@ -0,0 +1,3 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +//# sourceMappingURL=types.js.map \ No newline at end of file diff --git a/lib/components/Avatar/types.js.map b/lib/components/Avatar/types.js.map new file mode 100644 index 00000000..fa6d1b96 --- /dev/null +++ b/lib/components/Avatar/types.js.map @@ -0,0 +1 @@ +{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/Avatar/types.ts"],"names":[],"mappings":""} \ No newline at end of file diff --git a/lib/components/Dropdown/Dropdown.d.ts b/lib/components/Dropdown/Dropdown.d.ts index efb98cf2..d8c24f13 100644 --- a/lib/components/Dropdown/Dropdown.d.ts +++ b/lib/components/Dropdown/Dropdown.d.ts @@ -37,6 +37,7 @@ declare const Dropdown: { } & React.RefAttributes>; Surtitle: React.FC<{ label: string; + children?: React.ReactNode; }>; }; export { Dropdown }; diff --git a/lib/components/Dropdown/Surtitle/Surtitle.d.ts b/lib/components/Dropdown/Surtitle/Surtitle.d.ts index 083e0fd7..4060285e 100644 --- a/lib/components/Dropdown/Surtitle/Surtitle.d.ts +++ b/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; export { Surtitle }; diff --git a/lib/components/Navigation/SubNavigationPanel/SubNavigationPanel.d.ts b/lib/components/Navigation/SubNavigationPanel/SubNavigationPanel.d.ts index 3214901e..cbb0826f 100644 --- a/lib/components/Navigation/SubNavigationPanel/SubNavigationPanel.d.ts +++ b/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 & RefAttributes> & { Collapsed?: any; + Section?: any; }; declare const SubNavigationPanel: SubNavigationPanelCompoundType; export { SubNavigationPanel }; diff --git a/lib/components/Navigation/SubNavigationPanel/SubNavigationPanel.js b/lib/components/Navigation/SubNavigationPanel/SubNavigationPanel.js index ba7b7656..99a4108c 100644 --- a/lib/components/Navigation/SubNavigationPanel/SubNavigationPanel.js +++ b/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 \ No newline at end of file diff --git a/lib/components/Navigation/SubNavigationPanel/SubNavigationPanel.js.map b/lib/components/Navigation/SubNavigationPanel/SubNavigationPanel.js.map index bb203757..1c508bc2 100644 --- a/lib/components/Navigation/SubNavigationPanel/SubNavigationPanel.js.map +++ b/lib/components/Navigation/SubNavigationPanel/SubNavigationPanel.js.map @@ -1 +1 @@ -{"version":3,"file":"SubNavigationPanel.js","sourceRoot":"","sources":["../../../../src/components/Navigation/SubNavigationPanel/SubNavigationPanel.tsx"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"SubNavigationPanel.js","sourceRoot":"","sources":["../../../../src/components/Navigation/SubNavigationPanel/SubNavigationPanel.tsx"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/package.json b/package.json index c3b0f955..337f6425 100644 --- a/package.json +++ b/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": { diff --git a/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-navigation-sub-navigation-panel-content-with-collapse-component-correctly-1-snap.png b/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-navigation-sub-navigation-panel-content-with-collapse-component-correctly-1-snap.png new file mode 100644 index 00000000..60a7d2da Binary files /dev/null and b/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-navigation-sub-navigation-panel-content-with-collapse-component-correctly-1-snap.png differ diff --git a/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-navigation-sub-navigation-panel-content-without-padding-correctly-1-snap.png b/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-navigation-sub-navigation-panel-content-without-padding-correctly-1-snap.png new file mode 100644 index 00000000..bc3fbfe0 Binary files /dev/null and b/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-navigation-sub-navigation-panel-content-without-padding-correctly-1-snap.png differ diff --git a/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-navigation-sub-navigation-panel-scrollable-content-correctly-1-snap.png b/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-navigation-sub-navigation-panel-scrollable-content-correctly-1-snap.png new file mode 100644 index 00000000..f46d0fc9 Binary files /dev/null and b/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-navigation-sub-navigation-panel-scrollable-content-correctly-1-snap.png differ diff --git a/src/components/Avatar/Avatar.stories.mdx b/src/components/Avatar/Avatar.stories.mdx index 0ec0bfd2..d84c11bc 100644 --- a/src/components/Avatar/Avatar.stories.mdx +++ b/src/components/Avatar/Avatar.stories.mdx @@ -92,7 +92,7 @@ You can use a dedicated component to display avatar list. After a defined maximu <> ` ${({size}) => @@ -31,43 +31,13 @@ const AvatarContainer = styled.span` cursor: ${({onClick}) => (onClick ? 'pointer' : 'default')}; `; -type AvatarProps = Override< - React.HTMLAttributes, - { - /** - * 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((s, l) => s + l.charCodeAt(0), 0); diff --git a/src/components/Avatar/Avatars.tsx b/src/components/Avatar/Avatars.tsx index dbd5a117..37505810 100644 --- a/src/components/Avatar/Avatars.tsx +++ b/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` display: flex; @@ -16,10 +17,11 @@ const AvatarListContainer = styled.div` 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, { max: number; + maxTitle?: number; } >; -const Avatars = ({max, children, ...rest}: AvatarsProps) => { +const Avatars: React.FC = ({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(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 ( - + {remainingChildrenCount > 0 && +{remainingChildrenCount}} {reverseChildren} diff --git a/src/components/Avatar/Avatars.unit.tsx b/src/components/Avatar/Avatars.unit.tsx index 2f8ac9ea..f1c1f5c4 100644 --- a/src/components/Avatar/Avatars.unit.tsx +++ b/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( + + + + + {invalidChild} + + ); + + 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(); +}); diff --git a/src/components/Avatar/types.ts b/src/components/Avatar/types.ts new file mode 100644 index 00000000..c48a0a86 --- /dev/null +++ b/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, + User & { + /** + * Size of the avatar. + */ + size?: 'default' | 'big'; + } +>; diff --git a/src/components/Dropdown/Surtitle/Surtitle.tsx b/src/components/Dropdown/Surtitle/Surtitle.tsx index 5e300b2a..029d0bbe 100644 --- a/src/components/Dropdown/Surtitle/Surtitle.tsx +++ b/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 = ({label, children, ...rest}) => ( diff --git a/src/components/Navigation/SubNavigationPanel/SubNavigationPanel.stories.mdx b/src/components/Navigation/SubNavigationPanel/SubNavigationPanel.stories.mdx index c34f1e7f..a7eaaf9f 100644 --- a/src/components/Navigation/SubNavigationPanel/SubNavigationPanel.stories.mdx +++ b/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'; # SubNavigationPanel @@ -33,9 +35,10 @@ When the panel is collapsed the content is hidden. {args => { + const [isOpen, open, close] = useBooleanState(true); return ( - + ); }} @@ -44,34 +47,44 @@ When the panel is collapsed the content is hidden. -## Panel is collapsed +## Panel with scrollable content - + {args => { + const [isOpen, open, close] = useBooleanState(true); return ( - + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +
+ Fusce sed quam pharetra, lacinia nisl at, luctus ex. +
+ Donec pretium est a augue dapibus, at semper ipsum vestibulum. +
+ Aenean blandit metus a nibh blandit porta. +
+ Phasellus placerat ligula sit amet vestibulum tristique. + ); }} - -## Panel with collapsed and expanded content +## Panel with collapsed content using Dropdown component {args => { - const [isOpen, open, close] = useBooleanState(true); + const [isOpen, open, close] = useBooleanState(false); const [isDropdownOpen, openDropDown, closeDropDown] = useBooleanState(false); return ( - + {isDropdownOpen && ( @@ -81,15 +94,74 @@ When the panel is collapsed the content is hidden. )} - Expanded Content -
Expanded Content
-
Expanded Content
-
Expanded Content
-
Expanded Content
-
Expanded Content
-
Expanded Content
-
Expanded Content
-
Expanded Content
+ Some content + + + ); + }} + + + +## Panel without padding + + + + {args => { + const [isOpen, open, close] = useBooleanState(true); + const [collapse, setCollapse] = useState(1); + return ( + + + Some content + + + ); + }} + + + +## Panel using Collapse components + + + + {args => { + const [isOpen, open, close] = useBooleanState(true); + const [collapse, setCollapse] = useState(1); + return ( + + + setCollapse(1)} + > + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +
+ Fusce sed quam pharetra, lacinia nisl at, luctus ex. +
+ Donec pretium est a augue dapibus, at semper ipsum vestibulum. +
+ Aenean blandit metus a nibh blandit porta. +
+ Phasellus placerat ligula sit amet vestibulum tristique. + + setCollapse(2)} + > + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +
+ Fusce sed quam pharetra, lacinia nisl at, luctus ex. +
+ Donec pretium est a augue dapibus, at semper ipsum vestibulum. +
+ Aenean blandit metus a nibh blandit porta. +
+ Phasellus placerat ligula sit amet vestibulum tristique. + ); diff --git a/src/components/Navigation/SubNavigationPanel/SubNavigationPanel.tsx b/src/components/Navigation/SubNavigationPanel/SubNavigationPanel.tsx index 3c4c39d4..c435990e 100644 --- a/src/components/Navigation/SubNavigationPanel/SubNavigationPanel.tsx +++ b/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` 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 & RefAttributes > & { Collapsed?: any; + Section?: any; }; /** @@ -123,25 +97,40 @@ type SubNavigationPanelCompoundType = ForwardRefExoticComponent< */ const SubNavigationPanel: SubNavigationPanelCompoundType = React.forwardRef( ( - {children, isOpen: isOpen = true, open, close, closeTitle = '', openTitle = '', ...rest}: SubNavigationPanelProps, + { + children, + isOpen = true, + open, + close, + closeTitle = '', + openTitle = '', + noPadding = false, + ...rest + }: SubNavigationPanelProps, forwardedRef: React.Ref ) => { - 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(isOpen); + useLayoutEffect(() => { + setIsOpenTransition(isOpen); + }, [isOpen]); + return ( - - {collapsedContent} - {isOpen && contentChildren} - + {!isOpen && collapsedElements} + + {isOpen && contentElements} + (isOpen ? close() : open())} @@ -155,6 +144,9 @@ const SubNavigationPanel: SubNavigationPanelCompoundType = React.forwardRef { ); 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', () => { ); - expect(queryByText('SubNavigationPanel content')).toBeInTheDocument(); - expect(getByText('Collapsed content')).not.toBeVisible(); + expect(getByText('SubNavigationPanel content')).toBeInTheDocument(); + expect(queryByText('Collapsed content')).not.toBeInTheDocument(); });