@squiz/formatted-text-editor 1.12.0-alpha.44 → 1.12.0-alpha.46

package/src/FormattedTextEditor.tsx

@@ -3,8 +3,10 @@ import Editor from './Editor/Editor';
 
 const FormattedTextEditor = () => {
   return (
-    <div className="remirror-theme formatted-text-editor editor-wrapper">
-      <Editor />
+    <div className="squiz-fte-scope">
+      <div className="remirror-theme formatted-text-editor editor-wrapper">
+        <Editor />
+      </div>
     </div>
   );
 };

package/src/index.scss

@@ -1,4 +1,4 @@
-/* Tailwind base */
+/* Tailwind base styles, but scoped to the editor */
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
@@ -13,6 +13,6 @@
 
 @import './ui/ToolbarButton/toolbar-button';
 @import './ui/ToolbarDropdown/toolbar-dropdown';
-@import './ui/DropdownButton/dropdown-button';
+@import './ui/ToolbarDropdownButton/toolbar-dropdown-button';
 
 @import './ui/Modal/modal';

package/src/ui/Inputs/Select/Select.tsx

@@ -20,7 +20,7 @@ export const Select = ({ id, label, value, options }: SelectProps) => {
   return (
     <>
       {label && (
-        <label htmlFor={id} className="sds-form-label">
+        <label htmlFor={id} className="squiz-fte-form-label">
           {label}
         </label>
       )}

package/src/ui/Inputs/Text/TextInput.tsx

@@ -10,11 +10,11 @@ export const TextInput = ({ id, label, value, ...rest }: TextInputProps) => {
   return (
     <>
       {label && (
-        <label htmlFor={id} className="sds-form-label">
+        <label htmlFor={id} className="squiz-fte-form-label">
           {label}
         </label>
       )}
-      <input name={id} id={id} type="text" className="sds-form-control" defaultValue={value} {...rest} />
+      <input name={id} id={id} type="text" className="squiz-fte-form-control" defaultValue={value} {...rest} />
     </>
   );
 };

package/src/ui/Modal/Modal.tsx

@@ -25,10 +25,10 @@ const Modal = ({ children, onCancel, onSubmit, className }: ModalProps): ReactEl
 
   return (
     <>
-      <div className={`sds-modal-wrapper ${className ? className : ''}`}>
+      <div className={`squiz-fte-modal-wrapper ${className ? className : ''}`}>
         <div className="w-modal-sm my-6 mx-auto">
-          <div className="sds-modal">
-            <div className="sds-modal-header p-6 pb-2">
+          <div className="squiz-fte-modal">
+            <div className="squiz-fte-modal-header p-6 pb-2">
               <h2 className="font-semibold text-gray-900 text-heading-2">Link</h2>
               <button
                 className="ml-auto -mr-3 -mt-3 bg-transparent border-0 text-gray-600 font-semibold outline-none focus:outline-none hover:text-color-gray-800"
@@ -38,10 +38,10 @@ const Modal = ({ children, onCancel, onSubmit, className }: ModalProps): ReactEl
                 <CloseRoundedIcon />
               </button>
             </div>
-            <div className="sds-modal-content">{children}</div>
-            <div className="sds-modal-footer p-6 pt-3">
+            <div className="squiz-fte-modal-content">{children}</div>
+            <div className="squiz-fte-modal-footer p-6 pt-3">
               <button
-                className="sds-modal-footer__button bg-gray-200 text-gray-700 mr-2 hover:bg-gray-300"
+                className="squiz-fte-modal-footer__button bg-gray-200 text-gray-700 mr-2 hover:bg-gray-300"
                 type="button"
                 onClick={onCancel}
                 aria-label="Cancel"
@@ -50,7 +50,7 @@ const Modal = ({ children, onCancel, onSubmit, className }: ModalProps): ReactEl
               </button>
               {onSubmit && (
                 <button
-                  className="sds-modal-footer__button bg-blue-300 text-white hover:bg-blue-400"
+                  className="squiz-fte-modal-footer__button bg-blue-300 text-white hover:bg-blue-400"
                   type="button"
                   onClick={onSubmit}
                   aria-label="Apply"

package/src/ui/Modal/_modal.scss

@@ -1,4 +1,4 @@
-.sds-modal {
+.squiz-fte-modal {
   @apply border-0 rounded shadow-lg flex flex-col w-full bg-white font-base;
   border-radius: 8px;
 
@@ -18,7 +18,7 @@
     @apply flex items-center justify-end rounded-b;
 
     &__button {
-      @apply sds-btn text-md font-bold;
+      @apply squiz-fte-btn text-md font-bold;
     }
   }
 }

package/src/ui/ToolbarButton/ToolbarButton.tsx

@@ -16,7 +16,7 @@ const ToolbarButton = ({ handleOnClick, isDisabled, isActive, icon, label }: Too
       type="button"
       onClick={handleOnClick}
       disabled={isDisabled}
-      className={`sds-btn toolbar-button ${isActive ? 'is-active' : ''}`}
+      className={`squiz-fte-btn toolbar-button ${isActive ? 'is-active' : ''}`}
     >
       {icon}
     </button>

package/src/ui/ToolbarDropdown/ToolbarDropdown.spec.tsx

@@ -0,0 +1,78 @@
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import ToolbarDropdown from './ToolbarDropdown';
+
+describe('Toolbar dropdown', () => {
+  const ToolbarDropdownComponent = () => {
+    return (
+      <ToolbarDropdown label="Test dropdown">
+        <button>Test button</button>
+        <button>Test button 2</button>
+      </ToolbarDropdown>
+    );
+  };
+
+  it('Renders the dropdown button', () => {
+    render(<ToolbarDropdownComponent />);
+    // Check that the supplied label renders
+    const dropdownButton = screen.getByRole('button', { name: 'Test dropdown' });
+    expect(dropdownButton).toBeInTheDocument();
+  });
+
+  it('Renders the child elements for the dropdown', () => {
+    render(<ToolbarDropdownComponent />);
+    // Check that default value supplied renders
+    expect(screen.getByRole('button', { name: 'Test button' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Test button 2' })).toBeInTheDocument();
+  });
+
+  it('Renders the dropdown menu after clicking the dropdown button', () => {
+    const { baseElement } = render(<ToolbarDropdownComponent />);
+    expect(baseElement).toBeTruthy();
+
+    const dropdownButton = baseElement.querySelector('button#dropdownHoverButton') as HTMLButtonElement;
+    expect(dropdownButton).toBeTruthy();
+    fireEvent.click(dropdownButton);
+
+    const dropdownMenu = baseElement.querySelector('div.toolbar-dropdown__menu') as HTMLDivElement;
+    expect(dropdownMenu).toBeTruthy();
+    expect(dropdownMenu.classList).toContain('block');
+  });
+
+  it('Handles the onBlur call when focusing out of the menu', () => {
+    const { baseElement } = render(<ToolbarDropdownComponent />);
+    expect(baseElement).toBeTruthy();
+
+    const dropdownButton = baseElement.querySelector('button#dropdownHoverButton') as HTMLButtonElement;
+    expect(dropdownButton).toBeTruthy();
+    fireEvent.click(dropdownButton);
+
+    const dropdownMenu = baseElement.querySelector('div.toolbar-dropdown__menu') as HTMLDivElement;
+    expect(dropdownMenu).toBeTruthy();
+    expect(dropdownMenu.classList).toContain('block');
+
+    fireEvent.blur(dropdownMenu);
+
+    expect(dropdownMenu.classList).toContain('hidden');
+  });
+
+  it('Closes the dropdown menu after clicking a child element', () => {
+    const { baseElement } = render(<ToolbarDropdownComponent />);
+    expect(baseElement).toBeTruthy();
+
+    const dropdownButton = baseElement.querySelector('button#dropdownHoverButton') as HTMLButtonElement;
+    expect(dropdownButton).toBeTruthy();
+    fireEvent.click(dropdownButton);
+
+    const dropdownMenu = baseElement.querySelector('div.toolbar-dropdown__menu') as HTMLDivElement;
+    expect(dropdownMenu).toBeTruthy();
+    expect(dropdownMenu.classList).toContain('block');
+
+    const childElement = screen.getByRole('button', { name: 'Test button' });
+    expect(childElement).toBeTruthy();
+    fireEvent.click(childElement);
+
+    expect(dropdownMenu.classList).toContain('hidden');
+  });
+});

package/src/ui/ToolbarDropdown/ToolbarDropdown.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { FocusEventHandler, useState } from 'react';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import 'flowbite';
 
 type ToolbarDropdownProps = {
   children: JSX.Element | JSX.Element[];
@@ -8,24 +7,35 @@ type ToolbarDropdownProps = {
 };
 
 const ToolbarDropdown = ({ children, label }: ToolbarDropdownProps) => {
+  const [isOpen, setOpen] = useState<boolean>(false);
+
+  const handleDropDown = () => {
+    setOpen(!isOpen);
+  };
+
+  const handleBlur: FocusEventHandler<HTMLDivElement> = (event) => {
+    if (event.relatedTarget?.id !== 'dropdownMenuButton' && !event.target?.className.includes('is-active')) {
+      isOpen && handleDropDown();
+    }
+  };
+
   return (
-    <>
-      <button
-        id="dropdownHoverButton"
-        data-dropdown-toggle="dropdown"
-        className="toolbar-dropdown__button"
-        type="button"
-      >
+    <div className="toolbar-dropdown" onBlur={handleBlur}>
+      <button id="dropdownHoverButton" className="toolbar-dropdown__button" onClick={handleDropDown}>
         <span className="toolbar-dropdown__label">{label}</span>
         <ExpandMoreIcon className="toolbar-dropdown__icon" aria-hidden="true" />
       </button>
+
       <div
         id="dropdown"
-        className="toolbar-dropdown__menu z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-169 dark:bg-gray-700"
+        className={`toolbar-dropdown__menu z-10 ${isOpen ? 'block' : 'hidden'} bg-white divide-y w-169`}
       >
-        <ul aria-labelledby="dropdownHoverButton">{children}</ul>
+        {/* eslint-disable-next-line */}
+        <ul aria-labelledby="dropdownHoverButton" onClick={handleDropDown}>
+          {children}
+        </ul>
       </div>
-    </>
+    </div>
   );
 };
 

package/src/ui/ToolbarDropdown/_toolbar-dropdown.scss

@@ -1,27 +1,32 @@
-.toolbar-dropdown__button {
-  @apply font-base text-md font-semibold text-gray-600;
-  align-self: center;
+.toolbar-dropdown {
+  &__button {
+    @apply flex items-center font-base text-md font-semibold text-gray-600;
+    align-self: center;
 
-  height: 2rem;
-  padding-left: 0.5rem;
+    height: 2rem;
+    padding-left: 0.5rem;
 
-  &:active,
-  &:hover,
-  &:focus {
-    background-color: rgba(black, 0.04);
-  }
+    &:active,
+    &:hover,
+    &:focus {
+      background-color: rgba(black, 0.04);
+    }
 
-  .toolbar-dropdown__label {
-    display: inline-flex;
-    width: 7rem;
-  }
+    .toolbar-dropdown__label {
+      display: inline-flex;
+      width: 7rem;
+    }
 
-  .toolbar-dropdown__icon {
-    width: 1rem;
-    height: 1.5rem;
+    .toolbar-dropdown__icon {
+      width: 1rem;
+      height: 1.5rem;
+    }
   }
-}
 
-.toolbar-dropdown__menu {
-  inset: 0rem auto auto 1rem !important;
+  &__menu {
+    @apply rounded shadow-sm border border-gray-300;
+
+    position: absolute;
+    margin-top: 0.75rem;
+  }
 }

package/src/ui/ToolbarDropdownButton/ToolbarDropdownButton.spec.tsx

@@ -0,0 +1,48 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import React from 'react';
+import ToolbarDropdownButton from './ToolbarDropdownButton';
+
+describe('Toolbar dropdown', () => {
+  const handleSelect = jest.fn();
+
+  const ToolbarDropdownButtonComponent = () => {
+    return (
+      <ToolbarDropdownButton handleOnClick={handleSelect} isDisabled={false} isActive={true} label={'Test label'}>
+        <h1>Test heading 1</h1>
+      </ToolbarDropdownButton>
+    );
+  };
+
+  const EmptyToolbarDropdownButtonComponent = () => {
+    return (
+      <ToolbarDropdownButton handleOnClick={handleSelect} isDisabled={false} isActive={false} label={'Test label'} />
+    );
+  };
+
+  it('Renders the dropdown menu button', () => {
+    const { baseElement } = render(<ToolbarDropdownButtonComponent />);
+    expect(baseElement).toBeTruthy();
+
+    const buttonElement = baseElement.querySelector('button#dropdownMenuButton') as HTMLButtonElement;
+    expect(buttonElement).toBeTruthy();
+    expect(buttonElement.textContent).toBe('Test heading 1');
+  });
+
+  it('Renders the dropdown menu button active icon', () => {
+    const { baseElement } = render(<ToolbarDropdownButtonComponent />);
+    expect(baseElement).toBeTruthy();
+
+    const iconElement = baseElement.querySelector('svg.dropdown-button-icon') as SVGElement;
+    expect(iconElement).toBeTruthy();
+  });
+
+  it('Should render the label as button text if no children are provided', () => {
+    const { baseElement } = render(<EmptyToolbarDropdownButtonComponent />);
+    expect(baseElement).toBeTruthy();
+
+    const buttonElement = baseElement.querySelector('button#dropdownMenuButton') as HTMLButtonElement;
+    expect(buttonElement).toBeTruthy();
+    expect(buttonElement.textContent).toBe('Test label');
+  });
+});

package/src/ui/{DropdownButton/DropdownButton.tsx → ToolbarDropdownButton/ToolbarDropdownButton.tsx}

@@ -13,6 +13,7 @@ const DropdownButton = ({ children, handleOnClick, isDisabled, isActive, label }
   return (
     <button
       aria-label={label}
+      id="dropdownMenuButton"
       title={label}
       type="button"
       onClick={handleOnClick}

package/src/ui/{DropdownButton/_dropdown-button.scss → ToolbarDropdownButton/_toolbar-dropdown-button.scss}

@@ -1,8 +1,14 @@
 .dropdown-button {
+  @apply px-2 py-1 text-gray-600;
+
   height: 40px;
   width: 100%;
   justify-content: space-between;
   align-items: center;
   display: flex;
-  @apply px-2 py-1 text-gray-600;
+
+  &:hover,
+  &:focus {
+    background-color: rgba(black, 0.04);
+  }
 }

package/src/ui/_buttons.scss

@@ -1,4 +1,4 @@
-.sds-btn {
+.squiz-fte-btn {
   @apply font-normal rounded ease-linear transition-all duration-150;
   display: flex;
   align-items: center;

package/src/ui/_forms.scss

@@ -1,4 +1,4 @@
-.sds {
+.squiz-fte {
   &-form-group {
     @apply flex flex-col;
   }

package/tailwind.config.cjs

@@ -75,11 +75,9 @@ module.exports = {
           300: '#0774d2',
           400: '#044985',
         },
-        orange: {
-          100: '#dadbe9',
-        },
       },
     },
   },
-  plugins: [require('flowbite/plugin')],
+  plugins: [],
+  important: true,
 };