From b503032f0d540f8b98e5d73916eeb79f04ae645a Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Sat, 30 Nov 2019 19:04:19 +0700
Subject: [PATCH] Add radial progress bar

---
 client/constants/Pattern.ts                   |   1 +
 client/pages/ExplorePage.tsx                  |   1 +
 client/patterns/radial-progress-bar/Cover.tsx |  61 ++++++
 .../patterns/radial-progress-bar/Details.tsx  | 176 ++++++++++++++++++
 public/sitemap.xml                            |   1 +
 5 files changed, 240 insertions(+)
 create mode 100644 client/patterns/radial-progress-bar/Cover.tsx
 create mode 100644 client/patterns/radial-progress-bar/Details.tsx

diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index 9c3be3e..86e1dfd 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -29,6 +29,7 @@ enum Pattern {
     PropertyList = 'Property list',
     ProgressBar = 'Progress bar',
     QuestionsAndAnswers = 'Questions and answers',
+    RadialProgressBar = 'Radial progress bar',
     RadioSwitch = 'Radio switch',
     Rating = 'Rating',
     SameHeightColumns = 'Same height columns',
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 8e178be..3d517ac 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -112,6 +112,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.PropertyList} />
                         <CoverCard pattern={Pattern.ProgressBar} />
                         <CoverCard pattern={Pattern.QuestionsAndAnswers} />
+                        <CoverCard pattern={Pattern.RadialProgressBar} />
                         <CoverCard pattern={Pattern.RadioSwitch} />
                         <CoverCard pattern={Pattern.Rating} />
                         <CoverCard pattern={Pattern.SameHeightColumns} />
diff --git a/client/patterns/radial-progress-bar/Cover.tsx b/client/patterns/radial-progress-bar/Cover.tsx
new file mode 100644
index 0000000..4c43e26
--- /dev/null
+++ b/client/patterns/radial-progress-bar/Cover.tsx
@@ -0,0 +1,61 @@
+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={{ position: 'relative' }}>
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            border: '8px solid rgba(0, 0, 0, 0.3)',
+                            borderRadius: '9999px',
+                            color: 'rgba(0, 0, 0, 0.3)',
+                            display: 'flex',
+                            height: '64px',
+                            justifyContent: 'center',
+                            width: '64px',
+                        }}
+                    >
+                        45%
+                    </div>
+                    <div
+                        style={{
+                            clip: 'rect(0px, 64px, 64px, 32px)',
+                            height: '100%',
+                            left: 0,
+                            position: 'absolute',
+                            top: 0,
+                            width: '100%',
+                        }}
+                    >
+                        <div
+                            style={{
+                                border: '8px solid #00449E',
+                                borderRadius: '9999px',
+                                clip: 'rect(0px, 32px, 64px, 0px)',
+                                height: '100%',
+                                position: 'absolute',
+                                transform: 'rotate(120deg)',
+                                width: '100%',
+                            }}
+                        />
+                    </div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/radial-progress-bar/Details.tsx b/client/patterns/radial-progress-bar/Details.tsx
new file mode 100644
index 0000000..faf9e8f
--- /dev/null
+++ b/client/patterns/radial-progress-bar/Details.tsx
@@ -0,0 +1,176 @@
+import React from 'react';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+interface RadialProgressProps {
+    percentages: number;
+}
+
+const RadialProgress: React.FC<RadialProgressProps> = ({ percentages }) => {
+    return (
+        <div style={{ position: 'relative' }}>
+            <div
+                style={{
+                    alignItems: 'center',
+                    border: '12px solid rgba(0, 0, 0, 0.3)',
+                    borderRadius: '9999px',
+                    color: 'rgba(0, 0, 0, 0.3)',
+                    display: 'flex',
+                    fontSize: '24px',
+                    height: '128px',
+                    justifyContent: 'center',
+                    width: '128px',
+                }}
+            >
+                {percentages}%
+            </div>
+            <div
+                style={{
+                    clip: percentages >= 50
+                            ? 'rect(auto, auto, auto, auto)'
+                            : 'rect(0px, 128px, 128px, 64px)',
+                    height: '100%',
+                    left: 0,
+                    position: 'absolute',
+                    top: 0,
+                    width: '100%',
+                }}
+            >
+                <div
+                    style={{
+                        border: '12px solid #00449E',
+                        borderRadius: '9999px',
+                        clip: 'rect(0px, 64px, 128px, 0px)',
+                        height: '100%',
+                        position: 'absolute',
+                        transform: `rotate(${percentages * 360 / 100}deg)`,
+                        width: '100%',
+                    }}
+                />
+                <div
+                    style={{
+                        border: '12px solid #00449E',
+                        borderRadius: '9999px',
+                        clip: 'rect(0px, 64px, 128px, 0px)',
+                        height: '100%',
+                        position: 'absolute',
+                        transform: `rotate(${percentages >= 50 ? 180 : 0}deg)`,
+                        width: '100%',
+                    }}
+                />
+            </div>
+        </div>
+    );
+};
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Radial progress bar">
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div style={{ marginRight: '16px' }}><RadialProgress percentages={45} /></div>
+                            <RadialProgress percentages={80} />
+                        </div>
+                    )}
+                    source={`
+<div style="
+    position: relative;
+">
+    <!-- Show number of percentages -->
+    <div style="
+        /* Content is centered */
+        align-items: center;
+        display: flex;
+        justify-content: center;
+
+        /* Rounded border */
+        border: 12px solid rgba(0, 0, 0, 0.3);
+        border-radius: 9999px;
+
+        /* Size */
+        height: 128px;
+        width: 128px;
+    ">
+        ...
+    </div>
+
+    <!-- The curve -->
+    <div style="
+        /* Position */
+        left: 0;
+        position: absolute;
+        top: 0;
+
+        /* Take full size */
+        height: 100%;
+        width: 100%;
+
+        /* If percentages is less than 50 */
+        clip: rect(0px, 128px, 128px, 64px);
+
+        /* If percentages is greater than or equals to 50 */
+        clip: rect(auto, auto, auto, auto);
+    ">
+        <!-- The first half -->
+        <div style="
+            /* Take full size */
+            height: 100%;
+            position: absolute;
+            width: 100%;
+
+            /*
+            Background color of curve.
+            The border width should be the same as the area showing the percentages
+            */
+            border: 12px solid rgb(0, 68, 158);
+            border-radius: 9999px;
+
+            /* Position */
+            clip: rect(0px, 64px, 128px, 0px);
+            transform: rotate(162deg); /* Number of percentages * 360 / 100 */
+        " />
+
+        <!-- The second half -->
+        <div style="
+            /* Take full size */
+            height: 100%;
+            position: absolute;
+            width: 100%;
+
+            /*
+            Background color of curve.
+            The border width should be the same as the area showing the percentages
+            */
+            border: 12px solid rgb(0, 68, 158);
+            border-radius: 9999px;
+
+            /* Position */
+            clip: rect(0px, 64px, 128px, 0px);
+
+            /* If percentages is less than 50 */
+            transform: rotate(0deg);
+
+            /* If percentages is greater than or equals to 50 */
+            transform: rotate(180deg);
+        " />
+    </div>
+</div>
+`}
+                />
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 719a0c8..cdc60c3 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -34,6 +34,7 @@
     <url><loc>https://csslayout.io/patterns/progress-bar</loc></url>
     <url><loc>https://csslayout.io/patterns/property-list</loc></url>
     <url><loc>https://csslayout.io/patterns/questions-and-answers</loc></url>
+    <url><loc>https://csslayout.io/patterns/radial-progress-bar</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/same-height-columns</loc></url>