@hashicorp/react-components 0.0.0-nightly.43a717d → 0.0.0-nightly.47d1fb8

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

@@ -1,45 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-.root {
-	display: flex;
-	justify-content: flex-end;
-	white-space: nowrap;
-	list-style: none;
-	padding: 0 0 0 var(--hdsplus-spacing-05);
-	margin: 0;
-	gap: 0 var(--hdsplus-spacing-04);
-	@media (--medium-up) {
-		gap: 0;
-	}
-
-	& > * + * {
-		/* Spaces consecutive buttons horizontally on desktop */
-		margin-left: var(--hdsplus-spacing-05);
-	}
-
-	&.isInDropdown {
-		/* Allows consecutive buttons to wrap */
-		flex-wrap: wrap;
-		white-space: wrap;
-		padding-inline: var(--hdsplus-spacing-04);
-
-		& > * {
-			/* Spaces consecutive buttons vertically */
-			margin-left: 0;
-			margin-top: var(--hdsplus-spacing-05);
-
-			&:last-of-type {
-				margin-bottom: var(--hdsplus-spacing-04);
-			}
-		}
-
-		@nest :global(.hashidaysConference) & :global(.hds-dropdown) {
-			@media (--small) {
-				display: none;
-			}
-		}
-	}
-}

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

@@ -1,35 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import FlightIcon from '@hashicorp/react-hds/src/components/flight-icon'
-import NavItemText from '../nav-item-text'
-import * as NavigationMenu from '@radix-ui/react-navigation-menu'
-import s from './style.module.css'
-
-interface DropdownTriggerProps {
-	text: string
-	isActive?: boolean
-	activatePanel: (panel: string) => void
-}
-
-function DropdownTrigger(props: DropdownTriggerProps) {
-	const { text, isActive, activatePanel } = props
-
-	const onFocus = () => {
-		activatePanel(text)
-	}
-	return (
-		<NavigationMenu.Trigger
-			className={s.root}
-			onFocus={onFocus}
-			onMouseDown={(e) => e.preventDefault()}
-		>
-			<NavItemText isActive={isActive} text={text} />
-			<FlightIcon name="chevron-down" />
-		</NavigationMenu.Trigger>
-	)
-}
-
-export default DropdownTrigger

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

@@ -1,39 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-.root {
-	composes: hds-typography-body-200 from global;
-	composes: hds-font-weight-medium from global;
-	border: none;
-	background: none;
-	align-items: center;
-	display: flex;
-	height: 100%;
-	line-height: 2.5rem;
-	padding: 0 var(--hdsplus-spacing-05);
-	position: relative;
-	white-space: nowrap;
-	cursor: default;
-
-	& svg {
-		margin-top: 1px;
-		margin-bottom: -1px;
-		margin-left: 6px;
-		width: 12px;
-		height: 12px;
-		transition: transform 0.3s;
-		fill: var(--token-color-foreground-primary);
-	}
-
-	&:hover {
-		background-color: var(--token-color-surface-interactive-hover);
-		border-radius: var(--hdsplus-spacing-01);
-	}
-
-	&:focus {
-		outline: 2px solid var(--token-color-focus-action-internal);
-		outline-style: auto;
-	}
-}

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

