chore[QTM-620]: EvalutationForm

stories/Accordion/Accordion.mdx

@@ -8,6 +8,8 @@ import {
   Default,
   KeepOnlyOneOpen,
 } from './Accordion.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm';
+
 
 <Meta title="Accordion" component={Accordion}  />
 
@@ -39,4 +41,6 @@ import Accordion from '@catho/quantum/Accordion';
 
 <Canvas>
   <Story of={KeepOnlyOneOpen} />
-</Canvas>
+</Canvas>
+
+<EvaluationForm componentName="Accordion" /> 

stories/Alert/Alert.mdx

@@ -12,6 +12,9 @@ import {
   WithIcon
 } from './Alert.stories.jsx';
 
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
+
 <Meta title="Alert" component={Alert}  />
 
 <Header title="Alert">
@@ -60,4 +63,6 @@ import Alert from '@catho/quantum/Alert';
 
 <Canvas>
   <Story of={WithIcon} />
-</Canvas>
+</Canvas>
+
+<EvaluationForm componentName="Alert" />

stories/AutoComplete/AutoComplete.mdx

@@ -2,6 +2,8 @@ import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
 import { Header } from '../shared';
 import AutoComplete from '../../components/AutoComplete';
 import { Default, Required, Disabled, WithHelperText, WithLabel, WithError, WithSkin } from './AutoComplete.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Forms/AutoComplete" component={AutoComplete}  />
 
@@ -64,3 +66,5 @@ import AutoComplete from '@catho/quantum/AutoComplete';
 <Canvas>
   <Story of={WithSkin}/>
 </Canvas>
+
+<EvaluationForm componentName="AutoComplete" />

stories/Avatar/Avatar.mdx

@@ -12,6 +12,8 @@ import {
   WithHrefAndToggleAndIcon,
   CombinedWithPopover,
 } from './Avatar.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Avatar" component={Avatar}  />
 
@@ -68,3 +70,5 @@ import Avatar from '@catho/quantum/Avatar';
 <Canvas>
   <Story of={CombinedWithPopover} />
 </Canvas>
+
+<EvaluationForm componentName="Avatar" />

stories/Badge/Badge.mdx

@@ -12,6 +12,8 @@ import {
   Dot,
   Inverted
 } from './Badge.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Badge" component={Badge} />
 
@@ -69,3 +71,4 @@ import Badge from '@catho/quantum/Badge';
   <Story of={Inverted} />
 </Canvas>
 
+<EvaluationForm componentName="Badge" />

stories/Breadcrumbs/Breadcrumbs.mdx

@@ -8,6 +8,9 @@ import {
   Default
 } from './Breadcrumbs.stories.jsx';
 
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
+
 <Meta title="Breadcrumbs" component={Breadcrumbs} />
 
 <Header title="Breadcrumbs">
@@ -36,3 +39,5 @@ import Breadcrumbs from '@catho/quantum/Breadcrumbs';
 <Canvas>
   <Story of={Default} />
 </Canvas>
+
+<EvaluationForm componentName="Breadcrumbs" />

stories/Breakpoints/Breakpoints.mdx

@@ -3,6 +3,8 @@ import { Meta } from '@storybook/addon-docs';
 import { Alert } from '../../components';
 import { Header } from '../shared'
 import { StyledDivExample } from './styles'
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Foundation/Breakpoints" />
 
