chore(documentation,styles): add overflow utilities (#4006)

.changeset/blue-kings-beg.md

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

packages/documentation/cypress/snapshots/utilities/overflow.snapshot.ts

@@ -0,0 +1,7 @@
+describe('Overflow', () => {
+  it('overflow', () => {
+    cy.visit('/iframe.html?id=snapshots--overflow');
+    cy.get('.overflow-example', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Overflow', { widths: [320, 1440] });
+  });
+});

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

@@ -0,0 +1,35 @@
+import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
+import * as OverflowStories from './overflow.stories';
+
+<Meta of={OverflowStories} />
+
+# Overflow
+
+<div className="lead">Define how a content overflows its container.</div>
+<br />
+<div className="alert alert-info">Note that these utility classes are not responsive.</div>
+
+<Canvas sourceState="shown" of={OverflowStories.Default} />
+<div className="hide-col-default">
+  <Controls of={OverflowStories.Default} />
+</div>
+
+## Properties
+
+The properties available for the overflow of elements are the following:
+
+- `overflow` for the overflow of the content both horizontally and vertically.
+- `overflow-x` for the overflow of the content horizontally.
+- `overflow-y` for the overflow of the content vertically.
+
+The values available are the following:
+
+- `visible` (default) sets all of the content to be visible and will overflow the container if needed.
+- `auto` lets the browser decide what to do and will add scrollbar if needed.
+- `hidden` hides all of the content that would overflow the container, without any scrollbars.
+- `scroll` does not overflow the content and adds scrollbars to the container.
+
+<div className="alert alert-info alert-sm">
+  If one of the axis is defined as `visible`, and the other axis is defined as something else, then
+  the `visible` axis will be considered to be `auto`.
+</div>

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

@@ -0,0 +1,46 @@
+import type { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import meta from './overflow.stories';
+import './overflow.styles.scss';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const Overflow: Story = {
+  render: () => {
+    return html`
+      <div class="overflow-example">
+        <h1>Overflow</h1>
+        ${getContent('Overflow', 'overflow')} ${getContent('Overflow X', 'overflow-x')}
+        ${getContent('Overflow Y', 'overflow-y')}
+      </div>
+    `;
+  },
+};
+
+function getContent(title: string, property: string) {
+  return html`
+    <h2>${title}</h2>
+    <div class="py-16">
+      ${['auto', 'hidden', 'scroll', 'visible'].map((value: string) => {
+        return html`
+          <p>${title}: ${value}</p>
+          <div class="snapshot-container ${property}-${value}">
+                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+              pariatur.</div>
+            </div>
+          </div>
+        `;
+      })}
+    </div>
+  `;
+}

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

@@ -0,0 +1,71 @@
+import type { Args, StoryObj } from '@storybook/web-components';
+import { html } from 'lit/static-html.js';
+import { MetaExtended } from '@root/types';
+import './overflow.styles.scss';
+
+const meta: MetaExtended = {
+  id: '4b505a3e-f4ce-48ce-8fae-6aa8158d66e8',
+  title: 'Utilities/Overflow',
+  args: {
+    overflow: 'visible',
+  },
+  argTypes: {
+    overflow: {
+      name: 'Overflow',
+      description: 'Sets the general overflow of the element.',
+      control: {
+        type: 'select',
+      },
+      options: ['', 'auto', 'hidden', 'scroll', 'visible'],
+      table: {
+        category: 'General',
+      },
+    },
+    overflowX: {
+      name: 'Overflow X',
+      description: 'Sets the overflow of the x axis of the element.',
+      control: {
+        type: 'select',
+      },
+      options: ['', 'auto', 'hidden', 'scroll', 'visible'],
+      table: {
+        category: 'General',
+      },
+    },
+    overflowY: {
+      name: 'Overflow Y',
+      description: 'Sets the overflow of the y axis of the element.',
+      control: {
+        type: 'select',
+      },
+      options: ['', 'auto', 'hidden', 'scroll', 'visible'],
+      table: {
+        category: 'General',
+      },
+    },
+  },
+  render: (args: Args) => {
+    return html`
+      <div
+        class="bg-yellow ${args.overflow ? 'overflow-' + args.overflow : ''}${args.overflowX
+          ? ' overflow-x-' + args.overflowX
+          : ''}${args.overflowY ? ' overflow-y-' + args.overflowY : ''}"
+      >
+        <div class="content">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+          ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+        </div>
+      </div>
+    `;
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  decorators: [story => html` <div class="overflow-container">${story()}</div> `],
+};

packages/documentation/src/stories/utilities/overflow/overflow.styles.scss

@@ -0,0 +1,42 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+// Story
+.overflow-container {
+  overflow: visible;
+  height: 16rem;
+
+  > * {
+    width: 10rem;
+    height: 10rem;
+
+    .content {
+      width: 24rem;
+
+      @include post.media-breakpoint-down(md) {
+        width: 16rem;
+      }
+    }
+  }
+}
+
+// Snapshots
+.snapshot-container {
+  width: 30rem;
+  height: 10rem;
+  background-color: post.$yellow;
+  @include post.media-breakpoint-down(lg) {
+    width: 15rem;
+  }
+
+  > * {
+    width: 35rem;
+
+    @include post.media-breakpoint-down(lg) {
+      width: 23rem;
+    }
+
+    @include post.media-breakpoint-down(md) {
+      width: 17rem;
+    }
+  }
+}

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

@@ -45,4 +45,8 @@ $utilities: map.remove($utilities, 'float');
 
 $utilities: map.remove($utilities, 'opacity');
 
+$utilities: map.remove($utilities, 'overflow');
+$utilities: map.remove($utilities, 'overflow-x');
+$utilities: map.remove($utilities, 'overflow-y');
+
 @import 'bootstrap/scss/utilities/api';

packages/styles/src/utilities/_variables.scss

@@ -254,5 +254,17 @@ $utilities: (
     values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex
       none,
   ),
+  'overflow': (
+    property: overflow,
+    values: auto hidden visible scroll,
+  ),
+  'overflow-x': (
+    property: overflow-x,
+    values: auto hidden visible scroll,
+  ),
+  'overflow-y': (
+    property: overflow-y,
+    values: auto hidden visible scroll,
+  ),
   // IMPORTANT: When adding new utilities here, please ensure to remove the corresponding bootstrap utilities in `src/themes/bootstrap/_utilities.scss`.
 );