feat: add go back component

src/GoBack/GoBack.tsx

@@ -0,0 +1,35 @@
+import React, { ReactChild } from 'react';
+import { Icon } from '../Icon/Icon';
+import classNames from 'classnames';
+import { Button } from '../Button/Button';
+
+export interface GoBackProps {
+  /**
+   * Optional classnames to pass to the element
+   */
+  className?: string;
+  /**
+   * Render the link variant of the go back button
+   */
+  link?: boolean;
+  /**
+   * Render the up variant of the go back button
+   */
+  up?: boolean;
+  children: ReactChild;
+}
+
+const goBack = () => {
+  window.history.back();
+};
+
+export const GoBack = ({ className, link = false, up = false, children }: GoBackProps) => {
+  const Tag = link ? 'a' : Button;
+
+  return (
+    <Tag className={classNames(className, 'go-back')} color='primary' onClick={goBack}>
+      <Icon color={link ? 'primary' : 'white'} icon={up ? 'it-arrow-up' : 'it-arrow-left'} />
+      {children}
+    </Tag>
+  );
+};

src/index.tsx

@@ -102,6 +102,7 @@ export { Icon, iconsList as icons, preloadIcons, clearIconCache } from './Icon/I
 export { Input } from './Input/Input';
 export { InputContainer } from './Input/InputContainer';
 export { TextArea } from './Input/TextArea';
+export { GoBack } from './GoBack/GoBack';
 export { LinkList } from './LinkList/LinkList';
 export { LinkListItem } from './LinkList/LinkListItem';
 export { Megamenu } from './Megamenu/Megamenu';

stories/BackToTop/BackToTop.stories.mdx

@@ -45,7 +45,7 @@ Aggiungendo la prop `shadow` al componente si aggiunge un'ombra al pulsante.
 Aggiungendo la prop `dark` al componente si ottiene un pulsante utilizzabile su sfondo scuro.
 
 <Canvas>
-  <div class='d-flex align-items-center p-4 neutral-1-bg-a8'>
+  <div className='d-flex align-items-center p-4 neutral-1-bg-a8'>
     <BackToTop dark />
     <BackToTop dark small />
   </div>
@@ -56,7 +56,7 @@ Aggiungendo la prop `dark` al componente si ottiene un pulsante utilizzabile su
 Aggiungendo le prop `dark` e `shadow` al componente si ottiente un pulsante con ombra utilizzabile su sfondo scuro.
 
 <Canvas>
-  <div class='d-flex align-items-center p-4 neutral-1-bg-a8'>
+  <div className='d-flex align-items-center p-4 neutral-1-bg-a8'>
     <BackToTop dark shadow />
     <BackToTop dark shadow small />
   </div>

stories/GoBack/GoBack.stories.mdx

@@ -0,0 +1,33 @@
+import { Meta, Canvas } from '@storybook/addon-docs';
+import { GoBack } from '../../src';
+
+<Meta title='Documentazione/Menu di navigazione/Torna Indietro' />
+
+# Torna indietro
+
+## Esempio link
+
+Per visualizzare il Back to top nella posizione corretta è necessario scrollare questa pagina. L'esempio del codice
+sottostante sarà visibile solo a scroll avvenuto.
+
+<Canvas>
+  <GoBack link>Torna indietro</GoBack>
+</Canvas>
+
+### Pulsanti
+
+Aggiungendo la prop `up` si ottiene l'icona che punta in alto.
+
+<Canvas>
+  <GoBack>Torna indietro</GoBack>
+  <GoBack up>Livello superiore</GoBack>
+</Canvas>
+
+### Pulsanti con sola icona
+
+Non specificando il testo, il pulsante rimane con sola icona.
+
+<Canvas>
+  <GoBack />
+  <GoBack up />
+</Canvas>