Fix/2051/circular progress zero

package.json

@@ -39,6 +39,7 @@
     "publish:all:beta": "yarn publish:all --npm-tag=beta",
     "start": "yarn docs",
     "start:button": "yarn workspace @pluralsight/ps-design-system-button run storybook",
+    "start:circularprogress": "yarn workspace @pluralsight/ps-design-system-circularprogress run storybook",
     "test": "jest",
     "test:ci": "jest --ci"
   },

packages/circularprogress/src/react/__specs__/__snapshots__/storyshots.spec.ts.snap

@@ -26,7 +26,7 @@ exports[`Storyshots Components/CircularProgress Animation 1`] = `
         cy="24"
         r={22}
         strokeDasharray="138.23007675795088 138.23007675795088"
-        strokeDashoffset={103.67255756846316}
+        strokeDashoffset={138.23007675795088}
       />
     </svg>
   </div>
@@ -118,7 +118,7 @@ exports[`Storyshots Components/CircularProgress Values And Sizes 1`] = `
         cy="24"
         r={22}
         strokeDasharray="138.23007675795088 138.23007675795088"
-        strokeDashoffset={103.67255756846316}
+        strokeDashoffset={138.23007675795088}
       />
     </svg>
   </div>
@@ -146,7 +146,7 @@ exports[`Storyshots Components/CircularProgress Values And Sizes 1`] = `
         cy="24"
         r={22}
         strokeDasharray="138.23007675795088 138.23007675795088"
-        strokeDashoffset={103.67255756846316}
+        strokeDashoffset={138.23007675795088}
       />
     </svg>
   </div>

packages/circularprogress/src/react/__specs__/index.spec.tsx

@@ -1,9 +1,9 @@
 import { convertStoriesToJestCases } from '@pluralsight/ps-design-system-util'
 import { axe } from 'jest-axe'
 import React from 'react'
-import { render } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 
-import CircularProgress from '../index'
+import CircularProgress, { circumference } from '../index'
 import * as stories from '../__stories__/index.story'
 
 describe('CircularProgress', () => {
@@ -38,6 +38,27 @@ describe('CircularProgress', () => {
     )
   })
 
+  it('displays zero correctly', () => {
+    render(
+      <CircularProgress
+        value={0}
+        aria-label="0% complete"
+        data-testid="zero-test"
+      />
+    )
+
+    // Get the SVG path to test
+    const el = screen
+      .getByTestId('zero-test')
+      .querySelector('.psds-circularprogress__fg')
+
+    // Get the attribute value to test
+    const dashoffset = el?.getAttribute('stroke-dashoffset') ?? ''
+
+    // Test the values after type conversion
+    expect(parseFloat(dashoffset)).toEqual(circumference)
+  })
+
   describe.each(cases)('%s story', (_name, Story) => {
     it('has no axe-core violations', async () => {
       const { container } = render(<Story {...Story.args} />)

packages/circularprogress/src/react/index.tsx

@@ -11,7 +11,7 @@ import '../css/index.css'
 import * as vars from '../vars/index'
 
 const radius = vars.style.width / 2 - vars.style.strokeWidth / 2
-const circumference = 2 * Math.PI * radius
+export const circumference = 2 * Math.PI * radius
 
 interface CircularProgressProps extends React.HTMLAttributes<HTMLDivElement> {
   size?: ValueOf<typeof vars.sizes>
@@ -45,7 +45,7 @@ const CircularProgress = React.forwardRef<
   const themeName = useTheme()
 
   const dashOffset =
-    ((100 - (value || defaultIndeterminateValue)) / 100) * circumference
+    ((100 - (value ?? defaultIndeterminateValue)) / 100) * circumference
   const busy = value
     ? value === 100
       ? 'false'