apply requested changes

vtex-sites · Jun 17, 2022 · c04891b · c04891b
1 parent 588b21a
commit c04891b
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 32 deletions.
diff --git a/src/components/ui/PriceRange/PriceRange.stories.mdx b/src/components/ui/PriceRange/PriceRange.stories.mdx
@@ -59,6 +59,9 @@ The `PriceRange` component uses [FastStore UI PriceRange](https://www.faststore.
 ---
 
 ## Usage
+`import PriceRange from '../components/ui/PriceRange'`
+
+<ArgsTable story="overview-default" />
 
 <TokenTable>
   <TokenRow token="--fs-price-range-height" value=".5rem" />

diff --git a/src/components/ui/PriceRange/PriceRange.tsx b/src/components/ui/PriceRange/PriceRange.tsx
@@ -11,6 +11,7 @@ function PriceRange(props: Props) {
 
   return (
     <UIPriceRange
+      data-fs-price-range
       className={styles.fsPriceRange}
       formatter={formatter}
       {...props}

diff --git a/src/components/ui/PriceRange/price-range.module.scss b/src/components/ui/PriceRange/price-range.module.scss
@@ -4,34 +4,38 @@
   // --------------------------------------------------------
   // Design Tokens for Price Range
   // --------------------------------------------------------
-  --fs-price-range-height: .5rem;
-  --fs-price-range-border-radius: var(--fs-border-radius);
 
-  --fs-price-range-bkg-color: var(--fs-color-primary-bkg-light);
-  --fs-price-range-range-bkg-color: var(--fs-color-primary-bkg);
+  // Default properties
+  --fs-price-range-slider-height: .5rem;
+  --fs-price-range-slider-border-radius: var(--fs-border-radius);
 
-  --fs-price-range-thumb-bkg-color: var(--fs-color-tertiary-bkg-light);
-  --fs-price-range-thumb-radius: var(--fs-border-radius-circle);
-  --fs-price-range-thumb-size: 1rem;
-  --fs-price-range-thumb-border-color: var(--fs-border-color);
-  --fs-price-range-thumb-border-width: var(--fs-border-width);
+  // Slider
+  --fs-price-range-slider-bkg-color: var(--fs-color-primary-bkg-light);
+  --fs-price-range-slider-range-bkg-color: var(--fs-color-primary-bkg);
+
+  // Thumb
+  --fs-price-range-slider-thumb-bkg-color: var(--fs-color-tertiary-bkg-light);
+  --fs-price-range-slider-thumb-radius: var(--fs-border-radius-circle);
+  --fs-price-range-slider-thumb-size: 1rem;
+  --fs-price-range-slider-thumb-border-color: var(--fs-border-color);
+  --fs-price-range-slider-thumb-border-width: var(--fs-border-width);
 
   // --------------------------------------------------------
   // Structural Styles
   // --------------------------------------------------------
   [data-store-slider] {
     position: relative;
     width: 100%;
-    height: var(--fs-price-range-height);
-    background-color: var(--fs-price-range-bkg-color);
-    border-radius: var(--fs-price-range-border-radius);
+    height: var(--fs-price-range-slider-height);
+    background-color: var(--fs-price-range-slider-bkg-color);
+    border-radius: var(--fs-price-range-slider-border-radius);
   }
 
   [data-slider-range] {
     position: absolute;
-    height: var(--fs-price-range-height);
-    background-color: var(--fs-price-range-range-bkg-color);
-    border-radius: var(--fs-price-range-border-radius);
+    height: var(--fs-price-range-slider-height);
+    background-color: var(--fs-price-range-slider-range-bkg-color);
+    border-radius: var(--fs-price-range-slider-border-radius);
   }
 
   // TODO: Figure out a way for not repeating all styles for both
@@ -40,37 +44,33 @@
   /* Thumb styles for Webkit based browsers (Chrome, Edge) */
   [data-slider-thumb],
   [data-slider-thumb]::-webkit-slider-thumb {
-    width: var(--fs-price-range-thumb-size);
-    height: var(--fs-price-range-thumb-size);
+    width: var(--fs-price-range-slider-thumb-size);
+    height: var(--fs-price-range-slider-thumb-size);
     pointer-events: auto;
     cursor: col-resize;
-    background-color: var(--fs-price-range-thumb-bkg-color);
-    border: solid;
-    border-color: var(--fs-price-range-thumb-border-color);
-    border-width: var(--fs-price-range-thumb-border-width);
-    border-radius: var(--fs-price-range-thumb-radius);
+    background-color: var(--fs-price-range-slider-thumb-bkg-color);
+    border: var(--fs-price-range-thumb-border-width) solid var(--fs-price-range-thumb-border-color);
+    border-radius: var(--fs-price-range-slider-thumb-radius);
     appearance: none;
     -webkit-tap-highlight-color: transparent;
   }
 
   /* Thumb styles for Mozilla */
   [data-slider-thumb]::-moz-range-thumb {
-    width: var(--fs-price-range-thumb-size);
-    height: var(--fs-price-range-thumb-size);
+    width: var(--fs-price-range-slider-thumb-size);
+    height: var(--fs-price-range-slider-thumb-size);
     pointer-events: auto;
     cursor: col-resize;
-    background-color: var(--fs-price-range-thumb-bkg-color);
-    border: solid;
-    border-color: var(--fs-price-range-thumb-border-color);
-    border-width: var(--fs-price-range-thumb-border-width);
-    border-radius: var(--fs-price-range-thumb-radius);
+    background-color: var(--fs-price-range-slider-thumb-bkg-color);
+    border: var(--fs-price-range-thumb-border-width) solid var(--fs-price-range-thumb-border-color);
+    border-radius: var(--fs-price-range-slider-thumb-radius);
   }
 
   [data-slider-thumb] {
     position: absolute;
     width: inherit;
     height: 0;
-    margin: calc(var(--fs-price-range-height) / 2) 0;
+    margin: calc(var(--fs-price-range-slider-height) / 2) 0;
     pointer-events: none;
     border: none;
   }
@@ -86,7 +86,7 @@
   [data-price-range-values] {
     display: flex;
     justify-content: space-between;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
+    margin-top: var(--fs-spacing-3);
+    margin-bottom: var(--fs-spacing-3);
   }
 }