@@ -1,167 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import React from 'react'
-import Link from 'next/link'
-import NavItemText from '../nav-item-text'
-import DropdownTrigger from '../DropdownTrigger'
-import * as NavigationMenu from '@radix-ui/react-navigation-menu'
-import s from './style.module.css'
-import FlightIcon from '@hashicorp/react-hds/src/components/flight-icon'
-import { getLocalizedLinkProps } from '../../../../lib/get-localized-link-props'
-
-interface MenuItemsDefaultProps {
-	menuItems: (
-		| {
-				text: string
-				url: string
-				submenu: {
-					icon: string
-					text: string
-					url: string
-					_isActiveUrl: string
-				}[]
-				_isActiveUrl: boolean
-		  }
-		| 'divider'
-	)[]
-	activatePanel: (panel: string) => void
-	locale?: string
-}
-
-function MenuItemsDefault(props: MenuItemsDefaultProps) {
-	const { menuItems, activatePanel, locale } = props
-	return (
-		<NavigationMenu.List className={s.root}>
-			{menuItems.map((menuItem, stableIdx) => {
-				if (menuItem === 'divider') {
-					// eslint-disable-next-line react/no-array-index-key
-					return <VerticalDivider key={stableIdx} />
-				}
-				const { text, url, submenu, _isActiveUrl } = menuItem
-				return menuItem.submenu ? (
-					<NavLinkWithDropdown
-						// This array is stable, so we can use index as key
-						// eslint-disable-next-line react/no-array-index-key
-						key={stableIdx}
-						text={text}
-						submenu={submenu}
-						activatePanel={activatePanel}
-						locale={locale}
-					/>
-				) : (
-					<NavLink
-						// This array is stable, so we can use index as key
-						// eslint-disable-next-line react/no-array-index-key
-						key={stableIdx}
-						text={text}
-						url={url}
-						isActive={_isActiveUrl}
-						locale={locale}
-					/>
-				)
-			})}
-		</NavigationMenu.List>
-	)
-}
-
-function VerticalDivider() {
-	return (
-		<li>
-			<span className={s.verticalDivider} />
-		</li>
-	)
-}
-
-interface NavLinkProps {
-	text: string
-	url: string
-	isActive: boolean
-	locale?: string
-}
-
-function NavLink(props: NavLinkProps) {
-	const { text, url, isActive, locale } = props
-	return (
-		<NavigationMenu.Item className={s.listItem}>
-			<NavigationMenu.Link asChild>
-				<Link className={s.navLink} {...getLocalizedLinkProps(url, locale)}>
-					<NavItemText isActive={isActive} text={text} />
-				</Link>
-			</NavigationMenu.Link>
-		</NavigationMenu.Item>
-	)
-}
-
-interface NavLinkWithDropdownProps {
-	text: string
-	submenu: { icon: string; text: string; url: string; _isActiveUrl: string }[]
-	activatePanel: (panel: string) => void
-	locale?: string
-}
-
-interface NavLinkWithDropdownState {
-	isCollapsed: boolean
-}
-
-class NavLinkWithDropdown extends React.Component<
-	NavLinkWithDropdownProps,
-	NavLinkWithDropdownState
-> {
-	render() {
-		const { text, submenu, activatePanel, locale } = this.props
-		const hasActiveChild = submenu.some((s) => s._isActiveUrl)
-
-		const handleFocusOutside = () => {
-			// Since the content opens when the focus is on the dropdown trigger, handleFocusOutside gets called
-			// because the content is open but focus is outside of it. When the focus is on the trigger we want
-			// this content to be open so we ignore it in this case.
-			if (
-				!document ||
-				!document.activeElement?.id ||
-				!document.activeElement.id.includes('trigger')
-			) {
-				activatePanel('')
-			}
-		}
-		return (
-			<NavigationMenu.Item className={s.listItem} value={text}>
-				<DropdownTrigger
-					text={text}
-					isActive={hasActiveChild}
-					activatePanel={activatePanel}
-				/>
-				<NavigationMenu.Content
-					className={s.submenuModal}
-					onFocusOutside={handleFocusOutside}
-				>
-					<NavigationMenu.Sub>
-						<NavigationMenu.List className={s.dropdownList}>
-							{submenu.map((submenuItem, stableIdx) => {
-								const { icon, text, url } = submenuItem
-								return (
-									// eslint-disable-next-line react/no-array-index-key
-									<NavigationMenu.Item key={stableIdx}>
-										<NavigationMenu.Link asChild>
-											<Link
-												className={s.submenuItem}
-												{...getLocalizedLinkProps(url, locale)}
-											>
-												{icon ? <FlightIcon name={icon} /> : null}
-												{text}
-											</Link>
-										</NavigationMenu.Link>
-									</NavigationMenu.Item>
-								)
-							})}
-						</NavigationMenu.List>
-					</NavigationMenu.Sub>
-				</NavigationMenu.Content>
-			</NavigationMenu.Item>
-		)
-	}
-}
-
-export default MenuItemsDefault

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

