@squiz/formatted-text-editor 1.12.0-alpha.40 → 1.12.0-alpha.43

package/src/ui/Modal/Modal.spec.tsx

@@ -0,0 +1,75 @@
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import Modal from './Modal';
+
+describe('Modal', () => {
+  const mockOnCancel = jest.fn();
+  const mockOnSubmit = jest.fn();
+
+  const ModalComponent = () => {
+    return (
+      <Modal onCancel={mockOnCancel}>
+        <div>I am a child in the modal</div>
+      </Modal>
+    );
+  };
+
+  it('Renders the modal title', () => {
+    render(<ModalComponent />);
+    // Check that the modal heading displays
+    const modalHeading = screen.getByRole('heading', {
+      name: /Link/i,
+    });
+    expect(modalHeading).toBeInTheDocument();
+  });
+
+  it('Renders the child', () => {
+    render(<ModalComponent />);
+    // Check that the modal heading displays
+    const modalChild = screen.getByText(/I am a child in the modal/i);
+    expect(modalChild).toBeInTheDocument();
+  });
+
+  it('Renders the cancel button', () => {
+    render(<ModalComponent />);
+    // Check that the cancel button renders
+    const cancelButton = screen.getByRole('button', { name: 'Cancel' });
+    expect(cancelButton).toBeInTheDocument();
+    // check that firing the cancel button fires the cancel function
+    fireEvent.click(cancelButton);
+    expect(mockOnCancel).toHaveBeenCalled();
+  });
+
+  it('Does not render the submit button if there is no submit function supplied', () => {
+    render(<ModalComponent />);
+    // Check that the submit button does not render
+    const submitButton = screen.queryByRole('button', { name: 'Apply' });
+    expect(submitButton).not.toBeInTheDocument();
+  });
+
+  it('Renders the submit button if there is a submit function supplied', () => {
+    render(
+      <Modal onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
+        <div>I am a child in the modal</div>
+      </Modal>,
+    );
+    // Check that the submit button renders
+    const submitButton = screen.getByRole('button', { name: 'Apply' });
+    expect(submitButton).toBeInTheDocument();
+  });
+
+  it('Checks that the submit function fires if you click on the submit button', () => {
+    render(
+      <Modal onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
+        <div>I am a child in the modal</div>
+      </Modal>,
+    );
+    // Check that the submit button renders
+    const submitButton = screen.getByRole('button', { name: 'Apply' });
+    expect(submitButton).toBeInTheDocument();
+    // check that firing the submit button fires the submit function
+    fireEvent.click(submitButton);
+    expect(mockOnSubmit).toHaveBeenCalled();
+  });
+});

package/src/ui/Modal/Modal.tsx

