Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
storybook-addon-root-attribute
Advanced tools
Readme
Storybook Addon Root Attribute to switch html, body or some element attribute at runtime for your story Storybook
yarn add -D storybook-addon-root-attribute
Then create a file called addons.js
in your storybook config and add following content to it:
import "storybook-addon-root-attribute/register";
or create a file called main.js
and add addon in addons
section:
module.exports = {
...
addons: [
...
'storybook-addon-root-attribute/register'
]
};
You need add the all the attribute values at compile time using the withRootAttribute
decorator. They can be added globally or per story. You can then choose which ones root attribute activate on addon ui:
// Import from @storybook/X where X is your framework
import {
configure,
addDecorator,
addParameters,
storiesOf
} from "@storybook/react";
import { withRootAttribute } from "storybook-addon-root-attribute";
// global
addDecorator(withRootAttribute);
addParameters({
rootAttribute: {
defaultState: {
name: "Default",
value: null
},
states: [
{
name: "Dark",
value: "dark"
}
]
}
});
You can use the rootAttribute
parameter to override resources on each story individually:
// per story
storiesOf("Addons|RootAttribute", module).add(
"Camera Icon",
() => <i className="fa fa-camera-retro"> Camera Icon</i>,
{
rootAttribute: {
defaultState: {
name: "Default",
value: null
},
states: [
{
name: "Dark",
value: "dark"
}
]
}
}
);
If you want to use a tooltip (panel will not dissapear), you need to set tooltip
in parameters with true
value:
addParameters({
rootAttribute: {
tooltip: true,
defaultState: {
name: "Default",
value: null
},
states: [
{
name: "Dark",
value: "dark"
}
]
}
});
Tooltip and panel will not sync about change attribute.
Configuration params for rootAttribute
parameter:
Name | Default | Variants | Description |
---|---|---|---|
root | 'html' | 'html', 'body', or first element returned by 'document.querySelector(), or if none found -- 'html'' | Root node, which attribute will changed by addon |
attribute | 'class' | any valid attribute name | Attribute name |
defaultState | {} | should contain name and value | Default state for attribute. Value nil will remove attribute from root |
states | [] | array with objects, which contain unique name and value for attribute | All needed states for attribute values. Each object should contain unique name (for button) and value for attribute |
tooltip | false | boolean value | Add tooltip button for storybook |
Configuration example:
addDecorator(withRootAttribute);
addParameters({
rootAttribute: {
root: "html",
attribute: "class",
defaultState: {
name: "Default",
value: null
},
states: [
{
name: "Dark",
value: "dark"
},
{
name: "A11Y",
value: "accessibility"
}
]
}
});
FAQs
Storybook Addon Root Attribute to switch html or body attribute at runtime for your story
The npm package storybook-addon-root-attribute receives a total of 5,685 weekly downloads. As such, storybook-addon-root-attribute popularity was classified as popular.
We found that storybook-addon-root-attribute demonstrated a not healthy version release cadence and project activity because the last version was released 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.