Reusable Card component implemented in both views

bcgov · Dec 11, 2024 · 76c0756 · 76c0756
1 parent 8bc8d49
commit 76c0756
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 30 deletions.
diff --git a/frontend/src/components/common/Card/Card.tsx b/frontend/src/components/common/Card/Card.tsx
@@ -0,0 +1,31 @@
+/**
+ * @summary A reusable Card component
+ */
+import React from 'react';
+import { CardWrapper } from './card.styles';
+
+interface CardProps {
+  children: React.ReactNode;
+  width?: string;
+  height?: string;
+  justifyContent?: string;
+}
+
+function Card({
+  children,
+  width = '500px',
+  height = '500px',
+  justifyContent = 'center',
+}: CardProps) {
+  return (
+    <CardWrapper
+      width={width}
+      height={height}
+      justifyContent={justifyContent}
+    >
+      {children}
+    </CardWrapper>
+  );
+}
+
+export default Card;
diff --git a/frontend/src/components/common/Card/card.styles.ts b/frontend/src/components/common/Card/card.styles.ts
@@ -0,0 +1,30 @@
+/**
+ * @summary Styling for Card component
+ */
+import styled from '@emotion/styled';
+
+type CardWrapperProps = {
+  width: string;
+  height: string;
+  justifyContent?: string;
+};
+
+export const CardWrapper = styled.div<CardWrapperProps>`
+  background-color: rgba(255, 255, 255, 0.8);
+  height: ${(props) => props.height};
+  width: ${(props) => props.width};
+  padding-top: 0;
+  justify-content: flex-start;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  object-fit: scale-down;
+  border-radius: 8px;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  text-align: center;
+  position: relative;
+  justify-content: ${(props) => props.justifyContent};
+`;
+
+export default CardWrapper;
diff --git a/frontend/src/components/common/index.ts b/frontend/src/components/common/index.ts
@@ -5,5 +5,6 @@ import InputField from './InputField/InputField';
 import RadioButton from './RadioButton/RadioButton';
 import Checkbox from './Checkbox/Checkbox';
 import Dropdown from './DropDown/DropDown';
+import Card from './Card/Card';
 
-export { Header, Button, Footer, InputField, RadioButton, Checkbox, Dropdown };
+export { Header, Button, Footer, InputField, RadioButton, Checkbox, Dropdown, Card };
diff --git a/frontend/src/views/FarmInformation/FarmInformation.tsx b/frontend/src/views/FarmInformation/FarmInformation.tsx
@@ -5,15 +5,14 @@ import React, { useState, useEffect } from 'react';
 import { localStorageKeyExists } from '../../utils/AppLocalStorage';
 import constants from '../../constants/Constants';
 import {
-  Card,
   CardHeader,
   Banner,
   Heading,
   InputFieldsContainer,
   SelectorContainer,
   RegionContainer,
 } from './farmInformation.styles';
-import { InputField, RadioButton, Checkbox, Dropdown } from '../../components/common';
+import { InputField, RadioButton, Checkbox, Dropdown, Card } from '../../components/common';
 
 export default function FarmInformation() {
   const [formData, setFormData] = useState({
@@ -60,7 +59,11 @@ export default function FarmInformation() {
   ];
 
   return (
-    <Card>
+    <Card
+      height="500px"
+      width="600px"
+      justifyContent="flex-start"
+    >
       <CardHeader>
         <Banner>
           <Heading>Farm Information</Heading>

diff --git a/frontend/src/views/FarmInformation/farmInformation.styles.ts b/frontend/src/views/FarmInformation/farmInformation.styles.ts
@@ -4,17 +4,6 @@
 import styled from '@emotion/styled';
 import screenSizes from '../../constants/screenSizes';
 
-export const ViewContainer = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
-  height: 100svh;
-  justify-content: center;
-  width: 100%;
-  align-items: center;
-`;
-
 export const Card = styled.div`
   background-color: rgba(255, 255, 255, 0.8);
   height: 500px;

diff --git a/frontend/src/views/LandingPage/LandingPage.tsx b/frontend/src/views/LandingPage/LandingPage.tsx
@@ -5,8 +5,8 @@ import { useNavigate } from 'react-router-dom';
 import constants from '../../constants/Constants';
 import useAppService from '../../services/app/useAppService';
 import { deleteLocalStorageKey } from '../../utils/AppLocalStorage';
-import { ButtonWrapper, StyledDivider, StyledContent, Card } from './landingPage.styles';
-import { Button } from '../../components/common';
+import { ButtonWrapper, StyledDivider, StyledContent } from './landingPage.styles';
+import { Button, Card } from '../../components/common';
 
 export default function LandingPage() {
   const { setNMPFile } = useAppService();
@@ -42,7 +42,11 @@ export default function LandingPage() {
   };
 
   return (
-    <Card>
+    <Card
+      width="500px"
+      height="500px"
+      justifyContent="center"
+    >
       <StyledContent>
         <h1>Nutrient Management Calculator</h1>
         <p>

diff --git a/frontend/src/views/LandingPage/landingPage.styles.ts b/frontend/src/views/LandingPage/landingPage.styles.ts
@@ -1,21 +1,10 @@
 /**
- * Styling for LandingPage view
+ * @summary Styling for LandingPage view
  */
 import styled from '@emotion/styled';
 import * as tokens from '@bcgov/design-tokens/js';
 import screenSizes from '../../constants/screenSizes';
 
-export const ViewContainer = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
-  height: 100svh;
-  justify-content: center;
-  width: 100%;
-  align-items: center;
-`;
-
 export const Card = styled.div`
   background-color: rgba(255, 255, 255, 0.8);
   height: 500px;
@@ -30,6 +19,7 @@ export const Card = styled.div`
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
   padding: 20px;
   text-align: center;
+  position: relative;
 `;
 
 export const ButtonWrapper = styled.div`