web: Add initial version of a segmented control pattern

Initially based on props only, but most probably it will evolve to
provide subcomponents to make possible to build more detailed options by
just writing JSX.

It has been added to be used in the new device selection dialog that
will land in the Storage page and after discarding plain HTML input
radios and tabs components. The radios were discarded because target
actions are not actually form options but rather "form/mode pickers"
which have an immediate effect on the user interface after selecting
one. The tabs for avoiding mislead the user that they are navigating
between these options. In other words, to ensure users are aware of the
mutually exclusive settings they are in front of.

It is inspired by the segmented control pattern. To read more have a
look to below links

* https://primer.style/components/segmented-control
* https://medium.com/tap-to-dismiss/a-better-segmented-control-9e662de2ef57

web/src/assets/styles/blocks.scss

@@ -424,6 +424,44 @@ ul[data-type="agama/list"][role="grid"] {
   }
 }
 
+[data-type="agama/segmented-control"] {
+  ul {
+    display: inline-flex;
+    gap: var(--spacer-smaller);
+    list-style-type: none;
+    border-radius: var(--spacer-smaller);
+    align-items: center;
+    margin-inline: 0;
+
+    li {
+      margin: 0;
+
+      &:not(:last-child) {
+        padding-inline-end: var(--spacer-smaller);
+        border-inline-end: 1px solid var(--color-gray-dark);
+      }
+
+      button {
+        padding: var(--spacer-smaller) var(--spacer-small);
+        border: 1px solid var(--color-gray-darker);
+        border-radius: var(--spacer-smaller);
+        background: white; // var(--color-gray);
+
+        &[aria-current="true"] {
+          background: var(--color-primary);
+          color: white;
+          font-weight: bold;
+          font-size: var(--fs-normal);
+        }
+
+        &:not([aria-current="true"]):hover {
+          background: var(--color-gray);
+        }
+      }
+    }
+  }
+}
+
 table[data-type="agama/tree-table"] {
   th:first-child {
     block-size: fit-content;

web/src/components/core/SegmentedControl.jsx

@@ -0,0 +1,66 @@
+/*
+ * 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";
+
+const defaultRenderLabel = (option) => option?.label;
+
+/**
+ * Renders given options as a segmented control
+ * @component
+ *
+ * @param {object} props
+ * @param {object[]} props.options=[] - A collection of object.
+ * @param {string} [props.optionIdKey="id"] - The key to look for the option id.
+ * @param {(object) => React.ReactElement} [props.renderLabel=(object) => string] - The method for rendering the option label.
+ * @param {(object) => object} [props.onClick] - The callback triggered when user clicks an option.
+ * @param {object} [props.selected] - The selected option
+ */
+export default function SegmentedControl({
+  options = [],
+  optionIdKey = "id",
+  renderLabel = defaultRenderLabel,
+  onClick = () => {},
+  selected,
+}) {
+  return (
+    <div data-type="agama/segmented-control">
+      <ul>
+        { options.map((option, idx) => {
+          const optionId = option[optionIdKey];
+
+          return (
+            <li key={optionId || idx}>
+              <button
+                aria-current={option === selected}
+                onClick={() => onClick(option)}
+              >
+                {renderLabel(option)}
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}

web/src/components/core/SegmentedControl.test.jsx

@@ -0,0 +1,70 @@
+/*
+ * 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 { SegmentedControl } from "~/components/core";
+
+const selectOption = { label: "Select", longLabel: "Select item", description: "Select an existing item" };
+const createOption = { label: "Create", longLabel: "Create item", description: "Create a new item" };
+const options = [
+  selectOption, createOption
+];
+
+describe("SegmentedControl", () => {
+  it("renders each given option as a button", () => {
+    plainRender(<SegmentedControl options={options} />);
+    screen.getByRole("button", { name: "Select" });
+    screen.getByRole("button", { name: "Create" });
+  });
+
+  it("uses renderLabel for rendering the button text", () => {
+    const onClick = jest.fn();
+    const { user } = plainRender(
+      <SegmentedControl options={options} renderLabel={(option) => option.longLabel }  />
+    );
+
+    const buttonByLabel = screen.queryByRole("button", { name: "Select" });
+    expect(buttonByLabel).toBeNull();
+    screen.getByRole("button", { name: "Select item" });
+  });
+
+  it("sets proper aria-current value for each button", () => {
+    plainRender(<SegmentedControl options={options} selected={createOption} />);
+    const selectButton = screen.getByRole("button", { name: "Select" });
+    const createButton = screen.getByRole("button", { name: "Create" });
+    expect(selectButton).toHaveAttribute("aria-current", "false");
+    expect(createButton).toHaveAttribute("aria-current", "true");
+  });
+
+  it("triggers given onClick callback when user clicks an option", async () => {
+    const onClick = jest.fn();
+    const { user } = plainRender(
+      <SegmentedControl options={options} selected={createOption} onClick={onClick} />
+    );
+    const selectButton = screen.getByRole("button", { name: "Select" });
+
+    await user.click(selectButton);
+
+    expect(onClick).toHaveBeenCalledWith(selectOption);
+  });
+});

web/src/components/core/index.js

@@ -61,3 +61,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 SegmentedControl } from "./SegmentedControl";