Merge pull request #63 from NASA-PDS/features/create-components-for-h…

…omepage

Features/create components for homepage

src/components/Card/Card.tsx

@@ -1,95 +1,103 @@
-import Typography from '@mui/material/Typography';
-import MaterialCard from '@mui/material/Card';
-import { CardMediaProps } from '@mui/material/CardMedia';
-import CardMedia from '@mui/material/CardMedia';
+import { 
+  Box as MuiBox, 
+  Card as MuiCard, 
+  CardProps as MuiCardProps,
+  CardMedia as MuiCardMedia, 
+  CardMediaProps as MuiCardMediaProps 
+} from '@mui/material';
+import { Link } from 'react-router-dom';
+import { Typography } from 'components/Typography';
+import { PrimaryButton } from 'components/PrimaryButton';
 import testImage from '../../nasaTest.jpeg';
-import Box from '@mui/material/Box';
-import { useState } from 'react';
 
 export type CardProps = {
-  /** Title to display in the card */
-  title: string,
   /** Content to display in the card */
-  content: string,
+  description?: string;
+  /** Height of the card */
+  height: number;
   /** Image to display in the card */
-  image: CardMediaProps['image']
-}
-
-export const Card = ({
-  title = '',
-  content = '',
-  image = testImage
-}: CardProps) => {
-  const [isCardHovered, setIsCardHovered] = useState(false);
+  image: MuiCardMediaProps['image'];
+  /** Description of the image displayed in the card */
+  imageDescription: string;
+  /** Width of the card **/
+  maxWidth: number;
+  /** Title to display in the card */
+  title: string;
+  /** Link to go to when card or button is clicked */
+  url: string;
+  /** Width of the card **/
+  width: number;
+} & MuiCardProps;
 
-  const onCardMouseOver = () => {
-    setIsCardHovered(true);
-  }
+export const Card = (props: CardProps) => {
 
-  const onCardMouseOut = () => {
-    setIsCardHovered(false);
-  }
+  const {
+    description = '',
+    height = 480,
+    image = testImage,
+    imageDescription,
+    maxWidth = 345,
+    title,
+    url,
+    width = 312,
+    ...other
+  } = props;
 
   return (
-    <MaterialCard
-      onMouseOver={onCardMouseOver} 
-      onMouseOut={onCardMouseOut} 
-      sx={{ 
-        maxWidth: 345, 
-        boxShadow:'none',
-        ':hover': {
-          cursor: 'pointer',
-        },
-        ':focus': {
-          border: '1px dotted',
-        }
-      }}
-    >
-      <Box sx={{ position: 'relative' }}>
-        <CardMedia
-          component="img"
-          height="480"
-          width="312"
-          image={image}
-          sx={{
-            transform: isCardHovered? 'scale(1.25)' : 'scale(1)',
-            transition: 'all .2s ease',
-            verticalAlign: 'middle'
-          }}
-        />
-        <Box
-          sx={{
-            position: 'absolute',
-            bottom: 0,
-            left: 0,
-            width: '100%',
-            height: '50%',
-            background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1))',
-            color: 'white',
-            padding: '20px 20px',
-          }}
-        />
-        <Box
-          sx={{
-            position: 'absolute',
-            bottom: 0,
-            left: 0,
-            width: '100%',
-            color: 'white',
-            padding: '20px 20px',
-          }}
-        >
-          <Typography variant="h5" component="span">{title} {/*<Badge color="secondary" badgeContent=" "><EastIcon/></Badge>*/}</Typography>
-          <Typography variant="body2">{content}</Typography>
-        </Box>
-        <Box
-          sx={{
-            position: 'relative', top: '-10px', zIndex: '3'
-          }}
-        >
-        </Box>
-      </Box>
-    </MaterialCard>
+    <Link to={url}>
+      <MuiCard
+        sx={{ 
+          minWidth: width,
+          maxWidth, 
+          boxShadow:'none',
+          ':focus': {
+            border: '1px dotted',
+          },
+          borderRadius: "0px"
+        }}
+        {...other}
+      >
+        <MuiBox sx={{ position: 'relative' }}>
+          <MuiCardMedia
+            component="img"
+            height={height}
+            width={width}
+            image={image}
+            alt={imageDescription}
+          />
+          <MuiBox
+            sx={{
+              position: 'absolute',
+              bottom: 0,
+              left: 0,
+              width,
+              height: '50%',
+              background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1))',
+              color: 'white',
+              //padding: '20px 20px',
+            }}
+          />
+          <MuiBox
+            sx={{
+              position: 'absolute',
+              bottom: 0,
+              left: 0,
+              color: 'white',
+              padding: '20px 20px',
+            }}
+          >
+            <PrimaryButton label={title} size="16"></PrimaryButton>
+            <Typography variant="body2" weight="regular">{description}</Typography>
+          </MuiBox>
+          <MuiBox
+            sx={{
+              position: 'relative', top: '-10px', zIndex: '3'
+            }}
+          >
+          </MuiBox>
+        </MuiBox>
+      </MuiCard>
+    </Link>
   );
 }
 

