@agility/plenum-ui 2.0.0-rc33 → 2.0.0-rc35
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
|
@@ -67,7 +67,85 @@ const _Button = (
|
|
|
67
67
|
)
|
|
68
68
|
const loaderSize = cn({ "h-4 w-4": size === "sm" }, { "h-5 w-5": size === "md" }, { "h-6 w-6 ": size === "lg" })
|
|
69
69
|
|
|
70
|
-
return (
|
|
70
|
+
return asLink ? (
|
|
71
|
+
<a
|
|
72
|
+
{...{
|
|
73
|
+
href: asLink.href,
|
|
74
|
+
target: asLink.target,
|
|
75
|
+
title: asLink.title,
|
|
76
|
+
className: cn(
|
|
77
|
+
"inline-flex items-center justify-center gap-x-2 font-medium rounded-[3px] !ring-offset-white outline-none focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2 focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2 focus:ring-2 focus:ring-purple-600 focus:ring-offset-2 active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all",
|
|
78
|
+
{ "w-full": fullWidth },
|
|
79
|
+
{ "px-[11px] py-[7px] text-xs": size === "xs" },
|
|
80
|
+
{ "px-[13px] py-[9px] text-sm": size === "sm" },
|
|
81
|
+
{ "px-[17px] py-[9px] text-sm": size === "md" },
|
|
82
|
+
{ "px-[17px] py-[9px] text-base": size === "lg" },
|
|
83
|
+
{ "px-[25px] py-[13px] text-base": size === "xl" },
|
|
84
|
+
{
|
|
85
|
+
"bg-purple-600 text-white hover:border-purple-700 hover:bg-purple-700 disabled:bg-purple-400 disabled:focus-visible:ring-0":
|
|
86
|
+
actionType === "primary"
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
" bg-purple-50 text-purple-700 hover:bg-purple-200 focus-within:bg-purple-100 focus-visible:bg-purple-100 focus:bg-purple-100 active:bg-purple-100 disabled:bg-purple-50 disabled:text-purple-300 disabled:focus-visible:ring-0":
|
|
90
|
+
actionType === "secondary"
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"border-gray-300 bg-white border text-gray-700 hover:bg-gray-50 focus-visible:!border-gray-300 focus-within:!border-gray-300 focus:!border-gray-300 active:!border-gray-300 disabled:bg-gray-50 disabled:text-gray-300 disabled:focus-visible:ring-0":
|
|
94
|
+
actionType === "alternative"
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
" bg-red-600 text-white hover:bg-red-700 <focus-visible:!></focus-visible:!>ring-red-500 focus:!ring-red-500 active:!ring-red-500 focus-within:!ring-red-500 disabled:bg-red-400 disabled:text-gray-50 disabled:focus-visible:ring-0":
|
|
98
|
+
actionType === "danger"
|
|
99
|
+
},
|
|
100
|
+
className ? className : ""
|
|
101
|
+
)
|
|
102
|
+
}}
|
|
103
|
+
>
|
|
104
|
+
{" "}
|
|
105
|
+
{CustomSVGIcon &&
|
|
106
|
+
(isLoading ? (
|
|
107
|
+
<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
|
|
108
|
+
) : (
|
|
109
|
+
<i>{CustomSVGIcon}</i>
|
|
110
|
+
))}
|
|
111
|
+
{iconObj &&
|
|
112
|
+
iconPosition === "leading" &&
|
|
113
|
+
(!isLoading ? (
|
|
114
|
+
<>{iconObj}</>
|
|
115
|
+
) : (
|
|
116
|
+
<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
|
|
117
|
+
))}
|
|
118
|
+
{icon &&
|
|
119
|
+
iconPosition === "leading" &&
|
|
120
|
+
(isLoading ? (
|
|
121
|
+
<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
|
|
122
|
+
) : typeof icon === "string" ? (
|
|
123
|
+
<DynamicIcon {...{ icon: icon, className: iconStyles }} />
|
|
124
|
+
) : (
|
|
125
|
+
<DynamicIcon {...{ ...icon, className: iconStyles }} />
|
|
126
|
+
))}
|
|
127
|
+
{!icon && !CustomSVGIcon && isLoading && (
|
|
128
|
+
<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
|
|
129
|
+
)}
|
|
130
|
+
{label}
|
|
131
|
+
{icon &&
|
|
132
|
+
iconPosition === "trailing" &&
|
|
133
|
+
(isLoading ? (
|
|
134
|
+
<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
|
|
135
|
+
) : typeof icon === "string" ? (
|
|
136
|
+
<DynamicIcon {...{ icon: icon, className: iconStyles }} />
|
|
137
|
+
) : (
|
|
138
|
+
<DynamicIcon {...{ ...icon, className: iconStyles }} />
|
|
139
|
+
))}
|
|
140
|
+
{iconObj &&
|
|
141
|
+
iconPosition === "trailing" &&
|
|
142
|
+
(!isLoading ? (
|
|
143
|
+
<>{iconObj}</>
|
|
144
|
+
) : (
|
|
145
|
+
<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
|
|
146
|
+
))}
|
|
147
|
+
</a>
|
|
148
|
+
) : (
|
|
71
149
|
<button
|
|
72
150
|
type="button"
|
|
73
151
|
className={cn(
|