diff --git a/packages/utilities/psammead-storybook-helpers/CHANGELOG.md b/packages/utilities/psammead-storybook-helpers/CHANGELOG.md index 3015de9db7..435b83442a 100644 --- a/packages/utilities/psammead-storybook-helpers/CHANGELOG.md +++ b/packages/utilities/psammead-storybook-helpers/CHANGELOG.md @@ -3,6 +3,7 @@ | Version | Description | |---------|-------------| +| 8.3.2 | [PR#3586](https://github.com/bbc/psammead/pull/3586) Add Storybook themes | | 8.3.1 | [PR#3388](https://github.com/bbc/psammead/pull/3388) Update react-helmet to 6.0.0 | | 8.3.0 | [PR#3376](https://github.com/bbc/psammead/pull/3376) Adding timezone to withServicesKnob helper | | 8.2.7 | [PR#3270](https://github.com/bbc/psammead/pull/3270) Security fixes | diff --git a/packages/utilities/psammead-storybook-helpers/README.md b/packages/utilities/psammead-storybook-helpers/README.md index 52b30c004a..eae16d912e 100644 --- a/packages/utilities/psammead-storybook-helpers/README.md +++ b/packages/utilities/psammead-storybook-helpers/README.md @@ -6,6 +6,8 @@ This package provides a collection of common values that are used in storybook b `TEXT_VARIANTS` - A list of text samples in different languages, with the script and direction that should be used for that language. +`themes` - An object containing the Storybook themes we use. + `withServicesKnob` - Is a function that returns a storybook decorator function that adds a `Select a service` dropdown to the knobs panel. When a service is selected from the dropdown it does 2 things: 1. Provides the decorated stories with the following properties that can be passed into components: diff --git a/packages/utilities/psammead-storybook-helpers/package-lock.json b/packages/utilities/psammead-storybook-helpers/package-lock.json index 587f5c0d8f..0851a22ffa 100644 --- a/packages/utilities/psammead-storybook-helpers/package-lock.json +++ b/packages/utilities/psammead-storybook-helpers/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-storybook-helpers", - "version": "8.3.1", + "version": "8.3.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/utilities/psammead-storybook-helpers/package.json b/packages/utilities/psammead-storybook-helpers/package.json index 3ad5ec8f34..f729913b8c 100644 --- a/packages/utilities/psammead-storybook-helpers/package.json +++ b/packages/utilities/psammead-storybook-helpers/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-storybook-helpers", - "version": "8.3.1", + "version": "8.3.2", "main": "dist/index.js", "module": "esm/index.js", "sideEffects": false, diff --git a/packages/utilities/psammead-storybook-helpers/src/index.js b/packages/utilities/psammead-storybook-helpers/src/index.js index 7850867271..463d40b2e9 100644 --- a/packages/utilities/psammead-storybook-helpers/src/index.js +++ b/packages/utilities/psammead-storybook-helpers/src/index.js @@ -1,5 +1,6 @@ import withServicesKnob from './withServicesKnob'; import { buildRTLSubstories } from './buildRTLSubstories'; import TEXT_VARIANTS from './text-variants'; +import themes from './themes'; -export { TEXT_VARIANTS, withServicesKnob, buildRTLSubstories }; +export { TEXT_VARIANTS, withServicesKnob, buildRTLSubstories, themes }; diff --git a/packages/utilities/psammead-storybook-helpers/src/themes.js b/packages/utilities/psammead-storybook-helpers/src/themes.js new file mode 100644 index 0000000000..90fe0d8416 --- /dev/null +++ b/packages/utilities/psammead-storybook-helpers/src/themes.js @@ -0,0 +1,15 @@ +import { create } from '@storybook/theming'; + +const createTheme = props => + create({ + brandTitle: 'BBC Psammead', + brandUrl: 'https://github.com/bbc/psammead', + brandImage: + 'https://user-images.githubusercontent.com/11341355/54079666-af202780-42d8-11e9-9108-e47ea27fddc5.png', + ...props, + }); + +export default { + light: createTheme({ base: 'light' }), + dark: createTheme({ base: 'dark' }), +};