refactor: replace textarea elements with new component

public-convenience-ltd · Nov 30, 2023 · 895b835 · 895b835
1 parent 7a044f8
commit 895b835
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 24 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -20,7 +20,11 @@
     "functional/no-method-signature": 0,
     "no-var": "error",
     "no-param-reassign": "error",
-    "prefer-const": "error"
+    "prefer-const": "error",
+    "jsx-a11y/label-has-associated-control": [
+      2,
+      { "controlComponents": ["TextArea"] }
+    ]
   },
   "settings": {
     "react": {

diff --git a/src/components/EntryForm.tsx b/src/components/EntryForm.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState, useMemo } from 'react';
-import styled from '@emotion/styled';
 import {
   useForm,
   Controller,
@@ -27,6 +26,7 @@ import crosshair from '../../public/crosshair-small.svg';
 import { useMapState } from './MapState';
 import Icon from '../design-system/components/Icon';
 import { css } from '@emotion/react';
+import TextArea from '../design-system/components/TextArea';
 
 type OpeningDayStates =
   | `${Lowercase<Weekdays>}-is-open`
@@ -42,16 +42,6 @@ const openingTimesFields = WEEKDAYS.flatMap((day): OpeningDayStates[] => {
   ];
 });
 
-const Textarea = styled.textarea`
-  display: block;
-  height: 10rem;
-  width: 100%;
-  margin-top: ${(props) => props.theme.space[1]}px;
-  padding: ${(props) => props.theme.space[2]}px;
-  color: ${(props) => props.theme.colors.primary};
-  border: 1px solid ${(props) => props.theme.colors.primary};
-`;
-
 interface Question {
   field: string;
   subQuestion: string | React.ReactElement;
@@ -783,10 +773,11 @@ const EntryForm = ({ title, loo, children, ...props }) => {
 
           <Spacer mt={4} />
 
-          <label htmlFor="notes">
+          <label>
             7. Notes
-            <Textarea
+            <TextArea
               name="notes"
+              rows={6}
               defaultValue={loo.notes || ''}
               data-testid="notes"
               placeholder="Add any other useful information about the toilet here"

diff --git a/src/design-system/components/TextArea/TextArea.css b/src/design-system/components/TextArea/TextArea.css
@@ -1,8 +1,6 @@
 .text-area {
   display: block;
-  height: 10rem;
   width: 100%;
-  margin-top: var(--space-3xs);
   padding: var(--space-2xs);
   color: var(--color-blue);
   border: 1px solid var(--color-blue);

diff --git a/src/pages/loos/[id]/remove.page.tsx b/src/pages/loos/[id]/remove.page.tsx
@@ -20,6 +20,7 @@ import { GetServerSideProps } from 'next';
 import NotFound from '../../404.page';
 import { css } from '@emotion/react';
 import { useMapState } from '../../../components/MapState';
+import TextArea from '../../../design-system/components/TextArea';
 
 const RemovePage: PageFindLooByIdComp | React.FC<{ notFound?: boolean }> =
   function (props) {
@@ -58,7 +59,7 @@ const RemovePage: PageFindLooByIdComp | React.FC<{ notFound?: boolean }> =
         setMapState({ searchLocation: undefined });
         // redirect to updated toilet entry page
         router.push(
-          `/api/loos/${removeData.submitRemovalReport.loo.id}/revalidate?message=removed`
+          `/api/loos/${removeData.submitRemovalReport.loo.id}/revalidate?message=removed`,
         );
       }
     }, [removeData, router, setMapState]);
@@ -138,16 +139,12 @@ const RemovePage: PageFindLooByIdComp | React.FC<{ notFound?: boolean }> =
           <form onSubmit={onSubmit}>
             <label>
               <b>Reason for removal</b>
-              <textarea
-                type="text"
+              <TextArea
+                rows={4}
                 name="reason"
                 value={reason}
                 onChange={updateReason}
                 required
-                css={{
-                  height: '100px',
-                  width: '100%',
-                }}
               />
             </label>
 
@@ -179,7 +176,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
       {
         variables: { id: ctx.params.id as string },
       },
-      ctx
+      ctx,
     );
 
     if (res.props.error || !res.props.data) {