Merge 3dffccd from design-react-kit

Author: gesposito

Diff for: .gitignore

@@ -1,6 +1,8 @@
+# Dependencies
 node_modules
-package-lock.json
-storybook-prod
+
+# Outputs
+dist
+
+# Logs
 npm-debug.log
-.out
-lib

Diff for: .storybook/addons.js

@@ -0,0 +1 @@
+import "@storybook/addon-options/register";

Diff for: .storybook/config.js

@@ -1,16 +1,22 @@
-import React from 'react';
-import {configure, addDecorator} from '@storybook/react';
-import '@storybook/addon-actions/register';
-import '@storybook/addon-console';
-import '../src/index.css';
-import './utils.css';
+import { configure } from "@storybook/react";
+import { setOptions } from "@storybook/addon-options";
 
-// Get all files inside `components` directory which ends with `.story.js`
-const req = require.context('../src', true, /\.story\.js$/);
+import "bootstrap-italia/dist/css/bootstrap-italia.min.css";
+import "bootstrap-italia/dist/css/italia-icon-font.css";
 
+// addon-options
+// https://github.com/storybooks/storybook/tree/master/addons/options
+setOptions({
+  // name to display in the top left corner
+  name: "design-react-kit",
+  // URL for name in top left corner to link to
+  url: "https://github.com/italia/design-react-kit/"
+});
+
+// automatically import all files ending in *.stories.js
+const req = require.context("../stories", true, /.stories.js$/);
 function loadStories() {
-    req.keys().forEach(filename => req(filename));
+  req.keys().forEach(filename => req(filename));
 }
 
-addDecorator(story => <div className="c-hideFocus">{story()}</div>);
 configure(loadStories, module);

Diff for: LICENSE

@@ -1,11 +1,11 @@
-
 [![Build Status](https://travis-ci.org/italia/design-react.svg?branch=master)](https://travis-ci.org/italia/design-react)
-[![Join the #design-js channel](https://img.shields.io/badge/Slack%20channel-%23design--js-blue.svg)](https://developersitalia.slack.com/messages/C7VPAUVB3/)
+[![Build Status](https://circleci.com/gh/italia/design-react.svg?branch=master)](https://circleci.com/gh/italia/design-react)
+[![Join the #design-devel channel](https://img.shields.io/badge/Slack%20channel-%23design--js-blue.svg)](https://developersitalia.slack.com/messages/C7VPAUVB3/)
 [![Get invited](https://slack.developers.italia.it/badge.svg)](https://slack.developers.italia.it/)
 
 
 # design-react
-A React toolkit that implements the Italia design system
+A React toolkit that implements `Bootstrap Italia`
 
 An easy-to-use showcase tool called Storybook is available to browse the library and view the components in action.
 
@@ -20,32 +20,31 @@ An easy-to-use showcase tool called Storybook is available to browse the library
 
 Just clone the repo and run `npm install` to install dependencies and `npm run storybook` to run the server.
 
-The Storybook is then available at http://localhost:8010
+The Storybook is then available at http://localhost:6006
 
 ![storybook](/doc/storybook.png?raw=true)
 
-A public version of Storybook is available [here](https://roma-js.github.io/design-react).
+A public version of Storybook is available [here](https://italia.github.io/design-react).
 
 ## How to create a new component
 
 This section will guide you to the creation of a new component in the repository.
-All the components live in the components folder: each component has its own folder with all the content it needs to work, the test files and the storybook story to publish.
-As example the Button component lives in the components/Button folder and structure is the following:
+All the components live in the `components` folder: each component has its own folder with all the content it needs to work, the test files and the storybook story to publish.
+As example the `Button` component lives in the `src/components/Button` folder and structure is the following:
 
 ```
-components
-    └── Button
-        ├── Button.js
-        └── Button.story.js
+
+src
+    └── components
+            └── Button
+                ├── Button.js
+                └── Button.stories.js
 ```
 
 Some basic rules to follow when structuring the component:
 
-* The components use a static CSS file imported in the main root.
-    * The CSS file comes from the `design-web-toolkit` repository and it has been built from there
 * The JS file for the component uses the JSX syntax.
-    * Some components use some jQuery plugins.
-* The .story.js file should only contains content related to that component.
+* The `.stories.js` file should only contains content related to that component.
 
 
 Once created a new component and started Storybook check that the new component has been added properly and it renders as it should.
@@ -65,46 +64,45 @@ In the component page it is also possible to access directly to the source code
 There's a command to build a static version of the Storybook catalog so that it can be deployed anywere without any need of a webserver.
 
 ```sh
-$ npm run build-storybook
+$ npm run storybook:build
 ```
 
-The static pages of the building process are stored in the `out` folder.
+The static pages of the building process are stored in the `storybook-static` folder.
 
 #### known issues (open pull requests)
 
-  - [Show JSX if PropVal is a React element](https://github.com/storybooks/storybook/pull/1455)
-  - [Fixed prop type validation errors in info addon](https://github.com/storybooks/storybook/pull/1374)
+- 
 
 ### Module
 
-To use the React UIKit as module in the app you can install it directly from npm:
+To use the React Design Kit as module in the app you can install it directly from npm:
 
 ```sh
-$ npm install <package-name>
+$ npm install design-react
 ```
 
 Then start to use the components in your app:
 
 ```jsx
 import React from 'react';
-import {Button, Nav, Alert} from '<package-name>';
+import { Button, Nav, Alert } from 'design-react';
 
-// If you want to handle the css with webpack uncomment this line
-// import '<package-name>/lib/index.css';
+// If you want to handle the CSS with your bundler uncomment this line
+// import "bootstrap-italia/dist/css/bootstrap-italia.min.css";
+// import "bootstrap-italia/dist/css/italia-icon-font.css";
 
 ...
 ```
 
-You can find an example of this [in this repository](https://github.com/Roma-JS/design-react-demo).
 #### Preprocessors
 
 If you're using preprocessors as SASS or Less you can import the CSS directly into your `main` file:
 
 ```scss
-@import '<package-name>/lib/index.css;
+@import "bootstrap-italia/src/scss/bootstrap-italia.scss";
 ```
 
 ## Continuous Integration
 
-There's a TravisCI instance configured to run on this repository every time the `master` branch is updated. Currently only the Storybook build is deployed to the `gh-pages` branch and it is publicly visible at `https://<user>.github.io/design-react` - you need to configure Travis for your repo.
-
+There's a CircleCI instance configured to run on this repository every time the `master` branch is updated. 
+Currently only the Storybook build is deployed to the `gh-pages` branch and it is publicly visible at `https://italia.github.io/design-react`.