toggle-components-library 1.38.1 → 1.39.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.38.1",
+    "version": "1.39.0-beta.1",
     "private": false,
     "scripts": {
         "serve": "vue-cli-service serve",

package/src/components/badges/ToggleLogoBadge.vue

@@ -0,0 +1,53 @@
+<template>
+    <div id="badge-container" :class="'toggle-logo-badge-' + size">
+        <img
+          :src="logo.src"
+          :alt="logo.alt"
+          class="toggle-logo-badge-logo"
+        >
+    </div>
+
+</template>
+    
+    <script>
+
+    export default {
+      name: 'ToggleLogoBadge',
+      props: {
+        logo: {
+          type: Object,
+          required: true,
+        },
+        colour: {
+          type: String,
+          required: true
+        },
+        size: {
+          type: String,
+          required: true,
+          validator: function(value) {
+            return ["small", "medium", "large"].indexOf(value) !== -1;
+          }
+        }
+      },
+    };
+    </script>
+    
+    <style scoped>
+      #badge-container {
+        background-color: v-bind('colour');
+      }
+
+      #small {
+
+      }
+
+      #medium {
+        
+      }
+
+      #large {
+        
+      }
+    
+    </style>

package/src/index.js

@@ -44,6 +44,7 @@ import ToggleTableColumn from './components/tables/ToggleTableColumn.vue';
 import ToggleBadge from './components/badges/ToggleBadge.vue';
 import ToggleCalculateBadge from './components/badges/ToggleCalculateBadge.vue';
 import TogglePodiumBadge from './components/badges/TogglePodiumBadge.vue';
+import ToggleLogoBadge from './components/badges/ToggleLogoBadge.vue';
 
 import ToggleBreadCrumb from './components/breadcrumb/ToggleBreadCrumb.vue';
 import ToggleSideNavItem from './components/navs/sidenav/ToggleSideNavItem.vue';
@@ -104,6 +105,7 @@ const Components = {
     ToggleBadge,
     ToggleCalculateBadge,
     TogglePodiumBadge,
+    ToggleLogoBadge,
     ToggleTableColumn,
     ToggleInputText,
     ToggleInputEditableText,

package/src/sass/includes/_as_badges.scss

@@ -228,4 +228,70 @@
         width: 22px;
         margin-right: 15px;
     }
+}
+
+.toggle-logo-badge-small {
+    border: 0;
+    font-family: $toggle-font-family;
+    width: 4rem;
+    font-weight: bold;
+    display: grid;
+    padding: 0.3rem;
+    border-radius: 0.6rem;
+    align-items: center;
+    justify-content: center;
+}
+
+.toggle-logo-badge-medium {
+    border: 0;
+    font-family: $toggle-font-family;
+    width: 6rem;
+    font-weight: bold;
+    display: grid;
+    padding: 0.3rem;
+    border-radius: 0.6rem;
+    align-items: center;
+    justify-content: center;
+}
+
+.toggle-logo-badge-large {
+    border: 0;
+    font-family: $toggle-font-family;
+    width: 8rem;
+    font-weight: bold;
+    display: grid;
+    padding: 0.3rem;
+    border-radius: 0.6rem;
+    align-items: center;
+    justify-content: center;
+}
+
+.toggle-logo-badge-small > img {
+    object-fit: contain;
+    width: stretch;
+    max-width: 100%;
+    box-sizing: border-box;
+    height: 1.1rem;
+    padding: 3px 6px;
+    display: block;
+}
+
+.toggle-logo-badge-medium > img {
+    object-fit: contain;
+    width: stretch;
+    max-width: 100%;
+    box-sizing: border-box;
+    height: 1.1rem;
+    padding: 3px 6px;
+    display: block;
+}
+
+.toggle-logo-badge-large > img {
+    object-fit: contain;
+    width: stretch;
+    max-width: 100%;
+    box-sizing: border-box;
+    height: 1.1rem;
+    padding: 3px 6px;
+    display: block;
 }