docs: fix alert stories

Author: phoskee

stories/Components/Alert.stories.tsx

@@ -1,87 +1,86 @@
-import { Meta, StoryObj } from '@storybook/react';
-import React, { useState } from 'react';
-import { componentColor } from '../../.storybook/stories-helper';
-import { Alert } from '../../src';
-
-const meta: Meta<typeof Alert> = {
-  title: 'Documentazione/Componenti/Alert',
-  component: Alert,
-  args: {
-    color: 'success'
-  },
-  argTypes: {
-    color: {
-      control: 'select',
-      options: componentColor
-    }
-  }
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Alert>;
-
-export const _EsempiInterattivi: Story = {
-  render: ({ ...args }) => (
-    <Alert {...args}>
-      Questo è un alert di<b>{args.color}</b>!
-    </Alert>
-  )
-};
-
-export const _LinkEvidenziato: Story = {
-  render: ({ ...args }) => (
-    <Alert {...args}>
-      Questo è un alert con un esempio di
-      <a href='#' className='alert-link'>
-        link
-      </a>
-      evidenziato.
-    </Alert>
-  ),
-  args: {
-    color: 'danger'
-  }
-};
-
-export const _ContenutoAggiuntivo: Story = {
-  render: ({ ...args }) => (
-    <Alert {...args}>
-      <h4 className='alert-heading'>Avviso di successo!</h4>
-      <p>
-        Stai leggendo questo importante messaggio di avviso di successo. Questo testo di esempio sarà più a lungo in
-        modo da poter vedere come funzioni la spaziatura all&#39;interno di un avviso con questo tipo di contenuto.
-      </p>
-      <hr />
-      <p className='mb-0'>
-        Quando necessario, assicurarti di inserire le utilità di margine per mantenere gli spazi equilibrati.
-      </p>
-    </Alert>
-  )
-};
-
-const ChiusuraControllataWithHooks = ({ ...args }) => {
-  const [open, setOpen] = useState(true);
-
-  const closeAlert = () => setOpen(false);
-
-  return (
-    <div>
-      <Alert {...args} isOpen={open} toggle={closeAlert}>
-        <strong>Attenzione</strong>Alcuni campi inseriti sono da controllare.
-      </Alert>
-    </div>
-  );
-};
-
-export const ChiusuraControllata: Story = {
-  render: (args) => <ChiusuraControllataWithHooks {...args} />,
-  parameters: {
-    docs: {
-      canvas: { sourceState: 'none' }
-    }
-  },
-  args: {
-    color: 'warning'
-  }
-};
+import { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { componentColor } from '../../.storybook/stories-helper';
+import { Alert } from '../../src';
+
+const meta: Meta<typeof Alert> = {
+  title: 'Documentazione/Componenti/Alert',
+  component: Alert,
+  args: {
+    color: 'success'
+  },
+  argTypes: {
+    color: {
+      control: 'select',
+      options: componentColor
+    }
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Alert>;
+
+export const _EsempiInterattivi: Story = {
+  render: ({ ...args }) => (
+    <Alert {...args}>
+      Questo è un alert di <b>{args.color}</b>!
+    </Alert>
+  )
+};
+
+export const _LinkEvidenziato: Story = {
+  render: ({ ...args }) => (
+    <Alert {...args}>
+      Questo è un alert con un esempio di{' '}
+      <a href='#' className='alert-link'>
+        link
+      </a>
+    </Alert>
+  ),
+  args: {
+    color: 'danger'
+  }
+};
+
+export const _ContenutoAggiuntivo: Story = {
+  render: ({ ...args }) => (
+    <Alert {...args}>
+      <h4 className='alert-heading'>Avviso di successo!</h4>
+      <p>
+        Stai leggendo questo importante messaggio di avviso di successo. Questo testo di esempio sarà più a lungo in
+        modo da poter vedere come funzioni la spaziatura all&#39;interno di un avviso con questo tipo di contenuto.
+      </p>
+      <hr />
+      <p className='mb-0'>
+        Quando necessario, assicurarti di inserire le utilità di margine per mantenere gli spazi equilibrati.
+      </p>
+    </Alert>
+  )
+};
+
+const ChiusuraControllataWithHooks = ({ ...args }) => {
+  const [open, setOpen] = useState(true);
+
+  const closeAlert = () => setOpen(false);
+
+  return (
+    <div>
+      <Alert {...args} isOpen={open} toggle={closeAlert}>
+        <strong>Attenzione:</strong> Alcuni campi inseriti sono da controllare.
+      </Alert>
+    </div>
+  );
+};
+
+export const ChiusuraControllata: Story = {
+  render: (args) => <ChiusuraControllataWithHooks {...args} />,
+  parameters: {
+    docs: {
+      canvas: { sourceState: 'none' }
+    }
+  },
+  args: {
+    color: 'warning'
+  }
+};

test/__snapshots__/Storybook.test.tsx.snap

@@ -583,7 +583,7 @@ exports[`Stories Snapshots Documentazione/Componenti/Alert _EsempiInterattivi 1`
     class="alert alert-success fade"
     role="alert"
   >
-    Questo è un alert di
+    Questo è un alert di 
     <b>
       success
     </b>
@@ -599,13 +599,13 @@ exports[`Stories Snapshots Documentazione/Componenti/Alert _LinkEvidenziato 1`]
     role="alert"
   >
     Questo è un alert con un esempio di
+     
     <a
       class="alert-link"
       href="#"
     >
       link
     </a>
-    evidenziato.
   </div>
 </div>
 `;
@@ -623,9 +623,9 @@ exports[`Stories Snapshots Documentazione/Componenti/Alert ChiusuraControllata 1
         type="button"
       />
       <strong>
-        Attenzione
+        Attenzione:
       </strong>
-      Alcuni campi inseriti sono da controllare.
+       Alcuni campi inseriti sono da controllare.
     </div>
   </div>
 </div>