From 9f91d36b6d3e83cfc60a5d1d6adb457fb4f59f76 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Tue, 20 Sep 2022 17:58:20 +0700
Subject: [PATCH] feat: Radial progress bar

---
 .../patterns/radial-progress-bar.njk          |   9 +
 contents/index.njk                            |   1 +
 contents/radial-progress-bar.md               | 126 ++++++++++++
 pages/radial-progress-bar/index.tsx           | 182 ------------------
 patterns/radial-progress-bar/Cover.tsx        |  61 ------
 styles/index.scss                             |   1 +
 styles/patterns/_radial-progress-bar.scss     |  85 ++++++++
 7 files changed, 222 insertions(+), 243 deletions(-)
 create mode 100644 contents/_includes/patterns/radial-progress-bar.njk
 create mode 100644 contents/radial-progress-bar.md
 delete mode 100644 pages/radial-progress-bar/index.tsx
 delete mode 100644 patterns/radial-progress-bar/Cover.tsx
 create mode 100644 styles/patterns/_radial-progress-bar.scss

diff --git a/contents/_includes/patterns/radial-progress-bar.njk b/contents/_includes/patterns/radial-progress-bar.njk
new file mode 100644
index 0000000..fd6a01d
--- /dev/null
+++ b/contents/_includes/patterns/radial-progress-bar.njk
@@ -0,0 +1,9 @@
+<div class="radial-progress-bar">
+    <div class="radial-progress-bar__percentages">
+        75%
+    </div>
+    <div class="radial-progress-bar__curve">
+        <div class="radial-progress-bar__half radial-progress-bar__half--first"></div>
+        <div class="radial-progress-bar__half radial-progress-bar__half--second"></div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index b68b9f0..cc3eb92 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -74,6 +74,7 @@ eleventyExcludeFromCollections: true
         <div class="category__posts">
             {% pattern "Popover arrow" %}{% include "patterns/popover-arrow.njk" %}{% endpattern %}
             {% pattern "Progress bar" %}{% include "patterns/progress-bar.njk" %}{% endpattern %}
+            {% pattern "Radial progress bar" %}{% include "patterns/radial-progress-bar.njk" %}{% endpattern %}
         </div>
     </div>
 
