From 00475f4581e24316bcdf2ce7edf7c3e0d6ae18c2 Mon Sep 17 00:00:00 2001
From: Carlos Navas <cnavas@geoblink.com>
Date: Wed, 8 Apr 2020 14:09:40 +0200
Subject: [PATCH] Change GeoKPI to GeoValue

---
 CHANGELOG.md                                  |   2 +-
 src/elements/GeoKPI/GeoKPI.vue                |  81 -------------
 src/elements/GeoKPI/GeoNegativeKPI.vue        |  23 ----
 src/elements/GeoKPI/GeoNeutralKPI.vue         |  23 ----
 src/elements/GeoKPI/GeoPositiveKPI.vue        |  23 ----
 .../GeoNegativeValue.examples.md}             |  44 +++----
 src/elements/GeoValue/GeoNegativeValue.vue    |  23 ++++
 .../GeoNeutralValue.examples.md}              |  44 +++----
 src/elements/GeoValue/GeoNeutralValue.vue     |  23 ++++
 .../GeoPositiveValue.examples.md}             |  44 +++----
 src/elements/GeoValue/GeoPositiveValue.vue    |  23 ++++
 .../GeoValue.examples.md}                     |  52 ++++----
 .../GeoValue.mixin.js}                        |   8 +-
 .../GeoValue.template.html}                   |   4 +-
 src/elements/GeoValue/GeoValue.vue            |  81 +++++++++++++
 .../GeoVerticalLayout.examples.md             |   8 +-
 .../_geo-value.scss}                          |  34 +++---
 src/styles/styles.scss                        |   2 +-
 .../unit/specs/elements/GeoKPI/GeoKPI.spec.js | 112 ------------------
 .../specs/elements/GeoValue/GeoValue.spec.js  | 112 ++++++++++++++++++
 20 files changed, 383 insertions(+), 383 deletions(-)
 delete mode 100644 src/elements/GeoKPI/GeoKPI.vue
 delete mode 100644 src/elements/GeoKPI/GeoNegativeKPI.vue
 delete mode 100644 src/elements/GeoKPI/GeoNeutralKPI.vue
 delete mode 100644 src/elements/GeoKPI/GeoPositiveKPI.vue
 rename src/elements/{GeoKPI/GeoNegativeKPI.examples.md => GeoValue/GeoNegativeValue.examples.md} (90%)
 create mode 100644 src/elements/GeoValue/GeoNegativeValue.vue
 rename src/elements/{GeoKPI/GeoNeutralKPI.examples.md => GeoValue/GeoNeutralValue.examples.md} (90%)
 create mode 100644 src/elements/GeoValue/GeoNeutralValue.vue
 rename src/elements/{GeoKPI/GeoPositiveKPI.examples.md => GeoValue/GeoPositiveValue.examples.md} (90%)
 create mode 100644 src/elements/GeoValue/GeoPositiveValue.vue
 rename src/elements/{GeoKPI/GeoKPI.examples.md => GeoValue/GeoValue.examples.md} (92%)
 rename src/elements/{GeoKPI/GeoKPI.mixin.js => GeoValue/GeoValue.mixin.js} (83%)
 rename src/elements/{GeoKPI/GeoKPI.template.html => GeoValue/GeoValue.template.html} (88%)
 create mode 100644 src/elements/GeoValue/GeoValue.vue
 rename src/styles/elements/{GeoKPI/_geo-kpi.scss => GeoValue/_geo-value.scss} (50%)
 delete mode 100644 test/unit/specs/elements/GeoKPI/GeoKPI.spec.js
 create mode 100644 test/unit/specs/elements/GeoValue/GeoValue.spec.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8d1640eb9..31989f118 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,7 @@
 
 New:
 
-- `GeoKPI` component
+- `GeoValue` component
 
 ## 29.5.5
 
