@policystudio/policy-studio-ui-vue 1.2.0-access.2 → 1.2.0-access.21

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 (37) hide show
  1. package/dist/css/psui_styles_output.css +585 -325
  2. package/doc/src/stories/Button.stories.ts +95 -73
  3. package/doc/src/stories/DropdownList.stories.ts +2 -2
  4. package/doc/src/stories/Typography.mdx +14 -14
  5. package/package.json +1 -1
  6. package/src/assets/scss/components/PsAccordion.scss +19 -28
  7. package/src/assets/scss/components/PsButton.scss +128 -91
  8. package/src/assets/scss/components/PsCardInfos.scss +1 -1
  9. package/src/assets/scss/components/PsChartLegend.scss +2 -2
  10. package/src/assets/scss/components/PsCheckbox.scss +2 -2
  11. package/src/assets/scss/components/PsChips.scss +1 -1
  12. package/src/assets/scss/components/PsCollapse.scss +1 -1
  13. package/src/assets/scss/components/PsDataTable.scss +1 -1
  14. package/src/assets/scss/components/PsDateCardInfo.scss +7 -4
  15. package/src/assets/scss/components/PsDialog.scss +2 -2
  16. package/src/assets/scss/components/PsDraggable.scss +1 -1
  17. package/src/assets/scss/components/PsDropdownList.scss +2 -2
  18. package/src/assets/scss/components/PsInlineSelector.scss +3 -3
  19. package/src/assets/scss/components/PsInput.scss +2 -2
  20. package/src/assets/scss/components/PsInputSelect.scss +2 -2
  21. package/src/assets/scss/components/PsInputTextArea.scss +3 -3
  22. package/src/assets/scss/components/PsMiniTag.scss +25 -30
  23. package/src/assets/scss/components/PsRadioButton.scss +2 -2
  24. package/src/assets/scss/components/PsSlider.scss +1 -1
  25. package/src/assets/scss/components/PsTabHeader.scss +134 -134
  26. package/src/assets/scss/components/PsTableResults.scss +12 -12
  27. package/src/assets/scss/components/PsTestimonialCard.scss +3 -3
  28. package/src/assets/scss/components/PsToast.scss +1 -1
  29. package/src/assets/scss/components/PsToggle.scss +1 -1
  30. package/src/assets/scss/components/_PsTableResults.scss +3 -3
  31. package/src/components/badges-and-tags/PsDateCardInfo.vue +16 -5
  32. package/src/components/badges-and-tags/PsMiniTag.vue +5 -5
  33. package/src/components/buttons/PsButton.vue +111 -20
  34. package/src/components/navigations/PsBreadcrumb.vue +1 -1
  35. package/src/components/table-results/PsTableResults.vue +2 -2
  36. package/src/components/ui/PsIcon.vue +10 -5
  37. package/tailwind.config.js +70 -87
package/doc/src/stories/Button.stories.ts CHANGED
@@ -1,12 +1,13 @@
1
1
  import PsButton, { sizes } from '../../../src/components/buttons/PsButton.vue'
2
- const icons = ['add_circle', 'delete', 'done', 'info', 'send']
2
+ const icons = ['add_circle', 'delete', 'done', 'info', 'send', 'verified', 'arrow_forward', 'arrow_back']
3
3
  export default {
4
4
  title: 'Components/Button',
5
5
  component: PsButton,
6
6
  argTypes: {
7
7
  size: { control: { type: 'select', options: sizes } },
8
8
  disabled: { control: 'boolean' },
9
- icon: { control: { type: 'select', options: icons } },
9
+ loading: { control: 'boolean' },
10
+ iconLeft: { control: { type: 'select', options: icons } },
10
11
  iconRight: { control: { type: 'select', options: icons } },
11
12
  },
12
13
  }