src/components/Cards/ButtonCard/ButtonCard.tsx

@@ -0,0 +1,69 @@
+import { Box as MuiBox, Card as MuiCard, Stack as MuiStack } from "@mui/material";
+import { Typography } from "components/Typography";
+import { IconArrowRight, IconArrowDiagonal } from "components/Icons";
+
+export type ButtonCardProps = {
+  title: string;
+  linkType?:"internal" | "external";
+  width?:string;
+}
+
+export const ButtonCard = ({
+  title,
+  linkType = "internal",
+  width = "100%"
+}:ButtonCardProps) => {
+
+  let icon = <IconArrowRight style={{ width: "10px", height: "10px" }} />
+
+  if( linkType === "external" ) {
+    icon = <IconArrowDiagonal style={{ width: "10px", height: "10px" }} />
+  }
+
+  return <>
+    <MuiCard sx={{
+      boxShadow:'none', 
+      borderRadius: "0px",
+      ':focus': {
+        border: '1px dotted',
+      },
+      height: "250px", 
+      width
+    }}>
+      <MuiBox sx={{ 
+        width: "100%", 
+        height: "100%", 
+        backgroundColor: "#FFFFFF",
+      }}>
+        <MuiBox sx={{
+          display: "flex",
+          flexGrow: 1,
+          width: "100%",
+          height: "100%",
+          justifyContent: "center",
+          alignItems: "center",
+        }}>
+          <MuiBox sx={{padding: "20px"}}>
+            <MuiStack direction={"row"} spacing={"4px"} alignItems={"center"} width={"100%"} justifyContent={"space-between"}>
+              <Typography variant={"h5"} weight={"semibold"} component={"span"}>{title}</Typography>
+              <div style={{
+                    display: "flex",
+                    backgroundColor: "#F64137",
+                    padding: "5px",
+                    width: "10px",
+                    height: "10px",
+                    borderRadius: "10px",
+                    color: "#FFFFFF"
+                  }}
+              >
+                {icon}
+              </div>
+            </MuiStack>
+          </MuiBox>
+        </MuiBox>
+      </MuiBox>
+    </MuiCard>
+  </>
+}
+
+export default ButtonCard;

src/components/Cards/ButtonCard/index.ts

@@ -0,0 +1 @@
+export * from "./ButtonCard";

src/components/Cards/MediaCard/MediaCard.tsx

@@ -0,0 +1,95 @@
+import { 
+  Box as MuiBox, 
+  Card as MuiCard, 
+  CardMedia as MuiCardMedia,
+  CardMediaProps as MuiCardMediaProps,
+  Stack as MuiStack 
+} from "@mui/material";
+import { Typography } from "components/Typography";
+import { IconArrowRight } from "components/Icons";
+import testImage from '../../../nasaTest.jpeg';
+
+export type MediaCardProps = {
+  description?:string;
+  image:MuiCardMediaProps['image'];
+  imageDescription:string;
+  title:string;
+}
+
+export const MediaCard = ({
+  description,
+  image = testImage,
+  imageDescription,
+  title,
+}:MediaCardProps) => {
+
+  return <>
+    <MuiCard sx={{
+      height: "250px",
+      boxShadow: "none",
+      ':focus': {
+          border: '1px dotted',
+      },
+      borderRadius: "0px",
+      transition: "none"
+    }}>
+      <MuiBox sx={{ 
+        width: "100%", 
+        height: "100%", 
+        position: 'relative', 
+      }}>
+        <MuiCardMedia
+          component="img"
+          image={image}
+          width={"100%"}
+          height={"100%"}
+          sx={{ backgroundSize: "cover"}}
+          alt={imageDescription}
+        />
+        <MuiBox
+          sx={{
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            width: "100%",
+            height: '50%',
+            background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1))',
+            color: 'white',
+          }}
+        />
+        <MuiBox
+          sx={{
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            color: 'white',
+            padding: '20px 20px',
+            gap: "12px",
+            display: "flex",
+            flexDirection: "column",
+            flexWrap: "wrap"
+          }}
+        >
+          <MuiStack direction={"row"} spacing={"4px"} alignItems={"flex-end"} width={"100%"} justifyContent={"space-between"}>
+              <Typography variant={"h5"} weight={"semibold"} component={"span"}>{title}</Typography>
+              <div style={{
+                    display: "flex",
+                    backgroundColor: "#F64137",
+                    padding: "5px",
+                    width: "10px",
+                    height: "10px",
+                    borderRadius: "10px",
+                    color: "#FFFFFF"
+                  }}
+              >
+                <IconArrowRight style={{ width: "10px", height: "10px" }}/>
+              </div>
+            </MuiStack>
+          { description && <Typography variant="body2" weight="regular">{description}</Typography> }
+        </MuiBox>
+      </MuiBox>
+    </MuiCard>
+  </>
+}
+
+export default MediaCard;

src/components/Cards/MediaCard/index.ts

@@ -0,0 +1 @@
+export * from "./MediaCard";

src/components/Cards/index.ts

@@ -0,0 +1,2 @@
+export * from "./ButtonCard";
+export * from "./MediaCard";