@@ -61,4 +63,6 @@ const StyledDiv = styled.div`
 
 Test the div in different sizes:
 
-<StyledDivExample>Test me in different sizes =)</StyledDivExample>
+<StyledDivExample>Test me in different sizes =)</StyledDivExample>
+
+<EvaluationForm componentName="Breakpoints" />

stories/Button/Button.mdx

@@ -11,6 +11,9 @@ import {
   WithIcon
 } from './Button.stories.jsx';
 
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
+
 <Meta title="Button" component={Button}  />
 
 <Header title="Button">
@@ -76,3 +79,5 @@ The full catalogue of icons can be found [here](?path=/docs/foundation-icons--pa
 <Canvas>
   <Story of={WithIcon}/>
 </Canvas>
+
+<EvaluationForm componentName="Button" />

stories/Button/SocialButton.mdx

@@ -5,6 +5,8 @@ import {
   Google,
   Facebook
 } from './SocialButton.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Button/Social" component={SocialButton}  />
 
@@ -38,4 +40,6 @@ import SocialButton from '@catho/quantum/SocialButton';
 
 <Canvas>
   <Story of={Facebook}/>
-</Canvas>
+</Canvas>
+
+<EvaluationForm componentName="SocialButton" />

stories/Card/Card.mdx

@@ -6,6 +6,8 @@ import {
   CompoundComponentsList,
   AdvancedCard
 } from './Card.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Card" component={Card}  />
 
@@ -66,3 +68,5 @@ We provide a few components to build your Card.
 <Canvas>
   <Story of={AdvancedCard}/>
 </Canvas>
+
+<EvaluationForm componentName="Card" />

stories/Carousel/Carousel.mdx

@@ -4,6 +4,8 @@ import Carousel from '../../components/Carousel';
 import Alert from '../../components/Alert';
 import { Default, WithSmallCards, WithLargeCards, WithEllipsisForLongTexts } from './Carousel.stories.jsx';
 import { Header } from '../shared';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Carousel" component={Carousel}  />
 
@@ -83,3 +85,5 @@ import Carousel from '@catho/quantum/Carousel';
 <Canvas>
   <Story of={WithEllipsisForLongTexts}/>
 </Canvas>
+
+<EvaluationForm componentName="Carousel" />

stories/ChargeBar/ChargeBar.mdx

@@ -3,6 +3,8 @@ import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
 import { Header } from '../shared';
 import ChargeBar from '../../components/ChargeBar';
 import { Default, WithSkin, WithProgressPercent, WithLabel } from './ChargeBar.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="ChargeBar" component={ChargeBar}  />
 
@@ -47,3 +49,5 @@ import ChargeBar from '@catho/quantum/ChargeBar';
 <Canvas>
   <Story of={WithLabel}/>
 </Canvas>
+
+<EvaluationForm componentName="ChargeBar" />

stories/Checkbox/Checkbox.mdx

@@ -9,6 +9,8 @@ import {
   Checked,
   Disabled,
 } from './Checkbox.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Forms/Checkbox" component={Checkbox}  />
 
@@ -46,4 +48,6 @@ import Checkbox from '@catho/quantum/Checkbox';
 
 <Canvas>
   <Story of={Disabled} />
-</Canvas>
+</Canvas>
+
+<EvaluationForm componentName="Checkbox" />

stories/Checkbox/CheckboxGroup.mdx

@@ -14,6 +14,9 @@ import {
   ControlledGroup,
 } from './CheckboxGroup.stories.jsx';
 
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
+
 <Meta title="Forms/Checkbox/CheckboxGroup" component={CheckboxGroup}  />
 
 <Header title="Checkbox Group">
@@ -80,4 +83,6 @@ import CheckboxGroup from '@catho/quantum/Checkbox/CheckboxGroup';
 
 <Canvas>
   <Story of={ControlledGroup} />
-</Canvas>
+</Canvas>
+
+<EvaluationForm componentName="CheckboxGroup" />

stories/Colors/Colors.mdx

@@ -2,6 +2,8 @@ import { Meta } from '@storybook/addon-docs';
 
 import { Header } from '../shared'
 import Colors from './Colors'
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Foundation/Colors" />
 
@@ -37,3 +39,5 @@ console.log(Colors.secondary['500'])
 ```
 ## <a id="examples"></a>Examples
 <Colors />
+
+<EvaluationForm componentName="Colors" />

stories/Dialog/Dialog.mdx

@@ -6,6 +6,9 @@ import {
   CloseOnTime,
   DisableClickOutside
 } from './Dialog.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
+
 
 <Meta title="Dialog" component={Dialog}  />
 
