toggle-components-library 1.39.0-beta.2 → 1.39.0

package/package.json

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

package/src/components/forms/ToggleInputMultiSelect.vue

@@ -7,6 +7,7 @@
 
     <div class="input-holder">
       <multiselect v-model="inputVal" :options="options" :multiple="multiple" :close-on-select="true" :clear-on-select="false" :preserve-search="true" :placeholder="placeholder" label="label" track-by="value" :preselect-first="false">
+        <template v-slot:afterList><slot name="afterList"></slot></template>
       </multiselect>
     </div>
 

package/src/components/forms/ToggleInputSelect.vue

@@ -1,14 +1,14 @@
 <template>
 
-<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled':disabled}"  v-on:click="focusClosestInput">
+<div :class="{'toggle-input-container' : size != 'streamline', 'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled':disabled}"  v-on:click="focusClosestInput">
     <label 
-        v-if="label"
+        v-if="label && size != 'streamline'"
         :for="name ? name : 'ToggleInputSelect' " 
         class="toggle-input-label"
     > {{ label }} 
     </label>
 
-    <div class="toggle-input-select-container">
+    <div :class="['toggle-input-select-container', size]">
         <select 
             :name="name ? name : 'ToggleInputSelect' " 
             :class="[ 'toggle-input-select', size]"
@@ -18,7 +18,7 @@
             :disabled="disabled"
             :style="`${fontFamily ? 'font-family: ' + fontFamily : ''}`"
             >
-                <option value="">Select an option</option>
+                <option value="">{{size == 'streamline' ? label : 'Select an option' }}</option>
                 <option :value="option.value" v-for="(option, key) in options" v-bind:key="key">{{option.label}}</option>
         </select>
     </div>
@@ -60,7 +60,7 @@ export default {
         size: {
             type: String,
             validator: function (value) {
-                return ['extra-small', 'small', 'medium', 'large', 'full'].indexOf(value) !== -1
+                return ['extra-small', 'small', 'medium', 'large', 'full', 'streamline'].indexOf(value) !== -1
             }
         },
         required: {

package/src/index.js

@@ -44,7 +44,6 @@ 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';
@@ -105,7 +104,6 @@ const Components = {
     ToggleBadge,
     ToggleCalculateBadge,
     TogglePodiumBadge,
-    ToggleLogoBadge,
     ToggleTableColumn,
     ToggleInputText,
     ToggleInputEditableText,

package/src/sass/includes/_as_badges.scss

@@ -228,71 +228,4 @@
         width: 22px;
         margin-right: 15px;
     }
-}
-
-.toggle-logo-badge-small {
-    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-medium {
-    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-large {
-    border: 0;
-    font-family: $toggle-font-family;
-    width: 10rem;
-    height: 2rem;
-    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: 2px 4px;
-    display: block;
-}
-
-.toggle-logo-badge-medium > img {
-    object-fit: contain;
-    width: stretch;
-    max-width: 100%;
-    box-sizing: border-box;
-    height: 1.1rem;
-    padding: 2px 4px;
-    display: block;
-}
-
-.toggle-logo-badge-large > img {
-    object-fit: contain;
-    width: stretch;
-    max-width: 100%;
-    box-sizing: border-box;
-    height: 1.1rem;
-    padding: 2px 4px;
-    display: block;
 }

package/src/sass/includes/_as_inputs.scss

@@ -9,7 +9,6 @@
 .toggle-input-select,
 .toggle-contact-search-container{
     @include toggle-global-font-config;
-    max-width: 425px
 }
 
 .toggle-input-counter{
@@ -260,6 +259,18 @@
        top: 0.7rem;
        pointer-events: none;
     }
+    &.streamline {
+        &:after{
+            content: '';
+            width: 1.2rem !important;
+            height: 1.2rem !important;
+            background: transparent url("../assets/icons/arrow_down.svg") no-repeat 100% 50%;
+            position: absolute;
+            right: 1rem;
+            top: 0.7rem;
+            pointer-events: none;
+         }
+    }
 }
 
 
@@ -275,6 +286,10 @@
     &:focus {
         outline: none;
     }
+    &.streamline {
+        font-size: 1rem;
+        padding: 0.3rem 2rem 0.3rem 1rem;
+    }
 }
 
 // For multi tier side nav
@@ -971,6 +986,10 @@ $iconWidth:20px;
 // Contact Search Styles
 //
 
+.toggle-contact-search-container {
+    max-width: 425px;
+}
+
 .toggle-contact-search-input-container {
     width: 100%;
     height: 40px;

package/src/components/badges/ToggleLogoBadge.vue

@@ -1,53 +0,0 @@
-<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>