diff --git a/contents/radial-progress-bar.md b/contents/radial-progress-bar.md
new file mode 100644
index 0000000..5624186
--- /dev/null
+++ b/contents/radial-progress-bar.md
@@ -0,0 +1,126 @@
+---
+layout: layouts/post.njk
+title: Radial progress bar
+description: Create a radial progress bar with CSS flexbox
+keywords: css clip rect, css flexbox, css progress bar
+---
+
+## HTML
+
+```html
+<div class="radial-progress-bar">
+    <!-- Show number of percentages -->
+    <div class="radial-progress-bar__percentages">
+        ...
+    </div>
+
+    <!-- The curve -->
+    <div class="radial-progress-bar__curve">
+        <!-- The first half -->
+        <div class="radial-progress-bar__half radial-progress-bar__half--first"></div>
+
+        <!-- The second half -->
+        <div class="radial-progress-bar__half radial-progress-bar__half--second"></div>
+    </div>
+</div>
+```
+
+## CSS
+
+```css
+:root {
+    --radial-progress-bar-size: 8rem; 
+    --radial-progress-bar-border-width: 0.75rem;
+}
+
+.radial-progress-bar {
+    position: relative;
+    height: var(--radial-progress-bar-size);
+    width: var(--radial-progress-bar-size);
+}
+
+.radial-progress-bar__percentages {
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Rounded border */
+    border: var(--radial-progress-bar-border-width) solid #d1d5db;
+    border-radius: 9999px;
+
+    /* Size */
+    height: 100%;
+    width: 100%;
+}
+
+.radial-progress-bar__curve {
+    /* Position */
+    left: 0;
+    position: absolute;
+    top: 0;
+
+    /* Take full size */
+    height: 100%;
+    width: 100%;
+
+    /* If percentages is less than 50 */
+    /* clip: rect(
+        0px,
+        var(--radial-progress-bar-size),
+        var(--radial-progress-bar-size),
+        calc(var(--radial-progress-bar-size) * 0.5),
+        0px
+    ); */
+
+    /* If percentages is greater than or equals to 50 */
+    clip: rect(auto, auto, auto, auto);
+}
+
+.radial-progress-bar__half {
+    /* 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: var(--radial-progress-bar-border-width) solid #3b82f6;
+    border-radius: 9999px;
+}
+
+.radial-progress-bar__half--first {
+    /* Position */
+    clip: rect(
+        0px,
+        calc(var(--radial-progress-bar-size) * 0.5),
+        var(--radial-progress-bar-size),
+        0px
+    );
+    
+    /* Number of percentages * 360 / 100 */
+    transform: rotate(270deg);
+}
+
+.radial-progress-bar__half--second {
+    /* Position */
+    clip: rect(
+        0px,
+        calc(var(--radial-progress-bar-size) * 0.5),
+        var(--radial-progress-bar-size),
+        0px
+    );
+
+    /* If percentages is less than 50 */
+    /* transform: rotate(0deg); */
+
+    /* If percentages is greater than or equals to 50 */
+    transform: rotate(180deg);
+}
+```
+
+{% demo %}
+{% include "patterns/radial-progress-bar.njk" %}
+{% enddemo %}
diff --git a/pages/radial-progress-bar/index.tsx b/pages/radial-progress-bar/index.tsx
deleted file mode 100644
index 1936b12..0000000
--- a/pages/radial-progress-bar/index.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-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 (
-        <PatternLayout pattern={Pattern.RadialProgressBar}>
-            <Head>
-                <meta name="description" content="Create a radial progress bar with CSS flexbox" />
-                <meta name="og:description" content="Create a radial progress bar with CSS flexbox" />
-                <meta name="twitter:description" content="Create a radial progress bar with CSS flexbox" />
-                <meta name="keywords" content="css clip rect, css flexbox, css progress bar" />
-            </Head>
-            <BrowserFrame
-                html={`
-<div class="container">
-    <!-- Show number of percentages -->
-    <div class="container__percentages">
-        ...
-    </div>
-
-    <!-- The curve -->
-    <div class="container__curve">
-        <!-- The first half -->
-        <div class="container__half container__half--first"></div>
-
-        <!-- The second half -->
-        <div class="container__half container__half--second"></div>
-    </div>
-</div>
-`}
-                css={`
-                    .container {
-                        position: relative;
-                    }
-
-                    .container__percentages {
-                        /* Center the content */
-                        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;
-                    }
-
-                    .container__curve {
-                        /* 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);
-                    }
-
-                    .container__half {
-                        /* 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;
-                    }
-
-                    .container__half--first {
-                        /* Position */
-                        clip: rect(0px, 64px, 128px, 0px);
-                        transform: rotate(162deg); /* Number of percentages * 360 / 100 */
-                    }
-
-                    .container__half--second {
-                        /* 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
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '8px',
-                    }}
-                >
-                    <div style={{ marginRight: '16px' }}>
-                        <RadialProgress percentages={45} />
-                    </div>
-                    <RadialProgress percentages={80} />
-                </div>
-            </BrowserFrame>
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/radial-progress-bar/Cover.tsx b/patterns/radial-progress-bar/Cover.tsx
deleted file mode 100644
index cb20d3a..0000000
--- a/patterns/radial-progress-bar/Cover.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import * as 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',
-                        }}
-                    >
-                        33%
-                    </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/styles/index.scss b/styles/index.scss
index bfc184c..41d9ad8 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -49,6 +49,7 @@
 @import './patterns/progress-bar';
 @import './patterns/property-list';
 @import './patterns/questions-and-answers';
+@import './patterns/radial-progress-bar';
 @import './patterns/ribbon';
 @import './patterns/separator';
 @import './patterns/stacked-cards';
diff --git a/styles/patterns/_radial-progress-bar.scss b/styles/patterns/_radial-progress-bar.scss
new file mode 100644
index 0000000..4220f5d
--- /dev/null
+++ b/styles/patterns/_radial-progress-bar.scss
@@ -0,0 +1,85 @@
+:root {
+    --radial-progress-bar-size: 8rem; 
+    --radial-progress-bar-border-width: 0.75rem;
+}
+
+.radial-progress-bar {
+    position: relative;
+    height: var(--radial-progress-bar-size);
+    width: var(--radial-progress-bar-size);
+}
+
+.radial-progress-bar__percentages {
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Rounded border */
+    border: var(--radial-progress-bar-border-width) solid #d1d5db;
+    border-radius: 9999px;
+
+    /* Size */
+    height: 100%;
+    width: 100%;
+}
+
+.radial-progress-bar__curve {
+    /* Position */
+    left: 0;
+    position: absolute;
+    top: 0;
+
+    /* Take full size */
+    height: 100%;
+    width: 100%;
+
+    /* If percentages is less than 50 */
+    // clip: rect(0px, var(--radial-progress-bar-size), var(--radial-progress-bar-size), calc(var(--radial-progress-bar-size) * 0.5), 0px);
+
+    /* If percentages is greater than or equals to 50 */
+    clip: rect(auto, auto, auto, auto);
+}
+
+.radial-progress-bar__half {
+    /* 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: var(--radial-progress-bar-border-width) solid #3b82f6;
+    border-radius: 9999px;
+}
+
+.radial-progress-bar__half--first {
+    /* Position */
+    clip: rect(
+        0px,
+        calc(var(--radial-progress-bar-size) * 0.5),
+        var(--radial-progress-bar-size),
+        0px
+    );
+
+    /* Number of percentages * 360 / 100 */
+    transform: rotate(270deg);
+}
+
+.radial-progress-bar__half--second {
+    /* Position */
+    clip: rect(
+        0px,
+        calc(var(--radial-progress-bar-size) * 0.5),
+        var(--radial-progress-bar-size),
+        0px
+    );
+
+    /* If percentages is less than 50 */
+    // transform: rotate(0deg);
+
+    /* If percentages is greater than or equals to 50 */
+    transform: rotate(180deg);
+}
\ No newline at end of file