feat(Card): Add space-between alignment for card slot (#1516)

WEB-2354

---------

Co-authored-by: Marcosld <Marcosld@users.noreply.github.com>

Author: Marcosld

src/__private_stories__/card-slot-alignment-story.tsx

@@ -61,6 +61,18 @@ export const SlotAlignment: StoryComponent = () => {
                         </ButtonLink>
                     }
                 />
+                <MediaCard
+                    title="Space Between"
+                    subtitle="Media card"
+                    slotAlignment="space-between"
+                    media={<Image aspectRatio="16:9" src={IMAGE_SRC} />}
+                    extra={[<Placeholder height={30} />, <Placeholder height={30} />]}
+                    buttonLink={
+                        <ButtonLink small href="https://google.com">
+                            Link
+                        </ButtonLink>
+                    }
+                />
             </Inline>
             <Inline space={16}>
                 <NakedCard
@@ -98,6 +110,18 @@ export const SlotAlignment: StoryComponent = () => {
                         </ButtonLink>
                     }
                 />
+                <NakedCard
+                    title="Space Between"
+                    subtitle="Media card"
+                    slotAlignment="space-between"
+                    media={<Image aspectRatio="16:9" src={IMAGE_SRC} />}
+                    extra={[<Placeholder height={30} />, <Placeholder height={30} />]}
+                    buttonLink={
+                        <ButtonLink small href="https://google.com">
+                            Link
+                        </ButtonLink>
+                    }
+                />
             </Inline>
             <Inline space={16}>
                 <SmallNakedCard
@@ -120,6 +144,13 @@ export const SlotAlignment: StoryComponent = () => {
                     media={<Image aspectRatio="16:9" src={IMAGE_SRC} />}
                     extra={<Placeholder height={50} />}
                 />
+                <SmallNakedCard
+                    title="Space Between"
+                    subtitle="Small Naked card"
+                    slotAlignment="space-between"
+                    media={<Image aspectRatio="16:9" src={IMAGE_SRC} />}
+                    extra={[<Placeholder height={30} />, <Placeholder height={30} />]}
+                />
             </Inline>
             <Inline space={16}>
                 <DataCard
@@ -154,6 +185,17 @@ export const SlotAlignment: StoryComponent = () => {
                         </ButtonLink>
                     }
                 />
+                <DataCard
+                    title="Space Between"
+                    subtitle="Data card"
+                    slotAlignment="space-between"
+                    extra={[<Placeholder height={30} />, <Placeholder height={30} />]}
+                    buttonLink={
+                        <ButtonLink small href="https://google.com">
+                            Link
+                        </ButtonLink>
+                    }
+                />
             </Inline>
             <Inline space={16}>
                 <SnapCard title="Default" subtitle="Snap card" extra={<Placeholder height={100} />} />
@@ -169,6 +211,12 @@ export const SlotAlignment: StoryComponent = () => {
                     slotAlignment="bottom"
                     extra={<Placeholder height={50} />}
                 />
+                <SnapCard
+                    title="Space Between"
+                    subtitle="Snap card"
+                    slotAlignment="space-between"
+                    extra={[<Placeholder height={30} />, <Placeholder height={30} />]}
+                />
             </Inline>
         </Stack>
     );

src/__screenshot_tests__/__image_snapshots__/card-screenshot-test-tsx-card-background-cover-card-with-background-color-1-snap.png

@@ -355,7 +355,7 @@ export const mediaArgTypes = {
 
 export const dataArgTypes = {
     slotAlignment: {
-        options: ['', 'content', 'bottom'],
+        options: ['', 'content', 'bottom', 'space-between'],
         control: {
             type: 'select',
             labels: {'': 'undefined'},