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

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

@@ -0,0 +1,12 @@
+type SelectProps = {
+    id: string;
+    label?: string;
+    value: any;
+    options: {
+        id: number;
+        name: string;
+        key: string;
+    }[];
+};
+export declare const Select: ({ id, label, value, options }: SelectProps) => JSX.Element;
+export {};

package/lib/ui/Inputs/Select/Select.js

@@ -0,0 +1,19 @@
+import { Listbox } from '@headlessui/react';
+import React, { useState } from 'react';
+import ExpandMoreRoundedIcon from '@mui/icons-material/ExpandMoreRounded';
+import ExpandLessRoundedIcon from '@mui/icons-material/ExpandLessRounded';
+import clsx from 'clsx';
+export const Select = ({ id, label, value, options }) => {
+    const [selectedOption, setSelectedOption] = useState(value);
+    return (React.createElement(React.Fragment, null,
+        label && (React.createElement("label", { htmlFor: id, className: "sds-form-label" }, label)),
+        React.createElement("div", { className: "relative text-md text-gray-800" },
+            React.createElement(Listbox, { value: selectedOption, onChange: setSelectedOption, name: id, "aria-labelledby": id }, ({ open }) => (React.createElement(React.Fragment, null,
+                React.createElement(Listbox.Label, { className: "sr-only" }, label),
+                React.createElement(Listbox.Button, { className: "relative 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.createElement("span", { className: "flex items-center" },
+                        React.createElement("span", { className: "block truncate" }, selectedOption.name)),
+                    React.createElement("span", { className: "pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2" }, !open ? (React.createElement(ExpandMoreRoundedIcon, { className: "text-gray-500", "aria-hidden": "true" })) : (React.createElement(ExpandLessRoundedIcon, { className: "text-gray-500", "aria-hidden": "true" })))),
+                React.createElement(Listbox.Options, { className: "absolute z-10 mt-1 w-full overflow-auto rounded border-2 border-gray-300 bg-white" }, options.map((option) => (React.createElement(Listbox.Option, { key: option.id, className: ({ active }) => clsx(active ? 'bg-gray-100' : 'bg-white', 'relative cursor-default select-none flex hover:bg-gray-100 py-2 px-3'), value: option },
+                    React.createElement("span", { className: "block truncate" }, option.name)))))))))));
+};

package/lib/ui/Inputs/Text/TextInput.d.ts

@@ -0,0 +1,8 @@
+type TextInputProps = {
+    id: string;
+    label?: string;
+    value: string;
+    onChange: any;
+};
+export declare const TextInput: ({ id, label, value, ...rest }: TextInputProps) => JSX.Element;
+export {};

package/lib/ui/Inputs/Text/TextInput.js

@@ -0,0 +1,6 @@
+import React from 'react';
+export const TextInput = ({ id, label, value, ...rest }) => {
+    return (React.createElement(React.Fragment, null,
+        label && (React.createElement("label", { htmlFor: id, className: "sds-form-label" }, label)),
+        React.createElement("input", { name: id, id: id, type: "text", className: "sds-form-control", defaultValue: value, ...rest })));
+};

package/lib/ui/Modal/Modal.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+type ModalProps = {
+    children: ReactElement;
+    onCancel: () => void;
+    onSubmit?: () => void;
+    className?: string;
+};
+declare const Modal: ({ children, onCancel, onSubmit, className }: ModalProps) => ReactElement;
+export default Modal;

package/lib/ui/Modal/Modal.js

