toggle-components-library 1.34.0-beta.7 → 1.34.0-beta.9

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 (12) hide show
  1. package/dist/toggle-components-library.common.js +90 -99
  2. package/dist/toggle-components-library.common.js.map +1 -1
  3. package/dist/toggle-components-library.css +1 -1
  4. package/dist/toggle-components-library.umd.js +90 -99
  5. package/dist/toggle-components-library.umd.js.map +1 -1
  6. package/dist/toggle-components-library.umd.min.js +1 -1
  7. package/dist/toggle-components-library.umd.min.js.map +1 -1
  8. package/package.json +1 -1
  9. package/src/components/buttons/ToggleMetricsButton.vue +1 -1
  10. package/src/components/cards/ToggleCommentCard.vue +59 -62
  11. package/src/sass/includes/_as_cards.scss +5 -4
  12. package/package-lock.json +0 -20285
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "toggle-components-library",
3
- "version": "1.34.0-beta.7",
3
+ "version": "1.34.0-beta.9",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
package/src/components/buttons/ToggleMetricsButton.vue CHANGED
@@ -19,7 +19,7 @@
19
19
  },
20
20
  icon: {
21
21
  type: String,
22
- required: true,
22
+ required: false,
23
23
  validator: function(value) {
24
24
  return ["heatmap-icon", "email-icon", "contacts-icon"].indexOf(value) !== -1;
25
25
  }
package/src/components/cards/ToggleCommentCard.vue CHANGED
@@ -1,66 +1,63 @@
1
1
  <template>
2
- <div class="toggle-comment-card">
3
- <div class="toggle-comment-card-info" :style="{ backgroundColor: cardColor}">
4
- <div class="toggle-comment-card-text">
5
- <p>"{{ comment }}"</p>
6
- </div>
7
- <div class="toggle-comment-card-name">
8
- <ToggleMetricsButton
9
- buttonStyle="mini-contacts"
10
- :buttonText="name"
11
- icon="contacts-icon"
12
- :styles="{ backgroundColor: 'transparent', borderColor: 'white', color: 'white'}"
13
- />
14
- </div>
15
- </div>
2
+ <div class="toggle-comment-card">
3
+ <div class="toggle-comment-card-info" :style="{ backgroundColor: cardColor }">
4
+ <div class="toggle-comment-card-text">
5
+ <p>"{{ commentLength }}"</p>
6
+ </div>
7
+ <div class="toggle-comment-card-name">
8
+ <slot name="button_contacts"></slot>
9
+ </div>
16
10
  </div>
11
+ </div>
17
12
  </template>
18
13
  <script>
19
- import ToggleMetricsButton from '../buttons/ToggleMetricsButton.vue';
20
- export default {
21
- components:{ToggleMetricsButton},
22
- props: {
23
- cardIndex: {
24
- type: Number,
25
- required: true,
26
- },
27
- totalCards: {
28
- type: Number,
29
- required: true,
30
- },
31
- comment: {
32
- type: String,
33
- required: true
34
- },
35
- name: {
36
- type: String,
37
- required: true
38
- }
39
- },
40
- computed: {
41
- cardColor() {
42
- // adjust colour palette below to change the Reward Cards colors
43
- const colorPalette = [
44
- '#2c7da0',
45
- '#f3c570',
46
- '#8bbcbe',
47
- '#a0a789',
48
- '#cbae78',
49
- '#a284b6',
50
- '#d39999',
51
- '#9b7361',
52
- '#64aaa8',
53
- '#799194',
54
- ];
55
-
56
- // pick random number to return random index of colourPalette
57
- const paletteIndex = Math.floor(
58
- (this.cardIndex / this.totalCards) * colorPalette.length
59
- );
60
- return colorPalette[paletteIndex];
61
- }
62
- },
63
- };
64
- </script>
65
-
66
-
14
+ export default {
15
+ data() {
16
+ return {};
17
+ },
18
+ props: {
19
+ cardIndex: {
20
+ type: Number,
21
+ required: true,
22
+ },
23
+ totalCards: {
24
+ type: Number,
25
+ required: true,
26
+ },
27
+ comment: {
28
+ type: String,
29
+ required: true,
30
+ },
31
+ name: {
32
+ type: String,
33
+ required: true,
34
+ },
35
+ },
36
+ computed: {
37
+ cardColor() {
38
+ // adjust colour palette below to change the Reward Cards colors
39
+ const colorPalette = [
40
+ "#2c7da0",
41
+ "#f3c570",
42
+ "#8bbcbe",
43
+ "#a0a789",
44
+ "#cbae78",
45
+ "#a284b6",
46
+ "#d39999",
47
+ "#9b7361",
48
+ "#64aaa8",
49
+ "#799194",
50
+ ];
51
+
52
+ // pick random number to return random index of colourPalette
53
+ const paletteIndex = Math.floor(
54
+ (this.cardIndex / this.totalCards) * colorPalette.length
55
+ );
56
+ return colorPalette[paletteIndex];
57
+ },
58
+ commentLength() {
59
+ return this.comment.length > 420 ? this.comment.substring(0, 420) + "..." : this.comment;
60
+ },
61
+ }
62
+ };
63
+ </script>
package/src/sass/includes/_as_cards.scss CHANGED
@@ -167,10 +167,10 @@
167
167
  .toggle-comment-card {
168
168
  display: flex;
169
169
  flex-direction: row;
170
- max-width: 750px;
170
+ width: 100%;
171
171
  height: 250px;
172
172
  border-radius: 18px;
173
- margin: 16px;
173
+ padding-right: 20px;
174
174
  font-size: $toggle-font-size-regular;
175
175
  font-family: $toggle-font-family;
176
176
  }
@@ -179,12 +179,13 @@
179
179
  display: flex;
180
180
  flex-direction: column;
181
181
  justify-content: space-between;
182
- padding: 40px 20px 20px 20px;
182
+ padding: 30px 70px 20px 30px;
183
183
  color: white;
184
184
  border-radius: 30px;
185
+ width: 100%;
185
186
 
186
187
  .toggle-comment-card-text {
187
- text-align: left;
188
+ text-align: justify;
188
189
  line-height: 1.5rem;
189
190
 
190
191
  p {