TEC-4251: fix progress bar (#69)

* TEC-4251 fix progress bar * update version
vissimo-group · Jan 15, 2024 · 7710649 · 7710649
1 parent c35f075
commit 7710649
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 31 deletions.
diff --git a/dist/chablis.min.js b/dist/chablis.min.js
diff --git a/dist/chablis.min.js.map b/dist/chablis.min.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chablis",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "A mobile first frontend framework made with wine",
   "main": "dist/chablis.min.js",
   "scripts": {

diff --git a/src/components/ProgressBar/Bar/index.jsx b/src/components/ProgressBar/Bar/index.jsx
@@ -10,39 +10,43 @@ const Bar = styled.span`
   margin-right: 0.6%;
   position: relative;
 
-  @media(min-width: 769px) {
+  @media (min-width: 769px) {
     margin-right: 0.2%;
   }
 
-  :nth-child(1) {
+  &:nth-child(1) {
     background-color: ${colors.standard.orange_1};
     border-top-left-radius: ${sizes.RADIUS};
     border-bottom-left-radius: ${sizes.RADIUS};
   }
 
-  :nth-child(2) {
+  &:nth-child(2),
+  &:nth-child(3),
+  &:nth-child(4),
+  &:nth-child(5) {
     background-color: ${colors.standard.orange_2};
     opacity: 0.2;
   }
 
-  :nth-child(3) {
-    background-color:  ${colors.standard.orange_3};
-    opacity: 0.2;
+  &:nth-child(2) {
+    background-color: ${colors.standard.orange_2};
   }
 
-  :nth-child(4) {
-    background-color:  ${colors.standard.orange_4};
-    opacity: 0.2;
+  &:nth-child(3) {
+    background-color: ${colors.standard.orange_3};
   }
 
-  :nth-child(5) {
-    background-color:  ${colors.standard.orange_5};
+  &:nth-child(4) {
+    background-color: ${colors.standard.orange_4};
+  }
+
+  &:nth-child(5) {
+    background-color: ${colors.standard.orange_5};
     border-top-right-radius: ${sizes.RADIUS};
     border-bottom-right-radius: ${sizes.RADIUS};
-    opacity: 0.2;
   }
 
-  :nth-child(-n+${({ active }) => active}) {
+  &:nth-child(-n + ${({ active }) => active}) {
     opacity: 1;
   }
 `;

diff --git a/src/components/ProgressBar/__snapshots__/index.spec.js.snap b/src/components/ProgressBar/__snapshots__/index.spec.js.snap
@@ -16,23 +16,23 @@ exports[`ProgressBar Should activate specific active tags 1`] = `
   >
     <span
       active={3}
-      className="sc-jrcSnH gNZZvb"
+      className="sc-jrcSnH dMEgbk"
     />
     <span
       active={3}
-      className="sc-jrcSnH gNZZvb"
+      className="sc-jrcSnH dMEgbk"
     />
     <span
       active={3}
-      className="sc-jrcSnH gNZZvb"
+      className="sc-jrcSnH dMEgbk"
     />
     <span
       active={3}
-      className="sc-jrcSnH gNZZvb"
+      className="sc-jrcSnH dMEgbk"
     />
     <span
       active={3}
-      className="sc-jrcSnH gNZZvb"
+      className="sc-jrcSnH dMEgbk"
     />
   </div>
 </div>
@@ -54,23 +54,23 @@ exports[`ProgressBar Should render the component 1`] = `
   >
     <span
       active={3}
-      className="sc-jrcSnH gNZZvb"
+      className="sc-jrcSnH dMEgbk"
     />
     <span
       active={3}
-      className="sc-jrcSnH gNZZvb"
+      className="sc-jrcSnH dMEgbk"
     />
     <span
       active={3}
-      className="sc-jrcSnH gNZZvb"
+      className="sc-jrcSnH dMEgbk"
     />
     <span
       active={3}
-      className="sc-jrcSnH gNZZvb"
+      className="sc-jrcSnH dMEgbk"
     />
     <span
       active={3}
-      className="sc-jrcSnH gNZZvb"
+      className="sc-jrcSnH dMEgbk"
     />
   </div>
 </div>