diff --git a/README.md b/README.md index 5354b32..e89b8d5 100644 --- a/README.md +++ b/README.md @@ -57,7 +57,6 @@ MultiStep component accepts following props (all optional, except Steps array): | PROPERTY | DESCRIPTION | TYPE | DEFAULT | isRequired| |----------------|--------------------------------------------------------------|-------------|------------|-----------| | showTopNav | controls if the navigation buttons are visible |boolean |true |false | -| showTitles | control either the steps title are visible or not |boolean |true |false | | prevButton | configure the prev navigation button |NavButtonProp |null |false | | nextButton | configure the next the navigation button |NavButtonProp |null |false | | stepCustomStyle| control style of step |CSSProperties|null |false | diff --git a/example/app.js b/example/app.js index f665e35..e569afc 100644 --- a/example/app.js +++ b/example/app.js @@ -16,10 +16,6 @@ const App = () => ( -
- Use navigation buttons or click on progress bar for next step. Code is on{' '} - GitHub -
) diff --git a/example/css/multistepStyles.js b/example/css/multistepStyles.js index 813a596..0725b98 100644 --- a/example/css/multistepStyles.js +++ b/example/css/multistepStyles.js @@ -1,13 +1,13 @@ -const container = { +const component = { marginTop: '5rem', marginBottom: '5rem', - backgroundColor:'#f1f1f141' + backgroundColor:'#f1f1f141', + maxWidth: '960px', } -const childArea = { +const section = { display: 'block', justifyContent: 'space-around', margin: '4rem', - maxWidth: '960px' } const topNav = { display: 'flex', @@ -22,7 +22,7 @@ const topNavStep = { width: '25%', paddingTop: '4rem', paddingRight: '4rem', - borderBottom: '1px solid silver' + borderBottom: '1px solid silver', } const todo = { color: 'gray', @@ -32,26 +32,25 @@ const doing = { } const prevButton = { color: '#1EAEDB', - backgroundColor: 'white', + backgroundColor: '#f7f7f7', border: '0', fontSize: '4rem', fontWeight: '500', padding: '0', - float: 'left' //only difference } const nextButton = { color: '#1EAEDB', - backgroundColor: 'white', + backgroundColor: '#f7f7f7', border: '0', fontSize: '4rem', fontWeight: '500', padding: '0', - float: 'right' // only difference + float: 'right', // only difference } export const multiStepStyles = { - container, - childArea, + component, + section, topNav, topNavStep, prevButton, diff --git a/example/index.html b/example/index.html index 25af9f0..a6f3a91 100644 --- a/example/index.html +++ b/example/index.html @@ -9,17 +9,20 @@ - + - + - + -
- +
+
+ Use navigation buttons or click on progress bar for next step. Code is here: + GitHub +
diff --git a/src/MultiStep.tsx b/src/MultiStep.tsx index c513285..77d0917 100644 --- a/src/MultiStep.tsx +++ b/src/MultiStep.tsx @@ -67,7 +67,7 @@ export default function MultiStep(props: MultiStepProps) { const renderBottomNav = () => - <> +
- +
return ( -
+
{renderTopNav()} -
+
{children[activeChild]}
- {renderBottomNav()} + {renderBottomNav()}
) } diff --git a/src/baseStyles.js b/src/baseStyles.js index c6a3439..7e82c9e 100644 --- a/src/baseStyles.js +++ b/src/baseStyles.js @@ -1,18 +1,18 @@ -const multiStep = { +const component = { marginRight: '4rem', marginBottom: '3rem', - maxWidth: '960px' + backgroundColor:'#f7f7f7', + maxWidth: '960px', } -const childArea = { +const section = { display: 'block', justifyContent: 'space-around', margin: '4rem', - maxWidth: '960px' } const topNav = { paddingTop: '4rem', listStyleType: 'none', - borderBottom: '1px solid silver' + borderBottom: '1px solid silver', } const topNavStep = { color: 'silver', @@ -22,7 +22,7 @@ const todo = { color: 'gray' } const doing = { - color: '#1EAEDB' + color: '#1EAEDB', } const prevButton = { @@ -32,7 +32,6 @@ const prevButton = { fontSize: '3rem', marginLeft: '2rem', paddingTop: '4rem', - float: 'left' //only difference } const nextButton = { color: '#1EAEDB', @@ -41,12 +40,12 @@ const nextButton = { fontSize: '3rem', marginRight: '2rem', paddingTop: '4rem', - float: 'right' // only difference + float: 'right', // only difference } export const BaseStyles = { - multiStep, - childArea, + component, + section, topNav, topNavStep, prevButton, diff --git a/src/interfaces.ts b/src/interfaces.ts index 9064ab3..ac296b8 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -1,8 +1,8 @@ import React from "react" export interface MultiStepStyles { - multiStep?: React.CSSProperties, - childArea?: React.CSSProperties, + component?: React.CSSProperties + section?: React.CSSProperties topNav?: React.CSSProperties topNavStep?: React.CSSProperties todo?: React.CSSProperties @@ -12,9 +12,8 @@ export interface MultiStepStyles { } export interface MultiStepProps { - showTitles?: boolean, //todo: remove, use topNav.display: none ? styles: MultiStepStyles - children?: React.ReactElement[] + children: React.ReactElement[] } export interface ChildState {