@agility/plenum-ui 2.3.1 → 2.3.2

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 (8) hide show
  1. package/.claude/settings.local.json +6 -1
  2. package/dist/index.js +1 -1
  3. package/dist/index.js.map +3 -3
  4. package/dist/tailwind.css +8 -0
  5. package/package.json +1 -1
  6. package/stories/atoms/icons/TablerIcon.tsx +3 -2
  7. package/stories/organisms/FormInputWithAddons/FormInputWithAddons.stories.tsx +15 -1
  8. package/stories/organisms/FormInputWithAddons/FormInputWithAddons.tsx +46 -21
package/dist/tailwind.css CHANGED
@@ -3263,6 +3263,10 @@ select {
3263
3263
  border-width: 1px;
3264
3264
  }
3265
3265
 
3266
+ .border-0 {
3267
+ border-width: 0px;
3268
+ }
3269
+
3266
3270
  .border-2 {
3267
3271
  border-width: 2px;
3268
3272
  }
@@ -67519,6 +67523,10 @@ select {
67519
67523
  stroke-width: 1.5;
67520
67524
  }
67521
67525
 
67526
+ .p-0 {
67527
+ padding: 0px;
67528
+ }
67529
+
67522
67530
  .p-10 {
67523
67531
  padding: 2.5rem;
67524
67532
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@agility/plenum-ui",
3
- "version": "2.3.1",
3
+ "version": "2.3.2",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",
package/stories/atoms/icons/TablerIcon.tsx CHANGED
@@ -24,7 +24,8 @@ export interface ITablerIconProps extends React.DetailedHTMLProps<React.HTMLAttr
24
24
 
25
25
  const TablerIcon: React.FC<ITablerIconProps> = ({
26
26
  icon,
27
- className = "w-6 h-6 text-gray-600"
27
+ className = "w-6 h-6 text-gray-600",
28
+ ...rest
28
29
  }: ITablerIconProps): JSX.Element | null => {
29
30
  const [Icon, setIcon] = useState<ComponentType<any> | null>(
30
31
  iconRegistry && icon ? (iconRegistry[icon] ?? null) : null
@@ -38,7 +39,7 @@ const TablerIcon: React.FC<ITablerIconProps> = ({
38
39
 
39
40
  if (!Icon) return null;
40
41
  return (
41
- <i>
42
+ <i {...rest}>
42
43
  <Icon className={className} />
43
44
  </i>
44
45
  );
package/stories/organisms/FormInputWithAddons/FormInputWithAddons.stories.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { Meta, StoryObj } from "@storybook/react";
2
- import FormInputWithAddons, { IFormInputWithAddonsProps } from "./FormInputWithAddons";
2
+ import { action } from "@storybook/addon-actions";
3
+ import FormInputWithAddons from "./FormInputWithAddons";
3
4
 
4
5
  const meta: Meta<typeof FormInputWithAddons> = {
5
6
  title: "Design System/organisms/Form Input With Addons",
@@ -27,6 +28,19 @@ export const DefaultFormInputWithAddons: Story = {
27
28
  trailIcon: { icon: "IconSearch" }
28
29
  }
29
30
  };
31
+ export const TrailIconWithOnClick: Story = {
32
+ args: {
33
+ id: "appSearch",
34
+ name: "appSearch",
35
+ type: "text",
36
+ placeholder: "Search...",
37
+ trailIcon: {
38
+ icon: "IconX",
39
+ onClick: action("trailIcon clicked")
40
+ }
41
+ }
42
+ };
43
+
30
44
  export const FormInputWithAddonBTN: Story = {
31
45
  args: {
32
46
  id: "appSearch",
package/stories/organisms/FormInputWithAddons/FormInputWithAddons.tsx CHANGED
@@ -121,27 +121,52 @@ const FormInputWithAddons: React.FC<IFormInputWithAddonsProps> = ({
121
121
  }}
122
122
  />
123
123
  {(trailLabel || trailIcon) && (
124
- <label
125
- ref={trailLabelRef}
126
- htmlFor={id}
127
- className={cn(
128
- "right absolute top-0 bottom-0 right-3 flex items-center justify-center text-sm !text-gray-500 ",
129
- labelClass
130
- )}
131
- >
132
- {trailIcon && (
133
- <span>
134
- <DynamicIcon
135
- {...{
136
- ...trailIcon,
137
- className: cn("h-5 w-5 text-gray-400", customIconClass, trailIcon.className),
138
- outline: iconOutlined
139
- }}
140
- />
141
- </span>
142
- )}
143
- {trailLabel && trailLabel}
144
- </label>
124
+ trailIcon?.onClick ? (
125
+ <button
126
+ ref={trailLabelRef as unknown as React.RefObject<HTMLButtonElement>}
127
+ type="button"
128
+ onClick={(e) => { e.preventDefault(); trailIcon.onClick!(e as unknown as React.MouseEvent<HTMLElement>); }}
129
+ className={cn(
130
+ "right absolute top-0 bottom-0 right-3 flex items-center justify-center text-sm !text-gray-500 bg-transparent border-0 p-0 cursor-pointer",
131
+ labelClass
132
+ )}
133
+ >
134
+ {trailIcon && (
135
+ <span>
136
+ <DynamicIcon
137
+ {...{
138
+ ...trailIcon,
139
+ className: cn("h-5 w-5 text-gray-400", customIconClass, trailIcon.className),
140
+ outline: iconOutlined
141
+ }}
142
+ />
143
+ </span>
144
+ )}
145
+ {trailLabel && trailLabel}
146
+ </button>
147
+ ) : (
148
+ <label
149
+ ref={trailLabelRef}
150
+ htmlFor={id}
151
+ className={cn(
152
+ "right absolute top-0 bottom-0 right-3 flex items-center justify-center text-sm !text-gray-500 ",
153
+ labelClass
154
+ )}
155
+ >
156
+ {trailIcon && (
157
+ <span>
158
+ <DynamicIcon
159
+ {...{
160
+ ...trailIcon,
161
+ className: cn("h-5 w-5 text-gray-400", customIconClass, trailIcon.className),
162
+ outline: iconOutlined
163
+ }}
164
+ />
165
+ </span>
166
+ )}
167
+ {trailLabel && trailLabel}
168
+ </label>
169
+ )
145
170
  )}
146
171
  {addonBTN && (
147
172
  <div className="absolute top-0 bottom-0 right-0 flex items-center ">