@hashicorp/react-components 0.0.0 → 1.0.0

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'],
+	},
+})

package/.circleci/config.yml

@@ -1,8 +0,0 @@
-version: 2.1
-orbs:
-  node: circleci/node@3.0.0
-workflows:
-  test:
-    jobs:
-      - node/test:
-          run-command: bootstrap && npm test

package/.github/pull_request_template.md

@@ -1,36 +0,0 @@
-🎟️ [Asana Task]()
-🔍 [Preview Link](https://react-components-git-{branch-slug}.hashicorp.vercel.app)
-
----
-
-## Description
-
-Describe this pull request: what is it aiming to achieve? What should someone reviewing this PR know? If this PR includes visual changes, consider including before / after screenshots, or an animated gif showing interactions.
-
-## Release Information
-
-Please select one (**required**)
-
-- [ ] **Major** (This PR introduces a breaking (incompatible API) change)
-- [ ] **Minor** (This PR adds functionality but it backwards-compatible)
-- [ ] **Patch** (This PR adds a backwards-compatible bug fix)
-
-<details>
-<summary>Release Notes (<strong>required</strong>)</summary>
-<!-- This repo requires release notes on each PR in order to publish a package. Remove this comment and replace with release notes that will be reflected in the GitHub release notes. -->
-</details>
-
----
-
-### PR Checklist 🚀
-
-Items in this checklist may not may not apply to your PR, but please consider each item carefully.
-
-- [ ] Add Asana and Preview links above.
-- [ ] Conduct thorough self-review.
-- [ ] Add or update tests as appropriate.
-- [ ] Write a useful description (above) to give reviewers appropriate context.
-- [ ] Add release notes to the appropriate section (above).
-- [ ] Conduct reasonable cross browser testing for both compatibility and responsive behavior (We have a [Cross Browser Testing](https://crossbrowsertesting.com) account for this, if you don't have access, just ask!).
-- [ ] Conduct reasonable accessibility review (use the [WAS](https://accessible.org/Web-Accessibility-Standards-WAS-2.pdf) as a guide or an [axe browser plugin](https://www.deque.com/axe/) until we establish more formal checks).
-- [ ] Identify (in the description above) and document (add Asana tasks on [this board](https://app.asana.com/0/1100423001970639/list)) any technical debt that you're aware of, but are not addressing as part of this PR.

package/.github/workflows/publish.yml

@@ -1,181 +0,0 @@
-name: HashiBot Package Publisher
-
-on:
-  pull_request:
-    branches:
-      - master
-    types: [opened, synchronize, ready_for_review, edited, closed]
-
-jobs:
-  scan_changed_packages:
-    name: Scan changed packages
-    runs-on: ubuntu-latest
-    outputs:
-      packageName: ${{ steps.parse_changed.outputs.package_name }}
-    steps:
-      - uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-      - name: Parse changed packages
-        id: parse_changed
-        run: |
-          echo "::set-output name=package_name::$( echo $(npx lerna changed --json || echo "{}") | jq -r 'if . | length == 1 then .[0].name | tostring else "N/A" end' )"
-
-  add_comment:
-    name: Add warning comment to PR author
-    runs-on: ubuntu-latest
-    needs: scan_changed_packages
-    if: ${{ needs.scan_changed_packages.outputs.packageName == 'N/A' }}
-    steps:
-      - name: Comment on PR
-        uses: actions/github-script@v2
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            const { data: comments } = await github.issues.listComments({
-              owner: context.payload.repository.owner.login,
-              repo: context.payload.repository.name,
-              issue_number: context.payload.pull_request.number,
-            })
-            const body = "This pull request cannot be automatically published as we've detected multiple lerna packages have been affected. Please publish manually."
-            const dup = comments.find(c => c.body === body)
-            if (dup) {
-              core.warning('This comment already exists')
-              process.exit(0)
-            }
-            await github.issues.createComment({
-              owner: context.payload.repository.owner.login,
-              repo: context.payload.repository.name,
-              issue_number: context.payload.pull_request.number,
-              body
-            })
-
-  log_package:
-    name: Log package name
-    runs-on: ubuntu-latest
-    needs: scan_changed_packages
-    if: ${{ needs.scan_changed_packages.outputs.packageName != 'N/A' }}
-    steps:
-      - name: Log package name
-        env:
-          PACKAGE_NAME: ${{ needs.scan_changed_packages.outputs.packageName }}
-        run: |
-          echo "Change detected in package: $PACKAGE_NAME"
-
-  verify_description:
-    name: Verify description
-    runs-on: ubuntu-latest
-    needs: scan_changed_packages
-    outputs:
-      version: ${{ steps.version.outputs.version }}
-      releaseNotes: ${{ steps.release_notes.outputs.releaseNotes }}
-    if: ${{ needs.scan_changed_packages.outputs.packageName != 'N/A' }}
-    steps:
-      - name: Get semver keyword
-        id: version
-        uses: actions/github-script@v2
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            // Get contents of PR description
-            const prBody = context.payload.pull_request.body
-            // Parse lines of description
-            const prBodyLines = prBody.split('\n').map(x => x.trim()).filter(Boolean)
-            // Ensure version has been selected
-            const selectedVersion = prBodyLines.filter(x => x.match(/^-\s\[x\].*(major|minor|patch).*$/i))
-            if (!selectedVersion.length) return core.setFailed('Failed to find required version information! Ensure a SemVer category is selected in the pull request description.')
-            const [version] = /(major|minor|patch)/i.exec(selectedVersion[0])
-            if (!version) return core.setFailed('There was an error parsing the version. Please ensure an appropriate version is checked in the pull request description.')
-            core.setOutput("version", version)
-      - name: Get release notes
-        id: release_notes
-        uses: actions/github-script@v2
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            // Get contents of PR description
-            const prBody = context.payload.pull_request.body
-            // Parse lines of description
-            const prBodyLines = prBody.split('\n').map(x => x.trim()).filter(Boolean)
-            // Detect Release Notes
-            const releaseNotesStartIdx = prBodyLines.findIndex(line => line.match(/^<summary>release.*$/i))
-            const releaseNotesEndIdx = prBodyLines.findIndex(line => line.match(/^\<\/details>\s*$/i))
-            if (!releaseNotesStartIdx || !releaseNotesEndIdx) core.setFailed('Unable to parse release notes. Ensure release notes are included within the pull request description.')
-            // Extract release notes
-            const releaseNotes = Array.from({
-              length: releaseNotesEndIdx - releaseNotesStartIdx - 1
-            })
-              .map((_, i) => i + releaseNotesStartIdx + 1)
-              .map(idx => prBodyLines[idx])
-              .join('\n')
-            if (!releaseNotes.length || releaseNotes.startsWith('<!--')) return core.setFailed('Cannot find release notes associated with this pull request!')
-            core.setOutput("releaseNotes", releaseNotes)
-  # release_package:
-  #   name: Publish package
-  #   runs-on: ubuntu-latest
-  #   needs: [scan_changed_packages, verify_description]
-  #   if: ${{ needs.scan_changed_packages.outputs.packageName != 'N/A' && github.event.action == 'closed' && github.event.pull_request.merged == true }}
-  #   steps:
-  #     - uses: actions/checkout@v2
-  #       with:
-  #         fetch-depth: 0
-  #     - run: git checkout master
-  #     - name: Setup Node.js
-  #       uses: actions/setup-node@v1
-  #       with:
-  #         node-version: "12.x"
-  #         registry-url: "https://registry.npmjs.org"
-  #     - run: npm ci --ignore-scripts
-  #       env:
-  #         NODE_AUTH_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
-  #     - run: npm run vercel-build
-  #     - name: Configure git credentials
-  #       run: |
-  #         git config --global user.email "mktg-dev-github-bot@hashicorp.com"
-  #         git config --global user.name "HashiBot Web"
-  #     - name: Tag major version
-  #       if: ${{ needs.verify_description.outputs.version == 'Major'}}
-  #       run: |
-  #         echo 'VERSION<<EOF' >> $GITHUB_ENV
-  #         ./node_modules/.bin/lerna version major --yes | jq -Rsr 'split(" => ") | .[1] | gsub("[\\n\\t]"; "")' >> $GITHUB_ENV
-  #         echo 'EOF' >> $GITHUB_ENV
-  #       env:
-  #         NODE_AUTH_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
-  #     - name: Tag minor version
-  #       if: ${{ needs.verify_description.outputs.version == 'Minor'}}
-  #       run: |
-  #         echo 'VERSION<<EOF' >> $GITHUB_ENV
-  #         ./node_modules/.bin/lerna version minor --yes | jq -Rsr 'split(" => ") | .[1] | gsub("[\\n\\t]"; "")' >> $GITHUB_ENV
-  #         echo 'EOF' >> $GITHUB_ENV
-  #       env:
-  #         NODE_AUTH_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
-  #     - name: Tag patch version
-  #       if: ${{ needs.verify_description.outputs.version == 'Patch'}}
-  #       run: |
-  #         echo 'VERSION<<EOF' >> $GITHUB_ENV
-  #         ./node_modules/.bin/lerna version patch --yes | jq -Rsr 'split(" => ") | .[1] | gsub("[\\n\\t]"; "")' >> $GITHUB_ENV
-  #         echo 'EOF' >> $GITHUB_ENV
-  #       env:
-  #         NODE_AUTH_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
-  #     - name: Print version
-  #       run: echo $VERSION
-  #     - name: Create GitHub release
-  #       uses: actions/github-script@v2
-  #       with:
-  #         github-token: ${{ secrets.GITHUB_TOKEN }}
-  #         script: |
-  #           github.repos.createRelease({
-  #             owner: context.payload.repository.owner.login,
-  #             repo: context.payload.repository.name,
-  #             tag_name: `${process.env.PACKAGE_NAME}@${process.env.VERSION}`,
-  #             body: process.env.RELEASE_NOTES,
-  #             draft: false,
-  #             prerelease: false,
-  #           });
-  #       env:
-  #         PACKAGE_NAME: ${{ needs.scan_changed_packages.outputs.packageName }}
-  #         RELEASE_NOTES: ${{ needs.verify_description.outputs.releaseNotes }}
-  #     - name: Publish package
-  #       run: ./node_modules/.bin/lerna publish from-package --yes
-  #       env:
-  #         NODE_AUTH_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}

package/__test-helpers/expect-throw.js

@@ -1,6 +0,0 @@
-export default function expectToThrow(fn, throwResult) {
-  jest.spyOn(console, 'error')
-  console.error.mockImplementation(() => {})
-  expect(fn).toThrow(throwResult)
-  console.error.mockRestore()
-}

package/__test-helpers/extend-expect.js

@@ -1 +0,0 @@
-import '@testing-library/jest-dom/extend-expect'

package/__test-helpers/mocks/css-module-mock.js

@@ -1 +0,0 @@
-module.exports = {}

package/__test-helpers/mocks/graphql-fragment-mock.js

@@ -1 +0,0 @@
-module.exports = {}

package/__test-helpers/mocks/svg-mock.js

@@ -1 +0,0 @@
-module.exports = {}

package/babel.config.js

@@ -1,5 +0,0 @@
-// This is here for jest, it's not needed for nextjs as its the default
-
-module.exports = {
-  presets: ['next/babel'],
-}

package/jest.config.js

@@ -1,13 +0,0 @@
-module.exports = {
-  moduleNameMapper: {
-    '\\.module.css$': '<rootDir>/__test-helpers/mocks/css-module-mock.js',
-    '\\.graphql$': '<rootDir>/__test-helpers/mocks/graphql-fragment-mock.js',
-    '\\.svg(?:\\?.*)*$': '<rootDir>/__test-helpers/mocks/svg-mock.js',
-  },
-  transformIgnorePatterns: [
-    '/node_modules/(?!@hashicorp/react-)',
-    '\\.pnp\\.[^\\/]+$',
-  ],
-  verbose: true,
-  setupFilesAfterEnv: ['<rootDir>/__test-helpers/extend-expect.js'],
-}

package/lerna.json

@@ -1,16 +0,0 @@
-{
-  "lerna": "3.22.1",
-  "packages": ["packages/*"],
-  "version": "independent",
-  "command": {
-    "publish": {
-      "ignoreChanges": [
-        "*.test.js",
-        "props.js",
-        "docs.mdx",
-        "README.md",
-        "package-lock.json"
-      ]
-    }
-  }
-}

package/next.config.js

@@ -1,14 +0,0 @@
-const withHashicorp = require('@hashicorp/nextjs-scripts')
-const withSwingset = require('swingset')
-
-module.exports = withHashicorp({
-  transpileModules: [
-    'swingset',
-    '@hashicorp/react-.*',
-    '@hashicorp/nextjs-scripts',
-  ],
-})(
-  withSwingset({
-    componentsRoot: 'packages/*',
-  })({ svgo: { plugins: [{ removeViewBox: false }] } })
-)