@@ -0,0 +1,70 @@
+import React, { ReactElement, useEffect } from 'react';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+
+type ModalProps = {
+  children: ReactElement;
+  onCancel: () => void;
+  onSubmit?: () => void;
+  className?: string;
+};
+
+const Modal = ({ children, onCancel, onSubmit, className }: ModalProps): ReactElement => {
+  const keydown = (e: { key: string }) => {
+    if (e.key === 'Escape') {
+      onCancel();
+    }
+    if (e.key === 'Enter') {
+      onSubmit && onSubmit();
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('keydown', keydown);
+    return () => window.removeEventListener('keydown', keydown);
+  }, []);
+
+  return (
+    <>
+      <div className={`sds-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">
+              <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"
+                onClick={onCancel}
+                aria-label="Close"
+              >
+                <CloseRoundedIcon />
+              </button>
+            </div>
+            <div className="sds-modal-content">{children}</div>
+            <div className="sds-modal-footer p-6 pt-3">
+              <button
+                className="sds-modal-footer__button bg-gray-200 text-gray-700 mr-2 hover:bg-gray-300"
+                type="button"
+                onClick={onCancel}
+                aria-label="Cancel"
+              >
+                Cancel
+              </button>
+              {onSubmit && (
+                <button
+                  className="sds-modal-footer__button bg-blue-300 text-white hover:bg-blue-400"
+                  type="button"
+                  onClick={onSubmit}
+                  aria-label="Apply"
+                >
+                  Apply
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
+    </>
+  );
+};
+
+export default Modal;

package/src/ui/Modal/_modal.scss

@@ -0,0 +1,24 @@
+.sds-modal {
+  @apply border-0 rounded shadow-lg flex flex-col w-full bg-white font-base;
+  border-radius: 8px;
+
+  &-wrapper {
+    @apply justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none;
+  }
+
+  &-header {
+    @apply flex items-start justify-between;
+  }
+
+  &-content {
+    @apply relative px-6 flex-auto;
+  }
+
+  &-footer {
+    @apply flex items-center justify-end rounded-b;
+
+    &__button {
+      @apply sds-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={`btn toolbar-button ${isActive ? 'is-active' : ''}`}
+      className={`sds-btn toolbar-button ${isActive ? 'is-active' : ''}`}
     >
       {icon}
     </button>

package/src/ui/ToolbarButton/_toolbar-button.scss

@@ -1,28 +1,3 @@
-.btn {
-  @apply font-normal rounded;
-  display: flex;
-  align-items: center;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  background-image: none;
-  border: 1px solid transparent;
-
-  &:active,
-  &:hover,
-  &:focus {
-    background-color: rgba(black, 0.04);
-  }
-
-  &.disabled,
-  &[disabled] {
-    cursor: not-allowed;
-    @apply opacity-50;
-  }
-}
-
 .toolbar-button {
   @apply bg-white text-gray-600 p-1;
 
@@ -30,6 +5,11 @@
     margin-left: 2px;
   }
 
+  &:hover,
+  &:focus {
+    background-color: rgba(black, 0.04);
+  }
+
   &.is-active,
   &:active {
     @apply text-blue-300 bg-blue-100;

package/src/ui/_buttons.scss

@@ -0,0 +1,19 @@
+.sds-btn {
+  @apply font-normal rounded ease-linear transition-all duration-150;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border: 1px solid transparent;
+  padding: 6px 12px;
+
+  &.disabled,
+  &[disabled] {
+    cursor: not-allowed;
+    @apply opacity-50;
+  }
+}

package/src/ui/_forms.scss

@@ -0,0 +1,16 @@
+.sds {
+  &-form-group {
+    @apply flex flex-col;
+  }
+  &-form-label {
+    @apply mb-1 text-md font-semibold text-gray-600;
+  }
+  &-form-control {
+    padding: 6px 12px;
+    @apply placeholder-slate-300 text-gray-800 relative bg-white rounded text-md border-2 border-gray-300 outline-0 focus:outline-0 focus:border-blue-300 w-full;
+    &:focus,
+    &:active {
+      box-shadow: none;
+    }
+  }
+}

package/tailwind.config.cjs

@@ -21,6 +21,14 @@ module.exports = {
         lg: '1rem',
         md: '0.875rem',
         sm: '0.8125rem',
+        base: '1rem',
+        'heading-1': ['1.625rem', '2rem'],
+        'heading-2': ['1.25rem', '1.5rem'],
+        'heading-3': ['1.125rem', '1.375rem'],
+        'heading-4': ['1rem', '1.25rem'],
+      },
+      fontFamily: {
+        base: 'Open Sans, Arial, sans-serif',
       },
       boxShadow: {
         outline: '0 0 0 1px rgba(0,0,0,0.10)',
@@ -31,6 +39,12 @@ module.exports = {
         inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
         none: 'none',
       },
+      width: {
+        'modal-sm': '25rem',
+        'modal-md': '37.5rem',
+        'modal-lg': '50rem',
+        'modal-xl': '62.5rem',
+      },
       spacing: {
         1: '0.25rem', // 4px
         2: '0.5rem', // 8px
@@ -44,13 +58,22 @@ module.exports = {
       },
       colors: {
         gray: {
+          50: '#F7F7F7',
+          100: '#F5F5F5',
           200: '#ededed',
           300: '#e0e0e0',
+          400: '#BABABA',
+          500: '#949494',
           600: '#707070',
+          700: '#4F4F4F',
+          800: '#3D3D3D',
+          900: '#2B2B2B',
         },
         blue: {
           100: '#e6f1fa',
+          200: '#8FC0EB',
           300: '#0774d2',
+          400: '#044985',
         },
         orange: {
           100: '#dadbe9',