@@ -0,0 +1,30 @@
+import React, { useEffect } from 'react';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+const Modal = ({ children, onCancel, onSubmit, className }) => {
+    const keydown = (e) => {
+        if (e.key === 'Escape') {
+            onCancel();
+        }
+        if (e.key === 'Enter') {
+            onSubmit && onSubmit();
+        }
+    };
+    useEffect(() => {
+        window.addEventListener('keydown', keydown);
+        return () => window.removeEventListener('keydown', keydown);
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: `sds-modal-wrapper ${className ? className : ''}` },
+            React.createElement("div", { className: "w-modal-sm my-6 mx-auto" },
+                React.createElement("div", { className: "sds-modal" },
+                    React.createElement("div", { className: "sds-modal-header p-6 pb-2" },
+                        React.createElement("h2", { className: "font-semibold text-gray-900 text-heading-2" }, "Link"),
+                        React.createElement("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" },
+                            React.createElement(CloseRoundedIcon, null))),
+                    React.createElement("div", { className: "sds-modal-content" }, children),
+                    React.createElement("div", { className: "sds-modal-footer p-6 pt-3" },
+                        React.createElement("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"),
+                        onSubmit && (React.createElement("button", { className: "sds-modal-footer__button bg-blue-300 text-white hover:bg-blue-400", type: "button", onClick: onSubmit, "aria-label": "Apply" }, "Apply")))))),
+        React.createElement("div", { className: "opacity-25 fixed inset-0 z-40 bg-black" })));
+};
+export default Modal;

package/lib/ui/ToolbarButton/ToolbarButton.js

@@ -1,5 +1,5 @@
 import React from 'react';
 const ToolbarButton = ({ handleOnClick, isDisabled, isActive, icon, label }) => {
-    return (React.createElement("button", { "aria-label": label, title: label, type: "button", onClick: handleOnClick, disabled: isDisabled, className: `btn toolbar-button ${isActive ? 'is-active' : ''}` }, icon));
+    return (React.createElement("button", { "aria-label": label, title: label, type: "button", onClick: handleOnClick, disabled: isDisabled, className: `sds-btn toolbar-button ${isActive ? 'is-active' : ''}` }, icon));
 };
 export default ToolbarButton;

package/package.json

@@ -1,29 +1,32 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.12.0-alpha.40",
+  "version": "1.12.0-alpha.42",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
-    "dev": "vite",
+    "build": "vite build",
     "clean": "rimraf ./lib",
     "compile": "npm run clean && npm run compile:styles && npm run compile:code",
     "compile:code": "tsc",
     "compile:styles": "node build.js",
+    "dev": "vite",
     "preview": "vite preview",
-    "build": "vite build",
     "test": "jest",
-    "test:watch": "jest --watch",
-    "test:e2e": "vite build && vite preview --port 8080 & cypress open"
+    "test:e2e": "vite build && vite preview --port 8080 & cypress open",
+    "test:watch": "jest --watch"
   },
   "dependencies": {
+    "@headlessui/react": "1.7.11",
     "@mui/icons-material": "5.11.0",
     "@remirror/react": "2.0.25",
+    "clsx": "^1.2.1",
     "flowbite": "^1.6.3"
   },
   "devDependencies": {
     "@testing-library/cypress": "9.0.0",
     "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "12.1.5",
+    "@testing-library/react": "14.0.0",
+    "@testing-library/user-event": "14.4.3",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",
     "@vitejs/plugin-react": "3.0.0",
@@ -61,5 +64,5 @@
   "volta": {
     "node": "16.19.0"
   },
-  "gitHead": "8db852ade2813dc297b7d0fa4975e0c5a57ac83e"
+  "gitHead": "e6a1ba4e3c9f944bd0006ed59673996dc5dccbfa"
 }

package/src/Editor/_editor.scss

@@ -10,11 +10,12 @@
   }
 
   .remirror-editor {
-    @apply bg-white shadow-none rounded-b;
+    @apply bg-white shadow-none rounded-b p-3;
+    min-height: 6rem;
 
     &:active,
-    :focus {
-      /* some focus state */
+    &:focus {
+      @apply outline-0;
     }
 
     p {
@@ -22,16 +23,22 @@
       @apply block;
     }
   }
-}
 
