Add urgent request component.

src/components/urgent-request/UrgentRequest.module.scss

+.UrgentRequest {
+  margin: 1rem 0 1rem 0;
+  border: 1px rgb(113, 0, 10) solid;
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  transition: all 0.2s ease-in-out;
+  opacity: 0;
+  transform-origin: top left;
+  transform: rotate3d(1, 0.5, 0.1, -90deg) scale(0);
+  &.open {
+    opacity: 1;
+    transform: rotate(0deg);
+    height: auto;
+  }
+}

src/components/urgent-request/UrgentRequest.test.tsx

+import * as React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import UrgentRequest from './UrgentRequest';
+import userEvent from '@testing-library/user-event';
+import styles from './UrgentRequest.module.scss';
+
+
+const mockSendUrgent = jest.fn();
+
+describe('<UrgentRequest>', () => {
+  it('renders the option to make a contact request urgent', () => {
+    const { getByRole, getByText } = render(
+      <UrgentRequest sendUrgent={mockSendUrgent} />,
+    );
+    const urgentFieldset = getByRole('group');
+    const urgentInput = getByRole('textbox');
+    const urgentSubmit = getByRole('button');
+
+    const urgentFold = getByText('Urgent request?');
+    // Folded urgent form has invisible content
+    expect(urgentFieldset).not.toHaveClass('open');
+
+    // Unfolding the urgency form
+    userEvent.click(urgentFold);
+    expect(urgentFieldset).toHaveClass(styles.open);
+
+    // See expected elements
+    expect(document.body.contains(urgentFieldset));
+
+    // Expected default values
+    expect(urgentInput).toHaveValue('');
+    expect(urgentSubmit).toBeDisabled();
+
+    // Try typing something that doesn't change the urgent status
+    userEvent.type(urgentInput, 'NOT URGENT');
+    expect(urgentInput).toHaveValue('NOT URGENT');
+    expect(urgentSubmit).toBeDisabled();
+
+    // Close the fold again.. this should clear the input field too.
+    userEvent.click(urgentFold);
+    expect(urgentFieldset).not.toHaveClass('open');
+    userEvent.click(urgentFold);
+    expect(urgentInput).toHaveValue('');
+    
+    // Fill in URGENT to change the urgent status
+    userEvent.type(urgentInput, 'URGENT');
+    // State was updated..
+    expect(urgentInput).toHaveValue('URGENT');
+    expect(urgentSubmit).toBeEnabled();
+
+    // Can submit now..
+    userEvent.click(urgentSubmit);
+    // Triggers a message sent up the hierarchy..
+    expect(mockSendUrgent).toBeCalled();
+  });
+});

src/components/urgent-request/UrgentRequest.tsx

+import Markdown from 'markdown-to-jsx';
+import React, { ChangeEvent, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './UrgentRequest.module.scss';
+
+export interface UrgentRequestProps {
+  sendUrgent: CallableFunction;
+}
+
+function UrgentRequest({ sendUrgent }: UrgentRequestProps) {
+  const [open, setOpen] = useState<boolean>(false);
+  const [urgent, setUrgent] = useState<boolean>(true);
+  const [urgentText, setUrgentText] = useState<string>('');
+  const { t } = useTranslation();
+  const changeFold = (event: ChangeEvent<HTMLInputElement>) => {
+    setOpen(event.target.checked);
+    if (!open) setUrgentText('');
+  };
+
+  const changeUrgentText = (event: ChangeEvent<HTMLInputElement>): void => {
+    setUrgentText(event.target.value);
+  };
+
+  useEffect(() => {
+    setUrgent(urgentText == t('urgency.urgent'));
+  }, [urgentText]);
+
+  function submitUrgent(event: React.SyntheticEvent<HTMLFormElement>) {
+    event.preventDefault();
+    sendUrgent();
+  }
+
+  return (
+    <form onSubmit={submitUrgent}>
+      <div className="field.switch">
+        <input
+          id="urgency-checkbox"
+          type="checkbox"
+          className="switch fold-button"
+          onChange={changeFold}
+        />
+        <label htmlFor="urgency-checkbox">{t('urgency.foldText')}</label>
+      </div>
+      <fieldset className={`${styles.UrgentRequest} ${open ? styles.open : ''}`}>
+        <legend>{t('urgency.legend')}</legend>
+        <Markdown>{t('urgency.intro')}</Markdown>
+        <div className="field">
+          <input
+            type="text"
+            value={urgentText}
+            onChange={changeUrgentText}
+          ></input>
+        </div>
+        <button disabled={!urgent} className="bad" type="submit">
+          {t('urgency.submit')}
+        </button>
+      </fieldset>
+    </form>
+  );
+}
+
+export default UrgentRequest;