@policystudio/policy-studio-ui-vue 1.0.60 → 1.0.63

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 (16) hide show
  1. package/.github/workflows/deploy-storybook.yml +47 -0
  2. package/dist/css/psui_styles.css +206 -213
  3. package/package.json +1 -1
  4. package/src/assets/scss/components/PsMiniTag.scss +52 -53
  5. package/src/assets/scss/components/PsTabHeader.scss +1 -3
  6. package/src/components/badges-and-tags/PsMiniTag.vue +5 -1
  7. package/src/components/buttons/PsButton.vue +17 -3
  8. package/src/components/chips/PsChips.vue +19 -2
  9. package/src/components/controls/PsCheckboxSimple.vue +2 -3
  10. package/src/components/controls/PsDraggable.vue +3 -4
  11. package/src/components/forms/PsDropdown.vue +9 -0
  12. package/src/components/forms/PsInputTextArea.vue +16 -16
  13. package/src/stories/Button.stories.js +20 -15
  14. package/src/stories/CheckboxSimple.stories.js +2 -2
  15. package/tailwind.config.js +1 -1
  16. package/vercel.json +11 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@policystudio/policy-studio-ui-vue",
3
- "version": "1.0.60",
3
+ "version": "1.0.63",
4
4
  "description": "Policy Studio UI",
5
5
  "main": "src/index.js",
6
6
  "author": "Policy Studio Team",
