Make sure storybook defaults match component defaults

Author: captainmangoC4

src/lib/Card/Card.scss

@@ -5,6 +5,7 @@
   flex-direction: column;
   background: $color__n-85;
   border-radius: $border-radius__m;
+  width: 100%;
 
   &--transparent {
     background: transparent;
@@ -19,12 +20,29 @@
       align-self: flex-end;
     }
   }
+
+  &--compact {
+    .card__main {
+      flex-wrap: wrap;
+    }
+
+    .card__body {
+      width: 100%;
+      order: 3;
+      margin-top: $spacing__s;
+      margin-left: 0;
+    }
+
+    .card__cta {
+      order: 2;
+    }
+  }
 
   &__main {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
-    justify-content: space-evenly;
+    justify-content: space-between;
     padding: $spacing__m;
   }
 
@@ -38,6 +56,7 @@
     align-items: center;
     object-fit: cover;
     aspect-ratio: 1/1;
+    order: 1;
 
     img {
       height: 100%;
@@ -84,7 +103,12 @@
     font-size: 1.125rem;
     display: flex;
     flex-direction: column;
-    margin: 0 $spacing__m
+    margin: 0 $spacing__m;
+    order: 2;
+  }
+
+  &__cta {
+    order: 3;
   }
 
   &__footer {

src/lib/Card/Card.stories.tsx

@@ -29,11 +29,11 @@ SampleComponent.parameters = {
 };
 
 SampleComponent.args = {
-  children: <div style={{ width: "300px" }}>Team lead</div>,
+  children: <div>Team lead</div>,
   title: "MangoBurger",
-  imageSize: CardImageSize.LARGE,
+  imageSize: CardImageSize.MEDIUM,
   image: <img src="/images/default-avatar.png" />,
-  imageBorderRadius: CardImageBorderRadius.MEDIUM,
+  imageBorderRadius: CardImageBorderRadius.CIRCLE,
   cta: { text: "Follow", onClick: () => console.log("follow") },
   variants: [
     CardVariant.TRANSPARENT,

src/lib/Card/Card.tsx

@@ -40,6 +40,7 @@ export const Card: React.FC<CardProps> = ({
         {/* CTA */}
         {cta && (
           <Button
+            className="card__cta"
             onClick={cta.onClick}
             label={cta.text}
             variant={ButtonVariant.SECONDARY}

src/lib/Card/Card.types.ts

@@ -35,7 +35,7 @@ export interface CardProps extends React.PropsWithChildren {
   /** An array of links to be rendered in the footer of the card. */
   footerLinks?: ReactElement<HTMLAnchorElement>[];
   /** The size of the image displayed in the top left corner. Defaults to medium */
-  imageSize: CardImageSize;
+  imageSize?: CardImageSize;
   /** The image to be displayed in the top left corner */
   image: ReactElement<HTMLImageElement>;
   /** Border radius of the image. Defaults to circle */