@hashicorp/react-components 1.1.10 → 1.2.0

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

@@ -1,151 +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'
-
-interface MenuItemsDefaultProps {
-	menuItems: (
-		| {
-				text: string
-				url: string
-				submenu: { text: string; url: string; _isActiveUrl: string }[]
-				_isActiveUrl: boolean
-		  }
-		| 'divider'
-	)[]
-	activatePanel: (panel: string) => void
-}
-
-function MenuItemsDefault(props: MenuItemsDefaultProps) {
-	const { menuItems, activatePanel } = 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}
-					/>
-				) : (
-					<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}
-					/>
-				)
-			})}
-		</NavigationMenu.List>
-	)
-}
-
-function VerticalDivider() {
-	return (
-		<li>
-			<span className={s.verticalDivider} />
-		</li>
-	)
-}
-
-interface NavLinkProps {
-	text: string
-	url: string
-	isActive: boolean
-}
-
-function NavLink(props: NavLinkProps) {
-	const { text, url, isActive } = props
-	return (
-		<NavigationMenu.Item className={s.listItem}>
-			<NavigationMenu.Link asChild>
-				<Link className={s.navLink} href={url}>
-					<NavItemText isActive={isActive} text={text} />
-				</Link>
-			</NavigationMenu.Link>
-		</NavigationMenu.Item>
-	)
-}
-
-interface NavLinkWithDropdownProps {
-	text: string
-	submenu: { text: string; url: string; _isActiveUrl: string }[]
-	activatePanel: (panel: string) => void
-}
-
-interface NavLinkWithDropdownState {
-	isCollapsed: boolean
-}
-
-class NavLinkWithDropdown extends React.Component<
-	NavLinkWithDropdownProps,
-	NavLinkWithDropdownState
-> {
-	render() {
-		const { text, submenu, activatePanel } = 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 { text, url } = submenuItem
-								return (
-									// eslint-disable-next-line react/no-array-index-key
-									<NavigationMenu.Item key={stableIdx}>
-										<NavigationMenu.Link asChild>
-											<Link className={s.submenuItem} href={url}>
-												{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,91 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-/* Note: consumes from theme.module.css, as marked */
-
-.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;
-	white-space: nowrap;
-	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(--menu-item-hover-color);
-		border-radius: var(--hdsplus-spacing-01);
-	}
-
-	&:focus {
-		outline: 2px solid var(--token-color-focus-action-internal);
-		outline-style: auto;
-	}
-}
-
-.submenuItem {
-	composes: hds-typography-body-200 from global;
-	composes: hds-font-weight-medium from global;
-	display: block;
-	color: var(--menu-item-text-color); /* from theme.module.css */
-
-	&:hover {
-		text-decoration: underline;
-	}
-}
-
-.submenuModal {
-	border-radius: 4px;
-	box-shadow: var(--token-elevation-high-box-shadow); /* from theme.module.css */
-	background: var(--dropdown-background-color); /* from theme.module.css */
-	z-index: 1;
-	display: block;
-	position: absolute;
-	top: 100%;
-	margin: 8px 0 0 0;
-	padding: 24px;
-	left: 100%;
-	transform: translateX(-100%);
-	list-style: none;
-
-	& li {
-		& a:hover .text {
-			text-decoration: underline;
-		}
-
-		& + li {
-			margin-top: 6px;
-		}
-	}
-}
-
-.verticalDivider {
-	background: var(--border-color); /* from theme.module.css */
-	height: 1.75rem;
-	width: 1px;
-	margin: 0 8px;
-	display: block;
-}
-
-.dropdownList {
-	list-style: none;
-	padding: 0;
-}

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

@@ -1,139 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import React from 'react'
-import { v } 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'
-
-interface MenuItemsOverflowProps {
-	menuItems: (
-		| 'divider'
-		| {
-				text: string
-				url: string
-				submenu: { url: string; text: string }[]
-		  }
-	)[]
-	ctaLinks: CtaLinkProps
-	product?: Products
-	hideGithubStars?: boolean
-	menuText: string
-	constrainWidth?: boolean
-	activatePanel: (panel: string) => void
-}
-
-interface MenuItemsOverflowState {
-	isCollapsed: boolean
-}
-
-class MenuItemsOverflow extends React.Component<
-	MenuItemsOverflowProps,
-	MenuItemsOverflowState
-> {
-	render() {
-		const {
-			menuItems,
-			ctaLinks,
-			product,
-			hideGithubStars,
-			menuText,
-			constrainWidth,
-			activatePanel,
-		} = 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}
-												/>
-											))}
-											<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 {
-	url: string
-	text: string
-}
-
-function SubmenuItem({ url, text }: SubmenuItemProps) {
-	return (
-		<li>
-			<NavigationMenu.Link asChild>
-				<Link className={s.submenuItem} href={url} title={v(text)}>
-					{text}
-				</Link>
-			</NavigationMenu.Link>
-		</li>
-	)
-}
-
-export default MenuItemsOverflow

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

