docs: update components README.md

README.md

@@ -40,17 +40,15 @@ import { Button, Form, FormGroup, Input, Label } from '@afconsult/apollo';
 3. Use the components:
 
 ```jsx
-const Example = () => {
-  return (
-    <Form>
-      <FormGroup>
-        <Label for="example">Example Input</Label>
-        <Input id="example" placeholder="Inser text here.." />
-      </FormGroup>
-      <Button type="submit">Submit</Button>
-    </Form>
-  );
-};
+const Example = () => (
+  <Form>
+    <FormGroup>
+      <Label for="example">Example Input</Label>
+      <Input id="example" placeholder="Inser text here.." />
+    </FormGroup>
+    <Button type="submit">Submit</Button>
+  </Form>
+);
 ```
 
 ### Components

src/components/Alert/README.md

@@ -6,15 +6,11 @@
 import React from 'react';
 import { Alert } from '@afconsult/apollo';
 
-export default class Example extends React.PureComponent {
-  render() {
-    return (
-      <Alert color="danger">
-        <b>Server offline.</b> We are working on solving this issue.
-      </Alert>
-    );
-  }
-}
+const Example = () => (
+  <Alert color="danger">
+    <b>Server offline.</b> We are working on solving this issue.
+  </Alert>
+);
 ```
 
 #### Props

src/components/Avatar/README.md

@@ -8,17 +8,13 @@ Avatars are used to display a thumbnail of an individual.
 import React from 'react';
 import { Avatar } from '@afconsult/apollo';
 
-export default class Example extends React.PureComponent {
-  render() {
-    return (
-      <Avatar
-        name="Willow Mcdonald"
-        size="x-small"
-        src="http://via.placeholder.com/400x400"
-      />
-    );
-  }
-}
+const Example = () => (
+  <Avatar
+    name="Willow Mcdonald"
+    size="x-small"
+    src="http://via.placeholder.com/400x400"
+  />
+);
 ```
 
 #### Props

src/components/Badge/README.md

@@ -6,16 +6,12 @@
 import React from 'react';
 import { Badge } from '@afconsult/apollo';
 
-export default class Example extends React.PureComponent {
-  render() {
-    return (
-      <div>
-        <Badge>Group</Badge>
-        <Badge color="secondary">Project</Badge>
-      </div>
-    );
-  }
-}
+const Example = () => (
+  <React.Fragment>
+    <Badge>Group</Badge>
+    <Badge color="secondary">Project</Badge>
+  </React.Fragment>
+);
 ```
 
 #### Props

src/components/Breadcrumbs/README.md

@@ -6,17 +6,13 @@
 import React from 'react';
 import { Breadcrumbs, Breadcrumb } from '@afconsult/apollo';
 
-export default class Example extends React.PureComponent {
-  render() {
-    return (
-      <Breadcrumbs>
-        <Breadcrumb>first</Breadcrumb>
-        <Breadcrumb>second</Breadcrumb>
-        <Breadcrumb active>active</Breadcrumb>
-      </Breadcrumbs>
-    );
-  }
-}
+const Example = () => (
+  <Breadcrumbs>
+    <Breadcrumb>first</Breadcrumb>
+    <Breadcrumb>second</Breadcrumb>
+    <Breadcrumb active>active</Breadcrumb>
+  </Breadcrumbs>
+);
 ```
 
 #### Props [Breadcrumbs](./)

src/components/Button/README.md

@@ -6,19 +6,15 @@
 import React from 'react';
 import { Button } from '@afconsult/apollo';
 
