feat(gds-media-card): add free form content slot

generoi · Aug 10, 2020 · e274a86 · e274a86
1 parent 3184715
commit e274a86
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 21 deletions.
diff --git a/src/components/gds-card/_index.scss b/src/components/gds-card/_index.scss
@@ -10,6 +10,6 @@ $card-width: 450px;
   background-color: white;
   box-shadow: 5px 5px 15px #64646426, -5px -5px 15px #ffffffcc;
   overflow: hidden;
-  width: $card-width;
+  width: var(--gds-card-width, $card-width);
   flex-direction: column;
 }
diff --git a/src/components/gds-media-card/_index.scss b/src/components/gds-media-card/_index.scss
@@ -3,16 +3,21 @@
   height: 370px;
   display: block;
   margin-bottom: 24px;
+  object-fit: cover;
 }
 
 @mixin headline {
-  margin-bottom: 8px;
+  margin-bottom: 0 0 var(--spacing-xxs) 0;
 }
 
 @mixin description {
-  margin: 0 24px;
+  margin: 0 0 var(--spacing-s) 0;
 }
 
 @mixin tags {
-  margin: 20px 8px 32px 8px;
+  margin: 0 0 var(--spacing-xxs) 0;
+}
+
+@mixin content {
+  padding: var(--spacing-m) var(--spacing-xs);
 }
diff --git a/src/components/gds-media-card/gds-media-card.scss b/src/components/gds-media-card/gds-media-card.scss
@@ -15,3 +15,7 @@
 .tags {
   @include tags;
 }
+
+.content {
+  @include content;
+}
diff --git a/src/components/gds-media-card/gds-media-card.stories.js b/src/components/gds-media-card/gds-media-card.stories.js
@@ -9,20 +9,28 @@ export default {
 
 // prettier-ignore
 export const MediaCard = () => html`
-  <p>
-    <gds-media-card headline="Card Headline" image-url="${getMockImageUrl('product', 500, 500)}">
-      <gds-tag>First Tag</gds-tag>
-      <gds-tag href="https://www.genero.fi">Tag with a link</gds-tag>
+  <div style="margin: 20px;">
+    <gds-media-card image-url="${getMockImageUrl('product', 500, 500)}">
+      <div slot="content">
+        <gds-heading size="s">This is a headline</gds-heading>
+        <gds-paragraph>
+          This Media Card uses a free form content slot. Here is some description.
+        </gds-paragraph>
+        <gds-tag>First Tag</gds-tag>
+        <gds-tag href="https://www.genero.fi">Tag with a link</gds-tag>
+      </div>
     </gds-media-card>
-  </p>
-  <p>
+  </div>
+  <div style="margin: 20px;">
     <gds-media-card
       headline="Card Headline"
       image-url="${getMockImageUrl('product', 500, 500)}"
-      description="L Body: A single micro service platform for five media sites and 16 media brands."
+      description="This Media Card uses a paramenters for content."
     >
-      <gds-tag>First Tag</gds-tag>
-      <gds-tag href="https://www.genero.fi">Tag with a link</gds-tag>
+      <div slot="tags">
+        <gds-tag>From tags slot</gds-tag>
+        <gds-tag href="https://www.genero.fi">Tag with a link</gds-tag>
+      </div>
     </gds-media-card>
-  </p>
-  `
+  </div>
+`
diff --git a/src/components/gds-media-card/gds-media-card.tsx b/src/components/gds-media-card/gds-media-card.tsx
@@ -44,12 +44,20 @@ export class GdsMediaCard {
       <gds-card>
         {/* TODO: Implement a gds-image component that implements <picture> and srcset etc. */}
         <img src={this.imageUrl} class="image" />
-        <div class="headline">
-          <gds-heading size="s">{this.headline}</gds-heading>
-        </div>
-        <gds-paragraph class="description">{this.description}</gds-paragraph>
-        <div class="tags">
-          <slot></slot>
+        <div class="content">
+          {this.headline && (
+            <div class="headline">
+              <gds-heading size="s">{this.headline}</gds-heading>
+            </div>
+          )}
+
+          {this.description && <gds-paragraph class="description">{this.description}</gds-paragraph>}
+
+          <div class="tags">
+            <slot name="tags"></slot>
+          </div>
+
+          <slot name="content"></slot>
         </div>
       </gds-card>
     )