Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
424 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
'@hashicorp/react-product-badge': minor | ||
--- | ||
|
||
Create ProductBadge component |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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') | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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.', | ||
}, | ||
} |
Oops, something went wrong.