@squiz/formatted-text-editor 1.21.1-alpha.32 → 1.21.1-alpha.33

package/lib/EditorToolbar/Tools/Image/Form/ImageForm.js

@@ -33,8 +33,10 @@ const react_image_size_1 = require("react-image-size");
 const Button_1 = __importDefault(require("../../../../ui/Button/Button"));
 const LinkOff_1 = __importDefault(require("@mui/icons-material/LinkOff"));
 const InsertLinkRounded_1 = __importDefault(require("@mui/icons-material/InsertLinkRounded"));
+const clsx_1 = __importDefault(require("clsx"));
+const regexDataURI = /^data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@/?%\s]*)$/i;
 const ImageForm = ({ data, onSubmit }) => {
-    const { register, handleSubmit, setValue } = (0, react_hook_form_1.useForm)({
+    const { register, handleSubmit, setValue, formState: { errors }, } = (0, react_hook_form_1.useForm)({
         defaultValues: data,
     });
     const [aspectRatioFromWidth, setAspectRatioFromWidth] = (0, react_1.useState)(9 / 16);
@@ -48,9 +50,16 @@ const ImageForm = ({ data, onSubmit }) => {
             setAspectRatioFromWidth(height / width);
             setAspectRatioFromHeight(width / height);
         })
-            .catch(() => {
-            // TODO: we will use this when we add validation in a follow-up ticket
-        });
+            .catch();
+    };
+    const validateIsNotImage = async (src) => {
+        try {
+            await (0, react_image_size_1.getImageSize)(src);
+            return false;
+        }
+        catch (error) {
+            return true;
+        }
     };
     const calculateDimensions = () => {
         if (aspectRatioLocked) {
@@ -68,15 +77,48 @@ const ImageForm = ({ data, onSubmit }) => {
     };
     return (react_1.default.createElement("form", { className: "squiz-fte-form", onSubmit: handleSubmit(onSubmit) },
         react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
-            react_1.default.createElement(Input_1.Input, { label: "Source", ...register('src', { onChange: setDimensionsFromURL }) })),
+            react_1.default.createElement(Input_1.Input, { label: "Source", required: true, error: errors?.src?.message, ...register('src', {
+                    onChange: setDimensionsFromURL,
+                    required: 'Source is required',
+                    validate: {
+                        isValidImage: async (value) => {
+                            if (value && regexDataURI.test(value)) {
+                                return 'Must not be a data URI';
+                            }
+                            if (value && (await validateIsNotImage(value))) {
+                                return 'Must be a valid image URL';
+                            }
+                        },
+                    },
+                }) })),
         react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
-            react_1.default.createElement(Input_1.Input, { label: "Alternative description", ...register('alt') })),
-        react_1.default.createElement("div", { className: "flex flex-row items-end" },
+            react_1.default.createElement(Input_1.Input, { label: "Alternative description", required: true, error: errors?.alt?.message, ...register('alt', { required: 'Alternative description is required' }) })),
+        react_1.default.createElement("div", { className: "flex flex-row" },
             react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
-                react_1.default.createElement(Input_1.Input, { label: "Width", ...register('width'), type: "number", name: "width", onChange: calculateDimensions })),
+                react_1.default.createElement(Input_1.Input, { label: "Width", type: "number", required: true, error: errors?.width?.message, ...register('width', {
+                        onChange: calculateDimensions,
+                        required: 'Width is required',
+                        validate: {
+                            isValidWidth: (value) => {
+                                if (value && !(value > 0)) {
+                                    return 'Must be higher than 0';
+                                }
+                            },
+                        },
+                    }) })),
             react_1.default.createElement("div", { className: "flex mx-1 mb-2" },
-                react_1.default.createElement(Button_1.default, { handleOnClick: toggleAspectRatio, isActive: false, icon: aspectRatioLocked ? react_1.default.createElement(InsertLinkRounded_1.default, null) : react_1.default.createElement(LinkOff_1.default, null), label: "Constrain properties", isDisabled: false })),
+                react_1.default.createElement(Button_1.default, { handleOnClick: toggleAspectRatio, isActive: false, icon: aspectRatioLocked ? react_1.default.createElement(InsertLinkRounded_1.default, null) : react_1.default.createElement(LinkOff_1.default, null), label: "Constrain properties", isDisabled: false, className: (0, clsx_1.default)('my-auto', !errors?.height && !errors?.width && 'mb-0') })),
             react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
