@hashicorp/react-components 0.0.0 → 1.0.1

package/src/components/subnav/partials/CtaLinks/github-stars-link/formatStarCount/index.test.ts

@@ -0,0 +1,26 @@
+import formatStarCount from './'
+
+describe('<Subnav /> - formatStarCount', () => {
+	it('should return zero for an undefined, null, or zero count', () => {
+		expect(formatStarCount(undefined)).toBe(false)
+		//@ts-expect-error purposefully testing invalid input
+		expect(formatStarCount(null)).toBe(false)
+		expect(formatStarCount(0)).toBe(false)
+	})
+
+	it('should return numbers 1 to 999 without formatting', () => {
+		expect(formatStarCount(1)).toBe('1')
+		expect(formatStarCount(999)).toBe('999')
+	})
+
+	it('should abbreviate numbers in the tens of thousands with "k" and a single decimal point', () => {
+		expect(formatStarCount(1003)).toBe('1.0k')
+		expect(formatStarCount(1280)).toBe('1.2k')
+		expect(formatStarCount(15630)).toBe('15.6k')
+	})
+
+	it('should abbreviate numbers in the hundreds of thousands with "k" and no decimal point', () => {
+		expect(formatStarCount(100000)).toBe('100k')
+		expect(formatStarCount(156783)).toBe('156k')
+	})
+})

package/src/components/subnav/partials/CtaLinks/github-stars-link/formatStarCount/index.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+/*
+ * Given:
+ * starCount (int)
+ * Return:
+ * Formatted string, to match GitHub's typical display of star counts,
+ * that is, expressed as thousands of stars
+ * Or returns false for falsy starCount values
+ */
+function formatStarCount(starCount?: number) {
+	if (!starCount || starCount <= 0) return false
+	if (starCount < 1000) return `${starCount}`
+	const thousands = Math.floor(starCount / 100.0) / 10.0
+	if (starCount < 100000) return `${thousands.toFixed(1)}k`
+	return `${Math.floor(thousands)}k`
+}
+
+export default formatStarCount

package/src/components/subnav/partials/CtaLinks/github-stars-link/index.tsx

@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import React, { useEffect, useState } from 'react'
+import fetch from 'isomorphic-unfetch'
+import formatStarCount from './formatStarCount'
+import parseGithubUrl from './parseGithubUrl'
+import StarIcon from '../icons/star'
+import GithubIcon from '../icons/github-logo'
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
+import s from './style.module.css'
+
+interface GithubStarsButtonProps {
+	url: string
+	hideGithubStars?: boolean
+}
+
+function GithubStarsButton(props: GithubStarsButtonProps) {
+	const { url, hideGithubStars } = props
+	const [starCount, setStarCount] = useState(-1)
+
+	useEffect(() => {
+		if (hideGithubStars) return setStarCount(0)
+		const parsedGithubUrl = parseGithubUrl(url)
+		if (!parsedGithubUrl || !parsedGithubUrl.org || !parsedGithubUrl.repo)
+			return setStarCount(0)
+		const { org, repo } = parsedGithubUrl
+		if (!org || !repo) return setStarCount(0)
+		const githubApiUrl = `https://api.github.com/repos/${org}/${repo}`
+		fetch(githubApiUrl)
+			.then((response) => {
+				response.json().then((data) => {
+					// Github's rate limit for unauthenticated requests is 60 per hour
+					// When the limit is hit, data.stargazers_count is undefined,
+					// and setStarCount falls back to not showing the star count
+					setStarCount(data.stargazers_count)
+					// Warn if this limit is hit, to avoid otherwise confusing behavior
+					//  We're still using the response to provide a documentation link
+					if (!data.stargazers_count) {
+						const { headers } = response
+						if (headers.get('x-ratelimit-remaining') === '0') {
+							const resetAtSeconds = parseInt(headers.get('x-ratelimit-reset')!)
+							const resetDate = new Date(resetAtSeconds * 1000)
+							const rateLimit = headers.get('x-ratelimit-limit')
+							console.warn(
+								`⭐ Stargazers count could not be fetched. Rate limit exceeded for unauthenticated GitHub API. Limit will be reset to ${rateLimit} at ${resetDate}. See ${data.documentation_url} for more details.`
+							)
+						} else {
+							console.warn(
+								`Request for stargazers was successful, but the returned value was undefined or falsy. This might be because the repo has no stars, or it might be a different issue.`
+							)
+						}
+					}
+				})
+			})
+			.catch((err) => {
+				setStarCount(0)
+				console.warn(JSON.stringify(err, null, 2))
+			})
+	}, [hideGithubStars, url])
+
+	const isLoadingStarCount = starCount === -1
+	const isFailedStarCount = formatStarCount(starCount) === false
+	const showStarCount =
+		!hideGithubStars && (isLoadingStarCount || !isFailedStarCount)
+	return (
+		<a href={url} className={s.root}>
+			<span className={s.github}>
+				<GithubIcon />
+				<VisuallyHidden>GitHub</VisuallyHidden>
+			</span>
+			{showStarCount && (
+				<span className={s.stars}>
+					<StarIcon />
+					<span className="g-type-body-small-strong" data-testid="github-stars">
+						{formatStarCount(starCount) || <span>&mdash;</span>}
+					</span>
+					<VisuallyHidden>Stars on GitHub</VisuallyHidden>
+				</span>
+			)}
+		</a>
+	)
+}
+
+export default GithubStarsButton

