Add types for progress

libraries/core-react/package.json

@@ -81,6 +81,7 @@
     "@equinor/eds-icons": "workspace:*",
     "@equinor/eds-tokens": "workspace:*",
     "@testing-library/react-hooks": "^3.3.0",
+    "csstype": "^3.0.3",
     "focus-visible": "^5.1.0",
     "lodash": "^4.17.19"
   },

libraries/core-react/src/Progress/Circular/CircularProgress.tsx

@@ -0,0 +1,113 @@
+import React, { forwardRef } from 'react'
+import CSS from 'csstype'
+import styled, { css, keyframes } from 'styled-components'
+import { progress as tokens } from '../Progress.tokens'
+
+const indeterminate = keyframes`
+    100% {
+      transform: rotate(360deg);
+    }
+`
+type ProgressRootProps = {
+  variant?: 'determinate' | 'indeterminate'
+}
+
+const ProgressRoot = styled.div<ProgressRootProps>`
+  display: inline-block;
+  height: 48px;
+  width: 48px;
+  color: ${tokens.linear.background};
+  ${({ variant }) =>
+    variant === 'indeterminate'
+      ? css`
+          animation: ${indeterminate} 1.4s linear infinite;
+        `
+      : css`
+          transform: rotate(-90deg);
+        `};
+`
+
+const BaseCircle = styled.circle`
+  stroke: ${tokens.linear.background};
+`
+
+const ProgressCircle = styled.circle`
+  stroke: ${tokens.linear.overlay};
+`
+
+type Props = {
+  /* Use indeterminate when there is no progress value */
+  variant?: 'determinate' | 'indeterminate'
+  className?: string
+  /* The value of the progress indicator for determinate variant
+   * Value between 0 and 100 */
+  value?: number
+}
+
+const CircularProgress = forwardRef<HTMLDivElement, Props>(
+  function CircularProgress(
+    { variant = 'indeterminate', className = '', value = null, ...props },
+    ref,
+  ) {
+    const thickness = 4
+    const progress = Math.round(value)
+    const circleStyle: CSS.Properties = {}
+
+    const rootProps = {
+      ...props,
+      ref,
+      variant,
+    }
+
+    const circumference = 2 * Math.PI * ((48 - thickness) / 2)
+
+    if (variant === 'determinate') {
+      circleStyle.stroke = circumference.toFixed(3)
+      circleStyle.strokeDashoffset = `${(
+        ((100 - progress) / 100) *
+        circumference
+      ).toFixed(3)}px`
+
+      rootProps['aria-valuenow'] = progress
+
+      if (value !== undefined) {
+        rootProps['aria-valuenow'] = progress
+        rootProps['aria-valuemin'] = 0
+        rootProps['aria-valuemax'] = 100
+      }
+    }
+
+    return (
+      <ProgressRoot
+        {...rootProps}
+        role="progressbar"
+        className={`${className} ${variant}-progress`}
+      >
+        <svg viewBox="24 24 48 48">
+          <BaseCircle
+            style={circleStyle}
+            cx={48}
+            cy={48}
+            r={(48 - thickness) / 2}
+            fill="none"
+            strokeWidth={thickness}
+          />
+          <ProgressCircle
+            style={circleStyle}
+            cx={48}
+            cy={48}
+            r={(48 - thickness) / 2}
+            fill="none"
+            strokeLinecap="round"
+            strokeWidth={thickness}
+            strokeDasharray={variant === 'determinate' ? circumference : 48}
+          />
+        </svg>
+      </ProgressRoot>
+    )
+  },
+)
+
+CircularProgress.displayName = 'eds-circular-progress'
+
+export { CircularProgress }

libraries/core-react/src/Progress/Dots/DotProgress.test.jsx → libraries/core-react/src/Progress/Dots/DotProgress.test.tsx

@@ -13,7 +13,7 @@ const StyledProgress = styled(DotProgress)`
 
 const { white, green } = tokens.dots
 
-const rgbaTrim = (x) => x.split(' ').join('')
+const rgbaTrim = (x: string) => x.split(' ').join('')
 
 afterEach(cleanup)
 

libraries/core-react/src/Progress/Dots/DotProgress.jsx → libraries/core-react/src/Progress/Dots/DotProgress.tsx

@@ -1,6 +1,4 @@
-// @ts-nocheck
-import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
+import React, { forwardRef, HTMLAttributes } from 'react'
 import styled, { keyframes } from 'styled-components'
 import { progress as tokens } from '../Progress.tokens'
 
@@ -28,8 +26,14 @@ const Svg = styled.svg`
   }
 `
 
-const DotProgress = forwardRef(function DotProgress(
-  { variant, className, ...rest },
+type Props = {
+  /* Choose between two colors */
+  variant?: 'white' | 'green'
+  className?: string
+} & HTMLAttributes<SVGSVGElement>
+
+const DotProgress = forwardRef<SVGSVGElement, Props>(function DotProgress(
+  { variant = 'white', className = '', ...rest },
   ref,
 ) {
   const props = {
@@ -56,17 +60,4 @@ const DotProgress = forwardRef(function DotProgress(
 
 DotProgress.displayName = 'eds-dot-progress'
 
-DotProgress.propTypes = {
-  /** @ignore */
-  className: PropTypes.string,
-  /* Variant
-   * Choose between two colors */
-  variant: PropTypes.oneOf(['white', 'green']),
-}
-
-DotProgress.defaultProps = {
-  className: '',
-  variant: 'white',
-}
-
 export { DotProgress }