From 9c3378807c6a0af9d04472979e64ca9d0f20c88c Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Tue, 11 Feb 2020 11:23:34 +0100
Subject: [PATCH] introduce CardWithColumns component

---
 webapp/components/LoginForm/LoginForm.vue     | 144 +++++++++---------
 .../CardWithColumns/CardWithColumns.story.js  |  21 +++
 .../CardWithColumns/CardWithColumns.vue       |  26 ++++
 webapp/pages/password-reset.vue               |  45 +++---
 4 files changed, 142 insertions(+), 94 deletions(-)
 create mode 100644 webapp/components/_new/generic/CardWithColumns/CardWithColumns.story.js
 create mode 100644 webapp/components/_new/generic/CardWithColumns/CardWithColumns.vue

diff --git a/webapp/components/LoginForm/LoginForm.vue b/webapp/components/LoginForm/LoginForm.vue
index 6b839697f..1e3444543 100644
--- a/webapp/components/LoginForm/LoginForm.vue
+++ b/webapp/components/LoginForm/LoginForm.vue
@@ -4,52 +4,56 @@
       <p>{{ $t('quotes.african.quote') }}</p>
       <b>- {{ $t('quotes.african.author') }}</b>
     </blockquote>
-    <base-card>
-      <client-only>
-        <locale-switch class="locale-switch" />
-      </client-only>
-      <a :href="$t('login.moreInfoURL')" :title="$t('login.moreInfo')" target="_blank" class="link">
-        <img class="image" alt="Human Connection" src="/img/sign-up/humanconnection.svg" />
-      </a>
-      <form :disabled="pending" @submit.prevent="onSubmit" class="form">
-        <h2 class="title">{{ $t('login.login') }}</h2>
-        <ds-input
-          v-model="form.email"
-          :disabled="pending"
-          :placeholder="$t('login.email')"
-          type="email"
-          name="email"
-          icon="envelope"
-        />
-        <ds-input
-          v-model="form.password"
-          :disabled="pending"
-          :placeholder="$t('login.password')"
-          icon="lock"
-          icon-right="question-circle"
-          name="password"
-          type="password"
-        />
-        <nuxt-link to="/password-reset/request" class="password-link">
-          {{ $t('login.forgotPassword') }}
-        </nuxt-link>
-        <base-button :loading="pending" filled name="submit" type="submit" icon="sign-in">
-          {{ $t('login.login') }}
-        </base-button>
-        <p class="signup-hint">
-          {{ $t('login.no-account') }}
-          <nuxt-link to="/registration/signup">{{ $t('login.register') }}</nuxt-link>
-        </p>
-      </form>
-    </base-card>
+    <card-with-columns>
+      <template v-slot:left>
+        <locale-switch offset="5" />
+        <a :href="$t('login.moreInfoURL')" :title="$t('login.moreInfo')" target="_blank">
+          <img class="image" alt="Human Connection" src="/img/sign-up/humanconnection.svg" />
+        </a>
+      </template>
+      <template v-slot:right>
+        <form :disabled="pending" @submit.prevent="onSubmit">
+          <h2 class="title">{{ $t('login.login') }}</h2>
+          <ds-input
+            v-model="form.email"
+            :disabled="pending"
+            :placeholder="$t('login.email')"
+            type="email"
+            name="email"
+            icon="envelope"
+          />
+          <ds-input
+            v-model="form.password"
+            :disabled="pending"
+            :placeholder="$t('login.password')"
+            icon="lock"
+            icon-right="question-circle"
+            name="password"
+            type="password"
+          />
+          <nuxt-link to="/password-reset/request" class="password-link">
+            {{ $t('login.forgotPassword') }}
+          </nuxt-link>
+          <base-button :loading="pending" filled name="submit" type="submit" icon="sign-in">
+            {{ $t('login.login') }}
+          </base-button>
+          <p class="signup-hint">
+            {{ $t('login.no-account') }}
+            <nuxt-link to="/registration/signup">{{ $t('login.register') }}</nuxt-link>
+          </p>
+        </form>
+      </template>
+    </card-with-columns>
   </section>
 </template>
 
 <script>
