EOA-4108: update stories naming and dynamic permalink title

Author: dgonzalezts

src/components/col-toast/col-toast.mdx

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Canvas, Story, ArgTypes } from '@storybook/blocks';
-import * as stories from './col-toast.stories';
+import * as ColToastStories from './col-toast.stories';
 import LinkTo from '@storybook/addon-links/react';
 
-<Meta of={stories} />
+<Meta of={ColToastStories} />
 
 <div className="col-doc__wrapper">
   <div className="col-doc__container">
@@ -67,7 +67,7 @@ import LinkTo from '@storybook/addon-links/react';
 
     ## Component preview
 
-    <Canvas of={stories.InformationDefaultDuration} />
+    <Canvas of={ColToastStories.Default} />
 
     ## Variants
 
@@ -78,10 +78,10 @@ import LinkTo from '@storybook/addon-links/react';
     - **Warning**: Alerts that require attention.
     - **Danger**: Errors or critical alerts.
 
-    <Canvas of={stories.InformationDefaultDuration} />
-    <Canvas of={stories.Success} />
-    <Canvas  of={stories.Warning}/>
-    <Canvas of={stories.Danger} />
+    <Canvas of={ColToastStories.Default} />
+    <Canvas of={ColToastStories.Success} />
+    <Canvas  of={ColToastStories.Warning}/>
+    <Canvas of={ColToastStories.Danger} />
 
     ## Types
 
@@ -90,8 +90,8 @@ import LinkTo from '@storybook/addon-links/react';
     - **Informative**: Automatically closes after the specified `duration` in seconds (clamped between 3 and 6 seconds).
     - **Action-close**: Requires manual closing by the user via a close button.
 
-    <Canvas of={stories.Autoclose} />
-    <Canvas of={stories.ActionClose} />
+    <Canvas of={ColToastStories.Autoclose} />
+    <Canvas of={ColToastStories.ActionClose} />
 
     ## Using slots
 
@@ -103,14 +103,14 @@ import LinkTo from '@storybook/addon-links/react';
 
     Example with all slots used:
 
-    <Canvas of={stories.SlotsExample} />
+    <Canvas of={ColToastStories.SlotsExample} />
 
-    ## Custom duration 
+    ## Custom duration
 
     The `duration` property controls how long the toast stays visible (in seconds). It applies mainly to the `informative` type.
 
     Example custom duration of 10 seconds:
-    <Canvas of={stories.InformationCustomDuration} />
+    <Canvas of={ColToastStories.InformationCustomDuration} />
 
     ## Accessibility
 
@@ -124,10 +124,10 @@ import LinkTo from '@storybook/addon-links/react';
 
     ## Properties
 
-    <ArgTypes of={stories} />
+    <ArgTypes of={ColToastStories} />
 
     ## Interact with the component
 
-    You can test the toast's behavior, variants, types, and slots interactively in the <LinkTo title="feedback-toast"  story="interactive-toast-example">Canvas tab</LinkTo> section below.
+    You can test the toast's behavior, variants, types, and slots interactively in the <LinkTo title={ColToastStories.default.title}  story="default">Default</LinkTo> section below.
   </div>
 </div>

src/components/col-toast/col-toast.stories.tsx

@@ -122,17 +122,15 @@ const renderToast: Story['render'] = args => html`
     position=${ifDefined(args.position)}
     ?open=${args.open}
   >
-    ${args.icon
-    ? html`<col-icon slot="icon" name=${args.icon}></col-icon>`
-    : nothing}
+    ${args.icon ? html`<col-icon slot="icon" name=${args.icon}></col-icon>` : nothing}
     ${args.title
-    ? html`<col-typography variant="subheading" slot="title">${args.title}</col-typography>`
-    : nothing}
+      ? html`<col-typography variant="subheading" slot="title">${args.title}</col-typography>`
+      : nothing}
     ${args.default ?? nothing}
   </col-toast>
 `;
 
-export const InformationDefaultDuration: Story = {
+export const Default: Story = {
   render: renderToast,
   args: {
     variant: 'information',
@@ -149,19 +147,15 @@ export const ActionClose: Story = {
       color="primary"
       style="padding-bottom:10px;"
       @click=${() => {
-      const toast = document.getElementById('action-close') as ColToast;
-      if (toast) {
-        toast.open = true;
-      }
-    }}
+        const toast = document.getElementById('action-close') as ColToast;
+        if (toast) {
+          toast.open = true;
+        }
+      }}
     >
       Show Toast
     </col-button>
-    <col-toast
-      id="action-close"
-      variant=${args.variant}
-      type=${args.type}
-    >
+    <col-toast id="action-close" variant=${args.variant} type=${args.type}>
       <col-typography variant="subheading" slot="title">${args.title}</col-typography>
       ${args.default}
     </col-toast>
@@ -174,18 +168,17 @@ export const ActionClose: Story = {
   },
 };
 
-
 export const Autoclose: Story = {
   render: args => html`
     <col-button
       color="primary"
       style="padding-bottom:10px;"
       @click=${() => {
-      const toast = document.getElementById('autoclose') as ColToast;
-      if (toast) {
-        toast.open = true;
-      }
-    }}
+        const toast = document.getElementById('autoclose') as ColToast;
+        if (toast) {
+          toast.open = true;
+        }
+      }}
     >
       Show Toast
     </col-button>
@@ -232,8 +225,7 @@ export const Autoclose: Story = {
         language: 'html',
       },
     },
-  }
-
+  },
 };
 
 export const InformationCustomDuration: Story = {
@@ -242,11 +234,11 @@ export const InformationCustomDuration: Story = {
       color="primary"
       style="padding-bottom:10px;"
       @click=${() => {
-      const toast = document.getElementById('customDuration') as ColToast;
-      if (toast) {
-        toast.open = true;
-      }
-    }}
+        const toast = document.getElementById('customDuration') as ColToast;
+        if (toast) {
+          toast.open = true;
+        }
+      }}
     >
       Show Toast
     </col-button>
@@ -295,11 +287,9 @@ export const InformationCustomDuration: Story = {
         language: 'html',
       },
     },
-  }
-
+  },
 };
 
-
 export const Success: Story = {
   render: renderToast,
   args: {
@@ -361,19 +351,19 @@ export const InteractiveToastExample: Story = {
     title: 'Interactive Toast',
     default: 'You can control this toast using the controls and open it manually.',
   },
-  render: (args) => {
+  render: args => {
     const toastId = 'interactive-toast-example';
 
     return html`
       <col-button
         color="primary"
         style="padding-bottom:10px;"
         @click=${() => {
-        const toast = document.getElementById(toastId) as ColToast;
-        if (toast) {
-          toast.open = true;
-        }
-      }}
+          const toast = document.getElementById(toastId) as ColToast;
+          if (toast) {
+            toast.open = true;
+          }
+        }}
       >
         Show Toast
       </col-button>
@@ -419,4 +409,4 @@ export const InteractiveToastExample: Story = {
       name: 'Content',
     },
   },
-};
+};