package/src/components/subnav/partials/CtaLinks/github-stars-link/parseGithubUrl/index.test.ts

@@ -0,0 +1,29 @@
+import parseGithubUrl from './'
+
+describe('<Subnav /> - parseGithubUrl', () => {
+	it('should gracefully handle an invalid URL', () => {
+		// Suppress console.warn for this test, we expect warnings
+		vi.stubGlobal('console', {
+			warn() {
+				return
+			},
+		})
+		//@ts-expect-error purposefully testing invalid input
+		expect(parseGithubUrl(undefined)).toBe(false)
+		expect(parseGithubUrl('blah-blah')).toBe(false)
+	})
+
+	it('should handle a non-GitHub URL', () => {
+		expect(parseGithubUrl('https://www.example.com/hashicorp/terraform')).toBe(
+			false
+		)
+	})
+
+	it('should parse the org and repo from a GitHub URL', () => {
+		const testInput = 'https://www.github.com/hashicorp/terraform'
+		//@ts-expect-error purposefully testing invalid input
+		const { repo, org } = parseGithubUrl(testInput)
+		expect(repo).toBe('terraform')
+		expect(org).toBe('hashicorp')
+	})
+})

package/src/components/subnav/partials/CtaLinks/github-stars-link/parseGithubUrl/index.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+/*
+ * Given:
+ * urlString (string) valid URL string
+ * Return:
+ * { org, repo }, where the url is ~= www.github.com/{org}/{repo}
+ * or false otherwise (eg if not a valid URL, or if not a GitHub url)
+ */
+function parseGithubUrl(
+	urlString: string
+): { org: string; repo: string } | false {
+	try {
+		const urlObj = new URL(urlString)
+		if (urlObj.hostname !== 'www.github.com') return false
+		const parts = urlObj.pathname.split('/').filter(Boolean)
+		const org = parts[0]
+		const repo = parts[1]
+		return { org, repo }
+	} catch (err) {
+		console.warn(
+			'Warning! An invalid URL has probably been supplied to the GitHub ctaLink in <Subnav />. The corresponding error:'
+		)
+		console.warn(err)
+		return false
+	}
+}
+
+export default parseGithubUrl

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

