@faststore/ui 3.87.0 → 3.89.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "3.87.0",
+  "version": "3.89.0",
   "description": "A lightweight, framework agnostic component library for React",
   "author": "emersonlaurentino",
   "license": "MIT",
@@ -47,7 +47,7 @@
     }
   ],
   "dependencies": {
-    "@faststore/components": "^3.87.0",
+    "@faststore/components": "^3.88.0",
     "include-media": "^1.4.10",
     "modern-normalize": "^1.1.0",
     "react-swipeable": "^7.0.0",
@@ -70,5 +70,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "d0fb33b01f02c4b6a49c31aef3dde512f4ba53ae"
+  "gitHead": "77bd257d8f854dba233d1962aad06f34a1b12230"
 }

package/src/components/atoms/Button/styles.scss

@@ -138,7 +138,6 @@
     transition: var(--fs-button-transition-property) var(--fs-button-transition-timing) var(--fs-button-transition-function);
   }
 
-
   // --------------------------------------------------------
   // Variants Styles
   // --------------------------------------------------------
@@ -174,6 +173,7 @@
 
   &[data-fs-button-size="small"] {
     --fs-control-tap-size: var(--fs-button-small-min-height);
+
     padding: var(--fs-spacing-1);
 
     [data-fs-button-wrapper] {
@@ -242,7 +242,6 @@
   }
 
   &[data-fs-button-variant="secondary"] {
-
     [data-fs-button-wrapper] {
       color: var(--fs-button-secondary-text-color);
       background-color: var(--fs-button-secondary-bkg-color);
@@ -268,7 +267,6 @@
     }
 
     &[data-fs-button-inverse="true"] {
-
       [data-fs-button-wrapper] {
         color: var(--fs-button-secondary-inverse-text-color);
         background-color: var(--fs-button-secondary-inverse-bkg-color);
@@ -296,7 +294,6 @@
   }
 
   &[data-fs-button-variant="tertiary"] {
-
     [data-fs-button-wrapper] {
       color: var(--fs-button-tertiary-text-color);
       background-color: var(--fs-button-tertiary-bkg-color);
@@ -315,6 +312,9 @@
       background-color: var(--fs-button-tertiary-bkg-color-hover);
     }
 
+    &:disabled [data-fs-button-wrapper],
+    &:hover:disabled [data-fs-button-wrapper] { background-color: transparent; }
+
     &:active [data-fs-button-wrapper] {
       color: var(--fs-button-tertiary-text-color-active);
       background-color: var(--fs-button-tertiary-bkg-color-active);
@@ -322,7 +322,6 @@
     }
 
     &[data-fs-button-inverse="true"] {
-
       [data-fs-button-wrapper] {
         color: var(--fs-button-tertiary-inverse-text-color);
         background-color: var(--fs-button-tertiary-inverse-bkg-color);
@@ -354,22 +353,23 @@
 
     [data-fs-button-wrapper] {
       column-gap: 0;
+      width: 100%;
       padding: 0;
       border-width: 0;
-      width: 100%;
     }
   }
 
   &[data-fs-button-loading="true"] [data-fs-button-wrapper] {
     > * {
-      opacity: 0;
       pointer-events: none;
+      opacity: 0;
     }
+
     [data-fs-button-loading-label] {
       position: absolute;
-      opacity: 1;
       display: flex;
       column-gap: var(--fs-button-loading-label-column-gap);
+      opacity: 1;
     }
   }
 }

package/src/components/atoms/RichText/styles.scss

@@ -0,0 +1,72 @@
+[data-fs-rich-text] {
+  [data-fs-rich-text-list="true"] {
+    padding: 0;
+    margin: 0;
+    list-style-position: inside;
+
+    [data-fs-rich-text-list="true"] {
+      margin-top: 0;
+      margin-bottom: 0;
+      margin-left: var(--fs-spacing-4);
+
+      [data-fs-rich-text-list="true"] {
+        margin-left: var(--fs-spacing-6);
+      }
+    }
+
+    li {
+      padding-left: 0;
+      margin: 0;
+    }
+
+    &[data-fs-list-type="ordered"] {
+      list-style-type: decimal;
+    }
+
+    &[data-fs-list-type="unordered"] {
+      list-style-type: disc;
+    }
+  }
+
+  h1 {
+    margin: var(--fs-spacing-3) 0;
+    font-size: var(--fs-text-size-title-huge);
+    font-weight: var(--fs-text-weight-bold);
+    line-height: var(--fs-text-line-height-tight);
+  }
+
+  h2 {
+    margin: var(--fs-spacing-2) 0;
+    font-size: var(--fs-text-size-title-section);
+    font-weight: var(--fs-text-weight-bold);
+    line-height: var(--fs-text-line-height-tight);
+  }
+
+  h3 {
+    margin: var(--fs-spacing-2) 0;
+    font-size: var(--fs-text-size-title-subsection);
+    font-weight: var(--fs-text-weight-semibold);
+    line-height: var(--fs-text-line-height-tight);
+  }
+
+  h4 {
+    margin: var(--fs-spacing-1) 0;
+    font-size: var(--fs-text-size-4);
+    font-weight: var(--fs-text-weight-semibold);
+    line-height: var(--fs-text-line-height-tight);
+  }
+
+  h5 {
+    margin: var(--fs-spacing-1) 0;
+    font-size: var(--fs-text-size-3);
+    font-weight: var(--fs-text-weight-semibold);
+    line-height: var(--fs-text-line-height-tight);
+  }
+
+  h6 {
+    margin: var(--fs-spacing-1) 0;
+    font-size: var(--fs-text-size-2);
+    font-weight: var(--fs-text-weight-semibold);
+    line-height: var(--fs-text-line-height-tight);
+  }
+}

package/src/styles/components.scss

@@ -12,6 +12,7 @@
 @import "../components/atoms/Overlay/styles";
 @import "../components/atoms/Price/styles";
 @import "../components/atoms/Radio/styles";
+@import "../components/atoms/RichText/styles";
 @import "../components/atoms/Select/styles";
 @import "../components/atoms/Skeleton/styles";
 @import "../components/atoms/Slider/styles";