Updating docs as per new changes in npm packaage.

README.md

@@ -2,40 +2,57 @@
 > A Drupal theme generator
 
 ## Installation
+---
 
-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 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
+npm install -g generator-kashmir
 ```
 
 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
+kashmir
 ```
 
 [npm-image]: https://badge.fury.io/js/generator-kashmir.svg
 [npm-url]: https://npmjs.org/package/generator-kashmir
 
 ## Design systems
+---
 
 The theme provides two options for design systems, storybook and patternlab. These are included as part of the theme and you can choose one of the two during the theme generation process.
 
-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.
+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
+
+[Storybook.js](https://storybook.js.org/) is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application.
+
+
+### Compile and launch storybook
+
+View the storybook.
+
+```bash
+yarn storybook
+```
+
+### Patternlab
 
-## Storybook.js
+[Patternlab](https://patternlab.io/) is a frontend workshop environment that helps you build, view, test, and showcase your design system's UI components.
 
-### Component generation
+## 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
+╰─❯ kashmir
 ? Please choose what you would like to generate? component
 ? Please enter the component name: button
 ? Choose the type of the component atom
@@ -44,7 +61,7 @@ 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.*
@@ -66,11 +83,3 @@ In order to compile the assets of the theme, this also compiles sass inside comp
 ```bash
 yarn gulp
 ```
-
-### Compile and launch storybook
-
-View the storybook.
-
-```bash
-yarn storybook
-```

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

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