@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * 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 */
+
+	position: relative;
+	color: var(--gh-stars-icon-color); /* from theme.module.css */
+	border: 1px solid var(--local-divider-color); /* from theme.module.css */
+	border-radius: 5px;
+	background: none;
+	transition: background 0.2s, border-color 0.2s;
+	display: flex;
+	align-items: center;
+
+	/* Scrim used in most hover effects */
+	&::before {
+		content: '';
+		position: absolute;
+		top: -1px;
+		left: -1px;
+		right: -1px;
+		bottom: -1px;
+		border-radius: 5px;
+		transition: background 0.25s ease;
+		z-index: 0;
+		background-color: var(--local-scrim-color);
+	}
+
+	&:hover,
+	&:active {
+		--local-divider-color: transparent;
+		--local-scrim-color: var(
+			--gh-stars-scrim-color
+		); /* from theme.module.css */
+	}
+}
+
+.github {
+	display: flex;
+	align-items: center;
+	padding: 8px 10px;
+	& > svg {
+		width: 20px;
+		height: 20px;
+
+		& [fill] {
+			fill: currentColor;
+		}
+
+		& [stroke] {
+			stroke: currentColor;
+		}
+	}
+}
+
+.stars {
+	display: flex;
+	align-items: center;
+	height: 100%;
+	border-left: 1px solid;
+	border-color: var(--local-divider-color);
+	padding: 6px 12px 7px 10px;
+	transition: border-color 0.2s;
+	z-index: 1;
+	& > svg {
+		width: 16px;
+		height: 16px;
+		margin-right: 4px;
+		margin-top: 1px;
+
+		& [fill] {
+			fill: currentColor;
+		}
+
+		& [stroke] {
+			stroke: currentColor;
+		}
+	}
+}

package/src/components/subnav/partials/CtaLinks/icons/github-logo.js

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import React from 'react'
+
+function GithubIcon(props) {
+	return (
+		<svg width={16} height={16} viewBox="0 0 16 16" {...props}>
+			<path
+				fillRule="evenodd"
+				fill="#000000"
+				d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+			/>
+		</svg>
+	)
+}
+
+export default GithubIcon

package/{packages → src/components}/subnav/partials/CtaLinks/icons/github.svg.js

@@ -1,2 +1,7 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 export default `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.9633 0.325439C5.3578 0.325439 0 5.68324 0 12.2887C0 17.5731 3.44954 22.0502 8.14679 23.6649C8.73394 23.7383 8.95413 23.3713 8.95413 23.0777C8.95413 22.7842 8.95413 22.0502 8.95413 21.0227C5.65138 21.7566 4.91743 19.408 4.91743 19.408C4.40367 18.0135 3.59633 17.6465 3.59633 17.6465C2.49541 16.9126 3.66972 16.9126 3.66972 16.9126C4.84404 16.986 5.50459 18.1603 5.50459 18.1603C6.6055 19.9952 8.29358 19.4814 8.95413 19.1878C9.02752 18.3805 9.3945 17.8667 9.68807 17.5731C7.04587 17.2796 4.25688 16.252 4.25688 11.6282C4.25688 10.3071 4.69725 9.27957 5.50459 8.39883C5.43119 8.17865 4.99083 6.93094 5.65138 5.31627C5.65138 5.31627 6.6789 5.02269 8.95413 6.56397C9.90826 6.27039 10.9358 6.197 11.9633 6.197C12.9908 6.197 14.0183 6.34379 14.9725 6.56397C17.2477 5.02269 18.2752 5.31627 18.2752 5.31627C18.9358 6.93094 18.4954 8.17865 18.422 8.47223C19.156 9.27957 19.6697 10.3805 19.6697 11.7016C19.6697 16.3254 16.8807 17.2796 14.2385 17.5731C14.6789 17.9401 15.0459 18.6741 15.0459 19.775C15.0459 21.3897 15.0459 22.6374 15.0459 23.0777C15.0459 23.3713 15.2661 23.7383 15.8532 23.6649C20.6239 22.0502 24 17.5731 24 12.2887C23.9266 5.68324 18.5688 0.325439 11.9633 0.325439Z" fill="#252937"/>
 </svg>`

package/src/components/subnav/partials/CtaLinks/icons/star.js

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import React from 'react'
+
+function StarIcon(props) {
+	return (
+		<svg width={14} height={16} viewBox="0 0 14 16" {...props}>
+			<path
+				fillRule="evenodd"
+				fill="#000000"
+				d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"
+			/>
+		</svg>
+	)
+}
+
+export default StarIcon

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

