@mtvh/mtvh-design-system 0.0.32 → 0.0.33

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 (22) hide show
  1. package/assets/scss/components/_accordion.scss +66 -0
  2. package/assets/scss/components/_all.scss +2 -0
  3. package/assets/scss/components/_banner.scss +1 -1
  4. package/assets/scss/components/_button-circle.scss +2 -0
  5. package/assets/scss/components/_button.scss +5 -9
  6. package/assets/scss/components/_card-list.scss +19 -5
  7. package/assets/scss/components/_content-block.scss +13 -28
  8. package/assets/scss/components/_link.scss +3 -2
  9. package/assets/scss/components/_pagination.scss +1 -1
  10. package/assets/scss/components/_payment.scss +59 -0
  11. package/assets/scss/components/_space-selection.scss +2 -0
  12. package/assets/scss/components/_table.scss +46 -0
  13. package/assets/scss/config/_variables.scss +15 -0
  14. package/assets/scss/core/iconography/_icon.scss +4 -0
  15. package/assets/scss/core/typography/_typography.scss +7 -3
  16. package/assets/scss/forms/_search.scss +2 -1
  17. package/assets/scss/mixins/_butttons.scss +4 -6
  18. package/assets/scss/mixins/_form.scss +0 -7
  19. package/assets/scss/mixins/_style.scss +16 -0
  20. package/dist/js/app.min.js +1 -1
  21. package/dist/mtvh.min.css +2 -2
  22. package/package.json +1 -1
