@mirweb/mir-web-components 2.1.0 → 2.1.2

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.
Files changed (18) hide show
  1. package/dist/components/blocks/card-display/card-display.vue +4 -4
  2. package/dist/components/blocks/facts/facts.vue +2 -2
  3. package/dist/components/blocks/features/features.vue +5 -5
  4. package/dist/components/blocks/form-script/form-script.vue +11 -14
  5. package/dist/components/blocks/headline/headline.vue +4 -4
  6. package/dist/components/blocks/hero/hero.vue +1 -1
  7. package/dist/components/blocks/image-gallery/image-gallery.vue +4 -5
  8. package/dist/components/blocks/micro-stories/micro-stories.vue +4 -5
  9. package/dist/components/blocks/pallet-jack/pallet-jack.vue +2 -2
  10. package/dist/components/blocks/policy/policy.vue +2 -2
  11. package/dist/components/blocks/product-hero/product-hero.vue +2 -2
  12. package/dist/components/blocks/promo/promo.vue +2 -14
  13. package/dist/components/blocks/rich-text/rich-text-columns.vue +4 -2
  14. package/dist/components/blocks/rich-text/rich-text.vue +3 -3
  15. package/dist/components/organisms/filter/filter.vue +1 -0
  16. package/dist/components/organisms/footer/footer.vue +0 -1
  17. package/dist/components/organisms/header/header.vue +2 -0
  18. package/package.json +1 -1
