toggle-components-library 1.28.4 → 1.28.5-beta.0

package/package.json

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

package/src/assets/icons/arrow-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="11" viewBox="0 0 18 11">
+  <path id="Polygon_8" data-name="Polygon 8" d="M7.452,1.892a2,2,0,0,1,3.1,0l4.78,5.842A2,2,0,0,1,13.78,11H4.22A2,2,0,0,1,2.673,7.734Z" transform="translate(18 11) rotate(180)" fill="#3a4a62"/>
+</svg>

package/src/assets/icons/email-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31.001" height="31.001" viewBox="0 0 31.001 31.001">
+  <path id="at-solid" d="M15.5,3.875a11.625,11.625,0,0,0,0,23.251A1.938,1.938,0,1,1,15.5,31,15.5,15.5,0,1,1,31,15.5v1.938A5.812,5.812,0,0,1,20.756,21.2a7.753,7.753,0,1,1-.733-11.989,1.938,1.938,0,0,1,3.227,1.447v6.781a1.938,1.938,0,0,0,3.875,0V15.5A11.628,11.628,0,0,0,15.5,3.875ZM19.376,15.5A3.875,3.875,0,1,0,15.5,19.376,3.875,3.875,0,0,0,19.376,15.5Z" fill="#3a4a62"/>
+</svg>

package/src/assets/icons/magnifying-glass-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24.674" height="24.678" viewBox="0 0 24.674 24.678">
+  <path id="magnifying-glass-solid" d="M20.048,10.024a10,10,0,0,1-1.928,5.913l6.1,6.106a1.544,1.544,0,0,1-2.183,2.183l-6.1-6.106a10.026,10.026,0,1,1,4.111-8.1Zm-10.024,6.94a6.94,6.94,0,1,0-6.94-6.94A6.94,6.94,0,0,0,10.024,16.964Z" fill="#3a4a62"/>
+</svg>

package/src/assets/icons/mobile-icon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31.001" height="32.921" viewBox="0 0 23.131 32.921">
+  <g id="Rectangle_1084" data-name="Rectangle 1084" transform="matrix(0.995, -0.105, 0.105, 0.995, 0, 2.091)" fill="none" stroke="#3a4a62" stroke-width="4">
+    <rect width="20" height="31" rx="5" stroke="none"/>
+    <rect x="2" y="2" width="16" height="27" rx="3" fill="none"/>
+  </g>
+</svg>

package/src/components/forms/ToggleContactSearch.vue

