Add Themes to Storybook Helpers

packages/utilities/psammead-storybook-helpers/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | 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 |

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:

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,

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 };

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' }),
+};