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

lmc-eu · Jul 3, 2024 · 5d25af9 · 5d25af9
1 parent 13874a3
commit 5d25af9
Showing 1 changed file with 44 additions and 4 deletions.
diff --git a/packages/web/src/scss/components/UNSTABLE_PartnerLogo/README.md b/packages/web/src/scss/components/UNSTABLE_PartnerLogo/README.md
@@ -6,7 +6,7 @@
 PartnerLogo is a component designed to display the partner's logo (e.g. advertiser, business partner, etc.).
 
 ```html
-<div class="UNSTABLE_PartnerLogo">
+<div class="UNSTABLE_PartnerLogo" aria-label="Logo of the partner">
   <!-- Logo go here -->
 </div>
 ```
@@ -17,15 +17,55 @@ 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">
+<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--small" aria-label="Logo of the partner">
   <!-- Logo go here -->
 </div>
-<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--medium">
+<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--medium" aria-label="Logo of the partner">
   <!-- Logo go here -->
 </div>
-<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--large">
+<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--large" aria-label="Logo of the partner">
   <!-- Logo go here -->
 </div>
 ```
 
+## 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