From 5e8d863afeb68901f66e9286674619ed63b28827 Mon Sep 17 00:00:00 2001 From: Tseho Date: Wed, 10 Jan 2024 14:05:59 +0100 Subject: [PATCH] DSM Update --- ...th-collapse-component-correctly-1-snap.png | Bin 0 -> 11735 bytes ...ntent-without-padding-correctly-1-snap.png | Bin 0 -> 2693 bytes ...el-scrollable-content-correctly-1-snap.png | Bin 0 -> 12062 bytes .../src/components/Avatar/Avatar.stories.mdx | 2 +- .../src/components/Avatar/Avatar.tsx | 34 +---- .../src/components/Avatar/Avatars.tsx | 32 ++++- .../src/components/Avatar/Avatars.unit.tsx | 24 +++- .../src/components/Avatar/types.ts | 34 +++++ .../components/Dropdown/Surtitle/Surtitle.tsx | 2 +- .../SubNavigationPanel.stories.mdx | 122 +++++++++++++---- .../SubNavigationPanel/SubNavigationPanel.tsx | 124 ++++++++---------- .../SubNavigationPanel.unit.tsx | 6 +- 12 files changed, 245 insertions(+), 135 deletions(-) create mode 100644 front-packages/akeneo-design-system/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-navigation-sub-navigation-panel-content-with-collapse-component-correctly-1-snap.png create mode 100644 front-packages/akeneo-design-system/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-navigation-sub-navigation-panel-content-without-padding-correctly-1-snap.png create mode 100644 front-packages/akeneo-design-system/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-navigation-sub-navigation-panel-scrollable-content-correctly-1-snap.png create mode 100644 front-packages/akeneo-design-system/src/components/Avatar/types.ts diff --git a/front-packages/akeneo-design-system/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-navigation-sub-navigation-panel-content-with-collapse-component-correctly-1-snap.png b/front-packages/akeneo-design-system/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 0000000000000000000000000000000000000000..60a7d2dad9e9b68c2f74e9c7d68449ea29418ece GIT binary patch literal 11735 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 B$hZIi literal 0 HcmV?d00001 diff --git a/front-packages/akeneo-design-system/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-navigation-sub-navigation-panel-content-without-padding-correctly-1-snap.png b/front-packages/akeneo-design-system/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 0000000000000000000000000000000000000000..bc3fbfe07036569add15ecf76399561c0341a2ef GIT binary patch literal 2693 zcmeHJX;hPE7XC0+JQk!%XAlS|vUY?9lawt$D56LaqT-AbSuIH5ghdGm0h7=cWoTK- z($tVZv>xFA4Gde5MZ&aa*b)*X1!N0BNDxAZ5=hvRZ$8_9{Xa8*`saDybMAZI_rA}) z_qn&=a%iCO5sM=L02l{d47dsaFlY-59zFzN^w@)8XfYsN4fF>Zh42*sID!od`1D#9 zOF4%xtlFXsET|afCX)EpqRd!J?-Pi##j?+@`Gq_RDDXRS+R4n|eCNfW>?v6dbGo~p zGu?0@@9X+{PTtoQUJi91CFYr49rL$&Yqyy7v$S$rYOF#@YRx_{8#velM{;Q*(kBE4 zxX0`UmwQyKj=pF05|6O+8N9Un)!&c*@&@6oMihLC^MjDrwb?}z~@pN{^!M6HljU`oS$L zOzVEZIC&K#lF53F%`x%U9B^=U>_F&J3HYisJ-tvk&-pt8+`U4ROI%TB*m|lpC`YY? zYd@0v3A7L5CeJf?VC`SYtBjLzx*AR=RsIXA>G=#-iBZ2?Y}nwa_D>P_+zI>7 z8ZVug)O|s^RF#%&y|-JxKT~-!K1Q1G?q+bmNhH7j{iJL>d8SpKk9bJ7&XY)5EB@HHryK06K=rr`EECPD z-`-1KnCeyIQBV?)ILcwf~R!M%N$H@z7dzs@R zUpC^NMglkYs0_UB&DitZX?A{2j-qx^gXy%`45~KRq~^soc=J$+HUG((YJm@roRbo{ zQMyJZ(heOesh)&ex}}b&K+QSNtk)OytEGR!qnq4KW=VvjR@Q@ULz8k-UbAzMB$IAu z*7j!rh)BFqwj}9R4XV8NJDu_AVNt8$Y#w=2;fZv8$WFtC}y|Kx BxQ?1>4wKvBgwmv7jT{-OtMG4xaCBw>J=Q)Z{Lj2_y)Gq=@d#lZ#8yCDv#;9#zAdgl9^)Xxr&&WN+;mu_I1U z9N8^VoA|Qv!b}$ccs9n`sbni^LWVQM4l>~kU5?Xti#h+wiT486e$QI)3VZmdk_r#{q>~PvxRx zs9lg7ugfLB#E5z#A1bMjFNk%>?ntSD}N!X!iVN{^$JMt<{MBb{|xIpc8dfI(UI9%+0cUih%JMz#N01{ei_DymjA9Bx}6ZgJ%5fXqt zSyP?+0aNH-x5>oas@&A5QKn0iF146vYS4XG#b2<6jrbZt)?<~~j#4%go2g;2mj%`O rn{Y@@o*fRszMJ|YdjH#6@+}A}-+D2n-=D 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 ` ${({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/front-packages/akeneo-design-system/src/components/Avatar/Avatars.tsx b/front-packages/akeneo-design-system/src/components/Avatar/Avatars.tsx index dbd5a1178d82..375058105233 100644 --- a/front-packages/akeneo-design-system/src/components/Avatar/Avatars.tsx +++ b/front-packages/akeneo-design-system/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/front-packages/akeneo-design-system/src/components/Avatar/Avatars.unit.tsx b/front-packages/akeneo-design-system/src/components/Avatar/Avatars.unit.tsx index 2f8ac9ea39b4..f1c1f5c425b4 100644 --- a/front-packages/akeneo-design-system/src/components/Avatar/Avatars.unit.tsx +++ b/front-packages/akeneo-design-system/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/front-packages/akeneo-design-system/src/components/Avatar/types.ts b/front-packages/akeneo-design-system/src/components/Avatar/types.ts new file mode 100644 index 000000000000..c48a0a865d26 --- /dev/null +++ b/front-packages/akeneo-design-system/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/front-packages/akeneo-design-system/src/components/Dropdown/Surtitle/Surtitle.tsx b/front-packages/akeneo-design-system/src/components/Dropdown/Surtitle/Surtitle.tsx index 5e300b2a8ef7..029d0bbea874 100644 --- a/front-packages/akeneo-design-system/src/components/Dropdown/Surtitle/Surtitle.tsx +++ b/front-packages/akeneo-design-system/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/front-packages/akeneo-design-system/src/components/Navigation/SubNavigationPanel/SubNavigationPanel.stories.mdx b/front-packages/akeneo-design-system/src/components/Navigation/SubNavigationPanel/SubNavigationPanel.stories.mdx index c34f1e7f18ed..a7eaaf9f0623 100644 --- a/front-packages/akeneo-design-system/src/components/Navigation/SubNavigationPanel/SubNavigationPanel.stories.mdx +++ b/front-packages/akeneo-design-system/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/front-packages/akeneo-design-system/src/components/Navigation/SubNavigationPanel/SubNavigationPanel.tsx b/front-packages/akeneo-design-system/src/components/Navigation/SubNavigationPanel/SubNavigationPanel.tsx index 3c4c39d49cbd..c435990e9dfa 100644 --- a/front-packages/akeneo-design-system/src/components/Navigation/SubNavigationPanel/SubNavigationPanel.tsx +++ b/front-packages/akeneo-design-system/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(); });