From b2c7900017bab1c5eab84430abede622f45a380f Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Tue, 10 Dec 2019 21:16:12 +0700
Subject: [PATCH] Add resizable element pattern

---
 client/constants/Pattern.ts                   |   1 +
 client/pages/ExplorePage.tsx                  |   1 +
 client/pages/HomePage.tsx                     |   2 +-
 client/patterns/resizable-element/Cover.tsx   | 128 ++++++++
 client/patterns/resizable-element/Details.tsx | 303 ++++++++++++++++++
 public/sitemap.xml                            |   1 +
 6 files changed, 435 insertions(+), 1 deletion(-)
 create mode 100644 client/patterns/resizable-element/Cover.tsx
 create mode 100644 client/patterns/resizable-element/Details.tsx

diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index a8972de..9e8b96f 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -42,6 +42,7 @@ enum Pattern {
     RadioButtonGroup = 'Radio button group',
     RadioSwitch = 'Radio switch',
     Rating = 'Rating',
+    ResizableElement = 'Resizable element',
     Ribbon = 'Ribbon',
     SameHeightColumns = 'Same height columns',
     SearchBox = 'Search box',
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index c8267a3..5d4dc49 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -164,6 +164,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.PopoverArrow} />
                         <CoverCard pattern={Pattern.ProgressBar} />
                         <CoverCard pattern={Pattern.RadialProgressBar} />
+                        <CoverCard pattern={Pattern.ResizableElement} />
                         <CoverCard pattern={Pattern.PresenceIndicator} />
                     </div>
                 </section>
diff --git a/client/pages/HomePage.tsx b/client/pages/HomePage.tsx
index 66cf8e0..93ccd3b 100644
--- a/client/pages/HomePage.tsx
+++ b/client/pages/HomePage.tsx
@@ -170,7 +170,7 @@ const HomePage = () => {
                                 marginBottom: '16px',
                             }}
                         >
-                            60+ patterns
+                            62 patterns
                         </div>
                         <Link
                             to="/patterns"
