From 29534f625e154340f48d6ec253497be94db1b8bd Mon Sep 17 00:00:00 2001 From: Robin Date: Tue, 26 Sep 2023 15:00:06 -0400 Subject: [PATCH 1/4] Create toggle menu item component This is a pretty common way for the menu item component to be used, and it's slightly non-trivial (you need to hook up the entire menu item as a label element), so I think it deserves its own component. --- .../MenuItem/ToggleMenuItem.stories.tsx | 50 +++++++++++++++++++ .../MenuItem/ToggleMenuItem.test.tsx | 31 ++++++++++++ src/components/MenuItem/ToggleMenuItem.tsx | 48 ++++++++++++++++++ .../ToggleMenuItem.test.tsx.snap | 42 ++++++++++++++++ src/components/Toggle/Toggle.module.css | 4 +- src/components/Toggle/Toggle.test.tsx | 10 +--- src/components/Toggle/Toggle.tsx | 18 +------ 7 files changed, 177 insertions(+), 26 deletions(-) create mode 100644 src/components/MenuItem/ToggleMenuItem.stories.tsx create mode 100644 src/components/MenuItem/ToggleMenuItem.test.tsx create mode 100644 src/components/MenuItem/ToggleMenuItem.tsx create mode 100644 src/components/MenuItem/__snapshots__/ToggleMenuItem.test.tsx.snap diff --git a/src/components/MenuItem/ToggleMenuItem.stories.tsx b/src/components/MenuItem/ToggleMenuItem.stories.tsx new file mode 100644 index 00000000..8f828c45 --- /dev/null +++ b/src/components/MenuItem/ToggleMenuItem.stories.tsx @@ -0,0 +1,50 @@ +/* +Copyright 2023 New Vector Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from "react"; +import { Meta, StoryFn } from "@storybook/react"; +import ExtensionsIcon from "@vector-im/compound-design-tokens/icons/extensions.svg"; +import ChatIcon from "@vector-im/compound-design-tokens/icons/chat.svg"; + +import { ToggleMenuItem as ToggleMenuItemComponent } from "./ToggleMenuItem"; + +export default { + title: "ToggleMenuItem", + component: ToggleMenuItemComponent, + argTypes: {}, + args: {}, +} as Meta; + +const Template: StoryFn = (args) => ( +
+ + +
+); + +export const Primary = Template.bind({}); +Primary.args = {}; + +Primary.parameters = { + design: { + type: "figma", + url: "https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=712-6909&mode=dev", + }, +}; diff --git a/src/components/MenuItem/ToggleMenuItem.test.tsx b/src/components/MenuItem/ToggleMenuItem.test.tsx new file mode 100644 index 00000000..6c035fe6 --- /dev/null +++ b/src/components/MenuItem/ToggleMenuItem.test.tsx @@ -0,0 +1,31 @@ +/* +Copyright 2023 New Vector Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import { describe, it, expect } from "vitest"; +import { render } from "@testing-library/react"; +import React from "react"; +import VisibilityOnIcon from "@vector-im/compound-design-tokens/icons/visibility-on.svg"; + +import { ToggleMenuItem } from "./ToggleMenuItem"; + +describe("ToggleMenuItem", () => { + it("renders", () => { + const { asFragment } = render( + , + ); + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/src/components/MenuItem/ToggleMenuItem.tsx b/src/components/MenuItem/ToggleMenuItem.tsx new file mode 100644 index 00000000..cfc7e68c --- /dev/null +++ b/src/components/MenuItem/ToggleMenuItem.tsx @@ -0,0 +1,48 @@ +/* +Copyright 2023 New Vector Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React, { ComponentProps, forwardRef } from "react"; +import { MenuItem } from "./MenuItem"; +import { Toggle } from "../Toggle/Toggle"; +import useId from "../../utils/useId"; + +type Props = Pick< + ComponentProps, + "className" | "Icon" | "label" +> & + Omit, "id" | "children">; + +/** + * A menu item with a toggle control. Clicking anywhere on the surface will + * activate the toggle. + */ +export const ToggleMenuItem = forwardRef( + function ToggleMenuItem({ className, Icon, label, ...toggleProps }, ref) { + const toggleId = useId(); + return ( + + + + ); + }, +); diff --git a/src/components/MenuItem/__snapshots__/ToggleMenuItem.test.tsx.snap b/src/components/MenuItem/__snapshots__/ToggleMenuItem.test.tsx.snap new file mode 100644 index 00000000..8d53cadf --- /dev/null +++ b/src/components/MenuItem/__snapshots__/ToggleMenuItem.test.tsx.snap @@ -0,0 +1,42 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`ToggleMenuItem > renders 1`] = ` + +