@hashicorp/mds-react 0.9.4 → 0.9.6

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

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

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

@@ -1 +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;"}
+{"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 { FlightIcon } from '../../../components/flight-icon'\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<FlightIcon name=\"twitter\" data-testid={'wpl-personcard-twitter-icon'} />,\n\t],\n\t[\n\t\t'github.com',\n\t\t<FlightIcon name=\"github\" data-testid={'wpl-personcard-github-icon'} />,\n\t],\n\t[\n\t\t'linkedin.com',\n\t\t<FlightIcon name=\"linkedin\" data-testid={'wpl-personcard-linkedin-icon'} />,\n\t],\n\t[\n\t\t'mailto:',\n\t\t<FlightIcon name=\"mail\" data-testid={'wpl-personcard-mail-icon'} />,\n\t],\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 ?? (\n\t\t\t\t<FlightIcon name=\"link\" data-testid={'wpl-personcard-link-icon'} />\n\t\t\t)}\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","FlightIcon","Icon","memo","url","protocol","host","icon","PersonCard","link","thumbnail","name","location","bio","productBadges","jsxs","CardPrimitives","Text"],"mappings":";;;;;;AAkBA,MAAMA,wBAAc,IAAuB;AAAA;AAAA,EAE1C,CAAC,iBAAiB,IAAI;AAAA,EACtB;AAAA,IACC;AAAA,IACA,gBAAAC,EAACC,GAAA,EAAW,MAAK,WAAU,eAAa,8BAAA,CAA+B;AAAA,EAAA;AAAA,EAExE;AAAA,IACC;AAAA,IACA,gBAAAD,EAACC,GAAA,EAAW,MAAK,UAAS,eAAa,6BAAA,CAA8B;AAAA,EAAA;AAAA,EAEtE;AAAA,IACC;AAAA,IACA,gBAAAD,EAACC,GAAA,EAAW,MAAK,YAAW,eAAa,+BAAA,CAAgC;AAAA,EAAA;AAAA,EAE1E;AAAA,IACC;AAAA,IACA,gBAAAD,EAACC,GAAA,EAAW,MAAK,QAAO,eAAa,2BAAA,CAA4B;AAAA,EAAA;AAEnE,CAAC,GAGKC,IAAOC,EAAK,SAAc,EAAE,KAAAC,KAAwB;AACzD,QAAM,EAAE,UAAAC,GAAU,MAAAC,EAAA,IAAS,IAAI,IAAIF,CAAG,GAChCG,IAAOR,EAAQ,IAAIM,MAAa,YAAY,YAAYC,CAAI;AAGlE,SAAIC,MAAS,OACL,OAKP,gBAAAP,EAAC,OAAA,EAAI,WAAW,EAAE,eAChB,UAAAO,KACA,gBAAAP,EAACC,GAAA,EAAW,MAAK,QAAO,eAAa,2BAAA,CAA4B,GAEnE;AAEF,CAAC,GAEKO,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,WAAW,EAAE,oBACjB,UAAA;AAAA,IAAA,gBAAAf,EAACgB,EAAe,iBAAf,EAAgC,GAAGN,EAAA,CAAW;AAAA,IAC/C,gBAAAV,EAACE,GAAA,EAAK,KAAKO,EAAA,CAAM;AAAA,EAAA,GAClB;AAAA,EACA,gBAAAM,EAACC,EAAe,SAAf,EACA,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EACA,UAAA;AAAA,MAAA,gBAAAf,EAACgB,EAAe,SAAf,EAAwB,UAAAL,EAAA,CAAK;AAAA,MAC7BC,IACA,gBAAAZ,EAACiB,EAAK,MAAL,EAAU,KAAI,KAAI,MAAK,OAAM,WAAW,EAAE,UACzC,aACF,IACG;AAAA,IAAA,GACL;AAAA,IACCJ,IACA,gBAAAb,EAACgB,EAAe,aAAf,EAA4B,aAAI,IAC9B;AAAA,IACHF,KAAiBA,GAAe,SAAS,IACzC,gBAAAd,EAACgB,EAAe,eAAf,EAA6B,QAAQF,EAAA,CAAe,IAClD;AAAA,EAAA,EAAA,CACL;AAAA,GACD;AAIFN,EAAW,cAAc;"}

package/patterns/card/primitives.js

@@ -1,11 +1,11 @@
-import { jsxs as o, jsx as r, Fragment as y } from "react/jsx-runtime";
+import { jsxs as o, jsx as e, 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 { FlightIcon as C } from "../../components/flight-icon/index.js";
 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 r from "./style.module.css.js";
 import L from "classnames";
 const d = v((a, t) => {
   const {
@@ -20,7 +20,7 @@ const d = v((a, t) => {
   return /* @__PURE__ */ o(
     w,
     {
-      className: L(e.card, f),
+      className: L(r.card, f),
       href: s,
       onClickCapture: h,
       isExternal: N,
@@ -28,26 +28,26 @@ const d = v((a, t) => {
       "aria-label": b,
       children: [
         g,
-        /* @__PURE__ */ r("div", { className: e.cta, children: i ? /* @__PURE__ */ r(C, {}) : null })
+        /* @__PURE__ */ e("div", { className: r.cta, children: i ? /* @__PURE__ */ e(C, { name: "arrow-right", size: 24 }) : 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 l = ({ items: a }) => /* @__PURE__ */ e("div", { className: r.meta, "data-testid": "wpl-card-meta", children: /* @__PURE__ */ e(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: "|" })
+    s ? null : /* @__PURE__ */ e("span", { className: r.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 });
+l.displayName = "Meta";
+const c = ({ children: a }) => /* @__PURE__ */ e("div", { className: r.content, "data-testid": "wpl-card-content", children: a });
+c.displayName = "Content";
+const m = ({ as: a = "h2", children: t }) => /* @__PURE__ */ e(n.DisplayExpressive, { tag: a, size: "200", className: r.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(
+const p = ({ badges: a, children: t }) => /* @__PURE__ */ o("div", { className: r.productBadges, "data-testid": "wpl-card-badges", children: [
+  a.map((i, s) => /* @__PURE__ */ e(
     x,
     {
       productName: i,
@@ -58,15 +58,15 @@ const p = ({ badges: a, children: t }) => /* @__PURE__ */ o("div", { className:
   t
 ] });
 p.displayName = "ProductBadges";
-const u = ({ children: a }) => /* @__PURE__ */ r(n.Body, { tag: "p", size: "200", className: e.description, children: a });
+const u = ({ children: a }) => /* @__PURE__ */ e(n.Body, { tag: "p", size: "200", className: r.description, children: a });
 u.displayName = "Description";
 const M = {
   Root: d,
   Thumbnail: D,
   PersonThumbnail: B,
   LogoThumbnail: P,
-  Meta: c,
-  Content: l,
+  Meta: l,
+  Content: c,
   Heading: m,
   Description: u,
   ProductBadges: p

package/patterns/card/primitives.js.map

@@ -1 +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;"}
+{"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 { FlightIcon } from '../../components/flight-icon'\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}>\n\t\t\t\t{withArrow ? <FlightIcon name=\"arrow-right\" size={24} /> : null}\n\t\t\t</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","FlightIcon","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,OAAA,EAAI,WAAWD,EAAE,KAChB,UAAAV,IAAY,gBAAAW,EAACC,GAAA,EAAW,MAAK,eAAc,MAAM,GAAA,CAAI,IAAK,KAAA,CAC5D;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGH,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;"}