package/assets/scss/components/_accordion.scss ADDED
@@ -0,0 +1,66 @@
1
+ .accordion {
2
+ --#{$prefix}accordion-active-bg: var(--#{$prefix}white);
3
+ --#{$prefix}accordion-active-color: var(--#{$prefix}blue-04);
4
+ --#{$prefix}accordion-body-padding-x: #{$mtvh-spacing-7};
5
+ --#{$prefix}accordion-body-padding-y: #{$mtvh-spacing-6};
6
+ --#{$prefix}accordion-inner-border-radius: #{$border-radius-lg};
7
+
8
+ background-color: var(--#{$prefix}white);
9
+ padding: $mtvh-spacing-6 $mtvh-spacing-5;
10
+ border-radius: $border-radius-lg;
11
+ @include media-breakpoint-up(md) {
12
+ padding: $mtvh-spacing-6;
13
+ }
14
+
15
+ }
16
+
17
+ .accordion-button {
18
+ border-left: 0;
19
+ border-right: 0;
20
+ font-size: $font-size-sm;
21
+ font-weight: $mtvh-font-weight-bold;
22
+ font-family: $font-family-sans-serif;
23
+ &:not(.collapsed)
24
+ {
25
+ box-shadow: none;
26
+ }
27
+
28
+
29
+ &:focus {
30
+ @include focus-radius;
31
+ border-radius: $border-radius-lg;
32
+ }
33
+
34
+ &:after {
35
+ left: 0;
36
+ position: absolute;
37
+
38
+ }
39
+ padding-left: $mtvh-spacing-7;
40
+ }
41
+ .accordion-header {
42
+
43
+ &:hover {
44
+ background-color: var(--#{$prefix}grey-01);
45
+ .accordion-button {
46
+ background-color: var(--#{$prefix}grey-01);
47
+ }
48
+ }
49
+
50
+ padding-top:0;
51
+ padding-bottom: 0;
52
+ padding-left: 0;
53
+ padding-right: 0;
54
+ align-items: center;
55
+ }
56
+ .accordion-item {
57
+ border-left: 0;
58
+ border-right: 0;
59
+
60
+ }
61
+ .accordion-body {
62
+ padding-top: 0;
63
+ padding-right: 0;
64
+ border-right: 0;
65
+
66
+ }
package/assets/scss/components/_all.scss CHANGED
@@ -18,3 +18,5 @@
18
18
  @import "_good-to-know";
19
19
  @import "_collapse_button";
20
20
  @import "_agent-repair-location-list";
21
+ @import "_accordion";
22
+ @import "_table";
package/assets/scss/components/_banner.scss CHANGED
@@ -57,7 +57,7 @@
57
57
  &.alert {
58
58
  --#{$prefix}alert-margin-bottom: 0;
59
59
  &.p-0 {
60
- height: 44px;
60
+ height: $input-min-height;
61
61
  overflow: hidden;
62
62
  }
63
63
  }
package/assets/scss/components/_button-circle.scss CHANGED
@@ -1,4 +1,6 @@
1
1
  .btn-icon-circle {
2
+ --#{$prefix}icon-right-spacing: 0px;
3
+ --#{$prefix}icon-left-spacing: 0px;
2
4
  --#{$prefix}btn-close-focus-outline-color: var(
3
5
  --#{$prefix}primary-outline-color
4
6
  );
package/assets/scss/components/_button.scss CHANGED
@@ -129,22 +129,18 @@ $mtvh-buttons: (
129
129
  box-shadow: none;
130
130
 
131
131
  &:focus-visible {
132
- box-shadow: none;
133
- outline: solid var(--#{$prefix}btn-outline-border)
134
- var(--#{$prefix}btn-outline-color);
135
- outline-offset: var(--#{$prefix}btn-outline-border);
136
- border-radius: $btn-border-radius;
137
- text-decoration: none;
138
- }
139
- &:focus:not(:focus-visible) {
140
- outline: 0;
132
+ @include focus-radius;
141
133
  }
134
+
142
135
  &:hover {
143
136
  text-decoration: none;
144
137
  }
145
138
  }
146
139
 
147
140
  .mtvh-btn {
141
+ --#{$prefix}icon-right-spacing: #{$button-icon-spacing};
142
+ --#{$prefix}icon-left-spacing: 0;
143
+
148
144
  min-height: 2.5rem;
149
145
  min-width: var(--#{$prefix}btn-min-width);
150
146
  border-radius: $btn-border-radius;
package/assets/scss/components/_card-list.scss CHANGED
@@ -1,13 +1,14 @@
1
1
  .card-list {
2
2
  border-radius: $border-radius-lg;
3
3
  background-color: var(--#{$prefix}white);
4
+
4
5
  &-item {
5
6
 
6
7
  display: flex;
7
8
  flex-direction: row;
8
9
  flex-wrap: nowrap;
9
10
  align-items: center;
10
-
11
+
11
12
  border-bottom: 1px solid var(--#{$prefix}grey-03);
12
13
  padding-top: $mtvh-spacing-4;
13
14
  padding-bottom: $mtvh-spacing-5;
@@ -20,6 +21,16 @@
20
21
  padding-top: $mtvh-spacing-5;
21
22
  }
22
23
 
24
+ .credit-card-form & {
25
+
26
+ margin-left: 0;
27
+ margin-right: 0;
28
+
29
+ &:first-child {
30
+ border-top: 1px solid var(--#{$prefix}grey-03);
31
+ }
32
+ }
33
+
23
34
  &:has(.label) {
24
35
  &:last-child {
25
36
  border-bottom: none;
@@ -43,12 +54,14 @@
43
54
 
44
55
  div {
45
56
  flex-wrap: nowrap;
46
- @include media-breakpoint-up(lg) {
47
- flex-wrap: nowrap;
48
- }
57
+ }
58
+
59
+ .form-check-input, span {
60
+ margin-right: $mtvh-spacing-5;
49
61
  }
50
62
 
51
63
  span {
64
+ --#{$prefix}icon-right-spacing: #{$mtvh-spacing-5};
52
65
  display: block;
53
66
  align-self: center;
54
67
  font-size: $font-size-xs;
@@ -71,8 +84,9 @@
71
84
  align-self: flex-start;
72
85
  }
73
86
 
74
- .invali-feedback {
87
+ .invalid-feedback {
75
88
  flex-basis: 100%;
89
+ padding-top: $mtvh-spacing-4;
76
90
  }
77
91
  }
78
92
  }
package/assets/scss/components/_content-block.scss CHANGED
@@ -6,10 +6,17 @@
6
6
  padding: $mtvh-spacing-6 $mtvh-spacing-6 $mtvh-spacing-5 $mtvh-spacing-6;
7
7
  }
8
8
 
9
- &:last-of-type {
10
- .mtvh-link {
11
- padding-bottom: 0;
12
- }
9
+ p {
10
+ margin-bottom: $mtvh-spacing-3;
11
+ }
12
+ .large {
13
+ margin-bottom: map-get($spacers,2);
14
+ }
15
+ .mtvh-link, .mtvh-btn {
16
+ margin-top: $mtvh-spacing-3;
17
+ }
18
+ .mtvh-btn {
19
+ margin-bottom: $mtvh-spacing-3;
13
20
  }
14
21
 
15
22
  &__date {
@@ -93,25 +100,6 @@
93
100
  font-size: $mtvh-base-font-size;
94
101
  }
95
102
  }
96
- .mtvh-btn,
97
- p {
98
- &:last-child {
99
- margin-bottom: 0;
100
- }
101
- }
102
-
103
- h3,
104
- .mtvh-h3 {
105
- + .mtvh-btn {
106
- margin-top: 0.625rem;
107
- }
108
- }
109
- h4,
110
- .mtvh-h4 {
111
- + .mtvh-btn {
112
- margin-top: 0.625rem;
113
- }
114
- }
115
103
 
116
104
  &-no-padding {
117
105
  padding: 0;
@@ -129,6 +117,8 @@
129
117
  }
130
118
 
131
119
  &-icon {
120
+
121
+ --#{$prefix}icon-right-spacing: #{$button-icon-spacing};
132
122
  &:not(.mtvh-content-block-link-card) {
133
123
  padding: $mtvh-spacing-5;
134
124
  @include media-breakpoint-up(md) {
@@ -142,11 +132,6 @@
142
132
  display: block;
143
133
  }
144
134
 
145
- h3:has(+ p + p),
146
- h3:has(+ p + p + p),
147
- h3:has(+ div) {
148
- margin-bottom: $mtvh-spacing-5;
149
- }
150
135
  }
151
136
 
152
137
  &-container {
package/assets/scss/components/_link.scss CHANGED
@@ -85,10 +85,11 @@ $mtvh-links: (
85
85
  }
86
86
  }
87
87
  }
88
+
88
89
  &:before {
89
- margin-right: $link-icon-spacing !important;
90
+ --#{$prefix}icon-right-spacing: #{$link-icon-spacing};
90
91
  }
91
92
  &:after {
92
- margin-left: $link-icon-spacing !important;
93
+ --#{$prefix}icon-left-spacing: #{$link-icon-spacing};
93
94
  }
94
95
  }
package/assets/scss/components/_pagination.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  .pagination {
2
- $size: 44px;
2
+ $size: $input-min-height;
3
3
  margin: 0;
4
4
 
5
5
  @include media-breakpoint-down("lg") {
package/assets/scss/components/_payment.scss CHANGED
@@ -0,0 +1,59 @@
1
+ .payment-supported {
2
+
3
+ text-align: center;
4
+ font-size: $font-size-xs;
5
+ color: var(--#{$prefix}grey-06);
6
+ border-top:1px solid var(--#{$prefix}grey-04);
7
+
8
+ margin-top: $mtvh-spacing-4;
9
+ margin-bottom: $mtvh-spacing-5;
10
+
11
+ @include media-breakpoint-up(md) {
12
+ text-align: left;
13
+ display: flex;
14
+ align-items: center;
15
+ padding-top: $mtvh-spacing-3;
16
+ padding-bottom: $mtvh-spacing-5;
17
+ margin: 0;
18
+ }
19
+
20
+ &-text {
21
+ padding-top: $mtvh-spacing-4;
22
+ padding-bottom: $mtvh-spacing-3;
23
+ display: block;
24
+
25
+ @include media-breakpoint-up(md) {
26
+ padding-top: $mtvh-spacing-3;
27
+ padding-bottom: $mtvh-spacing-5;
28
+ margin-right: $mtvh-spacing-6;
29
+ }
30
+
31
+ }
32
+ &-icons {
33
+ display: flex;
34
+ justify-content: center;
35
+ align-items: center;
36
+ flex-wrap: nowrap;
37
+ margin-bottom: $mtvh-spacing-6;
38
+
39
+ span {
40
+ &:last-child {
41
+ margin-right: $mtvh-spacing-3;
42
+ }
43
+ }
44
+ @include media-breakpoint-up(md) {
45
+ margin: 0;
46
+ }
47
+ }
48
+ }
49
+
50
+ .payment-info {
51
+ padding: $mtvh-spacing-4 $mtvh-spacing-5;
52
+ border-radius: $border-radius-lg;
53
+ background-color: var(--#{$prefix}grey-01);
54
+ font-size: $font-size-xs;
55
+ @include media-breakpoint-up(md) {
56
+ font-size: $font-size-sm;
57
+ padding: $mtvh-spacing-5 $mtvh-spacing-6;
58
+ }
59
+ }
package/assets/scss/components/_space-selection.scss CHANGED
@@ -1,4 +1,6 @@
1
1
  fieldset.space-selection {
2
+ --#{$prefix}icon-right-spacing: #{$button-icon-spacing};
3
+
2
4
  input {
3
5
  @extend .btn-check;
4
6
  }
package/assets/scss/components/_table.scss ADDED
@@ -0,0 +1,46 @@
1
+ .table-sticky {
2
+
3
+ @include media-breakpoint-down("sm") {
4
+ th:first-child, td:first-child {
5
+ &:after {
6
+ background: var(--#{$prefix}white);
7
+ content: "";
8
+ inset: 0;
9
+ position: absolute;
10
+ z-index: -1;
11
+ }
12
+ }
13
+ th:first-child, td:first-child {
14
+ &:before {
15
+ background: linear-gradient(54deg, #000, #d9d9d9 0);
16
+ border-radius: inherit;
17
+ bottom: 0;
18
+ content: "";
19
+ filter: blur(10px);
20
+ opacity: .8;
21
+ position: absolute;
22
+ right: -8px;
23
+ top: 0;
24
+ width: 18px;
25
+ z-index: -1;
26
+ }
27
+ }
28
+ }
29
+ thead {
30
+ border-color: black;
31
+ }
32
+ th,td {
33
+ &:first-child,
34
+ {
35
+ background: inherit;
36
+ left: 0;
37
+ position: sticky;
38
+ z-index: 3;
39
+ min-width: 45px;
40
+ }
41
+
42
+ @include media-breakpoint-down("sm") {
43
+ text-wrap: nowrap;
44
+ }
45
+ }
46
+ }
package/assets/scss/config/_variables.scss CHANGED
@@ -162,6 +162,7 @@ $form-feedback-font-size: $font-size-sm;
162
162
  $form-feedback-invalid-color: $danger;
163
163
 
164
164
  $form-feedback-margin-top: $mtvh-spacing-4;
165
+ $input-min-height: 2.75rem;
165
166
  $input-line-height: 1.5;
166
167
  $input-font-size: $font-size-sm;
167
168
  $input-padding-y: $mtvh-spacing-4;
@@ -390,3 +391,17 @@ $pagination-font-size: $font-size-sm;
390
391
  $pagination-focus-box-shadow: unset;
391
392
  $pagination-border-width: 0;
392
393
  $pagination-bg: transparent;
394
+
395
+ /* Accordion */
396
+ $accordion-button-icon: url("data:image/svg+xml,<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.8399 10.9658C14.1412 10.6644 14.4979 10.5549 15.0753 10.7285C15.6526 10.902 16.0347 11.1793 15.9975 11.6653C15.9604 12.1512 14.274 14.1401 13.6771 14.8836C13.0803 15.6271 12.1466 16.964 11.7111 17.7018C11.2755 18.4396 10.9292 19.0333 10.4145 18.9985C9.89987 18.9638 9.41959 18.8397 8.70831 17.9484C7.99703 17.057 4.42288 12.3984 4.09421 12.0311C3.76554 11.6638 4.36995 11.105 4.78537 11.0375C5.2008 10.9701 5.65431 10.6722 6.03656 11.1874C6.4188 11.7026 8.99375 14.7047 8.99375 14.7047C8.99375 14.7047 8.85766 13.9341 8.79465 12.3944C8.70391 10.1772 8.62477 9.40462 8.64694 7.62401C8.66911 5.8434 8.81999 3.02738 8.95 2.25625C9.08001 1.48512 9.20018 0.705523 9.94859 1.11094C10.697 1.51636 10.9968 2.57194 11.0479 3.82131C11.0991 5.07067 11.0662 7.05431 11.1211 9.32562C11.1803 11.9316 11.275 14.2456 11.275 14.2456C11.275 14.2456 12.0687 13.2044 12.6086 12.4629C13.1485 11.7214 13.5028 11.3212 13.8498 10.9742L13.8399 10.9658Z' fill='%230072BF'/></svg>");
397
+ $accordion-button-active-icon: url("data:image/svg+xml,<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.8399 10.9658C14.1412 10.6644 14.4979 10.5549 15.0753 10.7285C15.6526 10.902 16.0347 11.1793 15.9975 11.6653C15.9604 12.1512 14.274 14.1401 13.6771 14.8836C13.0803 15.6271 12.1466 16.964 11.7111 17.7018C11.2755 18.4396 10.9292 19.0333 10.4145 18.9985C9.89987 18.9638 9.41959 18.8397 8.70831 17.9484C7.99703 17.057 4.42288 12.3984 4.09421 12.0311C3.76554 11.6638 4.36995 11.105 4.78537 11.0375C5.2008 10.9701 5.65431 10.6722 6.03656 11.1874C6.4188 11.7026 8.99375 14.7047 8.99375 14.7047C8.99375 14.7047 8.85766 13.9341 8.79465 12.3944C8.70391 10.1772 8.62477 9.40462 8.64694 7.62401C8.66911 5.8434 8.81999 3.02738 8.95 2.25625C9.08001 1.48512 9.20018 0.705523 9.94859 1.11094C10.697 1.51636 10.9968 2.57194 11.0479 3.82131C11.0991 5.07067 11.0662 7.05431 11.1211 9.32562C11.1803 11.9316 11.275 14.2456 11.275 14.2456C11.275 14.2456 12.0687 13.2044 12.6086 12.4629C13.1485 11.7214 13.5028 11.3212 13.8498 10.9742L13.8399 10.9658Z' fill='%230072BF'/></svg>");
398
+ $accordion-btn-focus-box-shadow: 0;
399
+ $accordion-border-radius: 0;
400
+ $accordion-active-color: var(--#{$prefix}white);
401
+ $accordion-bg: var(--#{$prefix}white);
402
+ $accordion-button-color: var(--#{$prefix}blue-04);
403
+ $accordion-padding-y: $mtvh-spacing-6;
404
+ $accordion-padding-x: 0;
405
+ $accordion-body-padding-x: $mtvh-spacing-7;
406
+ $accordion-body-padding-y: $mtvh-spacing-6;
407
+ $accordion-border-color: var(--#{$prefix}grey-04);
package/assets/scss/core/iconography/_icon.scss CHANGED
@@ -1,3 +1,7 @@
1
+ .mtvh-icon--right {
2
+ --#{$prefix}icon-right-spacing: 0px;
3
+ --#{$prefix}icon-left-spacing: #{$button-icon-spacing};
4
+ }
1
5
  .mtvh-icon {
2
6
  @each $mtvh-icon, $property-map in $mtvh-icons {
3
7
  &-#{$mtvh-icon} {
package/assets/scss/core/typography/_typography.scss CHANGED
@@ -9,7 +9,7 @@ h5,
9
9
  h6,
10
10
  .mtvh-h1,
11
11
  mtvh-child-title-h1,
12
- mtvh-title-h1 .mtvh-h2,
12
+ mtvh-title-h1, .mtvh-h2,
13
13
  .mtvh-h3,
14
14
  .mtvh-h4,
15
15
  .mtvh-h5,
@@ -114,9 +114,13 @@ p {
114
114
  font-size: 1.375rem;
115
115
  line-height: 1.4;
116
116
  }
117
-
117
+ .large {
118
+ font-size: 1.625rem;
119
+ line-height: 1.3;
120
+ font-weight: $mtvh-font-weight-bolder;
121
+ font-family: $font-family-sans-serif;
122
+ }
118
123
  .small {
119
- margin-bottom: 0.75rem;
120
124
  font-size: 1rem;
121
125
  line-height: 1.5;
122
126
  }
package/assets/scss/forms/_search.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  .input-group-search {
2
2
 
3
- $height: 44px;
3
+ $height: $input-min-height;
4
4
  $button-size: $icon-size-scale-lg;
5
5
  display: flex;
6
6
  align-items: center;
@@ -22,6 +22,7 @@
22
22
 
23
23
  .mtvh-icon {
24
24
  position: relative;
25
+ margin: 0;
25
26
  &:before {
26
27
  background-color: var(--mtvh-black) !important;
27
28
  }
package/assets/scss/mixins/_butttons.scss CHANGED
@@ -31,7 +31,7 @@
31
31
  }
32
32
 
33
33
  @mixin icon-transform($direction) {
34
- //default is a right
34
+
35
35
  -webkit-mask-repeat: no-repeat;
36
36
  mask-repeat: no-repeat;
37
37
  content: " ";
@@ -40,11 +40,9 @@
40
40
  vertical-align: middle;
41
41
  background-repeat: no-repeat;
42
42
  margin-top: -0.125rem;
43
- @if $direction == "right" {
44
- margin-left: $button-icon-spacing;
45
- } @else {
46
- margin-right: $button-icon-spacing;
47
- }
43
+ margin-left: var(--#{$prefix}icon-left-spacing);
44
+ margin-right: var(--#{$prefix}icon-right-spacing);
45
+
48
46
  }
49
47
 
50
48
  @mixin button-circle($size: 44px, $padding-x: 0,$padding-y: 0, $hover-bg: rgba(0, 0, 0, 0.08), $active-bg: rgba(0, 0, 0, 0.16)) {
package/assets/scss/mixins/_form.scss CHANGED
@@ -38,10 +38,3 @@
38
38
  @include focus-style();
39
39
  }
40
40
  }
41
- @mixin focus-style() {
42
- box-shadow: none;
43
- outline: solid var(--#{$prefix}btn-outline-border)
44
- var(--#{$prefix}primary-outline-color);
45
- outline-offset: var(--#{$prefix}btn-outline-border);
46
- color: inherit;
47
- }
package/assets/scss/mixins/_style.scss CHANGED
@@ -8,3 +8,19 @@
8
8
  color: var(--#{$prefix}stepper-font-color);
9
9
  }
10
10
  }
11
+ @mixin focus-style() {
12
+ box-shadow: none;
13
+ outline: solid var(--#{$prefix}btn-outline-border)
14
+ var(--#{$prefix}primary-outline-color);
15
+ outline-offset: var(--#{$prefix}btn-outline-border);
16
+ color: inherit;
17
+ }
18
+
19
+ @mixin focus-radius(){
20
+ box-shadow: none;
21
+ outline: solid var(--#{$prefix}btn-outline-border)
22
+ var(--#{$prefix}btn-outline-color);
23
+ outline-offset: var(--#{$prefix}btn-outline-border);
24
+ border-radius: $btn-border-radius;
25
+ text-decoration: none;
26
+ }