import PropTypes from 'prop-types';
import React from 'react';
import { baseFonts } from '@storybook/components';

const wrapperStyle = {
  background: '#F7F7F7',
  marginBottom: 10,
};

const headingStyle = {
  ...baseFonts,
  textTransform: 'uppercase',
  letterSpacing: '1.5px',
  fontSize: '12px',
  fontWeight: 'bolder',
  color: '#828282',
  border: '1px solid #C1C1C1',
  textAlign: 'center',
  borderRadius: '2px',
  padding: '5px',
  cursor: 'pointer',
  margin: 0,
  float: 'none',
  overflow: 'hidden',
};

const shortcutIconStyle = {
  textTransform: 'uppercase',
  letterSpacing: '3.5px',
  fontSize: 12,
  fontWeight: 'bolder',
  color: 'rgb(130, 130, 130)',
  border: '1px solid rgb(193, 193, 193)',
  textAlign: 'center',
  borderRadius: 2,
  padding: 5,
  cursor: 'pointer',
  margin: 0,
  display: 'inlineBlock',
  paddingLeft: 8,
  float: 'right',
  marginLeft: 5,
  backgroundColor: 'inherit',
  outline: 0,
};

const linkStyle = {
  textDecoration: 'none',
};

const Header = ({ openShortcutsHelp, name, url }) =>
  <div style={wrapperStyle}>
    <button style={shortcutIconStyle} onClick={openShortcutsHelp}>
      ⌘
    </button>
    <a style={linkStyle} href={url} target="_blank" rel="noopener noreferrer">
      <h3 style={headingStyle}>
        {name}
      </h3>
    </a>
  </div>;

Header.defaultProps = {
  openShortcutsHelp: null,
  name: '',
  url: '',
};

Header.propTypes = {
  openShortcutsHelp: PropTypes.func,
  name: PropTypes.string,
  url: PropTypes.string,
};

export default Header;

@@ -176,16 +176,49 @@
 om: 10,%0A
+  display: 'flex',%0A  height: 27,%0A
 %7D;%0A%0Acons
@@ -378,150 +378,52 @@
 ,%0A  
-border: '1px solid #C1C1C1',%0A  textAlign: 'center',%0A  borderRadius: '2px',%0A  padding: '5px',%0A  cursor: 'pointer',%0A  margin: 0,%0A  float: 'none'
+cursor: 'pointer',%0A  padding: 0,%0A  margin: 0
 ,%0A  
@@ -508,34 +508,8 @@
 e',%0A
-  letterSpacing: '3.5px',%0A
   fo
@@ -663,22 +663,8 @@
  2,%0A
-  padding: 5,%0A
   cu
@@ -680,29 +680,16 @@
 inter',%0A
-  margin: 0,%0A
   displa
@@ -719,50 +719,34 @@
 ding
-Left: 8,%0A  float: 'right',%0A  marginLeft: 5
+: 0,%0A  margin: '0 0 0 5px'
 ,%0A  
@@ -787,16 +787,29 @@
 ine: 0,%0A
+  width: 30,%0A
 %7D;%0A%0Acons
@@ -850,16 +850,163 @@
 'none',%0A
+  flexGrow: 1,%0A  display: 'flex',%0A  alignItems: 'center',%0A  justifyContent: 'center',%0A  border: '1px solid rgb(193, 193, 193)',%0A  borderRadius: 2,%0A
 %7D;%0A%0Acons
@@ -1053,16 +1053,18 @@
 rl %7D) =%3E
+ (
 %0A  %3Cdiv 
@@ -1089,97 +1089,8 @@
 e%7D%3E%0A
-    %3Cbutton style=%7BshortcutIconStyle%7D onClick=%7BopenShortcutsHelp%7D%3E%0A      %E2%8C%98%0A    %3C/button%3E%0A
     
@@ -1199,43 +1199,116 @@
 le%7D%3E
-%0A        %7Bname%7D
+%7Bname%7D%3C/h3%3E%0A    %3C/a%3E%0A    %3Cbutton style=%7BshortcutIconStyle%7D onClick=%7BopenShortcutsHelp%7D%3E
 %0A      
-%3C/h3%3E
+%E2%8C%98
 %0A    %3C/
-a
+button
 %3E%0A  
@@ -1313,16 +1313,18 @@
   %3C/div%3E
+%0A)
 ;%0A%0AHeade

Update layout fix using flexbox