From 10a14b1e48cd9c45066651c9eaa4d9a7e00251bb Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Sat, 23 Nov 2019 21:43:28 +0700
Subject: [PATCH] Add docked at corner

---
 client/App.jsx                               |  1 +
 client/CoverCard.jsx                         |  2 +-
 client/Home.jsx                              |  1 +
 client/patterns/docked-at-corner/Cover.jsx   | 20 +++++++
 client/patterns/docked-at-corner/Details.jsx | 55 ++++++++++++++++++++
 sitemap.xml                                  |  2 +
 6 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 client/patterns/docked-at-corner/Cover.jsx
 create mode 100644 client/patterns/docked-at-corner/Details.jsx

diff --git a/client/App.jsx b/client/App.jsx
index 4d506d6..5403ca4 100644
--- a/client/App.jsx
+++ b/client/App.jsx
@@ -16,6 +16,7 @@ const App = () => {
                 <Route exact={true} path='/button-with-icon'><DetailsLoader pattern="Button with icon" /></Route>
                 <Route exact={true} path='/card'><DetailsLoader pattern="Card" /></Route>
                 <Route exact={true} path='/centering'><DetailsLoader pattern="Centering" /></Route>
+                <Route exact={true} path='/docked-at-corner'><DetailsLoader pattern="Docked at corner" /></Route>
                 <Route exact={true} path='/dot-navigation'><DetailsLoader pattern="Dot navigation" /></Route>
                 <Route exact={true} path='/feature-list'><DetailsLoader pattern="Feature list" /></Route>
                 <Route exact={true} path='/fixed-at-corner'><DetailsLoader pattern="Fixed at corner" /></Route>
diff --git a/client/CoverCard.jsx b/client/CoverCard.jsx
index f304d33..365dc4b 100644
--- a/client/CoverCard.jsx
+++ b/client/CoverCard.jsx
@@ -12,7 +12,7 @@ const CoverCard = ({ pattern }) => {
                 className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3"
             >
                 <CoverLoader pattern={pattern} />
-                <h4 className="f5 mv0 pt3">{pattern}</h4>
+                <h4 className="f5 mv0 pt3 fw6">{pattern}</h4>
             </Link>
         </div>
     );
diff --git a/client/Home.jsx b/client/Home.jsx
index 716ee20..b4eb683 100644
--- a/client/Home.jsx
+++ b/client/Home.jsx
@@ -62,6 +62,7 @@ const Home = () => {
                         <CoverCard pattern="Button with icon" />
                         <CoverCard pattern="Card" />
                         <CoverCard pattern="Centering" />
+                        <CoverCard pattern="Docked at corner" />
                         <CoverCard pattern="Dot navigation" />
                         <CoverCard pattern="Feature list" />
                         <CoverCard pattern="Fixed at corner" />
diff --git a/client/patterns/docked-at-corner/Cover.jsx b/client/patterns/docked-at-corner/Cover.jsx
new file mode 100644
index 0000000..201832f
--- /dev/null
+++ b/client/patterns/docked-at-corner/Cover.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+const Cover = () => {
+    return (
+        <Frame>
+            <div className="h-100 flex flex-column items-center justify-center">
+                <div className="w2 h2 relative ba b--black-30 br2">
+                    <div
+                        className="absolute top-0 right-0 br-pill bg-dark-blue"
+                        style={{ height: '16px', transform: 'translate(50%, -50%)', width: '16px' }}
+                    />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/docked-at-corner/Details.jsx b/client/patterns/docked-at-corner/Details.jsx
new file mode 100644
index 0000000..80fc581
--- /dev/null
+++ b/client/patterns/docked-at-corner/Details.jsx
@@ -0,0 +1,55 @@
+import React from 'react';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+import SampleCode from '../../SampleCode';
+
+const Details = () => {
+    return (
+        <DetailsLayout title="Docked at corner">
+            <BrowserFrame
+                content={
+                    <div className="h-100 flex flex-column items-center justify-center">
+                        <div className="w4 pa3 relative ba b--black-30 br2">
+                            <Rectangle />
+                            <div
+                                className="absolute top-0 right-0 br-pill bg-dark-blue h2 w2"
+                                style={{ transform: 'translate(50%, -50%)' }}
+                            />
+                        </div>
+                    </div>
+                }
+                source={
+<SampleCode
+lang="html"
+code={`
+<div style="
+    position: relative;
+">
+    <!-- Docked at the top right corner -->
+    <div style="
+        position: absolute;
+        right: 0;
+        top: 0;
+        transform: translate(50%, -50%);
+
+        /* Content is centered */
+        align-items: center;
+        display: flex;
+        justify-content: center;
+    ">
+        ...
+    </div>
+
+    ...
+</div>
+`}
+/>
+                }
+            />
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/sitemap.xml b/sitemap.xml
index 5de195c..6bc992a 100644
--- a/sitemap.xml
+++ b/sitemap.xml
@@ -9,6 +9,7 @@
     <url><loc>https://csslayout.io/button-with-icon</loc></url>
     <url><loc>https://csslayout.io/card</loc></url>
     <url><loc>https://csslayout.io/centering</loc></url>
+    <url><loc>https://csslayout.io/docked-at-corner</loc></url>
     <url><loc>https://csslayout.io/dot-navigation</loc></url>
     <url><loc>https://csslayout.io/feature-list</loc></url>
     <url><loc>https://csslayout.io/fixed-at-corner</loc></url>
@@ -21,6 +22,7 @@
     <url><loc>https://csslayout.io/previous-next-buttons</loc></url>
     <url><loc>https://csslayout.io/pricing-table</loc></url>
     <url><loc>https://csslayout.io/progress-bar</loc></url>
+    <url><loc>https://csslayout.io/questions-and-answers</loc></url>
     <url><loc>https://csslayout.io/same-height-columns</loc></url>
     <url><loc>https://csslayout.io/search-box</loc></url>
     <url><loc>https://csslayout.io/separator</loc></url>