From 8e2d65fc4c58962b7072e109740c3bb6de87164c Mon Sep 17 00:00:00 2001 From: seaerchin Date: Mon, 2 Dec 2024 15:43:26 +0800 Subject: [PATCH 1/5] feat: add base tags --- .../next/components/internal/Tag/Tag.tsx | 17 +++++++++++++++++ .../next/components/internal/Tag/index.tsx | 1 + 2 files changed, 18 insertions(+) create mode 100644 packages/components/src/templates/next/components/internal/Tag/Tag.tsx create mode 100644 packages/components/src/templates/next/components/internal/Tag/index.tsx diff --git a/packages/components/src/templates/next/components/internal/Tag/Tag.tsx b/packages/components/src/templates/next/components/internal/Tag/Tag.tsx new file mode 100644 index 0000000000..771167dfef --- /dev/null +++ b/packages/components/src/templates/next/components/internal/Tag/Tag.tsx @@ -0,0 +1,17 @@ +import { PropsWithChildren } from "react" + +export const Tag = ( + props: PropsWithChildren< + React.DetailedHTMLProps< + React.HTMLAttributes, + HTMLDivElement + > + >, +) => { + return ( +
+ ) +} diff --git a/packages/components/src/templates/next/components/internal/Tag/index.tsx b/packages/components/src/templates/next/components/internal/Tag/index.tsx new file mode 100644 index 0000000000..52f17bddcf --- /dev/null +++ b/packages/components/src/templates/next/components/internal/Tag/index.tsx @@ -0,0 +1 @@ +export * from "./Tag" From 57f6ca2ddccb9956184ae14558c166cd3db336f2 Mon Sep 17 00:00:00 2001 From: seaerchin Date: Mon, 2 Dec 2024 16:36:04 +0800 Subject: [PATCH 2/5] chore: update collection card --- .../src/interfaces/internal/CollectionCard.ts | 5 ++- .../CollectionCard/CollectionCard.stories.tsx | 39 +++++++++++++++++++ .../CollectionCard/CollectionCard.tsx | 7 ++++ .../next/components/internal/Tag/Tag.tsx | 11 +++--- 4 files changed, 54 insertions(+), 8 deletions(-) diff --git a/packages/components/src/interfaces/internal/CollectionCard.ts b/packages/components/src/interfaces/internal/CollectionCard.ts index 023683b172..0edefaa336 100644 --- a/packages/components/src/interfaces/internal/CollectionCard.ts +++ b/packages/components/src/interfaces/internal/CollectionCard.ts @@ -2,7 +2,7 @@ import type { ImageProps } from "~/interfaces" import type { IsomerSiteProps, LinkComponentType } from "~/types" export interface Tag { - title: string + label: string } export interface FileDetails { @@ -10,6 +10,7 @@ export interface FileDetails { size: string } interface BaseCardProps { + tags?: Tag[] lastUpdated?: string category: string title: string @@ -40,7 +41,7 @@ export type AllCardProps = ArticleCardProps | FileCardProps | LinkCardProps // Thus, only the necessary props are passed to this component. export type CollectionCardProps = Pick< AllCardProps, - "lastUpdated" | "category" | "title" | "description" | "image" + "lastUpdated" | "category" | "title" | "description" | "image" | "tags" > & { referenceLinkHref: string | undefined imageSrc: string | undefined diff --git a/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.stories.tsx b/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.stories.tsx index 53d52162db..b6e43101a8 100644 --- a/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.stories.tsx +++ b/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.stories.tsx @@ -3,6 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react" import { withChromaticModes } from "@isomer/storybook-config" import type { CollectionCardProps } from "~/interfaces" +import { Tag } from "~/interfaces/internal/CollectionCard" import { CollectionCard } from "./CollectionCard" const meta: Meta = { @@ -26,12 +27,14 @@ const generateArgs = ({ withoutImage = false, title = "A journal on microscopic plastic and their correlation to the number of staycations enjoyed per millennials between the ages of 30-42, substantiated by research from IDK university", description = "We've looked at how people's spending correlates with how much microscopic plastic they consumed over the year. We've looked at how people's spending correlates with how much microscopic plastic they consumed over the year.", + tags = [], }: { shouldShowDate?: boolean isLastUpdatedUndefined?: boolean withoutImage?: boolean title?: string description?: string + tags?: Tag[] }): Partial & { shouldShowDate?: boolean } => { return { lastUpdated: isLastUpdatedUndefined ? undefined : "December 2, 2023", @@ -48,6 +51,7 @@ const generateArgs = ({ imageSrc: "https://placehold.co/500x500", itemTitle: title, shouldShowDate, + tags, } } @@ -76,3 +80,38 @@ export const ShortDescription: Story = { description: "Short description", }), } + +export const TagsWithImage: Story = { + args: generateArgs({ + title: "Collection card with tags", + description: "This is a random description that will be on the card", + tags: [ + { label: "A tag" }, + { label: "tagged" }, + { + label: + "This is a very long tag that shuold be reflowed on smaller screens maybe", + }, + ], + }), +} + +export const TagsWithoutImage: Story = { + args: generateArgs({ + title: "Collection card without tags", + withoutImage: true, + description: "This is a random description that will be on the card", + tags: [ + { label: "A tag" }, + { label: "tagged" }, + { + label: + "This is a very long tag that should be reflowed on smaller screens maybe", + }, + { + label: + "This is a second long link that should eat into the image area so that we can see how it looks", + }, + ], + }), +} diff --git a/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.tsx b/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.tsx index daf7c56255..d7145d28f4 100644 --- a/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.tsx +++ b/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.tsx @@ -8,6 +8,7 @@ import { tv } from "~/lib/tv" import { focusVisibleHighlight, getFormattedDate } from "~/utils" import { ImageClient } from "../../complex/Image" import { Link } from "../Link" +import { Tag } from "../Tag" const collectionCardLinkStyle = tv({ extend: focusVisibleHighlight, @@ -25,6 +26,7 @@ export const CollectionCard = ({ itemTitle, siteAssetsBaseUrl, shouldShowDate = true, + tags = [], }: CollectionCardProps & { shouldShowDate?: boolean siteAssetsBaseUrl: string | undefined @@ -47,6 +49,11 @@ export const CollectionCard = ({ {itemTitle} +
+ {tags.map(({ label }) => ( + {label} + ))} +
{description && ( {description} diff --git a/packages/components/src/templates/next/components/internal/Tag/Tag.tsx b/packages/components/src/templates/next/components/internal/Tag/Tag.tsx index 771167dfef..06ed177f1e 100644 --- a/packages/components/src/templates/next/components/internal/Tag/Tag.tsx +++ b/packages/components/src/templates/next/components/internal/Tag/Tag.tsx @@ -3,15 +3,14 @@ import { PropsWithChildren } from "react" export const Tag = ( props: PropsWithChildren< React.DetailedHTMLProps< - React.HTMLAttributes, - HTMLDivElement + React.HTMLAttributes, + HTMLParagraphElement > >, ) => { return ( -
+
+

+

) } From 9e1cb970391f8c9ea33f4fa9c40a1636f9d396d4 Mon Sep 17 00:00:00 2001 From: seaerchin Date: Tue, 3 Dec 2024 17:18:21 +0800 Subject: [PATCH 3/5] fix: tag styling only show div if got tags --- .../internal/CollectionCard/CollectionCard.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.tsx b/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.tsx index d7145d28f4..ffec35feea 100644 --- a/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.tsx +++ b/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.tsx @@ -49,11 +49,13 @@ export const CollectionCard = ({ {itemTitle} -
- {tags.map(({ label }) => ( - {label} - ))} -
+ {tags && tags.length > 0 && ( +
+ {tags.map(({ label }) => ( + {label} + ))} +
+ )} {description && ( {description} From a3753f1025f44af23148f0626b4b71b7c5af8d4b Mon Sep 17 00:00:00 2001 From: seaerchin Date: Wed, 4 Dec 2024 13:17:31 +0800 Subject: [PATCH 4/5] chore: fix styling --- .../next/components/internal/CollectionCard/CollectionCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.tsx b/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.tsx index ffec35feea..d83d89dca7 100644 --- a/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.tsx +++ b/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.tsx @@ -50,7 +50,7 @@ export const CollectionCard = ({ {tags && tags.length > 0 && ( -
+
{tags.map(({ label }) => ( {label} ))} From 4dccb22b74d21db65f353acbceccbd42b0172259 Mon Sep 17 00:00:00 2001 From: seaerchin Date: Wed, 11 Dec 2024 16:29:58 +0800 Subject: [PATCH 5/5] chore: update styling --- .../next/components/internal/CollectionCard/CollectionCard.tsx | 2 +- .../src/templates/next/components/internal/Tag/Tag.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.tsx b/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.tsx index d83d89dca7..2e8a47d8a1 100644 --- a/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.tsx +++ b/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.tsx @@ -50,7 +50,7 @@ export const CollectionCard = ({ {tags && tags.length > 0 && ( -
+
{tags.map(({ label }) => ( {label} ))} diff --git a/packages/components/src/templates/next/components/internal/Tag/Tag.tsx b/packages/components/src/templates/next/components/internal/Tag/Tag.tsx index 06ed177f1e..f1558433b8 100644 --- a/packages/components/src/templates/next/components/internal/Tag/Tag.tsx +++ b/packages/components/src/templates/next/components/internal/Tag/Tag.tsx @@ -9,7 +9,7 @@ export const Tag = ( >, ) => { return ( -
+

)