Merge pull request #10 from phuoc-ng/input-addon

Add input add-on

client/App.jsx

@@ -4,6 +4,7 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import Home from './Home';
 import Badge from './layouts/Badge';
 import Centering from './layouts/Centering';
+import InputAddon from './layouts/InputAddon';
 import Sidebar from './layouts/Sidebar';
 import StepperInput from './layouts/StepperInput';
 import StickyFooter from './layouts/StickyFooter';
@@ -16,6 +17,7 @@ const App = () => {
                 <Route exact={true} path='/'><Home /></Route>
                 <Route exact={true} path='/badge'><Badge /></Route>
                 <Route exact={true} path='/centering'><Centering /></Route>
+                <Route exact={true} path='/input-add-on'><InputAddon /></Route>
                 <Route exact={true} path='/sidebar'><Sidebar /></Route>
                 <Route exact={true} path='/stepper-input'><StepperInput /></Route>
                 <Route exact={true} path='/sticky-footer'><StickyFooter /></Route>

client/Home.jsx

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 
 import BadgeCover from './covers/BadgeCover';
 import CenterCover from './covers/CenterCover';
+import InputAddonCover from './covers/InputAddonCover';
 import SidebarCover from './covers/SidebarCover';
 import StickyFooterCover from './covers/StickyFooterCover';
 import StickyHeaderCover from './covers/StickyHeaderCover';
@@ -68,6 +69,12 @@ const Home = () => {
                             <h4 className="f4 mv0 pt3">Centering</h4>
                         </Link>
                     </div>
+                    <div className="pa2 w-20">
+                        <Link to="/input-add-on" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
+                            <InputAddonCover />
+                            <h4 className="f4 mv0 pt3">Input addon</h4>
+                        </Link>
+                    </div>
                     <div className="pa2 w-20">
                         <Link to="/stepper-input" className="link flex flex-column items-center justify-center bg-black-05 br2 ph3 pv4">
                             <StepperInputCover />

client/covers/InputAddonCover.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import Frame from '../placeholders/Frame';
+import Line from '../placeholders/Line';
+
+const InputAddonCover = () => {
+    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 w-30 ph2">
+                        <div className="w-100">
+                        <Line />
+                        </div>
+                    </div>
+                    <div className="flex-grow-1"></div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default InputAddonCover;

client/layouts/InputAddon.jsx

@@ -0,0 +1,136 @@
+import React from 'react';
+
+import DetailsLayout from '../DetailsLayout';
+import BrowserFrame from '../placeholders/BrowserFrame';
+import Rectangle from '../placeholders/Rectangle';
+import SampleCode from '../SampleCode';
+import useDocumentTitle from '../useDocumentTitle';
+
+const InputAddon = () => {
+    useDocumentTitle('CSS Layout ∙ Input add-on');
+
+    return (
+        <DetailsLayout>
+            <h1 className="f1 tc">Input add-on</h1>
+            <BrowserFrame
+                content={
+                    <div className="h-100 flex flex-column items-center justify-center">
+                        <div className="w5">
+                            <div className="b--black-30 ba br2 flex h2 w-100 mb3">
+                                <div className="bg-black-05 flex items-center justify-center pa2 br b--black-30 w-30">
+                                    <Rectangle />
+                                </div>
+                                <input type="text" className="bn pa2 flex-auto" style={{ marginRight: '1px' }} />
+                            </div>
+                            <div className="b--black-30 ba br2 flex h2 w-100 mb3">
+                                <input type="text" className="bn pa2 flex-auto" style={{ marginLeft: '1px' }} />
+                                <div className="bg-black-05 flex items-center justify-center pa2 bl b--black-30 w-40">
+                                    <Rectangle />
+                                </div>
+                            </div>
+                            <div className="b--black-30 ba br2 flex h2 w-100">
+                                <div className="bg-black-05 flex items-center justify-center pa2 br b--black-30 w-20">
+                                    <Rectangle />
+                                </div>
+                                <input type="text" className="bn pa2 flex-auto" />
+                                <div className="bg-black-05 flex items-center justify-center pa2 bl b--black-30 w-30">
+                                    <Rectangle />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                }
+                source={
+<SampleCode
+lang="html"
+code={`
+<!-- Add-on prepended -->
+<div style="
+    display: flex;
+
+    /* Take full size */
+    width: 100%;
+">
+    <!-- Add-on -->
+    <div style="
+        /* Content is centered */            
+        align-items: center;
+        display: flex;
+        justify-content: center;
+    ">
+        ...
+    </div>
+
+    <!-- Input -->
+    <input type="text" style="
+        /* Take the remaining width */
+        flex: 1;
+    " />
+</div>
+
+<!-- Add-on appended -->
+<div style="
+    display: flex;
+
+    /* Take full size */
+    width: 100%;
+">
+    <!-- Input -->
+    <input type="text" style="
+        /* Take the remaining width */
+        flex: 1;
+    " />
+
+    <!-- Add-on -->
+    <div style="
+        /* Content is centered */            
+        align-items: center;
+        display: flex;
+        justify-content: center;
+    ">
+        ...
+    </div>
+</div>
+
+<!-- Appended and prepended add-ons -->
+<div style="
+    display: flex;
+
+    /* Take full size */
+    width: 100%;
+">
+    <!-- Add-on -->
+    <div style="
+        /* Content is centered */            
+        align-items: center;
+        display: flex;
+        justify-content: center;
+    ">
+        ...
+    </div>
+
+    <!-- Input -->
+    <input type="text" style="
+        /* Take the remaining width */
+        flex: 1;
+    " />
+
+    <!-- Add-on -->
+    <div style="
+        /* Content is centered */            
+        align-items: center;
+        display: flex;
+        justify-content: center;
+    ">
+        ...
+    </div>
+</div>
+`}
+/>
+                }
+            />
+        </DetailsLayout>
+    );
+};
+
+export default InputAddon;