-/* remove existing style */
-.remirror-theme .ProseMirror {
-  &:active,
-  &:focus {
-    @apply shadow-none;
+  .remirror-is-empty:first-of-type::before {
+    position: absolute;
+    pointer-events: none;
+    height: 0;
+    font-style: italic;
+    content: attr(data-placeholder);
+    @apply text-gray-500;
   }
 }
 
+a {
+  @apply text-blue-300;
+  text-decoration: underline;
+}
+
 .remirror-theme h1 {
   font-size: 1.625rem;
   font-weight: 600;

package/src/EditorToolbar/EditorToolbar.tsx

@@ -8,6 +8,7 @@ import TextAlignButtons from './Tools/TextAlign/TextAlignButtons';
 import UndoButton from './Tools/Undo/UndoButton';
 import RedoButton from './Tools/Redo/RedoButton';
 import TextTypeDropdown from './Tools/TextType/TextTypeDropdown';
+import TriggerLinkModal from './Tools/Link/Trigger/TriggerLinkModal';
 
 type EditorToolbarProps = {
   manager: RemirrorManager<any>;
@@ -38,6 +39,7 @@ export const EditorToolbar = ({ manager, isPopover }: EditorToolbarProps) => {
           {extensionNames.italic && <ItalicButton />}
           {extensionNames.underline && <UnderlineButton />}
           {extensionNames.nodeFormatting && <TextAlignButtons />}
+          <TriggerLinkModal />
         </Toolbar>
       ) : (
         <FloatingToolbar className="remirror-floating-popover">

package/src/EditorToolbar/Tools/Bold/BoldButton.spec.tsx

@@ -11,7 +11,7 @@ describe('Bold button', () => {
 
   it('Activates the button if clicked', () => {
     render(<Editor />);
-    expect(screen.getByRole('button', { name: 'Bold (cmd+B)' }).classList.contains('btn')).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Bold (cmd+B)' }).classList.contains('sds-btn')).toBeTruthy();
     const bold = screen.getByRole('button', { name: 'Bold (cmd+B)' });
     fireEvent.click(bold);
     expect(bold.classList.contains('is-active')).toBeTruthy();

package/src/EditorToolbar/Tools/Italic/ItalicButton.spec.tsx

@@ -11,7 +11,7 @@ describe('Italic button', () => {
 
   it('Activates the button if clicked', () => {
     render(<Editor />);
-    expect(screen.getByRole('button', { name: 'Italic (cmd+I)' }).classList.contains('btn')).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Italic (cmd+I)' }).classList.contains('sds-btn')).toBeTruthy();
     const italic = screen.getByRole('button', { name: 'Italic (cmd+I)' });
     fireEvent.click(italic);
     expect(italic.classList.contains('is-active')).toBeTruthy();

package/src/EditorToolbar/Tools/Link/Form/LinkForm.spec.tsx

@@ -0,0 +1,21 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import LinkForm from './LinkForm';
+
+describe('Link Form', () => {
+  it('Renders the form with the relevant fields', () => {
+    render(<LinkForm />);
+    expect(screen.getByLabelText('URL')).toBeInTheDocument();
+    expect(screen.getByLabelText('Text')).toBeInTheDocument();
+    expect(screen.getByLabelText('Title')).toBeInTheDocument();
+    expect(screen.getByLabelText('Target')).toBeInTheDocument();
+  });
+
+  it('Renders the form with the specified class', () => {
+    render(<LinkForm />);
+
+    const formClass = document.querySelector('.sds-form');
+    expect(formClass).toBeInTheDocument();
+  });
+});

package/src/EditorToolbar/Tools/Link/Form/LinkForm.tsx

@@ -0,0 +1,41 @@
+import React, { ReactElement, useState } from 'react';
+import { TextInput } from '../../../../ui/Inputs/Text/TextInput';
+import { Select } from '../../../../ui/Inputs/Select/Select';
+
+const selectOptions = [
+  { id: 1, name: 'Current window', key: '_blank' },
+  { id: 2, name: 'New window', key: '_parent' },
+];
+
+const LinkForm = (): ReactElement => {
+  const [formValues, setFormValues] = useState({
+    href: '',
+    target: selectOptions[0],
+    title: '',
+    text: '',
+  });
+
+  const handleChange = (event: { target: { name: string; value: string } }) => {
+    const { name, value } = event.target;
+    setFormValues({ ...formValues, [name]: value });
+  };
+
+  return (
+    <form action="" method="post" className="sds-form">
+      <div className="sds-form-group mb-2">
+        <TextInput id="href" label="URL" value={formValues.href} onChange={handleChange} />
+      </div>
+      <div className="sds-form-group mb-2">
+        <TextInput id="text" label="Text" value={formValues.text} onChange={handleChange} />
+      </div>
+      <div className="sds-form-group mb-2">
+        <TextInput id="title" label="Title" value={formValues.title} onChange={handleChange} />
+      </div>
+      <div className="sds-form-group mb-0">
+        <Select id="target" label="Target" value={formValues.target} options={selectOptions} />
+      </div>
+    </form>
+  );
+};
+
+export default LinkForm;

package/src/EditorToolbar/Tools/Link/LinkButton.spec.tsx

@@ -0,0 +1,26 @@
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import LinkButton from './LinkButton';
+
+describe('Link button', () => {
+  const mockOnClick = jest.fn();
+
+  it('Renders the link button', () => {
+    render(<LinkButton showModal={false} onClick={mockOnClick} enabled />);
+    expect(screen.getByRole('button', { name: 'Link' })).toBeInTheDocument();
+  });
+
+  it('Renders a disabled button if this is what you have set', () => {
+    render(<LinkButton showModal={false} onClick={mockOnClick} enabled={false} />);
+    expect(screen.getByRole('button', { name: 'Link' })).toBeDisabled();
+  });
+
+  it('Calls the modalFire function if you click it', () => {
+    render(<LinkButton showModal={false} onClick={mockOnClick} enabled />);
+    const linkButton = screen.getByRole('button', { name: 'Link' });
+    expect(linkButton).not.toBeDisabled();
+    fireEvent.click(linkButton);
+    expect(mockOnClick).toHaveBeenCalled();
+  });
+});

package/src/EditorToolbar/Tools/Link/LinkButton.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import InsertLinkRoundedIcon from '@mui/icons-material/InsertLinkRounded';
+
+type LinkButtonProps = {
+  onClick: () => void;
+  enabled: boolean;
+  showModal: boolean;
+};
+
+const LinkButton = ({ onClick, showModal, enabled }: LinkButtonProps) => {
+  const active = showModal;
+
+  return (
+    <ToolbarButton
+      handleOnClick={onClick}
+      isDisabled={!enabled}
+      isActive={active}
+      icon={<InsertLinkRoundedIcon />}
+      label={`Link`}
+    />
+  );
+};
+
+export default LinkButton;

package/src/EditorToolbar/Tools/Link/Trigger/TriggerLinkModal.spec.tsx

@@ -0,0 +1,41 @@
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import TriggerLinkModal from './TriggerLinkModal';
+
+describe('TriggerLinkModal', () => {
+  it('Renders the trigger button', () => {
+    render(<TriggerLinkModal />);
+    expect(screen.getByRole('button', { name: 'Link' })).toBeInTheDocument();
+  });
+
+  it('Displays the modal when clicking on the trigger button', () => {
+    render(<TriggerLinkModal />);
+
+    // Open the modal
+    const triggerButton = screen.getByRole('button', { name: 'Link' });
+    fireEvent.click(triggerButton);
+
+    const modalHeading = screen.getByRole('heading', {
+      name: /Link/i,
+    });
+    expect(modalHeading).toBeInTheDocument();
+  });
+
+  it('Closes the modal when clicking on the cancel button', () => {
+    render(<TriggerLinkModal />);
+    // Open the modal
+    const triggerButton = screen.getByRole('button', { name: 'Link' });
+    fireEvent.click(triggerButton);
+    const modalHeading = screen.getByRole('heading', {
+      name: /Link/i,
+    });
+    expect(modalHeading).toBeInTheDocument();
+    // 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(modalHeading).not.toBeInTheDocument();
+  });
+});

package/src/EditorToolbar/Tools/Link/Trigger/TriggerLinkModal.tsx

@@ -0,0 +1,21 @@
+import React, { ReactElement, useState } from 'react';
+import LinkButton from '../LinkButton';
+import Modal from '../../../../ui/Modal/Modal';
+import LinkForm from '../Form/LinkForm';
+
+const TriggerLinkModal = (): ReactElement => {
+  const [showModal, setShowModal] = useState(false);
+
+  return (
+    <>
+      <LinkButton showModal={showModal} onClick={() => setShowModal(true)} enabled />
+      {showModal ? (
+        <Modal onCancel={() => setShowModal(false)} onSubmit={() => console.log('Sumbmit form')}>
+          <LinkForm />
+        </Modal>
+      ) : null}
+    </>
+  );
+};
+
+export default TriggerLinkModal;

package/src/EditorToolbar/Tools/Underline/Underline.spec.tsx

@@ -11,7 +11,7 @@ describe('Underline button', () => {
 
   it('Activates the button if clicked', () => {
     render(<Editor />);
-    expect(screen.getByRole('button', { name: 'Underline (cmd+U)' }).classList.contains('btn')).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Underline (cmd+U)' }).classList.contains('sds-btn')).toBeTruthy();
     const underline = screen.getByRole('button', { name: 'Underline (cmd+U)' });
     fireEvent.click(underline);
     expect(underline.classList.contains('is-active')).toBeTruthy();

package/src/EditorToolbar/_editor-toolbar.scss

@@ -1,5 +1,5 @@
 .formatted-text-editor .editor-toolbar {
-  @apply bg-white rounded border-gray-200 border-2 border-solid p-1;
+  @apply bg-white border-gray-200 border-b-2 border-solid p-1;
 
   display: flex;
   justify-items: center;

package/src/index.scss

@@ -3,8 +3,9 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
-/* Remirror base */
-@import 'remirror/styles/all.css';
+/* Global */
+@import './ui/forms';
+@import './ui/buttons';
 
 /* Components */
 @import './Editor/editor';
@@ -13,3 +14,5 @@
 @import './ui/ToolbarButton/toolbar-button';
 @import './ui/ToolbarDropdown/toolbar-dropdown';
 @import './ui/DropdownButton/dropdown-button';
+
+@import './ui/Modal/modal';

package/src/ui/DropdownButton/_dropdown-button.scss

@@ -1,7 +1,8 @@
 .dropdown-button {
-  padding: 4px 8px;
-  color: #707070;
   height: 40px;
   width: 100%;
   justify-content: space-between;
+  align-items: center;
+  display: flex;
+  @apply px-2 py-1 text-gray-600;
 }

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

@@ -0,0 +1,24 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { Select } from './Select';
+
+describe('Select field', () => {
+  const selectOptions = [
+    { id: 1, name: 'Chicken', key: 'chicken' },
+    { id: 2, name: 'Egg', key: 'egg' },
+  ];
+
+  it('Renders the label', () => {
+    render(<Select id="select-field" label="Which came first?" value="Chicken" options={selectOptions} />);
+    // Check that the supplied label renders
+    const inputLabel = screen.getByLabelText('Which came first?');
+    expect(inputLabel).toBeInTheDocument();
+  });
+
+  it('Renders the default value', () => {
+    render(<Select id="select-field" label="Which came first?" value="Chicken" options={selectOptions} />);
+    // Check that default value supplied renders
+    expect(screen.getByDisplayValue('Chicken')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,67 @@
+import { Listbox } from '@headlessui/react';
+import React, { useState } from 'react';
+import ExpandMoreRoundedIcon from '@mui/icons-material/ExpandMoreRounded';
+import ExpandLessRoundedIcon from '@mui/icons-material/ExpandLessRounded';
+import clsx from 'clsx';
+type SelectProps = {
+  id: string;
+  label?: string;
+  value: any;
+  options: {
+    id: number;
+    name: string;
+    key: string;
+  }[];
+};
+
+export const Select = ({ id, label, value, options }: SelectProps) => {
+  const [selectedOption, setSelectedOption] = useState(value);
+
+  return (
+    <>
+      {label && (
+        <label htmlFor={id} className="sds-form-label">
+          {label}
+        </label>
+      )}
+      <div className="relative text-md text-gray-800">
+        <Listbox value={selectedOption} onChange={setSelectedOption} name={id} aria-labelledby={id}>
+          {({ open }) => (
+            <>
+              <Listbox.Label className="sr-only">{label}</Listbox.Label>
+              <Listbox.Button className="relative 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">
+                <span className="flex items-center">
+                  <span className="block truncate">{selectedOption.name}</span>
+                </span>
+                <span className="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2">
+                  {!open ? (
+                    <ExpandMoreRoundedIcon className="text-gray-500" aria-hidden="true" />
+                  ) : (
+                    <ExpandLessRoundedIcon className="text-gray-500" aria-hidden="true" />
+                  )}
+                </span>
+              </Listbox.Button>
+
+              <Listbox.Options className="absolute z-10 mt-1 w-full overflow-auto rounded border-2 border-gray-300 bg-white">
+                {options.map((option) => (
+                  <Listbox.Option
+                    key={option.id}
+                    className={({ active }) =>
+                      clsx(
+                        active ? 'bg-gray-100' : 'bg-white',
+                        'relative cursor-default select-none flex hover:bg-gray-100 py-2 px-3',
+                      )
+                    }
+                    value={option}
+                  >
+                    <span className="block truncate">{option.name}</span>
+                  </Listbox.Option>
+                ))}
+              </Listbox.Options>
+            </>
+          )}
+        </Listbox>
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,43 @@
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { TextInput } from './TextInput';
+
+describe('Text input', () => {
+  const mockOnChange = jest.fn();
+
+  const TextInputComponent = () => {
+    return <TextInput id="text-input" value="Water" label="Text input" onChange={mockOnChange} />;
+  };
+
+  it('Renders the label', () => {
+    render(<TextInputComponent />);
+    // Check that the supplied label renders
+    const inputLabel = screen.getByLabelText('Text input');
+    expect(inputLabel).toBeInTheDocument();
+  });
+
+  it('Renders the default value', () => {
+    render(<TextInputComponent />);
+    // Check that default value supplied renders
+    expect(screen.getByDisplayValue('Water')).toBeInTheDocument();
+  });
+
+  it('Changes the value when new value entered', () => {
+    render(<TextInputComponent />);
+    const input = screen.getByLabelText('Text input') as HTMLInputElement;
+    // Check that default value supplied renders
+    expect(input.value).toBe('Water');
+    fireEvent.change(input, { target: { value: 'Wine' } });
+    expect(input.value).toBe('Wine');
+  });
+
+  it('Fires the change function when new value entered', () => {
+    render(<TextInputComponent />);
+    const input = screen.getByLabelText('Text input') as HTMLInputElement;
+    // Check that default value supplied renders
+    expect(input.value).toBe('Water');
+    fireEvent.change(input, { target: { value: 'Wine' } });
+    expect(mockOnChange).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,20 @@
+import React from 'react';
+
+type TextInputProps = {
+  id: string;
+  label?: string;
+  value: string;
+  onChange: any;
+};
+export const TextInput = ({ id, label, value, ...rest }: TextInputProps) => {
+  return (
+    <>
+      {label && (
+        <label htmlFor={id} className="sds-form-label">
+          {label}
+        </label>
+      )}
+      <input name={id} id={id} type="text" className="sds-form-control" defaultValue={value} {...rest} />
+    </>
+  );
+};