From 87d65eb3c9429ef5907b0f448a10306203e6cdd9 Mon Sep 17 00:00:00 2001
From: Alissa Cheng <cheng@astron.nl>
Date: Thu, 29 Feb 2024 11:47:58 +0100
Subject: [PATCH] fix: disabled form components

---
 src/components/DateInput.tsx      |  4 ++++
 src/components/Dropdown.tsx       |  1 +
 src/components/Table.tsx          |  5 ++++-
 src/stories/DateInput.stories.tsx | 10 ++++++++++
 src/stories/Dropdown.stories.tsx  | 11 +++++++++++
 5 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/components/DateInput.tsx b/src/components/DateInput.tsx
index 24f913d..024a44d 100644
--- a/src/components/DateInput.tsx
+++ b/src/components/DateInput.tsx
@@ -13,6 +13,7 @@ export type DateArray = [DateNull, DateNull];
 
 type DateInputProps = {
   isRequired?: boolean;
+  isDisabled?: boolean;
   label: string;
   labelPlacement?: LabelPlacement;
   labelClass?: string;
@@ -31,6 +32,7 @@ type DateInputProps = {
 
 const DateInput = ({
   isRequired = false,
+  isDisabled = false,
   label,
   labelPlacement = "outside",
   labelClass = "",
@@ -68,6 +70,7 @@ const DateInput = ({
         <div onClick={onClick}>
           <BaseInput
             isRequired={isRequired}
+            isDisabled={isDisabled}
             label={label}
             labelPlacement={labelPlacement}
             labelClass={labelClass}
@@ -184,6 +187,7 @@ const DateInput = ({
       popperPlacement={
         labelPlacement === "outside-left" ? "bottom-end" : "bottom-start"
       }
+      disabled={isDisabled}
     />
   );
 };
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
index 2dd1cc1..b1362f0 100644
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -36,6 +36,7 @@ const Dropdown = ({
   return (
     <Autocomplete
       isRequired={isRequired}
+      isDisabled={isDisabled}
       label={
         label && (
           <Typography
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index fb098b4..b5cff8f 100644
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -1,6 +1,7 @@
 import { Dispatch, ReactNode, SetStateAction } from "react";
 import { DataTable, type DataTableValueArray } from "primereact/datatable";
 import { Column } from "primereact/column";
+import { clsx } from "clsx";
 import { textColor } from "./utils/classes.ts";
 import Typography from "./Typography.tsx";
 
@@ -39,7 +40,9 @@ const Table = ({
       reorderableRows={isReorderable}
       onRowReorder={(e) => onReorder && onReorder(e.value)}
       className="rounded-[8px] bg-lightGrey/30 dark:bg-baseBlack/40 p-[20px] pb-[10px]"
-      rowClassName={() => "border-t border-grey/50 text-[13px] font-body"}
+      rowClassName={() =>
+        clsx("border-t border-grey/50 text-[13px] font-body", textColor("body"))
+      }
       cellClassName={() => "h-12 pl-[5px]"}
     >
       {isSelectable && (
diff --git a/src/stories/DateInput.stories.tsx b/src/stories/DateInput.stories.tsx
index d62ef20..7e629a8 100644
--- a/src/stories/DateInput.stories.tsx
+++ b/src/stories/DateInput.stories.tsx
@@ -85,3 +85,13 @@ export const LabelOnTheLeft = () => {
     </div>
   );
 };
+
+export const Disabled = () => {
+  return (
+    <DateInput
+      label="Can't touch this"
+      onValueChange={() => {}}
+      isDisabled={true}
+    />
+  );
+};
diff --git a/src/stories/Dropdown.stories.tsx b/src/stories/Dropdown.stories.tsx
index d6d6fc3..f48b848 100644
--- a/src/stories/Dropdown.stories.tsx
+++ b/src/stories/Dropdown.stories.tsx
@@ -35,3 +35,14 @@ export const SimpleDropdown = () => {
     </>
   );
 };
+
+export const Disabled = () => {
+  return (
+    <Dropdown
+      label="You can't choose your favourite ice cream."
+      valueOptions={[]}
+      onValueChange={() => {}}
+      isDisabled={true}
+    />
+  );
+};
-- 
GitLab