From 2d50920a481c411020e1ab2b7da5427a97974a11 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Wed, 20 Mar 2024 17:22:01 +0100 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(app-desk)=20create=20IconOpt?= =?UTF-8?q?ions=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Export from MemberAction component the icon options to IconOptions component. We will reuse this component in other places. --- .../apps/desk/src/components/IconOptions.tsx | 22 +++++++++++++++++++ .../apps/desk/src/components/index.ts | 1 + .../members/__tests__/MemberAction.test.tsx | 16 ++++++++++---- .../members/__tests__/MemberGrid.test.tsx | 4 ++-- .../members/components/MemberAction.tsx | 16 +++++--------- .../apps/desk/src/i18n/translations.json | 2 +- 6 files changed, 43 insertions(+), 18 deletions(-) create mode 100644 src/frontend/apps/desk/src/components/IconOptions.tsx diff --git a/src/frontend/apps/desk/src/components/IconOptions.tsx b/src/frontend/apps/desk/src/components/IconOptions.tsx new file mode 100644 index 0000000..a6b2656 --- /dev/null +++ b/src/frontend/apps/desk/src/components/IconOptions.tsx @@ -0,0 +1,22 @@ +import { Text } from '@/components'; + +interface IconOptionsProps { + isOpen: boolean; + 'aria-label': string; +} + +export const IconOptions = ({ isOpen, ...props }: IconOptionsProps) => { + return ( + + more_vert + + ); +}; diff --git a/src/frontend/apps/desk/src/components/index.ts b/src/frontend/apps/desk/src/components/index.ts index 6a457ee..fa6ac7b 100644 --- a/src/frontend/apps/desk/src/components/index.ts +++ b/src/frontend/apps/desk/src/components/index.ts @@ -2,6 +2,7 @@ export * from './Box'; export * from './BoxButton'; export * from './Card'; export * from './DropButton'; +export * from './IconOptions'; export * from './Link'; export * from './Text'; export * from './TextErrors'; diff --git a/src/frontend/apps/desk/src/features/members/__tests__/MemberAction.test.tsx b/src/frontend/apps/desk/src/features/members/__tests__/MemberAction.test.tsx index 4be9097..a67ab02 100644 --- a/src/frontend/apps/desk/src/features/members/__tests__/MemberAction.test.tsx +++ b/src/frontend/apps/desk/src/features/members/__tests__/MemberAction.test.tsx @@ -33,7 +33,9 @@ describe('MemberAction', () => { }, ); - expect(await screen.findByLabelText('Member options')).toBeInTheDocument(); + expect( + await screen.findByLabelText('Open the member options modal'), + ).toBeInTheDocument(); }); it('checks the render when member', () => { @@ -44,7 +46,9 @@ describe('MemberAction', () => { }, ); - expect(screen.queryByLabelText('Member options')).not.toBeInTheDocument(); + expect( + screen.queryByLabelText('Open the member options modal'), + ).not.toBeInTheDocument(); }); it('checks the render when admin', async () => { @@ -55,7 +59,9 @@ describe('MemberAction', () => { }, ); - expect(await screen.findByLabelText('Member options')).toBeInTheDocument(); + expect( + await screen.findByLabelText('Open the member options modal'), + ).toBeInTheDocument(); }); it('checks the render when admin to owner', () => { @@ -70,6 +76,8 @@ describe('MemberAction', () => { }, ); - expect(screen.queryByLabelText('Member options')).not.toBeInTheDocument(); + expect( + screen.queryByLabelText('Open the member options modal'), + ).not.toBeInTheDocument(); }); }); diff --git a/src/frontend/apps/desk/src/features/members/__tests__/MemberGrid.test.tsx b/src/frontend/apps/desk/src/features/members/__tests__/MemberGrid.test.tsx index fdd3016..6f5e294 100644 --- a/src/frontend/apps/desk/src/features/members/__tests__/MemberGrid.test.tsx +++ b/src/frontend/apps/desk/src/features/members/__tests__/MemberGrid.test.tsx @@ -175,13 +175,13 @@ describe('MemberGrid', () => { if (expected) { expect( await screen.findAllByRole('button', { - name: 'Member options', + name: 'Open the member options modal', }), ).toBeDefined(); } else { expect( screen.queryByRole('button', { - name: 'Member options', + name: 'Open the member options modal', }), ).not.toBeInTheDocument(); } diff --git a/src/frontend/apps/desk/src/features/members/components/MemberAction.tsx b/src/frontend/apps/desk/src/features/members/components/MemberAction.tsx index cb48a2b..c4d690c 100644 --- a/src/frontend/apps/desk/src/features/members/components/MemberAction.tsx +++ b/src/frontend/apps/desk/src/features/members/components/MemberAction.tsx @@ -2,7 +2,7 @@ import { Button } from '@openfun/cunningham-react'; import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { DropButton, Text } from '@/components'; +import { DropButton, IconOptions, Text } from '@/components'; import { Access, Role } from '../types'; @@ -34,16 +34,10 @@ export const MemberAction = ({ <> - more_vert - + } onOpenChange={(isOpen) => setIsDropOpen(isOpen)} isOpen={isDropOpen} diff --git a/src/frontend/apps/desk/src/i18n/translations.json b/src/frontend/apps/desk/src/i18n/translations.json index 3f86d75..5b07949 100644 --- a/src/frontend/apps/desk/src/i18n/translations.json +++ b/src/frontend/apps/desk/src/i18n/translations.json @@ -35,10 +35,10 @@ "Marianne Logo": "Logo Marianne", "Member": "Membre", "Member icon": "Icône de membre", - "Member options": "Options des Membres", "Members of “{{teamName}}“": "Membres de “{{teamName}}“", "Name the team": "Nommer le groupe", "Names": "Noms", + "Open the member options modal": "Ouvrir les options de membre dans la fenêtre modale", "Owner": "Propriétaire", "People": "People", "People Description": "Description de People",