From db422257e4c5272e60d290eaaeaa1dbfcd09b234 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Wed, 22 Jan 2020 12:59:46 +0300
Subject: [PATCH] add BaseCard component

---
 webapp/assets/_new/styles/resets.scss         | 10 ++++++
 .../_new/generic/BaseCard/BaseCard.story.js   | 27 ++++++++++++++++
 .../_new/generic/BaseCard/BaseCard.vue        | 32 +++++++++++++++++++
 3 files changed, 69 insertions(+)
 create mode 100644 webapp/components/_new/generic/BaseCard/BaseCard.story.js
 create mode 100644 webapp/components/_new/generic/BaseCard/BaseCard.vue

diff --git a/webapp/assets/_new/styles/resets.scss b/webapp/assets/_new/styles/resets.scss
index 2784add5f..144f22d10 100644
--- a/webapp/assets/_new/styles/resets.scss
+++ b/webapp/assets/_new/styles/resets.scss
@@ -9,3 +9,13 @@ button {
   font-family: inherit;
   font-size: inherit;
 }
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  margin: 0;
+}
diff --git a/webapp/components/_new/generic/BaseCard/BaseCard.story.js b/webapp/components/_new/generic/BaseCard/BaseCard.story.js
new file mode 100644
index 000000000..3462df4d1
--- /dev/null
+++ b/webapp/components/_new/generic/BaseCard/BaseCard.story.js
@@ -0,0 +1,27 @@
+import { storiesOf } from '@storybook/vue'
+import helpers from '~/storybook/helpers'
+import BaseCard from './BaseCard.vue'
+
+storiesOf('Generic/BaseCard', module)
+  .addDecorator(helpers.layout)
+
+  .add('default', () => ({
+    components: { BaseCard },
+    template: `
+      <base-card>
+        <h2 class="card-heading">I am a card heading</h2>
+        <p>And I am a paragraph.</p>
+      </base-card>
+    `,
+  }))
+
+  .add('with image', () => ({
+    components: { BaseCard },
+    template: `
+      <base-card style="width: 400px;">
+        <img class="card-image" src="https://unsplash.com/photos/R4y_E5ZQDPg/download" />
+        <h2 class="card-heading">I am a card heading</h2>
+        <p>And I am a paragraph.</p>
+      </base-card>
+    `,
+  }))
diff --git a/webapp/components/_new/generic/BaseCard/BaseCard.vue b/webapp/components/_new/generic/BaseCard/BaseCard.vue
new file mode 100644
index 000000000..b76af1c78
--- /dev/null
+++ b/webapp/components/_new/generic/BaseCard/BaseCard.vue
@@ -0,0 +1,32 @@
+<template>
+  <article class="base-card">
+    <slot />
+  </article>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+.base-card {
+  padding: $space-base;
+  border-radius: $border-radius-x-large;
+  overflow: hidden;
+  background-color: $color-neutral-100;
+  box-shadow: $box-shadow-base;
+
+  > .card-image {
+    width: calc(100% + (2 * #{$space-base}));
+    margin: -$space-base;
+    margin-bottom: $space-base;
+    font-size: $font-size-x-large;
+  }
+
+  > .card-heading {
+    margin-bottom: $space-x-small;
+  }
+}
+</style>