feat: Line support semantic structure

Author: feritcemkahraman

src/Line.tsx

@@ -19,6 +19,8 @@ const Line: React.FC<ProgressProps> = (props) => {
     railWidth,
     transition,
     loading,
+    classNames = {},
+    styles = {},
     ...restProps
   } = {
     ...defaultProps,
@@ -51,20 +53,24 @@ const Line: React.FC<ProgressProps> = (props) => {
   return (
     <svg
       id={id}
-      className={clsx(`${prefixCls}-line`, className)}
+      className={clsx(`${prefixCls}-line`, classNames.root, className)}
       viewBox={viewBoxString}
       preserveAspectRatio="none"
-      style={style}
+      style={{
+        ...styles.root,
+        ...style,
+      }}
       role="presentation"
       {...restProps}
     >
       <path
-        className={`${prefixCls}-line-rail`}
+        className={clsx(`${prefixCls}-line-rail`, classNames.rail)}
         d={pathString}
         strokeLinecap={strokeLinecap}
         stroke={railColor}
         strokeWidth={railWidth ?? strokeWidth}
         fillOpacity="0"
+        style={styles.rail}
       />
       {percentList.map((ptg, index) => {
         const dashPercent =
@@ -86,7 +92,7 @@ const Line: React.FC<ProgressProps> = (props) => {
         return (
           <path
             key={index}
-            className={`${prefixCls}-line-path`}
+            className={clsx(`${prefixCls}-line-path`, classNames.track)}
             d={pathString}
             strokeLinecap={strokeLinecap}
             stroke={color as string}
@@ -100,7 +106,7 @@ const Line: React.FC<ProgressProps> = (props) => {
 
               paths[index] = elem;
             }}
-            style={pathStyle}
+            style={{ ...pathStyle, ...styles.track }}
           />
         );
       })}

tests/semantic.spec.tsx

@@ -98,4 +98,29 @@ describe('Semantic', () => {
       },
     );
   });
+
+  describe('Line', () => {
+    it('supports semantic classNames and styles', () => {
+      const classNames: ProgressProps['classNames'] = {
+        root: 'my-root',
+        rail: 'my-rail',
+        track: 'my-track',
+      };
+      const styles = {
+        root: { background: 'red' },
+        rail: { background: 'blue' },
+        track: { background: 'green' },
+      };
+
+      const { container } = render(<Line percent={50} classNames={classNames} styles={styles} />);
+
+      expect(container.querySelector('.rc-progress-line')).toHaveClass(classNames.root);
+      expect(container.querySelector('.rc-progress-line-rail')).toHaveClass(classNames.rail);
+      expect(container.querySelector('.rc-progress-line-path')).toHaveClass(classNames.track);
+
+      expect(container.querySelector('.my-root')).toHaveStyle(styles.root);
+      expect(container.querySelector('.my-rail')).toHaveStyle(styles.rail);
+      expect(container.querySelector('.my-track')).toHaveStyle(styles.track);
+    });
+  });
 });