@hashicorp/mds-react 0.9.0

package/dist/patterns/card/newsroom-card/index.d.ts

@@ -0,0 +1,15 @@
+import { ThumbnailProps } from '../types';
+interface NewsroomCardProps {
+    heading: string;
+    date: string;
+    category: string;
+    link: string;
+    thumbnail?: ThumbnailProps;
+    withArrow?: boolean;
+}
+declare const NewsroomCard: {
+    ({ heading, date, category, link, thumbnail, withArrow, }: NewsroomCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type { NewsroomCardProps };
+export { NewsroomCard };

package/dist/patterns/card/newsroom-card/index.js

@@ -0,0 +1,26 @@
+import { jsx as t } from "react/jsx-runtime";
+import { UnifiedCard as d } from "../unified-card/index.js";
+import i from "./style.module.css.js";
+const f = ({
+  heading: r,
+  date: o,
+  category: m,
+  link: a,
+  thumbnail: e,
+  withArrow: s = !1
+}) => /* @__PURE__ */ t(
+  d,
+  {
+    heading: r,
+    meta: [o, m],
+    link: a,
+    thumbnail: e,
+    withArrow: s,
+    className: i.newsroomCard
+  }
+);
+f.displayName = "NewsroomCard";
+export {
+  f as NewsroomCard
+};
+//# sourceMappingURL=index.js.map

package/dist/patterns/card/newsroom-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/patterns/card/newsroom-card/index.tsx"],"sourcesContent":["import type { ThumbnailProps } from '../types'\nimport { UnifiedCard } from '../unified-card'\nimport s from './style.module.css'\n\ninterface NewsroomCardProps {\n\theading: string\n\tdate: string\n\tcategory: string\n\tlink: string\n\tthumbnail?: ThumbnailProps\n\twithArrow?: boolean\n}\n\nconst NewsroomCard = ({\n\theading,\n\tdate,\n\tcategory,\n\tlink,\n\tthumbnail,\n\twithArrow = false,\n}: NewsroomCardProps) => {\n\treturn (\n\t\t<UnifiedCard\n\t\t\theading={heading}\n\t\t\tmeta={[date, category]}\n\t\t\tlink={link}\n\t\t\tthumbnail={thumbnail}\n\t\t\twithArrow={withArrow}\n\t\t\tclassName={s.newsroomCard}\n\t\t/>\n\t)\n}\n\nNewsroomCard.displayName = 'NewsroomCard'\n\nexport type { NewsroomCardProps }\nexport { NewsroomCard }\n"],"names":["NewsroomCard","heading","date","category","link","thumbnail","withArrow","jsx","UnifiedCard","s"],"mappings":";;;AAaA,MAAMA,IAAe,CAAC;AAAA,EACrB,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AACb,MAEE,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACA,SAAAP;AAAA,IACA,MAAM,CAACC,GAAMC,CAAQ;AAAA,IACrB,MAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAWG,EAAE;AAAA,EAAA;AAAA;AAKhBT,EAAa,cAAc;"}

package/dist/patterns/card/newsroom-card/style.module.css

@@ -0,0 +1,12 @@
+.newsroomCard {
+	& img {
+		padding: var(--mds-spacing-07);
+		aspect-ratio: 16 / 9;
+
+		/* 
+			! HACK: Overrides object-fit set by Thumbnail primitive in Card component styles
+			Ref: https://github.com/hashicorp/web/blob/main/packages/react-components/src/components/card/style.module.css#L75
+		*/
+		object-fit: contain !important;
+	}
+}

package/dist/patterns/card/newsroom-card/style.module.css.js

@@ -0,0 +1,8 @@
+const o = "newsroomCard__5Rb0H", r = {
+  newsroomCard: o
+};
+export {
+  r as default,
+  o as newsroomCard
+};
+//# sourceMappingURL=style.module.css.js.map

package/dist/patterns/card/newsroom-card/style.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/patterns/card/partner-card/index.d.ts

@@ -0,0 +1,18 @@
+import { MDSImageProps } from '../../../utils/mds-context';
+import { CardPatternProps } from '../types';
+interface PartnerCardProps {
+    heading: string;
+    description: string;
+    meta: string[];
+    link: string;
+    productBadges?: CardPatternProps['productBadges'];
+    competencyBadges?: string[];
+    logo: MDSImageProps;
+    className?: string;
+}
+declare const PartnerCard: {
+    ({ heading, description, meta, link, productBadges, competencyBadges, logo, className, }: PartnerCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type { PartnerCardProps };
+export { PartnerCard };

package/dist/patterns/card/partner-card/index.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { useMDSImage as C } from "../../../utils/mds-context/index.js";
+import { Badge as P } from "../../../components/badge/index.js";
+import { Text as u } from "../../../components/text/index.js";
+import { CardPrimitives as t } from "../primitives.js";
+import o from "./style.module.css.js";
+const N = ({
+  heading: n,
+  description: m,
+  meta: d,
+  link: c,
+  productBadges: e,
+  competencyBadges: a,
+  logo: i,
+  className: h
+}) => {
+  const f = C(), p = e && e.length > 0, s = a && a.length > 0;
+  return /* @__PURE__ */ l(
+    t.Root,
+    {
+      link: c,
+      withArrow: !1,
+      isExternal: !1,
+      className: h,
+      "aria-label": n,
+      children: [
+        /* @__PURE__ */ r("div", { className: o.logoContainer, children: /* @__PURE__ */ r(f, { ...i, alt: i.alt, className: o.logo }) }),
+        /* @__PURE__ */ l(t.Content, { children: [
+          /* @__PURE__ */ r(t.Meta, { items: d }),
+          /* @__PURE__ */ r(u.Body, { tag: "p", size: "200", className: o.description, children: m }),
+          p || s ? /* @__PURE__ */ r(t.ProductBadges, { badges: e || [], children: s && a.map((g, x) => /* @__PURE__ */ r(P, { text: g, icon: "dot" }, x)) }) : null
+        ] })
+      ]
+    }
+  );
+};
+N.displayName = "PartnerCard";
+export {
+  N as PartnerCard
+};
+//# sourceMappingURL=index.js.map

package/dist/patterns/card/partner-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/patterns/card/partner-card/index.tsx"],"sourcesContent":["'use client'\n\nimport type { MDSImageProps } from '../../../utils/mds-context'\nimport { useMDSImage } from '../../../utils/mds-context'\nimport { Badge } from '../../../components/badge'\nimport { Text } from '../../../components/text'\nimport { CardPrimitives } from '../primitives'\nimport type { CardPatternProps } from '../types'\nimport s from './style.module.css'\n\ninterface PartnerCardProps {\n\theading: string\n\tdescription: string\n\tmeta: string[]\n\tlink: string\n\tproductBadges?: CardPatternProps['productBadges']\n\tcompetencyBadges?: string[]\n\tlogo: MDSImageProps\n\tclassName?: string\n}\n\nconst PartnerCard = ({\n\theading,\n\tdescription,\n\tmeta,\n\tlink,\n\tproductBadges,\n\tcompetencyBadges,\n\tlogo,\n\tclassName,\n}: PartnerCardProps) => {\n\tconst Image = useMDSImage()\n\n\tconst hasProductBadges = productBadges && productBadges.length > 0\n\tconst hasCompetencyBadges = competencyBadges && competencyBadges.length > 0\n\n\treturn (\n\t\t<CardPrimitives.Root\n\t\t\tlink={link}\n\t\t\twithArrow={false}\n\t\t\tisExternal={false}\n\t\t\tclassName={className}\n\t\t\taria-label={heading}\n\t\t>\n\t\t\t<div className={s.logoContainer}>\n\t\t\t\t<Image {...logo} alt={logo.alt} className={s.logo} />\n\t\t\t</div>\n\t\t\t<CardPrimitives.Content>\n\t\t\t\t<CardPrimitives.Meta items={meta} />\n\t\t\t\t<Text.Body tag=\"p\" size=\"200\" className={s.description}>\n\t\t\t\t\t{description}\n\t\t\t\t</Text.Body>\n\t\t\t\t{hasProductBadges || hasCompetencyBadges ? (\n\t\t\t\t\t<CardPrimitives.ProductBadges badges={productBadges || []}>\n\t\t\t\t\t\t{hasCompetencyBadges &&\n\t\t\t\t\t\t\tcompetencyBadges.map((competencyBadge, stableIdx) => (\n\t\t\t\t\t\t\t\t<Badge key={stableIdx} text={competencyBadge} icon=\"dot\" />\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t</CardPrimitives.ProductBadges>\n\t\t\t\t) : null}\n\t\t\t</CardPrimitives.Content>\n\t\t</CardPrimitives.Root>\n\t)\n}\n\nPartnerCard.displayName = 'PartnerCard'\n\nexport type { PartnerCardProps }\nexport { PartnerCard }\n"],"names":["PartnerCard","heading","description","meta","link","productBadges","competencyBadges","logo","className","Image","hasProductBadges","jsxs","CardPrimitives","jsx","s","Text","hasCompetencyBadges","competencyBadge","stableIdx","Badge"],"mappings":";;;;;;;AAqBqB,MACpBA,IAAA,CAAA;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,eAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,MAAAC;AAAA,EACD,WAAAC;AACC,MAAA;AAEA,QAAMC,MAAmB,GACnBC,IAAAL,KAAsBA,EAAoB,SAAiB,OAGhEC,KAAAA,EAAA,SAAA;AAAA,SAAgB,gBAAAK;AAAA,IAAfC,EAAA;AAAA,IAAA;AAAA,MAEA,MAAAR;AAAA,MACA;MACA,YAAA;AAAA,MACA,WAAAI;AAAA,MAEA,cAAAP;AAAA,MAAA,UAAA;AAAA,QAGA,gBAAAY,EAAA,OAAC,EAAA,4BACA,UAAA,gBAAAA,EAAAJ,GAAA,EAAA,GAAAF,GAAA,KAAAA,EAAA,KAAA,WAAAO,EAAA,KAAA,CAAA,EAAA,CAAA;AAAA,QAAA,gBAAAH,EAAAC,EAAC,SAAoB,EAAA,UAAO;AAAA,UAC5B,gBAAAC,EAACD,EAAU,MAAI,EAAI,OAAKT,EAAA,CAAM;AAAA,UAG7B,gBAAAU,EAAoBE,EAAA,MAAA,EAAA,KAAA,KAAA,MAAA,OAAA,WACnBD,EAAA,aAAe,UAAfZ,EAAqC,CAAA;AAAA,UAMnCQ,KACLM,IAAA,gBAAAH,EAAAD,EAAA,eAAA,EAAA,QAAAP,KAAA,CAAA,GAAA,UAAAW,KAAAV,EAAA,IAAA,CAAAW,GAAAC,MAAA,gBAAAL,EAAAM,GAAA,EAAA,MAAAF,GAAA,MAAA,MAAA,GAAAC,CAAA,CAAA,EAAA,CAAA,IAAA;AAAA,QAAA,EAAA,CAAA;AAAA,MAAA;AAAA,IACD;AAAA,EAEF;AAEA;;"}

package/dist/patterns/card/partner-card/style.module.css

@@ -0,0 +1,24 @@
+.description {
+	-webkit-box-orient: vertical;
+	display: -webkit-box;
+	-webkit-line-clamp: 4;
+	max-width: 100%;
+	overflow: hidden;
+}
+
+.logoContainer {
+	position: relative;
+	display: flex;
+	aspect-ratio: 16 / 9;
+	overflow: hidden;
+	align-items: center;
+	justify-content: center;
+	background: var(--mds-color-surface-faint);
+}
+
+.logo {
+	max-width: 232px;
+	max-height: 64px;
+	height: auto;
+	width: auto;
+}

package/dist/patterns/card/partner-card/style.module.css.js

@@ -0,0 +1,12 @@
+const o = "description__-1CDK", n = "logoContainer__9VUWm", t = "logo__E1-po", i = {
+  description: o,
+  logoContainer: n,
+  logo: t
+};
+export {
+  i as default,
+  o as description,
+  t as logo,
+  n as logoContainer
+};
+//# sourceMappingURL=style.module.css.js.map

package/dist/patterns/card/partner-card/style.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/patterns/card/person-card/index.d.ts

@@ -0,0 +1,15 @@
+import { ProductBadgesProps, ThumbnailProps } from '../types';
+interface PersonCardProps {
+    thumbnail: ThumbnailProps;
+    link: string;
+    name: string;
+    location?: string;
+    bio?: string;
+    productBadges?: ProductBadgesProps['badges'];
+}
+declare const PersonCard: {
+    ({ link, thumbnail, name, location, bio, productBadges, }: PersonCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type { PersonCardProps };
+export { PersonCard };

package/dist/patterns/card/person-card/index.js

@@ -0,0 +1,52 @@
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import { memo as s } from "react";
+import { Text as d } from "../../../components/text/index.js";
+import { IconGithub16 as p } from "@hashicorp/flight-icons/svg-react/github-16";
+import { IconTwitter16 as h } from "@hashicorp/flight-icons/svg-react/twitter-16";
+import { IconLinkedin16 as u } from "@hashicorp/flight-icons/svg-react/linkedin-16";
+import { IconLink16 as f } from "@hashicorp/flight-icons/svg-react/link-16";
+import { IconMail16 as w } from "@hashicorp/flight-icons/svg-react/mail-16";
+import { CardPrimitives as i } from "../primitives.js";
+import m from "./style.module.css.js";
+const I = /* @__PURE__ */ new Map([
+  // null signals that we don't want to render any icon
+  ["hashicorp.com", null],
+  [
+    "twitter.com",
+    /* @__PURE__ */ o(h, { "data-testid": "wpl-personcard-twitter-icon" })
+  ],
+  ["github.com", /* @__PURE__ */ o(p, { "data-testid": "wpl-personcard-github-icon" })],
+  [
+    "linkedin.com",
+    /* @__PURE__ */ o(u, { "data-testid": "wpl-personcard-linkedin-icon" })
+  ],
+  ["mailto:", /* @__PURE__ */ o(w, { "data-testid": "wpl-personcard-mail-icon" })]
+]), b = s(function({ url: a }) {
+  const { protocol: t, host: r } = new URL(a), n = I.get(t === "mailto:" ? "mailto:" : r);
+  return n === null ? null : /* @__PURE__ */ o("div", { className: m.thumbnailIcon, children: n ?? /* @__PURE__ */ o(f, { "data-testid": "wpl-personcard-link-icon" }) });
+}), g = ({
+  link: l,
+  thumbnail: a,
+  name: t,
+  location: r,
+  bio: n,
+  productBadges: c
+}) => /* @__PURE__ */ e(i.Root, { link: l, withArrow: !1, "aria-label": t, children: [
+  /* @__PURE__ */ e("div", { className: m.thumbnailContainer, children: [
+    /* @__PURE__ */ o(i.PersonThumbnail, { ...a }),
+    /* @__PURE__ */ o(b, { url: l })
+  ] }),
+  /* @__PURE__ */ e(i.Content, { children: [
+    /* @__PURE__ */ e("div", { children: [
+      /* @__PURE__ */ o(i.Heading, { children: t }),
+      r ? /* @__PURE__ */ o(d.Body, { tag: "p", size: "200", className: m.location, children: r }) : null
+    ] }),
+    n ? /* @__PURE__ */ o(i.Description, { children: n }) : null,
+    c && c?.length > 0 ? /* @__PURE__ */ o(i.ProductBadges, { badges: c }) : null
+  ] })
+] });
+g.displayName = "PersonCard";
+export {
+  g as PersonCard
+};
+//# sourceMappingURL=index.js.map

package/dist/patterns/card/person-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/patterns/card/person-card/index.tsx"],"sourcesContent":["import { memo, type ReactNode } from 'react'\nimport { Text } from '../../../components/text'\nimport { IconGithub16 } from '@hashicorp/flight-icons/svg-react/github-16'\nimport { IconTwitter16 } from '@hashicorp/flight-icons/svg-react/twitter-16'\nimport { IconLinkedin16 } from '@hashicorp/flight-icons/svg-react/linkedin-16'\nimport { IconLink16 } from '@hashicorp/flight-icons/svg-react/link-16'\nimport { IconMail16 } from '@hashicorp/flight-icons/svg-react/mail-16'\nimport type { ProductBadgesProps, ThumbnailProps } from '../types'\nimport { CardPrimitives } from '../primitives'\nimport s from './style.module.css'\n\ninterface PersonCardProps {\n\tthumbnail: ThumbnailProps\n\tlink: string\n\tname: string\n\tlocation?: string\n\tbio?: string\n\tproductBadges?: ProductBadgesProps['badges']\n}\n\n// Map of hostnames to icons.\n/* eslint-disable react/jsx-key */\nconst iconMap = new Map<string, ReactNode>([\n\t// null signals that we don't want to render any icon\n\t['hashicorp.com', null],\n\t[\n\t\t'twitter.com',\n\t\t<IconTwitter16 data-testid={'wpl-personcard-twitter-icon'} />,\n\t],\n\t['github.com', <IconGithub16 data-testid={'wpl-personcard-github-icon'} />],\n\t[\n\t\t'linkedin.com',\n\t\t<IconLinkedin16 data-testid={'wpl-personcard-linkedin-icon'} />,\n\t],\n\t['mailto:', <IconMail16 data-testid={'wpl-personcard-mail-icon'} />],\n])\n/* eslint-enable react/jsx-key */\n\nconst Icon = memo(function Icon({ url }: { url: string }) {\n\tconst { protocol, host } = new URL(url)\n\tconst icon = iconMap.get(protocol === 'mailto:' ? 'mailto:' : host)\n\n\t// If the icon value is null, don't render an icon\n\tif (icon === null) {\n\t\treturn null\n\t}\n\n\t// Render the icon or the default icon if the icon value is undefined\n\treturn (\n\t\t<div className={s.thumbnailIcon}>\n\t\t\t{icon ?? <IconLink16 data-testid={'wpl-personcard-link-icon'} />}\n\t\t</div>\n\t)\n})\n\nconst PersonCard = ({\n\tlink,\n\tthumbnail,\n\tname,\n\tlocation,\n\tbio,\n\tproductBadges,\n}: PersonCardProps) => {\n\treturn (\n\t\t<CardPrimitives.Root link={link} withArrow={false} aria-label={name}>\n\t\t\t<div className={s.thumbnailContainer}>\n\t\t\t\t<CardPrimitives.PersonThumbnail {...thumbnail} />\n\t\t\t\t<Icon url={link} />\n\t\t\t</div>\n\t\t\t<CardPrimitives.Content>\n\t\t\t\t<div>\n\t\t\t\t\t<CardPrimitives.Heading>{name}</CardPrimitives.Heading>\n\t\t\t\t\t{location ? (\n\t\t\t\t\t\t<Text.Body tag=\"p\" size=\"200\" className={s.location}>\n\t\t\t\t\t\t\t{location}\n\t\t\t\t\t\t</Text.Body>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t\t{bio ? (\n\t\t\t\t\t<CardPrimitives.Description>{bio}</CardPrimitives.Description>\n\t\t\t\t) : null}\n\t\t\t\t{productBadges && productBadges?.length > 0 ? (\n\t\t\t\t\t<CardPrimitives.ProductBadges badges={productBadges} />\n\t\t\t\t) : null}\n\t\t\t</CardPrimitives.Content>\n\t\t</CardPrimitives.Root>\n\t)\n}\n\nPersonCard.displayName = 'PersonCard'\n\nexport type { PersonCardProps }\nexport { PersonCard }\n"],"names":["iconMap","jsx","IconTwitter16","IconGithub16","IconLinkedin16","IconMail16","Icon","memo","url","protocol","host","icon","s","IconLink16","PersonCard","link","thumbnail","name","location","bio","productBadges","jsxs","CardPrimitives","Text"],"mappings":";;;;;;;;;;AAsBA,MAAMA,wBAAc,IAAuB;AAAA;AAAA,EAE1C,CAAC,iBAAiB,IAAI;AAAA,EACtB;AAAA,IACC;AAAA,IACA,gBAAAC,EAACC,GAAA,EAAc,eAAa,8BAAA,CAA+B;AAAA,EAAA;AAAA,EAE5D,CAAC,cAAc,gBAAAD,EAACE,GAAA,EAAa,eAAa,8BAA8B,CAAE;AAAA,EAC1E;AAAA,IACC;AAAA,IACA,gBAAAF,EAACG,GAAA,EAAe,eAAa,+BAAA,CAAgC;AAAA,EAAA;AAAA,EAE9D,CAAC,WAAW,gBAAAH,EAACI,GAAA,EAAW,eAAa,4BAA4B,CAAE;AACpE,CAAC,GAGKC,IAAOC,EAAK,SAAc,EAAE,KAAAC,KAAwB;AACzD,QAAM,EAAE,UAAAC,GAAU,MAAAC,EAAA,IAAS,IAAI,IAAIF,CAAG,GAChCG,IAAOX,EAAQ,IAAIS,MAAa,YAAY,YAAYC,CAAI;AAGlE,SAAIC,MAAS,OACL,OAKP,gBAAAV,EAAC,OAAA,EAAI,WAAWW,EAAE,eAChB,eAAQ,gBAAAX,EAACY,GAAA,EAAW,eAAa,2BAAA,CAA4B,EAAA,CAC/D;AAEF,CAAC,GAEKC,IAAa,CAAC;AAAA,EACnB,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,KAAAC;AAAA,EACA,eAAAC;AACD,MAEE,gBAAAC,EAACC,EAAe,MAAf,EAAoB,MAAAP,GAAY,WAAW,IAAO,cAAYE,GAC9D,UAAA;AAAA,EAAA,gBAAAI,EAAC,OAAA,EAAI,WAAWT,EAAE,oBACjB,UAAA;AAAA,IAAA,gBAAAX,EAACqB,EAAe,iBAAf,EAAgC,GAAGN,EAAA,CAAW;AAAA,IAC/C,gBAAAf,EAACK,GAAA,EAAK,KAAKS,EAAA,CAAM;AAAA,EAAA,GAClB;AAAA,EACA,gBAAAM,EAACC,EAAe,SAAf,EACA,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EACA,UAAA;AAAA,MAAA,gBAAApB,EAACqB,EAAe,SAAf,EAAwB,UAAAL,EAAA,CAAK;AAAA,MAC7BC,IACA,gBAAAjB,EAACsB,EAAK,MAAL,EAAU,KAAI,KAAI,MAAK,OAAM,WAAWX,EAAE,UACzC,aACF,IACG;AAAA,IAAA,GACL;AAAA,IACCO,IACA,gBAAAlB,EAACqB,EAAe,aAAf,EAA4B,aAAI,IAC9B;AAAA,IACHF,KAAiBA,GAAe,SAAS,IACzC,gBAAAnB,EAACqB,EAAe,eAAf,EAA6B,QAAQF,EAAA,CAAe,IAClD;AAAA,EAAA,EAAA,CACL;AAAA,GACD;AAIFN,EAAW,cAAc;"}

package/dist/patterns/card/person-card/style.module.css

@@ -0,0 +1,28 @@
+.location {
+	margin: 0;
+	color: var(--mds-color-foreground-faint);
+}
+
+.thumbnailContainer {
+	position: relative;
+}
+
+.thumbnailIcon {
+	--size: 40px;
+
+	position: absolute;
+	bottom: 20px;
+	right: 20px;
+	width: var(--size);
+	height: var(--size);
+	display: grid;
+	place-items: center;
+	border-radius: 9999px;
+	overflow: hidden;
+	background-color: white;
+	opacity: 0.5;
+
+	& svg {
+		position: relative;
+	}
+}

package/dist/patterns/card/person-card/style.module.css.js

@@ -0,0 +1,12 @@
+const n = "location__OjUu5", t = "thumbnailContainer__ATYhC", o = "thumbnailIcon__Sx-P-", a = {
+  location: n,
+  thumbnailContainer: t,
+  thumbnailIcon: o
+};
+export {
+  a as default,
+  n as location,
+  t as thumbnailContainer,
+  o as thumbnailIcon
+};
+//# sourceMappingURL=style.module.css.js.map

package/dist/patterns/card/person-card/style.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/patterns/card/primitives.d.ts

@@ -0,0 +1,37 @@
+import { CardPrimitiveProps, MetaProps, ContentProps, HeadingProps, ProductBadgesProps, DescriptionProps } from './types';
+declare const CardPrimitives: {
+    Root: import('react').ForwardRefExoticComponent<CardPrimitiveProps & import('react').RefAttributes<HTMLDivElement>>;
+    Thumbnail: {
+        ({ src, alt }: import('./types').ThumbnailProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    PersonThumbnail: {
+        ({ src, alt }: import('./types').ThumbnailProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    LogoThumbnail: {
+        ({ src, alt }: import('./types').ThumbnailProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Meta: {
+        ({ items }: MetaProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        ({ children }: ContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Heading: {
+        ({ as, children }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Description: {
+        ({ children }: DescriptionProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    ProductBadges: {
+        ({ badges, children }: ProductBadgesProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export { CardPrimitives };

package/dist/patterns/card/primitives.js

@@ -0,0 +1,77 @@
+import { jsxs as o, jsx as r, Fragment as y } from "react/jsx-runtime";
+import { forwardRef as v } from "react";
+import { Card as w } from "../../components/card/index.js";
+import { Text as n } from "../../components/text/index.js";
+import { IconArrowRight24 as C } from "@hashicorp/flight-icons/svg-react/arrow-right-24";
+import { ProductBadge as x } from "../product-badge/index.js";
+import { LogoThumbnail as P, PersonThumbnail as B, Thumbnail as D } from "./thumbnails/index.js";
+import e from "./style.module.css.js";
+import L from "classnames";
+const d = v((a, t) => {
+  const {
+    withArrow: i = !0,
+    link: s,
+    clickHandler: h,
+    isExternal: N,
+    children: g,
+    className: f,
+    "aria-label": b
+  } = a;
+  return /* @__PURE__ */ o(
+    w,
+    {
+      className: L(e.card, f),
+      href: s,
+      onClickCapture: h,
+      isExternal: N,
+      ref: t,
+      "aria-label": b,
+      children: [
+        g,
+        /* @__PURE__ */ r("div", { className: e.cta, children: i ? /* @__PURE__ */ r(C, {}) : null })
+      ]
+    }
+  );
+});
+d.displayName = "CardPrimitives.Root";
+const c = ({ items: a }) => /* @__PURE__ */ r("div", { className: e.meta, "data-testid": "wpl-card-meta", children: /* @__PURE__ */ r(n.Label, { children: a.map((t, i) => {
+  const s = i === a.length - 1;
+  return /* @__PURE__ */ o(y, { children: [
+    t,
+    s ? null : /* @__PURE__ */ r("span", { className: e.metaSeparator, "aria-hidden": !0, children: "|" })
+  ] });
+}) }) });
+c.displayName = "Meta";
+const l = ({ children: a }) => /* @__PURE__ */ r("div", { className: e.content, "data-testid": "wpl-card-content", children: a });
+l.displayName = "Content";
+const m = ({ as: a = "h2", children: t }) => /* @__PURE__ */ r(n.DisplayExpressive, { tag: a, size: "200", className: e.heading, children: t });
+m.displayName = "Heading";
+const p = ({ badges: a, children: t }) => /* @__PURE__ */ o("div", { className: e.productBadges, "data-testid": "wpl-card-badges", children: [
+  a.map((i, s) => /* @__PURE__ */ r(
+    x,
+    {
+      productName: i,
+      hasDot: !0
+    },
+    `product-badge-${s}`
+  )),
+  t
+] });
+p.displayName = "ProductBadges";
+const u = ({ children: a }) => /* @__PURE__ */ r(n.Body, { tag: "p", size: "200", className: e.description, children: a });
+u.displayName = "Description";
+const M = {
+  Root: d,
+  Thumbnail: D,
+  PersonThumbnail: B,
+  LogoThumbnail: P,
+  Meta: c,
+  Content: l,
+  Heading: m,
+  Description: u,
+  ProductBadges: p
+};
+export {
+  M as CardPrimitives
+};
+//# sourceMappingURL=primitives.js.map

package/dist/patterns/card/primitives.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.js","sources":["../../../src/patterns/card/primitives.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Card as MDSCard } from '../../components/card'\nimport { Text } from '../../components/text'\nimport { IconArrowRight24 } from '@hashicorp/flight-icons/svg-react/arrow-right-24'\nimport { ProductBadge } from '../product-badge'\nimport { Thumbnail, PersonThumbnail, LogoThumbnail } from './thumbnails'\nimport type {\n\tCardPrimitiveProps,\n\tMetaProps,\n\tContentProps,\n\tHeadingProps,\n\tProductBadgesProps,\n\tDescriptionProps,\n} from './types'\nimport s from './style.module.css'\nimport classNames from 'classnames'\n\nconst Root = forwardRef<HTMLDivElement, CardPrimitiveProps>((props, ref) => {\n\tconst {\n\t\twithArrow = true,\n\t\tlink,\n\t\tclickHandler,\n\t\tisExternal,\n\t\tchildren,\n\t\tclassName,\n\t\t'aria-label': ariaLabel,\n\t} = props\n\n\treturn (\n\t\t<MDSCard\n\t\t\tclassName={classNames(s.card, className)}\n\t\t\thref={link}\n\t\t\tonClickCapture={clickHandler}\n\t\t\tisExternal={isExternal}\n\t\t\tref={ref}\n\t\t\taria-label={ariaLabel}\n\t\t>\n\t\t\t{children}\n\t\t\t<div className={s.cta}>{withArrow ? <IconArrowRight24 /> : null}</div>\n\t\t</MDSCard>\n\t)\n})\n\nRoot.displayName = 'CardPrimitives.Root'\n\nconst Meta = ({ items }: MetaProps) => {\n\treturn (\n\t\t<div className={s.meta} data-testid=\"wpl-card-meta\">\n\t\t\t<Text.Label>\n\t\t\t\t{items.map((item, stableIdx) => {\n\t\t\t\t\tconst isLastItem = stableIdx === items.length - 1\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{item}\n\t\t\t\t\t\t\t{!isLastItem ? (\n\t\t\t\t\t\t\t\t<span className={s.metaSeparator} aria-hidden={true}>\n\t\t\t\t\t\t\t\t\t|\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t</>\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t</Text.Label>\n\t\t</div>\n\t)\n}\n\nMeta.displayName = 'Meta'\n\nconst Content = ({ children }: ContentProps) => {\n\treturn (\n\t\t<div className={s.content} data-testid=\"wpl-card-content\">\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\nContent.displayName = 'Content'\n\nconst Heading = ({ as = 'h2', children }: HeadingProps) => {\n\treturn (\n\t\t<Text.DisplayExpressive tag={as} size=\"200\" className={s.heading}>\n\t\t\t{children}\n\t\t</Text.DisplayExpressive>\n\t)\n}\n\nHeading.displayName = 'Heading'\n\nconst ProductBadges = ({ badges, children }: ProductBadgesProps) => {\n\treturn (\n\t\t<div className={s.productBadges} data-testid=\"wpl-card-badges\">\n\t\t\t{badges.map((badge, stableIdx) => {\n\t\t\t\treturn (\n\t\t\t\t\t<ProductBadge\n\t\t\t\t\t\t// eslint-disable-next-line react/no-array-index-key\n\t\t\t\t\t\tkey={`product-badge-${stableIdx}`}\n\t\t\t\t\t\tproductName={badge}\n\t\t\t\t\t\thasDot={true}\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t})}\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\nProductBadges.displayName = 'ProductBadges'\n\nconst Description = ({ children }: DescriptionProps) => {\n\treturn (\n\t\t<Text.Body tag=\"p\" size=\"200\" className={s.description}>\n\t\t\t{children}\n\t\t</Text.Body>\n\t)\n}\n\nDescription.displayName = 'Description'\n\nconst CardPrimitives = {\n\tRoot,\n\tThumbnail,\n\tPersonThumbnail,\n\tLogoThumbnail,\n\tMeta,\n\tContent,\n\tHeading,\n\tDescription,\n\tProductBadges,\n}\n\nexport { CardPrimitives }\n"],"names":["Root","forwardRef","props","ref","withArrow","link","clickHandler","isExternal","children","className","ariaLabel","jsxs","MDSCard","classNames","s","jsx","IconArrowRight24","Meta","items","Text","item","stableIdx","isLastItem","Fragment","Content","Heading","as","ProductBadges","badges","badge","ProductBadge","Description","CardPrimitives","Thumbnail","PersonThumbnail","LogoThumbnail"],"mappings":";;;;;;;;;AAiBA,MAAMA,IAAOC,EAA+C,CAACC,GAAOC,MAAQ;AAC3E,QAAM;AAAA,IACL,WAAAC,IAAY;AAAA,IACZ,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAcC;AAAA,EAAA,IACXR;AAEJ,SACC,gBAAAS;AAAA,IAACC;AAAAA,IAAA;AAAA,MACA,WAAWC,EAAWC,EAAE,MAAML,CAAS;AAAA,MACvC,MAAMJ;AAAA,MACN,gBAAgBC;AAAA,MAChB,YAAAC;AAAA,MACA,KAAAJ;AAAA,MACA,cAAYO;AAAA,MAEX,UAAA;AAAA,QAAAF;AAAA,QACD,gBAAAO,EAAC,SAAI,WAAWD,EAAE,KAAM,UAAAV,IAAY,gBAAAW,EAACC,GAAA,CAAA,CAAiB,IAAK,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnE,CAAC;AAEDhB,EAAK,cAAc;AAEnB,MAAMiB,IAAO,CAAC,EAAE,OAAAC,QAEd,gBAAAH,EAAC,OAAA,EAAI,WAAWD,EAAE,MAAM,eAAY,iBACnC,UAAA,gBAAAC,EAACI,EAAK,OAAL,EACC,UAAAD,EAAM,IAAI,CAACE,GAAMC,MAAc;AAC/B,QAAMC,IAAaD,MAAcH,EAAM,SAAS;AAChD,SACC,gBAAAP,EAAAY,GAAA,EACE,UAAA;AAAA,IAAAH;AAAA,IACCE,IAIE,OAHH,gBAAAP,EAAC,QAAA,EAAK,WAAWD,EAAE,eAAe,eAAa,IAAM,UAAA,IAAA,CAErD;AAAA,EACG,GACL;AAEF,CAAC,GACF,GACD;AAIFG,EAAK,cAAc;AAEnB,MAAMO,IAAU,CAAC,EAAE,UAAAhB,0BAEhB,OAAA,EAAI,WAAWM,EAAE,SAAS,eAAY,oBACrC,UAAAN,GACF;AAIFgB,EAAQ,cAAc;AAEtB,MAAMC,IAAU,CAAC,EAAE,IAAAC,IAAK,MAAM,UAAAlB,QAE5B,gBAAAO,EAACI,EAAK,mBAAL,EAAuB,KAAKO,GAAI,MAAK,OAAM,WAAWZ,EAAE,SACvD,UAAAN,EAAA,CACF;AAIFiB,EAAQ,cAAc;AAEtB,MAAME,IAAgB,CAAC,EAAE,QAAAC,GAAQ,UAAApB,0BAE9B,OAAA,EAAI,WAAWM,EAAE,eAAe,eAAY,mBAC3C,UAAA;AAAA,EAAAc,EAAO,IAAI,CAACC,GAAOR,MAElB,gBAAAN;AAAA,IAACe;AAAA,IAAA;AAAA,MAGA,aAAaD;AAAA,MACb,QAAQ;AAAA,IAAA;AAAA,IAFH,iBAAiBR,CAAS;AAAA,EAAA,CAKjC;AAAA,EACAb;AAAA,GACF;AAIFmB,EAAc,cAAc;AAE5B,MAAMI,IAAc,CAAC,EAAE,UAAAvB,QAErB,gBAAAO,EAACI,EAAK,MAAL,EAAU,KAAI,KAAI,MAAK,OAAM,WAAWL,EAAE,aACzC,UAAAN,EAAA,CACF;AAIFuB,EAAY,cAAc;AAE1B,MAAMC,IAAiB;AAAA,EACtB,MAAAhC;AAAA,EACA,WAAAiC;AAAA,EACA,iBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,MAAAlB;AAAA,EACA,SAAAO;AAAA,EACA,SAAAC;AAAA,EACA,aAAAM;AAAA,EACA,eAAAJ;AACD;"}

package/dist/patterns/card/promo-card/index.d.ts

@@ -0,0 +1,18 @@
+import { ThumbnailProps } from '../types';
+interface PromoCardProps {
+    heading: string;
+    description?: string;
+    eyebrow?: string;
+    link: string;
+    clickHandler?: () => void;
+    thumbnail?: ThumbnailProps;
+    withArrow?: boolean;
+    isExternal?: boolean;
+    className?: string;
+}
+declare const PromoCard: {
+    ({ heading, description, eyebrow, link, clickHandler, thumbnail, withArrow, isExternal, className, }: PromoCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type { PromoCardProps };
+export { PromoCard };

package/dist/patterns/card/promo-card/index.js

@@ -0,0 +1,36 @@
+import { jsxs as n, jsx as l } from "react/jsx-runtime";
+import { CardPrimitives as r } from "../primitives.js";
+const f = ({
+  heading: e,
+  description: i,
+  eyebrow: o,
+  link: t,
+  clickHandler: m,
+  thumbnail: a,
+  withArrow: s = !1,
+  isExternal: d = !1,
+  className: c
+}) => /* @__PURE__ */ n(
+  r.Root,
+  {
+    link: t,
+    withArrow: s,
+    isExternal: d,
+    className: c,
+    clickHandler: m,
+    "aria-label": e,
+    children: [
+      a ? /* @__PURE__ */ l(r.Thumbnail, { ...a }) : null,
+      /* @__PURE__ */ n(r.Content, { children: [
+        o ? /* @__PURE__ */ l(r.Meta, { items: [o] }) : null,
+        /* @__PURE__ */ l(r.Heading, { children: e }),
+        i ? /* @__PURE__ */ l(r.Description, { children: i }) : null
+      ] })
+    ]
+  }
+);
+f.displayName = "PromoCard";
+export {
+  f as PromoCard
+};
+//# sourceMappingURL=index.js.map

package/dist/patterns/card/promo-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/patterns/card/promo-card/index.tsx"],"sourcesContent":["import { CardPrimitives } from '../primitives'\nimport type { ThumbnailProps } from '../types'\n\ninterface PromoCardProps {\n\theading: string\n\tdescription?: string\n\teyebrow?: string\n\tlink: string\n\tclickHandler?: () => void\n\tthumbnail?: ThumbnailProps\n\twithArrow?: boolean\n\tisExternal?: boolean\n\tclassName?: string\n}\n\nconst PromoCard = ({\n\theading,\n\tdescription,\n\teyebrow,\n\tlink,\n\tclickHandler,\n\tthumbnail,\n\twithArrow = false,\n\tisExternal = false,\n\tclassName,\n}: PromoCardProps) => {\n\treturn (\n\t\t<CardPrimitives.Root\n\t\t\tlink={link}\n\t\t\twithArrow={withArrow}\n\t\t\tisExternal={isExternal}\n\t\t\tclassName={className}\n\t\t\tclickHandler={clickHandler}\n\t\t\taria-label={heading}\n\t\t>\n\t\t\t{thumbnail ? <CardPrimitives.Thumbnail {...thumbnail} /> : null}\n\t\t\t<CardPrimitives.Content>\n\t\t\t\t{eyebrow ? <CardPrimitives.Meta items={[eyebrow]} /> : null}\n\t\t\t\t<CardPrimitives.Heading>{heading}</CardPrimitives.Heading>\n\t\t\t\t{description ? (\n\t\t\t\t\t<CardPrimitives.Description>{description}</CardPrimitives.Description>\n\t\t\t\t) : null}\n\t\t\t</CardPrimitives.Content>\n\t\t</CardPrimitives.Root>\n\t)\n}\n\nPromoCard.displayName = 'PromoCard'\n\nexport type { PromoCardProps }\nexport { PromoCard }\n"],"names":["PromoCard","heading","description","eyebrow","link","clickHandler","thumbnail","withArrow","isExternal","className","jsxs","CardPrimitives","jsx"],"mappings":";;AAeA,MAAMA,IAAY,CAAC;AAAA,EAClB,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,WAAAC;AACD,MAEE,gBAAAC;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACA,MAAAP;AAAA,IACA,WAAAG;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAJ;AAAA,IACA,cAAYJ;AAAA,IAEX,UAAA;AAAA,MAAAK,sBAAaK,EAAe,WAAf,EAA0B,GAAGL,GAAW,IAAK;AAAA,MAC3D,gBAAAI,EAACC,EAAe,SAAf,EACC,UAAA;AAAA,QAAAR,IAAU,gBAAAS,EAACD,EAAe,MAAf,EAAoB,OAAO,CAACR,CAAO,GAAG,IAAK;AAAA,QACvD,gBAAAS,EAACD,EAAe,SAAf,EAAwB,UAAAV,EAAA,CAAQ;AAAA,QAChCC,IACA,gBAAAU,EAACD,EAAe,aAAf,EAA4B,aAAY,IACtC;AAAA,MAAA,EAAA,CACL;AAAA,IAAA;AAAA,EAAA;AAAA;AAKHX,EAAU,cAAc;"}

package/dist/patterns/card/resource-card/index.d.ts

@@ -0,0 +1,16 @@
+import { CardPatternProps, ThumbnailProps } from '../types';
+interface ResourceCardProps {
+    heading: string;
+    date?: string;
+    category: string;
+    link: string;
+    productBadges?: CardPatternProps['productBadges'];
+    thumbnail: ThumbnailProps;
+    isExternal?: CardPatternProps['isExternal'];
+}
+declare const ResourceCard: {
+    ({ heading, date, category, link, productBadges, thumbnail, isExternal, }: ResourceCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type { ResourceCardProps };
+export { ResourceCard };

package/dist/patterns/card/resource-card/index.js

@@ -0,0 +1,26 @@
+import { jsx as i } from "react/jsx-runtime";
+import { UnifiedCard as d } from "../unified-card/index.js";
+const n = ({
+  heading: o,
+  date: r,
+  category: e,
+  link: m,
+  productBadges: s,
+  thumbnail: t,
+  isExternal: a
+}) => /* @__PURE__ */ i(
+  d,
+  {
+    link: m,
+    meta: r ? [r, e] : [e],
+    productBadges: s,
+    thumbnail: t,
+    isExternal: a,
+    heading: o
+  }
+);
+n.displayName = "ResourceCard";
+export {
+  n as ResourceCard
+};
+//# sourceMappingURL=index.js.map

package/dist/patterns/card/resource-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/patterns/card/resource-card/index.tsx"],"sourcesContent":["import type { CardPatternProps, ThumbnailProps } from '../types'\nimport { UnifiedCard } from '../unified-card'\n\ninterface ResourceCardProps {\n\theading: string\n\tdate?: string\n\tcategory: string\n\tlink: string\n\tproductBadges?: CardPatternProps['productBadges']\n\tthumbnail: ThumbnailProps\n\tisExternal?: CardPatternProps['isExternal']\n}\n\nconst ResourceCard = ({\n\theading,\n\tdate,\n\tcategory,\n\tlink,\n\tproductBadges,\n\tthumbnail,\n\tisExternal,\n}: ResourceCardProps) => {\n\tconst meta: string[] = date ? [date, category] : [category]\n\n\treturn (\n\t\t<UnifiedCard\n\t\t\tlink={link}\n\t\t\tmeta={meta}\n\t\t\tproductBadges={productBadges}\n\t\t\tthumbnail={thumbnail}\n\t\t\tisExternal={isExternal}\n\t\t\theading={heading}\n\t\t/>\n\t)\n}\n\nResourceCard.displayName = 'ResourceCard'\n\nexport type { ResourceCardProps }\nexport { ResourceCard }\n"],"names":["ResourceCard","heading","date","category","link","productBadges","thumbnail","isExternal","jsx","UnifiedCard"],"mappings":";;AAaA,MAAMA,IAAe,CAAC;AAAA,EACrB,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AACD,MAIE,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACA,MAAAL;AAAA,IACA,MALqBF,IAAO,CAACA,GAAMC,CAAQ,IAAI,CAACA,CAAQ;AAAA,IAMxD,eAAAE;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAN;AAAA,EAAA;AAAA;AAKHD,EAAa,cAAc;"}