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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.39.0-beta.0",
+    "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;
 }

package/src/sass/includes/_as_table.scss

@@ -94,12 +94,9 @@ table.toggle-table {
 
     td.toggle-tablee-td {
         @include toggle-global-font-config;
- 
         font-size: $toggle-font-size-small;
         padding: 1rem 0;
         padding-left:1rem;
-
-        cursor: pointer;
         vertical-align: middle;
         text-overflow: ellipsis;
         overflow: hidden;
@@ -114,12 +111,16 @@ table.toggle-table {
     }
 
     tr.toggle-tablee-tr {
+        cursor: pointer;
         &:not(.tr-no-hover):hover {
             background-color: #FFF;
             .arrow-order {
             display: block;
             }
         }
+        &.tr-no-hover:hover, &.tr-no-hover:hover * {
+            cursor: default !important;
+        }
         td.toggle-tablee-td:first-child {
             border-top-left-radius: 10px;
             border-bottom-left-radius: 10px;