@rypen-dev/shared-components 5.0.0 → 5.0.2

package/scss/partials/_tooltips.scss

@@ -193,6 +193,60 @@
         }
     }
 
+    &.minimal {
+        padding-top: 10px;
+
+        .inner {
+            border: 0;
+            border-radius: 2px;
+            background-color: $tooltip-minimal-bg-color;
+            padding: 12px;
+            box-shadow: none;
+        }
+
+        &::before {
+            display: none;
+        }
+
+        &::after {
+            border-left-width: 10px;
+            border-right-width: 10px;
+            border-bottom-width: 10px;
+            border-bottom-color: $tooltip-minimal-bg-color;
+            top: 0;
+        }
+
+        &.up {
+            padding-top: 0;
+            padding-bottom: 10px;
+
+            &::after {
+                bottom: 0;
+                border-bottom: 0;
+                top: auto;
+                border-top: solid 10px $tooltip-minimal-bg-color;
+            }
+        }
+
+        &.right-tooltip::after {
+            right: 0;
+            border-right: 0;
+            border-top: 0;
+            border-bottom: solid 10px $tooltip-minimal-bg-color;
+            border-left: solid 10px transparent;
+        }
+
+        @media (min-width: map-get($breakpoints, medium)) {
+            &.medium-right-tooltip::after {
+                right: 0;
+                border-right: 0;
+                border-top: 0;
+                border-bottom: solid 10px $tooltip-minimal-bg-color;
+                border-left: solid 10px transparent;
+            }
+        }
+    }
+
     @media (max-width: map-get($breakpoints, medium) - 1px) {
         &.small-left-tooltip {
             left: 0;
@@ -271,58 +325,4 @@
             }
         }
     }
-
-    &.minimal {
-        padding-top: 10px;
-
-        .inner {
-            border: 0;
-            border-radius: 2px;
-            background-color: $tooltip-minimal-bg-color;
-            padding: 12px;
-            box-shadow: none;
-        }
-
-        &::before {
-            display: none;
-        }
-
-        &::after {
-            border-left-width: 10px;
-            border-right-width: 10px;
-            border-bottom-width: 10px;
-            border-bottom-color: $tooltip-minimal-bg-color;
-            top: 0;
-        }
-
-        &.up {
-            padding-top: 0;
-            padding-bottom: 10px;
-
-            &::after {
-                bottom: 0;
-                border-bottom: 0;
-                top: auto;
-                border-top: solid 10px $tooltip-minimal-bg-color;
-            }
-        }
-
-        &.right-tooltip::after {
-            right: 0;
-            border-right: 0;
-            border-top: 0;
-            border-bottom: solid 10px $tooltip-minimal-bg-color;
-            border-left: solid 10px transparent;
-        }
-
-        @media (min-width: map-get($breakpoints, medium)) {
-            &.medium-right-tooltip::after {
-                right: 0;
-                border-right: 0;
-                border-top: 0;
-                border-bottom: solid 10px $tooltip-minimal-bg-color;
-                border-left: solid 10px transparent;
-            }
-        }
-    }
 }

package/scss/partials/_typography.scss

@@ -121,6 +121,10 @@ h6 {
         margin-bottom: 0 !important;
     }
 
+    &.inline {
+        display: inline-block;
+    }
+
     &.white-text {
         color: $white;
     }
@@ -226,6 +230,14 @@ h5 {
         border-bottom: solid 3px $headline-divider-border-color;
         padding-bottom: 5px;
         margin-bottom: 20px;
+
+        &.secondary {
+            border-bottom-color: $secondary;
+        }
+        
+        &.tertiary-alt {
+            border-bottom-color: $tertiary-alt;
+        }
     }
 
     &.card-style {
@@ -235,6 +247,11 @@ h5 {
         font-weight: $headline-weight-normal;
         color: $body-font-color;
         margin-bottom: 0.5rem;
+
+        > span {
+            border: 0;
+            padding-bottom: 0;
+        }
     }
 
     &.byline {
@@ -527,10 +544,25 @@ small,
         color: $success;
     }
 
+    &.discount,
     &.color-success-alt {
         color: $success-alt;
     }
 
+    &.strike {
+        position: relative;
+    
+        &::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: -4px;
+            right: -6px;
+            border-bottom: solid 2px $secondary-alt;
+            transform: translateY(-50%);
+        }
+    }
+
     .plus {
         font-size: 1rem;
         vertical-align: middle;
@@ -570,6 +602,14 @@ small,
     display: block;
     font-size: 0.85rem;
     color: $text-gray;
+
+    &.inline {
+        display: inline-block;
+    }
+
+    &.bigger {
+        font-size: 1rem;
+    }
 }
 
 .intro-text {
@@ -601,6 +641,11 @@ small,
     letter-spacing: 1px;
     padding: 60px 0;
     text-align: center;
+
+    &.compact {
+        padding: 30px 0;
+        font-size: 0.875rem;
+    }
 }
 
 .store-code {

package/src/components/LookupTextBox.vue

@@ -1,16 +1,17 @@
 <template>
     <div class="lookup-container" :class="{ small: small }">
-    <div class="input-container" :class="{ loading: loading, suggestions: suggestionsOpen, small: small }">
-        <input type="text" autocomplete="off" v-model="value" @focus="focusOn" @blur="focusOff" />
-        <span v-if="loading" class="mini-loader"></span>
+        <div class="input-container" :class="{ loading: loading, suggestions: suggestionsOpen, small: small, error: invalid }">
+            <input v-if="useExternalValue" ref="inputforexternal" type="text" autocomplete="off" :value="externalValue" :maxlength="maxLength" @input="updateExternalValue" @focus="focusOn" @blur="focusOff" @keyup.enter="enterMethod" :disabled="disabled" />
+            <input v-else ref="input" type="text" autocomplete="off" v-model="value" :maxlength="maxLength" @focus="focusOn" @blur="focusOff" @keyup.enter="enterMethod" :disabled="disabled" />
+            <span v-if="loading" class="mini-loader"></span>
+        </div>
+        <div v-if="suggestionsOpen" class="lookup-suggestions">
+            <ul>
+                <li v-if="suggestions.length === 0" class="empty">No {{ searchType }} found</li>
+                <li v-for="suggestion in suggestions" :key="suggestion.Id"><a @click="selectSuggestion(suggestion)">{{ suggestion.Name }}</a></li>
+            </ul>
+        </div>
     </div>
-    <div v-if="suggestionsOpen" class="lookup-suggestions">
-        <ul>
-            <li v-if="suggestions.length === 0" class="empty">No products found</li>
-            <li v-for="suggestion in suggestions" :key="suggestion.Id"><a @click="selectSuggestion(suggestion)">{{ suggestion.Name }}</a></li>
-        </ul>
-    </div>
-</div>
 </template>
 <script>
     import { debounce } from "@rypen-dev/helpers";
@@ -26,15 +27,39 @@
                 type: Array,
                 default: () => [],
             },
