@rypen-dev/shared-components 4.1.0 → 4.1.1

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/_typography.scss

@@ -163,11 +163,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 +402,11 @@ small,
     &.small {
         letter-spacing: 0.5px;
     }
+
+    &.tiny {
+        font-size: 0.75rem;
+        letter-spacing: 0.5px;
+    }
 }
 
 .color-primary {
@@ -405,6 +422,10 @@ small,
     color: $warning;
 }
 
+.color-attention {
+    color: $attention;
+}
+
 .color-success {
     color: $success;
 }

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>