From 261c5833b4d8004a4bef1d2f2473b15c5c15d7d9 Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <myrta.sakellariou@gmail.com>
Date: Mon, 14 Oct 2024 17:10:21 +0200
Subject: [PATCH 01/10] feat(Styles): updated float utility

---
 .changeset/slimy-rockets-pull.md              |  5 ++
 .../snapshots/utilities/float.snapshot.ts     |  7 ++
 .../stories/utilities/float/float.docs.mdx    | 37 +++++++++
 .../stories/utilities/float/float.module.scss |  7 ++
 .../utilities/float/float.snapshot.stories.ts | 26 ++++++
 .../stories/utilities/float/float.stories.ts  | 82 +++++++++++++++++++
 .../stories/utilities/float/float.styles.scss |  8 ++
 .../src/themes/bootstrap/_utilities.scss      |  4 +
 packages/styles/src/utilities/_variables.scss |  9 ++
 9 files changed, 185 insertions(+)
 create mode 100644 .changeset/slimy-rockets-pull.md
 create mode 100644 packages/documentation/cypress/snapshots/utilities/float.snapshot.ts
 create mode 100644 packages/documentation/src/stories/utilities/float/float.docs.mdx
 create mode 100644 packages/documentation/src/stories/utilities/float/float.module.scss
 create mode 100644 packages/documentation/src/stories/utilities/float/float.snapshot.stories.ts
 create mode 100644 packages/documentation/src/stories/utilities/float/float.stories.ts
 create mode 100644 packages/documentation/src/stories/utilities/float/float.styles.scss

