From 14de1d2c841edf9b93e36d8fe62da2211e396cd4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Mon, 27 May 2024 17:24:24 +0100 Subject: [PATCH] web: drop no longer needed Field components --- web/src/components/core/Field.jsx | 115 ------------------------- web/src/components/core/Field.test.jsx | 114 ------------------------ web/src/components/core/index.js | 2 - 3 files changed, 231 deletions(-) delete mode 100644 web/src/components/core/Field.jsx delete mode 100644 web/src/components/core/Field.test.jsx diff --git a/web/src/components/core/Field.jsx b/web/src/components/core/Field.jsx deleted file mode 100644 index 7e63dc49ba..0000000000 --- a/web/src/components/core/Field.jsx +++ /dev/null @@ -1,115 +0,0 @@ -/* - * Copyright (c) [2024] SUSE LLC - * - * All Rights Reserved. - * - * This program is free software; you can redistribute it and/or modify it - * under the terms of version 2 of the GNU General Public License as published - * by the Free Software Foundation. - * - * This program is distributed in the hope that it will be useful, but WITHOUT - * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or - * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for - * more details. - * - * You should have received a copy of the GNU General Public License along - * with this program; if not, contact SUSE LLC. - * - * To contact SUSE LLC about this file by physical or electronic mail, you may - * find current contact information at www.suse.com. - */ - -// @ts-check - -import React from "react"; -import { Icon } from "~/components/layout"; - -/** - * @typedef {import("react").ButtonHTMLAttributes} ButtonHTMLAttributes - * @typedef {import("~/components/layout/Icon").IconName} IconName - * @typedef {import("~/components/layout/Icon").IconSize} IconSize - */ - -/** - * @typedef {object} FieldProps - * @property {React.ReactNode} label - The field label. - * @property {React.ReactNode} [value] - The field value. - * @property {React.ReactNode} [description] - A field description, useful for providing context to the user. - * @property {IconName} [icon] - The name of the icon for the field. - * @property {IconSize} [iconSize="s"] - The size for the field icon. - * @property {("b"|"span")} [textWrapper="b"] - The element used for wrapping the label. - * @property {ButtonHTMLAttributes} [buttonAttrs={}] - The element used for wrapping the label. - * @property {string} [className] - ClassName - * @property {() => void} [onClick] - Callback - * @property {React.ReactNode} [children] - A content to be rendered as field children - * - * @typedef {Omit} FieldPropsWithoutIcon - */ - -/** - * Component for laying out a page field - * - * @param {FieldProps} props - */ -const Field = ({ - label, - value, - description, - icon, - iconSize = "s", - onClick, - children, - textWrapper = "b", - buttonAttrs = {}, - ...props -}) => { - const FieldIcon = () => icon?.length > 0 && ; - const TextWrapper = textWrapper; - return ( -
-
- {value} -
-
- {description} -
-
- {children} -
-
- ); -}; - -/** - * @param {Omit & {isChecked: boolean, highlightContent?: boolean}} props - */ -const SwitchField = ({ isChecked = false, highlightContent = false, ...props }) => { - const iconName = isChecked ? "toggle_on" : "toggle_off"; - const baseClassnames = highlightContent ? "highlighted" : ""; - const stateClassnames = isChecked ? "on" : "off"; - - return ( - - ); -}; - -/** - * @param {FieldProps & {isExpanded: boolean}} props - */ -const ExpandableField = ({ label, isExpanded, ...props }) => { - const iconName = isExpanded ? "collapse_all" : "expand_all"; - const className = isExpanded ? "expanded" : "collapsed"; - const labelWithIcon = <>{label} ; - - return ; -}; - -export default Field; -export { ExpandableField, SwitchField }; diff --git a/web/src/components/core/Field.test.jsx b/web/src/components/core/Field.test.jsx deleted file mode 100644 index 6485c230c9..0000000000 --- a/web/src/components/core/Field.test.jsx +++ /dev/null @@ -1,114 +0,0 @@ -/* - * Copyright (c) [2024] SUSE LLC - * - * All Rights Reserved. - * - * This program is free software; you can redistribute it and/or modify it - * under the terms of version 2 of the GNU General Public License as published - * by the Free Software Foundation. - * - * This program is distributed in the hope that it will be useful, but WITHOUT - * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or - * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for - * more details. - * - * You should have received a copy of the GNU General Public License along - * with this program; if not, contact SUSE LLC. - * - * To contact SUSE LLC about this file by physical or electronic mail, you may - * find current contact information at www.suse.com. - */ - -import React from "react"; -import { screen } from "@testing-library/react"; -import { plainRender } from "~/test-utils"; -import { Field, ExpandableField, SwitchField } from "~/components/core"; - -const onClick = jest.fn(); - -describe("Field", () => { - it("renders a button with given icon and label", () => { - const { container } = plainRender( - - ); - screen.getByRole("button", { name: "Theme" }); - const icon = container.querySelector("button > svg"); - expect(icon).toHaveAttribute("data-icon-name", "edit"); - }); - - it("renders value, description, and given children", () => { - plainRender( - -

This is a preview

; - - ); - screen.getByText("dark"); - screen.getByText("Choose your preferred color schema."); - screen.getByText("This is a"); - screen.getByText("preview"); - }); - - it("triggers the onClick callback when users clicks the button", async () => { - const { user } = plainRender( - - ); - const button = screen.getByRole("button"); - await user.click(button); - expect(onClick).toHaveBeenCalled(); - }); -}); - -describe("SwitchField", () => { - it("sets button role to switch", () => { - plainRender(); - const switchButton = screen.getByRole("switch", { name: "Zoom" }); - expect(switchButton instanceof HTMLButtonElement).toBe(true); - }); - - it("keeps aria-checked attribute in sync with isChecked prop", () => { - let switchButton; - const { rerender } = plainRender(); - switchButton = screen.getByRole("switch", { name: "Zoom" }); - expect(switchButton).toHaveAttribute("aria-checked", "true"); - - rerender(); - switchButton = screen.getByRole("switch", { name: "Zoom" }); - expect(switchButton).toHaveAttribute("aria-checked", "false"); - }); - - it("uses the 'toggle_on' icon when isChecked", () => { - const { container } = plainRender( - - ); - const icon = container.querySelector("button > svg"); - expect(icon).toHaveAttribute("data-icon-name", "toggle_on"); - }); - - it("uses the 'toggle_off' icon when not isChecked", () => { - const { container } = plainRender( - - ); - const icon = container.querySelector("button > svg"); - expect(icon).toHaveAttribute("data-icon-name", "toggle_off"); - }); -}); - -describe("ExpandableField", () => { - it("uses 'expanded' as className prop value when isExpanded", () => { - const { container } = plainRender(); - const field = container.querySelector("[data-type='agama/field']"); - expect(field.classList.contains("expanded")).toBe(true); - }); - - it("uses 'collapsed' as className prop value when isExpanded", () => { - const { container } = plainRender(); - const field = container.querySelector("[data-type='agama/field']"); - expect(field.classList.contains("collapsed")).toBe(true); - }); -}); diff --git a/web/src/components/core/index.js b/web/src/components/core/index.js index 6369b6f4db..f4627e50e9 100644 --- a/web/src/components/core/index.js +++ b/web/src/components/core/index.js @@ -57,6 +57,4 @@ export { default as OptionsPicker } from "./OptionsPicker"; export { default as Reminder } from "./Reminder"; export { default as Tag } from "./Tag"; export { default as TreeTable } from "./TreeTable"; -export { default as Field } from "./Field"; -export { ExpandableField, SwitchField } from "./Field"; export { default as CardField } from "./CardField";