feat: add links card

packages/react-sample-library/src/components/cards/LinksCard/LinksCard.stories.ts

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { reactComponent as Card } from "./index";
+
+const meta = {
+  title: "Components/Cards/Links Card",
+  component: Card,
+} satisfies Meta<typeof Card>;
+
+type Story = StoryObj<typeof meta>;
+
+export default meta;
+
+export const Default: Story = {
+  args: {
+    headingText: "Links Card",
+    links: [
+      {
+        linkText: "Link 1",
+        href: "https://pantheon.com",
+      },
+      {
+        linkText: "Link 2",
+        href: "https://pantheon.com",
+      },
+      {
+        linkText: "Link 3",
+        href: "https://pantheon.com",
+      },
+    ],
+  },
+};

packages/react-sample-library/src/components/cards/LinksCard/index.tsx

@@ -0,0 +1,83 @@
+import { LinksCard as BaseCard } from "@pantheon-systems/pds-toolkit-react";
+import {
+  InferSmartComponentProps,
+  SmartComponentMap,
+} from "@pantheon-systems/pcc-sdk-core";
+
+/**
+ * Links Card UI component
+ */
+export const reactComponent = ({
+  headingText,
+  links,
+  headingLevel = "h2",
+  className,
+}: InferSmartComponentProps<typeof smartComponentDefinition>) => {
+  const linkItems = links.map((link) => (
+    <a href={link.href}>{link.linkText}</a>
+  ));
+  return (
+    <BaseCard
+      headingText={headingText}
+      linkItems={linkItems}
+      headingLevel={headingLevel}
+      className={className}
+    />
+  );
+};
+
+export const smartComponentDefinition = {
+  title: "Links Card",
+  iconUrl: null,
+  fields: {
+    /**
+     * Link Card heading.
+     */
+    headingText: {
+      displayName: "Heading text",
+      type: "string",
+      required: true,
+    },
+    /**
+     * Link items
+     */
+    links: {
+      displayName: "Links",
+      type: "object",
+      multiple: true,
+      required: true,
+      fields: {
+        /**
+         * Link text
+         */
+        linkText: {
+          displayName: "Link text",
+          type: "string",
+          required: true,
+        },
+        /**
+         * Link location
+         */
+        href: {
+          displayName: "Link URL",
+          type: "string",
+          required: true,
+        },
+      },
+    },
+    /**
+     *  Heading level
+     */
+    headingLevel: {
+      displayName: "Heading level",
+      type: "enum",
+      required: false,
+      options: ["h2", "h3", "h4"],
+    },
+    className: {
+      displayName: "Additional CSS classes",
+      type: "string",
+      required: false,
+    },
+  },
+} as const satisfies SmartComponentMap[string];

packages/react-sample-library/src/components/index.ts

@@ -11,6 +11,7 @@ import * as CTALink from "./CTALink";
 import * as Card from "./cards/Card";
 import * as SelectionCard from "./cards/SelectionCard";
 import * as SiteCard from "./cards/SiteCard";
+import * as LinksCard from "./cards/LinksCard";
 import * as InlineBannerNotification from "./InlineBannerNotification";
 import * as SectionBannerNotification from "./SectionBannerNotification";
 import * as Tooltip from "./Tooltip";
@@ -38,6 +39,10 @@ export const ClientSmartComponentMap: SmartComponentMap = {
     ...SiteCard.smartComponentDefinition,
     reactComponent: SiteCard.reactComponent,
   },
+  PANTHEON_LINKS_CARD: {
+    ...LinksCard.smartComponentDefinition,
+    reactComponent: LinksCard.reactComponent,
+  },
   PANTHEON_INDICATOR_BADGE: {
     ...IndicatorBadge.smartComponentDefinition,
     reactComponent: IndicatorBadge.reactComponent,

packages/react-sample-library/src/pds.d.ts

@@ -116,6 +116,13 @@ interface SiteCardProps {
   className?: string;
 }
 
+interface LinksCardProps {
+  headingText: string;
+  linkItems: React.ReactNode[];
+  headingLevel: "h2" | "h3" | "h4";
+  className?: string;
+}
+
 interface IndicatorBadgeProps {
   variant: "silver" | "gold" | "platinum" | "diamond" | "early-access";
   customLabel?: string;
@@ -129,6 +136,7 @@ declare module "@pantheon-systems/pds-toolkit-react" {
   declare const Card: import("react").FC<CardProps>;
   declare const SelectionCard: import("react").FC<SelectionCardProps>;
   declare const SiteCard: import("react").FC<SiteCardProps>;
+  declare const LinksCard: import("react").FC<LinksCardProps>;
   declare const IndicatorBadge: import("react").FC<IndicatorBadgeProps>;
   declare const Banner: import("react").FC<BannerProps>;
   declare const Blockquote: import("react").FC<BlockquoteProps>;