From d8a2c10b91600ed35c2be2601a547a65164e8aaf Mon Sep 17 00:00:00 2001 From: Leah Bush <157434496+LeahMarieBush@users.noreply.github.com> Date: Wed, 13 Nov 2024 14:07:45 -0600 Subject: [PATCH] feat: update enterprise alert (#2621) * feat: update enterprise alert * capitalize radar * PR feedback * PR feedback * revert accidental changes --- src/components/product-icon/index.tsx | 12 ++++++ src/components/product-icon/types.ts | 2 +- .../components/enterprise-alert/index.tsx | 38 +++++++++++++------ 3 files changed, 40 insertions(+), 12 deletions(-) diff --git a/src/components/product-icon/index.tsx b/src/components/product-icon/index.tsx index a3ad9b177f..acae25d3ca 100644 --- a/src/components/product-icon/index.tsx +++ b/src/components/product-icon/index.tsx @@ -19,6 +19,10 @@ import { IconVagrantColor16 } from '@hashicorp/flight-icons/svg-react/vagrant-co import { IconVagrantColor24 } from '@hashicorp/flight-icons/svg-react/vagrant-color-24' import { IconVault16 } from '@hashicorp/flight-icons/svg-react/vault-16' import { IconVault24 } from '@hashicorp/flight-icons/svg-react/vault-24' +import { IconVaultRadarSquareColor16 } from '@hashicorp/flight-icons/svg-react/vault-radar-square-color-16' +import { IconVaultRadarSquareColor24 } from '@hashicorp/flight-icons/svg-react/vault-radar-square-color-24' +import { IconVaultSecretsSquareColor16 } from '@hashicorp/flight-icons/svg-react/vault-secrets-square-color-16' +import { IconVaultSecretsSquareColor24 } from '@hashicorp/flight-icons/svg-react/vault-secrets-square-color-24' import { IconWaypoint16 } from '@hashicorp/flight-icons/svg-react/waypoint-16' import { IconWaypoint24 } from '@hashicorp/flight-icons/svg-react/waypoint-24' import { ProductIconProps } from './types' @@ -56,6 +60,14 @@ const productSlugsToIcons = { 16: IconVault16, 24: IconVault24, }, + 'hcp-vault-radar': { + 16: IconVaultRadarSquareColor16, + 24: IconVaultRadarSquareColor24, + }, + 'hcp-vault-secrets': { + 16: IconVaultSecretsSquareColor16, + 24: IconVaultSecretsSquareColor24, + }, waypoint: { 16: IconWaypoint16, 24: IconWaypoint24, diff --git a/src/components/product-icon/types.ts b/src/components/product-icon/types.ts index faaabd0f94..2a98c4d17c 100644 --- a/src/components/product-icon/types.ts +++ b/src/components/product-icon/types.ts @@ -8,6 +8,6 @@ import { ProductSlug } from 'types/products' type SvgElementProps = JSX.IntrinsicElements['svg'] export interface ProductIconProps extends SvgElementProps { - productSlug: ProductSlug + productSlug: ProductSlug | 'hcp-vault-secrets' | 'hcp-vault-radar' size?: 16 | 24 } diff --git a/src/layouts/sidebar-sidecar/utils/_local_platform-docs-mdx/components/enterprise-alert/index.tsx b/src/layouts/sidebar-sidecar/utils/_local_platform-docs-mdx/components/enterprise-alert/index.tsx index e8a077d64c..c0f0c1dc2c 100644 --- a/src/layouts/sidebar-sidecar/utils/_local_platform-docs-mdx/components/enterprise-alert/index.tsx +++ b/src/layouts/sidebar-sidecar/utils/_local_platform-docs-mdx/components/enterprise-alert/index.tsx @@ -16,34 +16,50 @@ import { isProductSlug, productSlugsToNames } from 'lib/products' import s from './enterprise-alert.module.css' interface EnterpriseAlertProps { - productSlug: ProductSlug + product: ProductSlug | 'hcp-vault-secrets' | 'hcp-vault-radar' inline?: boolean className?: string children?: ReactNode + badgeText?: string +} + +const productNames = { + ...productSlugsToNames, + 'hcp-vault-secrets': 'HCP Vault Secrets', + 'hcp-vault-radar': 'HCP Vault Radar', } export function EnterpriseAlert({ - productSlug, + product, inline, className, children, + badgeText, }: EnterpriseAlertProps) { // This ensures we aren't producing invalid HTML when rendering inline alerts within MDX. When used inline, we might end up nesting a div inside of a p. This is invalid as p cannot contain block-level elements (ref: https://www.w3.org/TR/html401/struct/text.html#h-9.3.1). const Element = inline ? 'span' : 'div' - const isValidProduct = isProductSlug(productSlug) + const isVaultSecretsOrRadar = + product === 'hcp-vault-radar' || product === 'hcp-vault-secrets' + const isValidProduct = isProductSlug(product) || isVaultSecretsOrRadar - if (productSlug === 'hcp') { + if (product === 'hcp') { return null } if (!isValidProduct) { throw new Error( `[EnterpriseAlert]: Invalid product option passed. Expected one of ${Object.keys( - productSlugsToNames + productNames ).filter((slug) => slug !== 'hcp')}` ) } + const href = isVaultSecretsOrRadar + ? `https://www.hashicorp.com/products/vault/${product}` + : `https://www.hashicorp.com/products/${product}` + + const plusOrEnterprise = isVaultSecretsOrRadar ? 'Plus' : 'Enterprise' + return ( } - text="Enterprise" + icon={} + text={badgeText ?? plusOrEnterprise} type="outlined" size="medium" /> @@ -65,12 +81,12 @@ export function EnterpriseAlert({ <> This feature requires{' '} - {productSlugsToNames[productSlug]} Enterprise + {productNames[product]} {plusOrEnterprise} . @@ -82,14 +98,14 @@ export function EnterpriseAlert({ } type DocsEnterpriseAlertProps = Omit & { - product?: ProductSlug + product?: ProductSlug | 'hcp-vault-secrets' | 'hcp-vault-radar' } export function DocsEnterpriseAlert(props: DocsEnterpriseAlertProps) { const currentProduct = useCurrentProduct() return ( )