Merge pull request #673 from gympass/feat/customColor-stepper-component

🚀 feat(stepper): add custom color for stepper
gympass · Aug 3, 2023 · c0771a3 · c0771a3
2 parents c818b2a + 3c74d99
commit c0771a3
Show file tree

Hide file tree

Showing 11 changed files with 633 additions and 113 deletions.
diff --git a/packages/yoga/src/Stepper/Stepper.theme.js b/packages/yoga/src/Stepper/Stepper.theme.js
@@ -7,13 +7,15 @@ const Stepper = ({ colors, spacing, fontSizes, fontWeights, radii }) => ({
     backgroundColor: {
       active: colors.primary,
       inactive: colors.elements.backgroundAndDisabled,
+      secondary: colors.medium,
     },
   },
   dot: {
     radius: radii.circle,
     backgroundColor: {
       active: colors.primary,
       inactive: colors.elements.backgroundAndDisabled,
+      secondary: colors.medium,
     },
   },
   label: {
@@ -24,6 +26,7 @@ const Stepper = ({ colors, spacing, fontSizes, fontWeights, radii }) => ({
     color: {
       active: colors.primary,
       inactive: colors.elements.selectionAndIcons,
+      secondary: colors.medium,
     },
   },
 });

diff --git a/packages/yoga/src/Stepper/native/Dots.jsx b/packages/yoga/src/Stepper/native/Dots.jsx
@@ -1,9 +1,9 @@
+import { arrayOf, bool, number, string } from 'prop-types';
 import React from 'react';
-import { number, arrayOf, string } from 'prop-types';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-import activeDot from '../activeDot';
 import Text from '../../Text';
+import activeDot from '../activeDot';
 
 const Wrapper = styled.View`
   flex-direction: row;
@@ -17,67 +17,78 @@ const DotWrapper = styled.View`
 const Dot = styled.View(
   ({
     active,
+    secondary,
     theme: {
       yoga: {
         components: { stepper },
       },
     },
-  }) => `
-    width: 15px;
-    height: 15px;
+  }) => {
+    const state = secondary ? 'secondary' : 'active';
 
-    margin-top: -6px;
+    return css`
+      width: 15px;
+      height: 15px;
+      margin-top: -6px;
 
-    border-radius: ${stepper.dot.radius}px;
-    background-color: ${
-      active
-        ? stepper.dot.backgroundColor.active
-        : stepper.dot.backgroundColor.inactive
-    };
-  `,
+      border-radius: ${stepper.dot.radius}px;
+      background-color: ${active
+        ? stepper.dot.backgroundColor[state]
+        : stepper.dot.backgroundColor.inactive};
+    `;
+  },
 );
 
 const Label = styled(Text.Bold)(
   ({
     active,
+    secondary,
     theme: {
       yoga: {
         components: { stepper },
       },
     },
-  }) => `
-    width: 95px;
-    margin-top: 10px;
-    margin-left: -40px;
+  }) => {
+    const state = secondary ? 'secondary' : 'active';
 
-    color: ${
-      active ? stepper.label.color.active : stepper.label.color.inactive
-    };
-
-    font-size: ${stepper.label.font.size}px;
-    text-align: center;
-  `,
+    return css`
+      width: 95px;
+      margin-top: 10px;
+      margin-left: -40px;
+      color: ${active
+        ? stepper.label.color[state]
+        : stepper.label.color.inactive};
+      font-size: ${stepper.label.font.size}px;
+      text-align: center;
+    `;
+  },
 );
 
-const Dots = ({ activeStep, labels }) => (
-  <Wrapper>
-    {labels.map((label, index) => (
-      <DotWrapper key={label}>
-        <Dot active={activeDot(index, activeStep)} />
-        <Label active={activeDot(index, activeStep)}>{label}</Label>
-      </DotWrapper>
-    ))}
-  </Wrapper>
-);
+function Dots({ activeStep, labels, secondary }) {
+  return (
+    <Wrapper>
+      {labels.map((label, index) => (
+        <DotWrapper key={label}>
+          <Dot active={activeDot(index, activeStep)} secondary={secondary} />
+          <Label active={activeDot(index, activeStep)} secondary={secondary}>
+            {label}
+          </Label>
+        </DotWrapper>
+      ))}
+    </Wrapper>
+  );
+}
 
 Dots.propTypes = {
   activeStep: number,
   labels: arrayOf(string),
+  secondary: bool,
 };
 
 Dots.defaultProps = {
   activeStep: 0,
   labels: [],
+  secondary: false,
 };
 
 export default Dots;
