Merge pull request #37 from geoblink/feature/CORE-8070-create-KPI-com…

…ponent

Feature/core 8070 create kpi component

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 29.6.0
+
+New:
+
+- `GeoValue` component
+
 ## 29.5.5
 
 Fix:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoblink/design-system",
-  "version": "29.5.5",
+  "version": "29.6.0",
   "description": "Geoblink Design System for Vue.js",
   "author": "Geoblink <[email protected]>",
   "main": "dist/system.js",

src/elements/GeoButton/GeoButton.template.html

@@ -1,6 +1,7 @@
 <geo-button
   v-bind="$props"
   :type="type"
+  :isPrimary="isPrimary"
   @click="$emit('click', $event)"
 >
   <slot />

src/elements/GeoValue/GeoNegativeValue.examples.md

@@ -0,0 +1,331 @@
+## Simple primary value
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-negative-value
+        :value="value"
+        :is-primary="isPrimary"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoNegativeValueDemo',
+  data () {
+    return {
+      value: "27th of 73",
+      isPrimary: true
+    }
+  }
+}
+</script>
+```
+
+## Primary value with unit
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-negative-value
+        :value="value"
+        :is-primary="isPrimary"
+        :unit="unit"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoNegativeValueDemo',
+  data () {
+    return {
+      value: "365",
+      isPrimary: true,
+      unit: "€"
+    }
+  }
+}
+</script>
+```
+
+## Primary value with description
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-negative-value
+        :value="value"
+        :is-primary="isPrimary"
+        :description="description"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoNegativeValueDemo',
+  data () {
+    return {
+      value: "27th of 35",
+      isPrimary: true,
+      description: "compared to the rest of the stores"
+    }
+  }
+}
+</script>
+```
+
+## Primary value with description tooltip
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-negative-value
+        :value="value"
+        :is-primary="isPrimary"
+        :description="description"
+      >
+        <template v-slot:descriptionTooltip>
+          <font-awesome-icon
+            data-tooltip-id="descriptionTooltipIcon"
+            :icon="['fas', 'info-circle']"
+          />
+          <geo-tooltip :forced-trigger-target="descriptionTooltipIcon">
+            Tooltip text
+          </geo-tooltip>
+        </template>
+      </geo-negative-value>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoNegativeValueDemo',
+  data () {
+    return {
+      descriptionTooltipIcon: null,
+      value: "27th of 35",
+      isPrimary: true,
+      description: "compared to the rest of the stores",
+      descriptionTooltip: "Tooltip text"
+    }
+  },
+  mounted () {
+    this.descriptionTooltipIcon = document.querySelector('[data-tooltip-id="descriptionTooltipIcon"]')
+  }
+}
+</script>
+```
+
+## Primary value with warning tooltip
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-negative-value
+        :value="value"
+        :is-primary="isPrimary"
+        :description="description"
+      >
+        <template v-slot:warningTooltip>
+          <font-awesome-icon
+            data-tooltip-id="warningTooltipIcon"
+            class="warning-icon"
+            :icon="['fas', 'exclamation-triangle']"
+          />
+          <geo-tooltip :forced-trigger-target="warningTooltipIcon">
+            Warning tooltip text
+          </geo-tooltip>
+        </template>
+      </geo-negative-value>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoNegativeValueDemo',
+  data () {
+    return {
+      warningTooltipIcon: null,
+      value: "27th of 35",
+      isPrimary: true,
+      description: "compared to the rest of the stores",
+      warningTooltip: "Tooltip text"
+    }
+  },
+  mounted () {
+    this.warningTooltipIcon = document.querySelector('[data-tooltip-id="warningTooltipIcon"]')
+  }
+}
+</script>
+
+<style>
+.warning-icon{
+  margin-top: 8px;
+  margin-right: 5px;
+}
+</style>
+```
+
+## Simple secondary value
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-negative-value
+        :value="value"
+        :is-primary="isPrimary"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoNegativeValueDemo',
+  data () {
+    return {
+      value: "27th of 73",
+      isPrimary: false
+    }
+  }
+}
+</script>
+```
+
+## Secondary value with unit and description
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-negative-value
+        :value="value"
+        :is-primary="isPrimary"
+        :unit="unit"
+        :description="description"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoNegativeValueDemo',
+  data () {
+    return {
+      value: "587",
+      isPrimary: false,
+      unit: "€",
+      description:"Facturados por la tienda"
+    }
+  }
+}
+</script>
+```
+
+## Secondary value with description tooltip
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-negative-value
+        :value="value"
+        :is-primary="isPrimary"
+        :description="description"
+      >
+        <template v-slot:descriptionTooltip>
+          <font-awesome-icon
+            data-tooltip-id="descriptionTooltipIcon2"
+            :icon="['fas', 'info-circle']"
+          />
+          <geo-tooltip :forced-trigger-target="descriptionTooltipIcon">
+            Tooltip text
+          </geo-tooltip>
+        </template>
+      </geo-negative-value>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoNegativeValueDemo',
+  data () {
+    return {
+      descriptionTooltipIcon: null,
+      value: "27th of 35",
+      isPrimary: false,
+      description: "compared to the rest of the stores"
+    }
+  },
+  mounted () {
+    this.descriptionTooltipIcon = document.querySelector('[data-tooltip-id="descriptionTooltipIcon2"]')
+  }
+}
+</script>
+```
+
+## Secondary value with warning tooltip
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-negative-value
+        :value="value"
+        :is-primary="isPrimary"
+        :description="description"
+      >
+        <template v-slot:warningTooltip>
+          <font-awesome-icon
+            class="warning-icon"
+            data-tooltip-id="warningTooltipIcon2"
+            :icon="['fas', 'exclamation-triangle']"
+          />
+          <geo-tooltip :forced-trigger-target="warningTooltipIcon">
+            Warning tooltip text
+          </geo-tooltip>
+        </template>
+      </geo-negative-value>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoNegativeValueDemo',
+  data () {
+    return {
+      warningTooltipIcon: null,
+      value: "27th of 35",
+      isPrimary: false,
+      description: "compared to the rest of the stores"
+    }
+  },
+  mounted () {
+    this.warningTooltipIcon = document.querySelector('[data-tooltip-id="warningTooltipIcon2"]')
+  }
+}
+</script>
+
+<style>
+.warning-icon{
+  margin-right: 5px;
+}
+</style>
+```

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>