@rypen-dev/shared-components 4.1.0 → 4.1.2

package/scss/partials/_layout.scss

@@ -1,3 +1,31 @@
+@media all and (max-width: map-get($breakpoints, medium) - 1px) {
+    body:after {
+        content: 'size-small';
+        display: none;
+    }
+}
+
+@media all and (min-width: map-get($breakpoints, medium)) {
+    body:after {
+        content: 'size-medium';
+        display: none;
+    }
+}
+
+@media all and (min-width: map-get($breakpoints, large)) {
+    body:after {
+        content: 'size-large';
+        display: none;
+    }
+}
+
+@media all and (min-width: map-get($breakpoints, xlarge)) {
+    body:after {
+        content: 'size-xlarge';
+        display: none;
+    }
+}
+
 .show-override {
     // override due to combo of on-load and vue applied styles for initially hidden items
     display: block !important;
@@ -12,132 +40,132 @@
 }
 
 .single-space {
-    margin-bottom: 20px !important;
+    margin-bottom: $single-space !important;
 }
 
 .double-space {
-    margin-bottom: 40px !important;
+    margin-bottom: #{$single-space * 2} !important;
 }
 
 .triple-space {
-    margin-bottom: 60px !important;
+    margin-bottom: #{$single-space * 3} !important;
 }
 
 .half-space {
-    margin-bottom: 10px !important;
+    margin-bottom: #{$single-space * 0.5} !important;
 }
 
 .quarter-space {
-    margin-bottom: 5px !important;
+    margin-bottom: #{$single-space * 0.25} !important;
 }
 
 .single-space-top {
-    margin-top: 20px !important;
+    margin-top: $single-space !important;
 }
 
 .double-space-top {
-    margin-top: 40px !important;
+    margin-top: #{$single-space * 2} !important;
 }
 
 .triple-space-top {
-    margin-top: 60px !important;
+    margin-top: #{$single-space * 3} !important;
 }
 
 .half-space-top {
-    margin-top: 10px !important;
+    margin-top: #{$single-space * 0.5} !important;
 }
 
 .quarter-space-top {
-    margin-top: 5px !important;
+    margin-top: #{$single-space * 0.25} !important;
 }
 
 .small-single-space {
     @media screen and (max-width: (map-get($breakpoints, medium) - 1px)) {
-        margin-bottom: 20px !important;
+        margin-bottom: $single-space !important;
     }
 }
 
 .medium-single-space {
     @media print, screen and (min-width: map-get($breakpoints, medium)) {
-        margin-bottom: 20px !important;
+        margin-bottom: $single-space !important;
     }
 }
 
 .small-single-space-top {
     @media screen and (max-width: (map-get($breakpoints, medium) - 1px)) {
-        margin-top: 20px !important;
+        margin-top: $single-space !important;
     }
 }
 
 .medium-single-space-top {
     @media print, screen and (min-width: map-get($breakpoints, medium)) {
-        margin-top: 20px !important;
+        margin-top: $single-space !important;
     }
 }
 
 .small-double-space {
     @media screen and (max-width: (map-get($breakpoints, medium) - 1px)) {
-        margin-bottom: 40px !important;
+        margin-bottom: #{$single-space * 2} !important;
     }
 }
 
 .medium-double-space {
     @media print, screen and (min-width: map-get($breakpoints, medium)) {
-        margin-bottom: 40px !important;
+        margin-bottom: #{$single-space * 2} !important;
     }
 }
 
 .medium-only-double-space {
     @media print, screen and (min-width: map-get($breakpoints, medium)) and (max-width: (map-get($breakpoints, large) - 1px)) {
-        margin-bottom: 40px !important;
+        margin-bottom: #{$single-space * 2} !important;
     }
 }
 
 .small-double-space-top {
     @media screen and (max-width: (map-get($breakpoints, medium) - 1px)) {
-        margin-top: 40px !important;
+        margin-top: #{$single-space * 2} !important;
     }
 }
 
 .medium-double-space-top {
     @media print, screen and (min-width: map-get($breakpoints, medium)) {
-        margin-top: 40px !important;
+        margin-top: #{$single-space * 2} !important;
     }
 }
 
 .small-triple-space {
     @media screen and (max-width: (map-get($breakpoints, medium) - 1px)) {
-        margin-bottom: 60px !important;
+        margin-bottom: #{$single-space * 3} !important;
     }
 }
 
 .medium-triple-space {
     @media print, screen and (min-width: map-get($breakpoints, medium)) {
-        margin-bottom: 60px !important;
+        margin-bottom: #{$single-space * 3} !important;
     }
 }
 
 .small-half-space {
     @media screen and (max-width: (map-get($breakpoints, medium) - 1px)) {
-        margin-bottom: 10px !important;
+        margin-bottom: #{$single-space * 0.5} !important;
     }
 }
 
 .medium-half-space {
     @media print, screen and (min-width: map-get($breakpoints, medium)) {
-        margin-bottom: 10px !important;
+        margin-bottom: #{$single-space * 0.5} !important;
     }
 }
 
 .small-half-space-top {
     @media screen and (max-width: (map-get($breakpoints, medium) - 1px)) {
-        margin-top: 10px !important;
+        margin-top: #{$single-space * 0.5} !important;
     }
 }
 
 .medium-half-space-top {
     @media print, screen and (min-width: map-get($breakpoints, medium)) {
-        margin-top: 10px !important;
+        margin-top: #{$single-space * 0.5} !important;
     }
 }
 