@@ -0,0 +1,130 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * 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 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 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 CtaDropdown = {
+	__typename?: string
+	submenu: { text: string; url: string }[]
+	buttonControls: ToggleButtonProps
+}
+
+export type CtaLinkProps = Array<CtaLink | CtaDropdown>
+
+interface CtaLinksProps {
+	links: Array<CtaLink | CtaDropdown>
+	product?: Products
+	isInDropdown?: boolean
+	hideGithubStars?: boolean
+}
+
+function CtaLinks({
+	links,
+	product = 'hashicorp',
+	isInDropdown,
+	hideGithubStars,
+}: CtaLinksProps) {
+	return (
+		<NavigationMenu.List
+			className={classNames(s.root, { [s.isInDropdown]: isInDropdown })}
+		>
+			{links.map((cta, stableIdx) => {
+				if (isDropdown(cta)) {
+					const { buttonControls, submenu } = cta
+
+					return (
+						// eslint-disable-next-line react/no-array-index-key
+						<Dropdown.Root key={`dropdownRoot${stableIdx}`}>
+							<Dropdown.Toggle.Button {...buttonControls} />
+							<Dropdown.Content width="100%">
+								<Dropdown.List>
+									{submenu.map((item, index) => (
+										<Dropdown.ListItem.Interactive
+											text={item.text}
+											// eslint-disable-next-line react/no-array-index-key
+											key={`dropdownItem${index}`}
+											href={item.url}
+										/>
+									))}
+								</Dropdown.List>
+							</Dropdown.Content>
+						</Dropdown.Root>
+					)
+				} else {
+					{
+						const { text, href, icon, color, size, __typename, ...rest } = cta
+
+						const textKey = text?.toLowerCase()
+						const isDownload = textKey === 'download'
+						const isGithub = textKey === 'github'
+
+						if (isGithub && !isInDropdown)
+							return (
+								<GithubStarsLink
+									key={href}
+									url={href}
+									hideGithubStars={hideGithubStars}
+								/>
+							)
+						const isLastButton = stableIdx === links.length - 1
+
+						return (
+							<Button
+								key={href}
+								text={text}
+								href={href}
+								size={size}
+								isFullWidth={isInDropdown}
+								color={color ?? (isLastButton ? product : 'secondary')}
+								isIconOnly={!text}
+								icon={
+									icon ? (
+										icon
+									) : isDownload ? (
+										<FlightIcon
+											name="download"
+											size={16}
+											style={{ display: 'block' }}
+										/>
+									) : isGithub ? (
+										<FlightIcon
+											name="github"
+											size={16}
+											style={{ display: 'block' }}
+										/>
+									) : undefined
+								}
+								{...rest}
+							/>
+						)
+					}
+				}
+			})}
+		</NavigationMenu.List>
+	)
+}
+
+export default CtaLinks
+
+/**
+ * Type guard to properly type incoming subnav CTAs as Dropdown if needed
+ * @param cta CTA to guard
+ * @returns CTA re-typed according to whether it has a submenu property
+ */
+function isDropdown(cta: CtaDropdown | CtaLink): cta is CtaDropdown {
+	return 'submenu' in cta
+}

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

@@ -0,0 +1,45 @@
+/**
+ * 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 12px;
+	@media (--medium-up) {
+		gap: 0;
+	}
+
+	& > * + * {
+		/* Spaces consecutive buttons horizontally on desktop */
+		margin-left: 16px;
+	}
+
+	&.isInDropdown {
+		/* Allows consecutive buttons to wrap */
+		flex-wrap: wrap;
+		white-space: wrap;
+		padding-left: 0;
+
+		& > * {
+			/* Spaces consecutive buttons vertically */
+			margin-left: 0;
+			margin-top: 16px;
+
+			&: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

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import FlightIcon from '@hashicorp/react-design-system-components/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" color="var(--menu-item-text-color)" />
+		</NavigationMenu.Trigger>
+	)
+}
+
+export default DropdownTrigger

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

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+/* Note: consumes from theme.module.css, as marked */
+
+.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(--menu-item-text-color); /* from theme.module.css */
+	}
+
+	&:hover {
+		background-color: var(--menu-item-hover-color);
+		border-radius: var(--hdsplus-spacing-01);
+	}
+}