framework.js

import React from 'react';
import { storiesOf } from '@kadira/storybook';

const panelHeadingStyle = {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between'
};
const PanelHeading = ({ children }) => (
  <section style={panelHeadingStyle}>{children}</section>
);

const headerStyle = {
  fontFamily: 'Lato'
};
const Header = ({ children }) => (
  <h1 style={headerStyle}>{children}</h1>
);

const Button = ({ content, style }) => (
  <button style={style}>{content}</button>
);

const colors = {
  turquoise: '#30c8c0'
};

const linkStyle = {
  backgroundColor: 'transparent',
  borderColor: 'transparent',
  boxShadow: 'none',
  color: colors.turquoise,
  fontSize: '0.8rem',
  fontWeight: 'bold'
};
const Link = ({ content }) => (
  <Button style={linkStyle} content={content} />
);

const Panel = ({ children, style }) => (
  <section style={style}>{children}</section>
);

const PanelA = () => (
  <Panel style={{ flex: '0 1 30%' }}>
    <PanelHeading>
      <Header>Conversations</Header>
      <Link content="Mark all as read" />
    </PanelHeading>
  </Panel>
);

const PanelB = () => (
  <Panel style={{ flex: '1 0' }}>
    <PanelHeading>
      <Header>Jane</Header>
      <Button content="See Context" />
    </PanelHeading>
  </Panel>
);

storiesOf('Communication Centre', module)
  .addWithInfo(
    'Main layout',
    () => (
      <div style={{ display: 'flex' }}>
        <PanelA />
        <PanelB />
      </div>
    )
  );