refactor: Move Logo out of styleguide

webapp/components/Logo.vue

@@ -1,79 +0,0 @@
-<template>
-  <div class="VueToNuxtLogo">
-    <div class="Triangle Triangle--two" />
-    <div class="Triangle Triangle--one" />
-    <div class="Triangle Triangle--three" />
-    <div class="Triangle Triangle--four" />
-  </div>
-</template>
-
-<style>
-.VueToNuxtLogo {
-  display: inline-block;
-  animation: turn 2s linear forwards 1s;
-  transform: rotateX(180deg);
-  position: relative;
-  overflow: hidden;
-  height: 180px;
-  width: 245px;
-}
-
-.Triangle {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 0;
-}
-
-.Triangle--one {
-  border-left: 105px solid transparent;
-  border-right: 105px solid transparent;
-  border-bottom: 180px solid #41b883;
-}
-
-.Triangle--two {
-  top: 30px;
-  left: 35px;
-  animation: goright 0.5s linear forwards 3.5s;
-  border-left: 87.5px solid transparent;
-  border-right: 87.5px solid transparent;
-  border-bottom: 150px solid #3b8070;
-}
-
-.Triangle--three {
-  top: 60px;
-  left: 35px;
-  animation: goright 0.5s linear forwards 3.5s;
-  border-left: 70px solid transparent;
-  border-right: 70px solid transparent;
-  border-bottom: 120px solid #35495e;
-}
-
-.Triangle--four {
-  top: 120px;
-  left: 70px;
-  animation: godown 0.5s linear forwards 3s;
-  border-left: 35px solid transparent;
-  border-right: 35px solid transparent;
-  border-bottom: 60px solid #fff;
-}
-
-@keyframes turn {
-  100% {
-    transform: rotateX(0deg);
-  }
-}
-
-@keyframes godown {
-  100% {
-    top: 180px;
-  }
-}
-
-@keyframes goright {
-  100% {
-    left: 70px;
-  }
-}
-</style>

webapp/components/Logo/Logo.vue

@@ -0,0 +1,70 @@
+<template>
+  <component
+    :is="tag"
+    class="ds-logo"
+    :class="[inverse && 'ds-logo-inverse']"
+  >
+    <svg-logo
+      v-if="!inverse"
+      class="ds-logo-svg"
+    />
+    <svg-logo-inverse
+      v-else
+      class="ds-logo-svg"
+    />
+  </component>
+</template>
+
+<script>
+import svgLogo from '~/static/img/custom/Logo-Horizontal.svg'
+import svgLogoInverse from '~/static/img/custom/Logo-Horizontal-Dark.svg'
+/**
+ * This component displays the brand's logo.
+ * @version 1.0.0
+ */
+export default {
+  name: 'Logo',
+  components: {
+    svgLogo,
+    svgLogoInverse
+  },
+  props: {
+    /**
+     * Inverse the logo
+     */
+    inverse: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * The html element name used for the logo.
+     */
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ds-logo {
+  @include reset;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  color: $text-color-primary;
+}
+
+.ds-logo-inverse {
+  color: $text-color-primary-inverse;
+}
+
+.ds-logo-svg {
+  width: 130px;
+  height: auto;
+  fill: currentColor;
+}
+</style>
+
+<docs src="./demo.md"></docs>

webapp/components/Logo/demo.md

@@ -0,0 +1,15 @@
+# Basic usage
+
+```
+<ds-section>
+  <ds-logo></ds-logo>
+</ds-section>
+```
+
+# Inverse Logo
+
+```
+<ds-section secondary>
+  <ds-logo inverse></ds-logo>
+</ds-section>
+```

webapp/components/Logo/style.scss

@@ -0,0 +1,17 @@
+.ds-logo {
+  @include reset;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  color: $text-color-primary;
+}
+
+.ds-logo-inverse {
+  color: $text-color-primary-inverse;
+}
+
+.ds-logo-svg {
+  width: 130px;
+  height: auto;
+  fill: currentColor;
+}

webapp/layouts/basic.vue

@@ -6,7 +6,7 @@
           <ds-flex-item width="5.5%" />
           <ds-flex-item style="flex-grow: 1;" width="20%">
             <a @click="redirectToRoot">
-              <ds-logo />
+              <Logo />
             </a>
           </ds-flex-item>
           <ds-flex-item width="20%" style="flex-grow: 0;">
@@ -26,12 +26,14 @@
 </template>
 
 <script>
+import Logo from '~/components/Logo/Logo'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import seo from '~/mixins/seo'
 import PageFooter from '~/components/PageFooter/PageFooter'
 
 export default {
   components: {
+    Logo,
     LocaleSwitch,
     PageFooter,
   },

webapp/layouts/default.vue

@@ -6,7 +6,7 @@
           <ds-flex class="main-navigation-flex">
             <ds-flex-item :width="{ base: '142px' }">
               <nuxt-link :to="{ name: 'index' }" v-scroll-to="'.main-navigation'">
-                <ds-logo />
+                <Logo />
               </nuxt-link>
             </ds-flex-item>
             <ds-flex-item
@@ -74,6 +74,7 @@
 </template>
 
 <script>
+import Logo from '~/components/Logo/Logo'
 import { mapGetters } from 'vuex'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import SearchField from '~/components/features/SearchField/SearchField.vue'
@@ -86,6 +87,7 @@ import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
 
 export default {
   components: {
+    Logo,
     LocaleSwitch,
     SearchField,
     Modal,