diff --git a/packages/yoga/src/Stepper/native/Line.jsx b/packages/yoga/src/Stepper/native/Line.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { number } from 'prop-types';
+import { bool, number } from 'prop-types';
 import styled from 'styled-components';
 
 const Wrapper = styled.View`
@@ -27,6 +27,7 @@ const InactiveLine = styled.View(
 const ActiveLine = styled.View(
   ({
     width,
+    secondary,
     theme: {
       yoga: {
         components: { stepper },
@@ -36,27 +37,38 @@ const ActiveLine = styled.View(
     position: absolute;
     top: 0;
 
-    background-color: ${stepper.line.backgroundColor.active};
+    background-color: ${
+      secondary
+        ? stepper.line.backgroundColor.secondary
+        : stepper.line.backgroundColor.active
+    };
     width: ${width}%;
     height: 4px;
 `,
 );
 
-const Line = ({ activeStep, totalSteps }) => (
-  <Wrapper>
-    <InactiveLine />
-    <ActiveLine width={activeStep <= 0 ? 0 : (activeStep / totalSteps) * 100} />
-  </Wrapper>
-);
+function Line({ activeStep, totalSteps, secondary }) {
+  return (
+    <Wrapper>
+      <InactiveLine />
+      <ActiveLine
+        width={activeStep <= 0 ? 0 : (activeStep / totalSteps) * 100}
+        secondary={secondary}
+      />
+    </Wrapper>
+  );
+}
 
 Line.propTypes = {
   activeStep: number,
   totalSteps: number,
+  secondary: bool,
 };
 
 Line.defaultProps = {
   activeStep: 0,
   totalSteps: 0,
+  secondary: false,
 };
 
 export default Line;
diff --git a/packages/yoga/src/Stepper/native/Stepper.jsx b/packages/yoga/src/Stepper/native/Stepper.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import { bool } from 'prop-types';
 import { limitChildren, typeOf } from '../../shared';
 import Line from './Line';
 import Dots from './Dots';
@@ -25,21 +26,25 @@ const LineWrapper = styled.View(
 
 /** Stepper is responsible for the logic that drives a stepped workflow, it
 provides a wizard-like workflow by dividing content into logical steps. */
-const Stepper = ({ children, activeStep, ...rest }) => (
-  <Wrapper {...rest}>
-    <LineWrapper>
-      <Line
-        activeStep={activeStep}
-        totalSteps={React.Children.count(children) - 1}
-      />
-      <Dots
-        activeStep={activeStep}
-        labels={React.Children.map(children, child => child.props.label)}
-      />
-    </LineWrapper>
-    {React.Children.toArray(children)[activeStep]}
-  </Wrapper>
-);
+function Stepper({ children, activeStep, secondary, ...rest }) {
+  return (
+    <Wrapper {...rest}>
+      <LineWrapper>
+        <Line
+          activeStep={activeStep}
+          totalSteps={React.Children.count(children) - 1}
+          secondary={secondary}
+        />
+        <Dots
+          activeStep={activeStep}
+          labels={React.Children.map(children, child => child.props.label)}
+          secondary={secondary}
+        />
+      </LineWrapper>
+      {React.Children.toArray(children)[activeStep]}
+    </Wrapper>
+  );
+}
 
 Stepper.displayName = 'Stepper';
 
@@ -49,11 +54,14 @@ Stepper.propTypes = {
   /** Controls the active step, it receive the index value for showing some
    * step. Starting from 0. */
   activeStep: limitChildren,
+  /** Use secondary color */
+  secondary: bool,
 };
 
 Stepper.defaultProps = {
   children: undefined,
   activeStep: 0,
+  secondary: false,
 };
 
 export default Stepper;
diff --git a/packages/yoga/src/Stepper/native/Stepper.test.jsx b/packages/yoga/src/Stepper/native/Stepper.test.jsx
@@ -26,6 +26,26 @@ describe('<Stepper />', () => {
       expect(toJSON(container)).toMatchSnapshot();
     });
 
+    it('should match snapshot with first step active and secondary color', () => {
+      const { container, toJSON } = render(
+        <ThemeProvider>
+          <Stepper activeStep={0} secondary>
+            <Stepper.Step label="step one">
+              <Text>step one content</Text>
+            </Stepper.Step>
+            <Stepper.Step label="step two">
+              <Text>step two content</Text>
+            </Stepper.Step>
+            <Stepper.Step label="step three">
+              <Text>step three content</Text>
+            </Stepper.Step>
+          </Stepper>
+        </ThemeProvider>,
+      );
+
+      expect(toJSON(container)).toMatchSnapshot();
+    });
+
     it('should match snapshot with second step active', () => {
       const { container, toJSON } = render(
         <ThemeProvider>