From 9340763eac54d4cb9295faeed619327d967e4fa5 Mon Sep 17 00:00:00 2001 From: Dylan Staley <88163+dstaley@users.noreply.github.com> Date: Fri, 19 Apr 2024 10:08:50 -0700 Subject: [PATCH] feat: use react-design-system-components (#2412) * feat: use react-design-system-components * fix: bump to es2015 * chore(deps): bump react-design-system-components --- next-env.d.ts | 1 + next.config.js | 1 - package-lock.json | 53 ++- package.json | 5 +- src/components/branded-card/index.tsx | 4 +- src/pages/_app.tsx | 1 + src/pages/style.css | 3 +- src/styles/themes/dark.css | 326 ------------------ .../components/downloads-section/helpers.ts | 2 +- .../components/downloads-section/index.tsx | 12 +- .../product-downloads-view/server-helpers.ts | 2 +- tsconfig.json | 2 +- 12 files changed, 58 insertions(+), 354 deletions(-) delete mode 100644 src/styles/themes/dark.css diff --git a/next-env.d.ts b/next-env.d.ts index 2532e77aba..4f11a03dc6 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,4 +1,5 @@ /// +/// // NOTE: This file should not be edited // see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/next.config.js b/next.config.js index 694e7079f0..e663011e04 100644 --- a/next.config.js +++ b/next.config.js @@ -37,7 +37,6 @@ const hideWaypointTipContent = { } module.exports = withHashicorp({ - nextOptimizedImages: true, css: false, })({ transpilePackages: [ diff --git a/package-lock.json b/package-lock.json index b9c899903c..7e06eb323a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,6 +31,8 @@ "@hashicorp/react-code-block": "^6.6.0", "@hashicorp/react-consent-manager": "^9.2.0", "@hashicorp/react-content": "^8.3.0", + "@hashicorp/react-design-system-components": "^0.0.0-nightly.0c364f3", + "@hashicorp/react-design-system-tokens": "^0.0.0-nightly.0c364f3", "@hashicorp/react-docs-sidenav": "^9.1.0", "@hashicorp/react-enterprise-alert": "^7.0.1", "@hashicorp/react-error-view": "^0.2.0", @@ -164,9 +166,10 @@ "postcss-preset-env": "^6.7.0", "react-test-renderer": "^18.2.0", "rimraf": "^5.0.5", + "sass": "^1.75.0", "simple-git-hooks": "^2.7.0", "stylelint": "^13.8.0", - "typescript": "^5.3.2", + "typescript": "^5.4.5", "vite-tsconfig-paths": "^4.3.2", "vitest": "^1.4.0", "yargs": "^17.6.2" @@ -1928,9 +1931,9 @@ "integrity": "sha512-zmMpnKv4vulhVFVCpqf3oAAR5fQeDDnMxbeJIZllLFCgF2JFoL6C/Irghx4WnBAG8GkLs8CbxjPVtFjSYq+V8w==" }, "node_modules/@hashicorp/flight-icons": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@hashicorp/flight-icons/-/flight-icons-3.0.0.tgz", - "integrity": "sha512-gjI24oDuJQ3w1Obn6oghcopv7xsX/YcjjYaffhsN2BAYEQ83ywT1IiyN13RKdFG8Ufa+9h+o6Yi2e+jBVNNU/w==" + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@hashicorp/flight-icons/-/flight-icons-3.1.0.tgz", + "integrity": "sha512-M0Fm4wBkvCTf6I/xLZcvmR4fefOFG0vcCC4lJ24AW2h8cUh2vzKJw2nVh2Px461Kk/bp4337ufOpt34zie4ctw==" }, "node_modules/@hashicorp/localstorage-polyfill": { "version": "1.0.14", @@ -5122,6 +5125,27 @@ "react": ">=16.x" } }, + "node_modules/@hashicorp/react-design-system-components": { + "version": "0.0.0-nightly.0c364f3", + "resolved": "https://registry.npmjs.org/@hashicorp/react-design-system-components/-/react-design-system-components-0.0.0-nightly.0c364f3.tgz", + "integrity": "sha512-S5MEJ0Mga+NWTF5sj7Xst3avonhNnMMV+1JARE4Qw8WjZFKrNPThJYqDKBUayljUTlhdDEI71w7Y1r7CttnW7g==", + "dependencies": { + "@hashicorp/flight-icons": "^3.1.0", + "classnames": "^2.3.2" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "next": ">=12.0.0", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + } + }, + "node_modules/@hashicorp/react-design-system-tokens": { + "version": "0.0.0-nightly.0c364f3", + "resolved": "https://registry.npmjs.org/@hashicorp/react-design-system-tokens/-/react-design-system-tokens-0.0.0-nightly.0c364f3.tgz", + "integrity": "sha512-kNYq57i9YqSYWq7vntFhVDU8LKZHRRihuoZ8YfzDmyL8TL2pnEFnCWoAg2FlYUrJIEQeeBxn/40YFAU7VmUW6Q==" + }, "node_modules/@hashicorp/react-docs-sidenav": { "version": "9.1.0", "resolved": "https://registry.npmjs.org/@hashicorp/react-docs-sidenav/-/react-docs-sidenav-9.1.0.tgz", @@ -11858,7 +11882,6 @@ "version": "18.2.4", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.4.tgz", "integrity": "sha512-G2mHoTMTL4yoydITgOGwWdWMVd8sNgyEP85xVmMKAPUBwQWm9wBPQUmvbeF4V3WBY1P7mmL4BkjQ0SqUpf1snw==", - "dev": true, "dependencies": { "@types/react": "*" } @@ -15793,9 +15816,9 @@ } }, "node_modules/classnames": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", - "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" }, "node_modules/clean-stack": { "version": "2.2.0", @@ -38693,9 +38716,9 @@ "dev": true }, "node_modules/sass": { - "version": "1.49.9", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.9.tgz", - "integrity": "sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A==", + "version": "1.75.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.75.0.tgz", + "integrity": "sha512-ShMYi3WkrDWxExyxSZPst4/okE9ts46xZmJDSawJQrnte7M1V9fScVB+uNXOVKRBt0PggHOwoZcn8mYX4trnBw==", "dependencies": { "chokidar": ">=3.0.0 <4.0.0", "immutable": "^4.0.0", @@ -38705,7 +38728,7 @@ "sass": "sass.js" }, "engines": { - "node": ">=12.0.0" + "node": ">=14.0.0" } }, "node_modules/sax": { @@ -42588,9 +42611,9 @@ } }, "node_modules/typescript": { - "version": "5.3.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.2.tgz", - "integrity": "sha512-6l+RyNy7oAHDfxC4FzSJcz9vnjTKxrLpDG5M2Vu4SHRVNg6xzqZp6LYSR9zjqQTu8DU/f5xwxUdADOkbrIX2gQ==", + "version": "5.4.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz", + "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==", "devOptional": true, "bin": { "tsc": "bin/tsc", diff --git a/package.json b/package.json index aa6b3e383f..2c41563873 100644 --- a/package.json +++ b/package.json @@ -80,9 +80,10 @@ "postcss-preset-env": "^6.7.0", "react-test-renderer": "^18.2.0", "rimraf": "^5.0.5", + "sass": "^1.75.0", "simple-git-hooks": "^2.7.0", "stylelint": "^13.8.0", - "typescript": "^5.3.2", + "typescript": "^5.4.5", "vite-tsconfig-paths": "^4.3.2", "vitest": "^1.4.0", "yargs": "^17.6.2" @@ -110,6 +111,8 @@ "@hashicorp/react-code-block": "^6.6.0", "@hashicorp/react-consent-manager": "^9.2.0", "@hashicorp/react-content": "^8.3.0", + "@hashicorp/react-design-system-components": "^0.0.0-nightly.0c364f3", + "@hashicorp/react-design-system-tokens": "^0.0.0-nightly.0c364f3", "@hashicorp/react-docs-sidenav": "^9.1.0", "@hashicorp/react-enterprise-alert": "^7.0.1", "@hashicorp/react-error-view": "^0.2.0", diff --git a/src/components/branded-card/index.tsx b/src/components/branded-card/index.tsx index 6afc4e8d19..b361ecd9f1 100644 --- a/src/components/branded-card/index.tsx +++ b/src/components/branded-card/index.tsx @@ -4,7 +4,7 @@ */ import { CSSProperties } from 'react' -import Image from 'next/legacy/image' +import Image, { type StaticImageData } from 'next/legacy/image' import { BrandedCardProps } from './types' import { ProductSlug } from 'types/products' // Note: images are static imports, seems to be a requirement of next/image @@ -20,7 +20,7 @@ import patternVault from './img/vault.png' import patternWaypoint from './img/waypoint.png' import s from './branded-card.module.css' -const PATTERN_IMG_MAP: Record = { +const PATTERN_IMG_MAP: Record = { boundary: patternBoundary, consul: patternConsul, nomad: patternNomad, diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 08d9880dd5..a6ed9773b3 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -39,6 +39,7 @@ import { AIFeatureToast } from 'components/chatbox/ai-feature-toast' // Local imports import './style.css' +import '@hashicorp/react-design-system-components/src/design-system-components.scss' if (typeof window !== 'undefined' && process.env.AXE_ENABLED) { import('react-dom').then((ReactDOM) => { diff --git a/src/pages/style.css b/src/pages/style.css index 2829b1a2e9..9497397f15 100644 --- a/src/pages/style.css +++ b/src/pages/style.css @@ -12,12 +12,13 @@ *** */ @import '~@hashicorp/design-system-tokens/dist/devdot/css/tokens.css'; +@import '~@hashicorp/react-design-system-tokens/dist/css/tokens.css'; +@import '~@hashicorp/react-design-system-tokens/dist/css/dark/tokens.css'; @import '~@hashicorp/design-system-tokens/dist/devdot/css/helpers/elevation.css'; @import '~@hashicorp/design-system-tokens/dist/devdot/css/helpers/typography.css'; /* Theme files */ @import 'styles/themes/global.css'; -@import 'styles/themes/dark.css'; /* Display 600 type style. HDS candidate, only in Dev Dot for now */ @import 'styles/hds-typography-display-600.css'; diff --git a/src/styles/themes/dark.css b/src/styles/themes/dark.css deleted file mode 100644 index 54d40ac50e..0000000000 --- a/src/styles/themes/dark.css +++ /dev/null @@ -1,326 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -[data-theme='dark'] { - --token-color-palette-blue-500: #6bc1ff; - --token-color-palette-blue-400: #4ca1ff; - --token-color-palette-blue-300: #389aff; - --token-color-palette-blue-200: #2b89ff; - --token-color-palette-blue-100: #1c345f; - --token-color-palette-blue-50: #111f37; - --token-color-palette-purple-500: #dda5ff; - --token-color-palette-purple-400: #c070ff; - --token-color-palette-purple-300: #b457ff; - --token-color-palette-purple-200: #ab42ff; - --token-color-palette-purple-100: #42225b; - --token-color-palette-purple-50: #29123a; - --token-color-palette-green-500: #1ce375; - --token-color-palette-green-400: #00c157; - --token-color-palette-green-300: #00ae4e; - --token-color-palette-green-200: #009241; - --token-color-palette-green-100: #054220; - --token-color-palette-green-50: #042a15; - --token-color-palette-amber-500: #ffcc6a; - --token-color-palette-amber-400: #faad3a; - --token-color-palette-amber-300: #fda219; - --token-color-palette-amber-200: #e88c03; - --token-color-palette-amber-100: #542800; - --token-color-palette-amber-50: #2e1b06; - --token-color-palette-red-500: #ff8c7c; - --token-color-palette-red-400: #ff5841; - --token-color-palette-red-300: #f9381e; - --token-color-palette-red-200: #ef3016; - --token-color-palette-red-100: #62170d; - --token-color-palette-red-50: #370b06; - --token-color-palette-neutral-700: #efeff1; - --token-color-palette-neutral-600: #d5d7db; - --token-color-palette-neutral-500: #b2b6bd; - --token-color-palette-neutral-400: #616875; - --token-color-palette-neutral-300: #434956; - --token-color-palette-neutral-200: #2b303c; - --token-color-palette-neutral-100: #1e222a; - --token-color-palette-neutral-50: #15181e; - --token-color-palette-neutral-0: #0d0e12; - --token-color-palette-alpha-300: #b2b6bd66; - --token-color-palette-alpha-200: #b2b6bd33; - --token-color-palette-alpha-100: #b2b6bd1a; - - /* borders */ - --token-color-border-primary: var(--token-color-palette-alpha-200); - --token-color-border-faint: var(--token-color-palette-alpha-100); - --token-color-border-strong: var(--token-color-palette-alpha-300); - --token-color-border-action: var(--token-color-palette-blue-100); - --token-color-border-highlight: var(--token-color-palette-purple-100); - --token-color-border-success: var(--token-color-palette-green-100); - --token-color-border-warning: var(--token-color-palette-amber-100); - --token-color-border-critical: var(--token-color-palette-red-100); - - /* focus */ - --token-color-focus-action-internal: var(--token-color-palette-blue-300); - --token-color-focus-action-external: #5990ff; /* this is a special color used only for the focus style, to pass color contrast for a11y purpose */ - --token-color-focus-critical-internal: var(--token-color-palette-red-300); - --token-color-focus-critical-external: #dd7578; /* this is a special color used only for the focus style, to pass color contrast for a11y purpose */ - - /* foreground */ - --token-color-foreground-strong: var(--token-color-palette-neutral-700); - --token-color-foreground-primary: var(--token-color-palette-neutral-600); - --token-color-foreground-faint: var(--token-color-palette-neutral-500); - --token-color-foreground-high-contrast: var(--token-color-palette-neutral-0); - --token-color-foreground-disabled: var(--token-color-palette-neutral-400); - --token-color-foreground-action: var(--token-color-palette-blue-200); - --token-color-foreground-action-hover: var(--token-color-palette-blue-300); - --token-color-foreground-action-active: var(--token-color-palette-blue-400); - --token-color-foreground-highlight: var(--token-color-palette-purple-200); - --token-color-foreground-highlight-on-surface: var( - --token-color-palette-purple-300 - ); - --token-color-foreground-highlight-high-contrast: var( - --token-color-palette-purple-500 - ); - --token-color-foreground-success: var(--token-color-palette-green-200); - --token-color-foreground-success-on-surface: var( - --token-color-palette-green-300 - ); - --token-color-foreground-success-high-contrast: var( - --token-color-palette-green-500 - ); - --token-color-foreground-warning: var(--token-color-palette-amber-200); - --token-color-foreground-warning-on-surface: var( - --token-color-palette-amber-300 - ); - --token-color-foreground-warning-high-contrast: var( - --token-color-palette-amber-500 - ); - --token-color-foreground-critical: var(--token-color-palette-red-200); - --token-color-foreground-critical-on-surface: var( - --token-color-palette-red-300 - ); - --token-color-foreground-critical-high-contrast: var( - --token-color-palette-red-500 - ); - --token-color-foreground-action-visited: var( - --token-color-palette-purple-300 - ); - --token-color-foreground-action-visited-hover: var( - --token-color-palette-purple-400 - ); - - /* page */ - --token-color-page-primary: var(--token-color-palette-neutral-0); - --token-color-page-faint: var(--token-color-palette-neutral-50); - - /* surface */ - --token-color-surface-strong: var(--token-color-palette-neutral-100); - --token-color-surface-primary: var(--token-color-palette-neutral-0); - --token-color-surface-faint: var(--token-color-palette-neutral-50); - --token-color-surface-interactive: var(--token-color-palette-neutral-0); - --token-color-surface-interactive-hover: var( - --token-color-palette-neutral-100 - ); - --token-color-surface-interactive-active: var( - --token-color-palette-neutral-200 - ); - --token-color-surface-interactive-disabled: var( - --token-color-palette-neutral-50 - ); - --token-color-surface-action: var(--token-color-palette-blue-50); - --token-color-surface-highlight: var(--token-color-palette-purple-50); - --token-color-surface-success: var(--token-color-palette-green-50); - --token-color-surface-warning: var(--token-color-palette-amber-50); - --token-color-surface-critical: var(--token-color-palette-red-50); - - /* hashicorp */ - --token-color-hashicorp-brand: #fff; - - /* boundary */ - --token-color-boundary-brand: #f24c53; - --token-color-boundary-foreground: #f2474c; - --token-color-boundary-surface: #351114; - --token-color-boundary-border: #731316; - --token-color-boundary-gradient-primary-start: #ff9da1; - --token-color-boundary-gradient-primary-stop: #f2474c; - --token-color-boundary-gradient-faint-start: #351114; /* this is the 'boundary-50' value at 25% opacity on white */ - --token-color-boundary-gradient-faint-stop: #1f0e11; - - /* consul */ - --token-color-consul-brand: #e03875; - --token-color-consul-foreground: #ed3b7c; - --token-color-consul-surface: #350b1c; - --token-color-consul-border: #830833; - --token-color-consul-gradient-primary-start: #ff99be; - --token-color-consul-gradient-primary-stop: #ed3b7c; - --token-color-consul-gradient-faint-start: #350b1c; /* this is the 'consul-50' value at 25% opacity on white */ - --token-color-consul-gradient-faint-stop: #1e0c14; - - /* hcp */ - /* stylelint-disable-next-line color-hex-length */ - --token-color-hcp-brand: #fff; - - /* nomad */ - --token-color-nomad-brand: #06d092; - --token-color-nomad-foreground: #3ebf89; - --token-color-nomad-surface: #0a2720; - --token-color-nomad-border: #227d58; - --token-color-nomad-gradient-primary-start: #bff3dd; - --token-color-nomad-gradient-primary-stop: #3ebf89; - --token-color-nomad-gradient-faint-start: #0a2720; /* this is the 'nomad-50' value at 25% opacity on white */ - --token-color-nomad-gradient-faint-stop: #0b1816; - - /* packer */ - --token-color-packer-brand: #02a8ef; - --token-color-packer-foreground: #32b8f2; - --token-color-packer-surface: #0a2532; - --token-color-packer-border: #237fa7; - --token-color-packer-gradient-primary-start: #b4e4ff; - --token-color-packer-gradient-primary-stop: #32b8f2; - --token-color-packer-gradient-faint-start: #0a2532; /* this is the 'packer-50' value at 25% opacity on white */ - --token-color-packer-gradient-faint-stop: #0b171e; - - /* terraform */ - --token-color-terraform-brand: #7b42bc; - --token-color-terraform-foreground: #a067da; - --token-color-terraform-surface: #211131; - --token-color-terraform-border: #633690; - --token-color-terraform-gradient-primary-start: #d8b7fc; - --token-color-terraform-gradient-primary-stop: #a067da; - --token-color-terraform-gradient-faint-start: #211131; /* this is the 'terraform-50' value at 25% opacity on white */ - --token-color-terraform-gradient-faint-stop: #150f1e; - - /* vagrant */ - --token-color-vagrant-brand: #1868f2; - --token-color-vagrant-foreground: #3a80fa; - --token-color-vagrant-surface: #0b1c39; - --token-color-vagrant-border: #2354aa; - --token-color-vagrant-gradient-primary-start: #7dadff; - --token-color-vagrant-gradient-primary-stop: #3a80fa; - --token-color-vagrant-gradient-faint-start: #0b1c39; /* this is the 'vagrant-50' value at 25% opacity on white */ - --token-color-vagrant-gradient-faint-stop: #0c1322; - - /* vault */ - --token-color-vault-brand: #ffdd04; - --token-color-vault-brand-alt: #fff; /* this is a special "alternative" color, used as an exception in some contexts where the normal "brand" color for Vault would not work */ - --token-color-vault-foreground: #ffdd04; - --token-color-vault-surface: #1e2328; - --token-color-vault-border: #8f7d09; - --token-color-vault-gradient-primary-start: #feec7b; - --token-color-vault-gradient-primary-stop: #ffdd04; - --token-color-vault-gradient-faint-start: #1e2328; /* this is the 'vault-50' value at 25% opacity on white */ - --token-color-vault-gradient-faint-stop: #13161a; - - /* waypoint */ - --token-color-waypoint-brand: #14c6cb; - --token-color-waypoint-foreground: #4abfc7; - --token-color-waypoint-surface: #0a262c; - --token-color-waypoint-border: #1d7177; - --token-color-waypoint-gradient-primary-start: #cbf1f3; - --token-color-waypoint-gradient-primary-stop: #4abfc7; - --token-color-waypoint-gradient-faint-start: #0a262c; /* this is the 'waypoint-50' value at 25% opacity on white */ - --token-color-waypoint-gradient-faint-stop: #0b181c; - - /* elevation */ - --token-elevation-inset-box-shadow: inset 0 1px 2px 1px #6168751a; - --token-elevation-low-box-shadow: 0 1px 1px 0 #6168750d, 0 2px 2px 0 #6168750d; - --token-elevation-mid-box-shadow: 0 2px 3px 0 #6168751a, - 0 8px 16px -10px #6168751a; - --token-elevation-high-box-shadow: 0 2px 3px 0 #61687526, - 0 16px 16px -10px #61687533; - --token-elevation-higher-box-shadow: 0 2px 3px 0 #4349561a, - 0 12px 28px 0 #43495640; - --token-elevation-overlay-box-shadow: 0 2px 3px 0 #43495640, - 0 12px 24px 0 #43495659; - - /* surface */ - --token-surface-inset-box-shadow: inset 0 0 0 1px #b2b6bd4d, - inset 0 1px 2px 1px #6168751a; - --token-surface-base-box-shadow: 0 0 0 1px #b2b6bd33; - --token-surface-low-box-shadow: 0 0 0 1px #b2b6bd26, 0 1px 1px 0 #6168750d, - 0 2px 2px 0 #6168750d; - --token-surface-mid-box-shadow: 0 0 0 1px #b2b6bd26, 0 2px 3px 0 #6168751a, - 0 8px 16px -10px #61687533; - --token-surface-high-box-shadow: 0 0 0 1px #b2b6bd40, 0 2px 3px 0 #61687526, - 0 16px 16px -10px #61687533; - --token-surface-higher-box-shadow: 0 0 0 1px #b2b6bd33, 0 2px 3px 0 #4349561a, - 0 12px 28px 0 #43495640; - --token-surface-overlay-box-shadow: 0 0 0 1px #b2b6bd40, 0 2px 3px 0 #43495640, - 0 12px 24px 0 #43495659; - - /* Focus styles */ - --token-focus-ring-action-box-shadow: inset 0 0 0 1px - var(--token-color-palette-blue-300), - 0 0 0 3px #5990ff; - --token-focus-ring-critical-box-shadow: inset 0 0 0 1px - var(--token-color-palette-red-300), - 0 0 0 3px var(--token-color-palette-red-400); - - /* - * @TODO will update the form hex's to match the palette witih this ticket - * https://app.asana.com/0/1199634971449915/1204108584803973 - */ - - /* form specifics */ - --token-form-label-color: var(--token-color-palette-neutral-700); - --token-form-legend-color: var(--token-color-palette-neutral-700); - --token-form-helper-text-color: var(--token-color-palette-neutral-500); - --token-form-indicator-optional-color: var(--token-color-palette-neutral-500); - --token-form-error-color: var(--token-color-palette-red-300); - - /* form-control specifics */ - --token-form-control-base-foreground-value-color: var( - --token-color-palette-neutral-700 - ); - --token-form-control-base-foreground-placeholder-color: var( - --token-color-palette-neutral-500 - ); - --token-form-control-base-surface-color-default: var( - --token-color-palette-neutral-0 - ); - --token-form-control-base-surface-color-hover: var( - --token-color-palette-neutral-100 - ); - --token-form-control-base-border-color-default: var( - --token-color-palette-neutral-400 - ); - --token-form-control-base-border-color-hover: var( - --token-color-palette-neutral-500 - ); - --token-form-control-checked-foreground-color: var( - --token-color-palette-neutral-0 - ); - --token-form-control-checked-surface-color-default: var( - --token-color-palette-blue-200 - ); - --token-form-control-checked-surface-color-hover: var( - --token-color-palette-blue-300 - ); - --token-form-control-checked-border-color-default: var( - --token-color-palette-blue-300 - ); - --token-form-control-checked-border-color-hover: var( - --token-color-palette-blue-400 - ); - --token-form-control-invalid-border-color-default: var( - --token-color-palette-red-300 - ); - --token-form-control-invalid-border-color-hover: var( - --token-color-palette-red-400 - ); - --token-form-control-readonly-foreground-color: var( - --token-color-palette-neutral-600 - ); - --token-form-control-readonly-surface-color: var( - --token-color-palette-neutral-100 - ); - --token-form-control-readonly-border-color: #656a761a; - --token-form-control-disabled-foreground-color: var( - --token-color-palette-neutral-400 - ); - --token-form-control-disabled-surface-color: var( - --token-color-palette-neutral-50 - ); - --token-form-control-disabled-border-color: #656a7633; - --token-form-toggle-base-surface-color-default: var( - --token-color-palette-neutral-100 - ); /* the toggle has a different base surface color, compared to the other controls */ -} diff --git a/src/views/product-downloads-view/components/downloads-section/helpers.ts b/src/views/product-downloads-view/components/downloads-section/helpers.ts index 8bfe263b04..422f178384 100644 --- a/src/views/product-downloads-view/components/downloads-section/helpers.ts +++ b/src/views/product-downloads-view/components/downloads-section/helpers.ts @@ -11,7 +11,7 @@ import { export const generateCodeSnippetFromCommands = ( commands: PackageManager['commands'] ): string => { - return commands.map((command: string) => `$ ${command}`).join('\n') + return commands.join('\n') } export const groupPackageManagersByOS = ( diff --git a/src/views/product-downloads-view/components/downloads-section/index.tsx b/src/views/product-downloads-view/components/downloads-section/index.tsx index 0c3f6b12e6..51e155af19 100644 --- a/src/views/product-downloads-view/components/downloads-section/index.tsx +++ b/src/views/product-downloads-view/components/downloads-section/index.tsx @@ -7,7 +7,7 @@ import { ReactElement, useMemo } from 'react' // HashiCorp imports -import CodeBlock from '@hashicorp/react-code-block' +import CodeBlock from '@hashicorp/react-design-system-components/src/components/code-block' import { IconInfo16 } from '@hashicorp/flight-icons/svg-react/info-16' // Global imports @@ -58,9 +58,10 @@ const PackageManagerSection = ({ {hasOnePackageManager && ( )} {hasManyPackageManagers && ( @@ -70,9 +71,10 @@ const PackageManagerSection = ({ return ( ) diff --git a/src/views/product-downloads-view/server-helpers.ts b/src/views/product-downloads-view/server-helpers.ts index d65fa8759c..6b20625ca2 100644 --- a/src/views/product-downloads-view/server-helpers.ts +++ b/src/views/product-downloads-view/server-helpers.ts @@ -41,7 +41,7 @@ export const generatePackageManagers = async ({ const { commands } = packageManager const installCodeHtml = await highlightString( generateCodeSnippetFromCommands(commands), - 'shell-session' + 'bash' ) return { ...packageManager, installCodeHtml } }) diff --git a/tsconfig.json b/tsconfig.json index 6d1caca1c3..85d373ce31 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,7 +1,7 @@ { "compilerOptions": { "strict": false, - "target": "es5", + "target": "es2015", "incremental": true, "module": "esnext", "lib": ["dom", "dom.iterable", "esnext"],