diff --git a/.changeset/slimy-rockets-pull.md b/.changeset/slimy-rockets-pull.md
new file mode 100644
index 0000000000..afce8a00cc
--- /dev/null
+++ b/.changeset/slimy-rockets-pull.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Updated float utility (styles & documentation)
diff --git a/packages/documentation/cypress/snapshots/utilities/float.snapshot.ts b/packages/documentation/cypress/snapshots/utilities/float.snapshot.ts
new file mode 100644
index 0000000000..ffeee5f3ff
--- /dev/null
+++ b/packages/documentation/cypress/snapshots/utilities/float.snapshot.ts
@@ -0,0 +1,7 @@
+describe('Float', () => {
+  it('float', () => {
+    cy.visit('/iframe.html?id=snapshots--float');
+    cy.get('.float-example', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Float', { widths: [320, 1440] });
+  });
+});
diff --git a/packages/documentation/src/stories/utilities/float/float.docs.mdx b/packages/documentation/src/stories/utilities/float/float.docs.mdx
new file mode 100644
index 0000000000..64b701deea
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/float/float.docs.mdx
@@ -0,0 +1,37 @@
+import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
+import { formatAsMap } from '@/utils/sass-export';
+import * as FloatStories from './float.stories';
+
+<Meta of={FloatStories} />
+
+# Float
+
+<div className="lead">
+  Use `float-start`, `float-end`, or `float-none` to easily float elements.
+</div>
+
+## Properties
+
+- `float-start`: Floats the element to the left (in LTR).
+- `float-end`: Floats the element to the right (in LTR).
+- `float-none`: Removes floating from the element.
+
+### Relative to breakpoints
+
+<div className="alert alert-info">
+  The `float-{breakpoint}-{position}` classes provide control over floating elements at specific
+  breakpoints, enabling you to float elements or remove floating based on the screen size.
+</div>
+
+> - `*-sm-*`
+> - `*-md-*`
+> - `*-lg-*`
+> - `*-xl-*`
+> - `*-xxl-*`
+
+#### Example
+
+<Canvas sourceState="shown" of={FloatStories.Float} />
+<div className="hide-col-default">
+  <Controls of={FloatStories.Float} />
+</div>
diff --git a/packages/documentation/src/stories/utilities/float/float.module.scss b/packages/documentation/src/stories/utilities/float/float.module.scss
new file mode 100644
index 0000000000..e747d1f7da
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/float/float.module.scss
@@ -0,0 +1,7 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+:export {
+  @each $key, $value in post.$post-sizes {
+    #{$key}: #{$value};
+  }
+}
diff --git a/packages/documentation/src/stories/utilities/float/float.snapshot.stories.ts b/packages/documentation/src/stories/utilities/float/float.snapshot.stories.ts
new file mode 100644
index 0000000000..b276f4a63b
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/float/float.snapshot.stories.ts
@@ -0,0 +1,26 @@
+import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import meta, { FloatSnapshot as F } from './float.stories';
+import './float.styles.scss';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const Float: Story = {
+  render: (_args: Args, context: StoryContext) => {
+    const snapshotArgs = {
+      floatPosition: '',
+      floatBreakPoint: '',
+    };
+
+    return html`
+      <div class="float-example">${F.render?.({ ...F.args, ...snapshotArgs }, context)}</div>
+    `;
+  },
+};
diff --git a/packages/documentation/src/stories/utilities/float/float.stories.ts b/packages/documentation/src/stories/utilities/float/float.stories.ts
new file mode 100644
index 0000000000..194f7d9ce1
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/float/float.stories.ts
@@ -0,0 +1,82 @@
+import type { Args, StoryObj } from '@storybook/web-components';
+import { html } from 'lit/static-html.js';
+import { MetaExtended } from '@root/types';
+import './float.styles.scss';
+
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+
+const meta: MetaExtended = {
+  id: 'ccf092c1-f0ab-49a1-a612-87e5be23adde',
+  title: 'Utilities/Float',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Float: Story = {
+  argTypes: {
+    floatPosition: {
+      name: 'float',
+      description: 'Sets the float. ',
+      control: {
+        type: 'select',
+      },
+      options: ['start', 'end', 'none'],
+      table: {
+        category: 'Add float',
+      },
+    },
+    floatBreakPoint: {
+      name: 'float',
+      description: 'Sets the float for a specific breakpoint. ',
+      control: {
+        type: 'select',
+      },
+      options: ['', 'sm', 'md', 'lg', 'xl', 'xxl'],
+      table: {
+        category: 'Add float',
+      },
+    },
+  },
+  args: {
+    floatPosition: '',
+    floatBreakPoint: '',
+  },
+  render: (args: Args) => {
+    const float = args.floatPosition !== '' ? `float` : '';
+    const floatPosition = args.floatPosition !== '' ? `-${args.floatPosition}` : '';
+    const floatBreakPoint = args.floatBreakPoint !== '' ? `-${args.floatBreakPoint}` : '';
+
+    return html`
+      <div class="float-example">
+        <div class="${float}${floatBreakPoint}${floatPosition}">Sample Text</div>
+      </div>
+    `;
+  },
+};
+
+export const FloatSnapshot: Story = {
+  render: () => {
+    const samples = [
+      ['null', 'none'],
+      ['null', 'start'],
+      ['null', 'end'],
+      ['sm', 'start'],
+      ['md', 'end'],
+      ['lg', 'none'],
+      ['xl', 'start'],
+      ['xxl', 'none'],
+    ];
+
+    return html`
+      ${samples.map(([floatBreakPoint, floatPosition]) => {
+        const fbp = floatBreakPoint !== 'null' ? `${floatBreakPoint}-` : '';
+        return html`
+          <div class="float-${fbp}${floatPosition}">Sample Text</div>
+          <div class="clearfix"></div>
+        `;
+      })}
+    `;
+  },
+};
diff --git a/packages/documentation/src/stories/utilities/float/float.styles.scss b/packages/documentation/src/stories/utilities/float/float.styles.scss
new file mode 100644
index 0000000000..83f4b2093f
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/float/float.styles.scss
@@ -0,0 +1,8 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+.float-example {
+  .content {
+    background-color: post.$white;
+    border: 1px solid post.$gray-40;
+  }
+}
diff --git a/packages/styles/src/themes/bootstrap/_utilities.scss b/packages/styles/src/themes/bootstrap/_utilities.scss
index 7920d02940..9e69f6cb6a 100644
--- a/packages/styles/src/themes/bootstrap/_utilities.scss
+++ b/packages/styles/src/themes/bootstrap/_utilities.scss
@@ -39,4 +39,8 @@ $utilities: map.remove($utilities, 'justify-content');
 
 $utilities: map.remove($utilities, 'display');
 
+$utilities: map.remove($utilities, 'float-start');
+$utilities: map.remove($utilities, 'float-end');
+$utilities: map.remove($utilities, 'float-none');
+
 @import 'bootstrap/scss/utilities/api';
diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss
index d39a938383..1d897650c0 100644
--- a/packages/styles/src/utilities/_variables.scss
+++ b/packages/styles/src/utilities/_variables.scss
@@ -22,6 +22,15 @@
 */
 
 $utilities: (
+  'float': (
+    responsive: true,
+    property: float,
+    values: (
+      start: left,
+      end: right,
+      none: none,
+    ),
+  ),
   'margin': (
     responsive: true,
     property: margin,

From 699a336981a3d5e23b44fcd1678a0a092137a197 Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <66249294+myrta2302@users.noreply.github.com>
Date: Wed, 16 Oct 2024 07:58:56 +0200
Subject: [PATCH 02/10] Update slimy-rockets-pull.md

---
 .changeset/slimy-rockets-pull.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.changeset/slimy-rockets-pull.md b/.changeset/slimy-rockets-pull.md
index afce8a00cc..932624b161 100644
--- a/.changeset/slimy-rockets-pull.md
+++ b/.changeset/slimy-rockets-pull.md
@@ -1,5 +1,6 @@
 ---
 '@swisspost/design-system-styles': minor
+'@swisspost/design-system-documentation': minor
 ---
 
-Updated float utility (styles & documentation)
+Updated the utility classes for float

From 10b6aa8b2716b1644d9d5c6ef1c2cbd41204e051 Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <myrta.sakellariou@gmail.com>
Date: Wed, 16 Oct 2024 11:38:29 +0200
Subject: [PATCH 03/10] chore(documentation): deleted  float.module

---
 .../src/stories/utilities/float/float.module.scss          | 7 -------
 1 file changed, 7 deletions(-)
 delete mode 100644 packages/documentation/src/stories/utilities/float/float.module.scss

diff --git a/packages/documentation/src/stories/utilities/float/float.module.scss b/packages/documentation/src/stories/utilities/float/float.module.scss
deleted file mode 100644
index e747d1f7da..0000000000
--- a/packages/documentation/src/stories/utilities/float/float.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@use '@swisspost/design-system-styles/core' as post;
-
-:export {
-  @each $key, $value in post.$post-sizes {
-    #{$key}: #{$value};
-  }
-}

From b0997eec670d40e7296f50070c3e5906b036de4f Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <66249294+myrta2302@users.noreply.github.com>
Date: Thu, 17 Oct 2024 08:22:29 +0200
Subject: [PATCH 04/10] Update .changeset/slimy-rockets-pull.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Oliver Schürch <oliver.schuerch@post.ch>
---
 .changeset/slimy-rockets-pull.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/slimy-rockets-pull.md b/.changeset/slimy-rockets-pull.md
index 932624b161..e988b4f957 100644
--- a/.changeset/slimy-rockets-pull.md
+++ b/.changeset/slimy-rockets-pull.md
@@ -3,4 +3,4 @@
 '@swisspost/design-system-documentation': minor
 ---
 
-Updated the utility classes for float
+Internalized bootstraps floating utilities into the design system.

From de36a66a112d84db21c673af2f3c93c939fe387c Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <66249294+myrta2302@users.noreply.github.com>
Date: Thu, 17 Oct 2024 08:22:40 +0200
Subject: [PATCH 05/10] Update
 packages/documentation/src/stories/utilities/float/float.docs.mdx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Oliver Schürch <oliver.schuerch@post.ch>
---
 .../src/stories/utilities/float/float.docs.mdx         | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/documentation/src/stories/utilities/float/float.docs.mdx b/packages/documentation/src/stories/utilities/float/float.docs.mdx
index 64b701deea..319730704e 100644
--- a/packages/documentation/src/stories/utilities/float/float.docs.mdx
+++ b/packages/documentation/src/stories/utilities/float/float.docs.mdx
@@ -23,11 +23,11 @@ import * as FloatStories from './float.stories';
   breakpoints, enabling you to float elements or remove floating based on the screen size.
 </div>
 
-> - `*-sm-*`
-> - `*-md-*`
-> - `*-lg-*`
-> - `*-xl-*`
-> - `*-xxl-*`
+> - `float-sm-{start|end|none}`
+> - `float-md-{start|end|none}`
+> - `float-lg-{start|end|none}`
+> - `float-xl-{start|end|none}`
+> - `float-xxl-{start|end|none}`
 
 #### Example
 

From 74a5cd545ea6256e1ca17f6bad43be59abaf7114 Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <myrta.sakellariou@gmail.com>
Date: Thu, 17 Oct 2024 08:30:11 +0200
Subject: [PATCH 06/10] chore(styles): review comments update

---
 .../src/stories/utilities/float/float.docs.mdx        | 11 +++++------
 packages/styles/src/utilities/_variables.scss         |  4 ++--
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/documentation/src/stories/utilities/float/float.docs.mdx b/packages/documentation/src/stories/utilities/float/float.docs.mdx
index 64b701deea..23e3c00697 100644
--- a/packages/documentation/src/stories/utilities/float/float.docs.mdx
+++ b/packages/documentation/src/stories/utilities/float/float.docs.mdx
@@ -1,5 +1,4 @@
 import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
-import { formatAsMap } from '@/utils/sass-export';
 import * as FloatStories from './float.stories';
 
 <Meta of={FloatStories} />
@@ -23,11 +22,11 @@ import * as FloatStories from './float.stories';
   breakpoints, enabling you to float elements or remove floating based on the screen size.
 </div>
 
-> - `*-sm-*`
-> - `*-md-*`
-> - `*-lg-*`
-> - `*-xl-*`
-> - `*-xxl-*`
+> - `float-sm-{start|end|none}`
+> - `float-md-{start|end|none}`
+> - `float-lg-{start|end|none}`
+> - `float-xl-{start|end|none}`
+> - `float-xxl-{start|end|none}`
 
 #### Example
 
diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss
index 1d897650c0..1c4e22bfca 100644
--- a/packages/styles/src/utilities/_variables.scss
+++ b/packages/styles/src/utilities/_variables.scss
@@ -26,8 +26,8 @@ $utilities: (
     responsive: true,
     property: float,
     values: (
-      start: left,
-      end: right,
+      start: inline-start,
+      end: inline-end,
       none: none,
     ),
   ),

From f9f144b77a5ae0db81b868b3328ac62ff96b2422 Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <myrta.sakellariou@gmail.com>
Date: Thu, 17 Oct 2024 09:59:14 +0200
Subject: [PATCH 07/10] review comments update

---
 .../utilities/float/float.snapshot.stories.ts | 28 ++++++++---
 .../stories/utilities/float/float.stories.ts  | 46 ++++---------------
 .../stories/utilities/float/float.styles.scss |  8 ----
 3 files changed, 31 insertions(+), 51 deletions(-)
 delete mode 100644 packages/documentation/src/stories/utilities/float/float.styles.scss

diff --git a/packages/documentation/src/stories/utilities/float/float.snapshot.stories.ts b/packages/documentation/src/stories/utilities/float/float.snapshot.stories.ts
index b276f4a63b..61e8d44bdf 100644
--- a/packages/documentation/src/stories/utilities/float/float.snapshot.stories.ts
+++ b/packages/documentation/src/stories/utilities/float/float.snapshot.stories.ts
@@ -1,7 +1,8 @@
 import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
-import meta, { FloatSnapshot as F } from './float.stories';
+import meta, { Float as F } from './float.stories';
 import './float.styles.scss';
+import { bombArgs } from '@/utils';
 
 const { id, ...metaWithoutId } = meta;
 
@@ -12,15 +13,28 @@ export default {
 
 type Story = StoryObj;
 
+console.log(F.argTypes?.floatPosition?.options);
 export const Float: Story = {
   render: (_args: Args, context: StoryContext) => {
-    const snapshotArgs = {
-      floatPosition: '',
-      floatBreakPoint: '',
-    };
-
     return html`
-      <div class="float-example">${F.render?.({ ...F.args, ...snapshotArgs }, context)}</div>
+      <div class="float-example">
+        ${['bg-white', 'bg-dark'].map(
+          bg => html`
+            <div class="${bg} p-16">
+              ${(F.argTypes?.floatBreakPoint?.options ?? []).map((breakpoint: string) => {
+                return html`
+                  <h2>Breakpoint ${breakpoint}</h2>
+                  <div>
+                    ${bombArgs({
+                      floatPosition: [...(F.argTypes?.floatPosition?.options ?? [])],
+                    }).map((args: Args) => F.render?.({ ...context.args, ...args }, context))}
+                  </div>
+                `;
+              })}
+            </div>
+          `,
+        )}
+      </div>
     `;
   },
 };
diff --git a/packages/documentation/src/stories/utilities/float/float.stories.ts b/packages/documentation/src/stories/utilities/float/float.stories.ts
index 194f7d9ce1..88a730a377 100644
--- a/packages/documentation/src/stories/utilities/float/float.stories.ts
+++ b/packages/documentation/src/stories/utilities/float/float.stories.ts
@@ -1,7 +1,7 @@
 import type { Args, StoryObj } from '@storybook/web-components';
 import { html } from 'lit/static-html.js';
 import { MetaExtended } from '@root/types';
-import './float.styles.scss';
+import { nothing } from 'lit';
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 
@@ -28,55 +28,29 @@ export const Float: Story = {
       },
     },
     floatBreakPoint: {
-      name: 'float',
+      name: 'breakpoint',
       description: 'Sets the float for a specific breakpoint. ',
       control: {
         type: 'select',
       },
-      options: ['', 'sm', 'md', 'lg', 'xl', 'xxl'],
+      options: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'],
       table: {
         category: 'Add float',
       },
     },
   },
   args: {
-    floatPosition: '',
-    floatBreakPoint: '',
+    floatPosition: null,
+    floatBreakPoint: null,
   },
   render: (args: Args) => {
-    const float = args.floatPosition !== '' ? `float` : '';
-    const floatPosition = args.floatPosition !== '' ? `-${args.floatPosition}` : '';
-    const floatBreakPoint = args.floatBreakPoint !== '' ? `-${args.floatBreakPoint}` : '';
-
-    return html`
-      <div class="float-example">
-        <div class="${float}${floatBreakPoint}${floatPosition}">Sample Text</div>
-      </div>
-    `;
-  },
-};
-
-export const FloatSnapshot: Story = {
-  render: () => {
-    const samples = [
-      ['null', 'none'],
-      ['null', 'start'],
-      ['null', 'end'],
-      ['sm', 'start'],
-      ['md', 'end'],
-      ['lg', 'none'],
-      ['xl', 'start'],
-      ['xxl', 'none'],
-    ];
+    const classMembers = ['float', args.floatBreakPoint ?? 'xs', args.floatPosition].filter(m => m);
+    const floatClass =
+      classMembers.length === 3 ? classMembers.filter(m => m !== 'xs').join('-') : nothing;
 
     return html`
-      ${samples.map(([floatBreakPoint, floatPosition]) => {
-        const fbp = floatBreakPoint !== 'null' ? `${floatBreakPoint}-` : '';
-        return html`
-          <div class="float-${fbp}${floatPosition}">Sample Text</div>
-          <div class="clearfix"></div>
-        `;
-      })}
+      <div class="${floatClass}">Sample Text</div>
+      <div class="clearfix"></div>
     `;
   },
 };
diff --git a/packages/documentation/src/stories/utilities/float/float.styles.scss b/packages/documentation/src/stories/utilities/float/float.styles.scss
deleted file mode 100644
index 83f4b2093f..0000000000
--- a/packages/documentation/src/stories/utilities/float/float.styles.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@use '@swisspost/design-system-styles/core' as post;
-
-.float-example {
-  .content {
-    background-color: post.$white;
-    border: 1px solid post.$gray-40;
-  }
-}

From 14ad298b2a4493cb84811d6c9c8357d5f2f5e4af Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <myrta.sakellariou@gmail.com>
Date: Thu, 17 Oct 2024 10:37:14 +0200
Subject: [PATCH 08/10] missing import fixed

---
 .../src/components/post-list-item/readme.md   | 10 ++++++++
 .../src/components/post-list/readme.md        | 25 +++++++++++++++++++
 .../utilities/float/float.snapshot.stories.ts |  1 -
 3 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 packages/components/src/components/post-list-item/readme.md
 create mode 100644 packages/components/src/components/post-list/readme.md

diff --git a/packages/components/src/components/post-list-item/readme.md b/packages/components/src/components/post-list-item/readme.md
new file mode 100644
index 0000000000..feee609eb7
--- /dev/null
+++ b/packages/components/src/components/post-list-item/readme.md
@@ -0,0 +1,10 @@
+# post-list-item
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-list/readme.md b/packages/components/src/components/post-list/readme.md
new file mode 100644
index 0000000000..44c1be0503
--- /dev/null
+++ b/packages/components/src/components/post-list/readme.md
@@ -0,0 +1,25 @@
+# post-list
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property      | Attribute      | Description                                | Type      | Default |
+| ------------- | -------------- | ------------------------------------------ | --------- | ------- |
+| `'hideTitle'` | `'hide-title'` | Defines if the title is visible or hidden. | `boolean` | `false` |
+
+
+## Slots
+
+| Slot               | Description                                 |
+| ------------------ | ------------------------------------------- |
+| `"default"`        | Slot for placing the list title.            |
+| `"post-list-item"` | Slot for placing post-list-item components. |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/documentation/src/stories/utilities/float/float.snapshot.stories.ts b/packages/documentation/src/stories/utilities/float/float.snapshot.stories.ts
index 61e8d44bdf..87ac642e3a 100644
--- a/packages/documentation/src/stories/utilities/float/float.snapshot.stories.ts
+++ b/packages/documentation/src/stories/utilities/float/float.snapshot.stories.ts
@@ -1,7 +1,6 @@
 import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import meta, { Float as F } from './float.stories';
-import './float.styles.scss';
 import { bombArgs } from '@/utils';
 
 const { id, ...metaWithoutId } = meta;

From ad91841567e6ab55293ab77b612334920e4ea7eb Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <66249294+myrta2302@users.noreply.github.com>
Date: Thu, 17 Oct 2024 10:40:17 +0200
Subject: [PATCH 09/10] Update float.snapshot.stories.ts

---
 .../src/stories/utilities/float/float.snapshot.stories.ts        | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/documentation/src/stories/utilities/float/float.snapshot.stories.ts b/packages/documentation/src/stories/utilities/float/float.snapshot.stories.ts
index 87ac642e3a..21f2c0b4fe 100644
--- a/packages/documentation/src/stories/utilities/float/float.snapshot.stories.ts
+++ b/packages/documentation/src/stories/utilities/float/float.snapshot.stories.ts
@@ -12,7 +12,6 @@ export default {
 
 type Story = StoryObj;
 
-console.log(F.argTypes?.floatPosition?.options);
 export const Float: Story = {
   render: (_args: Args, context: StoryContext) => {
     return html`

From 82890859cc1ad8f72557601e961eccf1e33c5525 Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <myrta.sakellariou@gmail.com>
Date: Fri, 18 Oct 2024 11:20:14 +0200
Subject: [PATCH 10/10] review comments update

---
 .../src/components/post-list-item/readme.md   | 10 -------
 .../src/components/post-list/readme.md        | 25 -----------------
 .../utilities/float/float.snapshot.stories.ts | 18 ++++++++----
 .../stories/utilities/float/float.stories.ts  | 28 ++++++++++++-------
 .../src/themes/bootstrap/_utilities.scss      |  4 +--
 5 files changed, 32 insertions(+), 53 deletions(-)
 delete mode 100644 packages/components/src/components/post-list-item/readme.md
 delete mode 100644 packages/components/src/components/post-list/readme.md

diff --git a/packages/components/src/components/post-list-item/readme.md b/packages/components/src/components/post-list-item/readme.md
deleted file mode 100644
index feee609eb7..0000000000
--- a/packages/components/src/components/post-list-item/readme.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# post-list-item
-
-
-
-<!-- Auto Generated Below -->
-
-
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-list/readme.md b/packages/components/src/components/post-list/readme.md
deleted file mode 100644
index 44c1be0503..0000000000
--- a/packages/components/src/components/post-list/readme.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# post-list
-
-
-
-<!-- Auto Generated Below -->
-
-
-## Properties
-
-| Property      | Attribute      | Description                                | Type      | Default |
-| ------------- | -------------- | ------------------------------------------ | --------- | ------- |
-| `'hideTitle'` | `'hide-title'` | Defines if the title is visible or hidden. | `boolean` | `false` |
-
-
-## Slots
-
-| Slot               | Description                                 |
-| ------------------ | ------------------------------------------- |
-| `"default"`        | Slot for placing the list title.            |
-| `"post-list-item"` | Slot for placing post-list-item components. |
-
-
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/documentation/src/stories/utilities/float/float.snapshot.stories.ts b/packages/documentation/src/stories/utilities/float/float.snapshot.stories.ts
index 21f2c0b4fe..dde6949a31 100644
--- a/packages/documentation/src/stories/utilities/float/float.snapshot.stories.ts
+++ b/packages/documentation/src/stories/utilities/float/float.snapshot.stories.ts
@@ -1,6 +1,6 @@
 import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
-import meta, { Float as F } from './float.stories';
+import meta from './float.stories';
 import { bombArgs } from '@/utils';
 
 const { id, ...metaWithoutId } = meta;
@@ -15,17 +15,25 @@ type Story = StoryObj;
 export const Float: Story = {
   render: (_args: Args, context: StoryContext) => {
     return html`
-      <div class="float-example">
+      <div class="snapshot-example">
+        <h1>Snapshot with Float</h1>
         ${['bg-white', 'bg-dark'].map(
           bg => html`
             <div class="${bg} p-16">
-              ${(F.argTypes?.floatBreakPoint?.options ?? []).map((breakpoint: string) => {
+              ${(meta.argTypes?.floatBreakPoint?.options ?? []).map((breakpoint: string) => {
                 return html`
                   <h2>Breakpoint ${breakpoint}</h2>
                   <div>
                     ${bombArgs({
-                      floatPosition: [...(F.argTypes?.floatPosition?.options ?? [])],
-                    }).map((args: Args) => F.render?.({ ...context.args, ...args }, context))}
+                      floatPosition: [...(meta.argTypes?.floatPosition?.options ?? [])],
+                      floatBreakPoint: [breakpoint],
+                    }).map((args: Args) => {
+                      return html`
+                        <div class="clearfix">
+                          ${meta.render?.({ ...context.args, ...args, breakpoint }, context)}
+                        </div>
+                      `;
+                    })}
                   </div>
                 `;
               })}
diff --git a/packages/documentation/src/stories/utilities/float/float.stories.ts b/packages/documentation/src/stories/utilities/float/float.stories.ts
index 88a730a377..448d5f22ae 100644
--- a/packages/documentation/src/stories/utilities/float/float.stories.ts
+++ b/packages/documentation/src/stories/utilities/float/float.stories.ts
@@ -1,4 +1,4 @@
-import type { Args, StoryObj } from '@storybook/web-components';
+import type { Args, StoryObj, StoryFn, StoryContext } from '@storybook/web-components';
 import { html } from 'lit/static-html.js';
 import { MetaExtended } from '@root/types';
 import { nothing } from 'lit';
@@ -8,13 +8,6 @@ import { nothing } from 'lit';
 const meta: MetaExtended = {
   id: 'ccf092c1-f0ab-49a1-a612-87e5be23adde',
   title: 'Utilities/Float',
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-export const Float: Story = {
   argTypes: {
     floatPosition: {
       name: 'float',
@@ -49,8 +42,23 @@ export const Float: Story = {
       classMembers.length === 3 ? classMembers.filter(m => m !== 'xs').join('-') : nothing;
 
     return html`
-      <div class="${floatClass}">Sample Text</div>
-      <div class="clearfix"></div>
+      <div class="${floatClass}">
+        Sample Text ${args.floatPosition ? '(float-' + args.floatPosition + ')' : ''}
+      </div>
     `;
   },
+  decorators: [
+    (story: StoryFn, context: StoryContext) => {
+      const storyTemplate = html`<div class="clearfix float-example">
+        ${story(context.args, context)}
+      </div>`;
+      return storyTemplate;
+    },
+  ],
 };
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Float: Story = {};
diff --git a/packages/styles/src/themes/bootstrap/_utilities.scss b/packages/styles/src/themes/bootstrap/_utilities.scss
index 9e69f6cb6a..e7c32db0f6 100644
--- a/packages/styles/src/themes/bootstrap/_utilities.scss
+++ b/packages/styles/src/themes/bootstrap/_utilities.scss
@@ -39,8 +39,6 @@ $utilities: map.remove($utilities, 'justify-content');
 
 $utilities: map.remove($utilities, 'display');
 
-$utilities: map.remove($utilities, 'float-start');
-$utilities: map.remove($utilities, 'float-end');
-$utilities: map.remove($utilities, 'float-none');
+$utilities: map.remove($utilities, 'float');
 
 @import 'bootstrap/scss/utilities/api';