Change heading of "design system" to make it nicer when imported

Author: domyen

src/components/basics/Avatar.stories.js

@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
 
 import { Avatar } from './Avatar';
 
-storiesOf('basics/Avatar', module)
+storiesOf('Design System|Avatar', module)
   .addParameters({ component: Avatar })
   .add('large', () => (
     <div>

src/components/basics/Badge.stories.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { Badge } from './Badge';
 
-storiesOf('basics/Badge', module)
+storiesOf('Design System|Badge', module)
   .add('all badges', () => (
     <div>
       <Badge status="positive">Positive</Badge>

src/components/basics/Button.stories.js

@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
 import { Button } from './Button';
 import { Icon } from './Icon';
 
-storiesOf('basics/Button', module).add('all buttons', () => (
+storiesOf('Design System|Button', module).add('all buttons', () => (
   <div>
     <Button primary>Primary</Button>
     <Button secondary>Secondary</Button>

src/components/basics/Checkbox.stories.js

@@ -5,7 +5,7 @@ import { action } from '@storybook/addon-actions';
 import { Checkbox } from './Checkbox';
 
 const onChange = action('change');
-storiesOf('basics/Checkbox', module)
+storiesOf('Design System|Checkbox', module)
   .add('all checkboxes', () => (
     <form>
       <Checkbox onChange={onChange} />

src/components/basics/Icon.stories.js

@@ -48,7 +48,7 @@ const List = styled.div`
   flex-flow: row wrap;
 `;
 
-storiesOf('basics/Icon', module)
+storiesOf('Design System|Icon', module)
   .add('labels', () => (
     <List>
       {Object.keys(icons).map(key => (

src/components/basics/Input.stories.js

@@ -5,7 +5,7 @@ import { action } from '@storybook/addon-actions';
 import { Input } from './Input';
 
 const onChange = action('change');
-storiesOf('basics/Input', module)
+storiesOf('Design System|Input', module)
   .add('all inputs', () => (
     <form style={{ background: '#EEEEEE', padding: '3em' }}>
       <Input value="Default" icon="email" onChange={onChange} />

src/components/basics/ListItem.stories.js

@@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react';
 import { ListItem } from './ListItem';
 import { Icon } from './Icon';
 
-storiesOf('basics/ListItem', module)
+storiesOf('Design System|ListItem', module)
   .add('all', () => (
     <div>
       <ListItem loading />

src/components/basics/ProgressDots.stories.js

@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
 
 import { ProgressDots } from './ProgressDots';
 
-storiesOf('basics/ProgressDots', module)
+storiesOf('Design System|ProgressDots', module)
   .add('loading', () => <ProgressDots loading />)
   .add('starting', () => <ProgressDots steps={4} progress={1} />)
   .add('halfway', () => <ProgressDots steps={4} progress={2} />)

src/components/basics/SocialGraph.js

@@ -65,7 +65,7 @@ const monochromeColors = [
   color.lightest,
 ];
 
-storiesOf('basics/color', module).add('all', () => (
+storiesOf('Design System|color', module).add('all', () => (
   <Page>
     <ColorWrapper>
       <Swatches>