@hashicorp/react-components 0.0.0-nightly.ad81ac2 → 0.0.0-nightly.b154bf4

package/src/components/related-content/index.test.tsx

@@ -1,74 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import RelatedContent from '.'
-
-const defaultProps = {
-	headline: 'Related Content',
-	description:
-		'Leo mauris fermentum pharetra blandit tellus euismod. Leo mauris fermentum pharetra blandit tellus euismod.',
-	cards: [
-		{
-			link: 'https://hashicorp.com',
-			meta: ['USE CASES'],
-			heading:
-				'Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus euismod…',
-			description:
-				'Body small - 4 lines with character limit of 170. Leo mauris fermentum pharetra blandit tellus euismod pharetra. Duis egestas volutpat dolor…',
-		},
-		{
-			link: 'https://hashicorp.com',
-			meta: ['USE CASES'],
-			heading:
-				'Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus euismod…',
-			description:
-				'Body small - 4 lines with character limit of 170. Leo mauris fermentum pharetra blandit tellus euismod pharetra. Duis egestas volutpat dolor…',
-		},
-		{
-			link: 'https://hashicorp.com',
-			meta: ['USE CASES'],
-			heading:
-				'Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus euismod…',
-			description:
-				'Body small - 4 lines with character limit of 170. Leo mauris fermentum pharetra blandit tellus euismod pharetra. Duis egestas volutpat dolor…',
-		},
-		{
-			link: 'https://hashicorp.com',
-			meta: ['USE CASES'],
-			heading:
-				'Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus euismod…',
-			description:
-				'Body small - 4 lines with character limit of 170. Leo mauris fermentum pharetra blandit tellus euismod pharetra. Duis egestas volutpat dolor…',
-		},
-	],
-	cta: {
-		text: 'Sign up now',
-		href: '/components/relatedcontent',
-	},
-}
-
-describe('<RelatedContent />', () => {
-	it('should render the headline prop', () => {
-		render(<RelatedContent {...defaultProps} />)
-		const headlineText = screen.getByText(defaultProps.headline)
-		expect(headlineText.tagName).toBe('H2')
-		expect(headlineText).toHaveClass(/headline/)
-	})
-
-	it('should render the description prop', () => {
-		render(<RelatedContent {...defaultProps} />)
-		const descText = screen.getByText(defaultProps.description)
-		expect(descText.tagName).toBe('P')
-		expect(descText).toHaveClass(/description/)
-	})
-
-	it('should render cards', () => {
-		render(<RelatedContent {...defaultProps} />)
-		const cardsContainer = screen.getByTestId('wpl-cards-container')
-		expect(cardsContainer.children.length).toBeGreaterThan(0)
-	})
-
-	it('should render the optional CTA', () => {
-		render(<RelatedContent {...defaultProps} />)
-		const ctaContainer = screen.getByTestId('wpl-cta-container')
-		expect(ctaContainer).toHaveClass(/cta/)
-	})
-})

package/src/components/related-content/index.tsx

@@ -1,56 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Card from '../card'
-import classNames from 'classnames'
-import Link from 'next/link'
-import type { RelatedContentProps } from './types'
-import s from './style.module.css'
-
-const RelatedContent = ({
-	appearance = 'light',
-	headline,
-	description,
-	cards,
-	cta,
-}: RelatedContentProps) => {
-	return (
-		<div
-			className={classNames([
-				s.wrapper,
-				s[appearance],
-				{ ['hdsplus-dark-mode']: appearance === 'dark' },
-			])}
-		>
-			<div className={s.textStack}>
-				<h2 className={classNames([s.headline, s[appearance]])}>{headline}</h2>
-				{description ? (
-					<p className={classNames([s.description, s[appearance]])}>
-						{description}
-					</p>
-				) : null}
-			</div>
-			<div className={s.cards} data-testid="wpl-cards-container">
-				{cards.map((card, i) => (
-					<Card
-						key={i}
-						link={card.link}
-						thumbnail={card.thumbnail}
-						meta={card.meta}
-						heading={card.heading}
-						description={card.description}
-					/>
-				))}
-			</div>
-			<div className={s.cta} data-testid="wpl-cta-container">
-				<Link href={cta.href} legacyBehavior>
-					{cta.text}
-				</Link>
-			</div>
-		</div>
-	)
-}
-
-export default RelatedContent

package/src/components/related-content/style.module.css