-            error: String,
+            invalid: {
+                type: Boolean,
+                default: false,
+            },
             minimumLength: {
                 type: Number,
                 default: 3,
             },
+            maxLength: {
+                type: Number,
+                default: 200,
+            },
             small: {
                 type: Boolean,
                 default: false,
             },
+            disabled: {
+                type: Boolean,
+                default: false,
+            },
+            useExternalValue: {
+                type: Boolean,
+                default: false,
+            },
+            externalValue: String,
+            nameOnly: {
+                type: Boolean,
+                default: false,
+            },
+            searchType: {
+                type: String,
+                default: 'products'
+            },
         },
         data: () => {
             return {
@@ -52,14 +77,31 @@
         },
         methods: {
             getSuggestions() {
-                if (this.value.length === 0 || this.value.length >= this.minimumLength) {
-                    this.$emit('search', this.value);
+                const usedValue = this.useExternalValue ? this.externalValue : this.value;
+                if (usedValue.length === 0 || usedValue.length >= this.minimumLength) {
+                    this.$emit('search', usedValue);
                 }
             },
             selectSuggestion(suggestion) {
-                this.$emit('select', suggestion);
+                let data = suggestion;
+                if (this.nameOnly) {
+                    data = suggestion.Name;
+                }
+
+                this.$emit('select', data);
+            },
+
+            updateExternalValue(e) {
+                this.$emit('select', e.target.value);
             },
 
+            focusInput() {
+                if (this.$refs.inputforexternal) {
+                    this.$refs.inputforexternal.focus();
+                } else if (this.$refs.input) {
+                    this.$refs.input.focus();
+                }
+            },
             focusOn() {
                 this.focused = true;
             },
@@ -69,6 +111,10 @@
                     this.value = '';
                 }, 200);
             },
+
+            enterMethod() {
+                this.$emit('enter');
+            },
         },
         computed: {
             suggestionsOpen() {
@@ -79,6 +125,9 @@
             value(newValue) {
                 this.debouncedGetSuggestions(newValue);
             },
+            externalValue(newValue) {
+                this.debouncedGetSuggestions(newValue);
+            },
         },
     }
 </script>

package/src/components/ProductImageSelector.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="image-selector">
         <div class="image-area">
-            <div class="images-wrapper" :class="{ sliding: slidingDirection !== '', left: slidingDirection === 'left', right: slidingDirection === 'right' }">
+            <div class="images-wrapper">
                 <div class="image-container" :style="currentImageStyle" :class="{ empty: showEmpty && selectedImage === '' }">
                     <small v-if="substitutedImage" class="substitute-warning">*Image may not be representative of actual product with options currently selected</small>
                 </div>
@@ -63,9 +63,6 @@
 
                 carouselIndex: 0,
                 maxImagesShown: 6,
-                slidingDirection: '',
-
-                timer: null,
             }
         },
         created: function () {

package/src/components/VariableLoader.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <generic-loader v-if="generic" :cssClass="cssClass" />
+        <generic-loader v-if="useGeneric" :cssClass="cssClass" />
         <branded-loader v-else />
     </div>
 </template>
@@ -17,6 +17,11 @@
                 default: false,
             },
         },
+        computed: {
+            useGeneric() {
+                return USE_GENERIC_LOADER === true || this.generic;
+            },
+        },
         components: {
             BrandedLoader,
             GenericLoader,