feat(react-components): add "styled" to LinearProgress

PeculiarVentures · Sep 25, 2023 · 4e2882d · 4e2882d
1 parent 9ab92fc
commit 4e2882d
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 20 deletions.
diff --git a/packages/react-components/src/Image/image.tsx b/packages/react-components/src/Image/image.tsx
@@ -1,7 +1,10 @@
 import * as React from 'react';
 import { useImage } from '../hooks';
 
-type BaseProps = {
+/**
+ * Types.
+ */
+type ImageOwnProps = {
   /**
    * The `src` attribute for the `img` element.
    */
@@ -18,10 +21,12 @@ type BaseProps = {
    * The className of the component.
    */
   className?: string;
-  'data-testid'?: string;
 };
 
-type ImageProps = BaseProps & Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'loading'>;
+type ImageProps = ImageOwnProps & Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'loading'>;
+/**
+ *
+ */
 
 export const Image = React.forwardRef<HTMLImageElement, ImageProps>((props, ref) => {
   const {

diff --git a/packages/react-components/src/LinearProgress/linear_progress.tsx b/packages/react-components/src/LinearProgress/linear_progress.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
 import { keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
 import { Box } from '../Box';
-import { css, cx } from '../styles';
 
-type BaseProps = {
+/**
+ * Types.
+ */
+type LinearProgressOwnProps = {
   /**
    * The color of the component. It supports those theme colors that make sense for this component.
    */
@@ -18,8 +21,14 @@ type BaseProps = {
   className?: string;
 };
 
-type LinearProgressProps = BaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
+type LinearProgressProps = LinearProgressOwnProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
+/**
+ *
+ */
 
+/**
+ * Styles.
+ */
 const stylesKeyframeProgress = keyframes`
   0% {
     left: -30%;
@@ -29,15 +38,13 @@ const stylesKeyframeProgress = keyframes`
   }
 `;
 
-const stylesBase = () => css({
-  label: 'LinearProgress',
+const LinearProgressRoot = styled(Box)({
   height: '4px',
   overflow: 'hidden',
   position: 'relative',
 });
 
-const stylesProgress = () => css({
-  label: 'progress',
+const LinearProgressProgress = styled(Box)({
   top: 0,
   left: 0,
   bottom: 0,
@@ -46,30 +53,27 @@ const stylesProgress = () => css({
   transformOrigin: 'left',
   animation: `${stylesKeyframeProgress} 2s cubic-bezier(0.53, 0.21, 0.29, 0.67) 0s infinite`,
 });
+/**
+ *
+ */
 
 export const LinearProgress = React.forwardRef<HTMLDivElement, LinearProgressProps>(
   (props, ref) => {
     const {
       color,
-      className,
       ...other
     } = props;
 
     return (
-      <Box
-        {...other}
+      <LinearProgressRoot
         ref={ref}
-        className={cx({
-          [stylesBase()]: true,
-          [className]: !!className,
-        })}
         background={color === 'primary' ? 'primary-tint-4' : 'secondary-tint-4'}
+        {...other}
       >
-        <Box
+        <LinearProgressProgress
           background={color}
-          className={cx(stylesProgress())}
         />
-      </Box>
+      </LinearProgressRoot>
     );
   },
 );