From 848909587cc116f3318c28f2f2e073ae68893cce Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Thu, 12 Dec 2019 20:16:44 +0700
Subject: [PATCH 1/2] Cleanup

---
 client/patterns/avatar/Cover.tsx                       | 6 +++---
 client/patterns/avatar/Details.tsx                     | 6 +++---
 client/patterns/toggle-password-visibility/Details.tsx | 6 +++---
 client/patterns/upload-button/Cover.tsx                | 6 +++---
 client/patterns/upload-button/Details.tsx              | 6 +++---
 5 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/client/patterns/avatar/Cover.tsx b/client/patterns/avatar/Cover.tsx
index b0de94c..b030bcf 100644
--- a/client/patterns/avatar/Cover.tsx
+++ b/client/patterns/avatar/Cover.tsx
@@ -27,11 +27,11 @@ const Cover: React.FC<{}> = () => {
                     <svg
                         viewBox="0 0 24 24"
                         style={{
-                            fill: "none",
+                            fill: 'none',
                             height: '100%',
                             stroke: "#FFF",
-                            strokeLinecap: "round",
-                            strokeLinejoin: "round",
+                            strokeLinecap: 'round',
+                            strokeLinejoin: 'round',
                             strokeWidth: 1,
                             width: '100%',
                         }}
diff --git a/client/patterns/avatar/Details.tsx b/client/patterns/avatar/Details.tsx
index 123eaff..281e7e8 100644
--- a/client/patterns/avatar/Details.tsx
+++ b/client/patterns/avatar/Details.tsx
@@ -33,11 +33,11 @@ const Details: React.FC<{}> = () => {
                                 <svg
                                     viewBox="0 0 24 24"
                                     style={{
-                                        fill: "none",
+                                        fill: 'none',
                                         height: '100%',
                                         stroke: "#FFF",
-                                        strokeLinecap: "round",
-                                        strokeLinejoin: "round",
+                                        strokeLinecap: 'round',
+                                        strokeLinejoin: 'round',
                                         strokeWidth: 1,
                                         width: '100%',
                                     }}
diff --git a/client/patterns/toggle-password-visibility/Details.tsx b/client/patterns/toggle-password-visibility/Details.tsx
index 90dfbcd..9df6cbb 100644
--- a/client/patterns/toggle-password-visibility/Details.tsx
+++ b/client/patterns/toggle-password-visibility/Details.tsx
@@ -47,11 +47,11 @@ const Details: React.FC<{}> = () => {
                                         <svg
                                             viewBox="0 0 24 24"
                                             style={{
-                                                fill: "none",
+                                                fill: 'none',
                                                 height: '24px',
                                                 stroke: "rgba(0, 0, 0, 0.4)",
-                                                strokeLinecap: "round",
-                                                strokeLinejoin: "round",
+                                                strokeLinecap: 'round',
+                                                strokeLinejoin: 'round',
                                                 strokeWidth: 1,
                                                 width: '24px',
                                             }}
diff --git a/client/patterns/upload-button/Cover.tsx b/client/patterns/upload-button/Cover.tsx
index 7b5e65b..0c86914 100644
--- a/client/patterns/upload-button/Cover.tsx
+++ b/client/patterns/upload-button/Cover.tsx
@@ -31,11 +31,11 @@ const Cover: React.FC<{}> = () => {
                         <svg
                             viewBox="0 0 24 24"
                             style={{
-                                fill: "none",
+                                fill: 'none',
                                 height: '16px',
                                 stroke: "rgba(0, 0, 0, 0.4)",
-                                strokeLinecap: "round",
-                                strokeLinejoin: "round",
+                                strokeLinecap: 'round',
+                                strokeLinejoin: 'round',
                                 strokeWidth: 1,
                                 width: '16px',
                             }}
diff --git a/client/patterns/upload-button/Details.tsx b/client/patterns/upload-button/Details.tsx
index 9609a7e..783fd49 100644
--- a/client/patterns/upload-button/Details.tsx
+++ b/client/patterns/upload-button/Details.tsx
@@ -51,11 +51,11 @@ const Details: React.FC<{}> = () => {
                                         <svg
                                             viewBox="0 0 24 24"
                                             style={{
-                                                fill: "none",
+                                                fill: 'none',
                                                 height: '24',
                                                 stroke: "rgba(0, 0, 0, 0.4)",
-                                                strokeLinecap: "round",
-                                                strokeLinejoin: "round",
+                                                strokeLinecap: 'round',
+                                                strokeLinejoin: 'round',
                                                 strokeWidth: 1,
                                                 width: '24',
                                             }}

From f81388b133be8b8c6c525a748a7aa60f016b45b9 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Thu, 12 Dec 2019 20:16:59 +0700
Subject: [PATCH 2/2] Add validation icon pattern

---
 client/constants/Pattern.ts                 |   1 +
 client/pages/ExplorePage.tsx                |   3 +-
 client/pages/HomePage.tsx                   |   2 +-
 client/patterns/validation-icon/Cover.tsx   |  56 ++++++++
 client/patterns/validation-icon/Details.tsx | 146 ++++++++++++++++++++
 public/sitemap.xml                          |   1 +
 6 files changed, 207 insertions(+), 2 deletions(-)
 create mode 100644 client/patterns/validation-icon/Cover.tsx
 create mode 100644 client/patterns/validation-icon/Details.tsx

diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index 0ee4c23..34f8e94 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -62,6 +62,7 @@ enum Pattern {
     Tab = 'Tab',
     TogglePasswordVisibility = 'Toggle password visibility',
     UploadButton = 'Upload button',
+    ValidationIcon = 'Validation icon',
     Wizard = 'Wizard',
 }
 
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index db0689a..6a75468 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -62,7 +62,7 @@ const ExplorePage = () => {
                         textAlign: 'center',
                     }}
                 >
-                    Here is the collection of 64 patterns
+                    Here is the collection of 65 patterns
                 </h2>
                 <div style={{ marginBottom: '32px', textAlign: 'center' }}>
                     All covers you see in this page are made with CSS only. Inspect them! 🎉
@@ -168,6 +168,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.RadialProgressBar} />
                         <CoverCard pattern={Pattern.ResizableElement} />
                         <CoverCard pattern={Pattern.PresenceIndicator} />
+                        <CoverCard pattern={Pattern.ValidationIcon} />
                     </div>
                 </section>
             </div>
diff --git a/client/pages/HomePage.tsx b/client/pages/HomePage.tsx
index 218443e..ba4e5ae 100644
--- a/client/pages/HomePage.tsx
+++ b/client/pages/HomePage.tsx
@@ -170,7 +170,7 @@ const HomePage = () => {
                                 marginBottom: '16px',
                             }}
                         >
-                            64 patterns
+                            65 patterns
                         </div>
                         <Link
                             to="/patterns"
diff --git a/client/patterns/validation-icon/Cover.tsx b/client/patterns/validation-icon/Cover.tsx
new file mode 100644
index 0000000..2d16894
--- /dev/null
+++ b/client/patterns/validation-icon/Cover.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '4px',
+                        height: '32px',
+                        position: 'relative',
+                        width: '100%',
+                    }}
+                >
+                    <i
+                        style={{
+                            position: 'absolute',
+                            right: '4px',
+                            top: '50%',
+                            transform: 'translate(0, -50%)',
+                        }}
+                    >
+                        <svg
+                            viewBox="0 0 24 24"
+                            style={{
+                                fill: 'none',
+                                height: '16px',
+                                stroke: "rgba(0, 0, 0, 0.5)",
+                                strokeLinecap: 'round',
+                                strokeLinejoin: 'round',
+                                strokeWidth: 1,
+                                width: '16px',
+                            }}
+                        >
+                            <path d={`M23.5,0.499l-16.5,23l-6.5-6.5`} />
+                        </svg>
+                    </i>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/validation-icon/Details.tsx b/client/patterns/validation-icon/Details.tsx
new file mode 100644
index 0000000..2309fe6
--- /dev/null
+++ b/client/patterns/validation-icon/Details.tsx
@@ -0,0 +1,146 @@
+import React from 'react';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Validation icon">
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    marginBottom: '16px',
+                                    position: 'relative',
+                                    width: '200px',
+                                }}
+                            >
+                                <input
+                                    style={{
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderRadius: '4px',
+                                        height: '32px',
+                                        paddingRight: '24px',
+                                        width: '100%',
+                                    }}
+                                />
+                                <i
+                                    style={{
+                                        position: 'absolute',
+                                        right: '8px',
+                                        top: '50%',
+                                        transform: 'translate(0, -50%)',
+                                        zIndex: 10,
+                                    }}
+                                >
+                                    <svg
+                                        viewBox="0 0 24 24"
+                                        style={{
+                                            fill: 'none',
+                                            height: '16px',
+                                            stroke: "rgba(0, 0, 0, 0.5)",
+                                            strokeLinecap: 'round',
+                                            strokeLinejoin: 'round',
+                                            strokeWidth: 2,
+                                            width: '16px',
+                                        }}
+                                    >
+                                        <path d={`M23.5,0.499l-16.5,23l-6.5-6.5`} />
+                                    </svg>
+                                </i>
+                            </div>
+
+                            <div
+                                style={{
+                                    marginBottom: '16px',
+                                    position: 'relative',
+                                    width: '200px',
+                                }}
+                            >
+                                <input
+                                    style={{
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderRadius: '4px',
+                                        height: '32px',
+                                        paddingRight: '24px',
+                                        width: '100%',
+                                    }}
+                                />
+                                <i
+                                    style={{
+                                        position: 'absolute',
+                                        right: '8px',
+                                        top: '50%',
+                                        transform: 'translate(0, -50%)',
+                                        zIndex: 10,
+                                    }}
+                                >
+                                    <svg
+                                        viewBox="0 0 24 24"
+                                        style={{
+                                            fill: 'none',
+                                            height: '16px',
+                                            stroke: '#e7040f',
+                                            strokeLinecap: 'round',
+                                            strokeLinejoin: 'round',
+                                            strokeWidth: 2,
+                                            width: '16px',
+                                        }}
+                                    >
+                                        <path d={`M0.5,0.499l23,23 M23.5,0.499l-23,23`} />
+                                    </svg>
+                                </i>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    /* Used to position the validation icon */
+    position: relative;
+">
+    <!-- The input -->
+    <input style="
+        /* Border */
+        border: 1px solid rgba(0, 0, 0, 0.3);
+        border-radius: 4px;
+
+        /* Take the full width */
+        width: 100%;
+
+        /* Don't overlap the icon */
+        padding-right: 24px;
+    " />
+
+    <!-- The icon container -->
+    <i style="
+        /* Positioned at the right side */
+        position: absolute;
+        right: 8px;
+        top: 50%;
+        transform: translate(0, -50%);
+
+        z-index: 10;
+    ">
+        <!-- The SVG icon represents any state such as valid, invalid, loading, etc. -->
+        ...
+    </i>
+</div>
+`}
+                />
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 5f7d88a..f36a0cb 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -63,5 +63,6 @@
     <url><loc>https://csslayout.io/patterns/tab</loc></url>
     <url><loc>https://csslayout.io/patterns/toggle-password-visibility</loc></url>
     <url><loc>https://csslayout.io/patterns/upload-button</loc></url>
+    <url><loc>https://csslayout.io/patterns/validation-icon</loc></url>
     <url><loc>https://csslayout.io/patterns/wizard</loc></url>
 </urlset>
\ No newline at end of file