@hashicorp/react-components 0.0.0 → 1.0.1

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

@@ -0,0 +1,151 @@
+/**
+ * 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

@@ -0,0 +1,91 @@
+/**
+ * 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

@@ -0,0 +1,139 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import React from 'react'
+import { v } from '@web/cms'
+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

@@ -0,0 +1,82 @@
+/**
+ * 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

@@ -0,0 +1,113 @@
+/**
+ * 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 '@web/cms'
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,43 @@
+/**
+ * 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;
+	}
+}