feat: flesh in call out

Signed-off-by: hxtree <[email protected]>

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>
+  )
 }

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%);
+      }
+    }
+  }
+}

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;