@rypen-dev/shared-components 4.1.1 → 4.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/scss/partials/_content.scss +93 -0
- package/scss/partials/_forms.scss +24 -2
- package/scss/partials/_tooltips.scss +4 -0
- package/scss/partials/_typography.scss +4 -0
- package/scss/styles.scss +1 -0
- package/src/components/AddressDisplay.vue +10 -2
- package/src/components/DebouncedTextBox.vue +15 -0
- package/src/components/ModalWrapper.vue +2 -9
- package/src/components/ProductImageSelector.vue +2 -4
- package/src/components/icons/IconApprove.vue +6 -4
- package/src/components/icons/IconBase.vue +5 -11
- package/src/components/icons/IconCaret.vue +3 -1
- package/src/components/icons/IconClose.vue +6 -4
- package/src/components/icons/IconQrCode.vue +541 -539
- package/src/components/icons/IconSave.vue +14 -12
- package/src/components/icons/IconSetup.vue +33 -0
- package/src/components/icons/IconShare.vue +14 -12
- package/src/index.js +3 -0
package/package.json
CHANGED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
/// <reference path="../variables" />
|
|
2
|
+
/// <reference path="../mixins" />
|
|
3
|
+
/// <reference path="../vendor/foundation-settings" />
|
|
4
|
+
|
|
5
|
+
.photo-collage {
|
|
6
|
+
position: relative;
|
|
7
|
+
width: 250px;
|
|
8
|
+
margin: 40px 20px 40px 0;
|
|
9
|
+
padding: 20px 0;
|
|
10
|
+
|
|
11
|
+
&.small-centered {
|
|
12
|
+
@media (max-width: map-get($breakpoints, medium) - 1px) {
|
|
13
|
+
margin-left: auto;
|
|
14
|
+
margin-right: auto;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&.centered {
|
|
19
|
+
margin-left: auto;
|
|
20
|
+
margin-right: auto;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.image {
|
|
24
|
+
width: 140px;
|
|
25
|
+
border: solid 1px $text-gray;
|
|
26
|
+
background-color: $white;
|
|
27
|
+
padding: 10px;
|
|
28
|
+
transform: rotate(-10deg);
|
|
29
|
+
|
|
30
|
+
img {
|
|
31
|
+
display: block;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&.single {
|
|
36
|
+
.image {
|
|
37
|
+
width: 170px;
|
|
38
|
+
margin-left: 40px;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&.double,
|
|
43
|
+
&.triple {
|
|
44
|
+
.image {
|
|
45
|
+
margin-left: 0;
|
|
46
|
+
|
|
47
|
+
&:last-child {
|
|
48
|
+
position: absolute;
|
|
49
|
+
top: 0;
|
|
50
|
+
right: 0;
|
|
51
|
+
transform: rotate(15deg);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
&.triple {
|
|
57
|
+
width: auto;
|
|
58
|
+
max-width: 360px;
|
|
59
|
+
|
|
60
|
+
.image {
|
|
61
|
+
&:first-child {
|
|
62
|
+
position: absolute;
|
|
63
|
+
top: 0;
|
|
64
|
+
left: 50%;
|
|
65
|
+
transform: translateX(-50%) rotate(2deg);
|
|
66
|
+
z-index: 1;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
@media (min-width: map-get($breakpoints, medium)) {
|
|
72
|
+
&.single {
|
|
73
|
+
width: 200px;
|
|
74
|
+
|
|
75
|
+
.image {
|
|
76
|
+
margin-left: 0;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
&.breathing-room {
|
|
81
|
+
margin-top: 20px;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
&.breathing-room:not(.centered) {
|
|
85
|
+
margin-left: 20px;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
@media (min-width: map-get($breakpoints, large)) {
|
|
90
|
+
margin-top: 0;
|
|
91
|
+
margin-bottom: 0;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
@@ -521,11 +521,23 @@ label {
|
|
|
521
521
|
margin-bottom: 0;
|
|
522
522
|
}
|
|
523
523
|
|
|
524
|
-
|
|
524
|
+
> .input-group {
|
|
525
525
|
margin-bottom: 0;
|
|
526
526
|
}
|
|
527
527
|
|
|
528
|
-
|
|
528
|
+
.clear-button {
|
|
529
|
+
position: absolute;
|
|
530
|
+
top: 0.625rem;
|
|
531
|
+
right: 0.625rem;
|
|
532
|
+
font-size: 1rem;
|
|
533
|
+
color: $text-gray;
|
|
534
|
+
background-color: $input-background-color;
|
|
535
|
+
border-radius: 50%;
|
|
536
|
+
width: 20px;
|
|
537
|
+
text-align: center;
|
|
538
|
+
}
|
|
539
|
+
|
|
540
|
+
&.no-margin {
|
|
529
541
|
margin-bottom: 0;
|
|
530
542
|
}
|
|
531
543
|
|
|
@@ -567,6 +579,11 @@ label {
|
|
|
567
579
|
font-size: 0.875rem;
|
|
568
580
|
line-height: 1.25;
|
|
569
581
|
}
|
|
582
|
+
|
|
583
|
+
.clear-button {
|
|
584
|
+
top: 5px;
|
|
585
|
+
right: 5px;
|
|
586
|
+
}
|
|
570
587
|
}
|
|
571
588
|
|
|
572
589
|
&.small {
|
|
@@ -615,6 +632,11 @@ label {
|
|
|
615
632
|
font-size: 0.875rem;
|
|
616
633
|
line-height: 1.25;
|
|
617
634
|
}
|
|
635
|
+
|
|
636
|
+
.clear-button {
|
|
637
|
+
top: 6px;
|
|
638
|
+
right: 3px;
|
|
639
|
+
}
|
|
618
640
|
}
|
|
619
641
|
|
|
620
642
|
&.large {
|
package/scss/styles.scss
CHANGED
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
<br />
|
|
21
21
|
<br v-if="address.CareOf" />{{ address.CareOf }}
|
|
22
22
|
<br v-if="address.ContactEmail" />{{ address.ContactEmail }}
|
|
23
|
-
<template v-if="address.PhoneNumber"><br /><i class="
|
|
23
|
+
<template v-if="address.PhoneNumber"><br /><i class="fa-solid fa-phone color-text-gray"></i> {{ formatPhone(address.PhoneNumber) }}</template>
|
|
24
24
|
</template>
|
|
25
25
|
</div>
|
|
26
26
|
</template>
|
|
@@ -49,6 +49,10 @@
|
|
|
49
49
|
type: Boolean,
|
|
50
50
|
default: false,
|
|
51
51
|
},
|
|
52
|
+
excludeName: {
|
|
53
|
+
type: Boolean,
|
|
54
|
+
default: false,
|
|
55
|
+
},
|
|
52
56
|
},
|
|
53
57
|
data: () => {
|
|
54
58
|
return {
|
|
@@ -63,7 +67,11 @@
|
|
|
63
67
|
},
|
|
64
68
|
computed: {
|
|
65
69
|
fullName() {
|
|
66
|
-
|
|
70
|
+
if (!this.excludeName) {
|
|
71
|
+
return (this.address.FirstName || '') + (this.address.FirstName && this.address.LastName ? ' ' : '') + (this.address.LastName || '');
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
return null;
|
|
67
75
|
},
|
|
68
76
|
}
|
|
69
77
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="input-container" :class="cssClass">
|
|
3
3
|
<input type="text" v-model="value" />
|
|
4
|
+
<a v-if="includeClear && value.length" class="clear-button" @click="clearInput"><i class="fi-x"></i></a>
|
|
4
5
|
</div>
|
|
5
6
|
</template>
|
|
6
7
|
<script>
|
|
@@ -10,6 +11,11 @@
|
|
|
10
11
|
name: 'DebouncedTextBox',
|
|
11
12
|
props: {
|
|
12
13
|
cssClass: String,
|
|
14
|
+
initialValue: String,
|
|
15
|
+
includeClear: {
|
|
16
|
+
type: Boolean,
|
|
17
|
+
default: false,
|
|
18
|
+
},
|
|
13
19
|
},
|
|
14
20
|
data: () => {
|
|
15
21
|
return {
|
|
@@ -22,6 +28,15 @@
|
|
|
22
28
|
this.debouncedValue = value;
|
|
23
29
|
this.$emit('change', value);
|
|
24
30
|
});
|
|
31
|
+
|
|
32
|
+
if (this.initialValue) {
|
|
33
|
+
this.value = this.initialValue;
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
methods: {
|
|
37
|
+
clearInput() {
|
|
38
|
+
this.value = '';
|
|
39
|
+
},
|
|
25
40
|
},
|
|
26
41
|
watch: {
|
|
27
42
|
value(newValue) {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<transition name="modal">
|
|
3
3
|
<div class="modal-mask hide-for-print" :class="maskCssClass" @click="closeIfCloseable">
|
|
4
4
|
<div class="modal-container" :class="cssClass">
|
|
5
|
-
<a v-if="closeable" class="close" @click="$emit('close')"><icon-
|
|
5
|
+
<a v-if="closeable" class="close" @click="$emit('close')"><icon-close" width="24" height="24" /></a>
|
|
6
6
|
<div class="modal-wrapper">
|
|
7
7
|
<div class="modal-grid" :class="{ 'with-footer': hasFooter }">
|
|
8
8
|
<div class="scrollable-content">
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
<slot name="body"></slot>
|
|
14
14
|
</div>
|
|
15
15
|
</div>
|
|
16
|
-
<div
|
|
16
|
+
<div v-if="$slots.footer" class="modal-footer">
|
|
17
17
|
<slot name="footer"></slot>
|
|
18
18
|
</div>
|
|
19
19
|
</div>
|
|
@@ -24,7 +24,6 @@
|
|
|
24
24
|
</template>
|
|
25
25
|
|
|
26
26
|
<script>
|
|
27
|
-
import IconBase from "./icons/IconBase.vue";
|
|
28
27
|
import IconClose from "./icons/IconClose.vue";
|
|
29
28
|
|
|
30
29
|
export default {
|
|
@@ -51,7 +50,6 @@
|
|
|
51
50
|
}
|
|
52
51
|
},
|
|
53
52
|
components: {
|
|
54
|
-
IconBase,
|
|
55
53
|
IconClose,
|
|
56
54
|
},
|
|
57
55
|
methods: {
|
|
@@ -61,10 +59,5 @@
|
|
|
61
59
|
}
|
|
62
60
|
}
|
|
63
61
|
},
|
|
64
|
-
computed: {
|
|
65
|
-
hasFooter() {
|
|
66
|
-
return !!this.$slots.footer;
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
62
|
}
|
|
70
63
|
</script>
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
</div>
|
|
9
9
|
</div>
|
|
10
10
|
<nav v-if="product || forceNav" class="image-nav">
|
|
11
|
-
<a v-if="showArrows" class="arrow rotate-90 show-for-medium" @click="previous" :disabled="carouselIndex === 0"><icon-
|
|
11
|
+
<a v-if="showArrows" class="arrow rotate-90 show-for-medium" @click="previous" :disabled="carouselIndex === 0"><icon-caret width="32" height="32" /></a>
|
|
12
12
|
<div class="image-nav-list" :class="imageListClass">
|
|
13
13
|
<a class="variant-image" :class="{ current: variantImageSelected }" @click="selectVariantImage" :style="shiftStyle">
|
|
14
14
|
<img :src="variantImagePath" alt="" />
|
|
@@ -22,12 +22,11 @@
|
|
|
22
22
|
</a>
|
|
23
23
|
</template>
|
|
24
24
|
</div>
|
|
25
|
-
<a v-if="showArrows" class="arrow rotate-270 show-for-medium" @click="next" :disabled="carouselIndex === carouselSlideCount"><icon-
|
|
25
|
+
<a v-if="showArrows" class="arrow rotate-270 show-for-medium" @click="next" :disabled="carouselIndex === carouselSlideCount"><icon-caret width="32" height="32" /></a>
|
|
26
26
|
</nav>
|
|
27
27
|
</div>
|
|
28
28
|
</template>
|
|
29
29
|
<script>
|
|
30
|
-
import IconBase from "./icons/IconBase.vue";
|
|
31
30
|
import IconCaret from "./icons/IconCaret.vue";
|
|
32
31
|
|
|
33
32
|
export default {
|
|
@@ -170,7 +169,6 @@
|
|
|
170
169
|
},
|
|
171
170
|
},
|
|
172
171
|
components: {
|
|
173
|
-
IconBase,
|
|
174
172
|
IconCaret,
|
|
175
173
|
}
|
|
176
174
|
};
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 42.76" class="icon">
|
|
3
|
+
<g>
|
|
4
|
+
<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"/>
|
|
5
|
+
<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"/>
|
|
6
|
+
</g>
|
|
7
|
+
</svg>
|
|
6
8
|
</template>
|
|
7
9
|
|
|
8
10
|
<script>
|
|
@@ -2,13 +2,11 @@
|
|
|
2
2
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
3
3
|
:width="width"
|
|
4
4
|
:height="height"
|
|
5
|
-
:
|
|
6
|
-
:aria-labelledby="iconName"
|
|
5
|
+
:aria-label="title"
|
|
7
6
|
role="presentation"
|
|
8
|
-
class="icon"
|
|
9
|
-
|
|
10
|
-
<
|
|
11
|
-
<slot></slot>
|
|
7
|
+
class="icon">
|
|
8
|
+
<title lang="en">{{ title }}</title>
|
|
9
|
+
<use :xlink:href="'#' + iconName"></use>
|
|
12
10
|
</svg>
|
|
13
11
|
</template>
|
|
14
12
|
|
|
@@ -18,7 +16,7 @@
|
|
|
18
16
|
title: String,
|
|
19
17
|
iconName: {
|
|
20
18
|
type: String,
|
|
21
|
-
default: '
|
|
19
|
+
default: 'icon-close',
|
|
22
20
|
},
|
|
23
21
|
width: {
|
|
24
22
|
type: [Number, String],
|
|
@@ -28,10 +26,6 @@
|
|
|
28
26
|
type: [Number, String],
|
|
29
27
|
default: 64,
|
|
30
28
|
},
|
|
31
|
-
viewbox: {
|
|
32
|
-
type: String,
|
|
33
|
-
default: '0 0 72 72',
|
|
34
|
-
},
|
|
35
29
|
},
|
|
36
30
|
}
|
|
37
31
|
</script>
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
2
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon">
|
|
3
|
+
<path fill="none" fill-rule="evenodd" class="stroke-target" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 10l6.119 6L18 10" />
|
|
4
|
+
</svg>
|
|
3
5
|
</template>
|
|
4
6
|
|
|
5
7
|
<script>
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon">
|
|
3
|
+
<g class="color-target" transform="translate(3 3.5)">
|
|
4
|
+
<rect width="20" height="3" x="-1" y="7" rx="1" transform="rotate(45 9 8.5)"/>
|
|
5
|
+
<rect width="20" height="3" x="-1" y="7" rx="1" transform="scale(-1 1) rotate(45 0 -13.228)"/>
|
|
6
|
+
</g>
|
|
7
|
+
</svg>
|
|
6
8
|
</template>
|
|
7
9
|
|
|
8
10
|
<script>
|