package/src/assets/scss/components/PsMiniTag.scss CHANGED
@@ -1,56 +1,55 @@
1
1
  @layer components {
2
- .psui-el-mini-tag {
3
- @apply psui-flex psui-rounded-lg psui-items-center psui-justify-center psui-flex-row;
4
- width: fit-content;
5
-
6
-
7
- span {
8
- @apply psui-w-full psui-font-bold psui-uppercase;
9
- padding: 3px 8px 3px 8px;
10
- font-size: 10px;
11
- letter-spacing: 0.5px;
12
- }
13
-
14
- &-layout{
15
- &-solid-info{
16
- @apply psui-bg-blue-50 psui-text-white
17
- }
18
-
19
- &-info {
20
- @apply psui-bg-blue-20 psui-text-blue-60
21
- }
22
-
23
- &-solid-success {
24
- @apply psui-bg-green-20 psui-text-white
25
- }
26
-
27
- &-success {
28
- @apply psui-bg-green-10 psui-text-green-70
29
- }
30
-
31
- &-solid-warning {
32
- @apply psui-bg-yellow-20 psui-text-white
33
- }
34
-
35
- &-warning {
36
- @apply psui-bg-yellow-10 psui-text-yellow-70
37
- }
38
-
39
- &-solid-error {
40
- @apply psui-bg-red-20 psui-text-white
41
- }
42
-
43
- &-error {
44
- @apply psui-bg-red-10 psui-text-red-20
45
- }
46
-
47
- &-solid-default {
48
- @apply psui-bg-gray-40 psui-text-white
49
- }
50
-
51
- &-default {
52
- @apply psui-bg-gray-20 psui-text-gray-50
53
- }
54
- }
2
+ .psui-el-mini-tag {
3
+ @apply psui-flex psui-rounded-full psui-items-center psui-justify-center psui-flex-row;
4
+ width: fit-content;
5
+
6
+ span {
7
+ @apply psui-w-full psui-font-bold psui-uppercase;
8
+ padding: 3px 8px 3px 8px;
9
+ font-size: 10px;
10
+ letter-spacing: 0.5px;
55
11
  }
12
+
13
+ &-layout{
14
+ &-solid-info{
15
+ @apply psui-bg-blue-50 psui-text-white
16
+ }
17
+
18
+ &-info {
19
+ @apply psui-bg-blue-20 psui-text-blue-60
20
+ }
21
+
22
+ &-solid-success {
23
+ @apply psui-bg-green-20 psui-text-white
24
+ }
25
+
26
+ &-success {
27
+ @apply psui-bg-green-10 psui-text-green-70
28
+ }
29
+
30
+ &-solid-warning {
31
+ @apply psui-bg-yellow-20 psui-text-white
32
+ }
33
+
34
+ &-warning {
35
+ @apply psui-bg-yellow-10 psui-text-yellow-70
36
+ }
37
+
38
+ &-solid-error {
39
+ @apply psui-bg-red-20 psui-text-white
40
+ }
41
+
42
+ &-error {
43
+ @apply psui-bg-red-10 psui-text-red-20
44
+ }
45
+
46
+ &-solid-default {
47
+ @apply psui-bg-gray-40 psui-text-white
48
+ }
49
+
50
+ &-default {
51
+ @apply psui-bg-gray-20 psui-text-gray-50
52
+ }
53
+ }
54
+ }
56
55
  }
package/src/assets/scss/components/PsTabHeader.scss CHANGED
@@ -67,9 +67,7 @@
67
67
  /* Layout Underline */
68
68
  /* ----------------------------------------- */
69
69
  &.layout-underline {
70
- @apply psui-border-b psui-border-gray-20;
71
-
72
- .psui-el-tooltip{
70
+ .psui-el-tooltip {
73
71
  &:not(:last-child) {
74
72
  margin-right: 20px;
75
73
  }
package/src/components/badges-and-tags/PsMiniTag.vue CHANGED
@@ -1,5 +1,9 @@
1
1
  <template>
2
- <div class="psui-el-mini-tag" :class="getComponentClass" @click="$emit('click', $event.target)" >
2
+ <div
3
+ class="psui-el-mini-tag"
4
+ :class="getComponentClass"
5
+ @click="$emit('click', $event.target)"
6
+ >
3
7
  <span>{{ message }}</span>
4
8
  </div>
5
9
  </template>
package/src/components/buttons/PsButton.vue CHANGED
@@ -4,9 +4,16 @@
4
4
  @mouseenter="onMouseEnter"
5
5
  @mouseleave="onMouseLeave"
6
6
  class='psui-el-button'
7
- :class="[getComponentClass, {'hover': isHover}, {'disabled': disabled}]"
7
+ :class="[getComponentClass, {'hover': isHover}, {'disabled': disabled || loading }]"
8
8
  >
9
- <i v-if="icon" :class='iconClass' class='material-icons-round'>{{icon}}</i>
9
+ <svg v-if="loading"
10
+ class="psui-animate-spin psui-mr-3 psui-h-5 psui-w-5 psui-text-black"
11
+ :class="`${iconPosition == 'left' ? 'psui-mr-3' : 'psui-ml-3 psui--mr-1'}`"
12
+ xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
13
+ <circle class="psui-opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
14
+ <path class="psui-opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
15
+ </svg>
16
+ <i v-else-if="icon" :class='iconClass' class='material-icons-round'>{{icon}}</i>
10
17
  <span v-if="label">{{ label }}</span>
11
18
  </button>
12
19
  </template>
@@ -57,6 +64,13 @@ export default {
57
64
  type: Boolean,
58
65
  default: false
59
66
  },
67
+ /**
68
+ * It disable and add a spin icon to the button. All mouse event are disabled.
69
+ */
70
+ loading: {
71
+ type: Boolean,
72
+ default: false
73
+ },
60
74
  /**
61
75
  * It set any further css style that might be needed.
62
76
  */
@@ -76,7 +90,7 @@ export default {
76
90
  } else {
77
91
  return `layout-${this.layout} size-${this.size}`
78
92
  }
79
- }
93
+ },
80
94
  },
81
95
  methods: {
82
96
  onClick() {
package/src/components/chips/PsChips.vue CHANGED
@@ -8,12 +8,12 @@
8
8
  :disabled="disabled"
9
9
  v-if="type != 'button'"
10
10
  :type="type"
11
- :id="label"
11
+ :id="getInputId"
12
12
  :checked="checked"
13
13
  />
14
14
  <label
15
15
  :disabled="disabled"
16
- :for="label"
16
+ :for="getInputId"
17
17
  :class="{'checked':checked && type === 'button'}"
18
18
  >
19
19
  <i v-if="icon" class="psui-el-chips-icon psui-el-chips-icon-prepend">{{ icon }}</i>
@@ -31,6 +31,7 @@
31
31
 
32
32
  <script>
33
33
  export const type = ['radio', 'checkbox', 'button']
34
+ import { randomString } from '../../util/GeneralFunctions'
34
35
 
35
36
  export default {
36
37
  name: 'PsChips',
@@ -87,6 +88,13 @@ export default {
87
88
  type: Boolean,
88
89
  default: false
89
90
  },
91
+ /**
92
+ * Add html attributes to the element input
93
+ */
94
+ inputAttrs: {
95
+ type: Object,
96
+ default: () => ({})
97
+ },
90
98
  },
91
99
  emits: ['click', 'change'],
92
100
  computed: {
@@ -97,6 +105,15 @@ export default {
97
105
  return 'status-resting'
98
106
  }
99
107
  },
108
+ getInputId() {
109
+ if (this?.inputAttrs?.id) {
110
+ return this.inputAttrs.id
111
+ } else if (this?.$attrs?.id) {
112
+ return this.$attrs.id
113
+ } else {
114
+ return randomString(16)
115
+ }
116
+ },
100
117
  },
101
118
  methods: {
102
119
  onClick() {
package/src/components/controls/PsCheckboxSimple.vue CHANGED
@@ -1,7 +1,6 @@
1
1
  <template>
2
2
  <div
3
3
  class='psui-el-checkbox'
4
- @click="$emit('click')"
5
4
  :class="[getComponentClass, {'disabled':disabled}]"
6
5
  v-bind="getComponentAttrs"
7
6
  >
@@ -12,6 +11,7 @@
12
11
  :name="label"
13
12
  :id="getInputId"
14
13
  v-bind="inputAttrs"
14
+ @change="$emit('change')"
15
15
  />
16
16
  <label
17
17
  :for="getInputId"
@@ -91,8 +91,7 @@ export default {
91
91
  },
92
92
  getComponentAttrs() {
93
93
  let componentAttrs = { ... this.$attrs }
94
- // delete componentAttrs.id
95
- console.log('componentAttrs', componentAttrs)
94
+ delete componentAttrs.id
96
95
  return componentAttrs
97
96
  }
98
97
  },
package/src/components/controls/PsDraggable.vue CHANGED
@@ -32,14 +32,14 @@
32
32
  class="psui-w-full psui-flex psui-items-center"
33
33
  >
34
34
  <span class="psui-el-draggable-item-title">
35
- <PsCheckbox
35
+ <PsCheckboxSimple
36
36
  size="small"
37
- :value="column.isActive"
38
37
  :label="column.title"
39
38
  :class="{'active' : column.isActive}"
39
+ :checked="column.isActive"
40
40
  :disabled="column.isDisabled"
41
41
  class="psui-el-draggable-item-checkbox"
42
- @input="$emit('on-select-item', { studyKey: getColumns.key, indexColumnGroup, indexColumn, columnGroupKey: columnGroup.key })"
42
+ @change="$emit('on-select-item', { studyKey: getColumns.key, indexColumnGroup, indexColumn, columnGroupKey: columnGroup.key })"
43
43
  />
44
44
  </span>
45
45
  <span class="psui-el-draggable-item-append">
@@ -80,7 +80,6 @@ export default {
80
80
  },
81
81
  computed: {
82
82
  getStatus() {
83
- console.log('var:', this.column.key)
84
83
  if (this.column.key == 'compliance_margin') {
85
84
  return true
86
85
  } else {
package/src/components/forms/PsDropdown.vue CHANGED
@@ -70,6 +70,13 @@ export default {
70
70
  type: Boolean,
71
71
  default: true,
72
72
  },
73
+ /**
74
+ * Disable the toogle on click. default: false.
75
+ */
76
+ disabled: {
77
+ type: Boolean,
78
+ default: false,
79
+ },
73
80
  },
74
81
  data() {
75
82
  return {
@@ -90,6 +97,8 @@ export default {
90
97
  },
91
98
  methods: {
92
99
  toggle() {
100
+ if (this.disabled) return
101
+
93
102
  if (!this.show) {
94
103
  this.open()
95
104
  } else {
package/src/components/forms/PsInputTextArea.vue CHANGED
@@ -7,9 +7,10 @@
7
7
  :autocapitalize="autocapitalize"
8
8
  :aria-required="required"
9
9
  :value="value"
10
- @blur="onBlur"
11
- @focus="onFocus"
12
- @input="onInput"
10
+ @focus="onInputFocus"
11
+ @blur="onInputBlur"
12
+ @input="$emit('input', $event)"
13
+ @change="$emit('change', $event)"
13
14
  :rows="rows"
14
15
  :placeholder="placeholder"
15
16
  :readonly='disabled'
@@ -52,8 +53,8 @@ export default {
52
53
  * It sets aria-required property. eg: true or false.
53
54
  */
54
55
  required:{
55
- type: Boolean,
56
- default:true
56
+ type: Boolean,
57
+ default:true
57
58
  },
58
59
  /**
59
60
  * It sets the type of autocapitalize. See mdn web-doc for full information. default: sentences.
@@ -73,19 +74,18 @@ export default {
73
74
  * It disabled the textarea input. All mouse events are disabled.
74
75
  */
75
76
  disabled: {
76
- type: Boolean,
77
- default: false,
77
+ type: Boolean,
78
+ default: false,
78
79
  }
80
+ },
81
+ methods: {
82
+ onInputFocus($event) {
83
+ this.isFocus = true
84
+ this.$emit('focus', $event)
79
85
  },
80
- methods: {
81
- onBlur(){
82
- this.$emit('blur', this.$event)
83
- },
84
- onFocus(){
85
- this.$emit('focus',this.$event)
86
- },
87
- onInput(){
88
- this.$emit('input', this.$event)
86
+ onInputBlur($event) {
87
+ this.isFocus = false
88
+ this.$emit('blur', $event)
89
89
  }
90
90
  }
91
91
  }
package/src/stories/Button.stories.js CHANGED
@@ -15,78 +15,83 @@ const TemplateDefault = (args, { argTypes }) => ({
15
15
  props: Object.keys(argTypes),
16
16
  components: { PsButton },
17
17
  template: `
18
- <div style="display:flex; flex-direction: column;">
18
+ <div style="display:flex; flex-direction: column;">
19
19
  <p>Size: Big</p>
20
20
  <div style="display: flex; flex-direction: column; gap: 10px;">
21
- <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;">
21
+ <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;">
22
22
  <span style="text-align: center; color: black;">Solid Style</span>
23
23
  <PsButton label='Left Icon' layout='solid' icon='verified' iconPosition='left'/>
24
24
  <PsButton label='Right Icon' layout='solid' icon='verified' iconPosition='right'/>
25
25
  <PsButton label='Text Only' layout='solid' />
26
- <PsButton label='Disabled' layout='solid' icon='verified' iconPosition='left' disabled/>
26
+ <PsButton label='Disabled' layout='solid' icon='verified' iconPosition='left' disabled/>
27
+ <PsButton label='Loading Solid' layout='solid' icon='verified' iconPosition='left' loading />
27
28
  </div>
28
- <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
29
+ <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
29
30
  <span style="text-align: center; color: blue;">Outline Style</span>
30
31
  <PsButton label='Left Icon' layout='outline' icon='verified' iconPosition='left'/>
31
32
  <PsButton label='Right Icon' layout='outline' icon='verified' iconPosition='right'/>
32
33
  <PsButton label='Text Only' layout='outline'/>
33
34
  <PsButton label='Disabled' layout='outline' icon='verified' iconPosition='left' disabled/>
35
+ <PsButton label='Loading Outline' layout='outline' icon='verified' iconPosition='left' loading />
34
36
  </div>
35
- <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
37
+ <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
36
38
  <span style="text-align: center; color: brown;">Ghost Style</span>
37
39
  <PsButton label='Left Icon' layout='ghost' icon='verified' iconPosition='left'/>
38
40
  <PsButton label='Right Icon' layout='ghost' icon='verified' iconPosition='right'/>
39
41
  <PsButton label='Text Only' layout='ghost' />
40
42
  <PsButton label='Disabled' layout='ghost' icon='verified' iconPosition='left' disabled/>
43
+ <PsButton label='Loading Ghost' layout='ghost' icon='verified' iconPosition='left' loading />
41
44
  </div>
42
- <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
45
+ <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
43
46
  <span style="text-align: center; color: green;">Only-Text Style</span>
44
47
  <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left'/>
45
48
  <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right'/>
46
49
  <PsButton label='Text Only' layout='onlytext'/>
47
50
  <PsButton label='Disabled' layout='onlytext' icon='verified' iconPosition='left' disabled/>
51
+ <PsButton label='Loading Only-Text' layout='onlytext' icon='verified' iconPosition='left' loading />
48
52
  </div>
49
- <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
53
+ <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
50
54
  <span style="text-align: center; color: red;">Caution Button</span>
51
55
  <PsButton label='Left Icon' layout='caution' icon='verified' iconPosition='left'/>
52
56
  <PsButton label='Right Icon' layout='caution' icon='verified' iconPosition='right'/>
53
57
  <PsButton label='Text Only' layout='caution' />
54
58
  <PsButton label='Disabled' layout='caution' icon='verified' iconPosition='left' disabled/>
59
+ <PsButton label='Loading Caution' layout='caution' icon='verified' iconPosition='left' loading />
55
60
  </div>
56
61
 
57
62
 
58
63
  </div>
59
64
  <p>Size: Medium</p>
60
65
  <div style="display: flex; flex-direction: column; gap: 10px;">
61
- <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
66
+ <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
62
67
  <span style="text-align: center; color: black;">Solid Style</span>
63
68
  <PsButton label='Left Icon' layout='solid' icon='verified' iconPosition='left' size='medium'/>
64
69
  <PsButton label='Right Icon' layout='solid' icon='verified' iconPosition='right' size='medium'/>
65
70
  <PsButton label='Text Only' layout='solid' size='medium'/>
66
71
  <PsButton label='Disabled' layout='solid' icon='verified' iconPosition='left' disabled size='medium'/>
67
72
  </div>
68
- <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
73
+ <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
69
74
  <span style="text-align: center; color: blue;">Outline Style</span>
70
75
  <PsButton label='Left Icon' layout='outline' icon='verified' iconPosition='left' size='medium'/>
71
76
  <PsButton label='Right Icon' layout='outline' icon='verified' iconPosition='right' size='medium'/>
72
77
  <PsButton label='Text Only' layout='outline' size='medium'/>
73
78
  <PsButton label='Disabled' layout='outline' icon='verified' iconPosition='left' disabled size='medium'/>
74
79
  </div>
75
- <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
80
+ <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
76
81
  <span style="text-align: center; color: brown;">Ghost Style</span>
77
82
  <PsButton label='Left Icon' layout='ghost' icon='verified' iconPosition='left' size='medium'/>
78
83
  <PsButton label='Right Icon' layout='ghost' icon='verified' iconPosition='right' size='medium'/>
79
84
  <PsButton label='Text Only' layout='ghost' size='medium'/>
80
85
  <PsButton label='Disabled' layout='ghost' icon='verified' iconPosition='left' disabled size='medium'/>
81
86
  </div>
82
- <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
87
+ <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
83
88
  <span style="text-align: center; color: green;">Only-Text Style</span>
84
89
  <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left' size='medium'/>
85
90
  <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right' size='medium'/>
86
91
  <PsButton label='Text Only' layout='onlytext' size='medium'/>
87
92
  <PsButton label='Disabled' layout='onlytext' disabled icon='verified' iconPosition='left' size='medium'/>
88
93
  </div>
89
- <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
94
+ <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
90
95
  <span style="text-align: center; color: red;">Caution Button</span>
91
96
  <PsButton label='Left Icon' layout='caution' icon='verified' iconPosition='left' size='medium'/>
92
97
  <PsButton label='Right Icon' layout='caution' icon='verified' iconPosition='right' size='medium'/>
@@ -96,21 +101,21 @@ const TemplateDefault = (args, { argTypes }) => ({
96
101
  </div>
97
102
  <p>Size: Small</p>
98
103
  <div style="display: flex; flex-direction: column; gap: 10px;">
99
- <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
104
+ <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
100
105
  <span style="text-align: center; color: black;">Solid Style</span>
101
106
  <PsButton label='Left Icon' layout='solid' icon='verified' iconPosition='left' size='small'/>
102
107
  <PsButton label='Right Icon' layout='solid' icon='verified' iconPosition='right' size='small'/>
103
108
  <PsButton label='Text Only' layout='solid' size='small'/>
104
109
  <PsButton label='Disabled' layout='solid' icon='verified' iconPosition='left' disabled size='small'/>
105
110
  </div>
106
- <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
111
+ <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
107
112
  <span style="text-align: center; color: green;">Only-Text Style</span>
108
113
  <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left' size='small'/>
109
114
  <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right' size='small'/>
110
115
  <PsButton label='Text Only' layout='onlytext' size='small'/>
111
116
  <PsButton label='Disabled' layout='onlytext' disabled icon='verified' iconPosition='left' size='small'/>
112
117
  </div>
113
- <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
118
+ <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
114
119
  <span style="text-align: center; color: red;">Caution Button</span>
115
120
  <PsButton label='Left Icon' layout='caution' icon='verified' iconPosition='left' size='small'/>
116
121
  <PsButton label='Right Icon' layout='caution' icon='verified' iconPosition='right' size='small'/>
package/src/stories/CheckboxSimple.stories.js CHANGED
@@ -23,8 +23,8 @@ const defaultTemplate = (args, {argTypes}) => ({
23
23
  <div style='display:flex; flex-direction:column; gap:5px;'>
24
24
  <p>Active</p>
25
25
  <div style='display: flex; flex-direction:column; gap: 10px;'>
26
- <PsCheckboxSimple v-bind="$props" label='Label 3' checked />
27
- <PsCheckboxSimple v-bind="$props" label='Label 4' checked size='small'/>
26
+ <PsCheckboxSimple v-bind="$props" label='Label 3' checked />
27
+ <PsCheckboxSimple v-bind="$props" label='Label 4' checked size='small'/>
28
28
  </div>
29
29
  </div>
30
30
  <div style='display:flex; flex-direction:column; gap:5px;'>
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 ',
8
8
  'gray-10': '#F3F6F9',
9
9
  'gray-20': '#E6ECF2',
10
10
  'gray-30': '#D6DDE5',
package/vercel.json ADDED
@@ -0,0 +1,11 @@
1
+ {
2
+ "version": 2,
3
+ "public": false,
4
+ "github": {
5
+ "enabled": false
6
+ },
7
+ "rewrites": [
8
+ { "source": "/(.*)", "destination": "/index.html" },
9
+ { "source": "/:path*", "destination": "/index.html" }
10
+ ]
11
+ }