@@ -1,104 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-.root {
-	display: flex;
-	padding: 0 0 0 var(--hdsplus-spacing-08);
-	margin: 0;
-	align-items: center;
-	justify-content: flex-end;
-	list-style: none;
-}
-
-.listItem {
-	position: relative;
-	margin: 0;
-	padding: 0;
-}
-
-.navLink {
-	composes: hds-typography-body-200 from global;
-	composes: hds-font-weight-medium from global;
-	position: relative;
-	padding: var(--hdsplus-spacing-04);
-	display: flex;
-	align-items: center;
-	white-space: nowrap;
-
-	&:hover {
-		background-color: var(--token-color-surface-interactive-hover);
-		border-radius: var(--hdsplus-spacing-01);
-	}
-
-	&:focus {
-		outline: 2px solid var(--token-color-focus-action-internal);
-		outline-style: auto;
-	}
-}
-
-.submenuItem {
-	--submenu-item-background-color: transparent;
-
-	position: relative;
-	composes: hds-typography-body-200 from global;
-	composes: hds-font-weight-medium from global;
-	color: var(--token-color-foreground-primary);
-	display: flex;
-	gap: var(--hdsplus-spacing-04);
-	padding: var(--hdsplus-spacing-03);
-	min-width: 190px;
-	align-items: center;
-
-	&::before {
-		content: "";
-		position: absolute;
-		z-index: -1;
-		inset: 2px 0;
-		border-radius: var(--hdsplus-spacing-01);
-		background-color: var(--submenu-item-background-color);
-	}
-
-	&:hover {
-		--submenu-item-background-color: var(--token-color-surface-interactive-hover);
-	}
-
-	@media (--large) {
-		max-width: 416px;
-	}
-
-	&:focus {
-		outline: 2px solid var(--token-color-focus-action-internal);
-		outline-style: auto;
-	}
-}
-
-.submenuModal {
-	border-radius: var(--hdsplus-spacing-03);
-	border: 1px solid var(--token-color-border-primary);
-	box-shadow: var(--token-elevation-high-box-shadow);
-	background: var(--token-color-surface-primary);
-	z-index: 1;
-	position: absolute;
-	top: 100%;
-	margin: var(--hdsplus-spacing-03) 0 0 0;
-	padding: var(--hdsplus-spacing-04);
-	left: 100%;
-	transform: translateX(-100%);
-	list-style: none;
-}
-
-.verticalDivider {
-	background: var(--token-color-border-primary);
-	height: 1.75rem;
-	width: 1px;
-	margin: 0 8px;
-	display: block;
-}
-
-.dropdownList {
-	min-width: max-content;
-	list-style: none;
-	padding: 0;
-}

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

@@ -1,152 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import React from 'react'
-import { vercelSplit } from '../../../../lib/v'
-import Link from 'next/link'
-import type { Products } from '@hashicorp/platform-product-meta'
-import CtaLinks, { type CtaLinkProps } from '../CtaLinks'
-import DropdownTrigger from '../DropdownTrigger'
-import * as NavigationMenu from '@radix-ui/react-navigation-menu'
-import classNames from 'classnames'
-import s from './style.module.css'
-import FlightIcon from '@hashicorp/react-hds/src/components/flight-icon'
-import { getLocalizedLinkProps } from '../../../../lib/get-localized-link-props'
-
-interface MenuItemsOverflowProps {
-	menuItems: (
-		| 'divider'
-		| {
-				text: string
-				url: string
-				submenu: { icon: string; url: string; text: string }[]
-		  }
-	)[]
-	ctaLinks: CtaLinkProps
-	product?: Products
-	hideGithubStars?: boolean
-	menuText: string
-	constrainWidth?: boolean
-	activatePanel: (panel: string) => void
-	locale?: string
-}
-
-interface MenuItemsOverflowState {
-	isCollapsed: boolean
-}
-
-class MenuItemsOverflow extends React.Component<
-	MenuItemsOverflowProps,
-	MenuItemsOverflowState
-> {
-	render() {
-		const {
-			menuItems,
-			ctaLinks,
-			product,
-			hideGithubStars,
-			menuText,
-			constrainWidth,
-			activatePanel,
-			locale,
-		} = this.props
-
-		const handleFocusOutside = () => {
-			// Since the content opens when the focus is on the dropdown trigger, handleFocusOutside gets called
-			// because the content is open but focus is outside of it. When the focus is on the trigger we want
-			// this content to be open so we ignore it in this case.
-			if (
-				!document ||
-				!document.activeElement?.id ||
-				!document.activeElement.id.includes('trigger')
-			) {
-				activatePanel('')
-			}
-		}
-
-		return (
-			<NavigationMenu.List className={s.list}>
-				<NavigationMenu.Item className={s.root} value={menuText}>
-					<DropdownTrigger text={menuText} activatePanel={activatePanel} />
-					<NavigationMenu.Content
-						className={classNames(s.dropdown, {
-							[s.constrained]: constrainWidth,
-						})}
-						onFocusOutside={handleFocusOutside}
-					>
-						<ul className={s.ulElem}>
-							{menuItems.map((menuItem, stableIdx) => {
-								if (menuItem === 'divider') return null
-								const { text, url, submenu } = menuItem
-								if (submenu) {
-									//  If we have a submenu, we need to flatten it
-									return (
-										// eslint-disable-next-line react/no-array-index-key
-										<div key={stableIdx}>
-											<div className={s.submenuTitle}>{text}</div>
-											<hr className={s.divider} />
-											{submenu.map((subItem, subStableIdx) => (
-												<SubmenuItem
-													// eslint-disable-next-line react/no-array-index-key
-													key={subStableIdx}
-													url={subItem.url}
-													text={subItem.text}
-													icon={subItem.icon}
-													locale={locale}
-												/>
-											))}
-											<hr className={s.divider} />
-										</div>
-									)
-								} else {
-									return (
-										<SubmenuItem
-											// eslint-disable-next-line react/no-array-index-key
-											key={stableIdx}
-											url={url}
-											text={text}
-										/>
-									)
-								}
-							})}
-						</ul>
-						<CtaLinks
-							links={ctaLinks}
-							isInDropdown={true}
-							product={product}
-							hideGithubStars={hideGithubStars}
-						/>
-					</NavigationMenu.Content>
-				</NavigationMenu.Item>
-			</NavigationMenu.List>
-		)
-	}
-}
-
-interface SubmenuItemProps {
-	icon?: string
-	url: string
-	text: string
-	locale?: string
-}
-
-function SubmenuItem({ icon, url, text, locale }: SubmenuItemProps) {
-	return (
-		<li>
-			<NavigationMenu.Link asChild>
-				<Link
-					className={s.submenuItem}
-					title={vercelSplit(text)}
-					{...getLocalizedLinkProps(url, locale)}
-				>
-					{icon ? <FlightIcon name={icon} /> : null}
-					{text}
-				</Link>
-			</NavigationMenu.Link>
-		</li>
-	)
-}
-
-export default MenuItemsOverflow

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

