Merge ee08aff into 13a6f0d

hashicorp · Oct 6, 2022 · 74ed56e · 74ed56e
2 parents 13a6f0d + ee08aff
commit 74ed56e
Show file tree

Hide file tree

Showing 8 changed files with 419 additions and 3 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/product-badge/docs.mdx b/packages/product-badge/docs.mdx
@@ -0,0 +1,191 @@
+---
+componentName: 'ProductBadge'
+---
+
+<LiveComponent>
+  {`
+    <section>
+      <div style={{display: 'flex', flexWrap: 'wrap', backgroundColor: 'black', padding: '16px'}}>
+        <ProductBadge
+          productName={'waypoint'}
+          appearance={'dark'}
+          hasDot={true}
+          theme={'secondary'}
+        />
+      </div>
+      <div style={{display: 'flex', flexWrap: 'wrap', backgroundColor: 'white', padding: '16px'}}>
+        <ProductBadge
+          productName={'waypoint'}
+          appearance={'light'}
+          hasDot={true}
+          theme={'secondary'}
+        />
+      </div>
+    </section>
+
+  `}
+</LiveComponent>
+
+### Props
+
+<PropsTable props={componentProps} />
+
+### Examples
+
+<section>
+  {/* Dark */}
+  <div style={{backgroundColor: 'black', padding: '32px'}}>
+    <h2 style={{ color: 'white', marginTop: '0' }}>Dark</h2>
+    <div>
+      <h3 style={{ color: 'white', margin: '0' }}>Primary</h3>
+      <div style={{display: 'flex', flexWrap: 'wrap', gap: 16, padding: '16px 0 32px 0'}}>
+        {[
+          'terraform',
+          'vault',
+          'consul',
+          'nomad',
+          'waypoint',
+          'boundary',
+          'packer',
+          'vagrant',
+        ].map((product, i) => {
+          return (
+            <ProductBadge
+              key={i}
+              productName={product}
+              appearance={'dark'}
+              theme={'primary'}
+            />
+          )
+        })}
+      </div>
+    </div>
+    <div>
+      <h3 style={{ color: 'white', margin: '0' }}>Secondary</h3>
+      <div style={{display: 'flex', flexWrap: 'wrap', gap: 16, padding: '16px 0 32px 0'}}>
+        {[
+          'terraform',
+          'vault',
+          'consul',
+          'nomad',
+          'waypoint',
+          'boundary',
+          'packer',
+          'vagrant',
+        ].map((product, i) => {
+          return (
+            <ProductBadge
+              key={i}
+              productName={product}
+              appearance={'dark'}
+              theme={'secondary'}
+            />
+          )
+        })}
+      </div>
+    </div>
+    <div>
+      <h3 style={{ color: 'white', margin: '0' }}>hasDot</h3>
+      <div style={{display: 'flex', flexWrap: 'wrap', gap: 16, padding: '16px 0 32px 0'}}>
+        {[
+          'terraform',
+          'vault',
+          'consul',
+          'nomad',
+          'waypoint',
+          'boundary',
+          'packer',
+          'vagrant',
+        ].map((product, i) => {
+          return (
+            <ProductBadge
+              key={i}
+              productName={product}
+              appearance={'dark'}
+              theme={'secondary'}
+              hasDot={true}
+            />
+          )
+        })}
+      </div>
+    </div>
+  </div>
+
+  {/* Light */}
+  <div style={{backgroundColor: 'white', padding: '32px'}}>
+    <h2 style={{ color: 'black', marginTop: '0' }}>Light</h2>
+    <div>
+      <h3 style={{ color: 'black', margin: '0' }}>Primary</h3>
+      <div style={{display: 'flex', flexWrap: 'wrap', gap: 16, padding: '16px 0 32px 0'}}>
+        {[
+          'terraform',
+          'vault',
+          'consul',
+          'nomad',
+          'waypoint',
+          'boundary',
+          'packer',
+          'vagrant',
+        ].map((product, i) => {
+          return (
+            <ProductBadge
+              key={i}
+              productName={product}
+              appearance={'light'}
+              theme={'primary'}
+            />
+          )
+        })}
+      </div>
+    </div>
+    <div>
+      <h3 style={{ color: 'black', margin: '0' }}>Secondary</h3>
+      <div style={{display: 'flex', flexWrap: 'wrap', gap: 16, padding: '16px 0 32px 0'}}>
+        {[
+          'terraform',
+          'vault',
+          'consul',
+          'nomad',
+          'waypoint',
+          'boundary',
+          'packer',
+          'vagrant',
+        ].map((product, i) => {
+          return (
+            <ProductBadge
+              key={i}
+              productName={product}
+              appearance={'light'}
+              theme={'secondary'}
+            />
+          )
+        })}
+      </div>
+    </div>
+    <div>
+      <h3 style={{ color: 'black', margin: '0' }}>hasDot</h3>
+      <div style={{display: 'flex', flexWrap: 'wrap', gap: 16, padding: '16px 0 32px 0'}}>
+        {[
+          'terraform',
+          'vault',
+          'consul',
+          'nomad',
+          'waypoint',
+          'boundary',
+          'packer',
+          'vagrant',
+        ].map((product, i) => {
+          return (
+            <ProductBadge
+              key={i}
+              productName={product}
+              appearance={'light'}
+              theme={'secondary'}
+              hasDot={true}
+            />
+          )
+        })}
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/packages/product-badge/index.test.js b/packages/product-badge/index.test.js
@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react'
+import ProductBadge from '.'
+
+describe('<ProductBadge />', () => {
+  it('should render the name of the product', () => {
+    const productName = 'waypoint'
+    render(<ProductBadge productName={productName} />)
+    const productBadgeEl = screen.getByText(productName)
+    expect(productBadgeEl).toBeInTheDocument()
+  })
+
+  it('should render the default theme', () => {
+    const productName = 'Consul'
+    render(<ProductBadge productName={productName} />)
+    const productBadgeEl = screen.getByText(productName)
+    expect(productBadgeEl).toHaveClass('light', 'primary')
+    expect(productBadgeEl).not.toHaveClass('secondary', 'dark')
+  })
+
+  it('should render the correct theme', () => {
+    const productName = 'Packer'
+    render(
+      <ProductBadge
+        productName={productName}
+        appearance={'dark'}
+        theme={'secondary'}
+        hasDot={true}
+      />
+    )
+    const productBadgeEl = screen.getByText(productName)
+    expect(productBadgeEl).toHaveClass('text', 'dark', 'secondary', 'hasDot')
+    expect(productBadgeEl).not.toHaveClass('primary', 'light')
+  })
+})
diff --git a/packages/product-badge/index.tsx b/packages/product-badge/index.tsx
@@ -0,0 +1,37 @@
+import type { ProductBadgeProps } from './types'
+import useProductMeta from '@hashicorp/platform-product-meta'
+import classNames from 'classnames'
+import s from './style.module.css'
+
+const ProductBadge = ({
+  appearance = 'light',
+  productName,
+  theme = 'primary',
+  hasDot,
+}: ProductBadgeProps) => {
+  const { themeClass } = useProductMeta(productName)
+  return (
+    <div
+      className={classNames([
+        s.root,
+        s[appearance],
+        s[theme],
+        themeClass,
+        { [s.hasDot]: hasDot },
+      ])}
+    >
+      <p
+        className={classNames([
+          s.text,
+          s[appearance],
+          s[theme],
+          { [s.hasDot]: hasDot },
+        ])}
+      >
+        {productName}
+      </p>
+    </div>
+  )
+}
+
+export default ProductBadge
diff --git a/packages/product-badge/package.json b/packages/product-badge/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@hashicorp/react-product-badge",
+  "version": "0.1.1",
+  "description": "",
+  "author": "HashiCorp",
+  "license": "MPL-2.0",
+  "dependencies": {
+    "classnames": "^2.3.1"
+  },
+  "peerDependencies": {
+    "@hashicorp/mktg-global-styles": "^4.2.0",
+    "@hashicorp/platform-product-meta": "^0.1.0",
+    "react": ">=16.x"
+  }
+}
diff --git a/packages/product-badge/props.js b/packages/product-badge/props.js
@@ -0,0 +1,34 @@
+module.exports = {
+  appearance: {
+    type: 'string',
+    description: 'Display `<ProductBadge />` on light or dark background.',
+    options: ['light', 'dark'],
+  },
+  productName: {
+    description:
+      'A lower-case product identifier to pull in respective theme colors.',
+    type: 'string',
+    control: { type: 'select' },
+    options: [
+      'hashicorp',
+      'boundary',
+      'consul',
+      'nomad',
+      'packer',
+      'terraform',
+      'vault',
+      'vagrant',
+      'waypoint',
+    ],
+    required: true,
+  },
+  theme: {
+    type: 'string',
+    description: 'Applies styling to the component.',
+    options: ['primary', 'secondary'],
+  },
+  hasDot: {
+    type: 'boolean',
+    description: 'Applies a dot. Forces the `secondary` theme.',
+  },
+}