Add link docs

components/link/index.jsx

@@ -5,11 +5,11 @@ import FontIcon from '../font_icon';
 const Link = (props) => {
   let className = style.root;
   if (props.className) className += ` ${props.className}`;
+
   return (
     <a
       {...props}
       data-react-toolbox='link'
-      href={props.route}
       className={className}
     >
       { props.icon ? <FontIcon className={style.icon} value={props.icon} /> : null }
@@ -23,12 +23,11 @@ Link.propTypes = {
   label: React.PropTypes.string,
   className: React.PropTypes.string,
   count: React.PropTypes.number,
-  icon: React.PropTypes.string,
-  onClick: React.PropTypes.func,
-  route: React.PropTypes.string
+  icon: React.PropTypes.string
 };
 
 Link.defaultProps = {
-  attributes: '',
   className: ''
 };
+
+export default Link;

components/link/readme.md

@@ -1,19 +1,28 @@
 # Link
 
-```
-var Link = require('react-toolbox/components/link');
+The link is a very simple component that acts mostly as a wrapper for the HTML anchor. It's not included in Material Design Specification but we provide it as an easy way to create links with icons and counters. Let's see an example:
 
-<Link route='http://google.com' label='Go to Google.com' />
-<Link route='/profile/soyjavi' icon='user' />
+<!-- example -->
+```jsx
+import Link from 'react-toolbox/link';
+
+const LinksTest = () => (
+  <nav>
+    <Link href="/#/components/link" label="Work" count={4} icon='business' />
+    <Link href="/#/components/link" label="Blog" icon='speaker-notes' />
+    <Link href="/#/components/link" label="Explore" icon='explore' />
+  </nav>
+);
 ```
 
 ## Properties
 
+You can add as many properties as you want to be directly transferred to the output anchor element. Apart from them you have the following properties:
+
 | Name              | Type          | Default         | Description|
-|:-                 |:-:            | :-              |:-|
-| **label**       | String        | "normal"        | he text string to use for the floating label element.|
-| **className**     | String        |                 | Sets the class-styles of the Component.|
-| **count**         | Number        |                 | Sets a count number behind label property.|
-| **icon**          | String        |                 | Sets a <FontIcon/> sub-component.|
-| **onClick**       | Function      |                 | Dispatch event when user clicks on component.|
-| **route**         | String        |                 | URL String|
+|:-----|:-----|:-----|:-----|
+| `label`       | `String`        |         | The text string used for the text content of the link.|
+| `className`     | `String`      | `''`            | Sets a custom class name to add styles to the link.|
+| `count`         | `Number`        |                 | Sets a count number useful to display in the page how many times was visited for example.|
+| `icon`          | `String`        |                 | An icon key string to include a `FontIcon` component in front of the text.|
+

components/link/style.scss

@@ -13,9 +13,10 @@
   align-items: center;
   justify-content: center;
   overflow: hidden;
+  line-height: 1.5;
+  cursor: pointer;
   transition: opacity $animation-duration $animation-curve-default;
   &:not(.active) {
-    font-weight: $font-weight-thin;
     opacity: .5;
   }
   &:hover, &:active {
@@ -28,6 +29,7 @@
     text-transform: capitalize;
   }
   > small {
+    margin-left: .8 * $unit;
     font-size: $font-size-tiny;
     text-align: center;
   }

docs/app/components/layout/main/modules/components.js

@@ -34,6 +34,7 @@ import DrodpownExample1 from './examples/dropdown_example_1.txt';
 import FontIconExample1 from './examples/font_icon_example_1.txt';
 import InputExample1 from './examples/input_example_1.txt';
 import TimePickerTest from './examples/timepicker_example_1.txt';
+import LinkExample1 from './examples/link_example_1.txt';
 
 export default {
   app_bar: {
@@ -104,7 +105,8 @@ export default {
   link: {
     name: 'Link',
     docs: Link,
-    path: '/components/link'
+    path: '/components/link',
+    examples: [LinkExample1]
   },
   list: {
     name: 'List',

docs/app/components/layout/main/modules/examples/link_example_1.txt

@@ -0,0 +1,9 @@
+const LinksTest = () => (
+  <nav>
+    <Link href="/#/components/link" label="Work" count={4} icon='business' />
+    <Link href="/#/components/link" label="Blog" icon='speaker-notes' />
+    <Link href="/#/components/link" label="Explore" icon='explore' />
+  </nav>
+);
+
+return <LinksTest />;