componente reutilizable terminado.

janis-commerce · Jul 10, 2023 · 1604c46 · 1604c46
1 parent bba7c68
commit 1604c46
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git a/src/components/StatusChip/__snapshots__/index.test.tsx.snap b/src/components/StatusChip/__snapshots__/index.test.tsx.snap
@@ -29,7 +29,7 @@ exports[`StatusChip component render correct a valid component is passed 1`] = `
 </View>
 `;
 
-exports[`StatusChip component render correct if a color is passed 1`] = `
+exports[`StatusChip component render correct if a background is passed 1`] = `
 <View
   style={
     Object {

diff --git a/src/components/StatusChip/index.test.tsx b/src/components/StatusChip/index.test.tsx
@@ -19,8 +19,8 @@ describe('StatusChip component', () => {
 			expect(toJSON()).toMatchSnapshot();
 		});
 
-		it('if a color is passed', () => {
-			const {toJSON} = create(<StatusChip color={primary.main}>Delivered</StatusChip>);
+		it('if a background is passed', () => {
+			const {toJSON} = create(<StatusChip background={primary.main}>Delivered</StatusChip>);
 			expect(toJSON()).toMatchSnapshot();
 		});
 

diff --git a/src/components/StatusChip/index.tsx b/src/components/StatusChip/index.tsx
@@ -4,10 +4,10 @@ import {base, grey, primary} from '../../theme/palette';
 
 interface StatusChipProps extends ViewProps {
 	children?: ReactElement | string;
-	color?: string;
+	background?: string;
 }
 
-const StatusChip = ({children, color, ...props}: StatusChipProps) => {
+const StatusChip = ({children, background, ...props}: StatusChipProps) => {
 	const isString = typeof children === 'string';
 	const isCustomComponent = isValidElement(children);
 
@@ -23,17 +23,17 @@ const StatusChip = ({children, color, ...props}: StatusChipProps) => {
 			paddingLeft: 12,
 			paddingRight: 12,
 			borderRadius: 12,
-			backgroundColor: color ?? base.white,
+			backgroundColor: background ?? base.white,
 			borderWidth: 1,
-			borderColor: color ?? grey['300'],
+			borderColor: background ?? grey['300'],
 		},
 		TextStyles: {
 			fontSize: 15,
 			lineHeight: 18,
 			fontFamily: 'Roboto',
 			fontWeight: '900',
 			textAlign: 'center',
-			color: color ? base.white : primary.main,
+			color: background ? base.white : primary.main,
 		},
 	});