@@ -178,6 +206,18 @@ hr {
         margin-top: 0;
     }
 
+    &.small {
+        margin: 0.5rem 0;
+    }
+
+    &.large {
+        margin: 40px 0;
+    }
+    
+    &.short {
+        width: 80px;
+    }
+
     &.secondary {
         border-bottom-color: $secondary;
     }
@@ -186,9 +226,9 @@ hr {
     &.tertiary-alt {
         border-bottom-color: $tertiary-alt;
     }
-
-    &.small {
-        margin: 0.5rem 0;
+    
+    &.warning {
+        border-bottom-color: $warning;
     }
 
     &.dark-gray {

package/scss/partials/_modals.scss

@@ -117,6 +117,11 @@
                     letter-spacing: 0;
                     margin-bottom: 0;
                     font-family: $body-font-family;
+                    flex-shrink: 0;
+                }
+
+                .row .input-container.text {
+                    padding-top: 8px;
                 }
             }
         }

package/scss/partials/_notifications.scss

@@ -143,6 +143,19 @@
     }
 }
 
+.success-icon-container {
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: $secondary;
+    font-size: 1.125rem;
+    font-weight: normal;
+
+    svg {
+        width: 80px;
+    }
+}
+
 .success-icon {
     .path {
         stroke: $success;

package/scss/partials/_pills.scss

@@ -59,6 +59,19 @@
         }
     }
 
+    &.secondary-purple,
+    &.secondary-alt {
+        border-color: $secondary-alt;
+        color: $secondary-alt;
+    
+        &:hover,
+        &:focus,
+        &.active {
+            background-color: fade-out($secondary-alt, 0.75) !important;
+            color: $secondary-alt !important;
+        }
+    }
+    
     &.turquoise,
     &.success-alt {
         border-color: $success-alt;
@@ -160,6 +173,11 @@
             background-color: $secondary;
         }
 
+        &.secondary-purple,
+        &.secondary-alt {
+            background-color: $secondary-alt;
+        }
+
         &.turquoise,
         &.success-alt {
             background-color: $success-alt;

package/scss/partials/_tooltips.scss

@@ -18,6 +18,10 @@
             display: block !important;
         }
     }