diff --git a/client/patterns/resizable-element/Cover.tsx b/client/patterns/resizable-element/Cover.tsx
new file mode 100644
index 0000000..05f9d44
--- /dev/null
+++ b/client/patterns/resizable-element/Cover.tsx
@@ -0,0 +1,128 @@
+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: '16px',
+                }}
+            >
+                <div
+                    style={{
+                        border: '1px dashed rgba(0, 0, 0, 0.3)',
+                        height: '100%',
+                        position: 'relative',
+                        width: '100%',
+                    }}
+                >
+                    <div
+                        style={{
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            cursor: 'nwse-resize',
+                            height: '12px',
+                            left: 0,
+                            position: 'absolute',
+                            top: 0,
+                            transform: 'translate(-50%, -50%)',
+                            width: '12px',
+                        }}
+                    />
+                    <div
+                        style={{
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            cursor: 'ns-resize',
+                            height: '12px',
+                            left: '50%',
+                            position: 'absolute',
+                            top: 0,
+                            transform: 'translate(-50%, -50%)',
+                            width: '12px',
+                        }}
+                    />
+                    <div
+                        style={{
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            cursor: 'nesw-resize',
+                            height: '12px',
+                            position: 'absolute',
+                            right: 0,
+                            top: 0,
+                            transform: 'translate(50%, -50%)',
+                            width: '12px',
+                        }}
+                    />
+                    <div
+                        style={{
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            cursor: 'ew-resize',
+                            height: '12px',
+                            position: 'absolute',
+                            right: 0,
+                            top: '50%',
+                            transform: 'translate(50%, -50%)',
+                            width: '12px',
+                        }}
+                    />
+                    <div
+                        style={{
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            bottom: 0,
+                            cursor: 'nwse-resize',
+                            height: '12px',
+                            position: 'absolute',
+                            right: 0,
+                            transform: 'translate(50%, 50%)',
+                            width: '12px',
+                        }}
+                    />
+                    <div
+                        style={{
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            bottom: 0,
+                            cursor: 'ns-resize',
+                            height: '12px',
+                            position: 'absolute',
+                            right: '50%',
+                            transform: 'translate(50%, 50%)',
+                            width: '12px',
+                        }}
+                    />
+                    <div
+                        style={{
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            bottom: 0,
+                            cursor: 'nesw-resize',
+                            height: '12px',
+                            left: 0,
+                            position: 'absolute',
+                            transform: 'translate(-50%, 50%)',
+                            width: '12px',
+                        }}
+                    />
+                    <div
+                        style={{
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            cursor: 'ew-resize',
+                            height: '12px',
+                            left: 0,
+                            position: 'absolute',
+                            top: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            width: '12px',
+                        }}
+                    />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/resizable-element/Details.tsx b/client/patterns/resizable-element/Details.tsx
new file mode 100644
index 0000000..413c91f
--- /dev/null
+++ b/client/patterns/resizable-element/Details.tsx
@@ -0,0 +1,303 @@
+import React from 'react';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Resizable element">
+            <div style={{ padding: '64px 32px' }}>
+                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                    You can move the mouse over each squares located at the corners and the middle of sides to see
+                    the cursors which indicate the associated side can be resized.
+                </div>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    border: '1px dashed rgba(0, 0, 0, 0.3)',
+                                    height: '200px',
+                                    position: 'relative',
+                                    width: '200px',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        cursor: 'nwse-resize',
+                                        height: '12px',
+                                        left: 0,
+                                        position: 'absolute',
+                                        top: 0,
+                                        transform: 'translate(-50%, -50%)',
+                                        width: '12px',
+                                    }}
+                                />
+                                <div
+                                    style={{
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        cursor: 'ns-resize',
+                                        height: '12px',
+                                        left: '50%',
+                                        position: 'absolute',
+                                        top: 0,
+                                        transform: 'translate(-50%, -50%)',
+                                        width: '12px',
+                                    }}
+                                />
+                                <div
+                                    style={{
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        cursor: 'nesw-resize',
+                                        height: '12px',
+                                        position: 'absolute',
+                                        right: 0,
+                                        top: 0,
+                                        transform: 'translate(50%, -50%)',
+                                        width: '12px',
+                                    }}
+                                />
+                                <div
+                                    style={{
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        cursor: 'ew-resize',
+                                        height: '12px',
+                                        position: 'absolute',
+                                        right: 0,
+                                        top: '50%',
+                                        transform: 'translate(50%, -50%)',
+                                        width: '12px',
+                                    }}
+                                />
+                                <div
+                                    style={{
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        bottom: 0,
+                                        cursor: 'nwse-resize',
+                                        height: '12px',
+                                        position: 'absolute',
+                                        right: 0,
+                                        transform: 'translate(50%, 50%)',
+                                        width: '12px',
+                                    }}
+                                />
+                                <div
+                                    style={{
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        bottom: 0,
+                                        cursor: 'ns-resize',
+                                        height: '12px',
+                                        position: 'absolute',
+                                        right: '50%',
+                                        transform: 'translate(50%, 50%)',
+                                        width: '12px',
+                                    }}
+                                />
+                                <div
+                                    style={{
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        bottom: 0,
+                                        cursor: 'nesw-resize',
+                                        height: '12px',
+                                        left: 0,
+                                        position: 'absolute',
+                                        transform: 'translate(-50%, 50%)',
+                                        width: '12px',
+                                    }}
+                                />
+                                <div
+                                    style={{
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        cursor: 'ew-resize',
+                                        height: '12px',
+                                        left: 0,
+                                        position: 'absolute',
+                                        top: '50%',
+                                        transform: 'translate(-50%, -50%)',
+                                        width: '12px',
+                                    }}
+                                />
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    /* Border */
+    border: 1px dashed rgba(0, 0, 0, 0.3);
+
+    /* Used to position the squares */
+    position: relative;
+">
+    <!-- The content -->
+    ...
+
+    <!-- The top left square -->
+    <div style="
+        /* Border */
+        border: 1px solid rgba(0, 0, 0, 0.3);
+
+        /* Resize cursor */
+        cursor: nwse-resize;
+
+        /* Positioned at the top left corner */
+        left: 0px;
+        position: absolute;
+        top: 0px;
+        transform: translate(-50%, -50%);
+
+        /* Size */
+        height: 12px;
+        width: 12px;
+    "/>
+
+    <!-- The top square -->
+    <div style="
+        /* Border */
+        border: 1px solid rgba(0, 0, 0, 0.3);
+
+        /* Resize cursor */
+        cursor: ns-resize;
+
+        /* Positioned at the middle of top side */
+        left: 50%;
+        position: absolute;
+        top: 0px;
+        transform: translate(-50%, -50%);
+
+        /* Size */
+        height: 12px;
+        width: 12px;
+    "/>
+
+    <!-- The top right square -->
+    <div style="
+        /* Border */
+        border: 1px solid rgba(0, 0, 0, 0.3);
+
+        /* Resize cursor */
+        cursor: nesw-resize;
+
+        /* Positioned at the top right corner */
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        transform: translate(50%, -50%);
+
+        /* Size */
+        height: 12px;
+        width: 12px;
+    "/>
+
+    <!-- The right square -->
+    <div style="
+        /* Border */
+        border: 1px solid rgba(0, 0, 0, 0.3);
+
+        /* Resize cursor */
+        cursor: ew-resize;
+
+        /* Positioned at the middle of right side */
+        position: absolute;
+        right: 0px;
+        top: 50%;
+        transform: translate(50%, -50%);
+
+        /* Size */
+        height: 12px;
+        width: 12px;
+    "/>
+
+    <!-- The right bottom square -->
+    <div style="
+        /* Border */
+        border: 1px solid rgba(0, 0, 0, 0.3);
+
+        /* Resize cursor */
+        cursor: nwse-resize;
+
+        /* Positioned at the right bottom corner */
+        bottom: 0px;
+        position: absolute;
+        right: 0px;
+        transform: translate(50%, 50%);
+
+        /* Size */
+        height: 12px;
+        width: 12px;
+    "/>
+
+    <!-- The bottom square -->
+    <div style="
+        /* Border */
+        border: 1px solid rgba(0, 0, 0, 0.3);
+
+        /* Resize cursor */
+        cursor: ns-resize;
+
+        /* Positioned at the middle of bottom side */
+        bottom: 0px;
+        position: absolute;
+        right: 50%;
+        transform: translate(50%, 50%);
+
+        /* Size */
+        height: 12px;
+        width: 12px;
+    "/>
+
+    <!-- The bottom left square -->
+    <div style="
+        /* Border */
+        border: 1px solid rgba(0, 0, 0, 0.3);
+
+        /* Resize cursor */
+        cursor: nesw-resize;
+
+        /* Positioned at the bottom left corner */
+        bottom: 0px;
+        left: 0px;
+        position: absolute;
+        transform: translate(-50%, 50%);
+
+        /* Size */
+        height: 12px;
+        width: 12px;
+    "/>
+
+    <!-- The left square -->
+    <div style="
+        /* Border */
+        border: 1px solid rgba(0, 0, 0, 0.3);
+
+        /* Resize cursor */
+        cursor: ew-resize;
+
+        /* Positioned at the middle of left side */
+        left: 0px;
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+
+        /* Size */
+        height: 12px;
+        width: 12px;
+    "/>
+</div>
+`}
+                />
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 42c87b3..67453dd 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -47,6 +47,7 @@
     <url><loc>https://csslayout.io/patterns/radio-button-group</loc></url>
     <url><loc>https://csslayout.io/patterns/radio-switch</loc></url>
     <url><loc>https://csslayout.io/patterns/rating</loc></url>
+    <url><loc>https://csslayout.io/patterns/resizable-element</loc></url>
     <url><loc>https://csslayout.io/patterns/ribbon</loc></url>
     <url><loc>https://csslayout.io/patterns/same-height-columns</loc></url>
     <url><loc>https://csslayout.io/patterns/search-box</loc></url>