@hashicorp/react-components 0.0.0-nightly.a1d968e → 0.0.0-nightly.a80dc5e

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hashicorp/react-components",
-	"version": "0.0.0-nightly.a1d968e",
+	"version": "0.0.0-nightly.a80dc5e",
 	"main": "src/index.ts",
 	"scripts": {
 		"lint": "next-hashicorp lint",

package/src/components/card/index.test.tsx

@@ -56,7 +56,7 @@ describe('<Card />', () => {
 		const metaElement = screen.getByTestId('wpl-card-meta')
 
 		cardMeta.forEach((item) => {
-			expect(metaElement).toContainElement(screen.getByText(item))
+			expect(metaElement).toHaveTextContent(item)
 		})
 		expect(metaElement).toContainElement(screen.getByText('|'))
 	})

package/src/components/card/newsroom-card/index.test.tsx

@@ -26,7 +26,7 @@ describe('<NewsroomCard />', () => {
 		const metaElement = screen.getByTestId('wpl-card-meta')
 
 		expectedMeta.forEach((item) => {
-			expect(metaElement).toContainElement(screen.getByText(item))
+			expect(metaElement).toHaveTextContent(item)
 		})
 
 		expect(metaElement).toContainElement(screen.queryByText('|'))

package/src/components/card/primitives.tsx

@@ -101,23 +101,23 @@ function LogoThumbnail({ src, alt }: ThumbnailProps) {
 
 function Meta({ items }: MetaProps) {
 	return (
-		<ul className={s.meta} data-testid="wpl-card-meta">
-			{items.map((item, stableIdx) => {
-				return (
-					// eslint-disable-next-line react/no-array-index-key
-					<li key={stableIdx}>
-						<TextPlus.Label>
+		<div className={s.meta} data-testid="wpl-card-meta">
+			<TextPlus.Label>
+				{items.map((item, stableIdx) => {
+					const isLastItem = stableIdx === items.length - 1
+					return (
+						<>
 							{item}
-							{stableIdx < items.length - 1 ? (
+							{!isLastItem ? (
 								<span className={s.metaSeparator} aria-hidden={true}>
 									|
 								</span>
 							) : null}
-						</TextPlus.Label>
-					</li>
-				)
-			})}
-		</ul>
+						</>
+					)
+				})}
+			</TextPlus.Label>
+		</div>
 	)
 }
 

package/src/components/card/resource-card/index.test.tsx

@@ -26,7 +26,7 @@ describe('<ResourceCard />', () => {
 		const metaElement = screen.getByTestId('wpl-card-meta')
 
 		expectedMeta.forEach((item) => {
-			expect(metaElement).toContainElement(screen.getByText(item))
+			expect(metaElement).toHaveTextContent(item)
 		})
 
 		expect(metaElement).toContainElement(screen.getByText('|'))

package/src/components/card/unified-card/index.spec.tsx

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { render, screen } from '@testing-library/react'
+import { UnifiedCard, UnifiedCardProps } from '.'
+
+const defaultProps: UnifiedCardProps = {
+	link: 'https://hashicorp.com',
+	heading: 'Example heading',
+	thumbnail: {
+		src: 'https://www.datocms-assets.com/19447/1648680074-screenshot-2022-03-31-at-00-40-47.png',
+		alt: 'HashiConf Europe 2022 Recap',
+	},
+} as const
+
+describe(`<UnifiedCard />`, () => {
+	it('should render the provided meta with a separator if n > 1', () => {
+		const expectedMeta = ['Category', 'Hello']
+		render(<UnifiedCard {...defaultProps} meta={expectedMeta} />)
+
+		const metaElement = screen.getByTestId('wpl-card-meta')
+
+		expectedMeta.forEach((item) => {
+			expect(metaElement).toHaveTextContent(item)
+		})
+
+		expect(metaElement).toContainElement(screen.getByText('|'))
+	})
+
+	it('it should not render a separator if n === 1', () => {
+		render(<UnifiedCard {...defaultProps} meta={['Category']} />)
+		const metaElement = screen.getByTestId('wpl-card-meta')
+
+		expect(metaElement).toContainElement(screen.getByText('Category'))
+
+		expect(metaElement).not.toContainElement(screen.queryByText('|'))
+	})
+})

package/src/components/subnav/index.tsx

@@ -164,6 +164,10 @@ function Subnav({ className, theme = 'light', ...restProps }: SubnavProps) {
 		setActivePanel(panel)
 	}
 
+	const ariaLabel = restProps?.titleLink?.text
+		? `${restProps.titleLink.text} pages`
+		: 'Subnav pages'
+
 	return (
 		<>
 			{/**
@@ -179,7 +183,7 @@ function Subnav({ className, theme = 'light', ...restProps }: SubnavProps) {
 					[s.hasOverflow]: hasOverflow,
 					'hdsplus-dark-mode': theme === 'dark',
 				})}
-				aria-label={`${product} website navigation`}
+				aria-label={ariaLabel}
 				onValueChange={activatePanel}
 				value={activePanel}
 				delayDuration={0}