@@ -1,82 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-/* Note: consumes from theme.module.css, as marked */
-
-.root {
-	position: relative;
-	display: flex;
-	justify-content: flex-end;
-}
-
-.dropdown {
-	background: var(--dropdown-background-color); /* from theme.module.css */
-	border-radius: 4px;
-	box-shadow: var(--token-elevation-high-box-shadow);
-	border: 1px solid var(--border-color);
-	margin-top: 8px;
-	max-height: calc(100vh - 300%);
-	overflow-y: auto;
-	padding: var(--hdsplus-spacing-04) var(--hdsplus-spacing-07);
-	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: 12px 0 8px 0;
-	color: var(--menu-item-heading-text-color); /* from theme.module.css */
-}
-
-.divider {
-	margin: 12px 0;
-	border: 0;
-	padding: 0;
-	height: 1px;
-	background: var(--border-color); /* from theme.module.css */
-}
-
-.submenuItem {
-	display: block;
-	padding: 4px 0;
-	color: var(--menu-item-text-color); /* from theme.module.css */
-	font-weight: var(--font-weight-semi-bold);
-	font-size: var(--token-typography-body-300-font-size);
-
-	&:hover {
-		text-decoration: underline;
-	}
-}
-
-.list {
-	margin: 0;
-	list-style: none;
-}

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