@@ -93,3 +96,6 @@ export default function SimpleDialog() {
 <Canvas withSource="none">
   <Story of={DisableClickOutside}/>
 </Canvas>
+
+
+<EvaluationForm componentName="Dialog" />

stories/Dropdown/Dropdown.mdx

@@ -14,6 +14,9 @@ import {
   Controlled
 } from './Dropdown.stories.jsx';
 
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
+
 <Meta title="Forms/Dropdown" component={Dropdown}  />
 
 <Header title="Dropdown">
@@ -99,4 +102,6 @@ import Dropdown from '@catho/quantum/Dropdown';
 
 <Canvas>
   <Story of={Controlled}/>
-</Canvas>
+</Canvas>
+
+<EvaluationForm componentName="Dropdown" />

stories/DropdownLight/DropdownLight.mdx

@@ -18,6 +18,9 @@ import {
   SelectedItemControlled
 } from './DropdownLight.stories.jsx';
 
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
+
 <Meta title="Forms/DropdownLight" component={DropdownLight}  />
 
 <Header title="DropdownLight">
@@ -106,3 +109,4 @@ import DropdownLight from '@catho/quantum/DropdownLight';
   <Story of={SelectedItemControlled}/>
 </Canvas>
 
+<EvaluationForm componentName="DropdownLight" />

stories/Form/Form.mdx

@@ -8,6 +8,9 @@ import {
   WithCustomValidation
 } from './Form.stories.jsx';
 
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
+
 <Meta title="Forms/Form" component={Form}  />
 
 <Header title="Form">
@@ -60,4 +63,6 @@ messages.
 
 <Canvas>
   <Story of={WithCustomValidation}/>
-</Canvas>
+</Canvas>
+
+<EvaluationForm componentName="Form" />

stories/Grid/Grid.mdx

@@ -3,6 +3,8 @@ import { Meta } from '@storybook/addon-docs';
 
 import Header from '../shared/Header';
 import { SizesTable, HorizontalExample, MobileDesktopExample, NoGuttersExample, HideExample, OffsetExample, OffsetWithTwoColumnsExample } from './Grid';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Foundation/Grid" />
 
@@ -242,4 +244,7 @@ When setting a "offset" value, it is important to consider the space occupied by
 
 In the example above, the space occupied by the first column is the sum of the "small" and "small-offset" props. The result must also be added to the desired gap value for the column.
 Therefore, the value of the "offset" prop of the second column is composed of:
-2 ("small" of the 1st column) + 1 ("small-offset" of the 1st column) + 2 (desired gap betwen the 2nd column) = 5.
+2 ("small" of the 1st column) + 1 ("small-offset" of the 1st column) + 2 (desired gap betwen the 2nd column) = 5.
+
+
+<EvaluationForm componentName="Grid" />

stories/Hamburger/Hamburguer.mdx

@@ -2,6 +2,8 @@ import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
 import { Header } from '../shared';
 import { Hamburger } from '../../components';
 import { Default, Opened, Inverted, WithNotificationIcon } from './Hamburger.stories.jsx';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Hamburger" component={Hamburger} />
 
@@ -45,4 +47,6 @@ import { Hamburger } from '@catho/quantum/Hamburger';
 
 <Canvas>
   <Story of={WithNotificationIcon} />
-</Canvas>
+</Canvas>
+
+<EvaluationForm componentName="Hamburguer" />

stories/Hooks/Hooks.mdx

@@ -2,11 +2,14 @@ import { Meta } from '@storybook/addon-docs';
 
 import { Header } from '../shared';
 import { Alert } from '../../components';
+import EvaluationForm from '../../stories/shared/EvaluationForm';
+
 
 <Meta title="Hooks/useMaxWithMediaQuery" />
 
 <Header title="UseMaxWithMediaQuery" />
 
+
 - [Importing](#importing)
 - [Usage](#usage)
 
@@ -64,4 +67,6 @@ const Component = () => {
 }
 
 export default Component;
-```
+```
+
+<EvaluationForm componentName="Hooks/useMaxWithMediaQuery" /> 

stories/Icon/Icon.mdx

@@ -3,6 +3,8 @@ import { Meta, Story } from '@storybook/addon-docs';
 import Header from '../shared/Header';
 import { ExampleIcons, ExampleIncorrectIcons } from './ExampleIcons';
 import Catalogue from './Catalogue';
+import EvaluationForm from '../../stories/shared/EvaluationForm'
+
 
 <Meta title="Foundation/Icons" />
 
@@ -65,4 +67,6 @@ element and no icon will render.
 
 ### Available Icons
 
-<Catalogue/>
+<Catalogue/>
+
+<EvaluationForm componentName="Icons" />