@agility/plenum-ui 2.0.0-rc19 → 2.0.0-rc20

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 (9) hide show
  1. package/dist/index.d.ts +2 -2
  2. package/dist/index.js +1 -1
  3. package/dist/index.js.map +2 -2
  4. package/dist/types/stories/organisms/DropdownComponent/DropdownComponent.d.ts +2 -2
  5. package/package.json +1 -1
  6. package/stories/atoms/buttons/Button/Button.tsx +15 -14
  7. package/stories/organisms/ButtonDropdown/ButtonDropdown.stories.tsx +59 -58
  8. package/stories/organisms/DropdownComponent/DropdownComponent.tsx +62 -54
  9. package/stories/organisms/DropdownComponent/dropdownItems.ts +24 -0
package/dist/types/stories/organisms/DropdownComponent/DropdownComponent.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import React, { HTMLAttributes } from "react";
2
2
  import { Placement } from "@floating-ui/react";
3
3
  import { ClassNameWithAutocomplete } from "utils/types";
4
- import { IDynamicIconProps, UnifiedIconName } from "@/stories/atoms/icons";
4
+ import { IDynamicIconProps } from "@/stories/atoms/icons";
5
5
  export interface IItemProp extends HTMLAttributes<HTMLButtonElement> {
6
- icon?: IDynamicIconProps | UnifiedIconName;
6
+ icon?: IDynamicIconProps;
7
7
  iconPosition?: "trailing" | "leading";
8
8
  label: string;
9
9
  onClick?(): void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@agility/plenum-ui",
3
- "version": "2.0.0-rc19",
3
+ "version": "2.0.0-rc20",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",
package/stories/atoms/buttons/Button/Button.tsx CHANGED
@@ -37,20 +37,21 @@ export interface IButtonProps
37
37
  /**
38
38
  * Primary UI component for user interaction
39
39
  */
40
- const _Button = ({
41
- actionType = "primary",
42
- size = "sm",
43
- label,
44
- icon,
45
- iconObj,
46
- CustomSVGIcon,
47
- fullWidth = false,
48
- iconPosition = "trailing",
49
- asLink,
50
- isLoading = false,
51
- className,
52
- ...props
53
- }: IButtonProps,
40
+ const _Button = (
41
+ {
42
+ actionType = "primary",
43
+ size = "sm",
44
+ label,
45
+ icon,
46
+ iconObj,
47
+ CustomSVGIcon,
48
+ fullWidth = false,
49
+ iconPosition = "leading",
50
+ asLink,
51
+ isLoading = false,
52
+ className,
53
+ ...props
54
+ }: IButtonProps,
54
55
  ref: React.LegacyRef<HTMLButtonElement>
55
56
  ) => {
56
57
  const iconStyles = cn(
package/stories/organisms/ButtonDropdown/ButtonDropdown.stories.tsx CHANGED
@@ -2,74 +2,75 @@ import type { Meta, StoryObj } from "@storybook/react"
2
2
  import ButtonDropdown from "."
3
3
  import { IItemProp } from "../DropdownComponent"
4
4
 
5
-
6
5
  const meta: Meta<typeof ButtonDropdown> = {
7
6
  title: "Design System/Organisms/Button Dropdown",
8
7
  component: ButtonDropdown,
9
8
  tags: ["autodocs"],
10
9
  argTypes: {}
11
10
  }
12
- const dropdownDataWithIcons: IItemProp[][] = [
13
- [
14
- {
15
- icon: {
16
- name: "IconClipboardCopy",
17
- pos: "leading",
18
- className: "h-5 w-5",
19
- outline: false
20
- },
21
- key: "Copy",
22
- label: "Copy",
23
- onClick: () => {
24
- console.log("Copy action")
25
- }
11
+ const dropdownDataWithIcons: IItemProp[][] = [
12
+ [
13
+ {
14
+ icon: {
15
+ icon: "IconClipboardCopy"
16
+
17
+ // className: "h-5 w-5",
18
+ // outline: false
19
+ },
20
+ key: "Copy",
21
+ label: "Copy",
22
+ onClick: () => {
23
+ console.log("Copy action")
26
24
  }
27
- ],
28
- [
29
- {
30
- icon: {
31
- name: "IconFolderPlus",
32
- pos: "leading",
33
- className: "h-5 w-5",
34
- outline: false
35
- },
36
- key: "Add to Batch",
37
- label: "Add to Batch",
38
- onClick: () => {
39
- console.log("Add to Batch action")
40
- }
25
+ }
26
+ ],
27
+ [
28
+ {
29
+ icon: {
30
+ icon: "IconFolderPlus"
31
+ // name: "IconFolderPlus",
32
+ // className: "h-5 w-5",
33
+ // outline: false
41
34
  },
42
- {
43
- icon: {
44
- name: "IconEye",
45
- pos: "leading",
46
- className: "h-5 w-5",
47
- outline: false
48
- },
49
- key: "View Batch",
50
- label: "View Batch",
51
- onClick: () => {
52
- console.log("View Batch action")
53
- }
35
+ key: "Add to Batch",
36
+ label: "Add to Batch",
37
+ onClick: () => {
38
+ console.log("Add to Batch action")
54
39
  }
55
- ],
56
- [
57
- {
58
- icon: {
59
- name: "IconTrash",
60
- pos: "leading",
61
- className: "h-5 w-5",
62
- outline: false
63
- },
64
- key: "Delete",
65
- label: "Delete",
66
- onClick: () => {
67
- console.log("Delete action")
68
- },
69
- isEmphasized: true
40
+ },
41
+ {
42
+ icon: {
43
+ icon: "IconEye",
44
+ //pos: "leading",
45
+ className: "h-5 w-5",
46
+ outline: false
47
+ },
48
+ iconPosition: "trailing",
49
+ key: "View Batch",
50
+ label: "View Batch",
51
+ onClick: () => {
52
+ console.log("View Batch action")
70
53
  }
71
- ]
72
- ]
54
+ }
55
+ ],
56
+ [
57
+ {
58
+ icon: {
59
+ icon: "IconTrash"
60
+
61
+ // pos: "leading",
62
+ // className: "h-5 w-5",
63
+ // outline: false
64
+ },
65
+ key: "Delete",
66
+ label: "Delete",
67
+ onClick: () => {
68
+ console.log("Delete action")
69
+ },
70
+ isEmphasized: true
71
+ }
72
+ ]
73
+ ]
73
74
 
74
75
  export default meta
75
76
  type Story = StoryObj<typeof ButtonDropdown>
package/stories/organisms/DropdownComponent/DropdownComponent.tsx CHANGED
@@ -20,7 +20,7 @@ import { ClassNameWithAutocomplete } from "utils/types"
20
20
  import { DynamicIcon, IDynamicIconProps, UnifiedIconName } from "@/stories/atoms/icons"
21
21
 
22
22
  export interface IItemProp extends HTMLAttributes<HTMLButtonElement> {
23
- icon?: IDynamicIconProps | UnifiedIconName
23
+ icon?: IDynamicIconProps
24
24
  iconPosition?: "trailing" | "leading"
25
25
  label: string
26
26
  onClick?(): void
@@ -136,7 +136,10 @@ const Dropdown: React.FC<IDropdownProps> = ({
136
136
  ) : (
137
137
  <>
138
138
  <span className="pl-1">{label}</span>
139
- <DynamicIcon icon="ChevronDownIcon" className={cn(defaultClassNames.iconClassname, iconClassname)} />
139
+ <DynamicIcon
140
+ icon="ChevronDownIcon"
141
+ className={cn(defaultClassNames.iconClassname, iconClassname)}
142
+ />
140
143
  </>
141
144
  )}
142
145
  </button>
@@ -148,31 +151,25 @@ const Dropdown: React.FC<IDropdownProps> = ({
148
151
  {...getFloatingProps()}
149
152
  className={cn(defaultClassNames.itemsClassname, itemsClassname)}
150
153
  ref={refs.setFloating}
151
- aria-labelledby={label}
154
+ aria-labelledby={label}
152
155
  style={{
153
156
  position: context.strategy,
154
157
  top: Math.round(context.y ?? 0),
155
158
  left: Math.round(context.x ?? 0),
156
159
  width: "max-content",
157
160
  maxWidth: "min(calc(100vw - 10px), 25rem)",
158
- ...floatingStyles,
161
+ ...floatingStyles
159
162
  }}
160
163
  >
161
-
162
- <ul id={`${id}-list`} role="listbox" style={{...transitionStyles}}>
164
+ <ul id={`${id}-list`} role="listbox" style={{ ...transitionStyles }}>
163
165
  {items.map((itemStack, idx) => {
164
166
  return (
165
167
  <React.Fragment key={`${idx}-list-${id}`}>
166
168
  {itemStack.map(
167
- ({
168
- onClick,
169
- label,
170
- key,
171
- isEmphasized,
172
- icon,
173
- iconPosition,
174
- ...rest
175
- }, idx) => {
169
+ (
170
+ { onClick, label, key, isEmphasized, icon, iconPosition, ...rest },
171
+ idx
172
+ ) => {
176
173
  const active = activeItem && activeItem === key
177
174
  const itemClass = cn(
178
175
  defaultClassNames.itemClassname,
@@ -187,13 +184,19 @@ const Dropdown: React.FC<IDropdownProps> = ({
187
184
  {
188
185
  "bg-gray-100 text-gray-900": active
189
186
  },
190
- active ? cn(defaultClassNames.activeItemClassname, activeItemClassname) : "",
187
+ active
188
+ ? cn(
189
+ defaultClassNames.activeItemClassname,
190
+ activeItemClassname
191
+ )
192
+ : "",
191
193
  {
192
194
  "bg-gray-100 text-red-500 hover:text-red-500":
193
- active && isEmphasized
194
- })
195
- return (
196
- <li key={`${key}-${idx}`}>
195
+ active && isEmphasized
196
+ }
197
+ )
198
+ return (
199
+ <li key={`${key}-${idx}`}>
197
200
  <button
198
201
  {...{
199
202
  onClick: () => {
@@ -205,53 +208,58 @@ const Dropdown: React.FC<IDropdownProps> = ({
205
208
  ...rest
206
209
  }}
207
210
  >
208
- <div className={cn(defaultClassNames.iconSpacingClassname, iconSpacingClassname)}>
211
+ <div
212
+ className={cn(
213
+ defaultClassNames.iconSpacingClassname,
214
+ iconSpacingClassname
215
+ )}
216
+ >
209
217
  {icon &&
210
218
  (iconPosition === "leading" ||
211
- iconPosition === undefined) &&
219
+ iconPosition === undefined) &&
212
220
  (typeof icon === "string" ? (
213
221
  <DynamicIcon
214
- {...{
215
- icon: icon,
216
- className: cn(
217
- {
218
- "text-red-500": isEmphasized
219
- },
220
- "opacity-60 group"
222
+ {...{
223
+ icon: icon,
224
+ className: cn(
225
+ {
226
+ "text-red-500": isEmphasized
227
+ },
228
+ "opacity-60 group"
221
229
  )
222
230
  }}
223
- />
224
- ) : (
225
- <DynamicIcon
226
- {...{
227
- ...icon,
228
- className: cn(
229
- icon.className,
231
+ />
232
+ ) : (
233
+ <DynamicIcon
234
+ {...{
235
+ ...icon,
236
+ className: cn(
237
+ icon.className,
230
238
  {
231
239
  "text-red-500": isEmphasized
232
240
  },
233
241
  "opacity-60 group"
234
- )
235
- }}
236
- />
237
- ))}
242
+ )
243
+ }}
244
+ />
245
+ ))}
238
246
  <div className="whitespace-nowrap">{label}</div>
239
247
  {icon &&
240
248
  iconPosition === "trailing" &&
241
249
  (typeof icon === "string" ? (
242
250
  <DynamicIcon
243
- {...{
244
- icon: icon,
245
- className: cn(
246
- {
247
- "text-red-500": isEmphasized
248
- },
249
- "opacity-60 group"
251
+ {...{
252
+ icon: icon,
253
+ className: cn(
254
+ {
255
+ "text-red-500": isEmphasized
256
+ },
257
+ "opacity-60 group"
250
258
  )
251
259
  }}
252
- />
253
- ) : (
254
- <DynamicIcon
260
+ />
261
+ ) : (
262
+ <DynamicIcon
255
263
  {...{
256
264
  ...icon,
257
265
  className: cn(
@@ -260,10 +268,10 @@ const Dropdown: React.FC<IDropdownProps> = ({
260
268
  "text-red-500": isEmphasized
261
269
  },
262
270
  "opacity-60 group"
263
- )
264
- }}
265
- />
266
- ))}
271
+ )
272
+ }}
273
+ />
274
+ ))}
267
275
  </div>
268
276
  </button>
269
277
  </li>
package/stories/organisms/DropdownComponent/dropdownItems.ts CHANGED
@@ -3,6 +3,12 @@ import { IItemProp } from "./DropdownComponent"
3
3
  export const dropdownDataBase: IItemProp[][] = [
4
4
  [
5
5
  {
6
+ icon: {
7
+ icon: "IconCopy"
8
+ // pos: "leading",
9
+ // className: "h-5 w-5",
10
+ // outline: false
11
+ },
6
12
  key: "Copy",
7
13
  label: "Copy",
8
14
  onClick: () => {
@@ -12,6 +18,12 @@ export const dropdownDataBase: IItemProp[][] = [
12
18
  ],
13
19
  [
14
20
  {
21
+ icon: {
22
+ icon: "IconPlus"
23
+ // pos: "leading",
24
+ // className: "h-5 w-5",
25
+ // outline: false
26
+ },
15
27
  key: "Add to Batch",
16
28
  label: "Add to Batch",
17
29
  onClick: () => {
@@ -19,6 +31,12 @@ export const dropdownDataBase: IItemProp[][] = [
19
31
  }
20
32
  },
21
33
  {
34
+ icon: {
35
+ icon: "IconEye"
36
+ // pos: "leading",
37
+ // className: "h-5 w-5",
38
+ // outline: false
39
+ },
22
40
  key: "View Batch",
23
41
  label: "View Batch",
24
42
  onClick: () => {
@@ -28,6 +46,12 @@ export const dropdownDataBase: IItemProp[][] = [
28
46
  ],
29
47
  [
30
48
  {
49
+ icon: {
50
+ icon: "IconTrash"
51
+ // pos: "leading",
52
+ // className: "h-5 w-5",
53
+ // outline: false
54
+ },
31
55
  label: "Delete",
32
56
  onClick: () => {
33
57
  console.log("Delete action")