feat: update card styling

Author: ganiirsyadi

src/@next/Card/Card.stories.tsx

@@ -5,6 +5,7 @@ import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
 import { Card, CardProps } from './Card';
 import { Typography } from '../Typography';
 import { Red } from '../utilities/colors';
+import styled from 'styled-components';
 
 (Card as React.FunctionComponent<CardProps>).displayName = 'Card';
 
@@ -144,16 +145,20 @@ SecondaryActionOnly.args = {
 };
 
 const CustomHeadingSubHeadingTemplate: Story<CardProps> = args => {
+  const StyledTypography = styled(Typography)`
+    margin: 0;
+  `;
+
   const heading = (
-    <Typography variant="subtitle1" color={Red.B74}>
+    <StyledTypography variant="subtitle1" color={Red.B74}>
       Custom Heading
-    </Typography>
+    </StyledTypography>
   );
 
   const subheading = (
-    <Typography variant="subtitle2" color={Red.B65}>
+    <StyledTypography variant="subtitle2" color={Red.B65}>
       Custom Sub Heading
-    </Typography>
+    </StyledTypography>
   );
 
   return (

src/@next/Card/Card.tsx

@@ -10,12 +10,9 @@ import {
   StyledCardHeaderSection,
   StyledCardHeaderSectionHalf,
   StyledCardHeaderWrapper,
-  StyledCustomHeader,
 } from './CardStyle';
 import { Section } from './Section';
 
-const PRIMITIVE_TYPES = ['string', 'number'];
-
 export type CardProps = {
   heading?: React.ReactNode;
   subheading?: React.ReactNode;
@@ -36,20 +33,16 @@ const CardComponent = React.forwardRef<HTMLDivElement, CardProps>(function Card(
   }: CardProps,
   ref
 ) {
-  const headingMarkup = PRIMITIVE_TYPES.includes(typeof heading) ? (
-    <Typography as="div" variant="body2">
+  const headingMarkup = (
+    <Typography as="div" variant="subtitle1">
       {heading}
     </Typography>
-  ) : (
-    <StyledCustomHeader>{heading}</StyledCustomHeader>
   );
 
-  const subHeadingMarkup = PRIMITIVE_TYPES.includes(typeof subheading) ? (
+  const subHeadingMarkup = (
     <Typography as="div" variant="subtitle2">
       {subheading}
     </Typography>
-  ) : (
-    <StyledCustomHeader>{subheading}</StyledCustomHeader>
   );
 
   const headerMarkup = () => {

src/@next/Card/CardStyle.ts

@@ -6,7 +6,8 @@ import { space12, space16, space24, space4 } from '../utilities/spacing';
 
 export const StyledCardContainer = styled.div`
   border-radius: ${borderRadius8};
-  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05), 0px 1px 2px rgba(0, 0, 0, 0.15);
+  box-shadow: 0px 0px 5px 0px rgba(71, 71, 71, 0.1),
+    0px 1px 2px 0px rgba(71, 71, 71, 0.2);
   color: ${Neutral.B18};
 `;