make header more configurable

21-23 · Sep 20, 2017 · 9e38629 · 9e38629
1 parent 8a04ed1
commit 9e38629
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -1,23 +1,20 @@
 import { h } from 'preact';
 import Icon from 'react-fontawesome';
 
-const backgroundImage = require('../../assets/images/header-bg.png');
-
-const Header = ({ username }) => (
-    <header>
-        <span>CSS Quickdraw</span>
+const Header = ({ productName, username, style }) => (
+    <header style={style}>
+        <span>{ productName }</span>
 
         <span>
             <Icon name="user" className="user-icon" />
-            {username}
+            { username }
         </span>
         <style jsx>{`
             header {
                 padding: 10px;
                 flex: 1;
                 display: flex;
                 justify-content: space-between;
-                background-image: url(${backgroundImage});
                 background-size: auto 100%;
                 color: white;
                 box-sizing: border-box;

diff --git a/src/components/Header/Header.story.js b/src/components/Header/Header.story.js
@@ -4,7 +4,15 @@ import { text } from '@storybook/addon-knobs';
 
 import { Header } from './Header';
 
+const backgroundImageUrl = require('../../assets/images/header-bg.png');
+
 storiesOf('Header', module)
     .add('default', () => (
-        <Header username={text('username', 'username')}/>
+        <Header
+            productName={text('productName', 'CSS Quickdraw')}
+            username={text('username', 'username')}
+            style={{
+                backgroundImage: `url(${backgroundImageUrl})`,
+            }}
+        />
     ));