Add Toggle password visibility

client/App.jsx

@@ -42,6 +42,7 @@ const App = () => {
                 <Route exact={true} path='/sticky-header'><DetailsLoader pattern="Sticky header" /></Route>
                 <Route exact={true} path='/switch'><DetailsLoader pattern="Switch" /></Route>
                 <Route exact={true} path='/tab'><DetailsLoader pattern="Tab" /></Route>
+                <Route exact={true} path='/toggle-password-visibility'><DetailsLoader pattern="Toggle password visibility" /></Route>
                 <Route exact={true} path='/wizard'><DetailsLoader pattern="Wizard" /></Route>
             </RouteSwitch>
         </Router>

client/Home.jsx

@@ -83,6 +83,7 @@ const Home = () => {
                         <CoverCard pattern="Stepper input" />
                         <CoverCard pattern="Switch" />
                         <CoverCard pattern="Tab" />
+                        <CoverCard pattern="Toggle password visibility" />
                         <CoverCard pattern="Wizard" />
                     </div>
                 </div>

client/layouts/Footer.jsx

@@ -53,7 +53,7 @@ const Footer = () => {
                         </li>
                         <li className="mb1">
                             <a href="mailto: me@phuoc.ng" className="link flex items-center">
-                            <span className="bg-black-40 br-pill flex items-center justify-center mr2" style={{ height: '24px', width: '24px' }}>
+                                <span className="bg-black-40 br-pill flex items-center justify-center mr2" style={{ height: '24px', width: '24px' }}>
                                     <svg
                                         viewBox="0 0 24 24"
                                         className="w-60 h-60"

client/patterns/toggle-password-visibility/Cover.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import Circle from '../../placeholders/Circle';
+import Frame from '../../placeholders/Frame';
+
+const Cover = () => {
+    return (
+        <Frame>
+            <div className="h-100 flex flex-column items-center justify-center pa2">
+                <div className="w-100 flex flex-row items-center justify-between ba b--black-30 br2 pa1">
+                    <div className="flex items-center">
+                        <div className="mr1"><Circle size={8} /></div>
+                        <div className="mr1"><Circle size={8} /></div>
+                        <div className="mr1"><Circle size={8} /></div>
+                    </div>
+                    <Circle />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/toggle-password-visibility/Details.jsx

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import SampleCode from '../../SampleCode';
+
+const Details = () => {
+    const [visible, setVisible] = useState(false);
+    const toggle = () => setVisible(v => !v);
+
+    return (
+        <DetailsLayout title="Toggle password visibility">
+            <BrowserFrame
+                content={
+                    <div className="h-100 flex flex-column items-center justify-center">
+                        <div className="w5">
+                            <div className="b--black-30 ba br1 flex">
+                                <input type={visible ? 'text' : 'password'} autoComplete="off" className="pa1 b--transparent" style={{ flex: 1 }} />
+                                <button className="b--transparent pa2" onClick={toggle}>
+                                    <svg
+                                        viewBox="0 0 24 24"
+                                        style={{
+                                            height: '24px',
+                                            fill: "none",
+                                            stroke: "rgba(0, 0, 0, 0.4)",
+                                            strokeLinecap: "round",
+                                            strokeLinejoin: "round",
+                                            strokeWidth: 1,
+                                            width: '24px',
+                                        }}
+                                    >
+                                        <path
+                                            d={
+                                                visible
+                                                ? `M19.518,8.288C20.993,9.357,22.331,10.603,23.5,12c0,0-5.148,6.5-11.5,6.5c-1.017-0.006-2.028-0.162-3-0.464 M4.468,15.7C2.998,14.634,1.666,13.392,0.5,12c0,0,5.148-6.5,11.5-6.5c0.844,0.004,1.683,0.113,2.5,0.325 M8,12 c0-2.209,1.791-4,4-4 M16,12c0,2.209-1.791,4-4,4 M21.75,2.25l-19.5,19.5`
+                                                : `M23.5,12c0,0-5.148,6.5-11.5,6.5S0.5,12,0.5,12S5.648,5.5,12,5.5S23.5,12,23.5,12z M12,8c2.209,0,4,1.791,4,4 s-1.791,4-4,4s-4-1.791-4-4S9.791,8,12,8z M12,10c1.105,0,2,0.895,2,2s-0.895,2-2,2s-2-0.895-2-2`
+                                            }
+                                        />
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                }
+                source={
+<SampleCode
+lang="html"
+code={`
+<div style="
+    display: flex;
+
+    /* Border */
+    border: 1px solid rgba(0, 0, 0, 0.3);
+">
+    <!-- Text input -->
+    <input
+        type="text"
+        style="
+            border-color: transparent;
+            /* Take available width */
+            flex: 1;
+        "
+    />
+
+    <!-- Toggle button sticks to the right -->
+    <button>
+        ...
+    </button>
+</div>
+`}
+/>
+                }
+            />
+        </DetailsLayout>
+    );
+};
+
+export default Details;

sitemap.xml

@@ -30,5 +30,6 @@
     <url><loc>https://csslayout.io/stepper-input</loc></url>
     <url><loc>https://csslayout.io/switch</loc></url>
     <url><loc>https://csslayout.io/tab</loc></url>
+    <url><loc>https://csslayout.io/toggle-password-visibility</loc></url>
     <url><loc>https://csslayout.io/wizard</loc></url>
 </urlset>