From 9e386292e984268735694f2a83349550c19a0685 Mon Sep 17 00:00:00 2001
From: Andrei Volchenko <volchenko.andrei@gmail.com>
Date: Wed, 20 Sep 2017 22:25:24 +0300
Subject: [PATCH] make header more configurable

---
 src/components/Header/Header.js       | 11 ++++-------
 src/components/Header/Header.story.js | 10 +++++++++-
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 5916372..ded26cc 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -1,15 +1,13 @@
 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 {
@@ -17,7 +15,6 @@ const Header = ({ username }) => (
                 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
index 23cc493..4fdf13e 100644
--- 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})`,
+            }}
+        />
     ));