Feat(web): Stabilization of PartnerLogo component #DS-1443

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

@@ -1,39 +1,36 @@
-# UNSTABLE PartnerLogo
-
-> ⚠️ This component is UNSTABLE. It may significantly change at any point in the future.
-> Please use it with caution.
+# PartnerLogo
 
 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">
+<div class="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.
+Use the `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">
+<div class="PartnerLogo 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">
+<div class="PartnerLogo 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">
+<div class="PartnerLogo PartnerLogo--large" aria-label="Logo of the partner">
   <!-- Logo go here -->
 </div>
 ```
 
 ## Enable Safe Area
 
-The PartnerLogo component can be displayed with the safe area (padding). Use `UNSTABLE_PartnerLogo--safeArea` modifier to enable safe area around logo.
+The PartnerLogo component can be displayed with the safe area (padding). Use `PartnerLogo--safeArea` modifier to enable safe area around logo.
 
 ```html
-<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--medium UNSTABLE_PartnerLogo--safeArea">
+<div class="PartnerLogo PartnerLogo--medium PartnerLogo--safeArea">
   <!-- Logo go here -->
 </div>
 ```
@@ -45,7 +42,7 @@ The content of the PartnerLogo component can be an image or svg.
 ### Image
 
 ```html
-<div class="UNSTABLE_PartnerLogo" aria-label="Logo of the partner">
+<div class="PartnerLogo" aria-label="Logo of the partner">
   <img src="path-to-logo" alt="Partner Logo" aria-hidden="true" />
 </div>
 ```
@@ -57,7 +54,7 @@ attribute is set on the container.
 ### SVG
 
 ```html
-<div class="UNSTABLE_PartnerLogo" aria-label="Logo of the partner">
+<div class="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>
@@ -67,11 +64,11 @@ attribute is set on the container.
 ## Full Example
 
 ```html
-<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--medium" aria-label="Logo of the partner">
+<div class="PartnerLogo 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">
+<div class="PartnerLogo 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>

packages/web/src/scss/components/UNSTABLE_PartnerLogo/_UNSTABLE_PartnerLogo.scss → packages/web/src/scss/components/PartnerLogo/_PartnerLogo.scss

@@ -2,7 +2,7 @@
 @use '../../settings/globals';
 @use '../../tools/dictionaries';
 
-.UNSTABLE_PartnerLogo {
+.PartnerLogo {
     --#{globals.$prefix}partner-logo-padding: 0;
 
     display: inline-block;
@@ -12,14 +12,14 @@
     background: theme.$background-color;
 }
 
-.UNSTABLE_PartnerLogo > img,
-.UNSTABLE_PartnerLogo > svg {
+.PartnerLogo > img,
+.PartnerLogo > svg {
     width: fit-content;
     height: var(--#{globals.$prefix}partner-logo-image-height);
 }
 
-@include dictionaries.generate-sizes($class-name: 'UNSTABLE_PartnerLogo', $sizes: theme.$sizes);
+@include dictionaries.generate-sizes($class-name: 'PartnerLogo', $sizes: theme.$sizes);
 
-.UNSTABLE_PartnerLogo--safeArea {
+.PartnerLogo--safeArea {
     padding: var(--#{globals.$prefix}partner-logo-padding);
 }

packages/web/src/scss/components/PartnerLogo/index.scss

@@ -0,0 +1 @@
+@forward 'PartnerLogo';

packages/web/src/scss/components/index.scss

@@ -19,6 +19,7 @@
 // @forward 'Item';
 @forward 'Modal';
 @forward 'Pagination';
+@forward 'PartnerLogo';
 
 // @forward 'Pill';
 @forward 'ProductLogo';
@@ -38,7 +39,6 @@
 @forward 'UNSTABLE_ActionLayout';
 @forward 'UNSTABLE_Avatar';
 @forward 'UNSTABLE_EmptyState';
-@forward 'UNSTABLE_PartnerLogo';
 @forward 'UNSTABLE_Section';
 
 // @forward 'UNSTABLE_Slider';