@hashicorp/react-components 0.0.0-canary.29ac326 → 0.0.0-canary.32599ff

package/src/components/nav-panel/standard-panel/style.module.css

@@ -1,8 +1,8 @@
 .columns {
 	display: flex;
-	gap: var(--hdsplus-spacing-03);
+	gap: var(--mds-spacing-03);
 	flex-direction: column;
-	margin-top: var(--hdsplus-spacing-06);
+	margin-top: var(--mds-spacing-07);
 
 	@media (--large) {
 		flex-direction: row;

package/src/components/next-steps/index.tsx

@@ -2,6 +2,7 @@
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
  */
+'use client'
 
 import { useState } from 'react'
 import Badge from '@hashicorp/react-badge'
@@ -10,7 +11,7 @@ import ExpandableArrow from '@hashicorp/react-expandable-arrow'
 import Intro from '../intro'
 import Link from 'next/link'
 import type { NextStepsProps } from './types'
-import StandaloneLink from '@hashicorp/react-design-system-components/src/components/standalone-link'
+import { HDSPlusStandaloneLink } from '@hashicorp/react-mds/src/hds-plus/standalone-link'
 import { IconArrowRight16 } from '@hashicorp/flight-icons/svg-react/arrow-right-16'
 import useProductMeta from '@hashicorp/platform-product-meta'
 import s from './style.module.css'
@@ -69,7 +70,7 @@ export default function NextSteps({
 					{cta ? (
 						<div className={s.cta}>
 							<p className={s.ctaCopy}>{cta.copy}</p>
-							<StandaloneLink
+							<HDSPlusStandaloneLink
 								href={cta.href}
 								text={cta.ctaText}
 								icon={

package/src/components/next-steps/style.module.css

@@ -4,21 +4,21 @@
  */
 
 .nextSteps {
-	--padding-y: var(--wpl-spacing-10);
+	--padding-y: var(--mds-spacing-12);
 
 	position: relative;
 	padding-top: var(--padding-y);
 	padding-bottom: var(--padding-y);
 
 	@media (--medium-up) {
-		--padding-y: var(--wpl-spacing-13);
+		--padding-y: var(--mds-spacing-14);
 	}
 }
 
 .container {
 	composes: g-grid-container from global;
 	composes: g-grid from global;
-	row-gap: var(--wpl-spacing-06);
+	row-gap: var(--mds-spacing-08);
 	align-items: flex-start;
 }
 
@@ -31,14 +31,14 @@
 }
 
 .heading {
-	--color: var(--black);
+	--color: var(--wpl-neutral-900);
 
 	composes: g-type-display-2 from global;
 	margin: 0;
 	color: var(--color);
 
 	@nest .dark & {
-		--color: var(--white);
+		--color: var(--wpl-neutral-0);
 	}
 }
 
@@ -46,7 +46,7 @@
 	--color: var(--gray-3);
 
 	composes: g-type-body-large from global;
-	margin: var(--wpl-spacing-05) 0 0;
+	margin: var(--mds-spacing-07) 0 0;
 	color: var(--color);
 
 	@nest .dark & {
@@ -55,19 +55,19 @@
 }
 
 .actions {
-	margin-top: var(--wpl-spacing-06);
+	margin-top: var(--mds-spacing-08);
 }
 
 .stepsWrapper {
-	--grid-gap: var(--wpl-spacing-05);
+	--grid-gap: var(--mds-spacing-07);
 
 	display: flex;
 	flex-direction: column;
-	gap: var(--wpl-spacing-05);
+	gap: var(--mds-spacing-07);
 	grid-column: 1 / -1;
 
 	@media (--large) {
-		--grid-gap: var(--wpl-spacing-06);
+		--grid-gap: var(--mds-spacing-08);
 
 		grid-column: 6 / -1;
 	}
@@ -112,7 +112,7 @@
 	width: 100%;
 	min-height: 208px;
 	flex-direction: column;
-	padding: var(--wpl-spacing-06);
+	padding: var(--mds-spacing-08);
 	background-color: var(--background-color);
 	color: var(--color);
 	border-radius: var(--border-radius);
@@ -159,7 +159,7 @@
 
 		@nest .dark & {
 			--background-color: var(--wpl-neutral-700);
-			--color: var(--white);
+			--color: var(--wpl-neutral-0);
 
 			&:hover {
 				--background-color: var(--wpl-neutral-600);
@@ -202,7 +202,7 @@
 
 .tileBadge {
 	display: inline-flex;
-	margin: 0 0 0 var(--wpl-spacing-02);
+	margin: 0 0 0 var(--mds-spacing-04);
 	vertical-align: middle;
 }
 
@@ -233,7 +233,7 @@
 
 .tileCta {
 	margin-top: auto;
-	padding-top: var(--wpl-spacing-05);
+	padding-top: var(--mds-spacing-07);
 	display: inline-flex;
 	align-items: center;
 	gap: 8px;
@@ -243,8 +243,8 @@
 .tileCtaLabel {
 	font-size: 0.875rem;
 	line-height: 1.143;
-	font-weight: var(--token-typography-font-weight-medium);
-	font-family: var(--token-typography-font-stack-text);
+	font-weight: var(--mds-typography-font-weight-medium);
+	font-family: var(--mds-typography-font-stack-text);
 }
 
 .tileCtaIcon {
@@ -255,8 +255,8 @@
 	grid-column: 1/ -1;
 	display: flex;
 	flex-wrap: wrap;
-	column-gap: var(--wpl-spacing-03);
-	row-gap: var(--wpl-spacing-01);
+	column-gap: var(--mds-spacing-05);
+	row-gap: var(--mds-spacing-03);
 }
 
 .ctaCopy {

package/src/components/product-badge/index.tsx

@@ -4,7 +4,7 @@
  */
 
 import type { Products } from '@hashicorp/platform-product-meta'
-import Badge from '@hashicorp/react-design-system-components/src/components/badge'
+import { Badge } from '@hashicorp/react-mds/src/components/badge'
 import { IconDot16 } from '@hashicorp/flight-icons/svg-react/dot-16'
 import s from './style.module.css'
 

package/src/components/product-badge/style.module.css

@@ -47,8 +47,8 @@
 .text {
 	display: inline-block;
 	position: relative;
-	font-family: var(--font-body);
-	font-weight: var(--font-weight-bold);
+	font-family: var(--mds-typography-font-stack-text);
+	font-weight: var(--mds-typography-font-weight-bold);
 	font-size: 14px;
 	letter-spacing: 0.0125em;
 	text-transform: capitalize;

package/src/components/products-used/style.module.css

@@ -9,7 +9,7 @@
 
 .eyebrow {
 	composes: g-type-label-strong from global;
-	margin: 0 0 var(--hdsplus-spacing-05) 0;
+	margin: 0 0 var(--mds-spacing-05) 0;
 	color: var(--token-color-foreground-faint);
 
 	&.dark {
@@ -23,11 +23,11 @@
 	flex-wrap: wrap;
 	padding: 0;
 	list-style-type: none;
-	row-gap: var(--hdsplus-spacing-03);
-	column-gap: var(--hdsplus-spacing-05);
+	row-gap: var(--mds-spacing-03);
+	column-gap: var(--mds-spacing-05);
 
 	&.isSmallerGap {
-		column-gap: var(--hdsplus-spacing-03);
+		column-gap: var(--mds-spacing-03);
 	}
 }
 
@@ -37,8 +37,8 @@
 
 	&[href] {
 		min-height: 40px;
-		padding: var(--hdsplus-spacing-03) var(--hdsplus-spacing-04);
-		border-radius: calc(var(--hdsplus-spacing-03) / 2);
+		padding: var(--mds-spacing-03) var(--mds-spacing-04);
+		border-radius: calc(var(--mds-spacing-03) / 2);
 		border: 1px solid var(--token-color-border-primary);
 		transition: background-color 0.2s, border 0.2s;
 
@@ -76,7 +76,7 @@
 }
 
 .productName {
-	composes: hds-typography-body-100 hds-font-weight-medium from global;
+	composes: token-typography-body-100 mds-typography-font-weight-medium from global;
 	font-size: 14px;
 	text-transform: capitalize;
 	color: var(--token-color-foreground-primary);

package/src/components/related-content/index.tsx

@@ -10,7 +10,7 @@ import type { RelatedContentProps } from './types'
 import s from './style.module.css'
 
 const RelatedContent = ({
-	appearance = 'light',
+	appearance = 'transparent',
 	headline,
 	description,
 	cards,
@@ -18,37 +18,36 @@ const RelatedContent = ({
 }: RelatedContentProps) => {
 	return (
 		<div
-			className={classNames([
-				s.wrapper,
-				s[appearance],
-				{ ['hdsplus-dark-mode']: appearance === 'dark' },
-			])}
+			className={classNames(s.root, s[appearance], {
+				['mds-dark-mode']: appearance === 'dark',
+			})}
 		>
-			<div className={s.textStack}>
-				<h2 className={classNames([s.headline, s[appearance]])}>{headline}</h2>
-				{description ? (
-					<p className={classNames([s.description, s[appearance]])}>
-						{description}
-					</p>
+			<div className={s.wrapper}>
+				<div className={s.textStack}>
+					<h2 className={s.headline}>{headline}</h2>
+					{description ? <p className={s.description}>{description}</p> : null}
+				</div>
+				<div className={s.cards} data-testid="wpl-cards-container">
+					{cards.map((card, i) => (
+						<Card
+							key={i}
+							link={card.link}
+							thumbnail={card.thumbnail}
+							meta={card.meta}
+							heading={card.heading}
+							description={card.description}
+						/>
+					))}
+				</div>
+
+				{cta ? (
+					<div className={s.cta} data-testid="wpl-cta-container">
+						<Link href={cta.href} legacyBehavior>
+							{cta.text}
+						</Link>
+					</div>
 				) : null}
 			</div>
-			<div className={s.cards} data-testid="wpl-cards-container">
-				{cards.map((card, i) => (
-					<Card
-						key={i}
-						link={card.link}
-						thumbnail={card.thumbnail}
-						meta={card.meta}
-						heading={card.heading}
-						description={card.description}
-					/>
-				))}
-			</div>
-			<div className={s.cta} data-testid="wpl-cta-container">
-				<Link href={cta.href} legacyBehavior>
-					{cta.text}
-				</Link>
-			</div>
 		</div>
 	)
 }

package/src/components/related-content/style.module.css

@@ -3,87 +3,85 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
+.root {
+	width: 100%;
+	background-color: var(--token-color-surface-primary);
+
+	&.transparent {
+		background-color: transparent;
+	}
+}
+
 .wrapper {
-  composes: g-grid from global;
-  composes: g-grid-container from global;
-  padding-top: 64px;
-  padding-bottom: 64px;
+	composes: g-grid from global;
+	composes: g-grid-container from global;
+	padding-top: var(--mds-spacing-12);
+	padding-bottom: var(--mds-spacing-12);
 
-  @media (--large) {
-    padding-top: 88px;
-    padding-bottom: 88px;
-  }
-  &.dark {
-    background-color: var(--wpl-neutral-900);
-  }
+	@media (--large) {
+		padding-top: 88px;
+		padding-bottom: 88px;
+	}
 }
 
 .textStack {
-  grid-column: 1 / -1;
-  margin-bottom: 24px;
+	grid-column: 1 / -1;
+	margin-bottom: var(--mds-spacing-07);
 
-  @media (--medium) {
-    grid-column: 1 / span 7;
-    margin-bottom: 32px;
-  }
+	@media (--medium) {
+		grid-column: 1 / span 7;
+		margin-bottom: var(--mds-spacing-08);
+	}
 
-  @media (--large) {
-    grid-column: 1 / span 6;
-    margin-bottom: 32px;
-  }
+	@media (--large) {
+		grid-column: 1 / span 6;
+		margin-bottom: var(--mds-spacing-08);
+	}
 }
 
 .headline {
-  composes: g-type-display-3 from global;
-  color: var(--wpl-neutral-900);
-  margin: 0 0 16px 0;
-
-  &.dark {
-    color: white;
-  }
+	composes: g-type-display-3 from global;
+	color: var(--token-color-foreground-primary);
+	margin: 0 0 var(--mds-spacing-05) 0;
 }
 
 .description {
-  composes: g-type-body from global;
-  color: var(--wpl-neutral-500);
-  margin: 0;
-
-  &.dark {
-    color: white;
-  }
+	composes: g-type-body from global;
+	color: var(--token-color-foreground-faint);
+	margin: 0;
 }
 
 .cards {
-  --columns: 1;
+	--columns: 1;
 
-  grid-column: 1 / -1;
-  display: grid;
-  grid-gap: 32px;
-  grid-template-columns: repeat(var(--columns), 1fr);
-  margin-bottom: 32px;
+	grid-column: 1 / -1;
+	display: grid;
+	grid-gap: var(--mds-spacing-08);
+	grid-template-columns: repeat(var(--columns), 1fr);
+	margin-bottom: var(--mds-spacing-08);
 
-  @media (--medium) {
-    --columns: 2;
-  }
-  @media (--large) {
-    --columns: 4;
-  }
+	@media (--medium) {
+		--columns: 2;
+	}
+	@media (--large) {
+		--columns: 4;
+	}
 }
 
 .cta {
-  grid-column: 1 / -1;
+	grid-column: 1 / -1;
 
-  & a {
-    font-weight: 500;
-    font-size: 17px;
-    line-height: 20px;
-    letter-spacing: 0.0125em;
-    text-decoration: underline;
-    text-underline-offset: 3px;
-    display: inline;
+	& a {
+		font-weight: 500;
+		font-size: 17px;
+		line-height: 20px;
+		letter-spacing: 0.0125em;
+		text-decoration: underline;
+		text-underline-offset: 3px;
+		display: inline;
 
-    @nest .dark & {
-      color: var(--wpl-neutral-300);
-    }
-  }
+		@nest .dark & {
+			color: var(--token-color-foreground-faint);
+		}
+	}
 }

package/src/components/related-content/types.ts

@@ -6,11 +6,11 @@
 import type { CardProps } from '../card/types'
 
 export interface RelatedContentProps {
-	appearance?: 'light' | 'dark'
+	appearance?: 'light' | 'dark' | 'transparent'
 	headline: string
 	description?: string
 	cards: Array<RelatedContentCardProps>
-	cta: RelatedContentCtaProps
+	cta?: RelatedContentCtaProps
 }
 
 interface RelatedContentCtaProps {

package/src/components/subnav/index.tsx

@@ -17,7 +17,6 @@ import CtaLinks, { type CtaLinkProps } from './partials/CtaLinks'
 import traverse, { isObject } from './helpers/traverse'
 import { areBasePathsMatching } from './helpers/areBasePathsMatching'
 import * as NavigationMenu from '@radix-ui/react-navigation-menu'
-import themeStyles from './theme.module.css'
 import s from './style.module.css'
 
 const productAllowList = {
@@ -47,6 +46,7 @@ type SubnavDropdown = {
 type MenuItem = SubnavLink | SubnavDropdown | 'divider'
 
 export interface SubnavInnerProps {
+	locale?: string
 	hasOverflow?: boolean
 	titleLink: { text: string; url: string }
 	product?: Products
@@ -62,6 +62,7 @@ export interface SubnavInnerProps {
 }
 
 function SubnavInner({
+	locale,
 	hasOverflow,
 	titleLink,
 	product,
@@ -110,17 +111,20 @@ function SubnavInner({
 			>
 				<NavigationMenu.Link asChild>
 					<TitleLink
+						locale={locale}
 						text={titleLink.text}
 						url={titleLink.url}
 						product={product}
 						theme={theme}
 					/>
 				</NavigationMenu.Link>
+
 				{!hasOverflow && (
 					<div className={s.subNavRight}>
 						<MenuItemsDefault
 							menuItems={menuItemsWithActive}
 							activatePanel={activatePanel}
+							locale={locale}
 						/>
 						{ctaLinks?.length > 0 && (
 							<CtaLinks
@@ -165,6 +169,10 @@ function Subnav({ className, theme = 'light', ...restProps }: SubnavProps) {
 		setActivePanel(panel)
 	}
 
+	const ariaLabel = restProps?.titleLink?.text
+		? `${restProps.titleLink.text} pages`
+		: 'Subnav pages'
+
 	return (
 		<>
 			{/**
@@ -175,11 +183,12 @@ function Subnav({ className, theme = 'light', ...restProps }: SubnavProps) {
 			<style>{`:root{--subnav-height:${height}px}`}</style>
 			<NavigationMenu.Root
 				ref={wrapperRef}
-				className={classNames(s.root, themeStyles[theme], className, {
+				className={classNames(s.root, className, {
 					[s.isSticky]: isSticky,
 					[s.hasOverflow]: hasOverflow,
+					'mds-dark-mode': theme === 'dark',
 				})}
-				aria-label={`${product} website navigation`}
+				aria-label={ariaLabel}
 				onValueChange={activatePanel}
 				value={activePanel}
 				delayDuration={0}

package/src/components/subnav/partials/CtaLinks/github-stars-link/style.module.css

@@ -3,15 +3,13 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-/* Note: consumes from theme.module.css, as marked */
-
 .root {
-	--local-scrim-color: transparent;
-	--local-divider-color: var(--border-color); /* from theme.module.css */
+	--local-scrim-opacity: 0;
+	--local-divider-color: var(--token-color-border-primary);
 
 	position: relative;
-	color: var(--gh-stars-icon-color); /* from theme.module.css */
-	border: 1px solid var(--local-divider-color); /* from theme.module.css */
+	color: var(--token-color-foreground-primary);
+	border: 1px solid var(--local-divider-color);
 	border-radius: 5px;
 	background: none;
 	transition: background 0.2s, border-color 0.2s;
@@ -27,17 +25,15 @@
 		right: -1px;
 		bottom: -1px;
 		border-radius: 5px;
-		transition: background 0.25s ease;
+		transition: opacity 0.25s ease;
+		opacity: var(--local-scrim-opacity);
 		z-index: 0;
-		background-color: var(--local-scrim-color);
+		background-color: var(--token-color-foreground-primary);
 	}
 
 	&:hover,
 	&:active {
-		--local-divider-color: transparent;
-		--local-scrim-color: var(
-			--gh-stars-scrim-color
-		); /* from theme.module.css */
+		--local-scrim-opacity: 0.12;
 	}
 }
 

package/src/components/subnav/partials/CtaLinks/index.tsx

@@ -3,19 +3,20 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import Button, {
-	type ButtonProps,
-} from '@hashicorp/react-design-system-components/src/components/button'
-import FlightIcon from '@hashicorp/react-design-system-components/src/components/flight-icon'
+import {
+	HDSButton,
+	type HDSButtonProps,
+} from '@hashicorp/react-mds/src/hds/components/button'
+import FlightIcon from '@hashicorp/react-mds/src/hds/components/flight-icon'
 import type { Products } from '@hashicorp/platform-product-meta'
-import type { ToggleButtonProps } from '@hashicorp/react-design-system-components/src/components/dropdown/toggle/button'
-import * as Dropdown from '@hashicorp/react-design-system-components/src/components/dropdown'
+import type { ToggleButtonProps } from '@hashicorp/react-mds/src/hds/components/dropdown/toggle/button'
+import * as Dropdown from '@hashicorp/react-mds/src/hds/components/dropdown'
 import GithubStarsLink from './github-stars-link'
 import classNames from 'classnames'
 import * as NavigationMenu from '@radix-ui/react-navigation-menu'
 import s from './style.module.css'
 
-type CtaLink = ButtonProps & { href: string; __typename?: string }
+type CtaLink = HDSButtonProps & { href: string; __typename?: string }
 
 type CtaDropdown = {
 	__typename?: string
@@ -83,7 +84,7 @@ function CtaLinks({
 						const isLastButton = stableIdx === links.length - 1
 
 						return (
-							<Button
+							<HDSButton
 								key={href}
 								text={text}
 								href={href}

package/src/components/subnav/partials/CtaLinks/style.module.css

@@ -8,31 +8,31 @@
 	justify-content: flex-end;
 	white-space: nowrap;
 	list-style: none;
-	padding: 0 0 0 var(--hdsplus-spacing-05);
+	padding: 0 0 0 var(--mds-spacing-05);
 	margin: 0;
-	gap: 0 12px;
+	gap: 0 var(--mds-spacing-04);
 	@media (--medium-up) {
 		gap: 0;
 	}
 
 	& > * + * {
 		/* Spaces consecutive buttons horizontally on desktop */
-		margin-left: 16px;
+		margin-left: var(--mds-spacing-05);
 	}
 
 	&.isInDropdown {
 		/* Allows consecutive buttons to wrap */
 		flex-wrap: wrap;
 		white-space: wrap;
-		padding-left: 0;
+		padding-inline: var(--mds-spacing-04);
 
 		& > * {
 			/* Spaces consecutive buttons vertically */
 			margin-left: 0;
-			margin-top: 16px;
+			margin-top: var(--mds-spacing-05);
 
 			&:last-of-type {
-				margin-bottom: var(--hdsplus-spacing-04);
+				margin-bottom: var(--mds-spacing-04);
 			}
 		}
 

package/src/components/subnav/partials/DropdownTrigger/index.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import FlightIcon from '@hashicorp/react-design-system-components/src/components/flight-icon'
+import FlightIcon from '@hashicorp/react-mds/src/hds/components/flight-icon'
 import NavItemText from '../nav-item-text'
 import * as NavigationMenu from '@radix-ui/react-navigation-menu'
 import s from './style.module.css'
@@ -27,7 +27,7 @@ function DropdownTrigger(props: DropdownTriggerProps) {
 			onMouseDown={(e) => e.preventDefault()}
 		>
 			<NavItemText isActive={isActive} text={text} />
-			<FlightIcon name="chevron-down" color="var(--menu-item-text-color)" />
+			<FlightIcon name="chevron-down" />
 		</NavigationMenu.Trigger>
 	)
 }