@@ -1,113 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { forwardRef } from 'react'
-import { camelCase } from 'camel-case'
-import Link from 'next/link'
-import Image from 'next/image'
-import { v } from '../../../../lib/v'
-import classNames from 'classnames'
-import * as CommunityProductLogosOnDark from './mktg-logos/all-community-product-logos_on-dark'
-import * as CommunityProductLogosOnLight from './mktg-logos/all-community-product-logos_on-light'
-import * as PrimaryLogosOnDark from './mktg-logos/all-primary-logos_on-dark'
-import * as PrimaryLogosOnLight from './mktg-logos/all-primary-logos_on-light'
-import HashiCorpLogoOnLight from '@hashicorp/web-mktg-logos/src/hashicorp/hashicorp-horizontal_on-light.svg'
-import HashiCorpLogoOnDark from '@hashicorp/web-mktg-logos/src/hashicorp/hashicorp-horizontal_on-dark.svg'
-import HCPLogoOnLight from '@hashicorp/web-mktg-logos/src/hcp/hcp-horizontal_on-light.svg'
-import HCPLogoOnDark from '@hashicorp/web-mktg-logos/src/hcp/hcp-horizontal_on-dark.svg'
-import WaypointLogoAttrOnLight from '@hashicorp/web-mktg-logos/src/waypoint/hashicorp-waypoint-attributed/hashicorp-waypoint_on-light.svg'
-import WaypointLogoAttrOnDark from '@hashicorp/web-mktg-logos/src/waypoint/hashicorp-waypoint-attributed/hashicorp-waypoint_on-dark.svg'
-import HCPTerraformLogoOnLight from '@hashicorp/web-mktg-logos/src/terraform/hcp-terraform/hcp-terraform_on-light.svg'
-import HCPTerraformLogoOnDark from '@hashicorp/web-mktg-logos/src/terraform/hcp-terraform/hcp-terraform_on-dark.svg'
-import s from './style.module.css'
-
-const logoDict = {
-	light: {
-		hashicorp: HashiCorpLogoOnLight,
-		hcp: HCPLogoOnLight,
-		tfc: HCPTerraformLogoOnLight,
-		'hashicorp tfc': HCPTerraformLogoOnLight,
-		'hashicorp waypoint': WaypointLogoAttrOnLight,
-	},
-	dark: {
-		hashicorp: HashiCorpLogoOnDark,
-		hcp: HCPLogoOnDark,
-		tfc: HCPTerraformLogoOnDark,
-		'hashicorp tfc': HCPTerraformLogoOnDark,
-		'hashicorp waypoint': WaypointLogoAttrOnDark,
-	},
-}
-
-interface TitleLinkProps {
-	text: string
-	url: string
-	product?: string
-	theme: 'light' | 'dark'
-}
-
-function getLogo(
-	text: string,
-	theme: 'light' | 'dark'
-): {
-	src: string
-	alt: string
-	width: number
-	height: number
-} {
-	const lowerText = text.toLowerCase()
-	const themeLogos = logoDict[theme]
-
-	if (themeLogos[lowerText]) {
-		return themeLogos[lowerText]
-	}
-
-	const isCommunityLogo =
-		lowerText.startsWith('hashicorp') && lowerText !== 'hashicorp'
-
-	if (isCommunityLogo) {
-		if (theme === 'light') {
-			return CommunityProductLogosOnLight[lowerText.split(' ')[1]]
-		}
-		return CommunityProductLogosOnDark[lowerText.split(' ')[1]]
-	}
-
-	if (theme === 'light') {
-		return PrimaryLogosOnLight[lowerText]
-	}
-	return PrimaryLogosOnDark[lowerText]
-}
-
-const TitleLink = forwardRef<HTMLAnchorElement, TitleLinkProps>(
-	({ text, url, product, theme }, ref) => {
-		const parsedText = v(text)
-		const Logo = getLogo(parsedText, theme)
-
-		return (
-			<Link
-				className={classNames(
-					s.root,
-					s[`brand-${product}`],
-					s[camelCase(parsedText)]
-				)}
-				href={url}
-				title={parsedText}
-				ref={ref}
-			>
-				{Logo ? (
-					<Image
-						{...Logo}
-						alt={Logo.alt ? Logo.alt : `${product} logo`}
-						className={s.logo}
-					/>
-				) : (
-					parsedText
-				)}
-			</Link>
-		)
-	}
-)
-TitleLink.displayName = 'TitleLink'
-
-export default TitleLink

package/src/components/subnav/partials/TitleLink/mktg-logos/all-community-product-logos_on-dark.ts

@@ -1,9 +0,0 @@
-import boundary from '@hashicorp/web-mktg-logos/src/boundary/boundary-community/boundary-community_on-dark.svg'
-import consul from '@hashicorp/web-mktg-logos/src/consul/consul-community/consul-community_on-dark.svg'
-import nomad from '@hashicorp/web-mktg-logos/src/nomad/nomad-community/nomad-community_on-dark.svg'
-import packer from '@hashicorp/web-mktg-logos/src/packer/packer-community/packer-community_on-dark.svg'
-import terraform from '@hashicorp/web-mktg-logos/src/terraform/terraform-community/terraform-community_on-dark.svg'
-import vagrant from '@hashicorp/web-mktg-logos/src/vagrant/vagrant-community/vagrant-community_on-dark.svg'
-import vault from '@hashicorp/web-mktg-logos/src/vault/vault-community/vault-community_on-dark.svg'
-
-export { boundary, consul, nomad, packer, terraform, vagrant, vault }

package/src/components/subnav/partials/TitleLink/mktg-logos/all-community-product-logos_on-light.ts

@@ -1,9 +0,0 @@
-import boundary from '@hashicorp/web-mktg-logos/src/boundary/boundary-community/boundary-community_on-light.svg'
-import consul from '@hashicorp/web-mktg-logos/src/consul/consul-community/consul-community_on-light.svg'
-import nomad from '@hashicorp/web-mktg-logos/src/nomad/nomad-community/nomad-community_on-light.svg'
-import packer from '@hashicorp/web-mktg-logos/src/packer/packer-community/packer-community_on-light.svg'
-import terraform from '@hashicorp/web-mktg-logos/src/terraform/terraform-community/terraform-community_on-light.svg'
-import vagrant from '@hashicorp/web-mktg-logos/src/vagrant/vagrant-community/vagrant-community_on-light.svg'
-import vault from '@hashicorp/web-mktg-logos/src/vault/vault-community/vault-community_on-light.svg'
-
-export { boundary, consul, nomad, packer, terraform, vagrant, vault }

