8bb1cb5e63
* Create WidgetContextMenu component in shared-components * Modify WidgetMenuContext call (apptile, extensioncard, widgetcard), test and stories * Correctly use new widgetcontextmenu component * WidgetContextMenuViewModel unit test * Lint and add comments * Finalize widgetcontextmenuviewmodel test * fix lint errors * Fix test error * Update playwright screenshots * add userWidget in widgetcontexstmenu props * Fix some a11y issues on playwright * fix linter error widget card * Use new i18n way for share component widget context menu * Add i18n context provider for widget context menu * chore: lint and update snapshot widgetcontextmenu
85 lines
2.5 KiB
TypeScript
85 lines
2.5 KiB
TypeScript
/*
|
|
* Copyright 2025 New Vector Ltd.
|
|
*
|
|
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
|
* Please see LICENSE files in the repository root for full details.
|
|
*/
|
|
|
|
import React, { type JSX } from "react";
|
|
import { fn } from "storybook/test";
|
|
import { IconButton } from "@vector-im/compound-web";
|
|
import TriggerIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
|
|
|
|
import type { Meta, StoryFn } from "@storybook/react-vite";
|
|
import {
|
|
type WidgetContextMenuAction,
|
|
type WidgetContextMenuSnapshot,
|
|
WidgetContextMenuView,
|
|
} from "./WidgetContextMenuView";
|
|
import { useMockedViewModel } from "../../viewmodel/useMockedViewModel";
|
|
|
|
type WidgetContextMenuViewModelProps = WidgetContextMenuSnapshot & WidgetContextMenuAction;
|
|
|
|
const WidgetContextMenuViewWrapper = ({
|
|
onStreamAudioClick,
|
|
onEditClick,
|
|
onSnapshotClick,
|
|
onDeleteClick,
|
|
onRevokeClick,
|
|
onFinished,
|
|
onMoveButton,
|
|
...rest
|
|
}: WidgetContextMenuViewModelProps): JSX.Element => {
|
|
const vm = useMockedViewModel(rest, {
|
|
onStreamAudioClick,
|
|
onEditClick,
|
|
onSnapshotClick,
|
|
onDeleteClick,
|
|
onRevokeClick,
|
|
onFinished,
|
|
onMoveButton,
|
|
});
|
|
return <WidgetContextMenuView vm={vm} />;
|
|
};
|
|
|
|
export default {
|
|
title: "RightPanel/WidgetContextMenuView",
|
|
component: WidgetContextMenuViewWrapper,
|
|
tags: ["autodocs"],
|
|
args: {
|
|
showStreamAudioStreamButton: true,
|
|
showEditButton: true,
|
|
showRevokeButton: true,
|
|
showDeleteButton: true,
|
|
showSnapshotButton: true,
|
|
showMoveButtons: [true, true],
|
|
canModify: true,
|
|
widgetMessaging: undefined,
|
|
isMenuOpened: true,
|
|
trigger: (
|
|
<IconButton size="24px" aria-label="context menu trigger button" inert={true} tabIndex={-1}>
|
|
<TriggerIcon />
|
|
</IconButton>
|
|
),
|
|
onStreamAudioClick: fn(),
|
|
onEditClick: fn(),
|
|
onSnapshotClick: fn(),
|
|
onDeleteClick: fn(),
|
|
onRevokeClick: fn(),
|
|
onFinished: fn(),
|
|
onMoveButton: fn(),
|
|
},
|
|
} as Meta<typeof WidgetContextMenuViewWrapper>;
|
|
|
|
const Template: StoryFn<typeof WidgetContextMenuViewWrapper> = (args) => <WidgetContextMenuViewWrapper {...args} />;
|
|
|
|
export const Default = Template.bind({});
|
|
|
|
export const OnlyBasicModification = Template.bind({});
|
|
OnlyBasicModification.args = {
|
|
showSnapshotButton: false,
|
|
showMoveButtons: [false, false],
|
|
showStreamAudioStreamButton: false,
|
|
showEditButton: false,
|
|
};
|