Add language variants knob to Headline and SubHeading

packages/components/psammead-headings/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 0.4.3   | [PR#418](https://github.com/bbc/psammead/pull/418) Add language variants knob to Headings |
 | 0.4.2   | [PR#407](https://github.com/bbc/psammead/pull/407) Organise dependencies properly |
 | 0.4.1   | [PR#381](https://github.com/bbc/psammead/pull/381) Make SubHeading padding-top 32px when viewport 400px and above |
 | 0.4.0   | [PR#381](https://github.com/bbc/psammead/pull/381) Make headline 40px for 600px and above |

packages/components/psammead-headings/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-headings",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "main": "dist/index.js",
   "description": "React styled components for a Headline and SubHeading",
   "repository": {
@@ -21,6 +21,7 @@
     "@bbc/psammead-styles": "^0.3.2"
   },
   "devDependencies": {
+    "@bbc/psammead-storybook-helpers": "^1.0.0",
     "@bbc/psammead-test-helpers": "^0.3.3",
     "styled-components": "^4.1.3"
   },

packages/components/psammead-headings/src/index.stories.jsx

@@ -1,18 +1,24 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import { inputProvider } from '@bbc/psammead-storybook-helpers';
 import notes from '../README.md';
 import { Headline, SubHeading } from './index';
 
-storiesOf('Headline', module).add(
-  'default',
-  () => <Headline>This is my headline.</Headline>,
-  { notes },
-);
+storiesOf('Headline', module)
+  .addDecorator(withKnobs)
+  .add(
+    'default',
+    inputProvider(['headline'], headline => <Headline>{headline}</Headline>),
+    { notes, knobs: { escapeHTML: false } },
+  );
 
-storiesOf('SubHeading', module).add(
-  'default',
-  () => (
-    <SubHeading text="This is a SubHeading">This is a SubHeading</SubHeading>
-  ),
-  { notes },
-);
+storiesOf('SubHeading', module)
+  .addDecorator(withKnobs)
+  .add(
+    'default',
+    inputProvider(['subheading'], subheader => (
+      <SubHeading text={subheader}>{subheader}</SubHeading>
+    )),
+    { notes, knobs: { escapeHTML: false } },
+  );