Adding example component for storybook and updating README.

README.md

@@ -1,19 +1,77 @@
 # Kashmir [![NPM version][npm-image]][npm-url]
-> Generator for the Kashmir Drupal theme
+> A Drupal theme generator
 
 ## Installation
 
-First, install [Yeoman](http://yeoman.io) and generator-kashmir using [npm](https://www.npmjs.com/) (we assume you have pre-installed [node.js](https://nodejs.org/)).
+Install [Yeoman](http://yeoman.io) and generator-kashmir using [npm](https://www.npmjs.com/) (we assume you have pre-installed [node.js](https://nodejs.org/)).
+
 
 ```bash
 npm install -g yo generator-kashmir
 ```
 
-Then generate your new theme:
+Then generate your new theme using the generator use the below command from the directory where you want the theme to be generated.
 
 ```bash
 yo kashmir
 ```
 
 [npm-image]: https://badge.fury.io/js/generator-kashmir.svg
 [npm-url]: https://npmjs.org/package/generator-kashmir
+
+## Design systems
+
+The theme provides storybook and patternlab as two options for design systems as part of this theme. During the setup you can choose to setup either one of the two.
+
+Patternlab support has been continued as before and we have now also added Storybook.js support. The recommended option going forward would be to use storybook as it is more modern and supports component building for numerous JS frameworks.
+
+## Storybook.js
+
+### Component generation
+---
+
+
+Once theme is generated you can use the theme generator to build components for the theme.
+
+Below is a example of generating story for *button* component,
+
+```bash
+╰─❯ yo kashmir
+? Please choose what you would like to generate? component
+? Please enter the component name: button
+? Choose the type of the component atom
+? Choose the files you to generate? sass, json, twig, markdown, stories
+The button component was created.
+```
+
+### Component structure
+---
+The theme genertor would ask you which files you want to generate for the the component,
+- sass - will contain the styles for component
+- json - will contain the data for the component, ex: title, description.
+- twig - will contain the markup for the component
+- markdown - documentation
+- stories - the story js file
+- typescript - additional js file
+
+Based on your component needs, choose which file you need. 
+
+Check the button component example provided with the theme.
+
+## Build commands 
+
+### Compile theme
+
+In order to compile the assets of the theme, this also includes compiling sass inside components, we use gulp,
+
+```bash
+yarn gulp
+```
+
+### Compile and launch storybook
+
+View the storybook.
+
+```bash
+yarn storybook
+```

generators/app/templates/copy/components/02-atoms/button/button.json

@@ -0,0 +1,3 @@
+{
+  "button_title": "SAVE"
+}

generators/app/templates/copy/components/02-atoms/button/button.scss

@@ -0,0 +1,16 @@
+.btn {
+  background-color: #1e6dfd;
+  color: #fff;
+  border-radius: 20px;
+  height: 40px;
+  min-width: 150px;
+  font-size: 1.1em;
+  text-transform: uppercase;
+  border: none;
+}
+
+.btn.secondary {
+  border: 2px solid #1e6dfd;
+  background-color: #fff;
+  color: #1e6dfd;
+}

generators/app/templates/copy/components/02-atoms/button/button.stories.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import Button from './button.twig';
+import '@atoms/button/button.css';
+import data from './button.json';
+
+export default {
+  title: 'Components/Button',
+  component: Button,
+}
+
+export const Primary = () => (
+  Button({
+    button_title: data.button_title,
+    variant: 'primary',
+  })
+);
+
+export const Secondary = () => (
+  Button({
+    button_title: data.button_title,
+    variant: 'secondary',
+  })
+);

generators/app/templates/copy/components/02-atoms/button/button.twig

@@ -0,0 +1,3 @@
+<button type="button" class="btn {{ variant }}">
+  {{ button_title }}
+</button>