@bbc/psammead-styles - npm Package Compare versions

Comparing version 2.1.2 to 2.1.3

CHANGELOG.md

@@ -6,2 +6,3 @@ # @bbc/psammead-styles Changelog
 |---------|-------------|
+| 2.1.3 | [PR#1948](https://github.com/bbc/psammead/pull/1948) Show different font types in storybook |
 | 2.1.2 | [PR#1847](https://github.com/bbc/psammead/pull/1847) Fixed Telugu typos |
@@ -8,0 +9,0 @@ | 2.1.1 | [PR#1803](https://github.com/bbc/psammead/pull/1803/) Patches broken links on badges in documentation |

package.json

 {
   "name": "@bbc/psammead-styles",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "A collection of string constants for use in CSS, containing non-GEL styling details that are bespoke to specific BBC services and products.",
@@ -5,0 +5,0 @@ "repository": {

src/index.stories.jsx

@@ -6,9 +6,12 @@ import React from 'react';
 import {
+  GEL_FF_REITH_SANS,
   getBodyCopy,
-  GEL_FF_REITH_SANS,
 } from '@bbc/gel-foundations/typography';
 import { latin } from '@bbc/gel-foundations/scripts';
+import { select, withKnobs } from '@storybook/addon-knobs';
+import json5 from 'json5';
 import notes from '../README.md';
 import * as colours from './colours';
 import { grid } from './detection';
+import * as fonts from './fonts';
 
@@ -55,6 +58,44 @@ const ColourContainer = styled.div`
 
+const Paragraph = styled.p`
+  ${Object.values(fonts).join()}
+`;
+
+const camelCase = str => str.replace(/-([a-z])/g, g => g[1].toUpperCase());
+const fontNames = Object.keys(fonts).sort();
+const fontStyles = fontNames.map(x => x.substring(2).replace(/_/g, ' '));
+
+const getFontStyles = fontName => {
+  const font = fontNames.find(x => x.includes(fontName.replace(/ /g, '_')));
+  const fontFace = fonts[font] || '';
+  const fontStyle = fontFace
+    .replace(/"/g, '')
+    .replace('@font-face', '')
+    .replace(/: /g, ':"')
+    .replace(/;/g, '",');
+
+  const { fontFamily, fontWeight } = json5.parse(camelCase(fontStyle));
+  return { fontFamily, fontWeight };
+};
+
 const detectionExamples = ['display: grid', grid];
 
 storiesOf('Utilities|Psammead Styles', module)
+  .addDecorator(withKnobs)
   .add(
+    'font styles',
+    () => {
+      const fontName = select('Font Style', fontStyles, fontStyles[0]);
+      return (
+        <Paragraph style={getFontStyles(fontName)}>
+          <span>The quick brown fox jumps over the lazy dog 0123456789</span>
+          <br />
+          <span>
+            نص حكيم له سر قاطع وذو شأن عظيم مكتوب على ثوب أخضر ومغلف بجلد أزرق
+          </span>
+        </Paragraph>
+      );
+    },
+    { notes, knobs: { escapeHTML: false } },
+  )
+  .add(
     'colours',
@@ -61,0 +102,0 @@ () => (

No alert changes

Improved metrics

Total package byte prevSize

183963

increased by0.79%

Lines of code

1986

increased by1.9%

No dependency changes