@iamproperty/components 2.7.7 → 2.9.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.
Files changed (138) hide show
  1. package/README.md +136 -136
  2. package/assets/css/core.min.css +1 -1
  3. package/assets/css/core.min.css.map +1 -1
  4. package/assets/css/email.min.css +1 -1
  5. package/assets/css/email.min.css.map +1 -1
  6. package/assets/css/error.min.css +1 -1
  7. package/assets/css/error.min.css.map +1 -1
  8. package/assets/css/style.min.css +1 -1
  9. package/assets/css/style.min.css.map +1 -1
  10. package/assets/js/modules/accordion.js +32 -36
  11. package/assets/js/modules/alert.js +56 -56
  12. package/assets/js/modules/carousel.js +101 -101
  13. package/assets/js/modules/chart.js +216 -216
  14. package/assets/js/modules/drawer.js +15 -15
  15. package/assets/js/modules/form.js +158 -158
  16. package/assets/js/modules/helpers.js +119 -97
  17. package/assets/js/modules/modal.js +89 -89
  18. package/assets/js/modules/nav.js +26 -26
  19. package/assets/js/modules/table.js +584 -584
  20. package/assets/js/modules/testimonial.js +82 -82
  21. package/assets/js/modules/youtubevideo.js +145 -145
  22. package/assets/js/scripts.bundle.js +174 -85
  23. package/assets/js/scripts.bundle.js.map +1 -1
  24. package/assets/js/scripts.bundle.min.js +2 -2
  25. package/assets/js/scripts.bundle.min.js.map +1 -1
  26. package/assets/sass/_components.scss +14 -14
  27. package/assets/sass/_corefiles.scss +40 -40
  28. package/assets/sass/_fonts.scss +16 -16
  29. package/assets/sass/_forms.scss +9 -9
  30. package/assets/sass/_func.scss +12 -10
  31. package/assets/sass/_functions/functions.scss +141 -141
  32. package/assets/sass/_functions/mixins.scss +170 -170
  33. package/assets/sass/_functions/utilities.scss +250 -250
  34. package/assets/sass/_functions/variables.scss +466 -462
  35. package/assets/sass/_print.scss +61 -61
  36. package/assets/sass/components/accordion.scss +197 -197
  37. package/assets/sass/components/alert.scss +98 -98
  38. package/assets/sass/components/cardDeck.scss +107 -107
  39. package/assets/sass/components/carousel.scss +234 -234
  40. package/assets/sass/components/charts.scss +569 -569
  41. package/assets/sass/components/drawer.scss +46 -46
  42. package/assets/sass/components/header.scss +63 -63
  43. package/assets/sass/components/modal.scss +136 -136
  44. package/assets/sass/components/nav.scss +916 -820
  45. package/assets/sass/components/property-searchbar.scss +143 -143
  46. package/assets/sass/components/snapshot.scss +70 -70
  47. package/assets/sass/components/stepper.scss +164 -164
  48. package/assets/sass/components/tabs.scss +87 -74
  49. package/assets/sass/components/testimonial.scss +132 -132
  50. package/assets/sass/components/timeline.scss +95 -95
  51. package/assets/sass/core.scss +6 -6
  52. package/assets/sass/elements/buttons.scss +209 -209
  53. package/assets/sass/elements/card.scss +177 -177
  54. package/assets/sass/elements/container.scss +225 -225
  55. package/assets/sass/elements/forms.scss +194 -194
  56. package/assets/sass/elements/links.scss +96 -96
  57. package/assets/sass/elements/lists.scss +112 -112
  58. package/assets/sass/elements/panel.scss +161 -161
  59. package/assets/sass/elements/tables.scss +290 -290
  60. package/assets/sass/elements/tooltips.scss +84 -84
  61. package/assets/sass/elements/type.scss +136 -136
  62. package/assets/sass/email.scss +65 -65
  63. package/assets/sass/error.scss +4 -4
  64. package/assets/sass/foundations/brand.scss +72 -72
  65. package/assets/sass/foundations/circles.scss +74 -74
  66. package/assets/sass/foundations/icons.scss +72 -72
  67. package/assets/sass/foundations/media.scss +50 -50
  68. package/assets/sass/foundations/reboot.scss +130 -129
  69. package/assets/sass/foundations/root.scss +106 -104
  70. package/assets/sass/main.scss +7 -7
  71. package/assets/svg/icons.svg +598 -588
  72. package/assets/svg/logo.svg +42 -42
  73. package/assets/{js/main.js → ts/main.ts} +68 -67
  74. package/assets/ts/modules/accordion.ts +43 -0
  75. package/dist/components.common.js +148 -98
  76. package/dist/components.common.js.map +1 -1
  77. package/dist/components.css +1 -1
  78. package/dist/components.css.map +1 -1
  79. package/dist/components.umd.js +182 -132
  80. package/dist/components.umd.js.map +1 -1
  81. package/dist/components.umd.min.js +1 -1
  82. package/dist/components.umd.min.js.map +1 -1
  83. package/package.json +108 -103
  84. package/src/components/Accordion/Accordion.vue +22 -22
  85. package/src/components/Accordion/AccordionItem.vue +52 -52
  86. package/src/components/Accordion/README.md +34 -34
  87. package/src/components/Alert/Alert.vue +39 -39
  88. package/src/components/Alert/README.md +28 -28
  89. package/src/components/Banner/Banner.vue +38 -38
  90. package/src/components/Banner/README.md +23 -23
  91. package/src/components/CardDeck/CardDeck.vue +77 -77
  92. package/src/components/CardDeck/README.md +24 -24
  93. package/src/components/Carousel/Carousel.vue +85 -85
  94. package/src/components/Carousel/README.md +19 -19
  95. package/src/components/Chart/Chart.vue +88 -88
  96. package/src/components/Chart/README.md +17 -17
  97. package/src/components/Drawer/Drawer.vue +53 -53
  98. package/src/components/Drawer/README.md +22 -22
  99. package/src/components/Header/Header.vue +38 -38
  100. package/src/components/Header/README.md +27 -27
  101. package/src/components/Modal/Modal.vue +43 -43
  102. package/src/components/Modal/README.md +19 -19
  103. package/src/components/Nav/Nav.vue +212 -189
  104. package/src/components/Nav/README.md +22 -22
  105. package/src/components/NoteFeed/NoteFeed.vue +79 -79
  106. package/src/components/NoteFeed/README.md +16 -16
  107. package/src/components/PropertySearchbar/PropertySearchbar.vue +204 -204
  108. package/src/components/PropertySearchbar/README.md +25 -25
  109. package/src/components/Snapshot/README.md +20 -20
  110. package/src/components/Snapshot/Snapshot.vue +32 -32
  111. package/src/components/Stepper/README.md +32 -32
  112. package/src/components/Stepper/Step.vue +28 -28
  113. package/src/components/Stepper/Stepper.vue +33 -33
  114. package/src/components/Tabs/README.md +27 -27
  115. package/src/components/Tabs/Tab.vue +26 -26
  116. package/src/components/Tabs/Tabs.vue +75 -75
  117. package/src/components/Testimonial/README.md +25 -25
  118. package/src/components/Testimonial/Testimonial.vue +60 -60
  119. package/src/components/Timeline/README.md +18 -18
  120. package/src/components/Timeline/Timeline.vue +24 -24
  121. package/src/elements/Card/Card.vue +113 -113
  122. package/src/elements/Card/README.md +24 -24
  123. package/src/elements/FileUploads/FileUploads.vue +48 -48
  124. package/src/elements/FileUploads/README.md +24 -24
  125. package/src/elements/Input/Input.vue +268 -268
  126. package/src/elements/Input/README.md +19 -19
  127. package/src/elements/Table/README.md +62 -62
  128. package/src/elements/Table/Table.vue +126 -116
  129. package/src/foundations/Icon/Icon.vue +24 -24
  130. package/src/foundations/Icon/README.md +11 -11
  131. package/src/foundations/Logo/Logo.vue +39 -39
  132. package/src/foundations/Logo/README.md +20 -20
  133. package/src/foundations/YoutubeVideo/README.md +11 -11
  134. package/src/foundations/YoutubeVideo/YoutubeVideo.vue +24 -24
  135. package/src/helpers/strings.js +12 -12
  136. package/src/index.js +27 -27
  137. package/assets/.DS_Store +0 -0
  138. package/src/.DS_Store +0 -0
