@policystudio/policy-studio-ui-vue 1.0.97 → 1.0.99

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 (7) hide show
  1. package/dist/css/psui_styles.css +23 -17
  2. package/package.json +1 -1
  3. package/src/assets/scss/components/PsAccordion.scss +16 -8
  4. package/src/assets/scss/components/PsTestimonialCard.scss +3 -3
  5. package/src/components/table-results/PsTableResults.vue +65 -2
  6. package/src/components/tooltip/PsRichTooltip.vue +7 -4
  7. package/src/stories/TableResults.stories.js +106 -1
package/dist/css/psui_styles.css CHANGED
@@ -1128,11 +1128,17 @@ video {
1128
1128
  color: rgba(40, 50, 59, var(--text-opacity));
1129
1129
  }
1130
1130
 
1131
- .psui-el-accordion-item-header-wrapper:hover {
1132
- --text-opacity: 1;
1133
- color: #318FAC;
1134
- color: rgba(49, 143, 172, var(--text-opacity));
1135
- }
1131
+ .psui-el-accordion-item-header-wrapper:hover .psui-el-accordion-item-icon {
1132
+ --text-opacity: 1 !important;
1133
+ color: #318FAC !important;
1134
+ color: rgba(49, 143, 172, var(--text-opacity)) !important;
1135
+ }
1136
+
1137
+ .psui-el-accordion-item-header-wrapper:hover .psui-el-accordion-item-title{
1138
+ --text-opacity: 1;
1139
+ color: #318FAC;
1140
+ color: rgba(49, 143, 172, var(--text-opacity));
1141
+ }
1136
1142
 
