From d233883197be9737d52f09c3d22363454517051b Mon Sep 17 00:00:00 2001 From: Antoine SUBRA Date: Mon, 15 Jul 2024 10:17:01 +0200 Subject: [PATCH 01/20] feat: 0.16.x --- packages/storybook-pages/src/Pages/ThemePage/ThemePage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/storybook-pages/src/Pages/ThemePage/ThemePage.tsx b/packages/storybook-pages/src/Pages/ThemePage/ThemePage.tsx index 69421b74..2cf95fac 100644 --- a/packages/storybook-pages/src/Pages/ThemePage/ThemePage.tsx +++ b/packages/storybook-pages/src/Pages/ThemePage/ThemePage.tsx @@ -112,9 +112,9 @@ const dsfr: MantineThemeOverride = { }, }, defaultRadius: 0, - fontFamily: 'Marianne, Arial, sans-serif', + fontFamily: 'Marianne, Arial', headings: { - fontFamily: 'Marianne, Arial, sans-serif', + fontFamily: 'Marianne, Arial', sizes: { h1: { fontSize: '40px', lineHeight: '48px' }, h2: { fontSize: '32px', lineHeight: '40px' }, From 3a8d7e120ecc64d68a572ea206078ef5195eb4c3 Mon Sep 17 00:00:00 2001 From: Antoine SUBRA <92506465+subraAntoine@users.noreply.github.com> Date: Mon, 15 Jul 2024 10:41:09 +0200 Subject: [PATCH 02/20] fix: css and peer dependcies mantine version (#198) --- packages/haring-react-dates/package.json | 6 +++--- packages/haring-react-dropzone/package.json | 6 +++--- packages/haring-react-shared/package.json | 4 ++-- packages/haring-react-table/package.json | 6 +++--- packages/haring-react/package.json | 4 ++-- .../src/Form/AddressFields/AddressFields.module.css | 2 +- packages/storybook-pages/package.json | 6 +++--- 7 files changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/haring-react-dates/package.json b/packages/haring-react-dates/package.json index ef53ca01..60754cf3 100644 --- a/packages/haring-react-dates/package.json +++ b/packages/haring-react-dates/package.json @@ -95,9 +95,9 @@ "vite-plugin-dts": "^3.7.2" }, "peerDependencies": { - "@mantine/core": "7.11.0", - "@mantine/dates": "7.11.0", - "@mantine/hooks": "7.11.0", + "@mantine/core": ">=7.11.0", + "@mantine/dates": ">=7.11.0", + "@mantine/hooks": ">=7.11.0", "@phosphor-icons/react": ">=2", "react": ">=18.0", "react-dom": ">=18.0" diff --git a/packages/haring-react-dropzone/package.json b/packages/haring-react-dropzone/package.json index 858c7232..e5e3510f 100644 --- a/packages/haring-react-dropzone/package.json +++ b/packages/haring-react-dropzone/package.json @@ -79,9 +79,9 @@ "vite-plugin-dts": "^3.7.2" }, "peerDependencies": { - "@mantine/core": "7.11.0", - "@mantine/dropzone": "7.11.0", - "@mantine/hooks": "7.11.0", + "@mantine/core": ">=7.11.0", + "@mantine/dropzone": ">=7.11.0", + "@mantine/hooks": ">=7.11.0", "@phosphor-icons/react": ">=2", "react": ">=18.0", "react-dom": ">=18.0" diff --git a/packages/haring-react-shared/package.json b/packages/haring-react-shared/package.json index d505f9cc..f12c8a97 100644 --- a/packages/haring-react-shared/package.json +++ b/packages/haring-react-shared/package.json @@ -102,8 +102,8 @@ "vite-plugin-dts": "^3.7.2" }, "peerDependencies": { - "@mantine/core": "7.11.0", - "@mantine/hooks": "7.11.0", + "@mantine/core": ">=7.11.0", + "@mantine/hooks": ">=7.11.0", "@phosphor-icons/react": ">=2", "react": ">=18.0", "react-dom": ">=18.0" diff --git a/packages/haring-react-table/package.json b/packages/haring-react-table/package.json index e538cbd5..6e20b49f 100644 --- a/packages/haring-react-table/package.json +++ b/packages/haring-react-table/package.json @@ -94,9 +94,9 @@ "vite-plugin-dts": "^3.7.2" }, "peerDependencies": { - "@mantine/core": "7.11.0", - "@mantine/dates": "7.11.0", - "@mantine/hooks": "7.11.0", + "@mantine/core": ">=7.11.0", + "@mantine/dates": ">=7.11.0", + "@mantine/hooks": ">=7.11.0", "@phosphor-icons/react": ">=2", "@tabler/icons-react": ">=2", "dayjs": ">=1", diff --git a/packages/haring-react/package.json b/packages/haring-react/package.json index 9522d26e..6c3a2b47 100644 --- a/packages/haring-react/package.json +++ b/packages/haring-react/package.json @@ -94,8 +94,8 @@ "vite-plugin-dts": "^3.7.2" }, "peerDependencies": { - "@mantine/core": "7.11.0", - "@mantine/hooks": "7.11.0", + "@mantine/core": ">=7.11.0", + "@mantine/hooks": ">=7.11.0", "@phosphor-icons/react": ">=2", "react": ">=18.0", "react-dom": ">=18.0" diff --git a/packages/haring-react/src/Form/AddressFields/AddressFields.module.css b/packages/haring-react/src/Form/AddressFields/AddressFields.module.css index 98870e01..e0c6c64e 100644 --- a/packages/haring-react/src/Form/AddressFields/AddressFields.module.css +++ b/packages/haring-react/src/Form/AddressFields/AddressFields.module.css @@ -6,7 +6,7 @@ } .input { - maxwidth: 300px; + max-width: 300px; width: calc(50% - 5px); @mixin smaller-than $mantine-breakpoint-sm { width: 100%; diff --git a/packages/storybook-pages/package.json b/packages/storybook-pages/package.json index a64aef3e..f80feca5 100644 --- a/packages/storybook-pages/package.json +++ b/packages/storybook-pages/package.json @@ -38,9 +38,9 @@ "vite-plugin-dts": "^3.7.2" }, "peerDependencies": { - "@mantine/core": "7.11.0", - "@mantine/dates": "7.11.0", - "@mantine/hooks": "7.11.0", + "@mantine/core": ">=7.11.0", + "@mantine/dates": ">=7.11.0", + "@mantine/hooks": ">=7.11.0", "@phosphor-icons/react": ">=2", "react": ">=18.0", "react-dom": ">=18.0" From a6e9242fabe4fb7c781a0d74102a3fe21ec460d6 Mon Sep 17 00:00:00 2001 From: Antoine SUBRA <92506465+subraAntoine@users.noreply.github.com> Date: Thu, 18 Jul 2024 15:11:11 +0200 Subject: [PATCH 03/20] Fix: Table pagination (#200) --- packages/haring-react-table/src/Components/Table/Table.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/haring-react-table/src/Components/Table/Table.tsx b/packages/haring-react-table/src/Components/Table/Table.tsx index 2870af22..efdba565 100644 --- a/packages/haring-react-table/src/Components/Table/Table.tsx +++ b/packages/haring-react-table/src/Components/Table/Table.tsx @@ -305,10 +305,12 @@ export function Table>( function handleItemsPerPageChange(value: number): void { setPageSize(value); + paginationProps?.onItemsPerPageChange?.(value); } function handlePageChange(value: number): void { setPageIndex(value - 1); + paginationProps?.onPageChange?.(value - 1); } return ( From d46907cbd38b7ae9e90c38c9f04b7d76d934d4c0 Mon Sep 17 00:00:00 2001 From: Meriemu Date: Fri, 19 Jul 2024 09:40:14 +0200 Subject: [PATCH 04/20] Feat/stepper page last step (#199) * feat(redmine 1301354): add step 3 * feat(redmine 1301354): add changeset file --- .changeset/two-knives-worry.md | 5 ++ package-lock.json | 58 +++++++++---------- .../Pages/StepperPage/StepperPage.mock.tsx | 5 +- .../src/Pages/StepperPage/StepperPage.tsx | 20 ++++++- 4 files changed, 57 insertions(+), 31 deletions(-) create mode 100644 .changeset/two-knives-worry.md diff --git a/.changeset/two-knives-worry.md b/.changeset/two-knives-worry.md new file mode 100644 index 00000000..0fdc5ea4 --- /dev/null +++ b/.changeset/two-knives-worry.md @@ -0,0 +1,5 @@ +--- +'storybook-pages': minor +--- + +StepperPage: add step 3 diff --git a/package-lock.json b/package-lock.json index 2244a257..a5edcc56 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33439,10 +33439,10 @@ }, "packages/haring-react": { "name": "@smile/haring-react", - "version": "0.14.0", + "version": "0.15.0", "license": "LGPL-3.0", "dependencies": { - "@smile/haring-react-shared": "0.14.0", + "@smile/haring-react-shared": "0.15.0", "pretty-bytes": "^6.1.1" }, "devDependencies": { @@ -33470,8 +33470,8 @@ "node": ">=16" }, "peerDependencies": { - "@mantine/core": "7.11.0", - "@mantine/hooks": "7.11.0", + "@mantine/core": ">=7.11.0", + "@mantine/hooks": ">=7.11.0", "@phosphor-icons/react": ">=2", "react": ">=18.0", "react-dom": ">=18.0" @@ -33479,11 +33479,11 @@ }, "packages/haring-react-dates": { "name": "@smile/haring-react-dates", - "version": "0.14.0", + "version": "0.15.0", "license": "LGPL-3.0", "dependencies": { - "@smile/haring-react": "0.14.0", - "@smile/haring-react-shared": "0.14.0" + "@smile/haring-react": "0.15.0", + "@smile/haring-react-shared": "0.15.0" }, "devDependencies": { "@babel/preset-env": "^7.22.20", @@ -33510,9 +33510,9 @@ "node": ">=16" }, "peerDependencies": { - "@mantine/core": "7.11.0", - "@mantine/dates": "7.11.0", - "@mantine/hooks": "7.11.0", + "@mantine/core": ">=7.11.0", + "@mantine/dates": ">=7.11.0", + "@mantine/hooks": ">=7.11.0", "@phosphor-icons/react": ">=2", "react": ">=18.0", "react-dom": ">=18.0" @@ -34006,11 +34006,11 @@ }, "packages/haring-react-dropzone": { "name": "@smile/haring-react-dropzone", - "version": "0.14.0", + "version": "0.15.0", "license": "LGPL-3.0", "dependencies": { - "@smile/haring-react": "0.14.0", - "@smile/haring-react-shared": "0.14.0" + "@smile/haring-react": "0.15.0", + "@smile/haring-react-shared": "0.15.0" }, "devDependencies": { "@babel/preset-env": "^7.22.20", @@ -34037,9 +34037,9 @@ "node": ">=16" }, "peerDependencies": { - "@mantine/core": "7.11.0", - "@mantine/dropzone": "7.11.0", - "@mantine/hooks": "7.11.0", + "@mantine/core": ">=7.11.0", + "@mantine/dropzone": ">=7.11.0", + "@mantine/hooks": ">=7.11.0", "@phosphor-icons/react": ">=2", "react": ">=18.0", "react-dom": ">=18.0" @@ -34533,7 +34533,7 @@ }, "packages/haring-react-shared": { "name": "@smile/haring-react-shared", - "version": "0.14.0", + "version": "0.15.0", "license": "LGPL-3.0", "devDependencies": { "@babel/preset-env": "^7.22.20", @@ -34560,8 +34560,8 @@ "node": ">=16" }, "peerDependencies": { - "@mantine/core": "7.11.0", - "@mantine/hooks": "7.11.0", + "@mantine/core": ">=7.11.0", + "@mantine/hooks": ">=7.11.0", "@phosphor-icons/react": ">=2", "react": ">=18.0", "react-dom": ">=18.0" @@ -35055,11 +35055,11 @@ }, "packages/haring-react-table": { "name": "@smile/haring-react-table", - "version": "0.14.0", + "version": "0.15.0", "license": "LGPL-3.0", "dependencies": { - "@smile/haring-react": "0.14.0", - "@smile/haring-react-shared": "0.14.0" + "@smile/haring-react": "0.15.0", + "@smile/haring-react-shared": "0.15.0" }, "devDependencies": { "@babel/preset-env": "^7.22.20", @@ -35086,9 +35086,9 @@ "node": ">=16" }, "peerDependencies": { - "@mantine/core": "7.11.0", - "@mantine/dates": "7.11.0", - "@mantine/hooks": "7.11.0", + "@mantine/core": ">=7.11.0", + "@mantine/dates": ">=7.11.0", + "@mantine/hooks": ">=7.11.0", "@phosphor-icons/react": ">=2", "@tabler/icons-react": ">=2", "dayjs": ">=1", @@ -36070,7 +36070,7 @@ } }, "packages/storybook-pages": { - "version": "0.14.0", + "version": "0.15.0", "license": "LGPL-3.0", "dependencies": { "@mantine/carousel": "^7.11.0", @@ -36091,9 +36091,9 @@ "vite-plugin-dts": "^3.7.2" }, "peerDependencies": { - "@mantine/core": "7.11.0", - "@mantine/dates": "7.11.0", - "@mantine/hooks": "7.11.0", + "@mantine/core": ">=7.11.0", + "@mantine/dates": ">=7.11.0", + "@mantine/hooks": ">=7.11.0", "@phosphor-icons/react": ">=2", "react": ">=18.0", "react-dom": ">=18.0" diff --git a/packages/storybook-pages/src/Pages/StepperPage/StepperPage.mock.tsx b/packages/storybook-pages/src/Pages/StepperPage/StepperPage.mock.tsx index c5da8806..6406b49a 100644 --- a/packages/storybook-pages/src/Pages/StepperPage/StepperPage.mock.tsx +++ b/packages/storybook-pages/src/Pages/StepperPage/StepperPage.mock.tsx @@ -2,6 +2,9 @@ export const texts = { steps: { step1: 'Step 1: ', step2: 'Step 2: ', - step3: 'Completed, click back button to get to previous step', + step3: 'Step 3:', + step3SubTitle1: 'Identity: ', + step3SubTitle2: 'Address: ', + step3Title: 'Summary', }, }; diff --git a/packages/storybook-pages/src/Pages/StepperPage/StepperPage.tsx b/packages/storybook-pages/src/Pages/StepperPage/StepperPage.tsx index bbbb67c5..caa2b732 100644 --- a/packages/storybook-pages/src/Pages/StepperPage/StepperPage.tsx +++ b/packages/storybook-pages/src/Pages/StepperPage/StepperPage.tsx @@ -10,6 +10,7 @@ import { FoldableColumnLayout, FullNameFields, SidebarMenu, + SummaryBox, } from '@smile/haring-react'; import { useState } from 'react'; @@ -118,7 +119,24 @@ export function StepperPage(): ReactElement { onOptionSubmit={onOptionSubmitMock} /> - {texts.steps.step3} + + {texts.steps.step3} +
+

{texts.steps.step3Title}

+ + {`${form.getValues().fullName.firstName} ${ + form.getValues().fullName.lastName + }`} + +
+ + {form.getValues().address.number}, {form.getValues().address.street} +
+ {form.getValues().address.postCode}, {form.getValues().address.city} +
+ {form.getValues().address.country} + + From d162e5fd1ca9af5f3db407ba299b8558a90712ac Mon Sep 17 00:00:00 2001 From: Meriemu Date: Thu, 25 Jul 2024 10:18:06 +0200 Subject: [PATCH 05/20] feat(redmine 1305131): make some corrections (#202) --- .changeset/new-dogs-cheat.md | 5 +++++ .../src/Pages/SearchResults/SearchResults.mock.tsx | 2 +- .../src/Pages/SearchResults/SearchResults.tsx | 4 ++-- 3 files changed, 8 insertions(+), 3 deletions(-) create mode 100644 .changeset/new-dogs-cheat.md diff --git a/.changeset/new-dogs-cheat.md b/.changeset/new-dogs-cheat.md new file mode 100644 index 00000000..dda75107 --- /dev/null +++ b/.changeset/new-dogs-cheat.md @@ -0,0 +1,5 @@ +--- +'storybook-pages': minor +--- + +some corrections diff --git a/packages/storybook-pages/src/Pages/SearchResults/SearchResults.mock.tsx b/packages/storybook-pages/src/Pages/SearchResults/SearchResults.mock.tsx index 149b8d4d..220b7161 100644 --- a/packages/storybook-pages/src/Pages/SearchResults/SearchResults.mock.tsx +++ b/packages/storybook-pages/src/Pages/SearchResults/SearchResults.mock.tsx @@ -20,7 +20,7 @@ export const texts = { freelance: 'Freelance', invoice: 'Factures', location: 'emplacement', - particular: 'Particulié', + particular: 'Particulier', period: 'période', permanentContract: 'CDI', relevance: 'pertinence', diff --git a/packages/storybook-pages/src/Pages/SearchResults/SearchResults.tsx b/packages/storybook-pages/src/Pages/SearchResults/SearchResults.tsx index 173b42b7..69502776 100644 --- a/packages/storybook-pages/src/Pages/SearchResults/SearchResults.tsx +++ b/packages/storybook-pages/src/Pages/SearchResults/SearchResults.tsx @@ -70,7 +70,7 @@ export function SearchResults(): ReactElement { { categoryId: [2, 4], id: 7, - label: 'Particulié', + label: 'Particulier', onRemove: () => { removeAllFilters(); }, @@ -474,7 +474,7 @@ export function SearchResults(): ReactElement { - `${n} ${texts.file}{n > 1 ? 's' : ''} ${texts.selected} ${ + `${n} ${texts.file}${n > 1 ? 's' : ''} ${texts.selected}${ n > 1 ? 's' : '' }`, }} From 4bed47334b645d5868ddb67cd8e851433bf85d09 Mon Sep 17 00:00:00 2001 From: Tony Cabaye Date: Mon, 29 Jul 2024 12:19:38 +0200 Subject: [PATCH 06/20] fix: table actions (#203) --- .changeset/brave-hornets-dance.md | 5 ++ .../src/Components/Table/Table.tsx | 72 +++++++++++-------- 2 files changed, 48 insertions(+), 29 deletions(-) create mode 100644 .changeset/brave-hornets-dance.md diff --git a/.changeset/brave-hornets-dance.md b/.changeset/brave-hornets-dance.md new file mode 100644 index 00000000..d99a7acc --- /dev/null +++ b/.changeset/brave-hornets-dance.md @@ -0,0 +1,5 @@ +--- +'@smile/haring-react-table': patch +--- + +Fix table actions diff --git a/packages/haring-react-table/src/Components/Table/Table.tsx b/packages/haring-react-table/src/Components/Table/Table.tsx index efdba565..7ff4f937 100644 --- a/packages/haring-react-table/src/Components/Table/Table.tsx +++ b/packages/haring-react-table/src/Components/Table/Table.tsx @@ -1,6 +1,6 @@ 'use client'; -import type { ITableAction, ITableConfirmAction } from '../../types'; +import type { ITableAction } from '../../types'; import type { FloatingPosition } from '@mantine/core'; import type { IPaginationProps } from '@smile/haring-react'; import type { MRT_Row, MRT_TableOptions } from 'mantine-react-table'; @@ -52,6 +52,11 @@ const tooltipProps = { withinPortal: true, }; +interface IConfirmAction> { + actionIndex: number; + item: MRT_Row | MRT_Row[]; +} + /** Additional props will be forwarded to the [Mantine React Table useMantineReactTable hook](https://www.mantine-react-table.com/docs/api/table-options) */ export function Table>( props: ITableProps, @@ -68,7 +73,7 @@ export function Table>( } = props; const { enablePagination = true, manualPagination } = mantineTableProps; const [confirmAction, setConfirmAction] = - useState | null>(null); + useState | null>(null); const [openedMenuRowIndex, setOpenedMenuRowIndex] = useState( null, ); @@ -90,35 +95,40 @@ export function Table>( function handleAction( item: MRT_Row | MRT_Row[], - action: ITableAction, + actionIndex: number, ): void { + const action = actions[actionIndex]; if (action.confirmation) { - setConfirmAction({ ...action, item }); + setConfirmAction({ actionIndex, item }); } else { action.onAction?.(item); } } function handleCancel(): void { - if ( - confirmAction?.confirmModalProps?.onCancel?.(confirmAction.item) !== false - ) { - setConfirmAction(null); + if (confirmAction) { + const action = actions[confirmAction.actionIndex]; + if (action.confirmModalProps?.onCancel?.(confirmAction.item) !== false) { + setConfirmAction(null); + } } } function handleClose(): void { setConfirmAction(null); - confirmAction?.confirmModalProps?.onClose?.(); + if (confirmAction) { + const action = actions[confirmAction.actionIndex]; + action.confirmModalProps?.onClose?.(); + } } function handleConfirm(): void { - if ( - confirmAction?.confirmModalProps?.onConfirm?.(confirmAction.item) !== - false - ) { - setConfirmAction(null); - confirmAction?.onAction?.(confirmAction.item); + if (confirmAction) { + const action = actions[confirmAction.actionIndex]; + if (action.confirmModalProps?.onConfirm?.(confirmAction.item) !== false) { + setConfirmAction(null); + action.onAction?.(confirmAction.item); + } } } @@ -187,7 +197,7 @@ export function Table>( > handleAction(row, action)} + onClick={() => handleAction(row, index)} radius={4} type="button" variant="transparent" @@ -226,7 +236,7 @@ export function Table>( key={index} color={action.color} leftSection={getActionIcon(action, row)} - onClick={() => handleAction(row, action)} + onClick={() => handleAction(row, index)} {...getActionComponentProps(action, row)} > {getActionLabel(action, row)} @@ -252,7 +262,7 @@ export function Table>( key={index} color={action.color} leftSection={getActionIcon(action, rows)} - onClick={() => handleAction(rows, action)} + onClick={() => handleAction(rows, index)} variant="default" > {getActionLabel(action, rows)} @@ -313,6 +323,11 @@ export function Table>( paginationProps?.onPageChange?.(value - 1); } + let action: ITableAction | undefined = undefined; + if (confirmAction) { + action = actions[confirmAction.actionIndex]; + } + return ( <> @@ -335,17 +350,16 @@ export function Table>( )} )} - + {action ? ( + + ) : null} ); } From 81ba004b67465466235a68a80c1c7f2c4131cb93 Mon Sep 17 00:00:00 2001 From: Meriemu Date: Mon, 5 Aug 2024 09:28:20 +0200 Subject: [PATCH 07/20] feat(redmine 1306608): accessibility - corrections to images (#207) * feat(redmine 1306608): accessibility - corrections github comments --- .changeset/nasty-clocks-raise.md | 5 +++++ .../haring-react/src/Components/DocumentBox/DocumentBox.tsx | 3 +++ .../DocumentBox/__snapshots__/DocumentBox.test.tsx.snap | 1 + .../DocumentList/__snapshots__/DocumentList.test.tsx.snap | 3 +++ packages/haring-react/src/Components/Header/Header.mock.tsx | 5 ++++- .../__snapshots__/SelectableList.test.tsx.snap | 3 +++ packages/haring-react/src/Components/Thumbnail/Thumbnail.tsx | 4 +++- .../Thumbnail/__snapshots__/Thumbnail.test.tsx.snap | 1 + .../ThumbnailGrid/__snapshots__/ThumbnailGrid.test.tsx.snap | 3 +++ 9 files changed, 26 insertions(+), 2 deletions(-) create mode 100644 .changeset/nasty-clocks-raise.md diff --git a/.changeset/nasty-clocks-raise.md b/.changeset/nasty-clocks-raise.md new file mode 100644 index 00000000..afebca2c --- /dev/null +++ b/.changeset/nasty-clocks-raise.md @@ -0,0 +1,5 @@ +--- +'@smile/haring-react': minor +--- + +(accessibility) make corrections in Image/Avatar component diff --git a/packages/haring-react/src/Components/DocumentBox/DocumentBox.tsx b/packages/haring-react/src/Components/DocumentBox/DocumentBox.tsx index 01e39a6b..25091e89 100644 --- a/packages/haring-react/src/Components/DocumentBox/DocumentBox.tsx +++ b/packages/haring-react/src/Components/DocumentBox/DocumentBox.tsx @@ -18,6 +18,7 @@ import defaultImage from '../../../assets/defaultImage.jpg'; import classes from './DocumentBox.module.css'; export interface IDocumentBoxProps { + altText?: string; author?: ReactNode; children?: ReactNode; date?: ReactNode; @@ -31,6 +32,7 @@ export interface IDocumentBoxProps { export function DocumentBox(props: IDocumentBoxProps): ReactNode { const { + altText = 'thumbnail', author, children, date, @@ -58,6 +60,7 @@ export function DocumentBox(props: IDocumentBoxProps): ReactNode { }`} > {altText} thumbnail thumbnail thumbnail thumbnail {rightContentMobileMock} - + ); diff --git a/packages/haring-react/src/Components/SelectableList/__snapshots__/SelectableList.test.tsx.snap b/packages/haring-react/src/Components/SelectableList/__snapshots__/SelectableList.test.tsx.snap index f42bb4a6..ecf43d7c 100644 --- a/packages/haring-react/src/Components/SelectableList/__snapshots__/SelectableList.test.tsx.snap +++ b/packages/haring-react/src/Components/SelectableList/__snapshots__/SelectableList.test.tsx.snap @@ -64,6 +64,7 @@ exports[`SelectableList matches snapshot 1`] = ` class="undefined " > thumbnail thumbnail thumbnail - + {altText} thumbnail thumbnail thumbnail thumbnail Date: Tue, 6 Aug 2024 10:10:55 +0200 Subject: [PATCH 08/20] feat(redmine 1305754): create a floating menu (#206) * feat(redmine 1305754): create a floating menu --- .changeset/lazy-coins-camp.md | 5 + .../FloatingMenu/FloatingMenu.mock.tsx | 34 ++++ .../FloatingMenu/FloatingMenu.module.css | 175 ++++++++++++++++++ .../FloatingMenu/FloatingMenu.stories.tsx | 27 +++ .../Components/FloatingMenu/FloatingMenu.tsx | 103 +++++++++++ packages/haring-react/src/index.tsx | 2 + 6 files changed, 346 insertions(+) create mode 100644 .changeset/lazy-coins-camp.md create mode 100644 packages/haring-react/src/Components/FloatingMenu/FloatingMenu.mock.tsx create mode 100644 packages/haring-react/src/Components/FloatingMenu/FloatingMenu.module.css create mode 100644 packages/haring-react/src/Components/FloatingMenu/FloatingMenu.stories.tsx create mode 100644 packages/haring-react/src/Components/FloatingMenu/FloatingMenu.tsx diff --git a/.changeset/lazy-coins-camp.md b/.changeset/lazy-coins-camp.md new file mode 100644 index 00000000..7847afc9 --- /dev/null +++ b/.changeset/lazy-coins-camp.md @@ -0,0 +1,5 @@ +--- +'@smile/haring-react': minor +--- + +Creating a floating menu diff --git a/packages/haring-react/src/Components/FloatingMenu/FloatingMenu.mock.tsx b/packages/haring-react/src/Components/FloatingMenu/FloatingMenu.mock.tsx new file mode 100644 index 00000000..310eabb8 --- /dev/null +++ b/packages/haring-react/src/Components/FloatingMenu/FloatingMenu.mock.tsx @@ -0,0 +1,34 @@ +export const floatingMenuLabelMock = { + children: [ + { + hasModal: true, + href: '', + id: 0, + text: 'Document', + }, + { + hasModal: false, + href: 'https://mantine.dev#1', + id: 1, + text: 'Favoris ', + }, + { + hasModal: true, + href: '', + id: 2, + text: 'Archives', + }, + { + hasModal: false, + href: 'https://mantine.dev#2', + id: 3, + text: 'Contrats', + }, + { + hasModal: true, + href: '', + id: 4, + text: 'Aide', + }, + ], +}; diff --git a/packages/haring-react/src/Components/FloatingMenu/FloatingMenu.module.css b/packages/haring-react/src/Components/FloatingMenu/FloatingMenu.module.css new file mode 100644 index 00000000..79a34e0f --- /dev/null +++ b/packages/haring-react/src/Components/FloatingMenu/FloatingMenu.module.css @@ -0,0 +1,175 @@ +.isOpened { + position: relative; + justify-content: center; + align-items: center; + color: white; + background-color: var(--mantine-color-cyan-9); + + .floatingMenuLabel { + display: block; + color: #fff; + } + + .floatingMenuButton { + color: #fff; + } + /* noinspection CssInvalidAtRule */ + @mixin larger-than $mantine-breakpoint-xs { + align-items: flex-start; + border-radius: 28px 0px 0px 28px; + + svg { + flex: 1 0 25px; + } + } +} +.floatingMenuContainer { + position: fixed; + bottom: 0; + justify-content: space-around; + align-items: self-start; + flex-direction: row; + background-color: white; + width: 100%; + z-index: 190; + + /*noinspection CssInvalidAtRule*/ + @mixin larger-than $mantine-breakpoint-xs { + justify-content: space-evenly; + flex-direction: column; + top: 50%; + width: 56px; + height: max-content; + box-shadow: -6px 6px 7px 3px #00000008; + transform: translateY(-50%); + gap: 5px; + } +} +@mixin larger-than $mantine-breakpoint-xs { + .left { + left: 0; + border-radius: 0px 8px 8px 0px; + .floatingMenuItem { + left: calc(-138px + 56px); + transition: left 0.3s ease; + } + + .floatingMenuItem { + justify-content: flex-end; + align-items: center; + + &:hover, + &.isOpened { + justify-content: flex-start; + border-radius: 0px 28px 28px 0px; + left: 0; + + .floatingMenuLabel { + display: block; + color: #fff; + } + + .floatingMenuButton { + color: #fff; + } + } + } + + .floatingMenuButton { + span { + justify-content: flex-start; + flex-direction: row-reverse; + } + } + } + + .right { + right: 0; + border-radius: 8px 0px 0px 8px; + + .floatingMenuItem { + right: 0; + transition: right 0.3s ease; + + &:hover, + &.isOpened { + flex-direction: column; + border-radius: 28px 0px 0px 28px; + right: calc(138px - 56px); + + .floatingMenuLabel { + display: block; + color: #fff; + } + + .floatingMenuButton { + color: #fff; + } + } + } + } +} +.floatingMenuItem { + position: relative; + padding: 10px 5px; + justify-content: space-between; + height: 100%; + + span { + flex-direction: column; + max-width: 84px; + justify-content: flex-start; + align-items: center; + text-align: center; + gap: 5px; + } + + &:hover { + position: relative; + justify-content: center; + align-items: center; + color: white; + background-color: var(--mantine-color-cyan-9); + + /*noinspection CssInvalidAtRule*/ + @mixin larger-than $mantine-breakpoint-xs { + align-items: flex-start; + border-radius: 28px 0px 0px 28px; + + svg { + flex: 1 0 25px; + } + } + } + /*noinspection CssInvalidAtRule*/ + @mixin larger-than $mantine-breakpoint-xs { + width: 138px; + padding: 0 15px; + height: 56px; + + span { + flex-direction: row; + max-width: 100%; + gap: 0; + } + } +} + +.floatingMenuButton { + width: 100%; + height: 100%; + border-radius: 0; + color: var(--mantine-color-dark-6); + + @mixin larger-than $mantine-breakpoint-xs { + height: 59px; + align-items: flex-start; + border-radius: 28px 0px 0px 28px; + } +} + +.floatingMenuLabel { + @mixin larger-than $mantine-breakpoint-xs { + display: none; + } +} diff --git a/packages/haring-react/src/Components/FloatingMenu/FloatingMenu.stories.tsx b/packages/haring-react/src/Components/FloatingMenu/FloatingMenu.stories.tsx new file mode 100644 index 00000000..c82d1357 --- /dev/null +++ b/packages/haring-react/src/Components/FloatingMenu/FloatingMenu.stories.tsx @@ -0,0 +1,27 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { FloatingMenu as Cmp } from './FloatingMenu'; +import { floatingMenuLabelMock } from './FloatingMenu.mock'; + +const meta = { + component: Cmp, + decorators: [ + (Story) => ( +
+ +
+ ), + ], + tags: ['autodocs'], + title: '3-custom/Components/FloatingMenu', +} satisfies Meta; + +export default meta; +type IStory = StoryObj; + +export const FloatingMenu: IStory = { + args: { + items: floatingMenuLabelMock.children, + position: 'right', + }, +}; diff --git a/packages/haring-react/src/Components/FloatingMenu/FloatingMenu.tsx b/packages/haring-react/src/Components/FloatingMenu/FloatingMenu.tsx new file mode 100644 index 00000000..40445a26 --- /dev/null +++ b/packages/haring-react/src/Components/FloatingMenu/FloatingMenu.tsx @@ -0,0 +1,103 @@ +'use client'; +import type { ReactElement } from 'react'; + +import { ActionIcon, Flex, Group, Modal, Text } from '@mantine/core'; +import { + CalendarBlank, + FileText, + Newspaper, + Question, + Star, +} from '@phosphor-icons/react'; +import { useState } from 'react'; + +import classes from './FloatingMenu.module.css'; + +type IMenuPosition = 'left' | 'right'; + +export interface IMenuItems { + hasModal: boolean; + href: string; + id: number; + text: string; +} + +export interface IFloatingMenuProps { + items?: IMenuItems[]; + position?: IMenuPosition; +} + +const icons = [FileText, Star, Newspaper, CalendarBlank, Question]; + +export function FloatingMenu(props: IFloatingMenuProps): ReactElement { + const { position = 'right', items } = props; + + const [openedItem, setOpenedItem] = useState(null); + + const handleOpen = (index: number) => () => { + setOpenedItem(openedItem === index ? null : index); + }; + + const handleClose: () => void = () => { + setOpenedItem(null); + }; + + const positionClass = position === 'right' ? classes.right : classes.left; + return ( + + {items?.map((item, index) => { + const Icon = icons[index]; + + return ( + + + + + {item.text} + + + + {item.hasModal ? ( + + {item.text} + + ) : ( + '' + )} + + ); + })} + + ); +} diff --git a/packages/haring-react/src/index.tsx b/packages/haring-react/src/index.tsx index 72ea1b7f..7fc10ed0 100644 --- a/packages/haring-react/src/index.tsx +++ b/packages/haring-react/src/index.tsx @@ -28,6 +28,8 @@ export type { IButtonListProps } from './Components/ButtonList/ButtonList'; export { ButtonList } from './Components/ButtonList/ButtonList'; export { ActionBar } from './Components/ActionBar/ActionBar'; export type { IActionBarProps } from './Components/ActionBar/ActionBar'; +export { FloatingMenu } from './Components/FloatingMenu/FloatingMenu'; +export type { IFloatingMenuProps } from './Components/FloatingMenu/FloatingMenu'; export { ActionList } from './Components/ActionList/ActionList'; export type { IActionListProps, From 2a9441fd5b0d794abd10b622c695eae2ab5c54c0 Mon Sep 17 00:00:00 2001 From: Meriemu Date: Fri, 9 Aug 2024 15:52:59 +0200 Subject: [PATCH 09/20] =?UTF-8?q?feat(redmine=201306617):=20accessibility?= =?UTF-8?q?=20correction=20unsupported=20aria=20attr=E2=80=A6=20(#210)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(redmine 1306617): accessibility correction unsupported aria attribute --- .changeset/clever-worms-breathe.md | 5 +++++ .../CollapseButton/CollapseButtonControlled.tsx | 1 - .../__snapshots__/CollapseButton.test.tsx.snap | 1 - .../__snapshots__/HeaderMenu.test.tsx.snap | 9 --------- .../__snapshots__/SidebarFilters.test.tsx.snap | 7 ------- .../__snapshots__/SidebarMenu.test.tsx.snap | 15 --------------- 6 files changed, 5 insertions(+), 33 deletions(-) create mode 100644 .changeset/clever-worms-breathe.md diff --git a/.changeset/clever-worms-breathe.md b/.changeset/clever-worms-breathe.md new file mode 100644 index 00000000..0921060b --- /dev/null +++ b/.changeset/clever-worms-breathe.md @@ -0,0 +1,5 @@ +--- +'@smile/haring-react': minor +--- + +Accessibility Correction unsupported ARIA attributes diff --git a/packages/haring-react/src/Components/CollapseButton/CollapseButtonControlled.tsx b/packages/haring-react/src/Components/CollapseButton/CollapseButtonControlled.tsx index 7cb6775f..477e0e8b 100644 --- a/packages/haring-react/src/Components/CollapseButton/CollapseButtonControlled.tsx +++ b/packages/haring-react/src/Components/CollapseButton/CollapseButtonControlled.tsx @@ -83,7 +83,6 @@ export function CollapseButtonControlled< return ( <> + `; From 69a0aba210283bfc4374d7c5e5d7cff62d5234b4 Mon Sep 17 00:00:00 2001 From: Antoine SUBRA <92506465+subraAntoine@users.noreply.github.com> Date: Mon, 12 Aug 2024 14:06:12 +0200 Subject: [PATCH 14/20] fix(redmine 1306613): fixed form elements accessibility errors (#205) * fix(redmine 1306613): fixed form elements accessibility errors * fix(redmine 1306613): fix pr review from tony * fix(redmine 1306613): fixed lint error * fix(redmine 1306613): fixed lint error --------- Co-authored-by: Meriemu Co-authored-by: Quentin Le Caignec <12102823+QuentinLeCaignec@users.noreply.github.com> --- .changeset/spotty-dryers-admire.md | 5 +++ .../DocumentList/DocumentList.mock.tsx | 2 +- .../__snapshots__/DocumentList.test.tsx.snap | 4 +++ .../SelectableList/SelectableList.tsx | 7 ++++ .../SelectableList.test.tsx.snap | 3 ++ .../SidebarFilters/SidebarFilters.mock.tsx | 32 +++++++++++++++---- .../SidebarFilters.test.tsx.snap | 18 ++++++++--- .../SwitchableView/SwitchableView.mock.tsx | 6 ++-- .../SwitchableView.test.tsx.snap | 3 ++ 9 files changed, 66 insertions(+), 14 deletions(-) create mode 100644 .changeset/spotty-dryers-admire.md diff --git a/.changeset/spotty-dryers-admire.md b/.changeset/spotty-dryers-admire.md new file mode 100644 index 00000000..9b0b7976 --- /dev/null +++ b/.changeset/spotty-dryers-admire.md @@ -0,0 +1,5 @@ +--- +'@smile/haring-react': minor +--- + +Fixed form elements accessibility error diff --git a/packages/haring-react/src/Components/DocumentList/DocumentList.mock.tsx b/packages/haring-react/src/Components/DocumentList/DocumentList.mock.tsx index c0316974..6780d68d 100644 --- a/packages/haring-react/src/Components/DocumentList/DocumentList.mock.tsx +++ b/packages/haring-react/src/Components/DocumentList/DocumentList.mock.tsx @@ -14,7 +14,7 @@ export const documentsMock: IDocument[] = [ minim veniam, quis nostrud exercitation ullamco laboris nisi ut

diff --git a/packages/haring-react/src/Components/DocumentList/__snapshots__/DocumentList.test.tsx.snap b/packages/haring-react/src/Components/DocumentList/__snapshots__/DocumentList.test.tsx.snap index e130de00..40ee63d2 100644 --- a/packages/haring-react/src/Components/DocumentList/__snapshots__/DocumentList.test.tsx.snap +++ b/packages/haring-react/src/Components/DocumentList/__snapshots__/DocumentList.test.tsx.snap @@ -217,6 +217,7 @@ exports[`DocumentList matches snapshot 1`] = ` data-label-position="right" >
- Martin + {' '} + Martin
- Andrée + Andrée ), @@ -58,11 +68,16 @@ export function getMenu(checked: boolean): IMenuItem[] { content: ( <> - CDI + {' '} + CDI
- CDD + CDD ), @@ -72,7 +87,12 @@ export function getMenu(checked: boolean): IMenuItem[] { { content: ( - Freelance + {' '} + Freelance ), id: 11, diff --git a/packages/haring-react/src/Components/SidebarFilters/__snapshots__/SidebarFilters.test.tsx.snap b/packages/haring-react/src/Components/SidebarFilters/__snapshots__/SidebarFilters.test.tsx.snap index 4e382bf2..68c31611 100644 --- a/packages/haring-react/src/Components/SidebarFilters/__snapshots__/SidebarFilters.test.tsx.snap +++ b/packages/haring-react/src/Components/SidebarFilters/__snapshots__/SidebarFilters.test.tsx.snap @@ -295,6 +295,7 @@ exports[`SidebarFilters matches snapshot 1`] = ` data-label-position="right" > - Dupont + + Dupont
- Martin + + Martin
- CDI + + CDI
- Freelance + + Freelance diff --git a/packages/haring-react/src/Components/SwitchableView/SwitchableView.mock.tsx b/packages/haring-react/src/Components/SwitchableView/SwitchableView.mock.tsx index 22b5f3ad..b7b129fb 100644 --- a/packages/haring-react/src/Components/SwitchableView/SwitchableView.mock.tsx +++ b/packages/haring-react/src/Components/SwitchableView/SwitchableView.mock.tsx @@ -37,17 +37,17 @@ export const viewMockC = ( export const viewsMock = [ { dataView: viewMockA, - label: , + label: , value: 'a', }, { dataView: viewMockB, - label: , + label: , value: 'b', }, { dataView: viewMockC, - label: , + label: , value: 'c', }, ]; diff --git a/packages/haring-react/src/Components/SwitchableView/__snapshots__/SwitchableView.test.tsx.snap b/packages/haring-react/src/Components/SwitchableView/__snapshots__/SwitchableView.test.tsx.snap index 7467c915..ce118396 100644 --- a/packages/haring-react/src/Components/SwitchableView/__snapshots__/SwitchableView.test.tsx.snap +++ b/packages/haring-react/src/Components/SwitchableView/__snapshots__/SwitchableView.test.tsx.snap @@ -51,6 +51,7 @@ exports[`SwitchableView matches snapshot 1`] = ` class="m_78882f40 mantine-SegmentedControl-innerLabel" > Date: Thu, 5 Sep 2024 11:04:44 +0200 Subject: [PATCH 15/20] feat(redmine 1306622): add role to the calendar wrapper (#213) Co-authored-by: Quentin Le Caignec <12102823+QuentinLeCaignec@users.noreply.github.com> --- .changeset/thirty-pets-obey.md | 5 +++++ .../src/Components/CalendarHeader/CalendarHeader.tsx | 1 + .../__snapshots__/CalendarHeader.test.tsx.snap | 1 + 3 files changed, 7 insertions(+) create mode 100644 .changeset/thirty-pets-obey.md diff --git a/.changeset/thirty-pets-obey.md b/.changeset/thirty-pets-obey.md new file mode 100644 index 00000000..8fa950ea --- /dev/null +++ b/.changeset/thirty-pets-obey.md @@ -0,0 +1,5 @@ +--- +'@smile/haring-react-dates': minor +--- + +add a role to MantineCalendarHeader diff --git a/packages/haring-react-dates/src/Components/CalendarHeader/CalendarHeader.tsx b/packages/haring-react-dates/src/Components/CalendarHeader/CalendarHeader.tsx index 4bb7bfe6..de9b9fa6 100644 --- a/packages/haring-react-dates/src/Components/CalendarHeader/CalendarHeader.tsx +++ b/packages/haring-react-dates/src/Components/CalendarHeader/CalendarHeader.tsx @@ -89,6 +89,7 @@ export function CalendarHeader(props: ICalendarHeaderProps): ReactElement { color="red" label={label} onLevelClick={() => setOpened(!opened)} + role="region" size="md" {...calendarHeaderProps} /> diff --git a/packages/haring-react-dates/src/Components/CalendarHeader/__snapshots__/CalendarHeader.test.tsx.snap b/packages/haring-react-dates/src/Components/CalendarHeader/__snapshots__/CalendarHeader.test.tsx.snap index 9965d95c..999c695c 100644 --- a/packages/haring-react-dates/src/Components/CalendarHeader/__snapshots__/CalendarHeader.test.tsx.snap +++ b/packages/haring-react-dates/src/Components/CalendarHeader/__snapshots__/CalendarHeader.test.tsx.snap @@ -23,6 +23,7 @@ exports[`CalendarHeader matches snapshot 1`] = ` color="red" data-size="md" id="mantine-f4bipx4bi-target" + role="region" style="--dch-control-size: var(--dch-control-size-md); --dch-fz: var(--mantine-font-size-md);" >