diff --git a/README.md b/README.md index 42b7625..f959167 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,42 @@ # Storybook Addon Render Modes +This addon adds ability to emulate user CSS rendering preferences such as `prefers-reduced-motion` and others. + + +image + +> Initially fork of [storybook-addon-css-user-prefs](https://github.com/jonathantneal/storybook-addon-css-user-prefs) to support sb@^8.0.0 + +List of supported modes: +- prefers-color-scheme +- prefers-contrast +- prefers-reduced-data +- prefers-reduced-motion +- prefers-reduced-transparency +- ~~print~~ (todo) +- ~~noscript~~ (todo) + + ## Installation 1. Package installation -`pnpm add -D TODO` +`pnpm add -D storybook-addon-render-modes` 2. Addon registration -TODO +```ts +const config: StorybookConfig = { + // ...yourOtherSettings + addons: [ + 'storybook-addon-render-modes', + ], +}; + +export default config; +``` -## Features +## Caveats -Rendering modes support: +This addon doesnt force changing of rendering mode in browser level (seems impossible). +But instead it uses hacky approach: we go through `document.styleSheets` via JS and manually rewriting media style rules. -- [ ] prefers-reduced-motion -- [ ] print +This approach may work not as expected in some cases. Feel fre to create an issue for such cases. \ No newline at end of file diff --git a/package.json b/package.json index 5dcbffc..8040217 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,31 @@ { "name": "storybook-addon-render-modes", - "version": "0.0.8", - "description": "Storybook addon that adds ability to change render mode of a story", + "version": "0.0.9", + "description": "Storybook addon that adds ability to emulate render mode (css user preferences) of a story", "keywords": [ "storybook-addons", "storybook-addon-render-modes", "render-modes", - "prefers-reduced-motion" + "prefers-reduced-motion", + "storybook-addons", + "conditions", + "css", + "emulate", + "emulates", + "emulation", + "media", + "query", + "queries", + "preferences", + "prefers-color-scheme", + "prefers-contrast", + "prefers-reduced-data", + "prefers-reduced-motion", + "prefers-reduced-transparency", + "prefs", + "toolbar", + "user", + "storybook-addons" ], "repository": { "type": "git", @@ -14,7 +33,7 @@ }, "type": "module", "license": "MIT", - "author": "Maxim Nikonov", + "author": "Maxim Nikonov ", "exports": { ".": { "types": "./dist/index.d.ts", @@ -115,7 +134,13 @@ "storybook": { "displayName": "Render Modes", "supportedFrameworks": [ - "react" + "react", + "react", + "vue", + "angular", + "html", + "svelte", + "preact" ], "icon": "https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png" }