package/src/components/subnav/partials/TitleLink/mktg-logos/all-primary-logos_on-dark.ts

@@ -1,23 +0,0 @@
-import boundary from '@hashicorp/web-mktg-logos/src/boundary/boundary/boundary_on-dark.svg'
-import consul from '@hashicorp/web-mktg-logos/src/consul/consul/consul_on-dark.svg'
-import nomad from '@hashicorp/web-mktg-logos/src/nomad/nomad/nomad_on-dark.svg'
-import packer from '@hashicorp/web-mktg-logos/src/packer/packer/packer_on-dark.svg'
-import terraform from '@hashicorp/web-mktg-logos/src/terraform/terraform/terraform_on-dark.svg'
-import vagrant from '@hashicorp/web-mktg-logos/src/vagrant/vagrant/vagrant_on-dark.svg'
-import vault from '@hashicorp/web-mktg-logos/src/vault/vault/vault_on-dark.svg'
-import waypoint from '@hashicorp/web-mktg-logos/src/waypoint/waypoint/waypoint_on-dark.svg'
-import hashiconf from '@hashicorp/web-mktg-logos/src/conferences/hashiconf_on-dark.svg'
-import hashidays from '@hashicorp/web-mktg-logos/src/conferences/hashidays_on-dark.svg'
-
-export {
-	boundary,
-	consul,
-	nomad,
-	packer,
-	terraform,
-	vagrant,
-	vault,
-	waypoint,
-	hashiconf,
-	hashidays,
-}

package/src/components/subnav/partials/TitleLink/mktg-logos/all-primary-logos_on-light.ts

@@ -1,23 +0,0 @@
-import boundary from '@hashicorp/web-mktg-logos/src/boundary/boundary/boundary_on-light.svg'
-import consul from '@hashicorp/web-mktg-logos/src/consul/consul/consul_on-light.svg'
-import nomad from '@hashicorp/web-mktg-logos/src/nomad/nomad/nomad_on-light.svg'
-import packer from '@hashicorp/web-mktg-logos/src/packer/packer/packer_on-light.svg'
-import terraform from '@hashicorp/web-mktg-logos/src/terraform/terraform/terraform_on-light.svg'
-import vagrant from '@hashicorp/web-mktg-logos/src/vagrant/vagrant/vagrant_on-light.svg'
-import vault from '@hashicorp/web-mktg-logos/src/vault/vault/vault_on-light.svg'
-import waypoint from '@hashicorp/web-mktg-logos/src/waypoint/waypoint/waypoint_on-light.svg'
-import hashiconf from '@hashicorp/web-mktg-logos/src/conferences/hashiconf_on-light.svg'
-import hashidays from '@hashicorp/web-mktg-logos/src/conferences/hashidays_on-light.svg'
-
-export {
-	boundary,
-	consul,
-	nomad,
-	packer,
-	terraform,
-	vagrant,
-	vault,
-	waypoint,
-	hashiconf,
-	hashidays,
-}

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

@@ -1,43 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-/* Note: consumes from theme.module.css, as marked */
-
-.root {
-	position: relative;
-	display: inline-flex;
-	padding-block: var(--hdsplus-spacing-04);
-	font-weight: var(--font-weight-bold);
-	color: var(--title-text-color); /* from theme.module.css */
-	font-size: 1.25rem;
-	line-height: 1.35rem;
-
-	& img {
-		max-height: 34px;
-		width: auto;
-		display: block;
-	}
-
-	&.brand-hcp img {
-		height: 26px;
-
-		@media (min-width: 360px) {
-			height: 29px;
-		}
-	}
-
-	&:focus {
-		outline: 2px solid var(--token-color-focus-action-internal);
-		outline-style: auto;
-	}
-}
-
-.hashiConf, .hashiDays {
-	display: flex;
-
-	& img {
-		height: 24px;
-	}
-}