@@ -0,0 +1,136 @@
+<template>
+    <div class="toggle-contact-search-container">
+
+        <div class="toggle-contact-search-error" >
+            {{isInvalid ? errorMessage : ''}}
+        </div>
+
+        <div class="toggle-contact-search-input-container" :class="{'toggle-input-is-invalid': isInvalid, 'toggle-contact-search-input-container-active': showDropdown}">
+            <div class="toggle-contact-search-icon-input-container">
+                <div class="toggle-contact-search-icon-arrow-container" @click="showDropdown = !showDropdown">
+                    <img class="toggle-contact-search-icon" :src="iconSrc" :alt="inputType" />
+                    <img class="toggle-contact-search-arrow" :class="{'toggle-contact-search-arrow-active': showDropdown}" :src="arrowIconSrc" alt="Down arrow" />
+                </div>
+    
+                <div class="toggle-contact-search-divider"></div>
+    
+                <input class="toggle-contact-search-input" v-model="inputVal" type="text" :placeholder="placeholder" @keyup.enter="onEnter">
+    
+                <img class="toggle-contact-search-magnifying-glass-icon" :src="searchIconSrc" alt="Search" @click="onSearch" />
+            </div>
+    
+            <Transition name="drop-down">
+                <div v-if="showDropdown" class="toggle-contact-search-dropdown-container">
+                    <div v-for="type, i in types" @click="inputType = type; showDropdown = false" :key="i">
+                        <div class="toggle-contact-search-dropdown-item">
+                            <img class="toggle-contact-search-icon-dropdown" :src="iconForType(type)" :alt="type" />
+                            <label class="toggle-contact-search-dropdown-item-label" :class="{'toggle-contact-search-dropwdown-item-highlighted': type == inputType}">
+                                {{textForType(type)}}
+                            </label>
+                        </div>
+                    </div>
+                </div>
+            </Transition>
+    
+        </div>
+    </div>
+</template>
+
+<script>
+
+import { mixins } from '../mixins/mixins'
+
+export default {
+    mixins: [mixins],
+    props: {
+        value: {
+            type: [Number,String]
+        },
+        types: {
+            type: Array,
+            default: function () {
+                return ['email', 'mobile'];
+            }
+        },
+        isInvalid: {
+            type: Boolean,
+            default: false
+        },
+        errorMessage: {
+            type: String,
+            default: 'No contact found with these details'
+        }
+    },
+    data() {
+        return {
+            inputType: 'email',
+            showDropdown: false,
+        }
+    },
+    watch: {
+        showDropdown: function (val) {
+            if (val) {
+                this.isInvalid = false;
+            }
+        }
+    },
+     computed: {
+        inputVal: {
+            get: function () {
+                return this.value;
+            },
+
+            set: function (value) {
+                this.$emit('input', value);
+            }
+        },
+        placeholder: function () {
+            return this.inputType == 'email' ? 'Enter contact email address' : 'Enter contact mobile number';
+        },
+        iconSrc() {
+            return this.inputType == 'email' ? require('../../assets/icons/email-icon.svg') : require('../../assets/icons/mobile-icon.svg');
+        },
+        arrowIconSrc() {
+            return require('../../assets/icons/arrow-icon.svg');
+        },
+        searchIconSrc() {
+            return require('../../assets/icons/magnifying-glass-icon.svg');
+        }
+    },
+    methods: {
+        textForType(type) {
+            switch (type) {
+                case 'email':
+                    return 'Search for a contact by email address';
+                case 'mobile':
+                    return 'Search for a contact by mobile';
+                default:
+                     return 'Search for a contact by ' + this.inputType;
+            }
+        },
+        iconForType(type) {
+            switch (type) {
+                case 'email':
+                    return require('../../assets/icons/email-icon.svg');
+                case 'mobile':
+                    return require('../../assets/icons/mobile-icon.svg');
+                default:
+                    return require('../../assets/icons/email-icon.svg');
+            }
+        },
+        onEnter(e) {
+            this.$emit('enterPressed', {
+                type: this.inputType,
+                value: e.target.value
+            });
+        },
+        onSearch() {
+            this.$emit('clickSearch', {
+                type: this.inputType,
+                value: this.inputVal
+            });
+        }
+    }
+}
+
+</script>

package/src/index.js

@@ -22,6 +22,7 @@ import ToggleInputGroup from "./components/forms/ToggleInputGroup.vue";
 import ToggleInputNumber from "./components/forms/ToggleInputNumber.vue";
 import ToggleColourPicker from "./components/forms/ToggleColourPicker.vue";
 import ToggleModal from "./components/modals/ToggleModal.vue";
+import ToggleContactSearch from "./components/forms/ToggleContactSearch.vue";
 
 import ToggleBoosterButton from "./components/boosters/ToggleBoosterButton.vue";
 import ToggleBoosterBasicButton from "./components/boosters/ToggleBoosterBasicButton.vue";