package/dist/components/blocks/card-display/card-display.vue CHANGED
@@ -66,7 +66,7 @@ defineProps({
66
66
  &-display {
67
67
  width: 100%;
68
68
  &--blue {
69
- background-color: $blue-100;
69
+ background-color: $blue-000;
70
70
 
71
71
  :deep(video) {
72
72
  outline: 4px solid transparent;
@@ -85,13 +85,13 @@ defineProps({
85
85
  }
86
86
  }
87
87
  &__wrapper {
88
- padding: $padding-mobile;
88
+ padding: 60px 30px;
89
89
  max-width: $max-width;
90
90
  margin: auto;
91
91
 
92
92
  &--block {
93
93
  @include md {
94
- padding: $padding-desktop;
94
+ padding: 60px 0px;
95
95
  }
96
96
  }
97
97
 
@@ -108,7 +108,7 @@ defineProps({
108
108
 
109
109
  h2,
110
110
  p {
111
- margin-bottom: 25px;
111
+ padding-bottom: 30px;
112
112
  }
113
113
  }
114
114
 
package/dist/components/blocks/facts/facts.vue CHANGED
@@ -78,10 +78,10 @@ withDefaults(defineProps<Props>(), {
78
78
  &__content {
79
79
  max-width: $max-width;
80
80
  margin: 0 auto;
81
- padding: $padding-mobile;
81
+ padding: 60px 30px;
82
82
 
83
83
  @include md {
84
- padding: $padding-desktop;
84
+ padding: 60px 00px;
85
85
  }
86
86
  }
87
87
 
package/dist/components/blocks/features/features.vue CHANGED
@@ -82,19 +82,19 @@ withDefaults(defineProps<Props>(), {
82
82
  margin: 0 auto;
83
83
  display: flex;
84
84
  flex-direction: column;
85
- padding: $padding-mobile;
85
+ padding: 60px 30px;
86
86
 
87
87
  @include md {
88
- padding: $padding-desktop;
88
+ padding: 60px 0px;
89
89
  }
90
90
  }
91
91
 
92
92
  &__wrapper {
93
93
  width: 100%;
94
- background-color: $blue-100;
95
- margin: $extra-margin-mobile-bg;
94
+ background-color: $blue-000;
95
+ //margin: $extra-margin-mobile-bg;
96
96
  @include md {
97
- margin: $extra-margin-desktop-bg;
97
+ //margin: $extra-margin-desktop-bg;
98
98
  }
99
99
  }
100
100
 
package/dist/components/blocks/form-script/form-script.vue CHANGED
@@ -8,16 +8,7 @@
8
8
  <div class="form__body">
9
9
  <slot name="form-body" />
10
10
  </div>
11
- <atom-link
12
- v-if="linkType === 'link'"
13
- :link-type="
14
- variant === 'dark'
15
- ? 'regular_dark'
16
- : variant === 'light'
17
- ? 'regular_light'
18
- : 'regular_light'
19
- "
20
- arrow
11
+ <atom-link v-if="linkType === 'link'" :link-type="'regular_light'" arrow
21
12
  ><slot name="form-link"></slot
22
13
  ></atom-link>
23
14
  </div>
@@ -33,9 +24,8 @@ import { computed } from "vue";
33
24
  import AtomLink from "../../atoms/link/link.vue";
34
25
 
35
26
  const VARIANTS = {
36
- dark: "form__wrapper--dark",
37
27
  light: "form__wrapper--light",
38
- default: "form__wrapper--default",
28
+ white: "form__wrapper--white",
39
29
  } as const;
40
30
 
41
31
  type Variant = keyof typeof VARIANTS;
@@ -50,7 +40,7 @@ export type Props = {
50
40
  const props = withDefaults(defineProps<Props>(), {
51
41
  headline: "",
52
42
  linkText: "",
53
- variant: "default",
43
+ variant: "light",
54
44
  linkType: "link",
55
45
  });
56
46
 
@@ -63,12 +53,19 @@ const selectedVariant = computed(() => VARIANTS[props.variant]);
63
53
  .form {
64
54
  &__wrapper {
65
55
  width: 100%;
66
- background-color: $blue-000;
67
56
  padding: 60px 30px;
68
57
 
69
58
  @include md {
70
59
  padding: 60px 0;
71
60
  }
61
+
62
+ &--light {
63
+ background-color: $blue-000;
64
+ }
65
+
66
+ &--white {
67
+ background-color: $white;
68
+ }
72
69
  }
73
70
 
74
71
  &__content {
package/dist/components/blocks/headline/headline.vue CHANGED
@@ -43,10 +43,10 @@ defineProps({
43
43
  &--default {
44
44
  max-width: $max-width;
45
45
  margin: 30px auto 0 auto;
46
- padding: 60px 30px 30px 30px;
46
+ padding: 60px 30px 0px 30px;
47
47
 
48
48
  @include md {
49
- padding: 60px 0px 30px 0px;
49
+ padding: 60px 0px 0px 0px;
50
50
  }
51
51
  }
52
52
 
@@ -61,10 +61,10 @@ defineProps({
61
61
  }
62
62
 
63
63
  &--submenu {
64
- padding: 132px 30px 30px 30px;
64
+ padding: 132px 30px 00px 30px;
65
65
 
66
66
  @include md {
67
- padding: 132px 0px 30px 0px;
67
+ padding: 132px 0px 00px 0px;
68
68
  }
69
69
  }
70
70
 
package/dist/components/blocks/hero/hero.vue CHANGED
@@ -49,7 +49,7 @@ defineProps({
49
49
  justify-content: center;
50
50
  margin-bottom: 30px;
51
51
  @include md {
52
- margin-bottom: 60px;
52
+ margin-bottom: 0px;
53
53
  }
54
54
  }
55
55
 
package/dist/components/blocks/image-gallery/image-gallery.vue CHANGED
@@ -135,16 +135,15 @@ const selectedBgColor = computed(() => BGCOLORS[props.bgColor]);
135
135
  .gallery {
136
136
  &__wrapper {
137
137
  width: 100%;
138
- padding: $padding-mobile;
139
- margin: $extra-margin-mobile-bg;
138
+ padding: 60px 30px;
139
+
140
140
  background-color: $white;
141
141
  @include md {
142
- padding: $padding-desktop;
143
- margin: $extra-margin-desktop-bg;
142
+ padding: 60px 0;
144
143
  }
145
144
 
146
145
  &--light {
147
- background-color: $blue-100;
146
+ background-color: $blue-000;
148
147
  }
149
148
 
150
149
  &--dark {
package/dist/components/blocks/micro-stories/micro-stories.vue CHANGED
@@ -47,11 +47,10 @@ const props = withDefaults(defineProps<Props>(), {
47
47
  .micro-stories {
48
48
  &__wrapper {
49
49
  width: 100%;
50
- padding: $padding-mobile;
51
- margin: $extra-margin-mobile-bg;
50
+ padding: 60px 30px;
51
+
52
52
  @include md {
53
- padding: $padding-desktop;
54
- margin: $extra-margin-desktop-bg;
53
+ padding: 60px 0px;
55
54
  }
56
55
 
57
56
  &--white {
@@ -308,7 +307,7 @@ const props = withDefaults(defineProps<Props>(), {
308
307
  }
309
308
 
310
309
  .micro-stories__body {
311
- margin-bottom: 60px;
310
+ margin-bottom: 30px;
312
311
  max-width: 579px;
313
312
  }
314
313
  }
package/dist/components/blocks/pallet-jack/pallet-jack.vue CHANGED
@@ -129,12 +129,12 @@ const selectedVariant = computed(() => VARIANTS[props.variant]);
129
129
  }
130
130
 
131
131
  &--default {
132
- padding: 0px 0px 30px;
132
+ padding: 0px 0px 60px 0px;
133
133
  max-width: 984px;
134
134
  margin: auto;
135
135
 
136
136
  @include sm {
137
- padding: 0px 0px;
137
+ padding: 0px 0px 60px 0px;
138
138
  }
139
139
  }
140
140
 
package/dist/components/blocks/policy/policy.vue CHANGED
@@ -14,12 +14,12 @@
14
14
  &__wrapper {
15
15
  max-width: 984px;
16
16
  margin: 0 auto;
17
- padding: 30px 30px;
17
+ padding: 60px 30px;
18
18
  :deep(img) {
19
19
  width: 100%;
20
20
  }
21
21
  @include md {
22
- padding: 30px 0px;
22
+ padding: 60px 0px;
23
23
  }
24
24
  }
25
25
 
package/dist/components/blocks/product-hero/product-hero.vue CHANGED
@@ -90,10 +90,10 @@ defineProps({
90
90
  &__content {
91
91
  max-width: 984px;
92
92
  margin: 0 auto;
93
- padding: $padding-mobile;
93
+ padding: 60px 30px 0 30px;
94
94
 
95
95
  @include md {
96
- padding: $padding-desktop;
96
+ padding: 60px 0 0 0;
97
97
  }
98
98
  }
99
99
 
package/dist/components/blocks/promo/promo.vue CHANGED
@@ -140,6 +140,7 @@ const selectedVariant = computed(() => VARIANTS[props.variant]);
140
140
  display: flex;
141
141
  flex-direction: row;
142
142
  justify-content: center;
143
+ padding: 60px 0px;
143
144
 
144
145
  :deep(video) {
145
146
  outline: 4px solid $white;
@@ -154,12 +155,7 @@ const selectedVariant = computed(() => VARIANTS[props.variant]);
154
155
 
155
156
  &--dark {
156
157
  background-color: $blue-900;
157
- margin: 30px 0px;
158
158
 
159
- @include sm {
160
- padding: 60px 0px;
161
- margin: 60px 0px;
162
- }
163
159
  :deep(video) {
164
160
  outline: 4px solid $blue-900;
165
161
  outline-offset: -4px;
@@ -167,21 +163,14 @@ const selectedVariant = computed(() => VARIANTS[props.variant]);
167
163
  }
168
164
  &--light {
169
165
  background-color: $blue-000;
170
- margin: 30px 0px;
171
166
 
172
- @include sm {
173
- padding: 60px 0px;
174
- margin: 60px 0px;
175
- }
176
167
  :deep(video) {
177
168
  outline: 4px solid $blue-000;
178
169
  outline-offset: -4px;
179
170
  }
180
171
  }
181
172
  &--default {
182
- @include sm {
183
- padding: 60px 0px;
184
- }
173
+ padding: 60px 0px;
185
174
  }
186
175
 
187
176
  &--teaser {
@@ -198,7 +187,6 @@ const selectedVariant = computed(() => VARIANTS[props.variant]);
198
187
  @include sm {
199
188
  grid-template-columns: fit-content(repeat(2, 1fr auto));
200
189
  grid-template-rows: 1fr;
201
- padding-bottom: 30px;
202
190
  }
203
191
 
204
192
  @include md {
package/dist/components/blocks/rich-text/rich-text-columns.vue CHANGED
@@ -25,13 +25,15 @@
25
25
 
26
26
  &__wrapper {
27
27
  max-width: $max-width;
28
+ padding: 0 30px 30px 30px;
28
29
  margin: 0 auto;
29
- padding: 0 30px 30px;
30
+ margin-top: -30px;
30
31
  :deep(img) {
31
32
  width: 100%;
32
33
  }
33
34
  @include md {
34
- padding: 0 0 30px 0px;
35
+ padding: 0 0 30px 0;
36
+ margin-top: -30px;
35
37
  }
36
38
  }
37
39
 
package/dist/components/blocks/rich-text/rich-text.vue CHANGED
@@ -94,7 +94,7 @@ withDefaults(defineProps<Props>(), {
94
94
  width: 100%;
95
95
 
96
96
  &--blue {
97
- background-color: $blue-100;
97
+ background-color: $blue-000;
98
98
  }
99
99
 
100
100
  &--white {
@@ -104,12 +104,12 @@ withDefaults(defineProps<Props>(), {
104
104
  &__wrapper {
105
105
  max-width: $max-width;
106
106
  margin: 0 auto;
107
- padding: 30px 30px;
107
+ padding: 60px 30px;
108
108
  :deep(img) {
109
109
  width: 100%;
110
110
  }
111
111
  @include md {
112
- padding: 30px 0px;
112
+ padding: 60px 0px;
113
113
  }
114
114
 
115
115
  :deep(.label__wrapper) {
package/dist/components/organisms/filter/filter.vue CHANGED
@@ -39,6 +39,7 @@ defineProps({
39
39
  &__wrapper {
40
40
  width: 100%;
41
41
  padding: 0px 30px;
42
+ margin-top: -30px;
42
43
 
43
44
  @include md {
44
45
  padding: 0px;
package/dist/components/organisms/footer/footer.vue CHANGED
@@ -159,7 +159,6 @@ defineEmits(["changeRegionClicked"]);
159
159
  &__wrapper {
160
160
  width: 100%;
161
161
  background-color: $blue-100;
162
- margin-top: 60px;
163
162
  }
164
163
 
165
164
  &__content {
package/dist/components/organisms/header/header.vue CHANGED
@@ -503,6 +503,8 @@ defineExpose({
503
503
  }
504
504
 
505
505
  .profile-dropdown-wrapper {
506
+ display: flex;
507
+ align-items: center;
506
508
  .profile-dropdown-sign-in {
507
509
  width: 72px;
508
510
  font-family: $font-opensans;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mirweb/mir-web-components",
3
3
  "private": false,
4
- "version": "2.1.0",
4
+ "version": "2.1.2",
5
5
  "type": "module",
6
6
  "files": [
7
7
  "dist"