4765 feat/base card

src/components/BaseCard/BaseCard.test.tsx

@@ -0,0 +1,70 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { render, screen } from '@testing-library/react';
+import { expect } from '@jest/globals';
+import '@testing-library/jest-dom/extend-expect';
+
+import BaseCard from './BaseCard';
+
+describe('<BaseCard />', () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    container = render(
+      <BaseCard>
+        <div>Test</div>
+      </BaseCard>,
+    ).container;
+  });
+
+  it('should be defined', () => {
+    expect(container).toBeDefined();
+  });
+
+  it('should render with: background-color: white as default', () => {
+    (expect as any)(container).toHaveStyle('background-color: + white');
+  });
+
+  it('should render with: padding: 2rem as default', () => {
+    (expect as any)(container).toHaveStyle('padding: + 2rem');
+  });
+
+  it('should render with: border: 1px solid var(--gray) as default', () => {
+    (expect as any)(container).toHaveStyle('border: + 1px solid var(--gray)');
+  });
+
+  it('should render children', () => {
+    const element = screen.getByText('Test');
+
+    expect(element).toBeDefined();
+  });
+
+  it('should render with: background-color: var(--purple) when prop is passed', () => {
+    container = render(
+      <BaseCard backgroundColor="purple">
+        <div>Test</div>
+      </BaseCard>,
+    ).container;
+
+    (expect as any)(container).toHaveStyle('background-color: + var(--purple)');
+  });
+
+  it('should render with: padding: var(--font-size-small) when prop is passed', () => {
+    container = render(
+      <BaseCard padding="small">
+        <div>Test</div>
+      </BaseCard>,
+    ).container;
+
+    (expect as any)(container).toHaveStyle('padding: + var(--font-size-small)');
+  });
+
+  it('should render with: border: 1px solid var(--purple) when prop is passed', () => {
+    container = render(
+      <BaseCard borderColor="purple">
+        <div>Test</div>
+      </BaseCard>,
+    ).container;
+
+    (expect as any)(container).toHaveStyle('border: + 1px solid var(--purple)');
+  });
+});

src/components/BaseCard/BaseCard.tsx

@@ -0,0 +1,11 @@
+import * as S from './styles';
+
+const BaseCard = ({ children, ...styleProps }: BaseCardProps) => {
+  return (
+    <S.BaseCard {...styleProps} className="base-card">
+      {children}
+    </S.BaseCard>
+  );
+};
+
+export default BaseCard;

src/components/BaseCard/index.ts

@@ -0,0 +1 @@
+export { default } from './BaseCard';

src/components/BaseCard/styles.ts

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+export const BaseCard = styled.div<
+  Pick<BaseCardProps, 'padding' | 'borderColor' | 'backgroundColor'>
+>`
+  display: flex;
+  border-radius: 1rem;
+  padding: ${({ padding }) =>
+    padding ? `var(--font-size-${padding})` : 'var(--font-size-large)'};
+  box-shadow: 0px 1rem 2rem rgba(207.7, 207.7, 207.7, 0.2);
+  border: ${({ borderColor }) =>
+    borderColor ? `1px solid var(--${borderColor})` : '1px solid var(--gray)'};
+  background-color: ${({ backgroundColor }) =>
+    backgroundColor ? `var(--${backgroundColor})` : 'var(--white)'};
+`;

src/styles/global.ts

@@ -13,6 +13,7 @@ export default createGlobalStyle`
     --font-size-small: 0.875rem;
     --font-size-xsmall: 0.75rem;
     --font-size-medium: 1.125rem;
+    --font-size-xmedium: 1.5rem;
     --font-size-large: 2rem;
     --font-size-xlarge: 3rem;
   }

src/types/BaseCardProps.d.ts

@@ -0,0 +1,6 @@
+type BaseCardProps = {
+  padding?: 'large' | 'xmedium' | 'small';
+  borderColor?: 'purple';
+  backgroundColor?: 'purple' | 'white';
+  children: React.ReactNode;
+};