@@ -140,7 +141,8 @@ const Components = {
     ToggleThreeDotsButton,
     ToggleBoosterButton,
     ToggleBoosterBasicButton,
-    ToggleBoosterModal
+    ToggleBoosterModal,
+    ToggleContactSearch
 }
 
 Object.keys(Components).forEach(name => {

package/src/sass/includes/_as_inputs.scss

@@ -6,7 +6,8 @@
 .toggle-input-radio-label, 
 .toggle-input-checkbox-label,
 .toggle-input-search-options,
-.toggle-input-select{
+.toggle-input-select,
+.toggle-contact-search-container{
     @include toggle-global-font-config;
 } 
 
@@ -936,4 +937,191 @@ $iconWidth:20px;
         top: 50%;
         transform: translate(0, -50%);
     }
+}
+
+//
+// Contact Search Styles
+//
+
+.toggle-contact-search-input-container {
+    width: 100%;
+    height: 40px;
+    background-color: $toggle-white;
+    border-radius: 8px;
+    min-width: 550px;
+}
+
+.toggle-contact-search-input-container-active {
+    border-radius: 8px 8px 0 0;
+}
+
+.toggle-contact-search-icon-input-container {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
+
+.toggle-contact-search-dropdown-container {
+    min-width: 550px;
+    background-color: $toggle-white;
+    border-radius: 0 0 8px 8px;
+    overflow: hidden;
+    position: absolute;
+    z-index: 1;
+}
+
+.toggle-contact-search-input {
+    width: 100%;
+    border: 0;
+    border-radius: 0px;
+    height: 30px;
+    margin: 4px 5px 0px 14px;
+    color: #3A4A62;
+    font-weight: 700;
+    font-size: 16px;
+}
+
+.toggle-contact-search-input::placeholder,
+.toggle-contact-search-input:-ms-input-placeholder,
+.toggle-contact-search-input::-ms-input-placeholder {
+    color: #C5CED8;
+    opacity: 1;
+}
+
+.toggle-contact-search-icon {
+    max-width: 20px;
+    max-height: 20px;
+    margin: 10px 0 0 21px;
+    transition: transform .2s ease-in-out;
+}
+
+.toggle-contact-search-icon-arrow-container:hover {
+    .toggle-contact-search-icon {
+        transform: scale(1.1);
+    }
+}
+
+.toggle-contact-search-icon-arrow-container {
+    display: flex;
+    width: 100px;
+    min-width: 60px;
+    flex-direction: row;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.toggle-contact-search-magnifying-glass-icon {
+    cursor: pointer;
+    margin: 0 15px 0 0;
+    max-width: 20px;
+    transition: transform .2s ease-in-out;
+}
+
+.toggle-contact-search-magnifying-glass-icon:hover {
+    transform: scale(1.1);
+}
+
+.toggle-contact-search-arrow {
+    max-width: 10px;
+    margin: 6px 21px 0 15px;
+}
+
+.toggle-contact-search-arrow-active {
+    transition: rotate .2s ease-in-out;
+    rotate: -3.1416rad;
+    transform-origin: center center;
+}
+
+.toggle-contact-search-divider {
+    height: 28px;
+    margin: 7px 0 0 0;
+    border-right: 2px solid #D9D9D9;
+}
+
+.toggle-contact-search-dropdown-item {
+    margin: 5px 5px 5px 10px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 16px;
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+    align-items: center;
+    padding: 5px;
+}
+
+.toggle-contact-search-dropdown-item-label {
+    cursor: pointer;
+    font-weight: 700;
+    color: #3A4A62;
+}
+
+.toggle-contact-search-dropwdown-item-highlighted {
+    color: #547DEE;
+}
+
+.toggle-contact-search-dropdown-item:hover {
+    background-color: #F5F5F5;
+    color: #3A4A62;
+
+    .toggle-contact-search-icon-dropdown {
+        transform: scale(1.1);
+    }
+
+    .toggle-contact-search-dropdown-item-label {
+        color: #3A4A62;
+    }
+}
+
+.toggle-contact-search-icon-dropdown {
+    max-width: 20px;
+    max-height: 20px;
+    margin: 2px 14px 0 0;
+    transition: transform .2s ease-in-out;
+}
+
+.toggle-contact-search-error {
+    height: 16.8px;
+    text-align: right;
+    color: #FF6F6F;
+    font-size: 12px;
+    margin: 0 0 10px 0;
+}
+
+//
+//  Contact Search Transition Styles
+//
+
+.drop-down-enter-active {
+    -moz-transition-duration: 0.4s;
+    -webkit-transition-duration: 0.4s;
+    -o-transition-duration: 0.4s;
+    transition-duration: 0.4s;
+    -moz-transition-timing-function: ease-in;
+    -webkit-transition-timing-function: ease-in;
+    -o-transition-timing-function: ease-in;
+    transition-timing-function: ease-in;
+}
+
+.drop-down-leave-active {
+    -moz-transition-duration: 0.4s;
+    -webkit-transition-duration: 0.4s;
+    -o-transition-duration: 0.4s;
+    transition-duration: 0.4s;
+    -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+    -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+    -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+}
+
+.drop-down-enter-to,
+.drop-down-leave {
+    max-height: 100px;
+    overflow: hidden;
+}
+
+.drop-down-enter,
+.drop-down-leave-to {
+    overflow: hidden;
+    max-height: 0;
 }