Implement Textarea component and integrate it into `CqlSearchHeader…

…` + Add form wrapper

The `Textarea` is added to keep the structure consistent, and the class `advanced-search-cql-form` is used to maintain spacing between elements.

src/apps/advanced-search/CqlSearchHeader.tsx

@@ -3,6 +3,7 @@ import { useText } from "../../core/utils/text";
 import CheckBox from "../../components/checkbox/Checkbox";
 import TextInput from "../../components/atoms/input/TextInput";
 import { LocationFilter } from "./LocationFilter";
+import Textarea from "../../components/forms/textarea/Textarea";
 
 export type CqlSearchHeaderProps = {
   dataCy?: string;
@@ -59,18 +60,22 @@ const CqlSearchHeader: React.FC<CqlSearchHeaderProps> = ({
   };
 
   return (
-    <>
+    <form className="advanced-search-cql-form">
       <h1
         className="text-header-h2 advanced-search__title capitalize-first"
         data-cy={dataCy}
       >
         {t("cqlSearchTitleText")}
       </h1>
-      <textarea
-        className="advanced-search__cql-input focus-styling__input"
+
+      <Textarea
+        id="cql"
+        name="name"
+        label="CQL"
+        className="advanced-search-cql-form__input focus-styling__input"
         cols={100}
         rows={5}
-        placeholder="e.g. title=snemand*"
+        placeholder="e.g. 'harry potter'"
         data-cy={`${dataCy}-input`}
         onChange={(e) => setCql(e.target.value)}
         defaultValue={initialCql}
@@ -99,7 +104,7 @@ const CqlSearchHeader: React.FC<CqlSearchHeaderProps> = ({
         onChecked={handleOnShelfChange}
         label={t("advancedSearchFilterHoldingStatusText")}
       />
-    </>
+    </form>
   );
 };
 

src/components/forms/label/Label.tsx

@@ -0,0 +1,16 @@
+import clsx from "clsx";
+import React, { FC } from "react";
+
+export interface LabelProps {
+  id: string;
+  children: string;
+  className?: string;
+}
+
+const Label: FC<LabelProps> = ({ id, className, children }) => (
+  <label htmlFor={id} className={clsx(className)}>
+    {children}
+  </label>
+);
+
+export default Label;

src/components/forms/textarea/Textarea.tsx

@@ -0,0 +1,47 @@
+import clsx from "clsx";
+import React, { ChangeEvent, FC } from "react";
+import Label from "../label/Label";
+
+export interface TextareaProps {
+  id: string;
+  name: string;
+  label: string;
+  rows?: number;
+  cols?: number;
+  className?: string;
+  placeholder?: string;
+  onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
+  defaultValue?: string;
+}
+
+const Textarea: FC<TextareaProps> = ({
+  id,
+  name,
+  label,
+  rows = 8,
+  cols = 80,
+  className,
+  placeholder,
+  onChange,
+  defaultValue
+}) => {
+  return (
+    <div className="dpl-input">
+      <Label id={id}>{label}</Label>
+      <div>
+        <textarea
+          className={clsx(className)}
+          id={id}
+          name={name}
+          rows={rows}
+          cols={cols}
+          placeholder={placeholder}
+          onChange={onChange}
+          defaultValue={defaultValue}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Textarea;