From a57ee027074a3cfc53f69d374561ae66c9676f02 Mon Sep 17 00:00:00 2001
From: hxtree <matthew.heroux@gmail.com>
Date: Mon, 26 Feb 2024 06:31:34 +0000
Subject: [PATCH] feat: flesh in call out

Signed-off-by: hxtree <matthew.heroux@gmail.com>
---
 .../src/components/Card/BasicCard.tsx         | 56 +++++++++----------
 .../src/components/Card/style.module.scss     | 35 ++++++++++++
 clients/design-system/src/index.scss          |  1 +
 3 files changed, 64 insertions(+), 28 deletions(-)
 create mode 100644 clients/design-system/src/components/Card/style.module.scss

diff --git a/clients/design-system/src/components/Card/BasicCard.tsx b/clients/design-system/src/components/Card/BasicCard.tsx
index 65750b95a..27484b631 100644
--- a/clients/design-system/src/components/Card/BasicCard.tsx
+++ b/clients/design-system/src/components/Card/BasicCard.tsx
@@ -1,42 +1,42 @@
-import Card from '@mui/material/Card';
-import CardActions from '@mui/material/CardActions';
-import CardContent from '@mui/material/CardContent';
-import Typography from '@mui/material/Typography';
+import './style.module.scss';
 
 export type BasicCardProps = {
   title?: string;
   body?: string;
   url?: string;
   cta?: string;
+  children?: React.ReactNode;
 };
 
 // TODO finish fleshing in basic card props
-
 export const BasicCard = (props: BasicCardProps): JSX.Element => {
-  const { cta, title } = props;
+  const { cta, body, title, children } = props;
   const defaultCta = 'Learn More';
 
+  const callOut = "Save 10% Off";
+  const callOutColor = "primary";
+
   return (
-    <Card sx={{ minWidth: 275, borderRadius: 6 }}>
-      <CardContent>
-        <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
-          {title}
-        </Typography>
-        <Typography variant="h5" component="div">
-          Lorem ipsum
-        </Typography>
-        <Typography sx={{ mb: 1.5 }} color="text.secondary">
-          adjective
-        </Typography>
-        <Typography variant="body2">
-          well meaning and kindly.
-          <br />
-          {'"a benevolent smile"'}
-        </Typography>
-      </CardContent>
-      <CardActions>
-        {cta || defaultCta}
-      </CardActions>
-    </Card>
-  );
+    <div className="card">
+      <div className='card-thumbnail'>
+        <div className='card-call-out px-4'>{callOut}</div>
+        <svg className="bd-placeholder-img card-img-top"
+          width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img"
+          aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice"
+          focusable="false"><title>Placeholder</title>
+          <rect width="100%" height="100%" fill="#868e96"></rect>
+          <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Sample Image</text>
+        </svg>
+      </div>
+      <div className="card-body">
+        <h5 className="card-title">{title}</h5>
+        <p className="card-text">
+          {body}
+        </p>
+        <p>
+          {children}
+        </p>
+      </div>
+    </div>
+  )
 }
\ No newline at end of file
diff --git a/clients/design-system/src/components/Card/style.module.scss b/clients/design-system/src/components/Card/style.module.scss
new file mode 100644
index 000000000..4139ffd78
--- /dev/null
+++ b/clients/design-system/src/components/Card/style.module.scss
@@ -0,0 +1,35 @@
+@import '../../styles/utils/color-pallette';
+
+$card-color: $color-murrey;
+$card-call-out-offset: 16px;
+.card {
+  .card-thumbnail {
+    margin:0;
+    position: relative;
+    .card-call-out {
+      text-transform: uppercase;
+      font-weight: bold;
+      top: 25px;
+      position: absolute;
+      margin-left: -$card-call-out-offset;
+      background-color: $card-color;
+      color: $color-white;
+      text-align: center;
+      line-height: 50px;
+      border-top: 1px solid lighten($card-color, 10%);
+      border-right: 1px solid lighten($card-color, 10%);
+      border-bottom: 1px solid darken($card-color, 10%);
+      box-shadow:  0.7rem 0.7rem .75rem rgba(0, 0, 0, 0.2);
+      &::after {
+        content: '';
+        position: absolute;
+        top: 100%;
+        left: calc($card-call-out-offset/2);
+        transform: translateX(-50%);
+        border-left: $card-call-out-offset solid transparent;
+        border-right: 0px solid transparent;
+        border-top: $card-call-out-offset solid darken($card-color, 10%);
+      }
+    }
+  }
+}
diff --git a/clients/design-system/src/index.scss b/clients/design-system/src/index.scss
index 5c9fcb1dc..6d308007b 100644
--- a/clients/design-system/src/index.scss
+++ b/clients/design-system/src/index.scss
@@ -90,6 +90,7 @@ $success: #7952b3;
 @import './components/PageFooter/style.module.scss';
 @import './components/Paper/style.module.scss';
 @import './components/Hero/style.module.scss';
+@import './components/Card/style.module.scss';
 
 body {
   background-color: $color-off-white;