@@ -1,85 +1,85 @@
1
- @use "../_func.scss" as *;
2
-
3
- :is(abbr[title], .tooltip) {
4
-
5
- text-decoration: underline;
6
- text-underline-offset: 0.2em;
7
- text-decoration-thickness: 2px;
8
- text-decoration-style: dashed;
9
- text-decoration-color: var(--colour-underline);
10
- position: relative;
11
- cursor: help;
12
-
13
- &:is(:hover, :focus, :active){
14
-
15
- text-decoration: none;
16
- }
17
- }
18
-
19
- @mixin tooltip(){
20
-
21
- display: block;
22
- z-index: var(--index-above);
23
- position: absolute;
24
- top: calc(100% + 0.25rem);
25
- left: 50%;
26
- min-width: max(120%, #{rem(100)});
27
- transform: translate(-50%,0);
28
- background: var(--bs-body-bg);
29
- color: inherit;
30
- padding: 0.5em;
31
- border-radius: 3px;
32
- box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.3);
33
- }
34
-
35
- .tooltip {
36
-
37
-
38
- &:after{
39
-
40
- content: "";
41
- display: inline-block;
42
- margin-left: 0.1em;
43
- margin-bottom: 0.1em;
44
- width: 0.8em;
45
- height: 0.9em;
46
- vertical-align: text-bottom;
47
- background: currentColor;
48
- mask-image: var(--icon-question);
49
- mask-size: 100%;
50
- mask-repeat: no-repeat;
51
- mask-position: 50% 50%;
52
- -webkit-mask-image: var(--icon-question);
53
- -webkit-mask-size: 100%;
54
- -webkit-mask-repeat: no-repeat;
55
- -webkit-mask-position: 50% 50%;
56
- }
57
-
58
- .tooltip__content {
59
-
60
- opacity: 0;
61
- position: absolute;
62
-
63
- }
64
-
65
- &:is(:hover, :focus, :active){
66
-
67
- .tooltip__content {
68
-
69
- opacity: 1;
70
- @include tooltip();
71
- }
72
- }
73
- }
74
-
75
- @media (hover: none) {
76
-
77
- :is(abbr[title], .tooltip[title]) {
78
-
79
- &:is(:hover, :focus, :active):before{
80
-
81
- content: attr(title);
82
- @include tooltip();
83
- }
84
- }
1
+ @use "../_func.scss" as *;
2
+
3
+ :is(abbr[title], .tooltip) {
4
+
5
+ text-decoration: underline;
6
+ text-underline-offset: 0.2em;
7
+ text-decoration-thickness: 2px;
8
+ text-decoration-style: dashed;
9
+ text-decoration-color: var(--colour-underline);
10
+ position: relative;
11
+ cursor: help;
12
+
13
+ &:is(:hover, :focus, :active){
14
+
15
+ text-decoration: none;
16
+ }
17
+ }
18
+
19
+ @mixin tooltip(){
20
+
21
+ display: block;
22
+ z-index: var(--index-above);
23
+ position: absolute;
24
+ top: calc(100% + 0.25rem);
25
+ left: 50%;
26
+ min-width: max(120%, #{rem(100)});
27
+ transform: translate(-50%,0);
28
+ background: var(--bs-body-bg);
29
+ color: inherit;
30
+ padding: 0.5em;
31
+ border-radius: 3px;
32
+ box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.3);
33
+ }
34
+
35
+ .tooltip {
36
+
37
+
38
+ &:after{
39
+
40
+ content: "";
41
+ display: inline-block;
42
+ margin-left: 0.1em;
43
+ margin-bottom: 0.1em;
44
+ width: 0.8em;
45
+ height: 0.9em;
46
+ vertical-align: text-bottom;
47
+ background: currentColor;
48
+ mask-image: var(--icon-question);
49
+ mask-size: 100%;
50
+ mask-repeat: no-repeat;
51
+ mask-position: 50% 50%;
52
+ -webkit-mask-image: var(--icon-question);
53
+ -webkit-mask-size: 100%;
54
+ -webkit-mask-repeat: no-repeat;
55
+ -webkit-mask-position: 50% 50%;
56
+ }
57
+
58
+ .tooltip__content {
59
+
60
+ opacity: 0;
61
+ position: absolute;
62
+
63
+ }
64
+
65
+ &:is(:hover, :focus, :active){
66
+
67
+ .tooltip__content {
68
+
69
+ opacity: 1;
70
+ @include tooltip();
71
+ }
72
+ }
73
+ }
74
+
75
+ @media (hover: none) {
76
+
77
+ :is(abbr[title], .tooltip[title]) {
78
+
79
+ &:is(:hover, :focus, :active):before{
80
+
81
+ content: attr(title);
82
+ @include tooltip();
83
+ }
84
+ }
85
85
  }
@@ -1,137 +1,137 @@
1
- @use "../_func.scss" as *;
2
-
3
- /* Duplicated from bootstrap reboot so that the type file will compile */
4
- mark {
5
- padding: $mark-padding;
6
- background-color: $mark-bg;
7
- }
8
-
9
- small {
10
- @include font-size($small-font-size);
11
- }
12
-
13
-
14
- @import "../../../node_modules/bootstrap/scss/_type.scss";
15
-
16
- // #region headings
17
- %heading {
18
- clear: both;
19
- @include var(font-weight,--heading-weight);
20
- @include var(font-family, --font-heading);
21
- @include var(color,--colour-heading);
22
- color: var(--colour-heading,var(--colour-primary));
23
- display: block;
24
- text-indent: -0.04em;
25
- letter-spacing: -0.01em;
26
-
27
- margin-top: 0; // 1
28
- margin-bottom: $headings-margin-bottom;
29
- font-style: $headings-font-style;
30
- line-height: $headings-line-height;
31
- }
32
-
33
- .h1 {
34
- @include font-size($h1-font-size);
35
- }
36
-
37
- .h2 {
38
- @include font-size($h2-font-size);
39
- }
40
-
41
- .h3 {
42
- @include font-size($h3-font-size);
43
- }
44
-
45
- .h4 {
46
- @include font-size($h4-font-size);
47
- }
48
-
49
- .h5 {
50
- @include font-size($h5-font-size);
51
- }
52
-
53
- .h6 {
54
- @include font-size($h6-font-size);
55
- }
56
-
57
- @include is('h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,.display-1,.display-2, .display-3, .display-4'){
58
-
59
- @extend %heading;
60
- }
61
-
62
- @include is('.display-1,.display-2, .display-3, .display-4') {
63
-
64
- font-size: var(--fs-display);
65
- }
66
-
67
- // #endregion
68
-
69
- p {
70
- max-width: var(--content-max-width);
71
- }
72
-
73
- p + p {
74
- margin-top: rem(-16);
75
- }
76
-
77
- .strapline {
78
- @include var(font-size,--fs-strapline);
79
- @include var(font-family, --font-heading);
80
- @include var(color,--colour-secondary);
81
- line-height: 1.2;
82
- font-weight: 700;
83
- margin-bottom: clamp(1rem,0.5em,0.5em);
84
- //text-shadow: ;
85
-
86
- h1 + &,
87
- .h1 + & {
88
- margin-top: -0.5rem;
89
- margin-bottom: 2rem;
90
- }
91
- }
92
-
93
- .lead {
94
- @include var(font-size,--fs-strapline);
95
- @include var(font-family, --font-heading);
96
- font-weight: 700;
97
- line-height: 1.2;
98
- margin-bottom: 3rem;
99
- @include var(color,--colour-heading);
100
- }
101
-
102
- blockquote {
103
-
104
- quotes: "“" "”" "‘" "’";
105
- margin-bottom: 1rem;
106
-
107
- p {
108
- @include var(font-size,--fs-4);
109
- @include var(color,--colour-heading);
110
- margin-top: 0;
111
- margin-bottom: 1rem;
112
- }
113
-
114
- & p:first-child:before {
115
- content: open-quote;
116
- }
117
- & p:last-of-type:after {
118
- content: close-quote;
119
- }
120
-
121
- cite {
122
- @include var(font-size,--fs-5);
123
- @include var(color,--colour-heading);
124
- font-style: normal;
125
- font-weight: bold;
126
- }
127
- }
128
-
129
- .stat {
130
- font-size: rem(48);
131
- @extend %heading;
132
- text-decoration: underline;
133
- text-underline-offset: 1rem;
134
- text-decoration-color: var(--colour-secondary);
135
- text-decoration-thickness: 0.4rem;
136
- margin-bottom: 2rem;
1
+ @use "../_func.scss" as *;
2
+
3
+ /* Duplicated from bootstrap reboot so that the type file will compile */
4
+ mark {
5
+ padding: $mark-padding;
6
+ background-color: $mark-bg;
7
+ }
8
+
9
+ small {
10
+ @include font-size($small-font-size);
11
+ }
12
+
13
+
14
+ @import "../../../node_modules/bootstrap/scss/_type.scss";
15
+
16
+ // #region headings
17
+ %heading {
18
+ clear: both;
19
+ @include var(font-weight,--heading-weight);
20
+ @include var(font-family, --font-heading);
21
+ @include var(color,--colour-heading);
22
+ color: var(--colour-heading,var(--colour-primary));
23
+ display: block;
24
+ text-indent: -0.04em;
25
+ letter-spacing: -0.01em;
26
+
27
+ margin-top: 0; // 1
28
+ margin-bottom: $headings-margin-bottom;
29
+ font-style: $headings-font-style;
30
+ line-height: $headings-line-height;
31
+ }
32
+
33
+ .h1 {
34
+ @include font-size($h1-font-size);
35
+ }
36
+
37
+ .h2 {
38
+ @include font-size($h2-font-size);
39
+ }
40
+
41
+ .h3 {
42
+ @include font-size($h3-font-size);
43
+ }
44
+
45
+ .h4 {
46
+ @include font-size($h4-font-size);
47
+ }
48
+
49
+ .h5 {
50
+ @include font-size($h5-font-size);
51
+ }
52
+
53
+ .h6 {
54
+ @include font-size($h6-font-size);
55
+ }
56
+
57
+ @include is('h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,.display-1,.display-2, .display-3, .display-4'){
58
+
59
+ @extend %heading;
60
+ }
61
+
62
+ @include is('.display-1,.display-2, .display-3, .display-4') {
63
+
64
+ font-size: var(--fs-display);
65
+ }
66
+
67
+ // #endregion
68
+
69
+ p {
70
+ max-width: var(--content-max-width);
71
+ }
72
+
73
+ p + p {
74
+ margin-top: rem(-16);
75
+ }
76
+
77
+ .strapline {
78
+ @include var(font-size,--fs-strapline);
79
+ @include var(font-family, --font-heading);
80
+ @include var(color,--colour-secondary);
81
+ line-height: 1.2;
82
+ font-weight: 700;
83
+ margin-bottom: clamp(1rem,0.5em,0.5em);
84
+ //text-shadow: ;
85
+
86
+ h1 + &,
87
+ .h1 + & {
88
+ margin-top: -0.5rem;
89
+ margin-bottom: 2rem;
90
+ }
91
+ }
92
+
93
+ .lead {
94
+ @include var(font-size,--fs-strapline);
95
+ @include var(font-family, --font-heading);
96
+ font-weight: 700;
97
+ line-height: 1.2;
98
+ margin-bottom: 3rem;
99
+ @include var(color,--colour-heading);
100
+ }
101
+
102
+ blockquote {
103
+
104
+ quotes: "“" "”" "‘" "’";
105
+ margin-bottom: 1rem;
106
+
107
+ p {
108
+ @include var(font-size,--fs-4);
109
+ @include var(color,--colour-heading);
110
+ margin-top: 0;
111
+ margin-bottom: 1rem;
112
+ }
113
+
114
+ & p:first-child:before {
115
+ content: open-quote;
116
+ }
117
+ & p:last-of-type:after {
118
+ content: close-quote;
119
+ }
120
+
121
+ cite {
122
+ @include var(font-size,--fs-5);
123
+ @include var(color,--colour-heading);
124
+ font-style: normal;
125
+ font-weight: bold;
126
+ }
127
+ }
128
+
129
+ .stat {
130
+ font-size: rem(48);
131
+ @extend %heading;
132
+ text-decoration: underline;
133
+ text-underline-offset: 1rem;
134
+ text-decoration-color: var(--colour-secondary);
135
+ text-decoration-thickness: 0.4rem;
136
+ margin-bottom: 2rem;
137
137
  }
@@ -1,66 +1,66 @@
1
- @charset "UTF-8";
2
-
3
- // Set mobile only variable so that the media query mixin doesn't print out non mobile rules
4
-
5
- @use "_func" as *;
6
-
7
- $mobileOnly: "true";
8
- $compatible: "true";
9
-
10
- // Update the breakpoints to just one to remove some utility classes
11
- $grid-breakpoints: (
12
- xs: 0
13
- );
14
-
15
- // Simplify the grid
16
- $grid-columns: 4;
17
-
18
- $device-xs-width: 600;
19
- $device-md-width: 600;
20
- $container-padding-x: 32;
21
- $default-curve-width: 600;
22
-
23
- @import "_corefiles";
24
-
25
- :root {
26
-
27
- --container-padding-x: #{rem(66)};
28
- }
29
-
30
- html {
31
-
32
- @media (min-width: #{em(600)}) {
33
- font-size: 100%;
34
- }
35
- }
36
-
37
- .content-wrapper > * {
38
- max-width: 600px;
39
- margin-inline: auto;
40
- }
41
-
42
- .container:not(.container-fluid) {
43
- max-width: 600px;
44
- padding-left: #{rem(48)};
45
- padding-right: #{rem(48)};
46
- }
47
-
48
- .table--email,
49
- .table--email tr,
50
- .table--email td {
51
- border: none;
52
- margin: 0;
53
- padding: 0;
54
- }
55
- .table--email td + td {
56
- padding-left: 1rem;
57
- }
58
-
59
- /* card */
60
- .card {
61
- min-height: auto;
62
- }
63
- /* utilities */
64
- .text-white {
65
- color: white;;
1
+ @charset "UTF-8";
2
+
3
+ // Set mobile only variable so that the media query mixin doesn't print out non mobile rules
4
+
5
+ @use "_func" as *;
6
+
7
+ $mobileOnly: "true";
8
+ $compatible: "true";
9
+
10
+ // Update the breakpoints to just one to remove some utility classes
11
+ $grid-breakpoints: (
12
+ xs: 0
13
+ );
14
+
15
+ // Simplify the grid
16
+ $grid-columns: 4;
17
+
18
+ $device-xs-width: 600;
19
+ $device-md-width: 600;
20
+ $container-padding-x: 32;
21
+ $default-curve-width: 600;
22
+
23
+ @import "_corefiles";
24
+
25
+ :root {
26
+
27
+ --container-padding-x: #{rem(66)};
28
+ }
29
+
30
+ html {
31
+
32
+ @media (min-width: #{em(600)}) {
33
+ font-size: 100%;
34
+ }
35
+ }
36
+
37
+ .content-wrapper > * {
38
+ max-width: 600px;
39
+ margin-inline: auto;
40
+ }
41
+
42
+ .container:not(.container-fluid) {
43
+ max-width: 600px;
44
+ padding-left: #{rem(48)};
45
+ padding-right: #{rem(48)};
46
+ }
47
+
48
+ .table--email,
49
+ .table--email tr,
50
+ .table--email td {
51
+ border: none;
52
+ margin: 0;
53
+ padding: 0;
54
+ }
55
+ .table--email td + td {
56
+ padding-left: 1rem;
57
+ }
58
+
59
+ /* card */
60
+ .card {
61
+ min-height: auto;
62
+ }
63
+ /* utilities */
64
+ .text-white {
65
+ color: white;;
66
66
  }
@@ -1,5 +1,5 @@
1
- @charset "UTF-8";
2
-
3
- // Set mobile only variable so that the media query mixin doesn't print out non mobile rules
4
- @use "_func" as *;
1
+ @charset "UTF-8";
2
+
3
+ // Set mobile only variable so that the media query mixin doesn't print out non mobile rules
4
+ @use "_func" as *;
5
5
  @import "_corefiles";