-import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch.vue'
+import CardWithColumns from '~/components/_new/generic/CardWithColumns/CardWithColumns'
+import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 
 export default {
   components: {
+    CardWithColumns,
     LocaleSwitch,
   },
   data() {
@@ -85,47 +89,41 @@ export default {
   width: 80vw;
   max-width: 620px;
   margin: auto;
+}
 
-  > .base-card {
-    position: relative;
-    display: flex;
+.login-form > .card-with-columns {
+  position: relative;
 
-    > .locale-switch {
-      position: absolute;
-      top: $space-small;
-      left: $space-small;
-    }
+  > .column.--left {
+    justify-content: center;
+  }
 
-    > .link {
-      flex-basis: 50%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+  .v-popover {
+    position: absolute;
+    top: $space-small;
+    left: $space-small;
+  }
 
-      > .image {
-        width: 90%;
-        max-width: 200px;
-      }
-    }
+  .image {
+    display: block;
+    width: 90%;
+    max-width: 200px;
+    margin: auto;
+  }
 
-    > .form {
-      flex-basis: 50%;
+  .title {
+    margin-bottom: $space-small;
+  }
 
-      > .title {
-        margin-bottom: $space-small;
-      }
+  .password-link {
+    display: block;
+    margin-bottom: $space-large;
+  }
 
-      > .password-link {
-        display: block;
-        margin-bottom: $space-large;
-      }
-
-      > .base-button {
-        display: block;
-        width: 100%;
-        margin-bottom: $space-small;
-      }
-    }
+  .base-button {
+    display: block;
+    width: 100%;
+    margin-bottom: $space-small;
   }
 }
 </style>
diff --git a/webapp/components/_new/generic/CardWithColumns/CardWithColumns.story.js b/webapp/components/_new/generic/CardWithColumns/CardWithColumns.story.js
new file mode 100644
index 000000000..8b1e8940f
--- /dev/null
+++ b/webapp/components/_new/generic/CardWithColumns/CardWithColumns.story.js
@@ -0,0 +1,21 @@
+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>
+    `,
+  }))
diff --git a/webapp/components/_new/generic/CardWithColumns/CardWithColumns.vue b/webapp/components/_new/generic/CardWithColumns/CardWithColumns.vue
new file mode 100644
index 000000000..71fda7caf
--- /dev/null
+++ b/webapp/components/_new/generic/CardWithColumns/CardWithColumns.vue
@@ -0,0 +1,26 @@
+<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>
diff --git a/webapp/pages/password-reset.vue b/webapp/pages/password-reset.vue
index a4d0f1e56..e59a8e6c7 100644
--- a/webapp/pages/password-reset.vue
+++ b/webapp/pages/password-reset.vue
@@ -1,28 +1,24 @@
 <template>
-  <ds-container width="small">
-    <ds-card>
-      <ds-flex gutter="small">
-        <ds-flex-item :width="{ base: '100%', sm: '40%' }">
-          <client-only>
-            <locale-switch offset="5" />
-          </client-only>
-          <ds-space margin-top="small" margin-bottom="xxx-small" centered>
-            <img alt="Human Connection" src="/icon.png" />
-          </ds-space>
-        </ds-flex-item>
-        <ds-flex-item :width="{ base: '100%', sm: '60%' }" centered>
-          <nuxt-child />
-        </ds-flex-item>
-      </ds-flex>
-    </ds-card>
+  <ds-container width="small" class="password-reset">
+    <card-with-columns>
+      <template v-slot:left>
+        <locale-switch offset="5" />
+        <img alt="Human Connection" src="/icon.png" class="image" />
+      </template>
+      <template v-slot:right>
+        <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',
@@ -33,10 +29,17 @@ export default {
   },
 }
 </script>
-<style lang="scss" scoped>
-img {
-  padding-left: 50px;
-  padding-right: 50px;
-  max-width: 200px;
+<style lang="scss">
+.password-reset {
+  position: relative;
+
+  .v-popover {
+    position: absolute;
+  }
+
+  .image {
+    width: 70%;
+    margin: auto;
+  }
 }
 </style>