From 28fb583685c764805108ab4e19eaf4cbe6642c65 Mon Sep 17 00:00:00 2001 From: Tseho Date: Mon, 8 Apr 2024 16:18:23 +0200 Subject: [PATCH] Updates DSM --- ...rning-and-locked-rows-correctly-1-snap.png | Bin 0 -> 13871 bytes .../components/ProgressBar/ProgressBar.tsx | 8 ++- .../SwitcherButton/SwitcherButton.tsx | 2 +- .../src/components/Table/Table.stories.mdx | 20 +++++-- .../src/components/Table/Table.tsx | 10 +++- .../src/components/Table/TableContext.ts | 2 + .../Table/TableHeader/TableHeader.tsx | 7 ++- .../components/Table/TableRow/TableRow.tsx | 51 +++++++++++++----- .../Table/TableRow/TableRow.unit.tsx | 30 +++++++++++ .../src/icons/ChecklistIcon.tsx | 16 ++++++ .../src/icons/WorkflowIcon.tsx | 39 ++++++++++++++ .../akeneo-design-system/src/icons/index.ts | 2 + 12 files changed, 162 insertions(+), 25 deletions(-) create mode 100644 front-packages/akeneo-design-system/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-table-warning-and-locked-rows-correctly-1-snap.png create mode 100644 front-packages/akeneo-design-system/src/icons/ChecklistIcon.tsx create mode 100644 front-packages/akeneo-design-system/src/icons/WorkflowIcon.tsx diff --git a/front-packages/akeneo-design-system/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-table-warning-and-locked-rows-correctly-1-snap.png b/front-packages/akeneo-design-system/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-table-warning-and-locked-rows-correctly-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..fe11826d769822b42eb3489d8ed79f46e9f2e3ee GIT binary patch literal 13871 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 RZwCbF>zdrg+`9MtzX1YX>QVpz literal 0 HcmV?d00001 diff --git a/front-packages/akeneo-design-system/src/components/ProgressBar/ProgressBar.tsx b/front-packages/akeneo-design-system/src/components/ProgressBar/ProgressBar.tsx index f48a912c34a9..aed1a6c703a6 100644 --- a/front-packages/akeneo-design-system/src/components/ProgressBar/ProgressBar.tsx +++ b/front-packages/akeneo-design-system/src/components/ProgressBar/ProgressBar.tsx @@ -161,11 +161,9 @@ const ProgressBar = forwardRef( {(title || progressLabel) && (
- {title && ( - - {title} - - )} + + {title} + {progressLabel && {progressLabel}}
)} diff --git a/front-packages/akeneo-design-system/src/components/SwitcherButton/SwitcherButton.tsx b/front-packages/akeneo-design-system/src/components/SwitcherButton/SwitcherButton.tsx index 5a4a08105641..69ec26b3ce24 100644 --- a/front-packages/akeneo-design-system/src/components/SwitcherButton/SwitcherButton.tsx +++ b/front-packages/akeneo-design-system/src/components/SwitcherButton/SwitcherButton.tsx @@ -112,7 +112,7 @@ const SwitcherButton = forwardRef( return ( - + diff --git a/front-packages/akeneo-design-system/src/components/Table/Table.stories.mdx b/front-packages/akeneo-design-system/src/components/Table/Table.stories.mdx index 26bba1b2f0df..0f8a1a806ce9 100644 --- a/front-packages/akeneo-design-system/src/components/Table/Table.stories.mdx +++ b/front-packages/akeneo-design-system/src/components/Table/Table.stories.mdx @@ -487,14 +487,14 @@ If you want your `Table.Header` to stay on top when scrolling in the Table, just -## Table with warning rows +## Table with warning and locked rows - + {args => { return ( - +
Name Family @@ -504,6 +504,20 @@ If you want your `Table.Header` to stay on top when scrolling in the Table, just Actions + + Giant panda + Ursidae + Carnivora + Ursus + + vu + + + + + Giant panda Ursidae diff --git a/front-packages/akeneo-design-system/src/components/Table/Table.tsx b/front-packages/akeneo-design-system/src/components/Table/Table.tsx index 114bb9ccb37a..d5af6571925f 100644 --- a/front-packages/akeneo-design-system/src/components/Table/Table.tsx +++ b/front-packages/akeneo-design-system/src/components/Table/Table.tsx @@ -27,6 +27,11 @@ type TableProps = Override< */ hasWarningRows?: boolean; + /** + * Define if the table has some locked rows. + */ + hasLockedRows?: boolean; + /** * Define if the checkbox should be always displayed or displayed on hover. * This props should be true when one element is checked. @@ -66,6 +71,7 @@ type TableProps = Override< const Table = ({ isSelectable = false, hasWarningRows = false, + hasLockedRows = false, displayCheckbox = false, isDragAndDroppable = false, onReorder = undefined, @@ -73,8 +79,8 @@ const Table = ({ ...rest }: TableProps) => { const providerValue = useMemo( - () => ({isSelectable, hasWarningRows, displayCheckbox, isDragAndDroppable, onReorder}), - [isSelectable, hasWarningRows, displayCheckbox, isDragAndDroppable, onReorder] + () => ({isSelectable, hasWarningRows, hasLockedRows, displayCheckbox, isDragAndDroppable, onReorder}), + [isSelectable, hasWarningRows, hasLockedRows, displayCheckbox, isDragAndDroppable, onReorder] ); return ( diff --git a/front-packages/akeneo-design-system/src/components/Table/TableContext.ts b/front-packages/akeneo-design-system/src/components/Table/TableContext.ts index b1d44ecb93d1..fd317c66cc93 100644 --- a/front-packages/akeneo-design-system/src/components/Table/TableContext.ts +++ b/front-packages/akeneo-design-system/src/components/Table/TableContext.ts @@ -3,6 +3,7 @@ import {createContext} from 'react'; type TableContextType = { isSelectable: boolean; hasWarningRows: boolean; + hasLockedRows: boolean; displayCheckbox: boolean; isDragAndDroppable: boolean; onReorder: ((reorderedIndices: number[]) => void) | undefined; @@ -11,6 +12,7 @@ type TableContextType = { const TableContext = createContext({ isSelectable: false, hasWarningRows: false, + hasLockedRows: false, displayCheckbox: false, isDragAndDroppable: false, onReorder: undefined, diff --git a/front-packages/akeneo-design-system/src/components/Table/TableHeader/TableHeader.tsx b/front-packages/akeneo-design-system/src/components/Table/TableHeader/TableHeader.tsx index 170d960e1ba6..04c9e165ae37 100644 --- a/front-packages/akeneo-design-system/src/components/Table/TableHeader/TableHeader.tsx +++ b/front-packages/akeneo-design-system/src/components/Table/TableHeader/TableHeader.tsx @@ -23,6 +23,10 @@ const HasWarningColumn = styled.th` width: 20px; background: linear-gradient(to top, ${getColor('grey', 120)} 1px, ${getColor('white')} 0px); `; +const HasLockedColumn = styled.th` + width: 20px; + background: linear-gradient(to top, ${getColor('grey', 120)} 1px, ${getColor('white')} 0px); +`; const OrderColumn = styled.th` width: 40px; background: linear-gradient(to top, ${getColor('grey', 120)} 1px, ${getColor('white')} 0px); @@ -42,7 +46,7 @@ type TableHeaderProps = { const TableHeader = React.forwardRef( ({children, sticky, ...rest}: TableHeaderProps, forwardedRef: Ref) => { - const {isSelectable, isDragAndDroppable, hasWarningRows} = React.useContext(TableContext); + const {isSelectable, isDragAndDroppable, hasWarningRows, hasLockedRows} = React.useContext(TableContext); return ( @@ -52,6 +56,7 @@ const TableHeader = React.forwardRef( {hasWarningRows && } {isDragAndDroppable && } {children} + {hasLockedRows && } ); diff --git a/front-packages/akeneo-design-system/src/components/Table/TableRow/TableRow.tsx b/front-packages/akeneo-design-system/src/components/Table/TableRow/TableRow.tsx index 90df869dcfcf..34a0e631408e 100644 --- a/front-packages/akeneo-design-system/src/components/Table/TableRow/TableRow.tsx +++ b/front-packages/akeneo-design-system/src/components/Table/TableRow/TableRow.tsx @@ -14,10 +14,10 @@ import {Checkbox} from '../../../components'; import {Override} from '../../../shared'; import {TableContext} from '../TableContext'; import {TableCell} from '../TableCell/TableCell'; -import {RowIcon, DangerIcon} from '../../../icons'; +import {RowIcon, DangerIcon, LockIcon} from '../../../icons'; import {PlaceholderPosition, usePlaceholderPosition} from '../../../hooks/usePlaceholderPosition'; -type Level = 'warning'; +type Level = 'warning' | 'tertiary'; const RowContainer = styled.tr< { @@ -78,15 +78,22 @@ const RowContainer = styled.tr< } ${({level}) => - level === 'warning' && - css` - > td { - :first-child { - padding: 0 0 0 5px; - } - background-color: ${getColor('yellow', 10)}; - } - `}; + level === 'warning' + ? css` + > td { + :first-child { + padding: 0 0 0 5px; + } + background-color: ${getColor('yellow', 10)}; + } + ` + : level === 'tertiary' && + css` + > td { + background-color: ${getColor('grey', 20)}; + color: ${getColor('grey', 120)}; + } + `}; `; const CheckboxContainer = styled.td<{isVisible: boolean}>` @@ -112,6 +119,15 @@ const HandleCell = styled(TableCell)` } `; +const getIcon = (level: Level) => { + switch (level) { + case 'warning': + return ; + case 'tertiary': + return ; + } +}; + const WarningIcon = styled(DangerIcon)` color: ${getColor('yellow', 120)}; `; @@ -180,7 +196,7 @@ const TableRow = forwardRef( const [placeholderPosition, placeholderDragEnter, placeholderDragLeave, placeholderDragEnd] = usePlaceholderPosition(rowIndex); - const {isSelectable, displayCheckbox, isDragAndDroppable, hasWarningRows} = useContext(TableContext); + const {isSelectable, displayCheckbox, isDragAndDroppable, hasWarningRows, hasLockedRows} = useContext(TableContext); if (isSelectable && (undefined === isSelected || undefined === onSelectToggle)) { throw Error('A row in a selectable table should have the prop "isSelected" and "onSelectToggle"'); } @@ -240,8 +256,17 @@ const TableRow = forwardRef( )} - {hasWarningRows && {level === 'warning' && }} + {hasWarningRows && ( + + {level === 'warning' && React.cloneElement(getIcon(level), {size: 16, 'data-testid': 'warning-icon'})} + + )} {children} + {hasLockedRows && ( + + {level === 'tertiary' && React.cloneElement(getIcon(level), {size: 16, 'data-testid': 'lock-icon'})} + + )} ); } diff --git a/front-packages/akeneo-design-system/src/components/Table/TableRow/TableRow.unit.tsx b/front-packages/akeneo-design-system/src/components/Table/TableRow/TableRow.unit.tsx index 8b97579f6853..a06f2f310fbb 100644 --- a/front-packages/akeneo-design-system/src/components/Table/TableRow/TableRow.unit.tsx +++ b/front-packages/akeneo-design-system/src/components/Table/TableRow/TableRow.unit.tsx @@ -101,3 +101,33 @@ test('Table.Row supports ...rest props', () => { expect(screen.getByTestId('my_value')).toBeInTheDocument(); }); + +test('it renders warning icon when row has a warning', () => { + render( +
+ + + A value + Another value + + +
+ ); + + expect(screen.getByTestId('warning-icon')).toBeInTheDocument(); +}); + +test('it renders lock icon when row is locked', () => { + render( + + + + A value + Another value + + +
+ ); + + expect(screen.getByTestId('lock-icon')).toBeInTheDocument(); +}); diff --git a/front-packages/akeneo-design-system/src/icons/ChecklistIcon.tsx b/front-packages/akeneo-design-system/src/icons/ChecklistIcon.tsx new file mode 100644 index 000000000000..5409278345cd --- /dev/null +++ b/front-packages/akeneo-design-system/src/icons/ChecklistIcon.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import {IconProps} from './IconProps'; + +const ChecklistIcon = ({title, size = 24, color = 'currentColor', ...props}: IconProps) => ( + + {title && {title}} + + + + +); + +export {ChecklistIcon}; diff --git a/front-packages/akeneo-design-system/src/icons/WorkflowIcon.tsx b/front-packages/akeneo-design-system/src/icons/WorkflowIcon.tsx new file mode 100644 index 000000000000..eab2008d0879 --- /dev/null +++ b/front-packages/akeneo-design-system/src/icons/WorkflowIcon.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import {IconProps} from './IconProps'; + +const WorkflowIcon = ({title, size = 24, color = 'currentColor', ...props}: IconProps) => ( + + + + + + + +); + +export {WorkflowIcon}; diff --git a/front-packages/akeneo-design-system/src/icons/index.ts b/front-packages/akeneo-design-system/src/icons/index.ts index 7d97c26dcc49..42cf56b334f5 100644 --- a/front-packages/akeneo-design-system/src/icons/index.ts +++ b/front-packages/akeneo-design-system/src/icons/index.ts @@ -51,6 +51,7 @@ export * from './DownloadIcon'; export * from './DragDropIcon'; export * from './EditIcon'; export * from './EntityIcon'; +export * from './ChecklistIcon'; export * from './EntityMultiIcon'; export * from './EraseIcon'; export * from './ExpandIcon'; @@ -119,3 +120,4 @@ export * from './UserIcon'; export * from './ValueIcon'; export * from './ViewIcon'; export * from './WaveIcon'; +export * from './WorkflowIcon';