diff --git a/src/components/DateInput.tsx b/src/components/DateInput.tsx index 24f913d3758099008ec173d859b3db98be703e5d..024a44d48e73be9bd81b0cc1738cf0fc8e70c03d 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 2dd1cc193bfbe3fb270eaaef3afd2d4bc6946bf6..b1362f018c1ded99a50eb5c6a54ea18a918906e7 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 fb098b49ec660a912472bd325a3190b1c3560f31..b5cff8fa581977f26c14138abaf3a8c17442fbc1 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 d62ef207afde89a4d489585cee41321257cd0a32..7e629a88a519029d92983d968c4c1869220ef301 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 d6d6fc344fb7bb6136a2db99bc72a938cb663b2a..f48b848206d9c9e939f15fcdb894e661e992800a 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} + /> + ); +};