feat(#95): finished stories for general ui components

src/app/App.jsx

@@ -19,7 +19,7 @@ import {
 
 // base style components
 import PrivateRoute from './PrivateRoute';
-import AppMessage from '../ui/AppMessage/AppMessage';
+import AppMessage from '../ui/AppMessage';
 import AppHeader from './AppHeader';
 import AppFooter from './AppFooter';
 

src/images/AddImageButton.jsx

@@ -10,7 +10,7 @@ import { Add } from 'grommet-icons';
 
 import Button from '../ui/form/Button';
 import ButtonGroup from '../ui/form/ButtonGroup';
-import AppMessage from '../ui/AppMessage/AppMessage';
+import AppMessage from '../ui/AppMessage';
 import {
   getImageCreationDateTime,
   getFormattedFileSize,

src/ui/AppMessage/AppMessage.jsx → src/ui/AppMessage.jsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 import { Box } from 'grommet';
 
-import { Colors, MediaSize } from '../../styles';
+import { Colors, MediaSize } from '../styles';
 
 export const StyledAppMessage = styled(Box)`
   visibility: ${props => props.show ? 'visible' : 'none'};
@@ -58,7 +58,7 @@ export const StyledAppMessageContent = styled(Box)`
   }
 `;
 
-/** This componen supports... */
+/** Show App message as application modal and use fullsize on mobile devices */
 const AppMessage = ({ children, show, ...props }) => (<StyledAppMessage show={show} {...props}>
     <StyledAppMessageContent elevation="xlarge" show={show}>
       {children}

src/ui/AppMessage.stories.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { boolean } from '@storybook/addon-knobs';
+
+import AppMessage from './AppMessage';
+
+storiesOf('AppMessage', module)
+  .add('default', () => (
+    <AppMessage show={boolean('show', true)}>
+      <h1>AppMessage Example</h1>
+      <p>Add some text in here and...</p>
+    </AppMessage>
+  ));

src/ui/Card.jsx

@@ -13,6 +13,8 @@ export const StyledCard = styled(Box)`
   margin: 1rem 0;
 `;
 
+/** Simple card layout container. Add your children
+ * and use default Grommet props to style this component */
 const Card = ({ children, ...props }) => (
   <StyledCard
     elevation="small"
@@ -22,6 +24,7 @@ const Card = ({ children, ...props }) => (
 );
 
 Card.propTypes = {
+  /** Specify child to be rendered */
   children: PropTypes.node.isRequired,
 };
 

src/ui/Card.stories.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+
+import Card from './Card';
+
+storiesOf('Card', module)
+  .add('default', () => (
+    <Card>
+      <h1>Card Example</h1>
+      <p>Add some text in here and...</p>
+    </Card>
+  ));

src/ui/PreviousButton.jsx

@@ -15,6 +15,7 @@ export const StyledPrevious = styled(Previous)`
   }
 `;
 
+/** Render go previous button as left arrow icon */
 const PreviousButton = (props) => <StyledPrevious {...props} />;
 
 export default PreviousButton;

src/ui/PreviousButton.stories.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import PreviousButton from './PreviousButton';
+
+import styled from 'styled-components'
+import { Colors } from '../styles';
+
+const StyledBackground = styled.div`
+  padding: 3rem 1rem;
+  background-color: ${Colors.ColorsPalette.White};
+`;
+
+storiesOf('PreviousButton', module)
+  .add('default', () => <StyledBackground>
+    <PreviousButton
+      onClick={action('on-click')}
+    />
+  </StyledBackground>);

src/ui/View.jsx

@@ -12,13 +12,15 @@ const StyledView = styled(Box)`
   padding-top: ${Sizes.Header.height};
 `;
 
+/** Default wrapper for application usafge */
 export const View = ({ children, ...props }) => (
   <StyledView flex fill pad="small" {...props}>
     {children}
   </StyledView>
 );
 
 View.propTypes = {
+  /** Add view content here */
   children: PropTypes.node.isRequired,
 };
 
@@ -28,11 +30,13 @@ const StyledHeading = styled(Heading)`
   max-width: 100%;
 `;
 
+/** Default heading for view */
 export const ViewHeading = (props) => (
   <StyledHeading level="4" {...props} />
 );
 
 View.propTypes = {
+  /** Add view header here */
   children: PropTypes.node.isRequired,
 };
 

src/ui/View.stories.js

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+
+import View, { ViewHeading } from './View';
+
+storiesOf('View', module)
+  .add('default', () => (<View>
+    <p>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor 
+      invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et 
+      accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
+      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
+      consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 
+      dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
+      dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est 
+      Lorem ipsum dolor sit amet.
+    </p>
+  </View>
+  ))
+  .add('with ViewHeading', () => (<View>
+    <ViewHeading>Default View Header</ViewHeading>
+    <p>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor 
+      invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et 
+      accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
+      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
+      consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 
+      dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
+      dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est 
+      Lorem ipsum dolor sit amet.
+    </p>
+  </View>
+  ));