Merge pull request #1598 from public-convenience-ltd/add-textarea-to-…

…design-system

Add textarea to design system

.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": {

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"

src/design-system/components/TextArea/TextArea.css

@@ -0,0 +1,7 @@
+.text-area {
+  display: block;
+  width: 100%;
+  padding: var(--space-2xs);
+  color: var(--color-blue);
+  border: 1px solid var(--color-blue);
+}

src/design-system/components/TextArea/TextArea.stories.tsx

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import TextArea from './TextArea';
+
+const meta: Meta<typeof TextArea> = {
+  title: 'Design-System/Form Elements/TextArea',
+  component: TextArea,
+};
+
+export default meta;
+
+export const Primary: StoryObj<typeof TextArea> = {
+  render: () => <TextArea />,
+};

src/design-system/components/TextArea/TextArea.tsx

@@ -0,0 +1,10 @@
+import { ComponentPropsWithoutRef, forwardRef } from 'react';
+
+const TextArea = forwardRef<
+  HTMLTextAreaElement,
+  ComponentPropsWithoutRef<'textarea'>
+>((props, ref) => <textarea className="text-area" ref={ref} {...props} />);
+
+TextArea.displayName = 'TextArea';
+
+export default TextArea;

src/design-system/components/TextArea/index.tsx

@@ -0,0 +1 @@
+export { default } from './TextArea';

src/design-system/components/stylesheet.css

@@ -4,3 +4,4 @@
 @import 'src/design-system/components/InputField/InputField.css';
 @import 'src/design-system/components/RadioInput/RadioInput.css';
 @import 'src/design-system/components/Switch/Switch.css';
+@import 'src/design-system/components/TextArea/TextArea.css';

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) {