toggle-components-library 1.25.11 → 1.25.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.25.11",
+  "version": "1.25.13",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -12,7 +12,7 @@
   },
   "main": "dist/toggle-components-library.common.js",
   "module": "dist/toggle-components-library.esm.js",
-  "unpkg": "dist/toggle-components-library.umd.min.js",
+  "unpkg": "dist/toggle-components-library.udm.min.js",
   "browser": {
     "./sfc": "src/toggle-components-library.vue"
   },
@@ -22,29 +22,29 @@
     "public/*",
     "*.json",
     "*.js"
-  ], 
+  ],
   "dependencies": {
-    "apexcharts": "^3.35.5",
-    "core-js": "^3.6.4", 
+    "apexcharts": "^3.36.3",
+    "core-js": "^3.6.4",
     "countries-list": "^2.6.1",
     "date-fns": "^1.30.1",
     "storybook-vue-router": "^1.0.7",
-    "vue": "^2.7.10",
+    "vue": "^2.6.11",
     "vue-airbnb-style-datepicker": "^2.7.1",
     "vue-apexcharts": "^1.6.2",
     "vue-color": "^2.7.1",
     "vue-moment": "^4.1.0",
     "vue-multiselect": "^2.0.8",
-    "vue-router": "^3.6.4",
+    "vue-router": "^3.4.3",
     "vue2-dropzone": "^3.6.0",
     "vuedraggable": "^2.24.3",
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.13",
-    "@storybook/addon-actions": "^6.5.10",
-    "@storybook/addon-docs": "^6.5.10",
-    "@storybook/vue": "^6.5.10",
+    "@babel/core": "^7.11.1",
+    "@storybook/addon-actions": "^6.0.6",
+    "@storybook/addon-docs": "^6.0.6",
+    "@storybook/vue": "^6.0.6",
     "@vue/cli-plugin-babel": "^4.5.3",
     "@vue/cli-plugin-eslint": "^4.5.3",
     "@vue/cli-service": "^4.5.3",
@@ -55,9 +55,9 @@
     "eslint-plugin-vue": "^6.2.2",
     "react": "^16.13.1",
     "react-is": "^16.13.1",
-    "sass": "^1.54.5",
+    "sass": "^1.26.8",
     "sass-loader": "^8.0.2",
-    "vue-template-compiler": "^2.7.10"
+    "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {
     "root": true,

package/src/components/buttons/ToggleLoginButton.vue

@@ -0,0 +1,75 @@
+<template>
+    <div class="toggle-button-container toggle-button-container--login" :class="{'toggle-button-container--fluid': btnFluid}">
+        
+        <button :type="type" :class="['toggle-login-button', { 'toggle-login-button--airship': platform == 'airship' }]" @click="click">
+
+            <div :class="['toggle-login-button-loader', { 'toggle-login-button-loader--airship': platform == 'airship' }]" v-if="loading"></div>
+
+            <div class="toggle-login-button-text" v-else>
+                {{ buttonText }}
+            </div>
+
+        </button>
+
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'ButtonLogin',
+    props: {
+        /**
+         * The test to display in side the button
+         */
+        buttonText: {
+            type: String,
+            default: "Let's go!"
+        },
+        /**
+         * The HTML button type i.e. `submit` or `button`
+         */
+        type: {
+            type: String,
+            default: "submit"
+        },
+        /**
+         * Is the button in a loading state?
+         */
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        /**
+        * Is the button being used on toggle or airship? use `toggle` or `airship`
+        */
+        platform: {
+            type: String,
+            default: "toggle",
+            validator: function (value) {
+                return ['toggle', 'airship'].indexOf(value) !== -1;
+            },
+        },
+        /**
+        * Is the button being used on toggle or airship? use `toggle` or `airship`
+        */
+        btnFluid: {
+            type: Boolean,
+            default: false,
+            validator: function (value) {
+                return [true, false].indexOf(value) !== -1;
+            },
+        }
+    },
+    methods: {
+        click() {
+            /**
+             * Emitted when the button is clicked.
+             * @event click
+             * @type {Event}
+             */
+            this.$emit('click');
+        }
+    }
+}
+</script>

package/src/sass/includes/_as_buttons.scss

@@ -19,6 +19,15 @@
     background:white;
     display: inline-block;
     border-radius: 0.3rem;
+    &--login{
+        border-radius: 23px;
+    }
+    &--fluid{
+        width: 100%;
+        button{
+            width: 100%;
+        }
+    }
 }
 
 
@@ -237,3 +246,77 @@
     }
 
 }
+
+// 
+// Toggle and Airship Login Buttons
+// 
+
+.toggle-login-button {
+    background-color: #3180FF;
+    border: 0;
+    border-radius: 23px;
+    width: 120px;
+    height: 46px;
+    color: #ffffff;
+    cursor: pointer;
+    font: normal normal 600 15px/18px Lato;
+    position: relative;
+    transition: box-shadow .3s, transform .3s, background-color .3s, -webkit-transform .3s;
+}
+
+.toggle-login-button--airship {
+    background-color: #FF7175 !important;
+}
+
+.toggle-login-button:hover {
+    background-color: #1571dd;
+    box-shadow: 0 10px 30px -10px #2cc1ff;
+    -webkit-transform: translate(0, -3px);
+    -ms-transform: translate(0, -3px);
+    transform: translate(0, -3px);
+    color: #fff;
+}
+
+.toggle-login-button--airship:hover {
+    background-color: #ff463f !important;
+    box-shadow: 0 10px 30px -10px rgb(254 108 102 / 50%) !important;
+}
+
+.toggle-login-button-loader {
+    border-radius: 50%;
+    border: .25rem solid #fff;
+    border-top-color: #3180FF;
+    animation: spin 1s infinite linear;
+    margin: 0 auto;
+    width: 0.5rem;
+    height: 0.5rem;
+    position: absolute;
+    left: 50%;
+    margin-left: -0.5rem;
+    top: 50%;
+    margin-top: -0.5rem;
+    box-sizing: content-box;
+}
+
+.toggle-login-button-loader--airship {
+    border-top-color: #FF7175;
+}
+
+.toggle-button-container{
+    &:disabled, &[disabled]{
+        .toggle-login-button{
+            background-color: #d4e4ff;
+            cursor: not-allowed;
+            -webkit-transform: translate(0, 0);
+            -ms-transform: translate(0, 0);
+            transform: translate(0, 0);
+        }
+        .toggle-login-button--airship{
+            background-color: #ed9598 !important;
+            cursor: not-allowed;
+            -webkit-transform: translate(0, 0);
+            -ms-transform: translate(0, 0);
+            transform: translate(0, 0);
+        }
+    }
+}