- more work on styles

srdjan · Aug 17, 2023 · ac943ad · ac943ad
1 parent 8a4753a
commit ac943ad
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 40 deletions.
diff --git 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
@@ -16,10 +16,6 @@ const App = () => (
       <StepThree title='Step 3'/>
       <StepFour title='Step 4'/>
     </MultiStep>
-    <div className='appFooter'>
-      Use navigation buttons or click on progress bar for next step. Code is on{' '}
-      <a href='https://github.com/Srdjan/react-multistep' target='_blank' rel='noreferrer'>GitHub</a>
-    </div>
   </div>
 )
 

diff --git 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
@@ -9,17 +9,20 @@
     <link rel="stylesheet" href="./css/normalize.css">
 
     <!-- App styles -->
-    <link rel="stylesheet" href="./css/milligram.css">
+    <!-- <link rel="stylesheet" href="./css/milligram.css"> -->
     <!--  or -->
     <!-- <link rel="stylesheet" href="./css/skeleton.css"> -->
     <!--  or -->
-
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tiny.css@0.12/dist/light.css">
   </head>
 
-  <body>
+  <body style='{background-color: #F7F7F7}'>
     <!-- <noscript>You need to enable JavaScript to run this app.</noscript> -->
-    <div id="root"></div>
-
+    <article id="root"></article>
+    <footer class='footer'>
+      Use navigation buttons or click on progress bar for next step. Code is here:
+      <a href='https://github.com/Srdjan/react-multistep' target='_blank' rel='noreferrer'>GitHub</a>
+    </footer>
     <script src="./bundle.js"></script>
   </body>
 </html>
diff --git a/src/MultiStep.tsx b/src/MultiStep.tsx
@@ -67,7 +67,7 @@ export default function MultiStep(props: MultiStepProps) {
     </ol>
 
   const renderBottomNav = () =>
-    <>
+    <div style={styles.section} >
       <button onClick={handlePrevious}
               style={styles.prevButton}
               disabled={bottomNavState.prevDisabled}>
@@ -78,15 +78,15 @@ export default function MultiStep(props: MultiStepProps) {
               disabled={bottomNavState.nextDisabled}>
         <span>&#62;</span>
       </button>
-    </>
+    </div>
 
   return (
-    <div style={styles.multiStep}>
+    <div style={styles.component}>
       {renderTopNav()}
-      <div style={styles.childArea}>
+      <div style={styles.section}>
         {children[activeChild]}
       </div>
-      {renderBottomNav()}
+        {renderBottomNav()}
     </div>
   )
 }
diff --git 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
@@ -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 {