![Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack](https://cdn.sanity.io/images/cgdhsj6q/production/6af25114feaaac7179b18127c83327568ff592d1-1024x1024.webp?w=800&fit=max&auto=format)
Security News
Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
@geometricpanda/storybook-addon-badges
Advanced tools
Readme
Using @geometricpanda/storybook-addon-badges
you're able to add badges to
your Storybook app.
NPM:
npm install @geometricpanda/storybook-addon-badges --save
Yarn:
yarn add @geometricpanda/storybook-addon-badges
In your .storybook/main.js
you'll need to load @geometricpanda/storybook-addon-badges
into Storybook:
// .storybook/main.js
module.exports = {
stories: [],
addons: ['@geometricpanda/storybook-addon-badges'],
};
Optionally, you can define custom badge styles in .storybook/preview.js
.
// .storybook/preview.js
import { addParameters } from '@storybook/react';
addParameters({
badgesConfig: {
beta: {
styles: {
backgroundColor: '#FFF',
borderColor: '#018786',
color: '#018786',
},
title: 'Beta',
},
deprecated: {
styles: {
backgroundColor: '#FFF',
borderColor: '#6200EE',
color: '#6200EE',
},
title: 'Deprecated',
},
},
});
Optionally, you can define more complex tooltips for any of your badges.
addParameters({
badgesConfig: {
beta: {
...betaConfig,
tooltip: {
title: 'This is Beta',
desc: 'Be ready to receive updates frequently and leave a feedback',
links: [
{ title: 'Read more', href: 'http://path/to/your/docs' },
{
title: 'Leave feedback',
onClick: () => {
alert('thanks for the feedback');
},
},
],
},
},
deprecated: {
...deprecatedConfig,
tooltip: 'This component is deprecated, please avoid using it.',
},
},
});
The key for each badge will be what's used throughout storybook to invoke that badge.
I tend to define each key as an enum
when using TypeScript, or even an Object
in plain JavaScript
to avoid using magic strings.
Don't worry if you haven't defined a badge which you use later, any badges which aren't recognised fall back to the default preconfigured grey.
Tip: If you prefer, instead of using the addParameters
function, you can also
export const parameters
containing a full parameters object.
// .storybook/constants.js
export enum BADGES {
STATUS = 'status',
}
// .storybook/preview.js
import { addParameters } from '@storybook/react';
addParameters({
badgesConfig: {
[BADGES.STATUS]: {
styles: {
backgroundColor: '#FFF',
borderColor: '#018786',
color: '#018786',
},
title: 'Status',
},
},
});
You can import a collection of preconfigured badges using the following import:
import { BADGE } from '@geometricpanda/storybook-addon-badges';
You can then use these badges by passing in the following enum values:
BADGE.DEFAULT
BADGE.BETA
BADGE.STABLE
BADGE.DEPRECATED
BADGE.EXPERIMENTAL
BADGE.NEEDS_REVISION
BADGE.OBSOLETE
Should you wish to override these styles you can do by configuring a badge with the same key:
// .storybook/preview.js
import { addParameters } from '@storybook/react';
addParameters({
badgesConfig: {
[BADGES.STATUS]: {
styles: {
backgroundColor: '#FFF',
borderColor: '#018786',
color: '#018786',
},
title: 'Status',
},
},
});
Valid options for the styles
configuration are:
backgroundColor
borderColor
borderRadius
borderStyle
borderWidth
color
fontSize
fontFamily
fontWeight
lineHeight
textTransform
paddingInline
paddingBlock
The previous color
and contrast
properties have been deprecated and have now been removed.
Please migrate to the styles
property.
The following will apply the badges to all components within your Story:
import { BADGE } from '@geometricpanda/storybook-addon-badges';
export default {
title: 'Path/To/MyComponent',
parameters: {
badges: [BADGE.DEPRECATED, BADGE.OBSOLETE],
},
};
const Template = () => <h1>Hello World</h1>;
export const FirstComponent = Template.bind({});
export const SecondComponent = Template.bind({});
export const ThirdComponent = Template.bind({});
You can also selectively add badges to each Story:
import { BADGE } from '@geometricpanda/storybook-addon-badges';
export default {
title: 'Path/To/MyComponent',
};
const Template = () => <h1>Hello World</h1>;
export const FirstComponent = Template.bind({});
FirstComponent.parameters = {
badges: [BADGE.DEPRECATED],
};
export const SecondComponent = Template.bind({});
SecondComponent.parameters = {
badges: [BADGE.STABLE],
};
export const ThirdComponent = Template.bind({});
ThirdComponent.parameters = {
badges: [BADGE.OBSOLETE],
};
When applying Badges to all Stories you can selectively remove them too:
import { BADGE } from '@geometricpanda/storybook-addon-badges';
export default {
title: 'Path/To/MyComponent',
parameters: {
badges: [BADGE.BETA],
},
};
const Template = () => <h1>Hello World</h1>;
export const FirstComponent = Template.bind({});
export const SecondComponent = Template.bind({});
export const ThirdComponent = Template.bind({});
ThirdComponent.parameters = {
badges: [],
};
In your mdx
documentation you can add badges to your stories
using the <Meta>
component.
import { Meta } from '@storybook/addon-docs/blocks';
import { BADGE } from '@geometricpanda/storybook-addon-badges';
<Meta title="Path/To/MyComponent" parameters={{ badges: [BADGE.BETA] }} />;
FAQs
A Storybook addon which allows you to add badges to your stories
The npm package @geometricpanda/storybook-addon-badges receives a total of 48,185 weekly downloads. As such, @geometricpanda/storybook-addon-badges popularity was classified as popular.
We found that @geometricpanda/storybook-addon-badges demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.