chore(isct-97): add evaluations (shadows) storybook page

ironSource · Nov 5, 2023 · d73af50 · d73af50
1 parent 1a70cab
commit d73af50
Show file tree

Hide file tree

Showing 5 changed files with 164 additions and 70 deletions.
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -61,31 +61,33 @@
     /* endregion */
 
     /* region shadows */
-    .fu-shadow-xs{box-shadow:0px 1px 2px 0px rgba(16,24,40,.05)}.fu-shadow-sm{box-shadow:0px 1px 3px 0px rgba(16,24,40,.1),0px 1px 2px 0px rgba(16,24,40,.06)}.fu-shadow-md{box-shadow:0px 4px 8px -2px rgba(16,24,40,.1),0px 2px 4px -2px rgba(16,24,40,.06)}.fu-shadow-lg{box-shadow:0px 12px 16px -4px rgba(16,24,40,.08),0px 4px 6px -2px rgba(16,24,40,.03)}.fu-shadow-xl{box-shadow:0px 20px 24px -6px rgba(16,24,40,.08),0px 8px 8px -4px rgba(16,24,40,.03)}.fu-shadow-xxl{box-shadow:0px 24px 48px -12px rgba(16,24,40,.18)}.fu-shadow-xxxl{box-shadow:0px 19px 32px 2px rgba(44,45,45,.14)}.fu-shadow-slg{box-shadow:0px 27px 27px 2px rgba(44,45,45,.14)}
-
+    .fusion-v4{--fu-shadow-v4-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);--fu-shadow-v4-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);--fu-shadow-v4-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);--fu-shadow-v4-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);--fu-shadow-v4-xl: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -6px rgba(16, 24, 40, 0.08);--fu-shadow-v4-xxl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);--fu-shadow-v4-xxxl: 0px 19px 32px 2px rgba(44, 45, 45, 0.14);--fu-shadow-v4-slg: 0px 27px 27px 2px rgba(44, 45, 45, 0.14)}.fu-shadow-v4-xs{box-shadow:var(--fu-shadow-v4-xs)}.fu-shadow-v4-sm{box-shadow:var(--fu-shadow-v4-sm)}.fu-shadow-v4-md{box-shadow:var(--fu-shadow-v4-md)}.fu-shadow-v4-lg{box-shadow:var(--fu-shadow-v4-lg)}.fu-shadow-v4-xl{box-shadow:var(--fu-shadow-v4-xl)}.fu-shadow-v4-xxl{box-shadow:var(--fu-shadow-v4-xxl)}.fu-shadow-v4-xxxl{box-shadow:var(--fu-shadow-v4-xxxl)}.fu-shadow-v4-slg{box-shadow:var(--fu-shadow-v4-slg)}
     .fu-shadow-examples{
+        width: 675px;
+        margin: 32px auto;
         display: flex;
+        padding: 40px;
+        justify-content: space-between;
+        align-items: center;
+        align-content: center;
+        row-gap: 48px;
+        align-self: stretch;
         flex-wrap: wrap;
+        border-radius: 8px;
+        background: #F1F1F1;
+    }
+    .fu-shadow-example-holder {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
         align-items: center;
-        justify-content: space-between;
-        gap: 38px;
-        padding: 80px;
-        background-color: #EDEDED;
+        gap: 16px;
     }
     .fu-shadow-example {
         width: 124px;
         height: 124px;
         background-color: #fff;
         border-radius: 16px;
-        display: flex;
-        gap: 8px;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        font-size: 12px;
-    }
-    .fu-shadow-hr{
-        flex-basis: 100%;
     }
     /* endregion */
 

diff --git a/projects/fusion-ui/components/shadows-v4.mdx b/projects/fusion-ui/components/shadows-v4.mdx
@@ -1,8 +1,9 @@
 import {Meta} from '@storybook/addon-docs';
+import { Source } from '@storybook/blocks';
 
-<Meta title="V4/Foundation/Shadows"/>
+<Meta title="V4/Foundation/Elevations"/>
 
-# Shadows
+# Elevations (shadows)
 
 CSS **box-shadow** is a style property used to add a shadow effect to an element's box (such as a div or an image) on a web page. The property allows you to create a visually appealing 3D-like effect, making the element appear elevated or floating.
 
