@hashicorp/react-components 0.0.0-canary.57d393c

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

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

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+/* Note: consumes from theme.module.css, as marked */
+
+.root {
+	color: var(--menu-item-text-color); /* from theme.module.css */
+	position: relative;
+
+	&.isActive {
+		color: var(--menu-item-text-color-active);
+	}
+}

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

@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+/* Note: consumes from theme.module.css, as marked */
+
+.root {
+	position: sticky;
+	top: -1px;
+	z-index: 900;
+	background: var(--background-color); /* from theme.module.css */
+	border-top: 1px solid var(--border-color); /* from theme.module.css */
+	border-bottom: 1px solid transparent;
+	transition: border-bottom-color 0.8s;
+
+	&.isSticky {
+		border-bottom-color: var(--border-color); /* from theme.module.css */
+	}
+
+	/*
+      * 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

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

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

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+/*
+Theme settings.
+Consumed in nearly all CSS files in this component,
+including in /partials.
+*/
+
+.light {
+	/* main */
+	--background-color: var(--white);
+	--border-color: var(--gray-5);
+	--dropdown-background-color: var(--white);
+
+	/* title or logo link */
+	--title-text-color: var(--gray-1);
+
+	/* github-stars-link */
+	--gh-stars-icon-color: var(--black);
+	--gh-stars-scrim-color: rgba(0, 0, 0, 0.1);
+
+	/* menu items */
+	--menu-item-text-color: #3B3D45;
+	--menu-item-text-color-active: #0C0C0E;
+	--menu-item-heading-text-color: var(--gray-3);
+	--menu-item-hover-color: #F1F2F3;
+}
+
+.dark {
+	/* main */
+	--background-color: var(--black);
+	--border-color: var(--gray-2);
+	--dropdown-background-color: var(--gray-1);
+
+	/* title or logo link */
+	--title-text-color: var(--white);
+
+	/* github-stars-link */
+	--gh-stars-icon-color: var(--white);
+	--gh-stars-scrim-color: rgba(255, 255, 255, 0.15);
+
+	/* menu items */
+	--menu-item-text-color: #D5D7DB;
+	--menu-item-text-color-active: #EFEFF1;
+	--menu-item-heading-text-color: var(--gray-4);
+	--menu-item-hover-color: #1E222A;
+}

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+	"extends": "../../base.tsconfig.json",
+	"compilerOptions": {
+		"baseUrl": ".",
+		"plugins": [
+			{
+				"name": "next"
+			}
+		],
+		"types": ["vitest/globals", "@testing-library/jest-dom"]
+	},
+	"include": ["./**/*"],
+	"exclude": ["node_modules"]
+}

package/vitest.config.mts

@@ -0,0 +1,12 @@
+import { defineConfig, configDefaults } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+	plugins: [react()],
+	test: {
+		globals: true,
+		environment: 'jsdom',
+		exclude: [...configDefaults.exclude, 'src/__tests__/e2e'],
+		setupFiles: ['.test/setup-vitest.js'],
+	},
+})