+
+    body:not(.hover-capable) &.detect-hover-capable {
+        cursor: pointer;
+    }
 }
 
 .tooltip {

package/scss/partials/_typography.scss

@@ -113,6 +113,10 @@ h6 {
         border-bottom-color: $headline-accent-color-reversed;
     }
 
+    &.tertiary > span {
+        border-bottom-color: $tertiary;
+    }
+
     &.no-margin {
         margin-bottom: 0 !important;
     }
@@ -163,11 +167,23 @@ h3 {
     line-height: 2.5rem;
     margin-bottom: 30px;
 
+    &.smaller {
+        font-size: 1.25rem;
+    
+        small {
+            font-size: 0.7em;
+        }
+    }
+
     @media print, screen and (min-width: map-get($breakpoints, medium)) {
         font-size: 2.125rem;
         line-height: 3.375rem;
         margin-bottom: 40px;
 
+        &.smaller {
+            font-size: 1.75rem;
+        }
+
         > span {
             padding-bottom: 5px;
         }
@@ -390,6 +406,11 @@ small,
     &.small {
         letter-spacing: 0.5px;
     }
+
+    &.tiny {
+        font-size: 0.75rem;
+        letter-spacing: 0.5px;
+    }
 }
 
 .color-primary {
@@ -405,6 +426,10 @@ small,
     color: $warning;
 }
 
+.color-attention {
+    color: $attention;
+}
+
 .color-success {
     color: $success;
 }

package/scss/styles.scss

@@ -59,6 +59,7 @@
 @import './partials/tables';
 @import './partials/tooltips';
 @import './partials/typography';
+@import './partials/content';
 @import './partials/specsheet';
 @import './partials/notifications';
 @import './partials/progressbar';

package/src/components/AddressDisplay.vue

@@ -20,7 +20,7 @@
             <br />
             <br v-if="address.CareOf" />{{ address.CareOf }}
             <br v-if="address.ContactEmail" />{{ address.ContactEmail  }}
-            <template v-if="address.PhoneNumber"><br /><i class="fas fa-phone color-text-gray"></i> {{ formatPhone(address.PhoneNumber) }}</template>
+            <template v-if="address.PhoneNumber"><br /><i class="fa-solid fa-phone color-text-gray"></i> {{ formatPhone(address.PhoneNumber) }}</template>
         </template>
     </div>
 </template>

package/src/components/DebouncedTextBox.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="input-container" :class="cssClass">
         <input type="text" v-model="value" />
+        <a v-if="includeClear && value.length" class="clear-button" @click="clearInput"><i class="fi-x"></i></a>
     </div>
 </template>
 <script>
@@ -10,6 +11,11 @@
         name: 'DebouncedTextBox',
         props: {
             cssClass: String,
+            initialValue: String,
+            includeClear: {
+                type: Boolean,
+                default: false,
+            },
         },
         data: () => {
             return {
@@ -22,6 +28,15 @@
                 this.debouncedValue = value;
                 this.$emit('change', value);
             });
+
+            if (this.initialValue) {
+                this.value = this.initialValue;
+            }
+        },
+        methods: {
+            clearInput() {
+                this.value = '';
+            },
         },
         watch: {
             value(newValue) {

package/src/components/Slideshow.vue

@@ -0,0 +1,114 @@
+<template>
+    <div v-if="slides.length > 1" class="slideshow" :class="{ small: small }" @mouseover="triggerClearTimer" @mouseout="triggerStartTimer">
+        <div class="slideshow-wrapper">
+            <v-touch @swipeleft="goToNext" @swiperight="goToPrevious" :swipe-options="{ direction: 'horizontal', threshold: 50 }">
+                <div v-for="(slide, index) in slides" class="slide" :class="{ current: index == currentIndex, prev: index === previousIndex, next: index === nextIndex }" :style="backgroundImage(slide)"></div>
+            </v-touch>
+            <a v-if="slides.length > 1 || forceNav" class="nav prev show-for-medium" @click="goToPrevious"></a>
+            <a v-if="slides.length > 1 || forceNav" class="nav next show-for-medium" @click="goToNext"></a>
+        </div>
+        <nav class="slideshow-nav">
+            <a v-for="(slide, index) in slides" :aria-label="index" :class="{ current: index == currentIndex }" @click="goToSlide(index)"></a>
+        </nav>
+    </div>
+    <div v-else>
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'Slideshow',
+        props: {
+            slides: {
+                type: Array,
+                default: [],
+            }, 
+            usePrefix: {
+                type: Boolean,
+                default: true,
+            },
+            prefix: {
+                type: String,
+                default: WCONFIG_IMAGE_BASE_PATH,
+            },
+            auto: {
+                type: Boolean,
+                default: true,
+            },
+            small: {
+                type: Boolean,
+                default: false,
+            },
+            widthSuffix: {
+                type: Number,
+                default: null,
+            },
+            delay: {
+                type: Number,
+                default: 7000,
+            },
+            forceNav: {
+                type: Boolean,
+                default: false,
+            },
+        },
+        data: () => {
+            return {
+                currentIndex: 0,
+                timer: null,
+            }
+        },
+        created: function () {
+            this.triggerStartTimer();
+        },
+        methods: {
+            goToPrevious() {
+                this.goToSlide(this.previousIndex);
+            },
+            goToNext() {
+                this.goToSlide(this.nextIndex);
+            },
+            goToSlide(index) {
+                this.triggerClearTimer();
+                this.currentIndex = index;
+                this.$emit('change', index);
+                this.triggerStartTimer();
+            },
+            triggerStartTimer() {
+                if (this.auto) {
+                    this.startTimer();
+                }
+            },
+            startTimer() {
+                if (this.slides.length > 0) {
+                    if (this.timer !== null) {
+                        clearTimeout(this.timer);
+                    }
+                    this.timer = setTimeout(this.goToNext, this.delay);
+                }
+            },
+            triggerClearTimer() {
+                if (this.auto) {
+                    this.clearTimer();
+                }
+            },
+            clearTimer() {
+                clearTimeout(this.timer);
+                this.timer = null;
+            },
+
+            backgroundImage(slide) {
+                return { backgroundImage: 'url("' + (this.usePrefix ? this.prefix : '') + slide + (this.widthSuffix ? ';width=' + this.widthSuffix : '') + '")' };
+            },
+        },
+        computed: {
+            previousIndex() {
+                return this.currentIndex === 0 ? this.slides.length - 1 : this.currentIndex - 1;
+            },
+            nextIndex() {
+                return this.currentIndex === this.slides.length - 1 ? 0 : this.currentIndex + 1;
+            },
+        }
+    }
+</script>

package/src/index.js

@@ -10,9 +10,10 @@ import lookupTextBox from "./components/LookupTextBox.vue";
 import modalWrapper from "./components/ModalWrapper.vue";
 import numberInput from "./components/NumberInput.vue";
 import productImageSelector from "./components/ProductImageSelector.vue";
+import slideshow from "./components/Slideshow.vue";
 import switchInput from "./components/SwitchInput.vue";
-import timespanInput from "./components/TimespanInput.vue";
 import successCheckmark from "./components/SuccessCheckmark.vue";
+import timespanInput from "./components/TimespanInput.vue";
 import variableLoader from "./components/VariableLoader.vue";
 
 import IconBaseFile from "./components/icons/IconBase.vue";
@@ -38,6 +39,7 @@ const Components = {
 	ModalWrapper: modalWrapper,
 	NumberInput: numberInput,
 	ProductImageSelector: productImageSelector,
+	Slideshow: slideshow,
 	SuccessCheckmark: successCheckmark,
 	SwitchInput: switchInput,
 	TimespanInput: timespanInput,
@@ -64,6 +66,7 @@ export var LookupTextBox = lookupTextBox;
 export var ModalWrapper = modalWrapper;
 export var NumberInput = numberInput;
 export var ProductImageSelector = productImageSelector;
+export var Slideshow = slideshow;
 export var SuccessCheckmark = successCheckmark;
 export var SwitchInput = switchInput;
 export var TimespanInput = timespanInput;

package/src/components/icons/TestComponent.vue

@@ -1,15 +0,0 @@
-<template>
-    <div>
-        <h2>This is a test component</h2>
-        <div>
-            <slot name="icon"></slot>
-        </div>
-        <div>
-            <slot name="other"></slot>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {}
-</script>