@rypen-dev/shared-components 4.2.14 → 5.0.1

package/scss/partials/_loader.scss

@@ -16,6 +16,10 @@
     }
 }
 
+.working-screen-container {
+    position: relative;
+}
+
 .working-screen {
     background-color: fade-out($white, 0.5);
     position: absolute;
@@ -72,6 +76,22 @@
     animation-iteration-count: infinite;
     animation-duration: 1s;
     animation-timing-function: linear;
+
+    &.warning {
+        border-color: $warning;
+    }
+
+    &.success {
+        border-color: $success-alt;
+    }
+
+    &.extra-tiny {
+        width: 17px;
+        height: 17px;
+        border-width: 2px;
+        position: relative;
+        top: -2px;
+    }
 }
 
 @keyframes rotate {

package/scss/partials/_modals.scss

@@ -152,6 +152,16 @@
         }
     }
 
+    &.no-header {
+        .modal-header {
+            margin-bottom: 0;
+
+            h3 {
+                display: none;
+            }
+        }
+    }
+
     &.small-header {
         h3,
         .modal-header h3 {
@@ -410,6 +420,10 @@
         transform: translateY(-50%);
         width: 100%;
     }
+
+    &.removing {
+        background-color: $alert;
+    }
 }
 
 .bubble-message-enter {

package/scss/partials/_notifications.scss

@@ -12,6 +12,11 @@
             margin-right: 15px;
             flex-shrink: 0;
 
+            svg {
+                width: 100%;
+                height: 100%;
+            }
+
             &.avatar {
                 span {
                     border: solid 1px $primary;
@@ -60,10 +65,28 @@
                 font-weight: $body-weight-normal;
             }
         }
+
+        &.align-right {
+            justify-content: flex-end;
+        }
     }
 
     .notification-detail {
         padding-top: 15px;
+
+        a,
+        strong {
+            color: $secondary-alt;
+            font-weight: 600;
+        }
+
+        a {
+            text-decoration: underline;
+
+            &:hover {
+                text-decoration: none;
+            }
+        }
     }
 
     &.inline {
@@ -94,6 +117,16 @@
                 display: block;
             }
         }
+
+        &.removing {
+            .notification-summary {
+                opacity: 0.5;
+
+                > a {
+                    display: none !important;
+                }
+            }
+        }
     }
 }
 

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

@@ -60,7 +60,7 @@ strong {
     font-weight: 600;
 
     &.stronger {
-        font-weight: 800;
+        font-weight: 700;
     }
 }
 
@@ -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/scss/styles.scss

@@ -55,6 +55,7 @@
 @import './partials/forms';
 @import './partials/loader';
 @import './partials/modals';
+@import './partials/flyovers';
 @import './partials/pills';
 @import './partials/tables';
 @import './partials/tooltips';

package/src/components/ModalWrapper.vue

@@ -2,17 +2,20 @@
     <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')"><test-close-component width="24" height="24" /></a>
+                <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">
+                    <div class="modal-grid" :class="{ 'with-footer': hasFooter }">
                         <div class="scrollable-content">
                             <div class="modal-header">
                                 <h3 v-if="header || subheader">{{ header }} <small v-if="subheader">{{ subheader }}</small></h3>
                             </div>
                             <div class="modal-body">
-                                <loader></loader>
+                                <slot name="body"></slot>
                             </div>
                         </div>
+                        <div class="modal-footer" v-if="hasFooter">
+                            <slot name="footer"></slot>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -21,8 +24,8 @@
 </template>
 
 <script>
-    import Loader from "./Loader.vue";
-    import TestCloseComponent from "./icons/IconClose.vue";
+    import IconBase from "./icons/IconBase.vue";
+    import IconClose from "./icons/IconClose.vue";
 
     export default {
         name: 'ModalWrapper',
@@ -48,8 +51,8 @@
             }
         },
         components: {
-            TestCloseComponent,
-            Loader,
+            IconBase,
+            IconClose,
         },
         methods: {
             closeIfCloseable(e) {
@@ -58,5 +61,10 @@
                 }
             }
         },
+        computed: {
+            hasFooter() {
+                return !!this.$slots.footer;
+            }
+        }
     }
 </script>

package/src/components/ProductImageSelector.vue

@@ -8,7 +8,7 @@
             </div>
         </div>
         <nav v-if="product || forceNav" class="image-nav">