@@ -1,88 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-.root {
-	position: relative;
-	display: flex;
-	justify-content: flex-end;
-}
-
-.dropdown {
-	background: var(--token-color-surface-primary);
-	border-radius: var(--hdsplus-spacing-03);
-	box-shadow: var(--token-elevation-high-box-shadow);
-	border: 1px solid var(--token-color-border-primary);
-	margin-top: 8px;
-	max-height: calc(100vh - 300%);
-	overflow-y: auto;
-	padding: var(--hdsplus-spacing-04);
-	position: absolute;
-	right: 0;
-	top: 100%;
-	width: calc(100vw - var(--hdsplus-spacing-08));
-	z-index: 1;
-
-	@nest :global(.hashidaysConference) & {
-		padding: 12px 24px;
-	}
-
-	&.constrained {
-		max-width: 568px;
-		width: calc(100vw - var(--hdsplus-spacing-10));
-
-		@media (--medium-up) {
-			width: max-content;
-		}
-	}
-
-	@media (--medium-up) {
-		width: max-content;
-	}
-}
-
-.ulElem {
-	padding: 0;
-	margin: 0;
-	list-style: none;
-}
-
-.submenuTitle {
-	composes: g-type-label from global;
-	margin: var(--hdsplus-spacing-04) var(--hdsplus-spacing-03) 8px;
-	color: var(--token-color-foreground-faint);
-}
-
-.divider {
-	margin: var(--hdsplus-spacing-04) var(--hdsplus-spacing-03);
-	border: 0;
-	padding: 0;
-	height: 1px;
-	background: var(--token-color-border-primary);
-}
-
-.submenuItem {
-	composes: hds-typography-body-300 from global;
-	composes: hds-font-weight-semibold from global;
-	display: flex;
-	gap: var(--hdsplus-spacing-04);
-	padding: var(--hdsplus-spacing-02) var(--hdsplus-spacing-03);
-	color: var(--token-color-foreground-primary);
-	border-radius: var(--hdsplus-spacing-01);
-	align-items: center;
-
-	&:hover {
-		background-color: var(--token-color-surface-interactive-hover);
-	}
-
-	&:focus {
-		outline: 2px solid var(--token-color-focus-action-internal);
-		outline-style: auto;
-	}
-}
-
-.list {
-	margin: 0;
-	list-style: none;
-}