Add stepper input

client/App.jsx

@@ -5,6 +5,7 @@ import Home from './Home';
 import Badge from './layouts/Badge';
 import Centering from './layouts/Centering';
 import Sidebar from './layouts/Sidebar';
+import StepperInput from './layouts/StepperInput';
 import StickyFooter from './layouts/StickyFooter';
 import StickyHeader from './layouts/StickyHeader';
 
@@ -16,6 +17,7 @@ const App = () => {
                 <Route exact={true} path='/badge'><Badge /></Route>
                 <Route exact={true} path='/centering'><Centering /></Route>
                 <Route exact={true} path='/sidebar'><Sidebar /></Route>
+                <Route exact={true} path='/stepper-input'><StepperInput /></Route>
                 <Route exact={true} path='/sticky-footer'><StickyFooter /></Route>
                 <Route exact={true} path='/sticky-header'><StickyHeader /></Route>
             </Switch>

client/Home.jsx

@@ -6,7 +6,7 @@ import CenterCover from './covers/CenterCover';
 import SidebarCover from './covers/SidebarCover';
 import StickyFooterCover from './covers/StickyFooterCover';
 import StickyHeaderCover from './covers/StickyHeaderCover';
-import StepperCover from './covers/StepperCover';
+import StepperInputCover from './covers/StepperInputCover';
 import Layout from './Layout';
 import useDocumentTitle from './useDocumentTitle';
 
@@ -69,9 +69,9 @@ const Home = () => {
                         </Link>
                     </div>
                     <div className="pa2 w-20">
-                        <Link to="/stepper" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
+                        <Link to="/stepper-input" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
-                            <StepperCover />
+                            <StepperInputCover />
-                            <h4 className="f4 mv0 pt3">Stepper</h4>
+                            <h4 className="f4 mv0 pt3">Stepper input</h4>
                         </Link>
                     </div>
                 </div>

client/covers/StepperCover.jsx

@@ -1,19 +0,0 @@
-import React from 'react';
-
-import Frame from '../placeholders/Frame';
-
-const StepperCover = () => {
-    return (
-        <Frame>
-            <div className="h-100 flex items-center justify-center pa2">
-                <div className="b--black-30 ba br2 flex w-100">
-                    <div className="w-20 br b--black-30 tc">-</div>
-                    <div className="flex-grow-1 bg-white"></div>
-                    <div className="w-20 bl b--black-30 tc">+</div>
-                </div>
-            </div>
-        </Frame>
-    );
-};
-
-export default StepperCover;

client/covers/StepperInputCover.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import Frame from '../placeholders/Frame';
+
+const StepperInputCover = () => {
+    return (
+        <Frame>
+            <div className="h-100 flex items-center justify-center pa2">
+                <div className="b--black-30 ba br2 flex w-100 h1">
+                    <div className="b--black-30 br flex items-center justify-center w1">-</div>
+                    <div className="flex-grow-1 bg-white"></div>
+                    <div className="b--black-30 bl flex items-center justify-center w1">+</div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default StepperInputCover;

client/layouts/Badge.jsx

@@ -2,8 +2,6 @@ import React from 'react';
 
 import DetailsLayout from '../DetailsLayout';
 import BrowserFrame from '../placeholders/BrowserFrame';
-import Dot from '../placeholders/Dot';
-import Rectangle from '../placeholders/Rectangle';
 import SampleCode from '../SampleCode';
 import useDocumentTitle from '../useDocumentTitle';
 

client/layouts/StepperInput.jsx

@@ -0,0 +1,87 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+import DetailsLayout from '../DetailsLayout';
+import BrowserFrame from '../placeholders/BrowserFrame';
+import SampleCode from '../SampleCode';
+import useDocumentTitle from '../useDocumentTitle';
+
+const StepperInput = () => {
+    useDocumentTitle('CSS Layout ∙ Stepper input');
+    const [value, setValue] = useState(0);
+    const decrease = () => setValue(value - 1);
+    const increase = () => setValue(value + 1);
+    const change = (e) => setValue(parseInt(e.target.value, 10));
+
+    return (
+        <DetailsLayout>
+            <h1 className="f1 tc">Stepper input</h1>
+            <div className="lh-copy mb3">
+                The content of minus and plus buttons are centered by using the technique in the <Link to="/centering" className="link">Centering</Link> page.
+            </div>
+            <BrowserFrame
+                content={
+                    <div className="h-100 flex flex-column items-center justify-center">
+                        <div className="b--black-30 ba br2 flex h2 w4">
+                            <button className="bg-black-05 bn flex items-center justify-center pointer w2" onClick={decrease}>-</button>
+                            <div className="b--black-30 ba bb-0 bt-0 h-100" style={{ flex: 1 }}>
+                                <input type="text" className="bn h-100 pa2 w-100" value={value} onChange={change} />
+                            </div>
+                            <button className="bg-black-05 bn flex items-center justify-center pointer w2" onClick={increase}>+</button>
+                        </div>
+                    </div>
+                }
+                source={
+<SampleCode
+lang="html"
+code={`
+<div style="
+    display: flex;
+
+    /* Border */
+    border: 1px solid rgba(0, 0, 0, .3);
+
+    /* Size */
+    height: 32px;
+    width: 128px;
+">
+    <!-- Minus button -->
+    <button style="
+        /* Content is centered */            
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        
+        /* Size */
+        width: 32px;
+    ">-</button>
+
+    <!-- Input container -->
+    <div style="flex: 1">
+        <input type="text" style="
+            /* Take full size of its container */
+            height: 100%;
+            width: 100%;
+        " />
+    </div>
+
+    <!-- Plus button -->
+    <button style="
+        /* Content is centered */                    
+        align-items: center;
+        display: flex;
+        justify-content: center;
+
+        /* Size */
+        width: 32px;
+    ">+</button>
+</div>
+`}
+/>
+                }
+            />
+        </DetailsLayout>
+    );
+};
+
+export default StepperInput;