replace CardWithColumns with new and improved BaseCard

webapp/components/LoginForm/LoginForm.vue

@@ -40,7 +40,9 @@
           <nuxt-link to="/registration/signup">{{ $t('login.register') }}</nuxt-link>
         </p>
       </form>
-      <locale-switch offset="5" />
+      <template v-slot:topMenu>
+        <locale-switch offset="5" />
+      </template>
     </base-card>
   </section>
 </template>
@@ -85,16 +87,6 @@ export default {
   width: 80vw;
   max-width: 620px;
   margin: auto;
-}
-
-.login-form > .base-card {
-  position: relative;
-
-  .v-popover {
-    position: absolute;
-    top: $space-small;
-    left: $space-small;
-  }
 
   .base-button {
     display: block;

webapp/components/_new/generic/BaseCard/BaseCard.story.js

@@ -41,6 +41,22 @@ storiesOf('Generic/BaseCard', module)
     `,
   }))
 
+  .add('with slot: topMenu', () => ({
+    components: { BaseCard },
+    template: `
+      <base-card style="width: 600px;">
+        <template v-slot:imageColumn>
+          <img class="image" src="/img/sign-up/humanconnection.svg" />
+        </template>
+        <h2 class="title">I am a card heading</h2>
+        <p>And I am a paragraph.</p>
+        <template v-slot:topMenu>
+          <base-button size="small">Menu</base-button>
+        </template>
+      </base-card>
+    `,
+  }))
+
   .add('with highlight prop', () => ({
     components: { BaseCard },
     template: `

webapp/components/_new/generic/BaseCard/BaseCard.vue

@@ -17,6 +17,9 @@
     </template>
 
     <slot v-else />
+    <aside v-if="$slots.topMenu" class="top-menu">
+      <slot name="topMenu" />
+    </aside>
   </article>
 </template>
 
@@ -48,6 +51,7 @@ export default {
 
 <style lang="scss">
 .base-card {
+  position: relative;
   padding: $space-base;
   border-radius: $border-radius-x-large;
   overflow: hidden;
@@ -107,5 +111,11 @@ export default {
   > .content-column {
     flex-basis: 50%;
   }
+
+  > .top-menu {
+    position: absolute;
+    top: $space-small;
+    left: $space-small;
+  }
 }
 </style>

webapp/components/_new/generic/CardWithColumns/CardWithColumns.story.js

@@ -1,21 +0,0 @@
-import { storiesOf } from '@storybook/vue'
-import helpers from '~/storybook/helpers'
-import CardWithColumns from './CardWithColumns.vue'
-
-storiesOf('Generic/CardWithColumns', module)
-  .addDecorator(helpers.layout)
-
-  .add('default', () => ({
-    components: { CardWithColumns },
-    template: `
-      <card-with-columns>
-        <template v-slot:left>
-          <img src="/img/sign-up/humanconnection.svg" style="width: 80%; margin: auto;" />
-        </template>
-        <template v-slot:right>
-          <h2 style="margin-bottom: 12px">I am in the right column</h2>
-          <p>And so is this paragraph.</p>
-        </template>
-      </card-with-columns>
-    `,
-  }))

webapp/components/_new/generic/CardWithColumns/CardWithColumns.vue

@@ -1,26 +0,0 @@
-<template>
-  <base-card class="card-with-columns">
-    <section class="column --left">
-      <slot name="left" />
-    </section>
-    <section class="column --right">
-      <slot name="right" />
-    </section>
-  </base-card>
-</template>
-
-<script>
-export default {}
-</script>
-
-<style lang="scss">
-.card-with-columns {
-  display: flex;
-
-  > .column {
-    flex-basis: 50%;
-    display: flex;
-    flex-direction: column;
-  }
-}
-</style>

webapp/pages/password-reset.vue

@@ -1,24 +1,22 @@
 <template>
   <ds-container width="small" class="password-reset">
-    <card-with-columns>
+    <base-card>
-      <template v-slot:left>
+      <template v-slot:imageColumn>
-        <locale-switch offset="5" />
         <img alt="Human Connection" src="/icon.png" class="image" />
       </template>
-      <template v-slot:right>
+      <nuxt-child />
-        <nuxt-child />
+      <template v-slot:topMenu>
+        <locale-switch offset="5" />
       </template>
-    </card-with-columns>
+    </base-card>
   </ds-container>
 </template>
 
 <script>
-import CardWithColumns from '~/components/_new/generic/CardWithColumns/CardWithColumns'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 
 export default {
   components: {
-    CardWithColumns,
     LocaleSwitch,
   },
   layout: 'no-header',
@@ -29,17 +27,3 @@ export default {
   },
 }
 </script>
-<style lang="scss">
-.password-reset {
-  position: relative;
-
-  .v-popover {
-    position: absolute;
-  }
-
-  .image {
-    width: 70%;
-    margin: auto;
-  }
-}
-</style>

webapp/pages/registration.vue

@@ -1,24 +1,22 @@
 <template>
   <ds-container width="medium">
-    <card-with-columns>
+    <base-card>
-      <template v-slot:left>
+      <template v-slot:imageColumn>
+        <img alt="Human Connection" src="/img/sign-up/nicetomeetyou.svg" />
+      </template>
+      <nuxt-child />
+      <template v-slot:topMenu>
         <locale-switch offset="5" />
-        <img class="signup-image" alt="Human Connection" src="/img/sign-up/nicetomeetyou.svg" />
       </template>
-      <template v-slot:right>
+    </base-card>
-        <nuxt-child />
-      </template>
-    </card-with-columns>
   </ds-container>
 </template>
 
 <script>
-import CardWithColumns from '~/components/_new/generic/CardWithColumns/CardWithColumns'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 
 export default {
   components: {
-    CardWithColumns,
     LocaleSwitch,
   },
   layout: 'no-header',