From 7719e82bce05ed14f161fac7af49d758b4038ddc Mon Sep 17 00:00:00 2001 From: Arno V Date: Sat, 6 Apr 2024 11:25:46 -0400 Subject: [PATCH] feat(Card): adding prop "compact" --- .../src/Components/Card.stories.tsx | 3 +- .../src/components/Card/Card.tsx | 2 ++ .../src/components/Card/CardTypes.d.ts | 8 +++-- .../components/Card/__tests__/Card.test.tsx | 19 ++++++++-- .../src/components/Card/utilities.ts | 36 +++++++++++-------- 5 files changed, 48 insertions(+), 20 deletions(-) diff --git a/packages/documentation/src/Components/Card.stories.tsx b/packages/documentation/src/Components/Card.stories.tsx index 8490b892..9b6d9455 100644 --- a/packages/documentation/src/Components/Card.stories.tsx +++ b/packages/documentation/src/Components/Card.stories.tsx @@ -8,6 +8,7 @@ export default { }, args: { mode: "system", + compact: false, }, argTypes: { mode: { @@ -63,6 +64,6 @@ export const Custom: Story = (args) => ( ); Custom.args = { - header:

Dune

, + header:

Dune

, footer:

Frank Herbert

, }; diff --git a/packages/ui-components/src/components/Card/Card.tsx b/packages/ui-components/src/components/Card/Card.tsx index 09972787..132e1eeb 100644 --- a/packages/ui-components/src/components/Card/Card.tsx +++ b/packages/ui-components/src/components/Card/Card.tsx @@ -39,6 +39,7 @@ export const Card = ({ "aria-labelledby": ariaLabelledby, spacing, mode = "system", + compact = false, ...otherProps }: CardProps) => { @@ -55,6 +56,7 @@ export const Card = ({ footerClassName, spacing, mode, + compact, }); if (isHeaderString) { diff --git a/packages/ui-components/src/components/Card/CardTypes.d.ts b/packages/ui-components/src/components/Card/CardTypes.d.ts index 07547837..fdaaca54 100644 --- a/packages/ui-components/src/components/Card/CardTypes.d.ts +++ b/packages/ui-components/src/components/Card/CardTypes.d.ts @@ -5,7 +5,6 @@ export type CardProps = { * The children to render. */ children: React.ReactNode; - /** * If the header prop is not provided, the Card must be * described via aria-labelledby. @@ -16,10 +15,13 @@ export type CardProps = { */ bodyClassName?: string; /** - * CSS class(es) to add to the main component wrapper. If provided, - * it overrides the default styles. + * CSS class(es) to add to the main component wrapper. */ className?: string; + /** + * If true, the card will be smaller. + */ + compact?: boolean; /** * The content to render in the footer. */ diff --git a/packages/ui-components/src/components/Card/__tests__/Card.test.tsx b/packages/ui-components/src/components/Card/__tests__/Card.test.tsx index c57e48d1..950b253d 100644 --- a/packages/ui-components/src/components/Card/__tests__/Card.test.tsx +++ b/packages/ui-components/src/components/Card/__tests__/Card.test.tsx @@ -75,6 +75,23 @@ describe("Card modifiers", () => { ]); }); + it("should render a default compact card", async () => { + const { container } = render({cardContent}); + const card = container.children[0]; + expectToHaveClasses(card, [ + CARD_CLASSNAME, + "rounded-md", + "border-2", + "p-2", + "border-border-dark", + "bg-surface-lighter", + "text-copy-dark", + "dark:border-border-light", + "dark:bg-surface-dark", + "dark:text-copy-light", + ]); + }); + it("should render a default card with a custom class", async () => { const { container } = render( {cardContent}, @@ -125,8 +142,6 @@ describe("Card modifiers", () => { "mb-4", "border-b-2", "border-border-medium", - "text-lg", - "font-bold", ]); }); diff --git a/packages/ui-components/src/components/Card/utilities.ts b/packages/ui-components/src/components/Card/utilities.ts index 335ff3f5..5c09087f 100644 --- a/packages/ui-components/src/components/Card/utilities.ts +++ b/packages/ui-components/src/components/Card/utilities.ts @@ -7,6 +7,7 @@ import { CARD_CLASSNAME } from "../../common/constants"; type getCardClassesProps = { bodyClassName?: string; className?: string; + compact?: boolean; footerClassName?: string; headerClassName?: string; mode?: "dark" | "light" | "system" | "alt-system"; @@ -19,24 +20,31 @@ export const getCardClasses = ({ footerClassName, spacing, mode, + compact, }: getCardClassesProps) => { - const wrapper = className - ? className - : clsx(CARD_CLASSNAME, "rounded-md border-2 p-4", getSpacing(spacing), { - "border-border-light bg-surface-dark text-copy-light": mode === "dark", - "border-border-dark bg-surface-lighter text-copy-dark": - mode === "light", + const wrapper = clsx( + CARD_CLASSNAME, + className, + "rounded-md border-2", + getSpacing(spacing), + { + "p-4": !compact, + "p-2": compact, + "border-border-light bg-surface-dark text-copy-light": mode === "dark", + "border-border-dark bg-surface-lighter text-copy-dark": mode === "light", - "border-border-dark bg-surface-lighter text-copy-dark dark:border-border-light dark:bg-surface-dark dark:text-copy-light": - mode === "system", - "border-border-light bg-surface-dark text-copy-light dark:border-border-dark dark:bg-surface-lighter dark:text-copy-dark": - mode === "alt-system", - }); + "border-border-dark bg-surface-lighter text-copy-dark dark:border-border-light dark:bg-surface-dark dark:text-copy-light": + mode === "system", + "border-border-light bg-surface-dark text-copy-light dark:border-border-dark dark:bg-surface-lighter dark:text-copy-dark": + mode === "alt-system", + }, + ); const header = headerClassName ? headerClassName - : clsx( - `${CARD_CLASSNAME}__header not-prose mb-4 border-b-2 border-border-medium text-lg font-bold`, - ); + : clsx(`${CARD_CLASSNAME}__header mt-0 border-b-2 border-border-medium`, { + "mb-4": !compact, + "mb-2": compact, + }); const body = clsx(bodyClassName); const footer = footerClassName