Feat(web): Class modifier hasSafeAreaDisabled changed to safeArea…

… in `PartnerLogo` class - Preparation for stabilization of the `PartnerLogo` component - Solves #DS-1373
lmc-eu · Sep 6, 2024 · 8c2ec41 · 8c2ec41
1 parent 240831b
commit 8c2ec41
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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