@squiz/formatted-text-editor 1.33.1-alpha.1 → 1.33.1-alpha.3

package/src/ui/Tabs/Tabs.spec.tsx

@@ -0,0 +1,44 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Tabs, TabOptions } from './Tabs';
+import { MarkName } from '../../Extensions/Extensions';
+
+const linkTypeOptions: TabOptions = {
+  [MarkName.AssetLink]: { label: 'From source' },
+  [MarkName.Link]: { label: 'From URL' },
+};
+
+describe('Tabs', () => {
+  const mockOnChange = jest.fn();
+
+  const TabsComponent = () => {
+    return <Tabs value={MarkName.AssetLink} options={linkTypeOptions} onChange={mockOnChange} />;
+  };
+
+  it('renders the Tabs component', () => {
+    render(<TabsComponent />);
+    expect(screen.getByText('From source')).toBeInTheDocument();
+    expect(screen.getByText('From URL')).toBeInTheDocument();
+  });
+
+  it('defaults active to asset link', () => {
+    render(<TabsComponent />);
+    expect(screen.getByRole('tab', { selected: true })).toHaveTextContent('From source');
+  });
+
+  it('changes selected state when clicking the other tab', () => {
+    render(<TabsComponent />);
+
+    const assetLink = screen.getByTestId('assetLink');
+    const link = screen.getByTestId('link');
+
+    expect(assetLink).toHaveAttribute('aria-selected', 'true');
+    expect(link).not.toHaveAttribute('aria-selected', 'true');
+
+    fireEvent.click(link);
+
+    expect(assetLink).not.toHaveAttribute('aria-selected', 'true');
+    expect(link).toHaveAttribute('aria-selected', 'true');
+  });
+});

package/src/ui/Tabs/Tabs.tsx

@@ -0,0 +1,41 @@
+import { Tab } from '@headlessui/react';
+import React, { Fragment } from 'react';
+import clsx from 'clsx';
+
+export type TabOptions = Record<string, TabOption>;
+export type TabOption = {
+  label: string;
+};
+
+export type TabsProps = {
+  value: string;
+  options: TabOptions;
+  onChange?: (value: string) => void;
+};
+
+export const Tabs = ({ value, options, onChange }: TabsProps) => (
+  <Tab.Group
+    // Check what index the selected tab is, otherwise default to first tab
+    defaultIndex={Object.keys(options).indexOf(value) || 0}
+    // Check what the selected tab key is and trigger onChange
+    onChange={(index) => {
+      const selectedTab = Object.keys(options)[index];
+      onChange?.(selectedTab);
+    }}
+  >
+    <Tab.List className="grid grid-flow-col h-10 border-b border-gray-300">
+      {Object.entries(options).map(([key, option]) => (
+        <Tab key={key} as={Fragment}>
+          {({ selected }) => (
+            <div className="flex flex-col justify-between" data-testid={key} aria-selected={selected}>
+              <button type="button" className={clsx('mt-[7px] text-gray-800', selected && 'font-bold')}>
+                {option.label}
+              </button>
+              {selected && <span className="h-[3px] bg-gray-800 w-11/12 self-center rounded-t-sm" />}
+            </div>
+          )}
+        </Tab>
+      ))}
+    </Tab.List>
+  </Tab.Group>
+);

package/lib/ui/Fields/Select/Select.d.ts

@@ -1,12 +0,0 @@
-export type SelectOptions = Record<string, SelectOption>;
-export type SelectOption = {
-    label: string;
-};
-export type SelectProps = {
-    name: string;
-    label?: string;
-    value?: string;
-    options: SelectOptions;
-    onChange?: (value: string) => void;
-};
-export declare const Select: ({ name, label, value, onChange, options }: SelectProps) => JSX.Element;

package/lib/ui/Fields/Select/Select.js

@@ -1,53 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Select = void 0;
-const react_1 = require("@headlessui/react");
-const react_2 = __importStar(require("react"));
-const clsx_1 = __importDefault(require("clsx"));
-const ExpandMoreRounded_1 = __importDefault(require("@mui/icons-material/ExpandMoreRounded"));
-const ExpandLessRounded_1 = __importDefault(require("@mui/icons-material/ExpandLessRounded"));
-const Select = ({ name, label, value, onChange, options }) => {
-    const [selectedOption, setSelectedOptions] = (0, react_2.useState)(value ? options[value] : null);
-    const handleChange = (value) => {
-        setSelectedOptions(options[value]);
-        onChange?.(value);
-    };
-    return (react_2.default.createElement(react_1.Listbox, { value: value, name: name, "aria-labelledby": name, onChange: handleChange }, ({ open }) => (react_2.default.createElement(react_2.default.Fragment, null,
-        label && react_2.default.createElement(react_1.Listbox.Label, { className: "squiz-fte-form-label" }, label),
-        react_2.default.createElement("div", { className: "relative text-md text-gray-800" },
-            react_2.default.createElement(react_1.Listbox.Button, { className: "w-full cursor-default rounded border-2 border-gray-300 bg-white py-2 pl-3 pr-10 focus:border-blue-300 focus:outline-none" },
-                react_2.default.createElement("span", { className: "flex items-center" },
-                    react_2.default.createElement("span", { className: "block truncate" },
-                        selectedOption?.label,
-                        "\u00A0")),
-                react_2.default.createElement("span", { className: "pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2" }, !open ? (react_2.default.createElement(ExpandMoreRounded_1.default, { className: "text-gray-500", "aria-hidden": "true" })) : (react_2.default.createElement(ExpandLessRounded_1.default, { className: "text-gray-500", "aria-hidden": "true" })))),
-            react_2.default.createElement(react_1.Listbox.Options, { className: "absolute z-10 mt-1 w-full overflow-auto rounded border-2 border-gray-300 bg-white" }, Object.entries(options).map(([key, option]) => (react_2.default.createElement(react_1.Listbox.Option, { key: key, value: key, className: ({ active }) => (0, clsx_1.default)(active ? 'bg-gray-100' : 'bg-white', 'relative cursor-default select-none flex hover:bg-gray-100 py-2 px-3') },
-                react_2.default.createElement("span", { className: "block truncate" }, option.label))))))))));
-};
-exports.Select = Select;