Feat(web): Introduce UNSTABLE_PartnerLogo component #DS-1356

packages/web/src/scss/components/UNSTABLE_PartnerLogo/README.md

@@ -0,0 +1,81 @@
+# UNSTABLE PartnerLogo
+
+> ⚠️ This component is UNSTABLE. It may significantly change at any point in the future.
+> Please use it with caution.
+
+PartnerLogo is a component designed to display the partner's logo (e.g. advertiser, business partner, etc.).
+
+```html
+<div class="UNSTABLE_PartnerLogo" aria-label="Logo of the partner">
+  <!-- Logo go here -->
+</div>
+```
+
+## Sizes
+
+The PartnerLogo component is available in [sizes][dictionary-size].
+Use the `UNSTABLE_PartnerLogo--<size>` modifier class to change the size of the PartnerLogo component.
+
+```html
+<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--small" aria-label="Logo of the partner">
+  <!-- Logo go here -->
+</div>
+<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--medium" aria-label="Logo of the partner">
+  <!-- Logo go here -->
+</div>
+<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--large" aria-label="Logo of the partner">
+  <!-- Logo go here -->
+</div>
+```
+
+## Disabled safe area
+
+The PartnerLogo component can be displayed without the safe area (padding). Use `UNSTABLE_PartnerLogo--hasSafeAreaDisabled` modifier to disable safe area around logo.
+
+```html
+<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--medium UNSTABLE_PartnerLogo--hasSafeAreaDisabled">
+  <!-- Logo go here -->
+</UNSTABLE_PartnerLogo>
+```
+
+## Content
+
+The content of the PartnerLogo component can be an image or svg.
+
+### Image
+
+```html
+<div class="UNSTABLE_PartnerLogo" aria-label="Logo of the partner">
+  <img src="path-to-logo" alt="Partner Logo" aria-hidden="true" />
+</div>
+```
+
+ℹ️ Don't forget to add the `aria-label` attribute for accessible title.
+The image should have an `alt` attribute set and can be aria-hidden, because the `aria-label`
+attribute is set on the container.
+
+### SVG
+
+```html
+<div class="UNSTABLE_PartnerLogo" aria-label="Logo of the partner">
+  <svg width="300" height="130">
+    <rect width="200" height="100" x="10" y="10" rx="20" ry="20" fill="#fff" />
+  </svg>
+</div>
+```
+
+## Full example
+
+```html
+<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--medium" aria-label="Logo of the partner">
+  <img src="path-to-logo" alt="Partner Logo" aria-hidden="true" />
+</div>
+
+<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--large" aria-label="Logo of the partner">
+  <svg width="300" height="130">
+    <rect width="200" height="100" x="10" y="10" rx="20" ry="20" fill="#fff" />
+  </svg>
+</div>
+```
+
+[dictionary-size]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#size

packages/web/src/scss/components/UNSTABLE_PartnerLogo/_UNSTABLE_PartnerLogo.scss

@@ -0,0 +1,21 @@
+@use 'theme' as theme;
+@use 'tools';
+
+.UNSTABLE_PartnerLogo {
+    display: inline-block;
+    max-width: 100%;
+    height: fit-content;
+    border-radius: theme.$border-radius;
+    background: theme.$background-color;
+}
+
+.UNSTABLE_PartnerLogo > img,
+.UNSTABLE_PartnerLogo > svg {
+    width: fit-content;
+}
+
+@include tools.generate-logo-sizes('UNSTABLE_PartnerLogo', theme.$sizes);
+
+.UNSTABLE_PartnerLogo--hasSafeAreaDisabled {
+    padding: 0;
+}

packages/web/src/scss/components/UNSTABLE_PartnerLogo/_theme.scss

@@ -0,0 +1,18 @@
+@use '@tokens' as tokens;
+
+$background-color: tokens.$background-basic;
+$border-radius: tokens.$space-300;
+$sizes: (
+    small: (
+        height: tokens.$space-800,
+        padding: tokens.$space-400,
+    ),
+    medium: (
+        height: tokens.$space-1000,
+        padding: tokens.$space-400,
+    ),
+    large: (
+        height: 60px,
+        padding: tokens.$space-500,
+    ),
+);

packages/web/src/scss/components/UNSTABLE_PartnerLogo/_tools.scss

@@ -0,0 +1,19 @@
+@use 'sass:map';
+@use '@tokens' as tokens;
+
+@mixin generate-logo-sizes($class-name, $variables) {
+    @each $size, $variables in $variables {
+        .#{$class-name}--#{$size} {
+            @if map.has-key($variables, padding) {
+                padding: map.get($variables, padding);
+            }
+        }
+
+        .#{$class-name}--#{$size} > svg,
+        .#{$class-name}--#{$size} > img {
+            @if map.has-key($variables, height) {
+                height: map.get($variables, height);
+            }
+        }
+    }
+}