@@ -15,51 +16,125 @@ Or Import css file for *.css with shadow classes
   @import '~@ironsource/fusion-ui/style/v4/shadows.css';
 ```
 
-## Shadows:
+## Elevations:
 <div class="sb-unstyled">
-    <div class="fu-shadow-examples">
-        <div class="fu-shadow-example fu-shadow-xs">
-            <div class="font-v4-subtitle-2">x small</div>
-            <div>$boxShadowXS</div>
-            <div>.fu-shadow-xs</div>
+    <div class="fu-shadow-examples fusion-v4">
+        <div className="fu-shadow-example-holder">
+            <div className="fu-shadow-example-label font-v4-heading-4">xsmall</div>
+            <div className="fu-shadow-example fu-shadow-v4-xs"></div>
         </div>
-        <div class="fu-shadow-example fu-shadow-sm">
-            <div class="font-v4-subtitle-2">small</div>
-            <div>$boxShadowSM</div>
-            <div>.fu-shadow-sm</div>
+        <div className="fu-shadow-example-holder">
+            <div className="fu-shadow-example-label font-v4-heading-4">small</div>
+            <div className="fu-shadow-example fu-shadow-v4-sm"></div>
         </div>
-        <div class="fu-shadow-example fu-shadow-md">
-            <div class="font-v4-subtitle-2">medium</div>
-            <div>$boxShadowMD</div>
-            <div>.fu-shadow-md</div>
+        <div className="fu-shadow-example-holder">
+            <div className="fu-shadow-example-label font-v4-heading-4">medium</div>
+            <div className="fu-shadow-example fu-shadow-v4-md"></div>
         </div>
-        <div class="fu-shadow-example fu-shadow-lg">
-            <div class="font-v4-subtitle-2">large</div>
-            <div>$boxShadowLG</div>
-            <div>.fu-shadow-lg</div>
+        <div className="fu-shadow-example-holder">
+            <div className="fu-shadow-example-label font-v4-heading-4">large</div>
+            <div className="fu-shadow-example fu-shadow-v4-lg"></div>
         </div>
-        <div class="fu-shadow-hr"></div>
-        <div class="fu-shadow-example fu-shadow-xl">
-            <div class="font-v4-subtitle-2">x large</div>
-            <div>$boxShadowXL</div>
-            <div>.fu-shadow-xl</div>
+        <div className="fu-shadow-example-holder">
+            <div className="fu-shadow-example-label font-v4-heading-4">xlarge</div>
+            <div className="fu-shadow-example fu-shadow-v4-xl"></div>
         </div>
-        <div class="fu-shadow-example fu-shadow-xxl">
-            <div class="font-v4-subtitle-2">xx large</div>
-            <div>$boxShadowXXL</div>
-            <div>.fu-shadow-xxl</div>
+        <div className="fu-shadow-example-holder">
+            <div className="fu-shadow-example-label font-v4-heading-4">xxlarge</div>
+            <div className="fu-shadow-example fu-shadow-v4-xxl"></div>
         </div>
-        <div class="fu-shadow-example fu-shadow-xxxl">
-            <div class="font-v4-subtitle-2">xxx large</div>
-            <div>$boxShadowXXXL</div>
-            <div>.fu-shadow-xxxl</div>
+        <div className="fu-shadow-example-holder">
+            <div className="fu-shadow-example-label font-v4-heading-4">xxxlarge</div>
+            <div className="fu-shadow-example fu-shadow-v4-xxxl"></div>
         </div>
-        <div class="fu-shadow-example fu-shadow-slg">
-            <div class="font-v4-subtitle-2">super large</div>
-            <div>$boxShadowSLG</div>
-            <div>.fu-shadow-slg</div>
+        <div className="fu-shadow-example-holder">
+            <div className="fu-shadow-example-label font-v4-heading-4">slarge</div>
+            <div className="fu-shadow-example fu-shadow-v4-slg"></div>
         </div>
     </div>
 </div>
 
+## used CSS variables and classes.
+<Source language="css" code={`
+.fusion-v4 {
+    --fu-shadow-v4-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    --fu-shadow-v4-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
+    --fu-shadow-v4-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+    --fu-shadow-v4-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+    --fu-shadow-v4-xl: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -6px rgba(16, 24, 40, 0.08);
+    --fu-shadow-v4-xxl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
+    --fu-shadow-v4-xxxl: 0px 19px 32px 2px rgba(44, 45, 45, 0.14);
+    --fu-shadow-v4-slg: 0px 27px 27px 2px rgba(44, 45, 45, 0.14)
+}
+
+.fu-shadow-v4-xs {
+    box-shadow: var(--fu-shadow-v4-xs)
+}
+
+.fu-shadow-v4-sm {
+    box-shadow: var(--fu-shadow-v4-sm)
+}
+
+.fu-shadow-v4-md {
+    box-shadow: var(--fu-shadow-v4-md)
+}
+
+.fu-shadow-v4-lg {
+    box-shadow: var(--fu-shadow-v4-lg)
+}
+
+.fu-shadow-v4-xl {
+    box-shadow: var(--fu-shadow-v4-xl)
+}
+
+.fu-shadow-v4-xxl {
+    box-shadow: var(--fu-shadow-v4-xxl)
+}
+
+.fu-shadow-v4-xxxl {
+    box-shadow: var(--fu-shadow-v4-xxxl)
+}
+
+.fu-shadow-v4-slg {
+    box-shadow: var(--fu-shadow-v4-slg)
+}
+`} />
+
+## SCSS.
+<Source language="css" code={`
+$boxShadowXS: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+$boxShadowSM: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
+$boxShadowMD: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+$boxShadowLG: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+$boxShadowXL: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -6px rgba(16, 24, 40, 0.08);
+$boxShadowXXL: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
+$boxShadowXXXL: 0px 19px 32px 2px rgba(44, 45, 45, 0.14);
+$boxShadowSLG: 0px 27px 27px 2px rgba(44, 45, 45, 0.14);
+
+%shadow-v4-xs{
+    box-shadow: $boxShadowXS;
+}
+%shadow-v4-sm{
+    box-shadow: $boxShadowSM;
+}
+%shadow-v4-md{
+    box-shadow: $boxShadowMD;
+}
+%shadow-v4-lg{
+    box-shadow: $boxShadowLG;
+}
+%shadow-v4-xl{
+    box-shadow: $boxShadowXL;
+}
+%shadow-v4-xxl{
+    box-shadow: $boxShadowXXL;
+}
+%shadow-v4-xxxl{
+    box-shadow: $boxShadowXXXL;
+}
+%shadow-v4-slg{
+    box-shadow: $boxShadowSLG;
+}
+`} />
+
 
diff --git a/projects/fusion-ui/src/style/scss/v4/shadows.scss b/projects/fusion-ui/src/style/scss/v4/shadows.scss
@@ -1,27 +1,41 @@
 @import './vars/shadows';
 
-.fu-shadow-xs {
-    @extend %shadow-v4-xs;
+/* region css variables */
+.fusion-v4 {
+    --fu-shadow-v4-xs: #{$boxShadowXS};
+    --fu-shadow-v4-sm: #{$boxShadowSM};
+    --fu-shadow-v4-md: #{$boxShadowMD};
+    --fu-shadow-v4-lg: #{$boxShadowLG};
+    --fu-shadow-v4-xl: #{$boxShadowXL};
+    --fu-shadow-v4-xxl: #{$boxShadowXXL};
+    --fu-shadow-v4-xxxl: #{$boxShadowXXXL};
+    --fu-shadow-v4-slg: #{$boxShadowSLG};
+}
+/* endregion css variables */
+
+/* region css classes */
+.fu-shadow-v4-xs {
+    box-shadow: var(--fu-shadow-v4-xs);
 }
-.fu-shadow-sm {
-    @extend %shadow-v4-sm;
+.fu-shadow-v4-sm {
+    box-shadow: var(--fu-shadow-v4-sm);
 }
-.fu-shadow-md {
-    @extend %shadow-v4-md;
+.fu-shadow-v4-md {
+    box-shadow: var(--fu-shadow-v4-md);
 }
-.fu-shadow-lg {
-    @extend %shadow-v4-lg;
+.fu-shadow-v4-lg {
+    box-shadow: var(--fu-shadow-v4-lg);
 }
-.fu-shadow-xl {
-    @extend %shadow-v4-xl;
+.fu-shadow-v4-xl {
+    box-shadow: var(--fu-shadow-v4-xl);
 }
-.fu-shadow-xxl {
-    @extend %shadow-v4-xxl;
+.fu-shadow-v4-xxl {
+    box-shadow: var(--fu-shadow-v4-xxl);
 }
-.fu-shadow-xxxl {
-    @extend %shadow-v4-xxxl;
+.fu-shadow-v4-xxxl {
+    box-shadow: var(--fu-shadow-v4-xxxl);
 }
-.fu-shadow-slg {
-    @extend %shadow-v4-slg;
+.fu-shadow-v4-slg {
+    box-shadow: var(--fu-shadow-v4-slg);
 }
-
+/* endregion css classes */
diff --git a/projects/fusion-ui/src/style/scss/v4/vars/_shadows.scss b/projects/fusion-ui/src/style/scss/v4/vars/_shadows.scss
@@ -2,7 +2,7 @@ $boxShadowXS: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
 $boxShadowSM: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
 $boxShadowMD: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
 $boxShadowLG: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
-$boxShadowXL: 0px 20px 24px -6px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
+$boxShadowXL: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -6px rgba(16, 24, 40, 0.08);
 $boxShadowXXL: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
 $boxShadowXXXL: 0px 19px 32px 2px rgba(44, 45, 45, 0.14);
 $boxShadowSLG: 0px 27px 27px 2px rgba(44, 45, 45, 0.14);

diff --git a/scripts/build-styles.sh b/scripts/build-styles.sh
@@ -57,6 +57,9 @@ sass projects/fusion-ui/src/style/scss/v2/fonts.scss dist/fusion-ui/style/v2/fon
 sass projects/fusion-ui/src/style/scss/v3/vars/_fonts.scss dist/fusion-ui/style/v3/fonts.css -s compressed
 sass projects/fusion-ui/src/style/scss/v4/vars/_fonts.scss dist/fusion-ui/style/v4/fonts.css -s compressed
 
+# copy and compile shadows v4
+sass projects/fusion-ui/src/style/scss/v4/shadows.scss dist/fusion-ui/style/v4/shadows.css -s compressed
+
 
 echo  -e "${GREEN}-- copy and compile default fonts and grid by last (v3) versions ${NOCOLOR}"
 # compile default fonts (last version default - 3 )