feat(styles): updated float utility

.changeset/slimy-rockets-pull.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-styles': minor
+'@swisspost/design-system-documentation': minor
+---
+
+Updated the utility classes for float

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,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>

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

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>
+    `;
+  },
+};

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

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

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';

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,