bonkers-ui 1.0.30 → 1.0.31

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bonkers-ui",
3
- "version": "1.0.30",
3
+ "version": "1.0.31",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "storybook": "start-storybook -p 6006",
@@ -5,6 +5,7 @@ export enum EIconType {
5
5
  FAL = "fal",
6
6
  FAD = "fad",
7
7
  FAT = "fat",
8
+ BRAND = "brand",
8
9
  }
9
10
 
10
11
  export type TIconName = [EIconType, string];
@@ -1,33 +1,37 @@
1
1
 
2
2
  <template>
3
3
  <li
4
- class="ui-list-item flex gap-xs relative group"
4
+ class="ui-list-item grid grid-flow-col justify-start gap-xs relative group"
5
5
  :class="[
6
6
  size === EListItemSizes.DEFAULT && 'pb-md',
7
7
  size === EListItemSizes.COMPACT && 'pb-xs'
8
8
  ]"
9
9
  >
10
10
  <div
11
- v-if="kind===EListItemTypes.PROGRESS"
11
+ v-if="kind === EListItemTypes.PROGRESS"
12
12
  class="ui-list-item__line bg-primary-300 h-full absolute w-xxs left-xs -translate-x-2/4 top-sm group-last:hidden"
13
13
  />
14
14
 
15
- <ui-icon
16
- v-if="icon"
17
- class="bg-white text-primary"
18
- :icon-name="icon"
19
- :size="ESize.SM"
20
- />
15
+ <slot name="icon">
16
+ <ui-icon
17
+ v-if="icon"
18
+ class="bg-white"
19
+ :icon-name="icon"
20
+ :size="ESize.SM"
21
+ />
22
+ </slot>
21
23
 
22
- <div>
24
+ <span>
23
25
  <ui-typography
24
26
  v-if="title"
25
27
  :weight="ETextWeight.SEMI_BOLD"
28
+ line-height
26
29
  >
27
30
  {{ title }}
31
+
28
32
  </ui-typography>
29
33
  <slot />
30
- </div>
34
+ </span>
31
35
  </li>
32
36
  </template>
33
37
 
@@ -34,10 +34,10 @@
34
34
  bg-white
35
35
  peer-disabled:border-secondary-alt-400
36
36
  peer-disabled:bg-secondary-alt-200
37
- peer-focus:shadow-border-primary
38
37
  peer-checked:border-primary
39
38
  peer-checked:border-2
40
39
  peer-checked:hover:border-primary-600
40
+ peer-focus:shadow-border-primary
41
41
  group-hover:border-secondary-alt-700
42
42
  group-focus:border-secondary-alt-700"
43
43
  :class="invertOrder && 'order-last'"
@@ -22,20 +22,38 @@
22
22
  hover:border-secondary-alt-700
23
23
  cursor-pointer
24
24
  rounded-xl
25
- active:bg-secondary-alt-200
26
25
  peer-checked:border-transparent
27
26
  peer-checked:active:shadow-border-primary
28
27
  peer-checked:hover:shadow-border-selected
29
28
  peer-checked:shadow-selected-shadow
30
- peer-checked:before:absolute
31
- peer-checked:before:-top-xs
32
- peer-checked:before:-bottom-xs
33
- peer-checked:before:-left-xs
34
- peer-checked:before:-right-xs
35
- peer-checked:before:bg-primary-300
36
- peer-checked:before:rounded-[20px]
37
- peer-checked:before:box-border
38
- peer-checked:before:-z-10
29
+ peer-focus:before:absolute
30
+ peer-focus:before:-top-xs
31
+ peer-focus:before:-bottom-xs
32
+ peer-focus:before:-left-xs
33
+ peer-focus:before:-right-xs
34
+ peer-focus:before:bg-primary-300
35
+ peer-focus:before:rounded-[20px]
36
+ peer-focus:before:box-border
37
+ peer-focus:before:-z-10
38
+ peer-active:before:absolute
39
+ peer-active:before:-top-xxs
40
+ peer-active:before:-bottom-xxs
41
+ peer-active:before:-left-xxs
42
+ peer-active:before:-right-xxs
43
+ peer-active:before:bg-primary-300
44
+ peer-active:before:rounded-[16px]
45
+ peer-active:before:box-border
46
+ peer-active:before:-z-10
47
+ active:bg-secondary-alt-200
48
+ active:before:absolute
49
+ active:before:-top-xs
50
+ active:before:-bottom-xs
51
+ active:before:-left-xs
52
+ active:before:-right-xs
53
+ active:before:bg-primary-300
54
+ active:before:rounded-[20px]
55
+ active:before:box-border
56
+ active:before:-z-10
39
57
  "
40
58
  :class="disabled && 'pointer-events-none'"
41
59
  >
@@ -84,7 +84,7 @@
84
84
  textTransform === ETextTransform.LOWERCASE && 'lowercase',
85
85
  textTransform === ETextTransform.UPPERCASE && 'uppercase',
86
86
 
87
- lineHeight && 'ui-typography_line-height',
87
+ lineHeight && 'leading-4',
88
88
  underline && 'underline',
89
89
  ]"
90
90
  >
@@ -107,9 +107,3 @@
107
107
  is?: string;
108
108
  }>();
109
109
  </script>
110
-
111
- <style scoped>
112
- .ui-typography_line-height {
113
- line-height: var(--base-line-height);
114
- }
115
- </style>