@@ -1,89 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-.wrapper {
-  composes: g-grid from global;
-  composes: g-grid-container from global;
-  padding-top: 64px;
-  padding-bottom: 64px;
-
-  @media (--large) {
-    padding-top: 88px;
-    padding-bottom: 88px;
-  }
-  &.dark {
-    background-color: var(--wpl-neutral-900);
-  }
-}
-
-.textStack {
-  grid-column: 1 / -1;
-  margin-bottom: 24px;
-
-  @media (--medium) {
-    grid-column: 1 / span 7;
-    margin-bottom: 32px;
-  }
-
-  @media (--large) {
-    grid-column: 1 / span 6;
-    margin-bottom: 32px;
-  }
-}
-
-.headline {
-  composes: g-type-display-3 from global;
-  color: var(--wpl-neutral-900);
-  margin: 0 0 16px 0;
-
-  &.dark {
-    color: white;
-  }
-}
-
-.description {
-  composes: g-type-body from global;
-  color: var(--wpl-neutral-500);
-  margin: 0;
-
-  &.dark {
-    color: white;
-  }
-}
-
-.cards {
-  --columns: 1;
-
-  grid-column: 1 / -1;
-  display: grid;
-  grid-gap: 32px;
-  grid-template-columns: repeat(var(--columns), 1fr);
-  margin-bottom: 32px;
-
-  @media (--medium) {
-    --columns: 2;
-  }
-  @media (--large) {
-    --columns: 4;
-  }
-}
-
-.cta {
-  grid-column: 1 / -1;
-
-  & a {
-    font-weight: 500;
-    font-size: 17px;
-    line-height: 20px;
-    letter-spacing: 0.0125em;
-    text-decoration: underline;
-    text-underline-offset: 3px;
-    display: inline;
-
-    @nest .dark & {
-      color: var(--wpl-neutral-300);
-    }
-  }
-}

package/src/components/related-content/types.ts

@@ -1,21 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import type { CardProps } from '../card/types'
-
-export interface RelatedContentProps {
-	appearance?: 'light' | 'dark'
-	headline: string
-	description?: string
-	cards: Array<RelatedContentCardProps>
-	cta: RelatedContentCtaProps
-}
-
-interface RelatedContentCtaProps {
-	href: string
-	text: string
-}
-
-type RelatedContentCardProps = Omit<CardProps, 'appearance'>

package/src/components/subnav/helpers/areBasePathsMatching.ts

@@ -1,13 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-export function areBasePathsMatching(pathA: string, pathB: string) {
-	if (!pathA || !pathB) return false
-	// use .filter(Boolean) to remove any falsy values, like ""
-	const [pathABase] = pathA.split('/').filter(Boolean)
-	const [pathBBase] = pathB.split('/').filter(Boolean)
-
-	return pathABase === pathBBase
-}

package/src/components/subnav/helpers/traverse/index.ts

@@ -1,42 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-function visitObject(objectIn, handleNode) {
-	const objectOut = {}
-	Object.keys(objectIn).forEach((key) => {
-		objectOut[key] = visitProperty(key, objectIn[key], handleNode)
-	})
-	return objectOut
-}
-
-function visitProperty(key, value, handleNode) {
-	const handledValue = handleNode(key, value)
-	if (isObject(value)) {
-		return visitObject(handledValue, handleNode)
-	} else if (isArray(handledValue)) {
-		return handledValue.map((v) => visitProperty(key, v, handleNode))
-	} else {
-		return handledValue
-	}
-}
-
-// Returns true if a value is an array, false otherwise
-export function isArray(value) {
-	return value && typeof value === 'object' && value.constructor === Array
-}
-
-// Returns true if a value is an object, false otherwise
-export function isObject(value) {
-	return value && typeof value === 'object' && value.constructor === Object
-}
-
-function traverse(
-	valueIn: unknown,
-	handleNode: (key: unknown, value: unknown) => unknown = (n) => n
-) {
-	return visitProperty(false, valueIn, handleNode)
-}
-
-export default traverse

package/src/components/subnav/helpers/useHeightRef.ts

@@ -1,42 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { useCallback, useState } from 'react'
-
-export default function useHeightRef(): [number, (target: any) => void] {
-	const [height, setHeight] = useState(0)
-
-	const heightRef = useCallback((target) => {
-		let viewport
-		let requestId
-
-		if (target) {
-			viewport = target.ownerDocument.defaultView
-			viewport.addEventListener('resize', requestHeight)
-
-			requestHeight()
-
-			return cleanup
-		}
-
-		function requestHeight() {
-			if (!requestId) requestId = requestAnimationFrame(checkHeight)
-		}
-
-		function checkHeight() {
-			requestId = null
-			setHeight(target.offsetHeight)
-		}
-
-		function cleanup() {
-			cancelAnimationFrame(requestId)
-			viewport.removeEventListener('resize', requestHeight)
-		}
-	}, undefined as any)
-	// Current behavior requires that this callback have a dependency list of
-	// `undefined` even though that's not a valid invocation of useCallback.
-
-	return [height, heightRef]
-}

package/src/components/subnav/helpers/useNavRef.ts

