Merge pull request #229 from web3ui/feat/stepper-alignment-props

feat: stepper header can now be aligned manually
web3ui · Mar 8, 2022 · f038ec5 · f038ec5
2 parents 3cd9ac8 + 2314de9
commit f038ec5
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 2 deletions.
diff --git a/src/components/Stepper/Stepper.stories.tsx b/src/components/Stepper/Stepper.stories.tsx
@@ -57,3 +57,11 @@ StepsWithoutNav.args = {
     stepData: noNavTestStepData,
     hasNavButtons: false,
 };
+
+export const SmallerStepperCount = Template.bind({});
+SmallerStepperCount.args = {
+    step: 1,
+    stepData: noNavTestStepData,
+    hasNavButtons: false,
+    headerWidth: '40',
+};
diff --git a/src/components/Stepper/Stepper.styles.ts b/src/components/Stepper/Stepper.styles.ts
@@ -2,13 +2,15 @@ import styled from 'styled-components';
 import color from '../../styles/colors';
 import fonts from '../../styles/fonts';
 import resetCSS from '../../styles/reset';
-import { StepNumberProps } from './types';
+import { StepNumberProps, StepperProps } from './types';
 
 type TStyleProps = Pick<
     StepNumberProps,
     'activeStep' | 'thisStep' | 'stepTotal'
 >;
 
+type THeaderStyleProps = Pick<StepperProps, 'headerWidth'>;
+
 export const SectionStyled = styled.section`
     display: flex;
     flex-direction: column;
@@ -119,3 +121,8 @@ export const DivStyledHelper = styled.div`
         margin: 0 auto;
     }
 `;
+
+export const HeaderStyled = styled.header<THeaderStyleProps>`
+    ${(p) => p.headerWidth && `max-width: ${p.headerWidth}px`};
+    width: 100%;
+`;
diff --git a/src/components/Stepper/Stepper.tsx b/src/components/Stepper/Stepper.tsx
@@ -12,6 +12,7 @@ import {
     OrderedListStyled,
     SectionStyled,
     SpanStyled,
+    HeaderStyled,
 } from './Stepper.styles';
 import { H2Styled } from '../../styles/StyledElements';
 import color from '../../styles/colors';
@@ -25,6 +26,7 @@ const Stepper: React.FC<StepperProps> = ({
     completeTitle = 'all done, nice!',
     completeMessage = 'You should tell the user what to do next, or use the onComplete function to programmatically fire an event',
     onComplete = () => null,
+    headerWidth,
 }) => {
     const [activeStep, setActiveStep] = useState(step);
     const myStepRef = useRef(activeStep);
@@ -123,7 +125,12 @@ const Stepper: React.FC<StepperProps> = ({
 
     return (
         <SectionStyled data-testid="test-stepper">
-            <header>{renderStepperNumbers()}</header>
+            <HeaderStyled
+                headerWidth={headerWidth}
+                style={{ alignSelf: 'center' }}
+            >
+                {renderStepperNumbers()}
+            </HeaderStyled>
 
             {activeStep === 0 ? renderPreloader() : renderContent()}
 

diff --git a/src/components/Stepper/types.ts b/src/components/Stepper/types.ts
@@ -47,6 +47,11 @@ export interface StepperProps {
      * the Stepper needs data
      */
     stepData: Step[];
+
+    /**
+     * header width
+     */
+    headerWidth?: string;
 }
 
 /**