diff --git a/src/elements/GeoKPI/GeoKPI.vue b/src/elements/GeoKPI/GeoKPI.vue
deleted file mode 100644
index 0106e8a34..000000000
--- a/src/elements/GeoKPI/GeoKPI.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-  <div
-    :class="kpiCssClasses"
-  >
-    <div class="geo-kpi__column">
-      <slot name="warningTooltip" />
-    </div>
-    <div class="geo-kpi__column">
-      <div class="geo-kpi__row">
-        <span
-          class="geo-kpi__value"
-        >
-          {{ value }}
-        </span>
-        <span
-          v-if="unit"
-          class="geo-kpi__unit"
-        >
-          {{ unit }}
-        </span>
-      </div>
-      <div class="geo-kpi__row">
-        <span
-          v-if="description"
-          class="geo-kpi__description"
-        >
-          {{ description }}
-        </span>
-        <slot name="descriptionTooltip" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import mixin, { TYPES } from './GeoKPI.mixin'
-import { enumPropertyFactory } from '../../utils/enumPropertyFactory'
-
-/**
- * `GeoKPI` is a component for displaying data, specially designed to display Key Performance Indicators
- */
-
-export default {
-  name: 'GeoKPI',
-  status: 'ready',
-  release: '29.6.0',
-  constants: {
-    TYPES
-  },
-  mixins: [mixin],
-  props: {
-    /**
-     * Predefined type scheme of the KPI component
-     *
-     * > **Note:** There are specific components to avoid explicitly writing this value.
-     *
-     * | type         |          Specific component         | Proposed usage (example) |
-     * |--------------|-------------------------------------|--------------------------|
-     * | `standard`   | [GeoKPI](./GeoKPI)                  | Standard KPI             |
-     * | `positive`   | [GeoPositiveKPI](./GeoPositiveKPI)  | Positive value KPI       |
-     * | `neutral`    | [GeoNeutralKPI](./GeoNeutralKPI)    | Neutral value KPI        |
-     * | `negative`   | [GeoNegativeKPI](./GeoNegativeKPI)  | Negative value KPI       |
-     *
-     * Supported `type` values are exported under `TYPES` named export. See
-     * [Component Constants](/docs/guides/using-constants) for more info on how to
-     * use those constants in your code.
-     */
-    type: enumPropertyFactory({
-      componentName: 'GeoKPI',
-      propertyName: 'type',
-      enumDictionary: TYPES,
-      defaultValue: TYPES.standard
-    })
-  },
-  computed: {
-    kpiCssClasses () {
-      return `geo-kpi geo-kpi--${this.type} geo-kpi--${this.isPrimary ? 'is-primary' : 'is-secondary'}`
-    }
-  }
-}
-</script>
diff --git a/src/elements/GeoKPI/GeoNegativeKPI.vue b/src/elements/GeoKPI/GeoNegativeKPI.vue
deleted file mode 100644
index 3f264c92f..000000000
--- a/src/elements/GeoKPI/GeoNegativeKPI.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template src="./GeoKPI.template.html" />
-
-<script>
-import mixin, { TYPES } from './GeoKPI.mixin'
-
-/**
- * [GeoKPI](./GeoKPI) using predefined `negative` type.
- *
- * See [GeoKPI](./GeoKPI) for a complete list of supported properties and
- * features.
-*/
-export default {
-  name: 'GeoNegativeKPI',
-  status: 'ready',
-  release: '29.6.0',
-  mixins: [mixin],
-  computed: {
-    type () {
-      return TYPES.negative
-    }
-  }
-}
-</script>
diff --git a/src/elements/GeoKPI/GeoNeutralKPI.vue b/src/elements/GeoKPI/GeoNeutralKPI.vue
deleted file mode 100644
index 2f5edec15..000000000
--- a/src/elements/GeoKPI/GeoNeutralKPI.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template src="./GeoKPI.template.html" />
-
-<script>
-import mixin, { TYPES } from './GeoKPI.mixin'
-
-/**
- * [GeoKPI](./GeoKPI) using predefined `neutral` type.
- *
- * See [GeoKPI](./GeoKPI) for a complete list of supported properties and
- * features.
-*/
-export default {
-  name: 'GeoNeutralKPI',
-  status: 'ready',
-  release: '29.6.0',
-  mixins: [mixin],
-  computed: {
-    type () {
-      return TYPES.neutral
-    }
-  }
-}
-</script>
diff --git a/src/elements/GeoKPI/GeoPositiveKPI.vue b/src/elements/GeoKPI/GeoPositiveKPI.vue
deleted file mode 100644
index 6157e4365..000000000
--- a/src/elements/GeoKPI/GeoPositiveKPI.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template src="./GeoKPI.template.html" />
-
-<script>
-import mixin, { TYPES } from './GeoKPI.mixin'
-
-/**
- * [GeoKPI](./GeoKPI) using predefined `positive` type.
- *
- * See [GeoKPI](./GeoKPI) for a complete list of supported properties and
- * features.
-*/
-export default {
-  name: 'GeoPositiveKPI',
-  status: 'ready',
-  release: '29.6.0',
-  mixins: [mixin],
-  computed: {
-    type () {
-      return TYPES.positive
-    }
-  }
-}
-</script>
diff --git a/src/elements/GeoKPI/GeoNegativeKPI.examples.md b/src/elements/GeoValue/GeoNegativeValue.examples.md
similarity index 90%
rename from src/elements/GeoKPI/GeoNegativeKPI.examples.md
rename to src/elements/GeoValue/GeoNegativeValue.examples.md
index ad9f40548..cdee374a5 100644
--- a/src/elements/GeoKPI/GeoNegativeKPI.examples.md
+++ b/src/elements/GeoValue/GeoNegativeValue.examples.md
@@ -4,7 +4,7 @@
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-negative-KPI
+      <geo-negative-value
         :value="value"
         :is-primary="isPrimary"
       />