@@ -1,30 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import useHeightRef from './useHeightRef'
-import useOverflowRef from './useOverflowRef'
-import useStuckRef from './useStuckRef'
-
-export default function useNavRef(): [
-	boolean,
-	boolean,
-	number,
-	(target: any) => void
-] {
-	const [isStuck, stuckRef] = useStuckRef()
-	const [hasOverflow, overflowRef] = useOverflowRef()
-	const [height, heightRef] = useHeightRef()
-
-	return [
-		isStuck,
-		hasOverflow,
-		height,
-		function navRef(target) {
-			if (typeof stuckRef === 'function') stuckRef(target)
-			if (typeof overflowRef === 'function') overflowRef(target)
-			if (typeof heightRef === 'function') heightRef(target)
-		},
-	]
-}

package/src/components/subnav/helpers/useOverflowRef.ts

@@ -1,85 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { useCallback, useState } from 'react'
-
-const MutationObserver =
-	(typeof window !== 'undefined' && window.MutationObserver) || null
-const mutationOpts = { attributes: true, childList: true, subtree: true }
-
-/*
-
-Overflow is determined by whether the width of a target element’s content is
-greater than the width of its layout.
-
-Overflow is checked on viewport resize and on a target element’s DOM mutation.
-Both are throttled by animation frame requests.
-
-MutationObserver Compatibility (https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver):
-
-- Chrome 26+
-- Edge 12+
-- Firefox 14+
-- Internet Explorer 11+
-- Safari 17+
-
-*/
-
-export default function useOverflowRef(): [boolean, (target: any) => void] {
-	const [[hasOverflow, currentScrollWidth], setState] = useState([false, 0])
-
-	const overflowRef = useCallback((target) => {
-		let viewport
-		let requestId
-		let mutationObserver
-
-		if (target) {
-			viewport = target.ownerDocument.defaultView
-
-			viewport.addEventListener('resize', requestOverflow)
-
-			if (MutationObserver) {
-				mutationObserver = new MutationObserver(requestOverflow)
-
-				mutationObserver.observe(target, mutationOpts)
-			}
-
-			requestOverflow()
-
-			return cleanup
-		}
-
-		function requestOverflow() {
-			if (!requestId) requestId = requestAnimationFrame(checkOverflow)
-		}
-
-		function checkOverflow() {
-			requestId = null
-
-			const newScrollWidth = target.scrollWidth
-			const newOffsetWidth = target.offsetWidth
-			const newHasOverflow =
-				(currentScrollWidth || newScrollWidth) > newOffsetWidth
-
-			if (hasOverflow !== newHasOverflow) {
-				cleanup()
-
-				setState([newHasOverflow, newScrollWidth])
-			}
-		}
-
-		function cleanup() {
-			cancelAnimationFrame(requestId)
-
-			viewport.removeEventListener('resize', requestOverflow)
-
-			if (MutationObserver) mutationObserver.disconnect()
-		}
-	}, undefined as any)
-	// Current behavior requires that this callback have a dependency list of
-	// `undefined` even though that's not a valid invocation of useCallback.
-
-	return [hasOverflow, overflowRef]
-}

package/src/components/subnav/helpers/useStuckRef.ts

@@ -1,51 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { useCallback, useState } from 'react'
-
-const IntersectionObserver =
-	(typeof window !== 'undefined' && window.IntersectionObserver) || null
-const intersectionOpts = { threshold: [1] }
-
-/*
-
-Stuck-ness is determined by whether a sticky target element has intersected the
-top boundary of its viewport.
-
-Stuck-ness is checked on intersection observation.
-
-IntersectionObserver Compatibility (https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver#Browser_compatibility):
-
-- Chrome 51+
-- Edge 15+
-- Firefox 55+
-- Safari 12.1+
-
-Internet Explorer 11 gracefully skips over this functionality, as it does not
-support `IntersectionObserver` or CSS `position: sticky`.
-
-*/
-
-export default function useStuckRef(): [boolean, (target: any) => void] {
-	const [isStuck, setStuck] = useState(false)
-
-	const stuckRef = useCallback((target) => {
-		if (target && IntersectionObserver) {
-			const intersectionObserver = new IntersectionObserver(([entry]) => {
-				const nowIsStuck = entry.intersectionRatio < 1
-
-				if (isStuck !== nowIsStuck) setStuck(nowIsStuck)
-			}, intersectionOpts)
-
-			intersectionObserver.observe(target)
-
-			return intersectionObserver.disconnect.bind(intersectionObserver)
-		}
-	}, undefined as any)
-	// Current behavior requires that this callback have a dependency list of
-	// `undefined` even though that's not a valid invocation of useCallback.
-
-	return [isStuck, stuckRef]
-}