@hashicorp/react-components 0.0.0-nightly.97eb452 → 0.0.0-nightly.9aa5827

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 { vercelSplit } 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 = vercelSplit(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,10 +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'
-import waypoint from '@hashicorp/web-mktg-logos/src/waypoint/hashicorp-waypoint-attributed/hashicorp-waypoint_on-dark.svg'
-
-export { boundary, consul, nomad, packer, terraform, vagrant, vault, waypoint }

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

@@ -1,10 +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'
-import waypoint from '@hashicorp/web-mktg-logos/src/waypoint/hashicorp-waypoint-attributed/hashicorp-waypoint_on-light.svg'
-
-export { boundary, consul, nomad, packer, terraform, vagrant, vault, waypoint }

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(--token-color-foreground-primary); /* 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;
-	}
-}

package/src/components/subnav/partials/nav-item-text/index.tsx

@@ -1,37 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import classNames from 'classnames'
-import React from 'react'
-import s from './style.module.css'
-
-/**
- *
- * A span of styled text with
- * an active state that adds a thick
- * bottom border.
- *
- */
-function NavItemText({
-	isActive,
-	text,
-}: {
-	/** If true, item will be rendered with a thick bottom border below the text. */
-	isActive?: boolean
-	/** Plain text to render within the styled <span /> */
-	text: string
-}): React.ReactElement {
-	return (
-		<span
-			className={classNames(s.root, {
-				[s.isActive]: isActive,
-			})}
-		>
-			{text}
-		</span>
-	)
-}
-
-export default NavItemText

package/src/components/subnav/partials/nav-item-text/style.module.css

@@ -1,13 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-.root {
-	color: var(--token-color-foreground-primary);
-	position: relative;
-
-	&.isActive {
-		color: var(--token-color-foreground-strong);
-	}
-}

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

@@ -1,66 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-.root {
-	position: sticky;
-	top: -1px;
-	z-index: 900;
-	background: var(--token-color-surface-primary);
-	border-top: 1px solid var(--token-color-border-faint);
-	border-bottom: 1px solid transparent;
-	transition: border-bottom-color 0.8s;
-
-	&.isSticky {
-		border-bottom-color: var(--token-color-border-faint);
-	}
-
-	/*
-      * About this selector:
-      * `& ~ *` finds all elements after the navigation.
-      * `:target` finds the active permalink on the page.
-      *
-      * About this style:
-      * `var(--subnav-height, 64px)` adjusts the scroll to account for the
-			* navigation. `0.5em` further adjusts the scroll to give the permalink
-			* breathing room.
-      *
-      * See: https://developer.mozilla.org/en-US/docs/Web/CSS/:target
-      * See: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top
-      */
-	& ~ * :target {
-		scroll-margin-top: calc(var(--subnav-height, 64px) + 0.5em);
-	}
-
-	@media print {
-		display: none;
-	}
-}
-
-.subnavInnerRoot {
-	display: grid;
-}
-
-.subnavInner {
-	display: grid;
-	grid-template-columns: minmax(max-content, 1fr) min-content;
-	align-items: center;
-	justify-content: space-between;
-	min-height: 62px;
-	list-style: none;
-
-	&.hasOverflow {
-		display: flex; 
-	}
-
-	&.notConstrained {
-		/* This padding should always match the horizontal padding of the main nav */
-		padding: 0 var(--hdsplus-spacing-05);
-	}
-}
-
-.subNavRight {
-	display: flex;
-	align-items: center;
-}

package/src/components/subnav/subnav-consts.ts

@@ -1 +0,0 @@
-export const THEMES = ['light', 'dark'] as const