From 8c2ec4187f430bc20a656f0ee0315f2c349b5bb8 Mon Sep 17 00:00:00 2001
From: Pavel Klibani <pavel@techloop.io>
Date: Fri, 6 Sep 2024 12:24:04 +0200
Subject: [PATCH] Feat(web): Class modifier `hasSafeAreaDisabled` changed to
 `safeArea` in `PartnerLogo` class

- Preparation for stabilization of the `PartnerLogo` component
- Solves #DS-1373
---
 .../scss/components/UNSTABLE_PartnerLogo/README.md   |  8 ++++----
 .../UNSTABLE_PartnerLogo/_UNSTABLE_PartnerLogo.scss  |  7 ++++---
 .../scss/components/UNSTABLE_PartnerLogo/index.html  | 12 ++++++------
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/packages/web/src/scss/components/UNSTABLE_PartnerLogo/README.md b/packages/web/src/scss/components/UNSTABLE_PartnerLogo/README.md
index edf01fc3dd..9e0150c196 100644
--- a/packages/web/src/scss/components/UNSTABLE_PartnerLogo/README.md
+++ b/packages/web/src/scss/components/UNSTABLE_PartnerLogo/README.md
@@ -28,14 +28,14 @@ Use the `UNSTABLE_PartnerLogo--<size>` modifier class to change the size of the
 </div>
 ```
 
-## Disabled safe area
+## Enable safe area
 
-The PartnerLogo component can be displayed without the safe area (padding). Use `UNSTABLE_PartnerLogo--hasSafeAreaDisabled` modifier to disable safe area around logo.
+The PartnerLogo component can be displayed with the safe area (padding). Use `UNSTABLE_PartnerLogo--safeArea` modifier to enable safe area around logo.
 
 ```html
-<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--medium UNSTABLE_PartnerLogo--hasSafeAreaDisabled">
+<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--medium UNSTABLE_PartnerLogo--safeArea">
   <!-- Logo go here -->
-</UNSTABLE_PartnerLogo>
+</div>
 ```
 
 ## Content
diff --git a/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_UNSTABLE_PartnerLogo.scss b/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_UNSTABLE_PartnerLogo.scss
index a980c1d7a9..b46b4288a2 100644
--- a/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_UNSTABLE_PartnerLogo.scss
+++ b/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_UNSTABLE_PartnerLogo.scss
@@ -3,10 +3,11 @@
 @use '../../tools/dictionaries';
 
 .UNSTABLE_PartnerLogo {
+    --#{globals.$prefix}partner-logo-padding: 0;
+    
     display: inline-block;
     max-width: 100%;
     height: fit-content;
-    padding: var(--#{globals.$prefix}partner-logo-padding);
     border-radius: theme.$border-radius;
     background: theme.$background-color;
 }
@@ -19,6 +20,6 @@
 
 @include dictionaries.generate-sizes($class-name: 'UNSTABLE_PartnerLogo', $sizes: theme.$sizes);
 
-.UNSTABLE_PartnerLogo--hasSafeAreaDisabled {
-    --#{globals.$prefix}partner-logo-padding: 0;
+.UNSTABLE_PartnerLogo--safeArea {
+    padding: var(--#{globals.$prefix}partner-logo-padding);
 }
diff --git a/packages/web/src/scss/components/UNSTABLE_PartnerLogo/index.html b/packages/web/src/scss/components/UNSTABLE_PartnerLogo/index.html
index e4d74c0d40..824d5eade6 100644
--- a/packages/web/src/scss/components/UNSTABLE_PartnerLogo/index.html
+++ b/packages/web/src/scss/components/UNSTABLE_PartnerLogo/index.html
@@ -6,7 +6,7 @@ <h2 class="docs-Heading">Default</h2>
     <div>
       <h3>Size small</h3>
       <div style="background-color: rgb(242, 243, 245); padding: 48px;">
-        <div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--small">
+        <div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--small UNSTABLE_PartnerLogo--safeArea">
           <svg width="108" height="40" viewBox="0 0 108 40" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clip-path="url(#clip0_20364_10)">
               <path
@@ -70,7 +70,7 @@ <h3>Size small</h3>
     <div>
       <h3>Size medium</h3>
       <div style="background-color: rgb(242, 243, 245); padding: 48px;">
-        <div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--medium">
+        <div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--medium UNSTABLE_PartnerLogo--safeArea">
           <svg width="108" height="40" viewBox="0 0 108 40" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clip-path="url(#clip0_20364_10)">
               <path
@@ -134,7 +134,7 @@ <h3>Size medium</h3>
     <div>
       <h3>Size large</h3>
       <div style="background-color: rgb(242, 243, 245); padding: 48px;">
-        <div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--large">
+        <div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--large UNSTABLE_PartnerLogo--safeArea">
           <svg width="108" height="40" viewBox="0 0 108 40" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clip-path="url(#clip0_20364_10)">
               <path
@@ -204,7 +204,7 @@ <h2 class="docs-Heading">Disabled safe area</h2>
     <div>
       <h3>Size small</h3>
       <div style="background-color: rgb(242, 243, 245); padding: 48px;">
-        <div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--small UNSTABLE_PartnerLogo--hasSafeAreaDisabled">
+        <div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--small">
           <svg width="108" height="40" viewBox="0 0 108 40" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clip-path="url(#clip0_20364_10)">
               <path
@@ -268,7 +268,7 @@ <h3>Size small</h3>
     <div>
       <h3>Size medium</h3>
       <div style="background-color: rgb(242, 243, 245); padding: 48px;">
-        <div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--medium UNSTABLE_PartnerLogo--hasSafeAreaDisabled">
+        <div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--medium">
           <svg width="108" height="40" viewBox="0 0 108 40" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clip-path="url(#clip0_20364_10)">
               <path
@@ -332,7 +332,7 @@ <h3>Size medium</h3>
     <div>
       <h3>Size large</h3>
       <div style="background-color: rgb(242, 243, 245); padding: 48px;">
-        <div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--large UNSTABLE_PartnerLogo--hasSafeAreaDisabled">
+        <div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--large">
           <svg width="108" height="40" viewBox="0 0 108 40" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clip-path="url(#clip0_20364_10)">
               <path