@policystudio/policy-studio-ui-vue 1.0.22 → 1.0.23

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 (21) hide show
  1. package/dist/css/psui_styles.css +1008 -60
  2. package/package.json +5 -3
  3. package/src/assets/scss/base.scss +6 -0
  4. package/src/assets/scss/components/PsAccordion.scss +63 -0
  5. package/src/assets/scss/components/PsButton.scss +145 -0
  6. package/src/assets/scss/components/PsInput.scss +48 -33
  7. package/src/components/accordion/PsAccordion.vue +28 -23
  8. package/src/components/accordion/PsAccordionItem.vue +29 -67
  9. package/src/components/badges-and-tags/PsCardInfos.vue +38 -0
  10. package/src/components/badges-and-tags/PsChartLegend.vue +17 -102
  11. package/src/components/buttons/PsButton.vue +42 -94
  12. package/src/components/controls/PsToggle.vue +1 -1
  13. package/src/components/forms/PsInput.vue +1 -1
  14. package/src/components/notifications/PsDialog.vue +1 -1
  15. package/src/components/tabs/PsTabHeader.vue +3 -2
  16. package/src/index.js +6 -0
  17. package/src/stories/Accordion.stories.js +70 -16
  18. package/src/stories/Button.stories.js +83 -35
  19. package/src/stories/CardInfos.stories.js +16 -0
  20. package/src/stories/Input.stories.js +36 -15
  21. package/tailwind.config.js +3 -2
package/src/stories/Input.stories.js CHANGED
@@ -22,24 +22,20 @@ const TemplateDefault = (args, { argTypes }) => ({
22
22
  template: `
23
23
  <div class="psui-p-8 psui-bg-gray-10 psui-grid psui-grid-cols-3 psui-gap-6">
24
24
 
25
- <PsInput v-bind="{...$props, label: 'Resting with hint', placeholder: '', value: '' }" />
26
-
27
- <PsInput label="Resting without hint" />
25
+ <div class="psui-col-span-3 psui-mt-8">
26
+ <h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSInput Layout Default</h1>
27
+ </div>
28
28
 
29
+ <PsInput v-bind="{...$props, label: 'Resting with hint', placeholder: '', value: '' }" />
30
+ <PsInput label="Resting without hint" />
29
31
  <PsInput label="Resting with Placeholder" placeholder="This is a placeholder" />
30
32
 
31
-
32
33
  <PsInput v-bind="{...$props, label: 'Focus'}" />
33
-
34
34
  <PsInput label="Typing" placeholder="Type to see the effect..." />
35
-
36
35
  <PsInput v-bind="{...$props, label: 'Active', active: true }" />
37
36
 
38
-
39
37
  <PsInput v-bind="{...$props, label: 'Error', hasError: true }" />
40
-
41
- <PsInput v-bind="{...$props, label: 'Error with custom message', hasError: 'Format invalid' }" />
42
-
38
+ <PsInput v-bind="{...$props, label: 'Error with custom message', hasError: 'Format invalid' }" />
43
39
  <PsInput v-bind="{...$props, label: 'Prepend / Append ' }" >
44
40
  <template v-slot:append>
45
41
  Append
@@ -49,12 +45,40 @@ const TemplateDefault = (args, { argTypes }) => ({
49
45
  </template>
50
46
  </PsInput>
51
47
 
52
-
53
48
  <PsInput label="Disabled" :disabled="true" value="100,000" />
54
49
  <PsInput v-bind="{...$props, label: 'Disabled without value', disabled: true, value: '', hint: false }" />
55
50
  <PsInput v-bind="{...$props, label: 'Active/Disabled', disabled: true, active: true }" />
56
51
 
57
- </div>
52
+
53
+
54
+ <div class="psui-col-span-3 psui-mt-8">
55
+ <h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSInput Layout Mini</h1>
56
+ </div>
57
+
58
+ <PsInput layout="mini" label="Resting with hint" hint="This is a hint" value="1,653" />
59
+ <PsInput layout="mini" label="Resting without hint" />
60
+ <PsInput layout="mini" label="Resting with Placeholder" placeholder="This is a placeholder" />
61
+
62
+ <PsInput layout="mini" v-bind="{...$props, label: 'Focus'}" />
63
+ <PsInput layout="mini" label="Typing" placeholder="Type to see the effect..." />
64
+ <PsInput layout="mini" v-bind="{...$props, label: 'Active', active: true }" />
65
+
66
+ <PsInput layout="mini" v-bind="{...$props, label: 'Error', hasError: true }" />
67
+ <PsInput layout="mini" v-bind="{...$props, label: 'Error with custom message', hasError: 'Format invalid' }" />
68
+ <PsInput layout="mini" v-bind="{...$props, label: 'Prepend / Append ' }" >
69
+ <template v-slot:append>
70
+ Append
71
+ </template>
72
+ <template v-slot:prepend>
73
+ Prepend
74
+ </template>
75
+ </PsInput>
76
+
77
+ <PsInput layout="mini" label="Disabled" :disabled="true" value="100,000" />
78
+ <PsInput layout="mini" v-bind="{...$props, label: 'Disabled without value', disabled: true, value: '', hint: false }" />
79
+ <PsInput layout="mini" v-bind="{...$props, label: 'Active/Disabled', disabled: true, active: true }" />
80
+
81
+ </div>
58
82
  `
59
83
  })
60
84
 
@@ -92,7 +116,6 @@ InputText.args = {
92
116
  hint: 'Optional Assistive text',
93
117
  disabled: false,
94
118
  required: false,
95
- mini: false,
96
119
  value: 10,
97
120
  }
98
121
 
@@ -103,7 +126,6 @@ InputPassword.args = {
103
126
  hint: 'Optional Assistive text',
104
127
  disabled: false,
105
128
  required: false,
106
- mini: false,
107
129
  }
108
130
 
109
131
  export const InputSlots = TemplateSlots.bind({})
@@ -113,5 +135,4 @@ InputSlots.args = {
113
135
  hint: 'Optional Assistive text',
114
136
  disabled: false,
115
137
  required: false,
116
- mini: false,
117
138
  }
package/tailwind.config.js CHANGED
@@ -4,7 +4,7 @@ module.exports = {
4
4
  darkMode: false, // or 'media' or 'class'
5
5
  theme: {
6
6
  colors: {
7
- white: '#ffffff !important',
7
+ 'white': '#ffffff !important',
8
8
  'gray-10': '#F3F6F9',
9
9
  'gray-20': '#E6ECF2',
10
10
  'gray-30': '#D6DDE5',
@@ -14,7 +14,7 @@ module.exports = {
14
14
  'gray-70': '#34404A',
15
15
  'gray-80': '#28323B',
16
16
 
17
- blue: '#5094D3',
17
+ 'blue': '#5094D3',
18
18
  'blue-10': '#ECF7FB',
19
19
  'blue-20': '#E0EFF6',
20
20
  'blue-50': '#64B5CE',
@@ -44,6 +44,7 @@ module.exports = {
44
44
  orange: '#FF906D',
45
45
  pink: '#FF77B8',
46
46
  purple: '#9278C9',
47
+ transparent: 'transparent',
47
48
  },
48
49
  fontFamily: {
49
50
  sans: ['Lato'],