@rypen-dev/shared-components 4.0.17 → 4.1.1

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/_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/ModalWrapper.vue

@@ -2,6 +2,7 @@
     <transition name="modal">
         <div class="modal-mask hide-for-print" :class="maskCssClass" @click="closeIfCloseable">
             <div class="modal-container" :class="cssClass">
+                <a v-if="closeable" class="close" @click="$emit('close')"><icon-base icon-name="close" width="24" height="24" viewBox="0 0 24 24"><icon-close /></icon-base></a>
                 <div class="modal-wrapper">
                     <div class="modal-grid" :class="{ 'with-footer': hasFooter }">
                         <div class="scrollable-content">
@@ -23,6 +24,9 @@
 </template>
 
 <script>
+    import IconBase from "./icons/IconBase.vue";
+    import IconClose from "./icons/IconClose.vue";
+
     export default {
         name: 'ModalWrapper',
         props: {
@@ -47,7 +51,8 @@
             }
         },
         components: {
-
+            IconBase,
+            IconClose,
         },
         methods: {
             closeIfCloseable(e) {

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,13 +10,12 @@ 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 testComponent from "./components/icons/TestComponent.vue";
-
 import IconBaseFile from "./components/icons/IconBase.vue";
 import IconApproveFile from "./components/icons/IconApprove.vue";
 import IconCaretFile from "./components/icons/IconCaret.vue";
@@ -40,6 +39,7 @@ const Components = {
 	ModalWrapper: modalWrapper,
 	NumberInput: numberInput,
 	ProductImageSelector: productImageSelector,
+	Slideshow: slideshow,
 	SuccessCheckmark: successCheckmark,
 	SwitchInput: switchInput,
 	TimespanInput: timespanInput,
@@ -52,8 +52,6 @@ const Components = {
 	IconSave: IconSaveFile,
 	IconShare: IconShareFile,
 	Money: money,
-
-	TestComponent: testComponent,
 };
 
 export var AddressDisplay = addressDisplay;
@@ -68,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;
@@ -81,6 +80,4 @@ export var IconSave = IconSaveFile;
 export var IconShare = IconShareFile;
 export var Money = money;
 
-export var TestComponent = testComponent;
-
 export default Components;

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>