@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
package/README.md CHANGED
@@ -1,137 +1,137 @@
1
- # Getting started
2
-
3
- ## Using the component library or assets
4
-
5
- ### Install
6
- ```
7
- npm install @iamproperty/components --save
8
- ```
9
-
10
- ### Usage
11
-
12
- #### Static assets
13
-
14
- The assets folder can be used independently from the Vue components so that they can be used with other frameworks. With the compiled files available to use out of the box alongside the source files that can be configured.
15
-
16
- ```
17
- <link href="./node_modules/@iamproperty/components/assets/css/style.min.css" as="style" />
18
- <script src="./node_modules/@iamproperty/components/assets/js/scripts.bundle.min.js"></script>
19
- ```
20
-
21
- ##### Sass files
22
- ```
23
- @import './node_modules/@iamproperty/components/assets/sass/_func.scss';
24
- @import './node_modules/@iamproperty/components/assets/sass/_corefiles_.scss';
25
- ```
26
- ##### JS modules
27
- ```
28
- import navbar from @iamproperty/components/assets/js/modules/navbar.js
29
- ```
30
-
31
-
32
- #### Vue application
33
-
34
- ```
35
- import '@iamproperty/components/assets/css/core.min.css'
36
- import '@iamproperty/components/dist/components.css'
37
-
38
- import * as iamkey from '@iamproperty/components'
39
- for (const [key, value] of Object.entries(iamkey)) {
40
- Vue.component(key, value)
41
- }
42
- ```
43
-
44
- Components then can be used as described in the design system documentation.
45
-
46
- ```
47
- <Header title="Page title" image="../../assets/image.jpeg"><p>Page description</p></Header>
48
- ```
49
-
50
- #### NUXT
51
-
52
- To use the components in NUXT you firstly need to add create a plugin file called plugins/iamkey.js and add the below code.
53
-
54
- ```
55
- import Vue from 'vue'
56
-
57
- import '@iamproperty/components/assets/css/core.min.css'
58
- import '@iamproperty/components/dist/components.css'
59
-
60
- import * as iamkey from '@iamproperty/components'
61
- for (const [key, value] of Object.entries(iamkey)) {
62
- Vue.component(key, value)
63
- }
64
- ```
65
-
66
- Then add the plugin to the nuxt.config.js file.
67
-
68
- ```
69
- export default {
70
- plugins: [
71
- 'plugins/iamkey.js'
72
- ],
73
- }
74
- ```
75
-
76
-
77
- ## Contributing to iam key
78
-
79
- ### Create code branch
80
-
81
- Firstly the clone the [repo](https://github.com/iamproperty/iamproperty-vue-component-library) from GitHub and create a new branch using the agreed naming conventention.
82
-
83
- ### Commands
84
-
85
- #### Install node packages
86
-
87
- ```
88
- npm install
89
- ```
90
-
91
- #### Development local web server
92
-
93
- Setup a local web server to run the documentation site this will allow you to modify the code and check it.
94
-
95
- ```
96
- npm run serve
97
- ```
98
-
99
- #### Run your unit tests
100
-
101
- **This command should be ran while the local web server is still running.**
102
-
103
- Unit tests should be ran after changing any code to make sure it has no unwanted side effects.
104
-
105
- The visual regression tests may differ greatly if the tests are running on a windows when the the snapshots where created on Mac.
106
-
107
- ```
108
- npm run test
109
- ```
110
-
111
- #### Prepare for pull request
112
-
113
- **This command should be ran while the local web server is still running.**
114
-
115
- Before creating a pull request we want to make sure assets get re-compiled and audited so that we can keep an eye on file sizes. We also want to recreate visual regression snapshots. This will create a number of files that will be added to the pull request to help the reviewers make judgement on the changes.
116
-
117
- ```
118
- npm run pull-request
119
- ```
120
-
121
- ### Pull request
122
-
123
- You will not have the ability to commit changes directly to the main branch and a pull request will have to be created. This pull request should follow the format dictated in the .github/pull_request_template.md file.
124
-
125
- ## Create release
126
-
127
- Before creating a release you will need to make sure you are logged into the npm registry by running the below command. You will also need to make sure you have access to create releases to the <a href="https://www.npmjs.com/package/@iamproperty/components" target="_blank">npm registry package</a>.
128
-
129
- ```
130
- npm login
131
- ```
132
-
133
- After you are logged in then can publish but remember to increase the package version if the package.json file.
134
-
135
- ```
136
- npm publish
1
+ # Getting started
2
+
3
+ ## Using the component library or assets
4
+
5
+ ### Install
6
+ ```
7
+ npm install @iamproperty/components --save
8
+ ```
9
+
10
+ ### Usage
11
+
12
+ #### Static assets
13
+
14
+ The assets folder can be used independently from the Vue components so that they can be used with other frameworks. With the compiled files available to use out of the box alongside the source files that can be configured.
15
+
16
+ ```
17
+ <link href="./node_modules/@iamproperty/components/assets/css/style.min.css" as="style" />
18
+ <script src="./node_modules/@iamproperty/components/assets/js/scripts.bundle.min.js"></script>
19
+ ```
20
+
21
+ ##### Sass files
22
+ ```
23
+ @import './node_modules/@iamproperty/components/assets/sass/_func.scss';
24
+ @import './node_modules/@iamproperty/components/assets/sass/_corefiles_.scss';
25
+ ```
26
+ ##### JS modules
27
+ ```
28
+ import navbar from @iamproperty/components/assets/js/modules/navbar.js
29
+ ```
30
+
31
+
32
+ #### Vue application
33
+
34
+ ```
35
+ import '@iamproperty/components/assets/css/core.min.css'
36
+ import '@iamproperty/components/dist/components.css'
37
+
38
+ import * as iamkey from '@iamproperty/components'
39
+ for (const [key, value] of Object.entries(iamkey)) {
40
+ Vue.component(key, value)
41
+ }
42
+ ```
43
+
44
+ Components then can be used as described in the design system documentation.
45
+
46
+ ```
47
+ <Header title="Page title" image="../../assets/image.jpeg"><p>Page description</p></Header>
48
+ ```
49
+
50
+ #### NUXT
51
+
52
+ To use the components in NUXT you firstly need to add create a plugin file called plugins/iamkey.js and add the below code.
53
+
54
+ ```
55
+ import Vue from 'vue'
56
+
57
+ import '@iamproperty/components/assets/css/core.min.css'
58
+ import '@iamproperty/components/dist/components.css'
59
+
60
+ import * as iamkey from '@iamproperty/components'
61
+ for (const [key, value] of Object.entries(iamkey)) {
62
+ Vue.component(key, value)
63
+ }
64
+ ```
65
+
66
+ Then add the plugin to the nuxt.config.js file.
67
+
68
+ ```
69
+ export default {
70
+ plugins: [
71
+ 'plugins/iamkey.js'
72
+ ],
73
+ }
74
+ ```
75
+
76
+
77
+ ## Contributing to iam key
78
+
79
+ ### Create code branch
80
+
81
+ Firstly the clone the [repo](https://github.com/iamproperty/iamproperty-vue-component-library) from GitHub and create a new branch using the agreed naming conventention.
82
+
83
+ ### Commands
84
+
85
+ #### Install node packages
86
+
87
+ ```
88
+ npm install
89
+ ```
90
+
91
+ #### Development local web server
92
+
93
+ Setup a local web server to run the documentation site this will allow you to modify the code and check it.
94
+
95
+ ```
96
+ npm run serve
97
+ ```
98
+
99
+ #### Run your unit tests
100
+
101
+ **This command should be ran while the local web server is still running.**
102
+
103
+ Unit tests should be ran after changing any code to make sure it has no unwanted side effects.
104
+
105
+ The visual regression tests may differ greatly if the tests are running on a windows when the the snapshots where created on Mac.
106
+
107
+ ```
108
+ npm run test
109
+ ```
110
+
111
+ #### Prepare for pull request
112
+
113
+ **This command should be ran while the local web server is still running.**
114
+
115
+ Before creating a pull request we want to make sure assets get re-compiled and audited so that we can keep an eye on file sizes. We also want to recreate visual regression snapshots. This will create a number of files that will be added to the pull request to help the reviewers make judgement on the changes.
116
+
117
+ ```
118
+ npm run pull-request
119
+ ```
120
+
121
+ ### Pull request
122
+
123
+ You will not have the ability to commit changes directly to the main branch and a pull request will have to be created. This pull request should follow the format dictated in the .github/pull_request_template.md file.
124
+
125
+ ## Create release
126
+
127
+ Before creating a release you will need to make sure you are logged into the npm registry by running the below command. You will also need to make sure you have access to create releases to the <a href="https://www.npmjs.com/package/@iamproperty/components" target="_blank">npm registry package</a>.
128
+
129
+ ```
130
+ npm login
131
+ ```
132
+
133
+ After you are logged in then can publish but remember to increase the package version if the package.json file.
134
+
135
+ ```
136
+ npm publish
137
137
  ```