-                react_1.default.createElement(Input_1.Input, { label: "Height", ...register('height'), type: "number", name: "height", onChange: calculateDimensions })))));
+                react_1.default.createElement(Input_1.Input, { label: "Height", type: "number", required: true, error: errors?.height?.message, ...register('height', {
+                        onChange: calculateDimensions,
+                        required: 'Height is required',
+                        validate: {
+                            isValidHeight: (value) => {
+                                if (value && !(value > 0)) {
+                                    return 'Must be higher than 0';
+                                }
+                            },
+                        },
+                    }) })))));
 };
 exports.default = ImageForm;

package/lib/index.css

@@ -388,6 +388,10 @@
   margin-top: 1.5rem !important;
   margin-bottom: 1.5rem !important;
 }
+.squiz-fte-scope .my-auto {
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}
 .squiz-fte-scope .-mr-3 {
   margin-right: -0.75rem !important;
 }
@@ -444,9 +448,6 @@
 .squiz-fte-scope .flex-row {
   flex-direction: row !important;
 }
-.squiz-fte-scope .items-end {
-  align-items: flex-end !important;
-}
 .squiz-fte-scope .items-center {
   align-items: center !important;
 }
@@ -666,6 +667,7 @@
   --tw-border-opacity: 1;
   border-color: rgb(215 35 33 / var(--tw-border-opacity));
   background-repeat: no-repeat;
+  padding-right: 2rem;
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHdpZHRoPSIyNCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0ibm9uZSIvPjxnIGNsYXNzPSJjdXJyZW50TGF5ZXIiPjxwYXRoIGQ9Ik00LjQ3IDIxaDE1LjA2YzEuNTQgMCAyLjUtMS42NyAxLjczLTNMMTMuNzMgNC45OWMtLjc3LTEuMzMtMi42OS0xLjMzLTMuNDYgMEwyLjc0IDE4Yy0uNzcgMS4zMy4xOSAzIDEuNzMgM3pNMTIgMTRjLS41NSAwLTEtLjQ1LTEtMXYtMmMwLS41NS40NS0xIDEtMXMxIC40NSAxIDF2MmMwIC41NS0uNDUgMS0xIDF6bTEgNGgtMnYtMmgydjJ6IiBjbGFzcz0ic2VsZWN0ZWQiIGZpbGw9IiNkNzIzMjEiLz48L2c+PC9zdmc+);
   background-position: top 0.25rem right 0.25rem;
   background-size: 1.5rem;
