@namelivia/vue-components 4.3.1 → 4.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@namelivia/vue-components",
-  "version": "4.3.1",
+  "version": "4.4.0",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "scripts": {

package/src/Temperature/Temperature.cy.js

@@ -0,0 +1,22 @@
+import Temperature from './Temperature.vue'
+
+describe('<Temperature />', () => {
+
+  it('should properly render', () => {
+      cy.mount(Temperature, {
+        props: {
+          title: "Current temperature",
+          min: 19.10,
+          avg: 26.02,
+          max: 33.21
+        }
+      })
+      cy.contains('Current temperature').should('be.visible');
+
+      cy.contains('19.10 ℃').should('be.visible');
+      cy.contains('26.02 ℃').should('be.visible');
+      cy.contains('33.21 ℃').should('be.visible');
+
+  })
+
+})

package/src/Temperature/Temperature.stories.js

@@ -0,0 +1,15 @@
+import Temperature from './Temperature.vue';
+
+export default {
+  title: 'Temperature',
+  component: Temperature,
+  tags: ['autodocs'],
+}
+export const Default = {
+  args: {
+    title: "Current temperature",
+    min: 19.10,
+    avg: 26.02,
+    max: 33.21
+  },
+};

package/src/Temperature/Temperature.vue

@@ -0,0 +1,59 @@
+<template lang="pug">
+.wrapper
+  .title
+    | {{title}}
+  .avg
+    | {{avgFormatted}} ℃
+  .minmax
+    .min
+      | {{minFormatted}} ℃
+    .separator
+      | —
+    .max
+      | {{maxFormatted}} ℃
+</template>
+<script lang="js">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: "Temperature",
+  props: {
+    title: String,
+    min: Number,
+    max: Number,
+    avg: Number
+  },
+  computed: {
+    minFormatted() {
+      return this.min.toFixed(2);
+    },
+    avgFormatted() {
+      return this.avg.toFixed(2);
+    },
+    maxFormatted() {
+      return this.max.toFixed(2);
+    },
+  },
+})
+</script>
+<style scoped>
+.wrapper {
+    flex-direction: column;
+    display: inline-flex;
+}
+.avg {
+    display: flex;
+    font-size: var(--font-size-xlarge);
+    justify-content: center;
+}
+.title {
+    display: flex;
+    font-size: var(--font-size-base);
+    justify-content: center;
+}
+.minmax {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    font-size: var(--font-size-base);
+}
+</style>

package/src/index.js

@@ -7,6 +7,7 @@ export { default as Navbar } from './Navbar/Navbar.vue'
 export { default as StyledTable } from './StyledTable/StyledTable.vue'
 export { default as Pagination } from './Pagination/Pagination.vue'
 export { default as Badge } from './Badge/Badge.vue'
+export { default as Temperature } from './Temperature/Temperature.vue'
 export { default as Modal } from './Modal/Modal.vue'
 export { default as Spinner } from './Spinner/Spinner.vue'
 export { default as RangeView } from './RangeView/RangeView.vue'

package/styles/index.css

@@ -102,7 +102,7 @@
   --border-radius-round: 50%;
   /* CONTAINER */
   --container-max-width: 1200px;
-  --container-marging: 0 auto;
+  --container-margin: 0 auto;
   /* NAVBAR */
   --color-navbar-background: hsl(210, 7%, 21%);
   --color-navbar-text: hsl(0, 0%, 100%);