Merge pull request #538 from catho/QTM-619

docs[QTM-619]: Creates EvaluationForm Component

Author: alizeleal

stories/Introduction/Introduction.mdx

@@ -2,6 +2,7 @@ import { Meta } from '@storybook/addon-docs';
 
 import { Alert } from '../../components';
 import { Header } from '../shared'
+import EvaluationForm from '../../stories/shared/EvaluationForm'
 
 <Meta title="Introduction/GettingStarted" />
 
@@ -39,4 +40,6 @@ yarn add @catho/quantum
 import Button from '@catho/quantum/Button';
 
 export default () => <Button>Click here!</Buttom>;
-```
+```
+
+<EvaluationForm componentName="Introduction" />

stories/Typography/Components.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
 import styled from 'styled-components';
 
 import { Title, Subtitle, Blockquote } from '../../components/GlobalStyle';

stories/shared/EvaluationForm/index.jsx

@@ -0,0 +1,38 @@
+import { Unstyled } from '@storybook/addon-docs';
+import styled from 'styled-components';
+import Accordion from '../../../components/Accordion';
+
+const urlGenerator = (componentName) =>
+  `https://docs.google.com/forms/d/e/1FAIpQLSewdS_VhSt_JSFOxiuiIc-auEj0MQwn_P_WiXYhAEAE1DqJhg/viewform?entry.1112120969=${componentName}`;
+
+const IFrame = styled.iframe`
+  width: 100%;
+  height: 500px;
+  border: 0;
+`;
+
+const EvaluationForm = ({ componentName }) => (
+  <Unstyled>
+    <Accordion
+      items={[
+        {
+          content: (
+            <ul>
+              <li>
+                <IFrame
+                  title="Rate our Documentation"
+                  src={`${urlGenerator(componentName)}`}
+                >
+                  Carregando…
+                </IFrame>
+              </li>
+            </ul>
+          ),
+          title: 'Rate our Documentation ⭐ ',
+        },
+      ]}
+    />
+  </Unstyled>
+);
+
+export default EvaluationForm;