diff --git a/front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx b/front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx new file mode 100644 index 000000000..d090ac454 --- /dev/null +++ b/front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx @@ -0,0 +1,52 @@ +import { IconDotsVertical, IconTrash } from '@/ui/display/icon'; +import { LightIconButton } from '@/ui/input/button/components/LightIconButton'; +import { IconArchiveOff } from '@/ui/input/constants/icons'; +import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; +import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; +import { StyledDropdownMenu } from '@/ui/layout/dropdown/components/StyledDropdownMenu'; +import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; +import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; + +type SettingsObjectDisabledMenuDropDownProps = { + scopeKey: string; + handleActivate: () => void; + handleErase: () => void; +}; + +export const SettingsObjectDisabledMenuDropDown = ({ + scopeKey, + handleActivate, + handleErase, +}: SettingsObjectDisabledMenuDropDownProps) => { + return ( + + + } + dropdownComponents={ + + + + + + + } + dropdownHotkeyScope={{ + scope: scopeKey + '-settings-object-disabled-menu-dropdown', + }} + /> + + ); +}; diff --git a/front/src/modules/settings/data-model/objects/__stories__/SettingsObjectDisabledMenuDropDown.stories.tsx b/front/src/modules/settings/data-model/objects/__stories__/SettingsObjectDisabledMenuDropDown.stories.tsx new file mode 100644 index 000000000..97e67f749 --- /dev/null +++ b/front/src/modules/settings/data-model/objects/__stories__/SettingsObjectDisabledMenuDropDown.stories.tsx @@ -0,0 +1,84 @@ +import { expect } from '@storybook/jest'; +import { jest } from '@storybook/jest'; +import { Decorator, Meta, StoryObj } from '@storybook/react'; +import { userEvent, within } from '@storybook/testing-library'; + +import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; + +import { SettingsObjectDisabledMenuDropDown } from '../SettingsObjectDisabledMenuDropDown'; + +const handleActivateMockFunction = jest.fn(); +const handleEraseMockFunction = jest.fn(); + +const ClearMocksDecorator: Decorator = (Story, context) => { + if (context.parameters.clearMocks) { + handleActivateMockFunction.mockClear(); + handleEraseMockFunction.mockClear(); + } + return ; +}; + +const meta: Meta = { + title: 'Modules/Settings/DataModel/SettingsObjectDisabledMenuDropDown', + component: SettingsObjectDisabledMenuDropDown, + args: { + scopeKey: 'settings-object-disabled-menu-dropdown', + handleActivate: handleActivateMockFunction, + handleErase: handleEraseMockFunction, + }, + decorators: [ComponentDecorator, ClearMocksDecorator], + parameters: { + clearMocks: true, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; + +export const WithOpen: Story = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + const dropdownButton = await canvas.findByRole('button'); + + await userEvent.click(dropdownButton); + }, +}; + +export const WithActivate: Story = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + const dropdownButton = await canvas.findByRole('button'); + + await userEvent.click(dropdownButton); + + await expect(handleActivateMockFunction).toHaveBeenCalledTimes(0); + + const activateMenuItem = await canvas.findByText('Activate'); + + await userEvent.click(activateMenuItem); + + await expect(handleActivateMockFunction).toHaveBeenCalledTimes(1); + }, +}; + +export const WithErase: Story = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + const dropdownButton = await canvas.findByRole('button'); + + await userEvent.click(dropdownButton); + + await expect(handleEraseMockFunction).toHaveBeenCalledTimes(0); + + const eraseMenuItem = await canvas.findByText('Erase'); + + await userEvent.click(eraseMenuItem); + + await expect(handleEraseMockFunction).toHaveBeenCalledTimes(1); + }, +}; diff --git a/front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx b/front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx index d6d4aae80..2f5ffeb51 100644 --- a/front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx +++ b/front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx @@ -82,7 +82,7 @@ export const StyledMenuItemLeftContent = styled.div` flex-direction: row; - gap: ${({ theme }) => theme.spacing(1)}; + gap: ${({ theme }) => theme.spacing(2)}; min-width: 0; width: 100%; `; diff --git a/front/src/pages/settings/data-model/SettingsObjects.tsx b/front/src/pages/settings/data-model/SettingsObjects.tsx index e447861cd..80eb1da4a 100644 --- a/front/src/pages/settings/data-model/SettingsObjects.tsx +++ b/front/src/pages/settings/data-model/SettingsObjects.tsx @@ -9,12 +9,8 @@ import { disabledObjectItems, } from '@/settings/data-model/constants/mockObjects'; import { SettingsObjectCoverImage } from '@/settings/data-model/objects/SettingsObjectCoverImage'; -import { - IconChevronRight, - IconDotsVertical, - IconPlus, - IconSettings, -} from '@/ui/display/icon'; +import { SettingsObjectDisabledMenuDropDown } from '@/settings/data-model/objects/SettingsObjectDisabledMenuDropDown'; +import { IconChevronRight, IconPlus, IconSettings } from '@/ui/display/icon'; import { Tag } from '@/ui/display/tag/components/Tag'; import { H1Title } from '@/ui/display/typography/components/H1Title'; import { H2Title } from '@/ui/display/typography/components/H2Title'; @@ -50,10 +46,6 @@ const StyledIconChevronRight = styled(IconChevronRight)` color: ${({ theme }) => theme.font.color.tertiary}; `; -const StyledIconDotsVertical = styled(IconDotsVertical)` - color: ${({ theme }) => theme.font.color.tertiary}; -`; - const StyledH1Title = styled(H1Title)` margin-bottom: 0; `; @@ -141,9 +133,10 @@ export const SettingsObjects = () => { {objectItem.instances} - {}} + handleErase={() => {}} />