@@ -769,6 +771,7 @@
 .squiz-fte-scope .editor-toolbar .squiz-fte-btn,
 .squiz-fte-scope .squiz-fte-scope__floating-popover .squiz-fte-btn {
   padding: 0.25rem;
+  font-weight: 700;
 }
 .squiz-fte-scope .editor-toolbar .squiz-fte-btn ~ .squiz-fte-btn,
 .squiz-fte-scope .squiz-fte-scope__floating-popover .squiz-fte-btn ~ .squiz-fte-btn {
@@ -798,7 +801,7 @@
   border-radius: 4px;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  font-weight: 400;
+  font-weight: 700;
   --tw-text-opacity: 1;
   color: rgb(112 112 112 / var(--tw-text-opacity));
   transition-property: all;
@@ -961,6 +964,7 @@
 .squiz-fte-scope .editor-toolbar .squiz-fte-modal-footer__button,
 .squiz-fte-scope .squiz-fte-scope__floating-popover .squiz-fte-modal-footer__button {
   padding: 0.25rem;
+  font-weight: 700;
 }
 .squiz-fte-scope .editor-toolbar .squiz-fte-modal-footer__button ~ .squiz-fte-btn,
 .squiz-fte-scope .squiz-fte-scope__floating-popover .squiz-fte-modal-footer__button ~ .squiz-fte-btn {
@@ -970,7 +974,7 @@
   border-radius: 4px;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  font-weight: 400;
+  font-weight: 700;
   --tw-text-opacity: 1;
   color: rgb(112 112 112 / var(--tw-text-opacity));
   transition-property: all;

package/lib/ui/Button/Button.d.ts

@@ -6,6 +6,7 @@ type ButtonProps = {
     label: string;
     text?: string;
     icon?: ReactElement;
+    className?: string;
 };
-declare const Button: ({ handleOnClick, isDisabled, isActive, label, text, icon }: ButtonProps) => JSX.Element;
+declare const Button: ({ handleOnClick, isDisabled, isActive, label, text, icon, className }: ButtonProps) => JSX.Element;
 export default Button;

package/lib/ui/Button/Button.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
-const Button = ({ handleOnClick, isDisabled, isActive, label, text, icon }) => {
-    return (react_1.default.createElement("button", { "aria-label": label, title: label, type: "button", onClick: handleOnClick, disabled: isDisabled, className: (0, clsx_1.default)('squiz-fte-btn', isActive && 'squiz-fte-btn--is-active', icon && ' squiz-fte-btn--is-icon') },
+const Button = ({ handleOnClick, isDisabled, isActive, label, text, icon, className }) => {
+    return (react_1.default.createElement("button", { "aria-label": label, title: label, type: "button", onClick: handleOnClick, disabled: isDisabled, className: (0, clsx_1.default)('squiz-fte-btn', isActive && 'squiz-fte-btn--is-active', icon && ' squiz-fte-btn--is-icon', className) },
         text && react_1.default.createElement("span", null, text),
         icon && icon));
 };

package/lib/ui/Fields/Input/Input.js

@@ -29,9 +29,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
 const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
-const InputInternal = ({ name, label, type = 'text', error, ...rest }, ref) => {
+const InputInternal = ({ name, label, type = 'text', error, required, ...rest }, ref) => {
     return (react_1.default.createElement("div", { className: (0, clsx_1.default)(error && 'squiz-fte-invalid-form-field') },
         label && (react_1.default.createElement("label", { htmlFor: name, className: "squiz-fte-form-label" }, label)),
+        required && (react_1.default.createElement("span", { className: "text-gray-600", "aria-label": "Required field" }, "*")),
         react_1.default.createElement("input", { ref: ref, id: name, name: name, type: type, "aria-invalid": !!error, className: "squiz-fte-form-control", ...rest }),
         error && react_1.default.createElement("div", { className: "squiz-fte-form-error" }, error)));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.21.1-alpha.32",
+  "version": "1.21.1-alpha.33",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -74,5 +74,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "7aae392e4aaf3fee925010d78d60cb22d474cb46"
+  "gitHead": "1618acf485927bf853d04d9000eda160c03e2567"
 }

package/src/EditorToolbar/Tools/Image/Form/ImageForm.tsx

@@ -6,6 +6,7 @@ import { ImageAttributes } from '@remirror/extension-image/dist-types/image-exte
 import Button from '../../../../ui/Button/Button';
 import LinkOffIcon from '@mui/icons-material/LinkOff';
 import InsertLinkRoundedIcon from '@mui/icons-material/InsertLinkRounded';
+import clsx from 'clsx';
 
 export type UpdateImageOptions = ImageAttributes & {
   src: string;
@@ -21,25 +22,41 @@ export type FormProps = {
 };
 export type Dimensions = 'width' | 'height';
 
+const regexDataURI =
+  /^data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@/?%\s]*)$/i;
+
 const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
-  const { register, handleSubmit, setValue } = useForm<ImageFormData>({
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm<ImageFormData>({
     defaultValues: data,
   });
+
   const [aspectRatioFromWidth, setAspectRatioFromWidth] = useState(9 / 16);
   const [aspectRatioFromHeight, setAspectRatioFromHeight] = useState(16 / 9);
   const [aspectRatioLocked, setAspectRatioLocked] = useState(true);
 
-  const setDimensionsFromURL = (e: { target: { value: string } }) => {
+  const setDimensionsFromURL = (e: React.ChangeEvent<HTMLInputElement>) => {
     getImageSize(e.target.value)
-      .then(({ width, height }) => {
+      .then(({ width, height }: { width: number; height: number }) => {
         setValue('width', width);
         setValue('height', height);
         setAspectRatioFromWidth(height / width);
         setAspectRatioFromHeight(width / height);
       })
-      .catch(() => {
-        // TODO: we will use this when we add validation in a follow-up ticket
-      });
+      .catch();
+  };
+
+  const validateIsNotImage = async (src: string) => {
+    try {
+      await getImageSize(src);
+      return false;
+    } catch (error) {
+      return true;
+    }
   };
 
   const calculateDimensions = () => {
@@ -61,14 +78,53 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
   return (
     <form className="squiz-fte-form" onSubmit={handleSubmit(onSubmit)}>
       <div className="squiz-fte-form-group mb-2">
-        <Input label="Source" {...register('src', { onChange: setDimensionsFromURL })} />
+        <Input
+          label="Source"
+          required
+          error={errors?.src?.message}
+          {...register('src', {
+            onChange: setDimensionsFromURL,
+            required: 'Source is required',
+            validate: {
+              isValidImage: async (value: string | undefined) => {
+                if (value && regexDataURI.test(value)) {
+                  return 'Must not be a data URI';
+                }
+                if (value && (await validateIsNotImage(value))) {
+                  return 'Must be a valid image URL';
+                }
+              },
+            },
+          })}
+        />
       </div>
       <div className="squiz-fte-form-group mb-2">
-        <Input label="Alternative description" {...register('alt')} />
+        <Input
+          label="Alternative description"
+          required
+          error={errors?.alt?.message}
+          {...register('alt', { required: 'Alternative description is required' })}
+        />
       </div>
-      <div className="flex flex-row items-end">
+      <div className="flex flex-row">
         <div className="squiz-fte-form-group mb-2">
-          <Input label="Width" {...register('width')} type="number" name="width" onChange={calculateDimensions} />
+          <Input
+            label="Width"
+            type="number"
+            required
+            error={errors?.width?.message}
+            {...register('width', {
+              onChange: calculateDimensions,
+              required: 'Width is required',
+              validate: {
+                isValidWidth: (value: number | undefined) => {
+                  if (value && !(value > 0)) {
+                    return 'Must be higher than 0';
+                  }
+                },
+              },
+            })}
+          />
         </div>
         <div className="flex mx-1 mb-2">
           <Button
@@ -77,10 +133,27 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
             icon={aspectRatioLocked ? <InsertLinkRoundedIcon /> : <LinkOffIcon />}
             label="Constrain properties"
             isDisabled={false}
+            className={clsx('my-auto', !errors?.height && !errors?.width && 'mb-0')}
           />
         </div>
         <div className="squiz-fte-form-group mb-2">
-          <Input label="Height" {...register('height')} type="number" name="height" onChange={calculateDimensions} />
+          <Input
+            label="Height"
+            type="number"
+            required
+            error={errors?.height?.message}
+            {...register('height', {
+              onChange: calculateDimensions,
+              required: 'Height is required',
+              validate: {
+                isValidHeight: (value: number | undefined) => {
+                  if (value && !(value > 0)) {
+                    return 'Must be higher than 0';
+                  }
+                },
+              },
+            })}
+          />
         </div>
       </div>
     </form>

package/src/EditorToolbar/Tools/Image/ImageButton.spec.tsx

@@ -4,6 +4,12 @@ import { NodeSelection } from 'prosemirror-state';
 import React from 'react';
 import { renderWithEditor } from '../../../../tests';
 import ImageButton from './ImageButton';
+import { getImageSize } from 'react-image-size';
+
+jest.mock('react-image-size');
+beforeEach(() => {
+  (getImageSize as jest.Mock).mockResolvedValue({ width: 2, height: 2 });
+});
 
 describe('ImageButton', () => {
   const openModal = async () => {
@@ -132,4 +138,36 @@ describe('ImageButton', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
     expect(modalHeading).not.toBeInTheDocument();
   });
+  it('Adds a new image with Source field', async () => {
+    await renderWithEditor(<ImageButton />, { content: 'Some nonsense content here' });
+
+    // open the modal and add an image.
+    await openModal();
+    fireEvent.change(screen.getByLabelText('Source'), { target: { value: '' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(await screen.findByText('Source is required')).toBeInTheDocument();
+  });
+
+  it('Adds a new image with no alt text', async () => {
+    await renderWithEditor(<ImageButton />, { content: 'Some tacos here' });
+
+    // open the modal and add an image.
+    await openModal();
+    fireEvent.change(screen.getByLabelText('Source'), { target: { value: 'https://httpcats.com/529.jpg' } });
+    fireEvent.change(screen.getByLabelText('Alternative description'), { target: { value: '' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(await screen.findByText('Alternative description is required')).toBeInTheDocument();
+  });
+
+  it('Adds a new image with no width or height text', async () => {
+    await renderWithEditor(<ImageButton />, { content: 'Some beautiful content here' });
+
+    // open the modal and add an image.
+    await openModal();
+    fireEvent.change(screen.getByLabelText('Width'), { target: { value: '' } });
+    fireEvent.change(screen.getByLabelText('Height'), { target: { value: '' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(await screen.findByText('Width is required')).toBeInTheDocument();
+    expect(await screen.findByText('Height is required')).toBeInTheDocument();
+  });
 });

package/src/EditorToolbar/Tools/Image/ImageModal.spec.tsx

@@ -1,9 +1,14 @@
 import '@testing-library/jest-dom';
-import { screen, fireEvent } from '@testing-library/react';
+import { screen, fireEvent, waitFor } from '@testing-library/react';
 import React from 'react';
 import { renderWithEditor } from '../../../../tests';
 import ImageModal from './ImageModal';
+import { getImageSize } from 'react-image-size';
 
+jest.mock('react-image-size');
+beforeEach(() => {
+  (getImageSize as jest.Mock).mockResolvedValue({ width: 0, height: 0 });
+});
 const mockSubmitFunction = jest.fn();
 const mockCancelFunction = jest.fn();
 const setup = () => {
@@ -31,28 +36,38 @@ describe('ImageModal', () => {
   it('Populates the source field when a source is supplied', async () => {
     const { sourceInput } = setup();
     fireEvent.change(sourceInput, { target: { value: 'https://httpcats.com/302.jpg' } });
-    expect(sourceInput.value).toBe('https://httpcats.com/302.jpg');
+    await waitFor(() => {
+      expect(sourceInput.value).toBe('https://httpcats.com/302.jpg');
+    });
   });
 
   it('Renders empty width and height fields if the image source is empty', async () => {
     const { sourceInput, widthInput, heightInput } = setup();
     fireEvent.change(sourceInput, { target: { value: '' } });
-    expect(widthInput.value).toBe('');
-    expect(heightInput.value).toBe('');
+    await waitFor(() => {
+      expect(widthInput.value).toBe('');
+      expect(heightInput.value).toBe('');
+    });
   });
 
   it('Updates the height field with aspect ratio based value from width', async () => {
     const { widthInput, heightInput } = setup();
     fireEvent.change(widthInput, { target: { value: '300' } });
-    expect(widthInput.value).toBe('300');
-    expect(heightInput.value).toBe('168.75');
+    await waitFor(() => {
+      expect(widthInput.value).toBe('300');
+      expect(heightInput.value).toBe('168.75');
+    });
   });
+
   it('Updates the width field with aspect ratio based value from height', async () => {
     const { widthInput, heightInput } = setup();
     fireEvent.change(heightInput, { target: { value: '100' } });
-    expect(heightInput.value).toBe('100');
-    expect(widthInput.value).toBe('177.78');
+    await waitFor(() => {
+      expect(heightInput.value).toBe('100');
+      expect(widthInput.value).toBe('177.78');
+    });
   });
+
   it('Does not change the width when height is changed and aspect ratio link is off', () => {
     const { widthInput, heightInput } = setup();
     fireEvent.change(heightInput, { target: { value: '100' } });
@@ -63,6 +78,7 @@ describe('ImageModal', () => {
     expect(heightInput.value).toBe('200');
     expect(widthInput.value).toBe('177.78');
   });
+
   it('Does not change the height when width is changed and aspect ratio link is off', () => {
     const { widthInput, heightInput } = setup();
     fireEvent.change(widthInput, { target: { value: '450' } });
@@ -73,6 +89,7 @@ describe('ImageModal', () => {
     expect(widthInput.value).toBe('600');
     expect(heightInput.value).toBe('253.13');
   });
+
   it('Changes the icon when aspect ratio button is toggled', () => {
     renderWithEditor(<ImageModal onCancel={mockCancelFunction} onSubmit={mockSubmitFunction} />);
     expect(screen.getByTestId('InsertLinkRoundedIcon')).toBeInTheDocument();
@@ -80,4 +97,26 @@ describe('ImageModal', () => {
     expect(screen.queryByTestId('InsertLinkRoundedIcon')).not.toBeInTheDocument();
     expect(screen.getByTestId('LinkOffIcon')).toBeInTheDocument();
   });
+
+  it('Returns relevant error message if the width is not higher than 0', async () => {
+    const { widthInput } = setup();
+
+    fireEvent.change(widthInput, { target: { value: '0' } });
+    fireEvent.click(screen.getByRole('button', { name: /Apply/i }));
+    await waitFor(() => {
+      expect(widthInput.value).toBe('0');
+    });
+    expect(await screen.findByText('Must be higher than 0')).toBeInTheDocument();
+  });
+
+  it('Returns relevant error message if the height is not higher than 0', async () => {
+    const { heightInput } = setup();
+
+    fireEvent.change(heightInput, { target: { value: '0' } });
+    fireEvent.click(screen.getByRole('button', { name: /Apply/i }));
+    await waitFor(() => {
+      expect(heightInput.value).toBe('0');
+    });
+    expect(await screen.findByText('Must be higher than 0')).toBeInTheDocument();
+  });
 });

package/src/EditorToolbar/_toolbar.scss

@@ -14,7 +14,7 @@
     height: auto;
   }
   .squiz-fte-btn {
-    @apply p-1;
+    @apply p-1 font-bold;
     ~ .squiz-fte-btn {
       margin-left: 2px;
     }

package/src/ui/Button/Button.tsx

@@ -8,9 +8,10 @@ type ButtonProps = {
   label: string;
   text?: string;
   icon?: ReactElement;
+  className?: string;
 };
 
-const Button = ({ handleOnClick, isDisabled, isActive, label, text, icon }: ButtonProps) => {
+const Button = ({ handleOnClick, isDisabled, isActive, label, text, icon, className }: ButtonProps) => {
   return (
     <button
       aria-label={label}
@@ -18,7 +19,12 @@ const Button = ({ handleOnClick, isDisabled, isActive, label, text, icon }: Butt
       type="button"
       onClick={handleOnClick}
       disabled={isDisabled}
-      className={clsx('squiz-fte-btn', isActive && 'squiz-fte-btn--is-active', icon && ' squiz-fte-btn--is-icon')}
+      className={clsx(
+        'squiz-fte-btn',
+        isActive && 'squiz-fte-btn--is-active',
+        icon && ' squiz-fte-btn--is-icon',
+        className,
+      )}
     >
       {text && <span>{text}</span>}
       {icon && icon}

package/src/ui/Button/_button.scss

@@ -1,5 +1,5 @@
 .squiz-fte-btn {
-  @apply font-normal rounded ease-linear transition-all bg-white text-gray-600 duration-150;
+  @apply font-bold rounded ease-linear transition-all bg-white text-gray-600 duration-150;
   display: flex;
   align-items: center;
   text-align: center;

package/src/ui/Fields/Input/Input.spec.tsx

@@ -7,7 +7,7 @@ describe('Input', () => {
   const mockOnChange = jest.fn();
 
   const InputComponent = () => {
-    return <Input name="text-input" defaultValue="Water" label="Text input" onChange={mockOnChange} />;
+    return <Input name="text-input" defaultValue="Water" label="Text input" onChange={mockOnChange} required />;
   };
 
   it('Renders the label', () => {
@@ -40,4 +40,10 @@ describe('Input', () => {
     fireEvent.change(input, { target: { value: 'Wine' } });
     expect(mockOnChange).toHaveBeenCalled();
   });
+
+  it('If the field is declared required, it is marked as such', () => {
+    render(<InputComponent />);
+    const requiredMarker = screen.getByLabelText('Required field');
+    expect(requiredMarker).toBeInTheDocument();
+  });
 });

package/src/ui/Fields/Input/Input.tsx

@@ -7,7 +7,7 @@ type InputProps = InputHTMLAttributes<HTMLInputElement> & {
 };
 
 const InputInternal = (
-  { name, label, type = 'text', error, ...rest }: InputProps,
+  { name, label, type = 'text', error, required, ...rest }: InputProps,
   ref: ForwardedRef<HTMLInputElement>,
 ) => {
   return (
@@ -17,6 +17,11 @@ const InputInternal = (
           {label}
         </label>
       )}
+      {required && (
+        <span className="text-gray-600" aria-label="Required field">
+          *
+        </span>
+      )}
       <input
         ref={ref}
         id={name}

package/src/ui/_forms.scss

@@ -15,7 +15,7 @@
   }
   &-invalid-form-field {
     .squiz-fte-form-control {
-      @apply border-red-300 bg-no-repeat;
+      @apply border-red-300 bg-no-repeat pr-8;
       background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHdpZHRoPSIyNCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0ibm9uZSIvPjxnIGNsYXNzPSJjdXJyZW50TGF5ZXIiPjxwYXRoIGQ9Ik00LjQ3IDIxaDE1LjA2YzEuNTQgMCAyLjUtMS42NyAxLjczLTNMMTMuNzMgNC45OWMtLjc3LTEuMzMtMi42OS0xLjMzLTMuNDYgMEwyLjc0IDE4Yy0uNzcgMS4zMy4xOSAzIDEuNzMgM3pNMTIgMTRjLS41NSAwLTEtLjQ1LTEtMXYtMmMwLS41NS40NS0xIDEtMXMxIC40NSAxIDF2MmMwIC41NS0uNDUgMS0xIDF6bTEgNGgtMnYtMmgydjJ6IiBjbGFzcz0ic2VsZWN0ZWQiIGZpbGw9IiNkNzIzMjEiLz48L2c+PC9zdmc+');
       background-position: top 0.25rem right 0.25rem;
       background-size: 1.5rem;