Added content to the Readme

Author: rstaib

.circleci/config.yml

@@ -47,7 +47,7 @@ jobs:
       - run: yarn install
       - run: yarn build
       - run: echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > ~/tmp/.npmrc
-      - run: yarn publish --new-version ${CIRCLE_TAG}
+      - run: yarn publish --new-version ${CIRCLE_TAG} --no-git-tag-version
 
 workflows:
   version: 2

README.md

@@ -1,4 +1,65 @@
 # React Rasta
 [![release](https://img.shields.io/github/release/ChilliCream/react-rasta.svg)](https://github.com/ChilliCream/react-rasta/releases) [
 ![package](https://img.shields.io/npm/v/react-rasta.svg)](https://www.npmjs.com/package/react-rasta) [![license](https://img.shields.io/github/license/ChilliCream/react-rasta.svg)](https://github.com/ChilliCream/react-rasta/blob/master/LICENSE) 
-[![build](https://img.shields.io/circleci/project/github/ChilliCream/react-rasta.svg)](https://circleci.com/gh/ChilliCream/react-rasta/tree/master) [![coverage](https://img.shields.io/coveralls/ChilliCream/react-rasta.svg)](https://coveralls.io/github/ChilliCream/react-rasta?branch=master)
+[![build](https://img.shields.io/circleci/project/github/ChilliCream/react-rasta.svg)](https://circleci.com/gh/ChilliCream/react-rasta/tree/master) [![coverage](https://img.shields.io/coveralls/ChilliCream/react-rasta.svg)](https://coveralls.io/github/ChilliCream/react-rasta?branch=master)
+
+A grid system for *React* projects to keep the layout structured and responsive.
+
+*React Rasta* is a 12 column grid system and works underneath with the *CSS flexbox* layout. But because it can be difficult to work with *CSS flexbox*, *React Rasta* offers a simple *API* so you don't have to worry about that.
+
+## Getting Started
+
+Here you will find what is needed to get started.
+
+### Install Package
+
+First things first. Install the package `react-rasta` with *yarn* or *npm*.
+
+When using *yarn* it looks like this.
+
+```powershell
+yarn add react-rasta
+```
+
+And when using *npm* it looks like this.
+
+```powershell
+npm install react-rasta
+```
+
+### Basic Example
+
+Here is a quick and basic example.
+
+```tsx
+//App.tsx
+import * as React from 'react';
+import { Column, Container, Row } from 'react-rasta';
+
+export default class App extends React.Component {
+    render() {
+        return (
+            <Container>
+                <Row>
+                    <Column size={3}>
+                        Left
+                    </Column>
+                    <Column size={{ 'xs': 6, 'md': 3 }}>
+                        Middle 1
+                    </Column>
+                    <Column size={{ 'xs': 6, 'md': 3 }}>
+                        Middle 2
+                    </Column>
+                    <Column size={3}>
+                        Right
+                    </Column>
+                </Row>
+            </Container>
+        );
+    }
+}
+```
+
+## Documentation
+
+Click [here](https://github.com/ChilliCream/react-rasta-docs) to get to the documentation home of *React Rasta*.

jest.config.json

@@ -1,4 +1,8 @@
 {
+  "collectCoverageFrom": [
+    "src/**/*.{js,jsx,ts,tsx}",
+    "!src/**/*.story.{js,jsx,ts,tsx}"
+  ],
   "coverageReporters": [
     "cobertura",
     "lcov"
@@ -11,7 +15,7 @@
     "json",
     "node"
   ],
-  "testRegex": ".*?\\.(test|spec)\\.(jsx?|tsx?)$",
+  "testRegex": ".*?\\.(spec|test)\\.(jsx?|tsx?)$",
   "testResultsProcessor": "jest-junit",
   "transform": {
     "^.+\\.tsx?$": "ts-jest"

src/Utilities.test.ts

@@ -1,11 +1,36 @@
-import { BreakpointValuesMap } from './BreakpointValue';
-import { _map } from './Utilities';
+import { PropertyValuesMap } from './BreakpointValue';
+import { Theme } from './Theme';
+import { _getGutterWidth, _map } from './Utilities';
 
 describe('Utilities', () => {
+  describe('_getGutterWidth', () => {
+    it('Should return 15 if the theme is specified but gutterWidth is undefined', () => {
+      // arrange
+      const theme: Theme = {};
+
+      // act
+      const output = _getGutterWidth(theme);
+
+      // arrange
+      expect(output).toEqual(15);
+    });
+
+    it('Should return 20 if the theme is specified and gutter width is set to 40', () => {
+      // arrange
+      const theme: Theme = { gutterWidth: 40 };
+
+      // act
+      const output = _getGutterWidth(theme);
+
+      // arrange
+      expect(output).toEqual(20);
+    });
+  });
+
   describe('_map', () => {
-    it('Should return a valid map', () => {
+    it('Should map a PropertyValuesMap to BreakpointValuesMap', () => {
       // arrange
-      const input: BreakpointValuesMap = {
+      const input: PropertyValuesMap = {
         'number': {
           'xs': 540,
           'md': 670

tsconfig.json

@@ -22,6 +22,7 @@
     "src/**/*.ts*"
   ],
   "exclude": [
+    "src/**/*.story.*",
     "src/**/*.test.*"
   ]
 }