-            <a v-if="showArrows" class="arrow rotate-90 show-for-medium" @click="previous" :disabled="carouselIndex === 0"><icon-caret width="32" height="32" /></a>
+            <a v-if="showArrows" class="arrow rotate-90 show-for-medium" @click="previous" :disabled="carouselIndex === 0"><icon-base width="32" height="32" viewbox="0 0 24 24" icon-name="caret"><icon-caret /></icon-base></a>
             <div class="image-nav-list" :class="imageListClass">
                 <a class="variant-image" :class="{ current: variantImageSelected }" @click="selectVariantImage" :style="shiftStyle">
                     <img :src="variantImagePath" alt="" />
@@ -22,11 +22,12 @@
                     </a>
                 </template>
             </div>
-            <a v-if="showArrows" class="arrow rotate-270 show-for-medium" @click="next" :disabled="carouselIndex === carouselSlideCount"><icon-caret width="32" height="32" /></a>
+            <a v-if="showArrows" class="arrow rotate-270 show-for-medium" @click="next" :disabled="carouselIndex === carouselSlideCount"><icon-base width="32" height="32" viewbox="0 0 24 24" icon-name="caret"><icon-caret /></icon-base></a>
         </nav>
     </div>
 </template>
 <script>
+    import IconBase from "./icons/IconBase.vue";
     import IconCaret from "./icons/IconCaret.vue";
 
     export default {
@@ -169,6 +170,7 @@
             },
         },
         components: {
+            IconBase,
             IconCaret,
         }
     };

package/src/components/icons/IconApprove.vue

@@ -1,10 +1,8 @@
 <template>
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 42.76" class="icon">
-        <g>
-            <path fill="none" class="stroke-target" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M38.52,23.01c-0.18,8.84-6.87,16.41-15.9,17.45c-9.85,1.13-18.75-5.93-19.88-15.78 C1.62,14.83,8.69,5.93,18.54,4.8c3.87-0.45,7.78,0.38,11.14,2.36"/>
-            <path fill="none" class="stroke-target" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M13.39,20.36l7.68,7.69L47.93,2.42"/>
-        </g>
-    </svg>
+<g>
+    <path fill="none" class="stroke-target" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M38.52,23.01c-0.18,8.84-6.87,16.41-15.9,17.45c-9.85,1.13-18.75-5.93-19.88-15.78 C1.62,14.83,8.69,5.93,18.54,4.8c3.87-0.45,7.78,0.38,11.14,2.36"/>
+	<path fill="none" class="stroke-target" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M13.39,20.36l7.68,7.69L47.93,2.42"/>
+</g>
 </template>
 
 <script>

package/src/components/icons/IconBase.vue

@@ -2,11 +2,13 @@
     <svg xmlns="http://www.w3.org/2000/svg"
         :width="width"
         :height="height"
-        :aria-label="title"
+        :viewBox="viewbox"
+        :aria-labelledby="iconName"
         role="presentation"
-        class="icon">
-        <title lang="en">{{ title }}</title>
-        <use :xlink:href="'#' + iconName"></use>
+        class="icon"
+    >
+        <title :id="iconName" lang="en">{{ title }}</title>
+        <slot></slot>
     </svg>
 </template>
 
@@ -16,7 +18,7 @@
             title: String,
             iconName: {
                 type: String,
-                default: 'icon-close',
+                default: 'box',
             },
             width: {
                 type: [Number, String],
@@ -26,6 +28,10 @@
                 type: [Number, String],
                 default: 64,
             },
+            viewbox: {
+                type: String,
+                default: '0 0 72 72',
+            },
         },
     }
 </script>

package/src/components/icons/IconCaret.vue

@@ -1,7 +1,5 @@
 <template>
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon">
-        <path fill="none" fill-rule="evenodd" class="stroke-target" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 10l6.119 6L18 10" />
-    </svg>
+    <path fill="none" fill-rule="evenodd" class="stroke-target" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 10l6.119 6L18 10" />
 </template>
 
 <script>

package/src/components/icons/IconClose.vue

@@ -1,10 +1,8 @@
 <template>
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon">
-        <g class="color-target" transform="translate(3 3.5)">
-            <rect width="20" height="3" x="-1" y="7" rx="1" transform="rotate(45 9 8.5)"/>
-            <rect width="20" height="3" x="-1" y="7" rx="1" transform="scale(-1 1) rotate(45 0 -13.228)"/>
-        </g>
-    </svg>
+    <g class="color-target" transform="translate(3 3.5)">
+        <rect width="20" height="3" x="-1" y="7" rx="1" transform="rotate(45 9 8.5)"/>
+        <rect width="20" height="3" x="-1" y="7" rx="1" transform="scale(-1 1) rotate(45 0 -13.228)"/>
+    </g>
 </template>
 
 <script>