feat(styles): updated float utility

.changeset/slimy-rockets-pull.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-styles': minor
+'@swisspost/design-system-documentation': minor
+---
+
+Internalized bootstraps floating utilities into the design system.

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] });
+  });
+});

packages/documentation/src/stories/utilities/float/float.docs.mdx

@@ -0,0 +1,36 @@
+import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
+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>
+
+> - `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
+
+<Canvas sourceState="shown" of={FloatStories.Float} />
+<div className="hide-col-default">
+  <Controls of={FloatStories.Float} />
+</div>

packages/documentation/src/stories/utilities/float/float.snapshot.stories.ts

@@ -0,0 +1,46 @@
+import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import meta from './float.stories';
+import { bombArgs } from '@/utils';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const Float: Story = {
+  render: (_args: Args, context: StoryContext) => {
+    return html`
+      <div class="snapshot-example">
+        <h1>Snapshot with Float</h1>
+        ${['bg-white', 'bg-dark'].map(
+          bg => html`
+            <div class="${bg} p-16">
+              ${(meta.argTypes?.floatBreakPoint?.options ?? []).map((breakpoint: string) => {
+                return html`
+                  <h2>Breakpoint ${breakpoint}</h2>
+                  <div>
+                    ${bombArgs({
+                      floatPosition: [...(meta.argTypes?.floatPosition?.options ?? [])],
+                      floatBreakPoint: [breakpoint],
+                    }).map((args: Args) => {
+                      return html`
+                        <div class="clearfix">
+                          ${meta.render?.({ ...context.args, ...args, breakpoint }, context)}
+                        </div>
+                      `;
+                    })}
+                  </div>
+                `;
+              })}
+            </div>
+          `,
+        )}
+      </div>
+    `;
+  },
+};

packages/documentation/src/stories/utilities/float/float.stories.ts

@@ -0,0 +1,64 @@
+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';
+
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+
+const meta: MetaExtended = {
+  id: 'ccf092c1-f0ab-49a1-a612-87e5be23adde',
+  title: 'Utilities/Float',
+  argTypes: {
+    floatPosition: {
+      name: 'float',
+      description: 'Sets the float. ',
+      control: {
+        type: 'select',
+      },
+      options: ['start', 'end', 'none'],
+      table: {
+        category: 'Add float',
+      },
+    },
+    floatBreakPoint: {
+      name: 'breakpoint',
+      description: 'Sets the float for a specific breakpoint. ',
+      control: {
+        type: 'select',
+      },
+      options: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'],
+      table: {
+        category: 'Add float',
+      },
+    },
+  },
+  args: {
+    floatPosition: null,
+    floatBreakPoint: null,
+  },
+  render: (args: Args) => {
+    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`
+      <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 = {};

packages/styles/src/themes/bootstrap/_utilities.scss

@@ -39,4 +39,6 @@ $utilities: map.remove($utilities, 'justify-content');
 
 $utilities: map.remove($utilities, 'display');
 
+$utilities: map.remove($utilities, 'float');
+
 @import 'bootstrap/scss/utilities/api';

packages/styles/src/utilities/_variables.scss

@@ -22,6 +22,15 @@
 */
 
 $utilities: (
+  'float': (
+    responsive: true,
+    property: float,
+    values: (
+      start: inline-start,
+      end: inline-end,
+      none: none,
+    ),
+  ),
   'margin': (
     responsive: true,
     property: margin,