Style story code

Author: samuelmeuli

stories/Code.js

@@ -13,7 +13,7 @@ const propTypes = {
 export default function Code(props) {
 return (
 <code>
-<p>{'<InputNumeric'}</p>
+<p className="component-name">{'<InputNumeric'}</p>
 {
 Object.keys(props.options).map((key) => {
 const value = props.options[key];
@@ -26,7 +26,7 @@ export default function Code(props) {
 return <p key={key}>&nbsp;&nbsp;{key}=&#123;{value}&#125;</p>;
 })
 }
-<p>{'/>'}</p>
+<p className="component-name">{'/>'}</p>
 </code>
 );
 }

stories/index.stories.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withState } from '@dump247/storybook-state';
+
 import Code from './Code';
 import InputNumeric from '../lib/InputNumeric';
+import './style.css';
 
 
 storiesOf('InputNumeric', module)
@@ -13,6 +15,7 @@ storiesOf('InputNumeric', module)
 value={store.state.value}
 onChange={value => store.set({ value })}
 />
+<br />
 <Code
 options={{
 value: 'this.state.value',
@@ -30,6 +33,7 @@ storiesOf('InputNumeric', module)
 step={0.2}
 onChange={value => store.set({ value })}
 />
+<br />
 <Code
 options={{
 value: 'this.state.value',
@@ -50,6 +54,7 @@ storiesOf('InputNumeric', module)
 step={0.01}
 onChange={value => store.set({ value })}
 />
+<br />
 <Code
 options={{
 value: 'this.state.value',

stories/style.css

@@ -0,0 +1,18 @@
+p {
+margin: 0;
+}
+
+code {
+display: inline-block;
+margin: 40px 0 0 0;
+padding: 5px 10px;
+background: #F6F6F6;
+border-radius: 5px;
+
+font-size: 14px;
+line-height: 1.6;
+}
+
+code .component-name {
+font-weight: bold;
+}