Add stroke width to TailSpin circle (Issue #144) (#148)

* Added strokeWidth property to TailSpin & changed tests appropriately * Fixed parsing issues
mhnpd · Jan 29, 2023 · 4666190 · 4666190
1 parent e591a6e
commit 4666190
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 54 deletions.
diff --git a/src/loader/TailSpin.tsx b/src/loader/TailSpin.tsx
@@ -3,71 +3,79 @@ import { getDefaultStyle } from '../helpers'
 import { BaseProps, DEFAULT_COLOR, DEFAULT_WAI_ARIA_ATTRIBUTE } from '../type'
 
 interface TailSpinProps extends BaseProps {
-  radius?: string | number
+  radius?: string | number,
+  strokeWidth?: string | number
 }
 
 export const TailSpin: FunctionComponent<TailSpinProps> = ({
   height = 80,
   width = 80,
+  strokeWidth = 2,
   radius = 1,
   color = DEFAULT_COLOR,
   ariaLabel = 'tail-spin-loading',
   wrapperStyle,
   wrapperClass,
   visible = true,
-}): ReactElement => (
-  <div
-    style={{ ...getDefaultStyle(visible), ...wrapperStyle }}
-    className={wrapperClass}
-    data-testid="tail-spin-loading"
-    aria-label={ariaLabel}
-    {...DEFAULT_WAI_ARIA_ATTRIBUTE}
-  >
-    <svg
-      width={width}
-      height={height}
-      viewBox="0 0 38 38"
-      xmlns="http://www.w3.org/2000/svg"
-      data-testid="tail-spin-svg"
+}): ReactElement => {
+  const strokeWidthNum = parseInt(String(strokeWidth));
+  const viewBoxValue = strokeWidthNum + 36;
+  const halfStrokeWidth = strokeWidthNum / 2;
+  const processedRadius = halfStrokeWidth + parseInt(String(radius)) - 1;
+  return (
+    <div
+      style={{ ...getDefaultStyle(visible), ...wrapperStyle }}
+      className={wrapperClass}
+      data-testid="tail-spin-loading"
+      aria-label={ariaLabel}
+      {...DEFAULT_WAI_ARIA_ATTRIBUTE}
     >
-      <defs>
-        <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
-          <stop stopColor={color} stopOpacity="0" offset="0%" />
-          <stop stopColor={color} stopOpacity=".631" offset="63.146%" />
-          <stop stopColor={color} offset="100%" />
-        </linearGradient>
-      </defs>
-      <g fill="none" fillRule="evenodd">
-        <g transform="translate(1 1)">
-          <path
-            d="M36 18c0-9.94-8.06-18-18-18"
-            id="Oval-2"
-            stroke={color}
-            strokeWidth="2"
-          >
-            <animateTransform
-              attributeName="transform"
-              type="rotate"
-              from="0 18 18"
-              to="360 18 18"
-              dur="0.9s"
-              repeatCount="indefinite"
-            />
-          </path>
-          <circle fill="#fff" cx="36" cy="18" r={radius}>
-            <animateTransform
-              attributeName="transform"
-              type="rotate"
-              from="0 18 18"
-              to="360 18 18"
-              dur="0.9s"
-              repeatCount="indefinite"
-            />
-          </circle>
+      <svg
+        width={width}
+        height={height}
+        viewBox={`0 0 ${viewBoxValue} ${viewBoxValue}`}
+        xmlns="http://www.w3.org/2000/svg"
+        data-testid="tail-spin-svg"
+      >
+        <defs>
+          <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
+            <stop stopColor={color} stopOpacity="0" offset="0%" />
+            <stop stopColor={color} stopOpacity=".631" offset="63.146%" />
+            <stop stopColor={color} offset="100%" />
+          </linearGradient>
+        </defs>
+        <g fill="none" fillRule="evenodd">
+          <g transform={`translate(${halfStrokeWidth} ${halfStrokeWidth})`}>
+            <path
+              d="M36 18c0-9.94-8.06-18-18-18"
+              id="Oval-2"
+              stroke={color}
+              strokeWidth={strokeWidth}
+            >
+              <animateTransform
+                attributeName="transform"
+                type="rotate"
+                from="0 18 18"
+                to="360 18 18"
+                dur="0.9s"
+                repeatCount="indefinite"
+              />
+            </path>
+            <circle fill="#fff" cx="36" cy="18" r={processedRadius}>
+              <animateTransform
+                attributeName="transform"
+                type="rotate"
+                from="0 18 18"
+                to="360 18 18"
+                dur="0.9s"
+                repeatCount="indefinite"
+              />
+            </circle>
+          </g>
         </g>
-      </g>
-    </svg>
-  </div>
-)
+      </svg>
+    </div>
+  )
+}
 
 export default TailSpin
diff --git a/test/loader/TailSpin.spec.tsx b/test/loader/TailSpin.spec.tsx
@@ -30,6 +30,7 @@ describe('TailSpin', () => {
     })
     svg.querySelectorAll('path').forEach(path => {
       expect(path).toHaveAttribute('stroke', DEFAULT_COLOR)
+      expect(path).toHaveAttribute('stroke-width', "2")
     })
   })
 
@@ -43,6 +44,7 @@ describe('TailSpin', () => {
         wrapperClass="test-class"
         wrapperStyle={{ opacity: '1' }}
         radius={10}
+        strokeWidth={3}
       />
     )
     const component = screen.getByTestId(wrapperTestId)
@@ -64,10 +66,11 @@ describe('TailSpin', () => {
     })
 
     svg.querySelectorAll('circle').forEach(circle => {
-      expect(circle).toHaveAttribute('r', '10')
+      expect(circle).toHaveAttribute('r', '10.5') // r-1 + stroke-width/2
     })
     svg.querySelectorAll('path').forEach(path => {
       expect(path).toHaveAttribute('stroke', 'red')
+      expect(path).toHaveAttribute('stroke-width','3')
     })
   })