@hashicorp/mds-react 0.9.0

package/dist/components/card/index.js

@@ -0,0 +1,157 @@
+"use client";
+import { jsxs as d, jsx as a, Fragment as v } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
+import { CardThumbnail as k } from "./card-thumbnail/index.js";
+import { useMDSLink as A } from "../../utils/mds-context/index.js";
+import { Text as c } from "../text/index.js";
+import g from "classnames";
+import { Badge as E } from "../badge/index.js";
+import { StandaloneLink as u } from "../standalone-link/index.js";
+import { IconArrowRight24 as L } from "@hashicorp/flight-icons/svg-react/arrow-right-24";
+import e from "./styles.module.css.js";
+const f = x(
+  ({
+    children: r,
+    className: o,
+    content: i,
+    ctaLabel: t,
+    href: n,
+    standaloneLink: l,
+    isExternal: s,
+    onClickCapture: m,
+    "aria-label": C
+  }, b) => {
+    const w = A(), p = n && !t, N = s ? { target: "_blank", rel: "noopener noreferrer" } : {};
+    return /* @__PURE__ */ d(
+      "div",
+      {
+        ref: b,
+        className: g(
+          e.card,
+          { [e.interactive]: p },
+          o
+        ),
+        children: [
+          p && /* @__PURE__ */ a(
+            w,
+            {
+              href: n,
+              className: e.link,
+              draggable: "false",
+              onClickCapture: m,
+              "aria-label": C,
+              ...N
+            }
+          ),
+          i && /* @__PURE__ */ a(
+            P,
+            {
+              badges: i.badges,
+              description: i.description,
+              eyebrow: i.eyebrow,
+              heading: i.heading,
+              subheading: i.subheading,
+              thumbnail: i.thumbnail,
+              showArrow: i.showArrow && !!p,
+              cta: {
+                ctaLabel: t,
+                href: n,
+                standaloneLink: l,
+                onClickCapture: m,
+                isExternal: s
+              }
+            }
+          ),
+          r,
+          r && /* @__PURE__ */ a(
+            h,
+            {
+              ctaLabel: t,
+              href: n,
+              standaloneLink: l,
+              onClickCapture: m,
+              isExternal: s
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+f.displayName = "Card";
+const P = ({
+  badges: r,
+  description: o,
+  eyebrow: i,
+  heading: t,
+  thumbnail: n,
+  subheading: l,
+  cta: s,
+  showArrow: m
+}) => /* @__PURE__ */ d("div", { className: g(e.content, { [e["has-thumbnail"]]: n }), children: [
+  n && /* @__PURE__ */ a(k, { ...n }),
+  /* @__PURE__ */ d("div", { className: e.contentLockup, children: [
+    /* @__PURE__ */ a(B, { children: i }),
+    /* @__PURE__ */ a(z, { children: t }),
+    /* @__PURE__ */ a(D, { children: l }),
+    /* @__PURE__ */ a(T, { children: o }),
+    /* @__PURE__ */ a(j, { badges: r }),
+    s && /* @__PURE__ */ a(
+      h,
+      {
+        ctaLabel: s.ctaLabel,
+        href: s.href,
+        standaloneLink: s.standaloneLink,
+        isExternal: s.isExternal,
+        onClickCapture: s.onClickCapture
+      }
+    ),
+    m ? /* @__PURE__ */ a("div", { className: e.arrow, children: /* @__PURE__ */ a(L, {}) }) : null
+  ] })
+] }), h = ({
+  href: r,
+  ctaLabel: o,
+  standaloneLink: i,
+  isExternal: t,
+  onClickCapture: n
+}) => {
+  const l = r && !o;
+  if (i) {
+    const s = {
+      ...i,
+      icon: i.icon || "chevron-right",
+      iconPosition: i.iconPosition || "trailing"
+    };
+    return /* @__PURE__ */ a(u, { className: e.cta, ...s });
+  }
+  return r && !l && o ? /* @__PURE__ */ a(
+    u,
+    {
+      className: e.cta,
+      text: o,
+      href: r,
+      icon: "chevron-right",
+      iconPosition: "trailing",
+      color: "secondary",
+      onClickCapture: n,
+      isHrefExternal: t
+    }
+  ) : null;
+}, B = ({ children: r }) => r ? Array.isArray(r) ? /* @__PURE__ */ a(S, { items: Array.from(r) }) : /* @__PURE__ */ a(y, { children: r }) : null, S = ({ items: r }) => /* @__PURE__ */ a("ul", { className: e.meta, children: r.map((o, i) => /* @__PURE__ */ d("li", { children: [
+  /* @__PURE__ */ a(y, { children: o }),
+  i < r.length - 1 ? /* @__PURE__ */ a("span", { className: e.metaSeparator, "aria-hidden": !0, children: "|" }) : null
+] }, o)) }), y = ({ children: r }) => r ? /* @__PURE__ */ a(c.Label, { color: "faint", weight: "medium", children: r }) : null, z = ({ children: r }) => r ? /* @__PURE__ */ a(
+  c.DisplayExpressive,
+  {
+    tag: "span",
+    size: "200",
+    weight: "semibold",
+    color: "strong",
+    children: r
+  }
+) : null, D = ({ children: r }) => r ? /* @__PURE__ */ a(c.Body, { tag: "span", size: "200", className: e.subheading, color: "primary", children: r }) : null, T = ({ children: r }) => r ? typeof r == "string" ? /* @__PURE__ */ a(c.Body, { tag: "span", size: "200", color: "primary", children: r }) : /* @__PURE__ */ a(v, { children: r }) : null, j = ({ badges: r }) => r && r.length > 0 ? /* @__PURE__ */ a("div", { className: e.badges, children: r.map((o) => /* @__PURE__ */ a(E, { ...o }, o.text)) }) : null;
+f.displayName = "Card";
+export {
+  f as Card
+};
+//# sourceMappingURL=index.js.map

package/dist/components/card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/card/index.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, type PropsWithChildren } from 'react'\nimport type { CardContentProps, CardProps, CardCtaProps } from './types'\nimport { CardThumbnail } from './card-thumbnail'\nimport { useMDSLink } from '../../utils/mds-context'\nimport { Text } from '../text'\nimport classNames from 'classnames'\nimport { Badge } from '../badge'\nimport { StandaloneLink } from '../standalone-link'\nimport { IconArrowRight24 } from '@hashicorp/flight-icons/svg-react/arrow-right-24'\nimport s from './styles.module.css'\n\nconst Card = forwardRef<HTMLDivElement, CardProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tcontent,\n\t\t\tctaLabel,\n\t\t\thref,\n\t\t\tstandaloneLink,\n\t\t\tisExternal,\n\t\t\tonClickCapture,\n\t\t\t'aria-label': ariaLabel,\n\t\t},\n\t\tref\n\t) => {\n\t\tconst Link = useMDSLink()\n\n\t\tconst isCardLink = href && !ctaLabel\n\n\t\tconst linkProps = isExternal\n\t\t\t? { target: '_blank', rel: 'noopener noreferrer' }\n\t\t\t: {}\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={classNames(\n\t\t\t\t\ts.card,\n\t\t\t\t\t{ [s.interactive]: isCardLink },\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{isCardLink && (\n\t\t\t\t\t<Link\n\t\t\t\t\t\thref={href}\n\t\t\t\t\t\tclassName={s.link}\n\t\t\t\t\t\tdraggable=\"false\"\n\t\t\t\t\t\tonClickCapture={onClickCapture}\n\t\t\t\t\t\taria-label={ariaLabel}\n\t\t\t\t\t\t{...linkProps}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{content && (\n\t\t\t\t\t<CardContent\n\t\t\t\t\t\tbadges={content.badges}\n\t\t\t\t\t\tdescription={content.description}\n\t\t\t\t\t\teyebrow={content.eyebrow}\n\t\t\t\t\t\theading={content.heading}\n\t\t\t\t\t\tsubheading={content.subheading}\n\t\t\t\t\t\tthumbnail={content.thumbnail}\n\t\t\t\t\t\tshowArrow={content.showArrow && !!isCardLink}\n\t\t\t\t\t\tcta={{\n\t\t\t\t\t\t\tctaLabel,\n\t\t\t\t\t\t\thref,\n\t\t\t\t\t\t\tstandaloneLink,\n\t\t\t\t\t\t\tonClickCapture,\n\t\t\t\t\t\t\tisExternal,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{children}\n\t\t\t\t{children && (\n\t\t\t\t\t<CardCta\n\t\t\t\t\t\tctaLabel={ctaLabel}\n\t\t\t\t\t\thref={href}\n\t\t\t\t\t\tstandaloneLink={standaloneLink}\n\t\t\t\t\t\tonClickCapture={onClickCapture}\n\t\t\t\t\t\tisExternal={isExternal}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t)\n\t}\n)\n\nCard.displayName = 'Card'\n\nconst CardContent = ({\n\tbadges,\n\tdescription,\n\teyebrow,\n\theading,\n\tthumbnail,\n\tsubheading,\n\tcta,\n\tshowArrow,\n}: CardContentProps) => {\n\treturn (\n\t\t<div className={classNames(s.content, { [s['has-thumbnail']]: thumbnail })}>\n\t\t\t{thumbnail && <CardThumbnail {...thumbnail} />}\n\t\t\t<div className={s.contentLockup}>\n\t\t\t\t<CardEyebrow>{eyebrow}</CardEyebrow>\n\t\t\t\t<CardHeading>{heading}</CardHeading>\n\t\t\t\t<CardSubheading>{subheading}</CardSubheading>\n\t\t\t\t<CardDescription>{description}</CardDescription>\n\t\t\t\t<Badges badges={badges} />\n\t\t\t\t{cta && (\n\t\t\t\t\t<CardCta\n\t\t\t\t\t\tctaLabel={cta.ctaLabel}\n\t\t\t\t\t\thref={cta.href}\n\t\t\t\t\t\tstandaloneLink={cta.standaloneLink}\n\t\t\t\t\t\tisExternal={cta.isExternal}\n\t\t\t\t\t\tonClickCapture={cta.onClickCapture}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{showArrow ? (\n\t\t\t\t\t<div className={s.arrow}>\n\t\t\t\t\t\t<IconArrowRight24 />\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n\nconst CardCta = ({\n\thref,\n\tctaLabel,\n\tstandaloneLink,\n\tisExternal,\n\tonClickCapture,\n}: CardCtaProps) => {\n\tconst isCardLink = href && !ctaLabel\n\n\tif (standaloneLink) {\n\t\tconst standaloneLinkProps = {\n\t\t\t...standaloneLink,\n\t\t\ticon: standaloneLink.icon || 'chevron-right',\n\t\t\ticonPosition: standaloneLink.iconPosition || 'trailing',\n\t\t}\n\n\t\treturn <StandaloneLink className={s.cta} {...standaloneLinkProps} />\n\t}\n\n\tif (href && !isCardLink && ctaLabel) {\n\t\treturn (\n\t\t\t<StandaloneLink\n\t\t\t\tclassName={s.cta}\n\t\t\t\ttext={ctaLabel}\n\t\t\t\thref={href}\n\t\t\t\ticon=\"chevron-right\"\n\t\t\t\ticonPosition=\"trailing\"\n\t\t\t\tcolor=\"secondary\"\n\t\t\t\tonClickCapture={onClickCapture}\n\t\t\t\tisHrefExternal={isExternal}\n\t\t\t/>\n\t\t)\n\t}\n\n\treturn null\n}\n\nconst CardEyebrow = ({ children }: PropsWithChildren) => {\n\tif (!children) {\n\t\treturn null\n\t}\n\n\tif (Array.isArray(children)) {\n\t\treturn <CardEyebrowList items={Array.from(children)} />\n\t}\n\n\treturn <CardEyebrowText>{children}</CardEyebrowText>\n}\n\nconst CardEyebrowList = ({ items }: { items: string[] }) => (\n\t<ul className={s.meta}>\n\t\t{items.map((item, idx) => (\n\t\t\t<li key={item}>\n\t\t\t\t<CardEyebrowText>{item}</CardEyebrowText>\n\t\t\t\t{idx < items.length - 1 ? (\n\t\t\t\t\t<span className={s.metaSeparator} aria-hidden={true}>\n\t\t\t\t\t\t|\n\t\t\t\t\t</span>\n\t\t\t\t) : null}\n\t\t\t</li>\n\t\t))}\n\t</ul>\n)\n\nconst CardEyebrowText = ({ children }: PropsWithChildren) =>\n\tchildren ? (\n\t\t<Text.Label color=\"faint\" weight=\"medium\">\n\t\t\t{children}\n\t\t</Text.Label>\n\t) : null\n\nconst CardHeading = ({ children }: PropsWithChildren) =>\n\tchildren ? (\n\t\t<Text.DisplayExpressive\n\t\t\ttag=\"span\"\n\t\t\tsize=\"200\"\n\t\t\tweight=\"semibold\"\n\t\t\tcolor=\"strong\"\n\t\t>\n\t\t\t{children}\n\t\t</Text.DisplayExpressive>\n\t) : null\n\nconst CardSubheading = ({ children }: PropsWithChildren) =>\n\tchildren ? (\n\t\t<Text.Body tag=\"span\" size=\"200\" className={s.subheading} color=\"primary\">\n\t\t\t{children}\n\t\t</Text.Body>\n\t) : null\n\nconst CardDescription = ({ children }: PropsWithChildren) => {\n\tif (!children) {\n\t\treturn null\n\t}\n\n\tif (typeof children === 'string') {\n\t\treturn (\n\t\t\t<Text.Body tag=\"span\" size=\"200\" color=\"primary\">\n\t\t\t\t{children}\n\t\t\t</Text.Body>\n\t\t)\n\t}\n\n\treturn <>{children}</>\n}\n\nconst Badges = ({ badges }: { badges: CardContentProps['badges'] }) =>\n\tbadges && badges.length > 0 ? (\n\t\t<div className={s.badges}>\n\t\t\t{badges.map((badge) => (\n\t\t\t\t<Badge key={badge.text} {...badge} />\n\t\t\t))}\n\t\t</div>\n\t) : null\n\nCard.displayName = 'Card'\nexport { Card }\n"],"names":["Card","forwardRef","children","className","content","ctaLabel","href","standaloneLink","isExternal","onClickCapture","ariaLabel","ref","Link","useMDSLink","isCardLink","jsxs","classNames","s","jsx","linkProps","CardContent","CardCta","badges","description","eyebrow","heading","thumbnail","subheading","cta","showArrow","CardThumbnail","CardEyebrow","CardHeading","CardSubheading","CardDescription","IconArrowRight24","standaloneLinkProps","StandaloneLink","CardEyebrowList","CardEyebrowText","items","item","idx","Text","Fragment","Badges","badge","Badge"],"mappings":"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"}

package/dist/components/card/styles.module.css

@@ -0,0 +1,98 @@
+.card {
+	position: relative;
+	background-color: var(--mds-color-surface-primary);
+	color: var(--mds-color-foreground-primary);
+	border-radius: 6px;
+	box-shadow: var(--mds-surface-base-box-shadow);
+	overflow: hidden;
+
+	&:focus-within {
+		outline-color: var(--mds-color-focus-action-external);
+		outline-width: 2px;
+		outline-style: solid;
+		outline-offset: 0;
+	}
+}
+
+.interactive {
+	transition: 0.2s ease;
+	transition-property: transform, box-shadow, border-color, background-color;
+
+	&:hover {
+		box-shadow: var(--mds-surface-mid-box-shadow);
+		transform: translateY(-2px);
+
+		& .arrow {
+			transform: translateX(2px);
+		}
+	}
+
+	&:active {
+		box-shadow: var(--mds-surface-high-box-shadow);
+	}
+}
+
+.link {
+	position: absolute;
+	inset: 0;
+	z-index: 1;
+}
+
+.cta {
+	position: relative;
+	z-index: 2;
+	margin-top: auto;
+}
+
+.content {
+	display: grid;
+	grid-template-rows: auto;
+	border-radius: inherit;
+	height: 100%;
+
+	&.has-thumbnail {
+		grid-template-rows: max-content auto;
+	}
+}
+
+.subheading {
+	margin-top: calc(-1 * var(--mds-spacing-04));
+}
+
+.contentLockup {
+	display: flex;
+	flex-direction: column;
+	padding: var(--mds-spacing-07);
+	gap: var(--mds-spacing-04);
+}
+
+.badges {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--mds-spacing-02);
+}
+
+.meta {
+	color: var(--mds-color-foreground-faint);
+	text-transform: uppercase;
+	margin: 0;
+	display: flex;
+	flex-wrap: wrap;
+	list-style: none;
+	padding: 0;
+}
+
+.metaSeparator {
+	--padding-x: 12px;
+
+	padding-left: var(--padding-x);
+	padding-right: var(--padding-x);
+}
+
+.arrow {
+	display: flex;
+	justify-content: flex-end;
+	margin-top: auto;
+	transition: 0.2s ease;
+	transition-property: transform;
+}

package/dist/components/card/styles.module.css.js

@@ -0,0 +1,29 @@
+const t = "card__HomZw", a = "interactive__Irpce", n = "arrow__qnBL7", c = "link__Dz3Nf", e = "cta__UfNG2", o = "content__SiycH", _ = "subheading__MM0J8", s = "contentLockup__08EYi", r = "badges__GrCpe", i = "meta__8eKyE", d = "metaSeparator__44API", m = {
+  card: t,
+  interactive: a,
+  arrow: n,
+  link: c,
+  cta: e,
+  content: o,
+  "has-thumbnail": "has-thumbnail__ftF14",
+  subheading: _,
+  contentLockup: s,
+  badges: r,
+  meta: i,
+  metaSeparator: d
+};
+export {
+  n as arrow,
+  r as badges,
+  t as card,
+  o as content,
+  s as contentLockup,
+  e as cta,
+  m as default,
+  a as interactive,
+  c as link,
+  i as meta,
+  d as metaSeparator,
+  _ as subheading
+};
+//# sourceMappingURL=styles.module.css.js.map

package/dist/components/card/styles.module.css.js.map

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

package/dist/components/card/types.d.ts

@@ -0,0 +1,52 @@
+import { BadgeProps } from '../badge';
+import { ReactNode } from 'react';
+import { StandaloneLinkProps } from '../standalone-link';
+interface CardPropsBase {
+    className?: string;
+    ctaLabel?: string;
+    href?: string;
+    standaloneLink?: StandaloneLinkProps;
+    onClickCapture?: React.MouseEventHandler<HTMLAnchorElement>;
+    isExternal?: boolean;
+    'aria-label'?: string;
+}
+export type CardProps = (CardPropsBase & {
+    content: CardContentProps;
+    children?: never;
+}) | (CardPropsBase & {
+    content?: never;
+    children: React.ReactNode;
+});
+type Digit = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
+type NonZeroDigit = Exclude<Digit, '0'>;
+type CardThumbnailAspectRatio = `${NonZeroDigit}/${NonZeroDigit}` | `${NonZeroDigit}/${NonZeroDigit}${Digit}` | `${NonZeroDigit}${Digit}/${NonZeroDigit}` | `${NonZeroDigit}${Digit}/${NonZeroDigit}${Digit}`;
+export interface CardThumbnailProps {
+    src: string;
+    alt: string;
+    /**
+     * The aspect ratio of the image, specified as a string in the format `width/height`.
+     * This follows the same format as the CSS `aspect-ratio` property.
+     *
+     * @example "16/9" - This would represent an aspect ratio of 16:9.
+     * @example "4/3" - This would represent an aspect ratio of 4:3.
+     */
+    aspectRatio: CardThumbnailAspectRatio;
+}
+export interface CardContentProps {
+    badges?: BadgeProps[];
+    cta?: CardCtaProps;
+    eyebrow?: ReactNode;
+    heading?: string;
+    subheading?: string;
+    description?: React.ReactNode;
+    thumbnail?: CardThumbnailProps;
+    showArrow?: boolean;
+}
+export interface CardCtaProps {
+    href?: string;
+    ctaLabel?: string;
+    standaloneLink?: StandaloneLinkProps;
+    onClickCapture?: React.MouseEventHandler<HTMLAnchorElement>;
+    isExternal?: boolean;
+}
+export {};