-export default class Example extends React.PureComponent {
-  render() {
-    return (
-      <div>
-        <Button color="primary">primary</Button>
-        <Button color="secondary">secondary</Button>
-        <Button color="success">success</Button>
-        <Button color="danger">danger</Button>
-        <Button color="link">link</Button>
-      </div>
-    );
-  }
-}
+const Example = () => (
+  <React.Fragment>
+    <Button color="primary">primary</Button>
+    <Button color="secondary">secondary</Button>
+    <Button color="success">success</Button>
+    <Button color="danger">danger</Button>
+    <Button color="link">link</Button>
+  </React.Fragment>
+);
 ```
 
 #### Props

src/components/Form/README.md

@@ -6,55 +6,43 @@
 import React from 'react';
 import { Form, FormGroup, Label, Input } from '@afconsult/apollo';
 
-export default class Example extends React.PureComponent {
-  render() {
-    return (
-      <Form>
-        <FormGroup>
-          <Label for="form_example">Valid</Label>
-          <Input id="form_example" placeholder="Text" />
-        </FormGroup>
-      </Form>
-    );
-  }
-}
+const Example = () => (
+  <Form>
+    <FormGroup>
+      <Label for="form_example">Valid</Label>
+      <Input id="form_example" placeholder="Text" />
+    </FormGroup>
+  </Form>
+);
 ```
 
 ```jsx
 import React from 'react';
 import { Form, FormGroup, Label, Input } from '@afconsult/apollo';
 
-export default class Example extends React.PureComponent {
-  render() {
-    return (
-      <Form inline>
-        <FormGroup>
-          <Label for="form_inline_example">Valid</Label>
-          <Input id="form_inline_example" placeholder="Text" />
-        </FormGroup>
-      </Form>
-    );
-  }
-}
+const Example = () => (
+  <Form inline>
+    <FormGroup>
+      <Label for="form_inline_example">Valid</Label>
+      <Input id="form_inline_example" placeholder="Text" />
+    </FormGroup>
+  </Form>
+);
 ```
 
 ```jsx
 import React from 'react';
 import { Form, FormGroup, FormFeedback, Label, Input } from '@afconsult/apollo';
 
-export default class Example extends React.PureComponent {
-  render() {
-    return (
-      <Form>
-        <FormGroup>
-          <Label for="form_feedback_example">Valid</Label>
-          <Input id="form_feedback_example" placeholder="Text" />
-          <FormFeedback valid>Hurray! Something worked.</FormFeedback>
-        </FormGroup>
-      </Form>
-    );
-  }
-}
+const Example = () => (
+  <Form>
+    <FormGroup>
+      <Label for="form_feedback_example">Valid</Label>
+      <Input id="form_feedback_example" placeholder="Text" />
+      <FormFeedback valid>Hurray! Something worked.</FormFeedback>
+    </FormGroup>
+  </Form>
+);
 ```
 
 #### Props

src/components/Jumbotron/README.md

@@ -6,16 +6,12 @@
 import React from 'react';
 import { Jumbotron } from '@afconsult/apollo';
 
-const Example extends React.PureComponent {
-  render() {
-    return (
-      <Jumbotron>
-        <h1>Lorem ipsum dolor</h1>
-        <p>Put a bird on it ethical fanny pack shoreditch la croix.</p>
-      </Jumbotron>
-    );
-  }
-}
+const Example = () => (
+  <Jumbotron>
+    <h1>Lorem ipsum dolor</h1>
+    <p>Put a bird on it ethical fanny pack shoreditch la croix.</p>
+  </Jumbotron>
+);
 ```
 
 #### Props

src/components/Loader/README.md

@@ -8,11 +8,7 @@ Loader component is a wrapper of [React Lottie](https://www.npmjs.com/package/re
 import React from 'react';
 import { Loader } from '@afconsult/apollo';
 
-export default class Example extends React.PureComponent {
-  render() {
-    return <Loader width={25} height={25} />;
-  }
-}
+const Example = () => <Loader width={25} height={25} />;
 ```
 
 #### Props

src/components/Mention/README.md

@@ -6,15 +6,7 @@
 import React from 'react';
 import { Mention } from '@afconsult/apollo';
 
-const Example extends React.PureComponent {
-  render() {
-    return (
-      <Mention>
-        Stockholm
-      </Mention>
-    );
-  }
-}
+const Example = () => <Mention>Stockholm</Mention>;
 ```
 
 #### Props

src/components/Modal/README.md

@@ -8,7 +8,7 @@ The Modal component pass the `onToggle` prop via context to the [ModalHeader](..
 import React from 'react';
 import { Modal, ModalBody, ModalHeader, ModalFooter } from '@afconsult/apollo';
 
-export default class Example extends React.Component {
+class Example extends React.Component {
   constructor(props) {
     super(props);
     this.state = { open: false };

src/components/Tag/README.md

@@ -3,7 +3,7 @@
 ### Example
 
 ```jsx
-const Example extends React.Component {
+class Example extends React.Component {
   constructor(props) {
     super(props);
     this.state = { open: true };