@@ -14,7 +14,7 @@
 
 <script>
 export default {
-  name: 'GeoNegativeKPIDemo',
+  name: 'GeoNegativeValueDemo',
   data () {
     return {
       value: "27th of 73",
@@ -31,7 +31,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-negative-KPI
+      <geo-negative-value
         :value="value"
         :is-primary="isPrimary"
         :unit="unit"
@@ -42,7 +42,7 @@ export default {
 
 <script>
 export default {
-  name: 'GeoNegativeKPIDemo',
+  name: 'GeoNegativeValueDemo',
   data () {
     return {
       value: "365",
@@ -60,7 +60,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-negative-KPI
+      <geo-negative-value
         :value="value"
         :is-primary="isPrimary"
         :description="description"
@@ -71,7 +71,7 @@ export default {
 
 <script>
 export default {
-  name: 'GeoNegativeKPIDemo',
+  name: 'GeoNegativeValueDemo',
   data () {
     return {
       value: "27th of 35",
@@ -89,7 +89,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-negative-KPI
+      <geo-negative-value
         :value="value"
         :is-primary="isPrimary"
         :description="description"
@@ -103,14 +103,14 @@ export default {
             Tooltip text
           </geo-tooltip>
         </template>
-      </geo-negative-KPI>
+      </geo-negative-value>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'GeoNegativeKPIDemo',
+  name: 'GeoNegativeValueDemo',
   data () {
     return {
       descriptionTooltipIcon: null,
@@ -133,7 +133,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-negative-KPI
+      <geo-negative-value
         :value="value"
         :is-primary="isPrimary"
         :description="description"
@@ -148,14 +148,14 @@ export default {
             Warning tooltip text
           </geo-tooltip>
         </template>
-      </geo-negative-KPI>
+      </geo-negative-value>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'GeoNegativeKPIDemo',
+  name: 'GeoNegativeValueDemo',
   data () {
     return {
       warningTooltipIcon: null,
@@ -185,7 +185,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-negative-KPI
+      <geo-negative-value
         :value="value"
         :is-primary="isPrimary"
       />
@@ -195,7 +195,7 @@ export default {
 
 <script>
 export default {
-  name: 'GeoNegativeKPIDemo',
+  name: 'GeoNegativeValueDemo',
   data () {
     return {
       value: "27th of 73",
@@ -212,7 +212,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-negative-KPI
+      <geo-negative-value
         :value="value"
         :is-primary="isPrimary"
         :unit="unit"
@@ -224,7 +224,7 @@ export default {
 
 <script>
 export default {
-  name: 'GeoNegativeKPIDemo',
+  name: 'GeoNegativeValueDemo',
   data () {
     return {
       value: "587",
@@ -243,7 +243,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-negative-KPI
+      <geo-negative-value
         :value="value"
         :is-primary="isPrimary"
         :description="description"
@@ -257,14 +257,14 @@ export default {
             Tooltip text
           </geo-tooltip>
         </template>
-      </geo-negative-KPI>
+      </geo-negative-value>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'GeoNegativeKPIDemo',
+  name: 'GeoNegativeValueDemo',
   data () {
     return {
       descriptionTooltipIcon: null,
@@ -286,7 +286,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-negative-KPI
+      <geo-negative-value
         :value="value"
         :is-primary="isPrimary"
         :description="description"
@@ -301,14 +301,14 @@ export default {
             Warning tooltip text
           </geo-tooltip>
         </template>
-      </geo-negative-KPI>
+      </geo-negative-value>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'GeoNegativeKPIDemo',
+  name: 'GeoNegativeValueDemo',
   data () {
     return {
       warningTooltipIcon: null,
diff --git a/src/elements/GeoValue/GeoNegativeValue.vue b/src/elements/GeoValue/GeoNegativeValue.vue
new file mode 100644
index 000000000..f5ca2ef0f
--- /dev/null
+++ b/src/elements/GeoValue/GeoNegativeValue.vue
@@ -0,0 +1,23 @@
+<template src="./GeoValue.template.html" />
+
+<script>
+import mixin, { TYPES } from './GeoValue.mixin'
+
+/**
+ * [GeoValue](./GeoValue) using predefined `negative` type.
+ *
+ * See [GeoValue](./GeoValue) for a complete list of supported properties and
+ * features.
+*/
+export default {
+  name: 'GeoNegativeValue',
+  status: 'ready',
+  release: '29.6.0',
+  mixins: [mixin],
+  computed: {
+    type () {
+      return TYPES.negative
+    }
+  }
+}
+</script>
diff --git a/src/elements/GeoKPI/GeoNeutralKPI.examples.md b/src/elements/GeoValue/GeoNeutralValue.examples.md
similarity index 90%
rename from src/elements/GeoKPI/GeoNeutralKPI.examples.md
rename to src/elements/GeoValue/GeoNeutralValue.examples.md
index e984b6ad4..bf4a325e1 100644
--- a/src/elements/GeoKPI/GeoNeutralKPI.examples.md
+++ b/src/elements/GeoValue/GeoNeutralValue.examples.md
@@ -4,7 +4,7 @@
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-neutral-KPI
+      <geo-neutral-value
         :value="value"
         :is-primary="isPrimary"
       />
@@ -14,7 +14,7 @@
 
 <script>
 export default {
-  name: 'GeoNeutralKPIDemo',
+  name: 'GeoNeutralValueDemo',
   data () {
     return {
       value: "27th of 73",
@@ -31,7 +31,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-neutral-KPI
+      <geo-neutral-value
         :value="value"
         :is-primary="isPrimary"
         :unit="unit"
@@ -42,7 +42,7 @@ export default {
 
 <script>
 export default {
-  name: 'GeoNeutralKPIDemo',
+  name: 'GeoNeutralValueDemo',
   data () {
     return {
       value: "365",
@@ -60,7 +60,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-neutral-KPI
+      <geo-neutral-value
         :value="value"
         :is-primary="isPrimary"
         :description="description"
@@ -71,7 +71,7 @@ export default {
 
 <script>
 export default {
-  name: 'GeoNeutralKPIDemo',
+  name: 'GeoNeutralValueDemo',
   data () {
     return {
       value: "27th of 35",
@@ -89,7 +89,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-neutral-KPI
+      <geo-neutral-value
         :value="value"
         :is-primary="isPrimary"
         :description="description"
@@ -103,14 +103,14 @@ export default {
             Tooltip text
           </geo-tooltip>
         </template>
-      </geo-neutral-KPI>
+      </geo-neutral-value>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'GeoNeutralKPIDemo',
+  name: 'GeoNeutralValueDemo',
   data () {
     return {
       descriptionTooltipIcon: null,
@@ -133,7 +133,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-neutral-KPI
+      <geo-neutral-value
         :value="value"
         :is-primary="isPrimary"
         :description="description"
@@ -148,14 +148,14 @@ export default {
             Warning tooltip text
           </geo-tooltip>
         </template>
-      </geo-neutral-KPI>
+      </geo-neutral-value>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'GeoNeutralKPIDemo',
+  name: 'GeoNeutralValueDemo',
   data () {
     return {
       warningTooltipIcon: null,
@@ -185,7 +185,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-neutral-KPI
+      <geo-neutral-value
         :value="value"
         :is-primary="isPrimary"
       />
@@ -195,7 +195,7 @@ export default {
 
 <script>
 export default {
-  name: 'GeoNeutralKPIDemo',
+  name: 'GeoNeutralValueDemo',
   data () {
     return {
       value: "27th of 73",
@@ -212,7 +212,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-neutral-KPI
+      <geo-neutral-value
         :value="value"
         :is-primary="isPrimary"
         :unit="unit"
@@ -223,7 +223,7 @@ export default {
 
 <script>
 export default {
-  name: 'GeoNeutralKPIDemo',
+  name: 'GeoNeutralValueDemo',
   data () {
     return {
       value: "587",
@@ -242,7 +242,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-neutral-KPI
+      <geo-neutral-value
         :value="value"
         :is-primary="isPrimary"
         :description="description"
@@ -256,14 +256,14 @@ export default {
             Tooltip text
           </geo-tooltip>
         </template>
-      </geo-neutral-KPI>
+      </geo-neutral-value>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'GeoNeutralKPIDemo',
+  name: 'GeoNeutralValueDemo',
   data () {
     return {
       descriptionTooltipIcon: null,
@@ -285,7 +285,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-neutral-KPI
+      <geo-neutral-value
         :value="value"
         :is-primary="isPrimary"
         :description="description"
@@ -300,14 +300,14 @@ export default {
             Warning tooltip text
           </geo-tooltip>
         </template>
-      </geo-neutral-KPI>
+      </geo-neutral-value>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'GeoNeutralKPIDemo',
+  name: 'GeoNeutralValueDemo',
   data () {
     return {
       warningTooltipIcon: null,
diff --git a/src/elements/GeoValue/GeoNeutralValue.vue b/src/elements/GeoValue/GeoNeutralValue.vue
new file mode 100644
index 000000000..844522d07
--- /dev/null
+++ b/src/elements/GeoValue/GeoNeutralValue.vue
@@ -0,0 +1,23 @@
+<template src="./GeoValue.template.html" />
+
+<script>
+import mixin, { TYPES } from './GeoValue.mixin'
+
+/**
+ * [GeoValue](./GeoValue) using predefined `neutral` type.
+ *
+ * See [GeoValue](./GeoValue) for a complete list of supported properties and
+ * features.
+*/
+export default {
+  name: 'GeoNeutralValue',
+  status: 'ready',
+  release: '29.6.0',
+  mixins: [mixin],
+  computed: {
+    type () {
+      return TYPES.neutral
+    }
+  }
+}
+</script>
diff --git a/src/elements/GeoKPI/GeoPositiveKPI.examples.md b/src/elements/GeoValue/GeoPositiveValue.examples.md
similarity index 90%
rename from src/elements/GeoKPI/GeoPositiveKPI.examples.md
rename to src/elements/GeoValue/GeoPositiveValue.examples.md
index 972875764..dd000e2c7 100644
--- a/src/elements/GeoKPI/GeoPositiveKPI.examples.md
+++ b/src/elements/GeoValue/GeoPositiveValue.examples.md
@@ -4,7 +4,7 @@
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-positive-KPI
+      <geo-positive-value
         :value="value"
         :is-primary="isPrimary"
       />
@@ -14,7 +14,7 @@
 
 <script>
 export default {
-  name: 'GeoPositiveKPIDemo',
+  name: 'GeoPositiveValueDemo',
   data () {
     return {
       value: "27th of 73",
@@ -31,7 +31,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-positive-KPI
+      <geo-positive-value
         :value="value"
         :is-primary="isPrimary"
         :unit="unit"
@@ -42,7 +42,7 @@ export default {
 
 <script>
 export default {
-  name: 'GeoPositiveKPIDemo',
+  name: 'GeoPositiveValueDemo',
   data () {
     return {
       value: "365",
@@ -60,7 +60,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-positive-KPI
+      <geo-positive-value
         :value="value"
         :is-primary="isPrimary"
         :description="description"
@@ -71,7 +71,7 @@ export default {
 
 <script>
 export default {
-  name: 'GeoPositiveKPIDemo',
+  name: 'GeoPositiveValueDemo',
   data () {
     return {
       value: "27th of 35",
@@ -89,7 +89,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-positive-KPI
+      <geo-positive-value
         :value="value"
         :is-primary="isPrimary"
         :description="description"
@@ -103,14 +103,14 @@ export default {
             Tooltip text
           </geo-tooltip>
         </template>
-      </geo-positive-KPI>
+      </geo-positive-value>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'GeoPositiveKPIDemo',
+  name: 'GeoPositiveValueDemo',
   data () {
     return {
       descriptionTooltipIcon: null,
@@ -133,7 +133,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-positive-KPI
+      <geo-positive-value
         :value="value"
         :is-primary="isPrimary"
         :description="description"
@@ -148,14 +148,14 @@ export default {
             Warning tooltip text
           </geo-tooltip>
         </template>
-      </geo-positive-KPI>
+      </geo-positive-value>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'GeoPositiveKPIDemo',
+  name: 'GeoPositiveValueDemo',
   data () {
     return {
       warningTooltipIcon: null,
@@ -185,7 +185,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-positive-KPI
+      <geo-positive-value
         :value="value"
         :is-primary="isPrimary"
       />
@@ -195,7 +195,7 @@ export default {
 
 <script>
 export default {
-  name: 'GeoPositiveKPIDemo',
+  name: 'GeoPositiveValueDemo',
   data () {
     return {
       value: "27th of 73",
@@ -212,7 +212,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-positive-KPI
+      <geo-positive-value
         :value="value"
         :is-primary="isPrimary"
         :unit="unit"
@@ -223,7 +223,7 @@ export default {
 
 <script>
 export default {
-  name: 'GeoPositiveKPIDemo',
+  name: 'GeoPositiveValueDemo',
   data () {
     return {
       value: "587",
@@ -242,7 +242,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-positive-KPI
+      <geo-positive-value
         :value="value"
         :is-primary="isPrimary"
         :description="description"
@@ -256,14 +256,14 @@ export default {
             Tooltip text
           </geo-tooltip>
         </template>
-      </geo-positive-KPI>
+      </geo-positive-value>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'GeoPositiveKPIDemo',
+  name: 'GeoPositiveValueDemo',
   data () {
     return {
       descriptionTooltipIcon: null,
@@ -285,7 +285,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-positive-KPI
+      <geo-positive-value
         :value="value"
         :is-primary="isPrimary"
         :description="description"
@@ -300,14 +300,14 @@ export default {
             Warning tooltip text
           </geo-tooltip>
         </template>
-      </geo-positive-KPI>
+      </geo-positive-value>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'GeoPositiveKPIDemo',
+  name: 'GeoPositiveValueDemo',
   data () {
     return {
       warningTooltipIcon: null,
diff --git a/src/elements/GeoValue/GeoPositiveValue.vue b/src/elements/GeoValue/GeoPositiveValue.vue
new file mode 100644
index 000000000..aa2aef7b9
--- /dev/null
+++ b/src/elements/GeoValue/GeoPositiveValue.vue
@@ -0,0 +1,23 @@
+<template src="./GeoValue.template.html" />
+
+<script>
+import mixin, { TYPES } from './GeoValue.mixin'
+
+/**
+ * [GeoValue](./GeoValue) using predefined `positive` type.
+ *
+ * See [GeoValue](./GeoValue) for a complete list of supported properties and
+ * features.
+*/
+export default {
+  name: 'GeoPositiveValue',
+  status: 'ready',
+  release: '29.6.0',
+  mixins: [mixin],
+  computed: {
+    type () {
+      return TYPES.positive
+    }
+  }
+}
+</script>
diff --git a/src/elements/GeoKPI/GeoKPI.examples.md b/src/elements/GeoValue/GeoValue.examples.md
similarity index 92%
rename from src/elements/GeoKPI/GeoKPI.examples.md
rename to src/elements/GeoValue/GeoValue.examples.md
index 2156b1332..1f442f7f3 100644
--- a/src/elements/GeoKPI/GeoKPI.examples.md
+++ b/src/elements/GeoValue/GeoValue.examples.md
@@ -4,7 +4,7 @@
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-KPI
+      <geo-value
         :value="value"
         :is-primary="isPrimary"
       />
@@ -14,7 +14,7 @@
 
 <script>
 export default {
-  name: 'GeoKPIDemo',
+  name: 'GeoValueDemo',
   data () {
     return {
       value: "27th of 73",
@@ -31,7 +31,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-KPI
+      <geo-value
         :value="value"
         :is-primary="isPrimary"
         :unit="unit"
@@ -42,7 +42,7 @@ export default {
 
 <script>
 export default {
-  name: 'GeoKPIDemo',
+  name: 'GeoValueDemo',
   data () {
     return {
       value: "365",
@@ -60,7 +60,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-KPI
+      <geo-value
         :value="value"
         :is-primary="isPrimary"
         :description="description"
@@ -71,7 +71,7 @@ export default {
 
 <script>
 export default {
-  name: 'GeoKPIDemo',
+  name: 'GeoValueDemo',
   data () {
     return {
       value: "27th of 35",
@@ -89,7 +89,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-KPI
+      <geo-value
         :value="value"
         :is-primary="isPrimary"
         :type="type"
@@ -100,7 +100,7 @@ export default {
 
 <script>
 export default {
-  name: 'GeoKPIDemo',
+  name: 'GeoValueDemo',
   data () {
     return {
       value: "27th of 35",
@@ -118,7 +118,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-KPI
+      <geo-value
         :value="value"
         :is-primary="isPrimary"
         :description="description"
@@ -132,14 +132,14 @@ export default {
             Tooltip text
           </geo-tooltip>
         </template>
-      </geo-KPI>
+      </geo-value>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'GeoKPIDemo',
+  name: 'GeoValueDemo',
   data () {
     return {
       descriptionTooltipIcon: null,
@@ -162,7 +162,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-KPI
+      <geo-value
         :value="value"
         :is-primary="isPrimary"
         :description="description"
@@ -177,14 +177,14 @@ export default {
             Warning tooltip text
           </geo-tooltip>
         </template>
-      </geo-KPI>
+      </geo-value>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'GeoKPIDemo',
+  name: 'GeoValueDemo',
   data () {
     return {
       warningTooltipIcon: null,
@@ -214,7 +214,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-KPI
+      <geo-value
         :value="value"
         :is-primary="isPrimary"
       />
@@ -224,7 +224,7 @@ export default {
 
 <script>
 export default {
-  name: 'GeoKPIDemo',
+  name: 'GeoValueDemo',
   data () {
     return {
       value: "27th of 73",
@@ -241,7 +241,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-KPI
+      <geo-value
         :value="value"
         :is-primary="isPrimary"
         :unit="unit"
@@ -253,7 +253,7 @@ export default {
 
 <script>
 export default {
-  name: 'GeoKPIDemo',
+  name: 'GeoValueDemo',
   data () {
     return {
       value: "587",
@@ -272,7 +272,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-KPI
+      <geo-value
         :value="value"
         :is-primary="isPrimary"
         :unit="unit"
@@ -285,7 +285,7 @@ export default {
 
 <script>
 export default {
-  name: 'GeoKPIDemo',
+  name: 'GeoValueDemo',
   data () {
     return {
       value: "27th of 73",
@@ -305,7 +305,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-KPI
+      <geo-value
         :value="value"
         :is-primary="isPrimary"
         :description="description"
@@ -319,14 +319,14 @@ export default {
             Tooltip text
           </geo-tooltip>
         </template>
-      </geo-KPI>
+      </geo-value>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'GeoKPIDemo',
+  name: 'GeoValueDemo',
   data () {
     return {
       descriptionTooltipIcon: null,
@@ -348,7 +348,7 @@ export default {
 <template>
   <div class="element-demo">
     <div class="element-demo__block">
-      <geo-KPI
+      <geo-value
         :value="value"
         :is-primary="isPrimary"
         :description="description"
@@ -363,14 +363,14 @@ export default {
             Warning tooltip text
           </geo-tooltip>
         </template>
-      </geo-KPI>
+      </geo-value>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'GeoKPIDemo',
+  name: 'GeoValueDemo',
   data () {
     return {
       warningTooltipIcon: null,
diff --git a/src/elements/GeoKPI/GeoKPI.mixin.js b/src/elements/GeoValue/GeoValue.mixin.js
similarity index 83%
rename from src/elements/GeoKPI/GeoKPI.mixin.js
rename to src/elements/GeoValue/GeoValue.mixin.js
index 5796044fc..2592c3f97 100644
--- a/src/elements/GeoKPI/GeoKPI.mixin.js
+++ b/src/elements/GeoValue/GeoValue.mixin.js
@@ -12,28 +12,28 @@ export { TYPES }
 export default {
   props: {
     /**
-     * Determines if KPI is primary or not
+     * Determines if the value is primary or not
      */
     isPrimary: {
       type: Boolean,
       required: true
     },
     /**
-     * KPI value
+     * Value
     */
     value: {
       type: String,
       required: true
     },
     /**
-     * KPI unit
+     * Unit
     */
     unit: {
       type: String,
       required: false
     },
     /**
-     * KPI description
+     * Description
     */
     description: {
       type: String,
diff --git a/src/elements/GeoKPI/GeoKPI.template.html b/src/elements/GeoValue/GeoValue.template.html
similarity index 88%
rename from src/elements/GeoKPI/GeoKPI.template.html
rename to src/elements/GeoValue/GeoValue.template.html
index 206caccc3..0301b5c0d 100644
--- a/src/elements/GeoKPI/GeoKPI.template.html
+++ b/src/elements/GeoValue/GeoValue.template.html
@@ -1,4 +1,4 @@
-<geo-KPI
+<geo-value
   v-bind="$props"
   :type="type"
 >
@@ -10,4 +10,4 @@
     slot="descriptionTooltip"
     name="descriptionTooltip"
   />
-</geo-KPI>
\ No newline at end of file
+</geo-value>
\ No newline at end of file
diff --git a/src/elements/GeoValue/GeoValue.vue b/src/elements/GeoValue/GeoValue.vue
new file mode 100644
index 000000000..a4c3523cb
--- /dev/null
+++ b/src/elements/GeoValue/GeoValue.vue
@@ -0,0 +1,81 @@
+<template>
+  <div
+    :class="valueCssClasses"
+  >
+    <div class="geo-value__column">
+      <slot name="warningTooltip" />
+    </div>
+    <div class="geo-value__column">
+      <div class="geo-value__row">
+        <span
+          class="geo-value__value"
+        >
+          {{ value }}
+        </span>
+        <span
+          v-if="unit"
+          class="geo-value__unit"
+        >
+          {{ unit }}
+        </span>
+      </div>
+      <div class="geo-value__row">
+        <span
+          v-if="description"
+          class="geo-value__description"
+        >
+          {{ description }}
+        </span>
+        <slot name="descriptionTooltip" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixin, { TYPES } from './GeoValue.mixin'
+import { enumPropertyFactory } from '../../utils/enumPropertyFactory'
+
+/**
+ * `GeoValue` is a component for displaying data, specially designed to display Key Performance Indicators
+ */
+
+export default {
+  name: 'GeoValue',
+  status: 'ready',
+  release: '29.6.0',
+  constants: {
+    TYPES
+  },
+  mixins: [mixin],
+  props: {
+    /**
+     * Predefined type scheme of the GeoValue component
+     *
+     * > **Note:** There are specific components to avoid explicitly writing this value.
+     *
+     * | type         |            Specific component           | Proposed usage (example) |
+     * |--------------|-----------------------------------------|--------------------------|
+     * | `standard`   | [GeoValue](./GeoValue)                  | Standard                 |
+     * | `positive`   | [GeoPositiveValue](./GeoPositiveValue)  | Positive value           |
+     * | `neutral`    | [GeoNeutralValue](./GeoNeutralValue)    | Neutral value            |
+     * | `negative`   | [GeoNegativeValue](./GeoNegativeValue)  | Negative value           |
+     *
+     * Supported `type` values are exported under `TYPES` named export. See
+     * [Component Constants](/docs/guides/using-constants) for more info on how to
+     * use those constants in your code.
+     */
+    type: enumPropertyFactory({
+      componentName: 'GeoValue',
+      propertyName: 'type',
+      enumDictionary: TYPES,
+      defaultValue: TYPES.standard
+    })
+  },
+  computed: {
+    valueCssClasses () {
+      return `geo-value geo-value--${this.type} geo-value--${this.isPrimary ? 'is-primary' : 'is-secondary'}`
+    }
+  }
+}
+</script>
diff --git a/src/elements/GeoVerticalLayout/GeoVerticalLayout.examples.md b/src/elements/GeoVerticalLayout/GeoVerticalLayout.examples.md
index 1853acf56..85f41771b 100644
--- a/src/elements/GeoVerticalLayout/GeoVerticalLayout.examples.md
+++ b/src/elements/GeoVerticalLayout/GeoVerticalLayout.examples.md
@@ -3,10 +3,10 @@
   <div class="element-demo">
     <div class="element-demo__block">
       <geo-vertical-layout>
-        <geo-KPI
+        <geo-value
           :data="datumData"
         />
-        <geo-KPI
+        <geo-value
           :data="datumData2"
         />
       </geo-vertical-layout>
@@ -19,7 +19,7 @@ export default {
   name: 'GeoVerticalLayoutDemo',
   data () {
     return {
-      kpiData: {
+      valueData: {
         value: "27th of 73",
         isPrimary: true,
         unit: "",
@@ -27,7 +27,7 @@ export default {
         descriptionTooltip:"Es mayor que la media de tiendas",
         colorHighlight:"green"
       },
-      kpiData2: {
+      valueData2: {
         value: "27th of 73",
         isPrimary: false,
         unit: "",
diff --git a/src/styles/elements/GeoKPI/_geo-kpi.scss b/src/styles/elements/GeoValue/_geo-value.scss
similarity index 50%
rename from src/styles/elements/GeoKPI/_geo-kpi.scss
rename to src/styles/elements/GeoValue/_geo-value.scss
index c67a19812..ec7faa926 100644
--- a/src/styles/elements/GeoKPI/_geo-kpi.scss
+++ b/src/styles/elements/GeoValue/_geo-value.scss
@@ -1,54 +1,54 @@
 
-.geo-kpi {
+.geo-value {
   border-radius: $border-radius-default;
 }
 
-.geo-kpi__column {
+.geo-value__column {
   float: left;
 }
 
-.geo-kpi--is-primary {
-  .geo-kpi__value, .geo-kpi__unit {
+.geo-value--is-primary {
+  .geo-value__value, .geo-value__unit {
     @include font($display-medium);
     display: inline-block;
   }
-  .geo-kpi__description {
+  .geo-value__description {
     @include font($body-small);
     margin-top: 3px;
   }
-  &.geo-kpi--negative {
-    .geo-kpi__value, .geo-kpi__unit {
+  &.geo-value--negative {
+    .geo-value__value, .geo-value__unit {
       color: $color-red;
     }
   }
-  &.geo-kpi--neutral {
-    .geo-kpi__value, .geo-kpi__unit {
+  &.geo-value--neutral {
+    .geo-value__value, .geo-value__unit {
       color: $color-yellow;
     }
   }
-  &.geo-kpi--positive {
-    .geo-kpi__value, .geo-kpi__unit {
+  &.geo-value--positive {
+    .geo-value__value, .geo-value__unit {
       color: $color-green;
     }
   }
 }
 
-.geo-kpi--is-secondary {
+.geo-value--is-secondary {
   padding: 1px;
-  .geo-kpi__row {
+  .geo-value__row {
     display: inline-block;
   }
-  .geo-kpi__value, .geo-kpi__unit, .geo-kpi__description {
+  .geo-value__value, .geo-value__unit, .geo-value__description {
     @include font($body-small);
     display: inline-block;
   }
-  &.geo-kpi--negative {
+  &.geo-value--negative {
     background-color: $color-red;
   }
-  &.geo-kpi--neutral {
+  &.geo-value--neutral {
     background-color: $color-yellow;
   }
-  &.geo-kpi--positive {
+  &.geo-value--positive {
     background-color: $color-green;
   }
 }
\ No newline at end of file
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 4e0d1540c..905ecea8c 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -87,5 +87,5 @@
 @import "../styles/elements/GeoHorizontalLayout/geo-horizontal-layout";
 @import "../styles/elements/GeoVerticalLayout/geo-vertical-layout";
 @import "../styles/elements/GeoSidebarLayout/geo-sidebar-layout";
-@import "../styles/elements/GeoKPI/geo-kpi";
+@import "../styles/elements/GeoValue/geo-value";
 @import "../styles/elements/GeoWizardLayout/geo-wizard-layout";
\ No newline at end of file
diff --git a/test/unit/specs/elements/GeoKPI/GeoKPI.spec.js b/test/unit/specs/elements/GeoKPI/GeoKPI.spec.js
deleted file mode 100644
index 7e46ccb65..000000000
--- a/test/unit/specs/elements/GeoKPI/GeoKPI.spec.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import { createLocalVue, mount } from '@vue/test-utils'
-import GeoKPI from '@/elements/GeoKPI/GeoKPI.vue'
-import GeoPositiveKPI from '@/elements/GeoKPI/GeoPositiveKPI.vue'
-import GeoNeutralKPI from '@/elements/GeoKPI/GeoNeutralKPI.vue'
-import GeoNegativeKPI from '@/elements/GeoKPI/GeoNegativeKPI.vue'
-
-// create an extended `Vue` constructor
-const localVue = createLocalVue()
-localVue.component('geo-KPI', GeoKPI)
-localVue.component('geo-positive-KPI', GeoPositiveKPI)
-localVue.component('geo-neutral-KPI', GeoNeutralKPI)
-localVue.component('geo-negative-KPI', GeoNegativeKPI)
-
-describe('GeoKPI', () => {
-  it('Should display GeoKPI primary value', () => {
-    const props = {
-      value: 'Mocked KPI value',
-      isPrimary: true
-    }
-    const wrapper = mount(GeoKPI, {
-      propsData: props
-    })
-    expect(wrapper.find('.geo-kpi--is-primary').exists()).toBe(true)
-    expect(wrapper.find('.geo-kpi--is-primary .geo-kpi__value').text()).toBe(props.value)
-  })
-
-  it('Should display GeoKPI secondary value', () => {
-    const props = {
-      value: 'Mocked KPI value',
-      isPrimary: false
-    }
-    const wrapper = mount(GeoKPI, {
-      propsData: props
-    })
-    expect(wrapper.find('.geo-kpi--is-secondary').exists()).toBe(true)
-    expect(wrapper.find('.geo-kpi--is-secondary .geo-kpi__value').text()).toBe(props.value)
-  })
-
-  it('Should display GeoKPI unit', () => {
-    const props = {
-      value: 'Mocked KPI value',
-      isPrimary: false,
-      unit: '€'
-    }
-    const wrapper = mount(GeoKPI, {
-      propsData: props
-    })
-    expect(wrapper.find('.geo-kpi__unit').exists()).toBe(true)
-    expect(wrapper.find('.geo-kpi__unit').text()).toBe(props.unit)
-  })
-
-  it('Should display GeoKPI description', () => {
-    const props = {
-      value: 'Mocked KPI value',
-      isPrimary: false,
-      description: 'Mocked KPI description'
-    }
-    const wrapper = mount(GeoKPI, {
-      propsData: props
-    })
-    expect(wrapper.find('.geo-kpi__description').exists()).toBe(true)
-    expect(wrapper.find('.geo-kpi__description').text()).toBe(props.description)
-  })
-
-  it('Should add appropiate type css class', () => {
-    const props = {
-      value: 'Mocked KPI value',
-      isPrimary: true,
-      type: 'negative'
-    }
-    const wrapper = mount(GeoKPI, {
-      propsData: props
-    })
-    expect(wrapper.find('.geo-kpi--negative').exists()).toBe(true)
-  })
-
-  it('Should create a negative kpi', () => {
-    const props = {
-      value: 'Mocked KPI value',
-      isPrimary: true
-    }
-    const wrapper = mount(GeoNegativeKPI, {
-      localVue,
-      propsData: props
-    })
-    expect(wrapper.find('.geo-kpi--negative').exists()).toBe(true)
-  })
-
-  it('Should create a neutral kpi', () => {
-    const props = {
-      value: 'Mocked KPI value',
-      isPrimary: true
-    }
-    const wrapper = mount(GeoNeutralKPI, {
-      localVue,
-      propsData: props
-    })
-    expect(wrapper.find('.geo-kpi--neutral').exists()).toBe(true)
-  })
-
-  it('Should create a positive kpi', () => {
-    const props = {
-      value: 'Mocked KPI value',
-      isPrimary: true
-    }
-    const wrapper = mount(GeoPositiveKPI, {
-      localVue,
-      propsData: props
-    })
-    expect(wrapper.find('.geo-kpi--positive').exists()).toBe(true)
-  })
-})
diff --git a/test/unit/specs/elements/GeoValue/GeoValue.spec.js b/test/unit/specs/elements/GeoValue/GeoValue.spec.js
new file mode 100644
index 000000000..9241a8c30
--- /dev/null
+++ b/test/unit/specs/elements/GeoValue/GeoValue.spec.js
@@ -0,0 +1,112 @@
+import { createLocalVue, mount } from '@vue/test-utils'
+import GeoValue from '@/elements/GeoValue/GeoValue.vue'
+import GeoPositiveValue from '@/elements/GeoValue/GeoPositiveValue.vue'
+import GeoNeutralValue from '@/elements/GeoValue/GeoNeutralValue.vue'
+import GeoNegativeValue from '@/elements/GeoValue/GeoNegativeValue.vue'
+
+// create an extended `Vue` constructor
+const localVue = createLocalVue()
+localVue.component('geo-value', GeoValue)
+localVue.component('geo-positive-value', GeoPositiveValue)
+localVue.component('geo-neutral-value', GeoNeutralValue)
+localVue.component('geo-negative-value', GeoNegativeValue)
+
+describe('GeoValue', () => {
+  it('Should display GeoValue primary value', () => {
+    const props = {
+      value: 'Mocked value',
+      isPrimary: true
+    }
+    const wrapper = mount(GeoValue, {
+      propsData: props
+    })
+    expect(wrapper.find('.geo-value--is-primary').exists()).toBe(true)
+    expect(wrapper.find('.geo-value--is-primary .geo-value__value').text()).toBe(props.value)
+  })
+
+  it('Should display GeoValue secondary value', () => {
+    const props = {
+      value: 'Mocked value',
+      isPrimary: false
+    }
+    const wrapper = mount(GeoValue, {
+      propsData: props
+    })
+    expect(wrapper.find('.geo-value--is-secondary').exists()).toBe(true)
+    expect(wrapper.find('.geo-value--is-secondary .geo-value__value').text()).toBe(props.value)
+  })
+
+  it('Should display GeoValue unit', () => {
+    const props = {
+      value: 'Mocked value',
+      isPrimary: false,
+      unit: '€'
+    }
+    const wrapper = mount(GeoValue, {
+      propsData: props
+    })
+    expect(wrapper.find('.geo-value__unit').exists()).toBe(true)
+    expect(wrapper.find('.geo-value__unit').text()).toBe(props.unit)
+  })
+
+  it('Should display GeoValue description', () => {
+    const props = {
+      value: 'Mocked value',
+      isPrimary: false,
+      description: 'Mocked description'
+    }
+    const wrapper = mount(GeoValue, {
+      propsData: props
+    })
+    expect(wrapper.find('.geo-value__description').exists()).toBe(true)
+    expect(wrapper.find('.geo-value__description').text()).toBe(props.description)
+  })
+
+  it('Should add appropiate type css class', () => {
+    const props = {
+      value: 'Mocked value',
+      isPrimary: true,
+      type: 'negative'
+    }
+    const wrapper = mount(GeoValue, {
+      propsData: props
+    })
+    expect(wrapper.find('.geo-value--negative').exists()).toBe(true)
+  })
+
+  it('Should create a negative', () => {
+    const props = {
+      value: 'Mocked value',
+      isPrimary: true
+    }
+    const wrapper = mount(GeoNegativeValue, {
+      localVue,
+      propsData: props
+    })
+    expect(wrapper.find('.geo-value--negative').exists()).toBe(true)
+  })
+
+  it('Should create a neutral', () => {
+    const props = {
+      value: 'Mocked value',
+      isPrimary: true
+    }
+    const wrapper = mount(GeoNeutralValue, {
+      localVue,
+      propsData: props
+    })
+    expect(wrapper.find('.geo-value--neutral').exists()).toBe(true)
+  })
+
+  it('Should create a positive', () => {
+    const props = {
+      value: 'Mocked value',
+      isPrimary: true
+    }
+    const wrapper = mount(GeoPositiveValue, {
+      localVue,
+      propsData: props
+    })
+    expect(wrapper.find('.geo-value--positive').exists()).toBe(true)
+  })
+})