feat: progress: add progress component to octuple

src/components/DateTimePicker/DatePicker/Styles/mixins.scss

@@ -55,19 +55,6 @@ $picker-input-padding-vertical: max(
     padding: $padding-top 0 $padding-bottom $padding-horizontal;
 }
 
-// Picker css reset
-@mixin reset-component() {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    color: var(--text-primary-color);
-    font-size: 14px;
-    font-variant: tabular-nums;
-    line-height: 1.5715;
-    list-style: none;
-    font-feature-settings: 'tnum';
-}
-
 // Picker scroll bars
 @mixin scroll-bars() {
     -ms-overflow-style: none;

src/components/Form/Styles/mixins.scss

@@ -1,15 +1,3 @@
-@mixin reset-component() {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    color: var(--text-primary-color);
-    font-size: $text-font-size-2;
-    font-variant: tabular-nums;
-    line-height: 1.5715;
-    list-style: none;
-    font-feature-settings: 'tnum';
-}
-
 @mixin reset-form() {
     legend {
         display: block;

src/components/Progress/Circle.tsx

@@ -0,0 +1,88 @@
+import React, { FC } from 'react';
+import OcCircle, { VIEW_BOX_SIZE } from './Internal/OcCircle';
+import { CircleProps } from './Progress.types';
+import { getSuccessPercent, validProgress } from './Utils';
+import { mergeClasses } from '../../shared/utilities';
+
+import styles from './progress.module.scss';
+
+function getPercentage({ percent, success }: CircleProps) {
+    const realSuccessPercent = validProgress(getSuccessPercent({ success }));
+    return [
+        realSuccessPercent,
+        validProgress(validProgress(percent) - realSuccessPercent),
+    ];
+}
+
+function getStrokeColor({
+    success = {},
+    strokeColor,
+}: Partial<CircleProps>): (string | Record<string, string>)[] {
+    const { strokeColor: successColor } = success;
+    return [successColor || 'var(--success-color)', strokeColor || null!];
+}
+
+const Circle: FC<CircleProps> = (props) => {
+    const {
+        children,
+        gapDegree,
+        gapPosition,
+        strokeLinecap = 'butt',
+        strokeWidth = VIEW_BOX_SIZE / 1.6,
+        success,
+        trailColor = null as any,
+        type,
+        width,
+    } = props;
+
+    const circleSize = width || 120;
+    const circleStyle = {
+        width: circleSize,
+        height: circleSize,
+        fontSize: circleSize * 0.15 + 4,
+    } as React.CSSProperties;
+    const circleWidth = strokeWidth || 4;
+    const gapPos =
+        gapPosition || (type === 'dashboard' && 'bottom') || undefined;
+
+    const getGapDegree = () => {
+        // Support gapDeg = 0 when type = 'dashboard'
+        if (gapDegree || gapDegree === 0) {
+            return gapDegree;
+        }
+        if (type === 'dashboard') {
+            return 75;
+        }
+        return undefined;
+    };
+
+    const isGradient: boolean =
+        Object.prototype.toString.call(props.strokeColor) === '[object Object]';
+    const strokeColor: (string | Record<string, string>)[] = getStrokeColor({
+        success,
+        strokeColor: props.strokeColor,
+    });
+
+    const wrapperClassNames: string = mergeClasses([
+        styles.progressInner,
+        { [styles.progressCircleGradient]: isGradient },
+    ]);
+
+    return (
+        <div className={wrapperClassNames} style={circleStyle}>
+            <OcCircle
+                gapDegree={getGapDegree()}
+                gapPosition={gapPos}
+                percent={getPercentage(props)}
+                strokeColor={strokeColor}
+                strokeLinecap={strokeLinecap}
+                strokeWidth={circleWidth}
+                trailColor={trailColor}
+                trailWidth={circleWidth}
+            />
+            {children}
+        </div>
+    );
+};
+
+export default Circle;

src/components/Progress/Internal/Common.ts

@@ -0,0 +1,44 @@
+import { useRef, useEffect } from 'react';
+import { OcProgressProps } from './OcProgress.types';
+
+export const defaultProps: Partial<OcProgressProps> = {
+    classNames: '',
+    percent: 0,
+    strokeColor: 'var(--primary-color-60)',
+    strokeLinecap: 'round',
+    strokeWidth: 1,
+    style: {},
+    trailColor: 'var(--accent-color-10)',
+    trailWidth: 1,
+    gapPosition: 'bottom',
+};
+
+export const useTransitionDuration = (): SVGPathElement[] => {
+    const pathsRef = useRef<SVGPathElement[]>([]);
+    const prevTimeStamp = useRef(null);
+
+    useEffect(() => {
+        const now = Date.now();
+        let updated = false;
+
+        pathsRef.current.forEach((path) => {
+            if (!path) {
+                return;
+            }
+
+            updated = true;
+            const pathStyle = path.style;
+            pathStyle.transitionDuration = '.3s, .3s, .3s, .06s';
+
+            if (prevTimeStamp.current && now - prevTimeStamp.current < 100) {
+                pathStyle.transitionDuration = '0s, 0s';
+            }
+        });
+
+        if (updated) {
+            prevTimeStamp.current = Date.now();
+        }
+    });
+
+    return pathsRef.current;
+};