@@ -18,112 +19,133 @@ const TemplateDefault = (args, { argTypes }) => ({
18
19
  <div style="display:flex; flex-direction: column;">
19
20
  <p>Size: Big</p>
20
21
  <div style="display: flex; flex-direction: column; gap: 10px;">
21
- <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;">
22
+ <div style="display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;">
22
23
  <span style="text-align: center; color: black;">Solid Style</span>
23
- <PsButton label='Left Icon' layout='solid' icon='verified' iconPosition='left'/>
24
- <PsButton label='Right Icon' layout='solid' icon='verified' iconPosition='right'/>
24
+ <PsButton label='Left Icon' layout='solid' iconLeft='verified'/>
25
+ <PsButton label='Right Icon' layout='solid' iconRight='verified'/>
26
+ <PsButton label='Both Icons' layout='solid' iconLeft='arrow_back' iconRight='arrow_forward'/>
25
27
  <PsButton label='Text Only' layout='solid' />
26
- <PsButton label='Disabled' layout='solid' icon='verified' iconPosition='left' disabled/>
27
- <PsButton label='Loading Solid' layout='solid' icon='verified' iconPosition='left' loading />
28
+ <PsButton label='Disabled' layout='solid' iconLeft='verified' disabled/>
29
+ <PsButton label='Loading' layout='solid' iconLeft='verified' loading />
28
30
  </div>
29
- <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
31
+ <div style="display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
30
32
  <span style="text-align: center; color: blue;">Outline Style</span>
31
- <PsButton label='Left Icon' layout='outline' icon='verified' iconPosition='left'/>
32
- <PsButton label='Right Icon' layout='outline' icon='verified' iconPosition='right'/>
33
+ <PsButton label='Left Icon' layout='outline' iconLeft='verified'/>
34
+ <PsButton label='Right Icon' layout='outline' iconRight='verified'/>
35
+ <PsButton label='Both Icons' layout='outline' iconLeft='arrow_back' iconRight='arrow_forward'/>
33
36
  <PsButton label='Text Only' layout='outline'/>
34
- <PsButton label='Disabled' layout='outline' icon='verified' iconPosition='left' disabled/>
35
- <PsButton label='Loading Outline' layout='outline' icon='verified' iconPosition='left' loading />
37
+ <PsButton label='Disabled' layout='outline' iconLeft='verified' disabled/>
38
+ <PsButton label='Loading' layout='outline' iconLeft='verified' loading />
36
39
  </div>
37
- <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
40
+ <div style="display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
38
41
  <span style="text-align: center; color: brown;">Ghost Style</span>
39
- <PsButton label='Left Icon' layout='ghost' icon='verified' iconPosition='left'/>
40
- <PsButton label='Right Icon' layout='ghost' icon='verified' iconPosition='right'/>
41
- <PsButton label='Text Only' layout='ghost' />
42
- <PsButton label='Disabled' layout='ghost' icon='verified' iconPosition='left' disabled/>
43
- <PsButton label='Loading Ghost' layout='ghost' icon='verified' iconPosition='left' loading />
42
+ <PsButton label='Left Icon' layout='ghost' iconLeft='verified'/>
43
+ <PsButton label='Right Icon' layout='ghost' iconRight='verified'/>
44
+ <PsButton label='Both Icons' layout='ghost' iconLeft='arrow_back' iconRight='arrow_forward'/>
45
+ <PsButton label='Text Only' layout='ghost' />
46
+ <PsButton label='Disabled' layout='ghost' iconLeft='verified' disabled/>
47
+ <PsButton label='Loading' layout='ghost' iconLeft='verified' loading />
44
48
  </div>
45
- <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
49
+ <div style="display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
46
50
  <span style="text-align: center; color: green;">Only-Text Style</span>
47
- <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left'/>
48
- <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right'/>
49
- <PsButton label='Text Only' layout='onlytext'/>
50
- <PsButton label='Disabled' layout='onlytext' icon='verified' iconPosition='left' disabled/>
51
- <PsButton label='Loading Only-Text' layout='onlytext' icon='verified' iconPosition='left' loading />
51
+ <PsButton label='Left Icon' layout='onlytext' iconLeft='verified'/>
52
+ <PsButton label='Right Icon' layout='onlytext' iconRight='verified'/>
53
+ <PsButton label='Both Icons' layout='onlytext' iconLeft='arrow_back' iconRight='arrow_forward'/>
54
+ <PsButton label='Text Only' layout='onlytext'/>
55
+ <PsButton label='Disabled' layout='onlytext' iconLeft='verified' disabled/>
56
+ <PsButton label='Loading' layout='onlytext' iconLeft='verified' loading />
52
57
  </div>
53
- <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
58
+ <div style="display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
54
59
  <span style="text-align: center; color: red;">Caution Button</span>
55
- <PsButton label='Left Icon' layout='caution' icon='verified' iconPosition='left'/>
56
- <PsButton label='Right Icon' layout='caution' icon='verified' iconPosition='right'/>
57
- <PsButton label='Text Only' layout='caution' />
58
- <PsButton label='Disabled' layout='caution' icon='verified' iconPosition='left' disabled/>
59
- <PsButton label='Loading Caution' layout='caution' icon='verified' iconPosition='left' loading />
60
+ <PsButton label='Left Icon' layout='caution' iconLeft='verified'/>
61
+ <PsButton label='Right Icon' layout='caution' iconRight='verified'/>
62
+ <PsButton label='Both Icons' layout='caution' iconLeft='arrow_back' iconRight='arrow_forward'/>
63
+ <PsButton label='Text Only' layout='caution' />
64
+ <PsButton label='Disabled' layout='caution' iconLeft='verified' disabled/>
65
+ <PsButton label='Loading' layout='caution' iconLeft='verified' loading />
66
+ </div>
60
67
  </div>
61
68
 
62
-
63
- </div>
64
69
  <p>Size: Medium</p>
65
70
  <div style="display: flex; flex-direction: column; gap: 10px;">
66
- <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
71
+ <div style="display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
67
72
  <span style="text-align: center; color: black;">Solid Style</span>
68
- <PsButton label='Left Icon' layout='solid' icon='verified' iconPosition='left' size='medium'/>
69
- <PsButton label='Right Icon' layout='solid' icon='verified' iconPosition='right' size='medium'/>
70
- <PsButton label='Text Only' layout='solid' size='medium'/>
71
- <PsButton label='Disabled' layout='solid' icon='verified' iconPosition='left' disabled size='medium'/>
73
+ <PsButton label='Left Icon' layout='solid' iconLeft='verified' size='medium'/>
74
+ <PsButton label='Right Icon' layout='solid' iconRight='verified' size='medium'/>
75
+ <PsButton label='Both Icons' layout='solid' iconLeft='arrow_back' iconRight='arrow_forward' size='medium'/>
76
+ <PsButton label='Text Only' layout='solid' size='medium'/>
77
+ <PsButton label='Disabled' layout='solid' iconLeft='verified' disabled size='medium'/>
78
+ <PsButton label='Loading' layout='solid' iconLeft='verified' loading size='medium'/>
72
79
  </div>
73
- <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
80
+ <div style="display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
74
81
  <span style="text-align: center; color: blue;">Outline Style</span>
75
- <PsButton label='Left Icon' layout='outline' icon='verified' iconPosition='left' size='medium'/>
76
- <PsButton label='Right Icon' layout='outline' icon='verified' iconPosition='right' size='medium'/>
77
- <PsButton label='Text Only' layout='outline' size='medium'/>
78
- <PsButton label='Disabled' layout='outline' icon='verified' iconPosition='left' disabled size='medium'/>
82
+ <PsButton label='Left Icon' layout='outline' iconLeft='verified' size='medium'/>
83
+ <PsButton label='Right Icon' layout='outline' iconRight='verified' size='medium'/>
84
+ <PsButton label='Both Icons' layout='outline' iconLeft='arrow_back' iconRight='arrow_forward' size='medium'/>
85
+ <PsButton label='Text Only' layout='outline' size='medium'/>
86
+ <PsButton label='Disabled' layout='outline' iconLeft='verified' disabled size='medium'/>
87
+ <PsButton label='Loading' layout='outline' iconLeft='verified' loading size='medium'/>
79
88
  </div>
80
- <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
89
+ <div style="display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
81
90
  <span style="text-align: center; color: brown;">Ghost Style</span>
82
- <PsButton label='Left Icon' layout='ghost' icon='verified' iconPosition='left' size='medium'/>
83
- <PsButton label='Right Icon' layout='ghost' icon='verified' iconPosition='right' size='medium'/>
84
- <PsButton label='Text Only' layout='ghost' size='medium'/>
85
- <PsButton label='Disabled' layout='ghost' icon='verified' iconPosition='left' disabled size='medium'/>
91
+ <PsButton label='Left Icon' layout='ghost' iconLeft='verified' size='medium'/>
92
+ <PsButton label='Right Icon' layout='ghost' iconRight='verified' size='medium'/>
93
+ <PsButton label='Both Icons' layout='ghost' iconLeft='arrow_back' iconRight='arrow_forward' size='medium'/>
94
+ <PsButton label='Text Only' layout='ghost' size='medium'/>
95
+ <PsButton label='Disabled' layout='ghost' iconLeft='verified' disabled size='medium'/>
96
+ <PsButton label='Loading' layout='ghost' iconLeft='verified' loading size='medium'/>
86
97
  </div>
87
- <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
98
+ <div style="display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
88
99
  <span style="text-align: center; color: green;">Only-Text Style</span>
89
- <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left' size='medium'/>
90
- <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right' size='medium'/>
91
- <PsButton label='Text Only' layout='onlytext' size='medium'/>
92
- <PsButton label='Disabled' layout='onlytext' disabled icon='verified' iconPosition='left' size='medium'/>
100
+ <PsButton label='Left Icon' layout='onlytext' iconLeft='verified' size='medium'/>
101
+ <PsButton label='Right Icon' layout='onlytext' iconRight='verified' size='medium'/>
102
+ <PsButton label='Both Icons' layout='onlytext' iconLeft='arrow_back' iconRight='arrow_forward' size='medium'/>
103
+ <PsButton label='Text Only' layout='onlytext' size='medium'/>
104
+ <PsButton label='Disabled' layout='onlytext' iconLeft='verified' disabled size='medium'/>
105
+ <PsButton label='Loading' layout='onlytext' iconLeft='verified' loading size='medium'/>
93
106
  </div>
94
- <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
107
+ <div style="display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
95
108
  <span style="text-align: center; color: red;">Caution Button</span>
96
- <PsButton label='Left Icon' layout='caution' icon='verified' iconPosition='left' size='medium'/>
97
- <PsButton label='Right Icon' layout='caution' icon='verified' iconPosition='right' size='medium'/>
98
- <PsButton label='Text Only' layout='caution' size='medium'/>
99
- <PsButton label='Disabled' layout='caution' icon='verified' iconPosition='left' disabled size='medium'/>
109
+ <PsButton label='Left Icon' layout='caution' iconLeft='verified' size='medium'/>
110
+ <PsButton label='Right Icon' layout='caution' iconRight='verified' size='medium'/>
111
+ <PsButton label='Both Icons' layout='caution' iconLeft='arrow_back' iconRight='arrow_forward' size='medium'/>
112
+ <PsButton label='Text Only' layout='caution' size='medium'/>
113
+ <PsButton label='Disabled' layout='caution' iconLeft='verified' disabled size='medium'/>
114
+ <PsButton label='Loading' layout='caution' iconLeft='verified' loading size='medium'/>
100
115
  </div>
101
116
  </div>
117
+
102
118
  <p>Size: Small</p>
103
119
  <div style="display: flex; flex-direction: column; gap: 10px;">
104
- <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
120
+ <div style="display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
105
121
  <span style="text-align: center; color: black;">Solid Style</span>
106
- <PsButton label='Left Icon' layout='solid' icon='verified' iconPosition='left' size='small'/>
107
- <PsButton label='Right Icon' layout='solid' icon='verified' iconPosition='right' size='small'/>
108
- <PsButton label='Text Only' layout='solid' size='small'/>
109
- <PsButton label='Disabled' layout='solid' icon='verified' iconPosition='left' disabled size='small'/>
122
+ <PsButton label='Left Icon' layout='solid' iconLeft='verified' size='small'/>
123
+ <PsButton label='Right Icon' layout='solid' iconRight='verified' size='small'/>
124
+ <PsButton label='Both Icons' layout='solid' iconLeft='arrow_back' iconRight='arrow_forward' size='small'/>
125
+ <PsButton label='Text Only' layout='solid' size='small'/>
126
+ <PsButton label='Disabled' layout='solid' iconLeft='verified' disabled size='small'/>
127
+ <PsButton label='Loading' layout='solid' iconLeft='verified' loading size='small'/>
110
128
  </div>
111
- <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
129
+ <div style="display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
112
130
  <span style="text-align: center; color: green;">Only-Text Style</span>
113
- <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left' size='small'/>
114
- <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right' size='small'/>
115
- <PsButton label='Text Only' layout='onlytext' size='small'/>
116
- <PsButton label='Disabled' layout='onlytext' disabled icon='verified' iconPosition='left' size='small'/>
131
+ <PsButton label='Left Icon' layout='onlytext' iconLeft='verified' size='small'/>
132
+ <PsButton label='Right Icon' layout='onlytext' iconRight='verified' size='small'/>
133
+ <PsButton label='Both Icons' layout='onlytext' iconLeft='arrow_back' iconRight='arrow_forward' size='small'/>
134
+ <PsButton label='Text Only' layout='onlytext' size='small'/>
135
+ <PsButton label='Disabled' layout='onlytext' iconLeft='verified' disabled size='small'/>
136
+ <PsButton label='Loading' layout='onlytext' iconLeft='verified' loading size='small'/>
117
137
  </div>
118
- <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
138
+ <div style="display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
119
139
  <span style="text-align: center; color: red;">Caution Button</span>
120
- <PsButton label='Left Icon' layout='caution' icon='verified' iconPosition='left' size='small'/>
121
- <PsButton label='Right Icon' layout='caution' icon='verified' iconPosition='right' size='small'/>
122
- <PsButton label='Text Only' layout='caution' size='small'/>
123
- <PsButton label='Disabled' layout='caution' disabled icon='verified' iconPosition='left' size='small'/>
140
+ <PsButton label='Left Icon' layout='caution' iconLeft='verified' size='small'/>
141
+ <PsButton label='Right Icon' layout='caution' iconRight='verified' size='small'/>
142
+ <PsButton label='Both Icons' layout='caution' iconLeft='arrow_back' iconRight='arrow_forward' size='small'/>
143
+ <PsButton label='Text Only' layout='caution' size='small'/>
144
+ <PsButton label='Disabled' layout='caution' iconLeft='verified' disabled size='small'/>
145
+ <PsButton label='Loading' layout='caution' iconLeft='verified' loading size='small'/>
124
146
  </div>
125
147
  </div>
126
- </div>
148
+ </div>
127
149
  `,
128
150
  })
129
151
 
package/doc/src/stories/DropdownList.stories.ts CHANGED
@@ -30,7 +30,7 @@ const Template = (args, { argTypes }) => ({
30
30
  template: `
31
31
  <div style="width:100%;" class="psui-flex psui-gap-8 psui-bg-gray-20 psui-rounded-xl psui-p-10">
32
32
  <div class="psui-w-1/2">
33
- <p class="psui-text-h4 psui-font-bold psui-text-blue-80 psui-mb-2">OnlyText</p>
33
+ <p class="psui-text-20 psui-font-bold psui-text-blue-80 psui-mb-2">OnlyText</p>
34
34
 
35
35
  <div class="psui-rounded psui-bg-white psui-shadow-elevation-20 psui-py-3">
36
36
  <PsDropdownList
@@ -46,7 +46,7 @@ const Template = (args, { argTypes }) => ({
46
46
  </div>
47
47
 
48
48
  <div class="psui-w-1/2">
49
- <p class="psui-text-h4 psui-font-bold psui-text-blue-80 psui-mb-2">Rich</p>
49
+ <p class="psui-text-20 psui-font-bold psui-text-blue-80 psui-mb-2">Rich</p>
50
50
 
51
51
  <div class="psui-rounded psui-bg-white psui-shadow-elevation-20 psui-py-3">
52
52
  <PsDropdownList
package/doc/src/stories/Typography.mdx CHANGED
@@ -18,9 +18,9 @@ Keeping typography consistent and sticking to logical hierarchies ensures that e
18
18
  <tr>
19
19
  <td class="psui-w-48">
20
20
  <p class="psui-font-bold">Headline 1</p>
21
- psui-text-h1
21
+ psui-text-28
22
22
  </td>
23
- <td class="psui-text-h1 psui-cursor-pointer click-to-copy" data-to-copy="psui-text-h1">The lazy fox jumped over the brown dog</td>
23
+ <td class="psui-text-28 psui-cursor-pointer click-to-copy" data-to-copy="psui-text-28">The lazy fox jumped over the brown dog</td>
24
24
  </tr>
25
25
  <tr>
26
26
  <td>
@@ -39,16 +39,16 @@ Keeping typography consistent and sticking to logical hierarchies ensures that e
39
39
  <tr>
40
40
  <td>
41
41
  <p class="psui-font-bold">Headline 4</p>
42
- psui-text-h4
42
+ psui-text-20
43
43
  </td>
44
- <td class="psui-text-h4 psui-cursor-pointer click-to-copy" data-to-copy="psui-text-h4">The lazy fox jumped over the brown dog</td>
44
+ <td class="psui-text-20 psui-cursor-pointer click-to-copy" data-to-copy="psui-text-20">The lazy fox jumped over the brown dog</td>
45
45
  </tr>
46
46
  <tr>
47
47
  <td>
48
48
  <p class="psui-font-bold">Headline 5</p>
49
- psui-text-h5
49
+ psui-text-18
50
50
  </td>
51
- <td class="psui-text-h5 psui-cursor-pointer click-to-copy" data-to-copy="psui-text-h5">The lazy fox jumped over the brown dog</td>
51
+ <td class="psui-text-18 psui-cursor-pointer click-to-copy" data-to-copy="psui-text-18">The lazy fox jumped over the brown dog</td>
52
52
  </tr>
53
53
  <tr>
54
54
  <td>
@@ -60,18 +60,18 @@ Keeping typography consistent and sticking to logical hierarchies ensures that e
60
60
  <tr>
61
61
  <td>
62
62
  <p class="psui-font-bold">Paragraph</p>
63
- psui-text-p
63
+ psui-text-16
64
64
  </td>
65
- <td class="psui-text-p psui-cursor-pointer click-to-copy" data-to-copy="psui-text-p">
65
+ <td class="psui-text-16 psui-cursor-pointer click-to-copy" data-to-copy="psui-text-16">
66
66
  This tool allows you to dive into the cost-effectiveness findings relevant to your City or County. We’ve also embedded explanations of terms and concepts throughout the tool, as well as much of the supplementary information contained in the cost-effectiveness studies.
67
67
  </td>
68
68
  </tr>
69
69
  <tr>
70
70
  <td>
71
71
  <p class="psui-font-bold">Small</p>
72
- psui-text-small
72
+ psui-text-14
73
73
  </td>
74
- <td class="psui-text-small psui-cursor-pointer click-to-copy" data-to-copy="psui-text-small">
74
+ <td class="psui-text-14 psui-cursor-pointer click-to-copy" data-to-copy="psui-text-14">
75
75
  This tool allows you to dive into the cost-effectiveness findings relevant to your City or County. We’ve also embedded explanations of terms and concepts throughout the tool, as well as much of the supplementary information contained in the cost-effectiveness studies.
76
76
  </td>
77
77
  </tr>
@@ -87,20 +87,20 @@ Keeping typography consistent and sticking to logical hierarchies ensures that e
87
87
  <tr>
88
88
  <td class="psui-flex psui-flex-col">
89
89
  <span class="psui-font-bold">Accent</span>
90
- <span>psui-text-accent</span>
90
+ <span>psui-text-14</span>
91
91
  <span>psui-uppercase</span>
92
92
  <span>psui-font-bold</span>
93
93
  </td>
94
- <td class="psui-text-accent psui-uppercase psui-font-bold psui-cursor-pointer click-to-copy" data-to-copy="psui-text-accent psui-uppercase psui-font-bold">The lazy fox jumped over the brown dog</td>
94
+ <td class="psui-text-14 psui-uppercase psui-font-bold psui-cursor-pointer click-to-copy" data-to-copy="psui-text-14 psui-uppercase psui-font-bold">The lazy fox jumped over the brown dog</td>
95
95
  </tr>
96
96
  <tr>
97
97
  <td class="psui-flex psui-flex-col">
98
98
  <span class="psui-font-bold">Accent Small</span>
99
- <span>psui-text-accentSmall</span>
99
+ <span>psui-text-14Small</span>
100
100
  <span>psui-uppercase</span>
101
101
  <span>psui-font-bold</span>
102
102
  </td>
103
- <td class="psui-text-accentSmall psui-uppercase psui-font-bold psui-cursor-pointer click-to-copy" data-to-copy="psui-text-accentSmall psui-uppercase psui-font-bold">The lazy fox jumped over the brown dog</td>
103
+ <td class="psui-text-14Small psui-uppercase psui-font-bold psui-cursor-pointer click-to-copy" data-to-copy="psui-text-14Small psui-uppercase psui-font-bold">The lazy fox jumped over the brown dog</td>
104
104
  </tr>
105
105
  </table>
106
106
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@policystudio/policy-studio-ui-vue",
3
- "version": "1.2.0-access.2",
3
+ "version": "1.2.0-access.21",
4
4
  "description": "Policy Studio UI",
5
5
  "author": "Policy Studio Team",
6
6
  "scripts": {
package/src/assets/scss/components/PsAccordion.scss CHANGED
@@ -25,21 +25,11 @@
25
25
  }
26
26
 
27
27
  &-header {
28
- @apply psui-flex psui-justify-between psui-items-center;
29
- padding-top: 16px;
30
- padding-bottom: 16px;
28
+ @apply psui-flex psui-justify-between psui-items-center psui-py-[10px];
29
+
31
30
 
32
31
  &-wrapper {
33
32
  @apply psui-flex psui-items-start psui-justify-between psui-w-full psui-cursor-pointer psui-transition-all transition-default psui-text-gray-80;
34
-
35
- &:hover {
36
- .psui-el-accordion-item-icon {
37
- @apply psui-text-blue-60 !important;
38
- }
39
- .psui-el-accordion-item-title{
40
- @apply psui-text-blue-60;
41
- }
42
- }
43
33
  }
44
34
  }
45
35
 
@@ -48,12 +38,26 @@
48
38
  }
49
39
 
50
40
  &-icon {
51
- @apply psui-icon;
41
+ @apply psui-icon psui-text-gray-60;
52
42
  font-size: 20px;
53
43
  width: 20px;
54
44
  transition: transform 0.4s ease-in-out;
55
45
  }
56
46
 
47
+ &:hover {
48
+ .psui-el-accordion-item-header-wrapper {
49
+ @apply psui-text-blue-60;
50
+ }
51
+ }
52
+
53
+ &:not(:hover) {
54
+ .psui-el-accordion-item-header-wrapper {
55
+ .psui-el-accordion-item-title {
56
+ @apply psui-text-gray-80;
57
+ }
58
+ }
59
+ }
60
+
57
61
  }
58
62
 
59
63
  &.layout-big {
@@ -62,7 +66,7 @@
62
66
  @apply psui-pl-4 psui-pr-4;
63
67
  }
64
68
  &-title {
65
- @apply psui-text-h5 psui-font-bold;
69
+ @apply psui-text-18 psui-font-semibold;
66
70
  }
67
71
  &-icon {
68
72
  @apply psui-text-gray-30
@@ -73,7 +77,7 @@
73
77
  &.layout-medium {
74
78
  .psui-el-accordion-item {
75
79
  &-title {
76
- @apply psui-text-small psui-font-bold;
80
+ @apply psui-text-14 psui-font-semibold;
77
81
  }
78
82
  &-icon {
79
83
  @apply psui-text-gray-60;
@@ -86,19 +90,6 @@
86
90
  }
87
91
  }
88
92
  }
89
-
90
- .psui-el-accordion-item {
91
- &.status-opened .psui-el-accordion-item-header {
92
- .psui-el-accordion-item-header-wrapper {
93
- .psui-el-accordion-item-icon {
94
- @apply psui-text-blue-60;
95
- }
96
- .psui-el-accordion-item-title{
97
- @apply psui-text-blue-60;
98
- }
99
- }
100
- }
101
- }
102
93
 
103
94
  .psui-el-accordion-item-content {
104
95
  @apply psui-list-none psui-text-gray-60 psui-mb-5;