feat(collection tags): frontend changes for tags in collection

packages/components/src/interfaces/internal/CollectionCard.ts

@@ -2,14 +2,15 @@ import type { ImageProps } from "~/interfaces"
 import type { IsomerSiteProps, LinkComponentType } from "~/types"
 
 export interface Tag {
-  title: string
+  label: string
 }
 
 export interface FileDetails {
   type: string
   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

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<typeof CollectionCard> = {
@@ -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<CollectionCardProps> & { 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",
+      },
+    ],
+  }),
+}

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,13 @@ export const CollectionCard = ({
             <span title={itemTitle}>{itemTitle}</span>
           </Link>
         </h3>
+        {tags && tags.length > 0 && (
+          <div className="flex flex-wrap gap-1.5">
+            {tags.map(({ label }) => (
+              <Tag>{label}</Tag>
+            ))}
+          </div>
+        )}
         {description && (
           <Text className="prose-body-base line-clamp-3" title={description}>
             {description}

packages/components/src/templates/next/components/internal/Tag/Tag.tsx

@@ -0,0 +1,16 @@
+import { PropsWithChildren } from "react"
+
+export const Tag = (
+  props: PropsWithChildren<
+    React.DetailedHTMLProps<
+      React.HTMLAttributes<HTMLParagraphElement>,
+      HTMLParagraphElement
+    >
+  >,
+) => {
+  return (
+    <div className="w-fit items-center justify-center rounded-full bg-base-canvas-backdrop px-1.5 py-0.5 text-base-content-subtle">
+      <p className="prose-label-sm-medium line-clamp-1" {...props} />
+    </div>
+  )
+}

packages/components/src/templates/next/components/internal/Tag/index.tsx

@@ -0,0 +1 @@
+export * from "./Tag"