1137
1143
  .psui-el-accordion-item-icon {
1138
1144
  font-family: 'Material Icons Round';
@@ -1186,18 +1192,17 @@ video {
1186
1192
  transform: rotate(180deg);
1187
1193
  }
1188
1194
 
1189
- .psui-el-accordion .psui-el-accordion-item.status-opened .psui-el-accordion-item-header,
1190
- .psui-el-accordion .psui-el-accordion-item-header:hover {
1191
- --text-opacity: 1;
1192
- color: #318FAC;
1193
- color: rgba(49, 143, 172, var(--text-opacity));
1194
- }
1195
+ .psui-el-accordion .psui-el-accordion-item.status-opened .psui-el-accordion-item-header .psui-el-accordion-item-header-wrapper .psui-el-accordion-item-icon {
1196
+ --text-opacity: 1;
1197
+ color: #318FAC;
1198
+ color: rgba(49, 143, 172, var(--text-opacity));
1199
+ }
1195
1200
 
1196
- .psui-el-accordion .psui-el-accordion-item.status-opened .psui-el-accordion-item-header .psui-el-accordion-item-icon, .psui-el-accordion .psui-el-accordion-item-header:hover .psui-el-accordion-item-icon {
1197
- --text-opacity: 1;
1198
- color: #318FAC;
1199
- color: rgba(49, 143, 172, var(--text-opacity));
1200
- }
1201
+ .psui-el-accordion .psui-el-accordion-item.status-opened .psui-el-accordion-item-header .psui-el-accordion-item-header-wrapper .psui-el-accordion-item-title{
1202
+ --text-opacity: 1;
1203
+ color: #318FAC;
1204
+ color: rgba(49, 143, 172, var(--text-opacity));
1205
+ }
1201
1206
 
1202
1207
  .psui-el-accordion .psui-el-accordion-item-content {
1203
1208
  list-style-type: none;
@@ -3848,8 +3853,8 @@ video {
3848
3853
  display: flex;
3849
3854
  flex-direction: column;
3850
3855
  border-radius: 0.5rem;
3856
+ width: 100%;
3851
3857
  padding: 56px 42px 40px 32px;
3852
- max-width: 384px;
3853
3858
  }
3854
3859
 
3855
3860
  .psui-el-testimonial-icon {
@@ -3877,6 +3882,7 @@ video {
3877
3882
  .psui-el-testimonial-info {
3878
3883
  display: flex;
3879
3884
  flex-direction: column;
3885
+ margin-top: auto;
3880
3886
  }
3881
3887
 
3882
3888
  .psui-el-testimonial-info-user {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@policystudio/policy-studio-ui-vue",
3
- "version": "1.0.97",
3
+ "version": "1.0.99",
4
4
  "description": "Policy Studio UI",
5
5
  "main": "src/index.js",
6
6
  "author": "Policy Studio Team",
package/src/assets/scss/components/PsAccordion.scss CHANGED
@@ -5,7 +5,6 @@
5
5
  &-item {
6
6
  border-bottom: 1px solid #e6ecf2;
7
7
 
8
-
9
8
  &.disabled {
10
9
  .psui-el-accordion-item-header {
11
10
  .psui-el-accordion-item-header-wrapper {
@@ -24,7 +23,12 @@
24
23
  @apply psui-flex psui-w-full psui-cursor-pointer psui-transition-all psui-justify-between transition-default psui-text-gray-80;
25
24
 
26
25
  &:hover {
27
- @apply psui-text-blue-60;
26
+ .psui-el-accordion-item-icon {
27
+ @apply psui-text-blue-60 !important;
28
+ }
29
+ .psui-el-accordion-item-title{
30
+ @apply psui-text-blue-60;
31
+ }
28
32
  }
29
33
  }
30
34
 
@@ -71,15 +75,19 @@
71
75
  }
72
76
 
73
77
  .psui-el-accordion-item {
74
- &.status-opened .psui-el-accordion-item-header,
75
- &-header:hover {
76
- @apply psui-text-blue-60;
77
-
78
- .psui-el-accordion-item-icon {
79
- @apply psui-text-blue-60;
78
+ &.status-opened .psui-el-accordion-item-header {
79
+ .psui-el-accordion-item-header-wrapper {
80
+
81
+ .psui-el-accordion-item-icon {
82
+ @apply psui-text-blue-60;
83
+ }
84
+ .psui-el-accordion-item-title{
85
+ @apply psui-text-blue-60;
86
+ }
80
87
  }
81
88
  }
82
89
  }
90
+
83
91
 
84
92
  .psui-el-accordion-item-content {
85
93
  @apply psui-list-none psui-text-gray-60 psui-mb-5;
package/src/assets/scss/components/PsTestimonialCard.scss CHANGED
@@ -1,8 +1,7 @@
1
1
  @layer components {
2
2
  .psui-el-testimonial {
3
- @apply psui-relative psui-bg-white psui-flex psui-flex-col psui-rounded-lg;
3
+ @apply psui-relative psui-bg-white psui-flex psui-flex-col psui-rounded-lg w-full;
4
4
  padding: 56px 42px 40px 32px;
5
- max-width: 384px;
6
5
 
7
6
  &-icon {
8
7
  @apply psui-absolute psui-bg-blue-60 psui-rounded-sm psui-flex psui-items-center;
@@ -16,10 +15,11 @@
16
15
  }
17
16
 
18
17
  &-info {
19
- @apply psui-flex psui-flex-col;
18
+ @apply psui-flex psui-flex-col psui-mt-auto;
20
19
  &-user {
21
20
  @apply psui-mb-1 psui-text-blue-80 psui-text-small psui-font-bold;
22
21
  }
22
+
23
23
  &-position,&-jurisdiction {
24
24
  @apply psui-text-gray-50 psui-text-small;
25
25
  }
package/src/components/table-results/PsTableResults.vue CHANGED
@@ -24,6 +24,8 @@
24
24
  },
25
25
  `type-${item.type}`
26
26
  ]"
27
+ @mouseenter="onRowHover(index)"
28
+ @mouseleave="onRowHover(false)"
27
29
  >
28
30
  <td>
29
31
  <div
@@ -85,6 +87,31 @@
85
87
  @click.native="$eventBus.$emit('openDescriptionModal', { type: 'helper', slug: `table-results-${item.helper_slug}` })"
86
88
  />
87
89
  </p>
90
+ <PsRichTooltip
91
+ v-if="shouldShowIcon(item)"
92
+ position="top"
93
+ layout="gray"
94
+ class="psui-inline-flex psui-cursor-default"
95
+ :class="[isHoveringRow === index ? 'opacity-1' : 'opacity-0', { 'is-last-deep' : item.last_deep }]"
96
+ :ignoreDialog="!shouldShowIcon(item)"
97
+ >
98
+ <template v-slot:trigger>
99
+ <PsIcon
100
+ :icon="getIcon(item)"
101
+ class="psui-flex psui-text-gray-40 psui-cursor-pointer leading-none hover:psui-text-blue-60 psui-gap-3 psui-px-5 psui-py-1 transition-all"
102
+ size="18"
103
+ :style="{ display: 'flex' }"
104
+ @click.native="executeCallback(item)"
105
+ />
106
+ </template>
107
+ <template v-slot:content>
108
+ <p
109
+ class="psui-font-bold psui-text-gray-80 psui-text-xsmall"
110
+ >
111
+ {{ getText(item) }}
112
+ </p>
113
+ </template>
114
+ </PsRichTooltip>
88
115
  </div>
89
116
  </td>
90
117
 
@@ -236,7 +263,8 @@ export default {
236
263
  },
237
264
  },
238
265
  data: () => ({
239
- collapsedRows : []
266
+ collapsedRows : [],
267
+ isHoveringRow: false
240
268
  }),
241
269
  computed: {
242
270
  getRows() {
@@ -323,7 +351,42 @@ export default {
323
351
  }
324
352
  this.$forceUpdate()
325
353
  this.$emit('collapse-row', this.collapsedRows)
326
- }
354
+ },
355
+ shouldShowIcon(item) {
356
+ if(item.actions && (item.deep == 1 || item.deep == 2)) {
357
+ return true
358
+ } else {
359
+ return false
360
+ }
361
+ },
362
+ onRowHover(index) {
363
+ this.isHoveringRow = index
364
+ },
365
+ getIcon(item) {
366
+ if(item.actions && item.is_disabled) {
367
+ return item.actions[1].icon
368
+ } else if(item.actions && !item.is_disabled) {
369
+ return item.actions[0].icon
370
+ } else {
371
+ return ''
372
+ }
373
+ },
374
+ getText(item) {
375
+ if(item.actions && item.is_disabled) {
376
+ return item.actions[1].text
377
+ } else if(item.actions && !item.is_disabled) {
378
+ return item.actions[0].text
379
+ } else {
380
+ return ''
381
+ }
382
+ },
383
+ executeCallback(item) {
384
+ if(item.actions && item.is_disabled) {
385
+ item.actions[1].callback()
386
+ } else if(item.actions && !item.is_disabled) {
387
+ item.actions[0].callback()
388
+ }
389
+ },
327
390
  }
328
391
  }
329
392
  </script>
package/src/components/tooltip/PsRichTooltip.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <PsTooltip :layout="layout" :title="title" :cssClass="cssClass" :position="position" :ignoreDialog="ignoreDialog">
2
+ <PsTooltip :layout="layout" :title="title" :cssClass="cssClass" :position="position" :ignoreDialog="ignoreDialog" :customPosition="customPosition">
3
3
  <template v-slot:trigger>
4
4
  <slot name="trigger"></slot>
5
5
  </template>
@@ -35,16 +35,19 @@ export default {
35
35
  type: String,
36
36
  default: '',
37
37
  },
38
- position:{
38
+ position: {
39
39
  type: String,
40
40
  default: 'bottom',
41
- validator: (value)=> ['bottom','top'].includes(value)
41
+ validator: (value)=> ['bottom', 'top', 'custom'].includes(value)
42
42
  },
43
43
  ignoreDialog: {
44
44
  type: Boolean,
45
45
  default: false
46
+ },
47
+ customPosition: {
48
+ type: String,
49
+ default: '',
46
50
  }
47
-
48
51
  },
49
52
  }
50
53
  </script>
package/src/stories/TableResults.stories.js CHANGED
@@ -295,6 +295,22 @@ Simple.args = {
295
295
  ],
296
296
  summaryData: [
297
297
  {
298
+ actions: [
299
+ {
300
+ icon: 'delete_outline',
301
+ text: 'Remove prototype from your policy',
302
+ callback: () => {}
303
+ },
304
+ {
305
+ icon: 'add_circle_outline',
306
+ text: 'Add requirements',
307
+ callback: () => {}
308
+ },
309
+ {
310
+ icon: 'more_horiz',
311
+ callback: () => {}
312
+ },
313
+ ],
298
314
  'data': {
299
315
  'forecast_units_affected': 337.5,
300
316
  'forecast_emissions_savings': -1470.2228427746163,
@@ -433,9 +449,98 @@ Simple.args = {
433
449
  }
434
450
  ],
435
451
  'is_disabled': false,
436
- 'is_last': true,
452
+ 'is_last': false,
437
453
  'index': '0-0-0',
438
454
  'last_deep': false
455
+ },
456
+ {
457
+ 'data': {
458
+ 'forecast_units_affected': 77.5,
459
+ 'forecast_emissions_savings': 1427.3145433224304,
460
+ 'forecast_therms_savings': 296624.89395,
461
+ 'forecast_kwh_savings': -2102697.449999999,
462
+ 'forecast_lifecycle_savings': 19620.35775000001,
463
+ 'forecast_initial_cost': 408160,
464
+ 'initial_cost': 2014,
465
+ 'annual_bill_savings_avg': null,
466
+ 'annual_bill_savings': -439.0199999999999,
467
+ 'emissions_savings': 2.045,
468
+ 'kwh_savings': -3999,
469
+ 'therms_savings': 400.1415,
470
+ 'lifecycle_savings': -4160.687805,
471
+ 'compliance_margin': 29.6,
472
+ 'baseline_fuel_type': 'Mixed-fuel',
473
+ 'energy_savings_combined': 26.36819047,
474
+ 'on_bill_cost_ratio': 1.460322707,
475
+ 'tdv_benefit_to_cost_ratio': 1.42,
476
+ 'simple_payback': 0,
477
+ 'tdv2022_benefit_to_cost_ratio': 0
478
+ },
479
+ 'deep': 2,
480
+ 'id': 'policy:container-2459:climateZone-2-PGE',
481
+ 'title': 'Climate Zone 2',
482
+ 'items': [
483
+ {
484
+ 'data': {
485
+ 'forecast_units_affected': 77.5,
486
+ 'forecast_emissions_savings': 1427.3145433224304,
487
+ 'forecast_therms_savings': 296624.89395,
488
+ 'forecast_kwh_savings': -2102697.449999999,
489
+ 'forecast_lifecycle_savings': 19620.35775000001,
490
+ 'forecast_initial_cost': 408160,
491
+ 'initial_cost': 2014,
492
+ 'annual_bill_savings': -439.02,
493
+ 'emissions_savings': 2.045,
494
+ 'kwh_savings': -3999,
495
+ 'therms_savings': 400.1415,
496
+ 'lifecycle_savings': -4160.687805,
497
+ 'compliance_margin': 29.6,
498
+ 'baseline_fuel_type': 'Mixed-fuel',
499
+ 'energy_savings_combined': 26.36819047,
500
+ 'on_bill_cost_ratio': 1.460322707,
501
+ 'tdv_benefit_to_cost_ratio': 1.42,
502
+ 'simple_payback': 0,
503
+ 'tdv2022_benefit_to_cost_ratio': null
504
+ },
505
+ 'deep': 3,
506
+ 'id': 'policy:container-2459:climateZone-2-PGE:fuel-all-electric',
507
+ 'title': 'All Electric',
508
+ 'items': null,
509
+ 'is_disabled': false,
510
+ 'is_last': false,
511
+ 'index': '0-0-0-0',
512
+ 'last_deep': true
513
+ },
514
+ {
515
+ 'data': {
516
+ 'initial_cost': 1806.25,
517
+ 'annual_bill_savings': 186.04,
518
+ 'emissions_savings': 0.42,
519
+ 'kwh_savings': 89.395,
520
+ 'therms_savings': 68.604,
521
+ 'lifecycle_savings': 5647.744375,
522
+ 'compliance_margin': 11.95,
523
+ 'baseline_fuel_type': 'Mixed-fuel',
524
+ 'energy_savings_combined': 7.16541574,
525
+ 'on_bill_cost_ratio': 2.784541829,
526
+ 'tdv_benefit_to_cost_ratio': 2.75,
527
+ 'simple_payback': 9.708831573,
528
+ 'tdv2022_benefit_to_cost_ratio': null
529
+ },
530
+ 'deep': 3,
531
+ 'id': 'policy:container-2459:climateZone-2-PGE:fuel-mixed-fuel',
532
+ 'title': 'Mixed-fuel',
533
+ 'items': null,
534
+ 'is_disabled': true,
535
+ 'is_last': true,
536
+ 'index': '0-0-0-1',
537
+ 'last_deep': true
538
+ }
539
+ ],
540
+ 'is_disabled': true,
541
+ 'is_last': true,
542
+ 'index': '0-0-1',
543
+ 'last_deep': false
439
544
  }
440
545
  ],
441
546
  'is_disabled': false,