chore(ui): Clean Breadcrumbs styles (#29361)

### Parent Issue

#29360

### Proposed Changes
* Apply breadcrumb styles only to DotCrumbtrailComponent without
affecting the base component
* Create a Storybook for DotCrumbtrailComponent
* Create a Storybook for Breadcrumbs from PrimeNG

### Checklist
- [x] Tests
- [x] Translations
- [x] Security Implications Contemplated (add notes if applicable)

### Problem 

The current Breadcumbs is used in the toolbar like this:

Toobar             |  Toolbar
:-------------------------:|:-------------------------:
<img width="697" alt="Screenshot 2024-07-26 at 9 46 41 AM"
src="https://github.com/user-attachments/assets/57919615-5738-4fb0-aae1-4beec4b3a22d">
| <img width="645" alt="Screenshot 2024-07-26 at 9 46 32 AM"
src="https://github.com/user-attachments/assets/9b5d34cb-6698-427a-ae3f-4311c9833406">

But these styles don't work well if we want to use a simple breadcrumb
in another section.

<img width="1056" alt="Screenshot 2024-07-26 at 9 52 20 AM"
src="https://github.com/user-attachments/assets/2d51f0be-96ad-4807-8015-cfef54423e9e">

### Screenshots

Now that we separate the styles, we keep the styles for the toolbar and
allow this component to be used in other sections without toolbar
styles.

DotCrumbtrailComponent

<img width="1037" alt="Screenshot 2024-07-26 at 9 59 31 AM"
src="https://github.com/user-attachments/assets/900ca684-3ec9-4f4b-b3a2-795a6c7137a9">

Breadcrumbs

<img width="1070" alt="Screenshot 2024-07-26 at 9 59 57 AM"
src="https://github.com/user-attachments/assets/05b4cad6-ac42-46e0-8c60-48728017ad30">

core-web/apps/dotcms-ui/src/app/view/components/dot-crumbtrail/dot-crumbtrail.component.scss

@@ -2,6 +2,12 @@
 
 ::ng-deep .p-breadcrumb {
     ul li {
+        .p-menuitem-link[href] {
+            .p-menuitem-text {
+                font-size: $font-size-lg;
+            }
+        }
+
         &:first-child a span.p-menuitem-text {
             color: $black;
             font-size: $font-size-lg;
@@ -11,8 +17,17 @@
         &:last-child a {
             pointer-events: none;
         }
-        &:nth-child(2) .p-icon-wrapper {
-            display: none;
+        &:nth-child(2) {
+            &::before {
+                content: "";
+                width: 1px;
+                height: 20px;
+                background: $color-palette-gray-500;
+                display: block;
+            }
+            .p-icon-wrapper {
+                display: none;
+            }
         }
     }
 }

core-web/apps/dotcms-ui/src/stories/dotcms/form/DotCMSForms.stories.ts

@@ -17,7 +17,7 @@ import { RippleModule } from 'primeng/ripple';
 import { SelectButtonModule } from 'primeng/selectbutton';
 
 export default {
-    title: 'DotCMS/Forms    ',
+    title: 'DotCMS/Forms',
 
     parameters: {
         docs: {

core-web/apps/dotcms-ui/src/stories/dotcms/menu/DotCrumbtrail.stories.ts

@@ -0,0 +1,65 @@
+import { Meta, StoryObj, moduleMetadata, componentWrapperDecorator } from '@storybook/angular';
+import { of } from 'rxjs';
+
+import { DotCrumbtrailComponent } from '@components/dot-crumbtrail/dot-crumbtrail.component';
+import { DotCrumbtrailModule } from '@components/dot-crumbtrail/dot-crumbtrail.module';
+import { DotCrumbtrailService } from '@components/dot-crumbtrail/service/dot-crumbtrail.service';
+
+type Args = DotCrumbtrailComponent;
+
+const meta: Meta<Args> = {
+    title: 'DotCMS/Menu/DotCrumbtrail',
+    component: DotCrumbtrailComponent,
+    decorators: [
+        moduleMetadata({
+            imports: [DotCrumbtrailModule],
+            providers: [
+                {
+                    provide: DotCrumbtrailService,
+                    useValue: {
+                        crumbTrail$: of([
+                            {
+                                label: 'Site',
+                                target: '_self',
+                                url: '#//pages'
+                            },
+                            {
+                                label: 'Pages',
+                                target: '_self',
+                                url: '#//pages'
+                            },
+                            {
+                                label: 'Apparel',
+                                target: '_self',
+                                url: ''
+                            }
+                        ])
+                    }
+                }
+            ]
+        }),
+        componentWrapperDecorator(
+            (story) => `<div class="card flex justify-content-center">${story}</div>`
+        )
+    ],
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component:
+                    'Breadcrumb provides contextual information about page hierarchy.: https://primefaces.org/primeng/showcase/#/breadcrumb'
+            }
+        }
+    },
+    render: () => {
+        return {
+            template: `<dot-crumbtrail class="max-w-full" />`
+        };
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<Args>;
+
+export const Default: Story = {};

core-web/apps/dotcms-ui/src/stories/primeng/menu/Breadcrumb.stories.ts

@@ -1,50 +1,60 @@
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import {
+    Meta,
+    StoryObj,
+    moduleMetadata,
+    componentWrapperDecorator,
+    argsToTemplate
+} from '@storybook/angular';
 
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { Breadcrumb, BreadcrumbModule } from 'primeng/breadcrumb';
 
-import { BreadcrumbModule } from 'primeng/breadcrumb';
+type Args = Breadcrumb;
 
-export default {
+const meta: Meta<Args> = {
     title: 'PrimeNG/Menu/Breadcrumbs',
+    component: Breadcrumb,
+    decorators: [
+        moduleMetadata({
+            imports: [BreadcrumbModule]
+        }),
+        componentWrapperDecorator(
+            (story) => `<div class="card flex justify-content-center">${story}</div>`
+        )
+    ],
     parameters: {
+        layout: 'centered',
         docs: {
             description: {
                 component:
                     'Breadcrumb provides contextual information about page hierarchy.: https://primefaces.org/primeng/showcase/#/breadcrumb'
             }
         }
     },
-    decorators: [
-        moduleMetadata({
-            imports: [BreadcrumbModule, BrowserAnimationsModule]
-        })
-    ],
     args: {
-        items: [
-            { label: 'Content Model', url: '#' },
-            { label: 'Content Types' },
-            { label: 'Store Product List', url: '#' }
-        ]
+        model: [
+            { label: 'Electronics', url: '/' },
+            { label: 'Computer', url: '/' },
+            { label: 'Accessories', url: '/' },
+            { label: 'Keyboard', url: '/' },
+            { label: 'Wireless', url: '/' }
+        ],
+        home: { icon: 'pi pi-home' }
+    },
+    argTypes: {
+        model: { description: 'Defines the data' }
+    },
+    render: (args: Args) => {
+        return {
+            props: {
+                ...args
+            },
+            template: `<p-breadcrumb class="max-w-full" ${argsToTemplate(args)} />`
+        };
     }
-} as Meta;
-
-const BreadcrumbTemplate = `<p-breadcrumb [model]="items"></p-breadcrumb>`;
-
-const Template: Story<{ label: string; url: string }> = (props: { label: string; url: string }) => {
-    const template = BreadcrumbTemplate;
-
-    return {
-        props,
-        template
-    };
 };
 
-export const Basic: Story = Template.bind({});
+export default meta;
 
-Basic.parameters = {
-    docs: {
-        source: {
-            code: BreadcrumbTemplate
-        }
-    }
-};
+type Story = StoryObj<Args>;
+
+export const Default: Story = {};

core-web/libs/dotcms-scss/angular/dotcms-theme/components/_breadcrumb.scss

@@ -1,25 +1,5 @@
 @use "variables" as *;
 
-.p-breadcrumb ul > .p-breadcrumb-chevron.pi {
-    color: $color-palette-gray-500;
-
-    &:not(:nth-child(2)) {
-        font-size: $font-size-xs;
-    }
-}
-
-.p-breadcrumb ul li:first-child {
-    font-size: $font-size-lg;
-}
-
-.p-breadcrumb ul li:nth-child(2)::before {
-    content: "";
-    width: 1px;
-    height: 20px;
-    background: $color-palette-gray-500;
-    display: block;
-}
-
 .p-breadcrumb ul li .p-menuitem-link {
     transition: none;
     border-radius: $border-radius-xs;
@@ -32,7 +12,7 @@
 }
 
 .p-breadcrumb ul li .p-menuitem-link[href] .p-menuitem-text {
-    font-size: $font-size-lg;
+    font-size: $font-size-default;
 
     &:hover {
         color: $color-palette-primary;