@greghowe79/the-lib 2.13.5 → 2.13.7
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.
|
@@ -5,10 +5,45 @@ const qwik = require("@builder.io/qwik");
|
|
|
5
5
|
const styles = require("./styles.css.qwik.cjs");
|
|
6
6
|
const loader = require("../loader/loader.qwik.cjs");
|
|
7
7
|
const button_utils = require("./button.utils.qwik.cjs");
|
|
8
|
-
const Button = qwik.component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", onClick$, isLoading, active = false, customColors }) => {
|
|
8
|
+
const Button = qwik.component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", href, target, rel, className, onClick$, isLoading, active = false, customColors }) => {
|
|
9
9
|
qwik.useStylesScoped$(styles);
|
|
10
10
|
const loading = typeof isLoading === "object" && isLoading !== null && "value" in isLoading ? isLoading.value : isLoading;
|
|
11
11
|
const hasCustomStyles = customColors && (customColors.bg || customColors.text || customColors.border || customColors.padding || customColors.width || customColors.height);
|
|
12
|
+
const classes = [
|
|
13
|
+
`button-${variant}`,
|
|
14
|
+
`button-${size}`,
|
|
15
|
+
disabled && "button-disabled",
|
|
16
|
+
active && "button-active",
|
|
17
|
+
className
|
|
18
|
+
].filter(Boolean).join(" ");
|
|
19
|
+
if (href) {
|
|
20
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
21
|
+
children: [
|
|
22
|
+
hasCustomStyles && /* @__PURE__ */ jsxRuntime.jsx("style", {
|
|
23
|
+
dangerouslySetInnerHTML: button_utils.generateCustomCSS(id, customColors)
|
|
24
|
+
}),
|
|
25
|
+
/* @__PURE__ */ jsxRuntime.jsxs("a", {
|
|
26
|
+
id,
|
|
27
|
+
href: disabled ? void 0 : href,
|
|
28
|
+
target,
|
|
29
|
+
rel,
|
|
30
|
+
class: classes,
|
|
31
|
+
"aria-disabled": disabled,
|
|
32
|
+
children: [
|
|
33
|
+
icon && /* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
34
|
+
class: "button__icon",
|
|
35
|
+
"aria-hidden": "true",
|
|
36
|
+
children: typeof icon === "function" ? icon({}, null, 0) : icon
|
|
37
|
+
}),
|
|
38
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
39
|
+
class: "button__text",
|
|
40
|
+
children: loading ? /* @__PURE__ */ jsxRuntime.jsx(loader.Loader, {}) : label
|
|
41
|
+
})
|
|
42
|
+
]
|
|
43
|
+
})
|
|
44
|
+
]
|
|
45
|
+
});
|
|
46
|
+
}
|
|
12
47
|
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
13
48
|
children: [
|
|
14
49
|
hasCustomStyles && /* @__PURE__ */ jsxRuntime.jsx("style", {
|
|
@@ -17,12 +52,7 @@ const Button = qwik.component$(({ id, label, variant = "primary", icon, disabled
|
|
|
17
52
|
/* @__PURE__ */ jsxRuntime.jsxs("button", {
|
|
18
53
|
id,
|
|
19
54
|
type,
|
|
20
|
-
class:
|
|
21
|
-
`button-${variant}`,
|
|
22
|
-
`button-${size}`,
|
|
23
|
-
disabled && "button-disabled",
|
|
24
|
-
active && "button-active"
|
|
25
|
-
].filter(Boolean).join(" "),
|
|
55
|
+
class: classes,
|
|
26
56
|
disabled,
|
|
27
57
|
"aria-disabled": disabled,
|
|
28
58
|
"aria-label": ariaLabel || (icon ? label : void 0),
|
|
@@ -3,10 +3,45 @@ import { component$, useStylesScoped$ } from "@builder.io/qwik";
|
|
|
3
3
|
import styles from "./styles.css.qwik.mjs";
|
|
4
4
|
import { Loader } from "../loader/loader.qwik.mjs";
|
|
5
5
|
import { generateCustomCSS } from "./button.utils.qwik.mjs";
|
|
6
|
-
const Button = component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", onClick$, isLoading, active = false, customColors }) => {
|
|
6
|
+
const Button = component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", href, target, rel, className, onClick$, isLoading, active = false, customColors }) => {
|
|
7
7
|
useStylesScoped$(styles);
|
|
8
8
|
const loading = typeof isLoading === "object" && isLoading !== null && "value" in isLoading ? isLoading.value : isLoading;
|
|
9
9
|
const hasCustomStyles = customColors && (customColors.bg || customColors.text || customColors.border || customColors.padding || customColors.width || customColors.height);
|
|
10
|
+
const classes = [
|
|
11
|
+
`button-${variant}`,
|
|
12
|
+
`button-${size}`,
|
|
13
|
+
disabled && "button-disabled",
|
|
14
|
+
active && "button-active",
|
|
15
|
+
className
|
|
16
|
+
].filter(Boolean).join(" ");
|
|
17
|
+
if (href) {
|
|
18
|
+
return /* @__PURE__ */ jsxs(Fragment, {
|
|
19
|
+
children: [
|
|
20
|
+
hasCustomStyles && /* @__PURE__ */ jsx("style", {
|
|
21
|
+
dangerouslySetInnerHTML: generateCustomCSS(id, customColors)
|
|
22
|
+
}),
|
|
23
|
+
/* @__PURE__ */ jsxs("a", {
|
|
24
|
+
id,
|
|
25
|
+
href: disabled ? void 0 : href,
|
|
26
|
+
target,
|
|
27
|
+
rel,
|
|
28
|
+
class: classes,
|
|
29
|
+
"aria-disabled": disabled,
|
|
30
|
+
children: [
|
|
31
|
+
icon && /* @__PURE__ */ jsx("span", {
|
|
32
|
+
class: "button__icon",
|
|
33
|
+
"aria-hidden": "true",
|
|
34
|
+
children: typeof icon === "function" ? icon({}, null, 0) : icon
|
|
35
|
+
}),
|
|
36
|
+
/* @__PURE__ */ jsx("span", {
|
|
37
|
+
class: "button__text",
|
|
38
|
+
children: loading ? /* @__PURE__ */ jsx(Loader, {}) : label
|
|
39
|
+
})
|
|
40
|
+
]
|
|
41
|
+
})
|
|
42
|
+
]
|
|
43
|
+
});
|
|
44
|
+
}
|
|
10
45
|
return /* @__PURE__ */ jsxs(Fragment, {
|
|
11
46
|
children: [
|
|
12
47
|
hasCustomStyles && /* @__PURE__ */ jsx("style", {
|
|
@@ -15,12 +50,7 @@ const Button = component$(({ id, label, variant = "primary", icon, disabled = fa
|
|
|
15
50
|
/* @__PURE__ */ jsxs("button", {
|
|
16
51
|
id,
|
|
17
52
|
type,
|
|
18
|
-
class:
|
|
19
|
-
`button-${variant}`,
|
|
20
|
-
`button-${size}`,
|
|
21
|
-
disabled && "button-disabled",
|
|
22
|
-
active && "button-active"
|
|
23
|
-
].filter(Boolean).join(" "),
|
|
53
|
+
class: classes,
|
|
24
54
|
disabled,
|
|
25
55
|
"aria-disabled": disabled,
|
|
26
56
|
"aria-label": ariaLabel || (icon ? label : void 0),
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
const styles = ".card {\r\n max-width: 340px;\r\n width: 100%;\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n position: relative;\r\n z-index: 1;\r\n background-color: #fff;\r\n display: flex;\r\n flex-direction: column;\r\n border-radius: 10px;\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\r\n font-family: 'Roboto Condensed', sans-serif;\r\n transition: 0.3s;\r\n}\r\n\r\n.card-header {\r\n position: relative;\r\n display: flex;\r\n justify-content: flex-end;\r\n flex-direction: column;\r\n align-items: center;\r\n height: 250px;\r\n flex-shrink: 0;\r\n width: 100%;\r\n transition: 0.3s;\r\n}\r\n\r\n.card-cover {\r\n width: 100%;\r\n height: 160px;\r\n position: absolute;\r\n top: -28%;\r\n left: 0;\r\n will-change: top;\r\n background: #00758a;\r\n background-size: cover;\r\n background-position: center;\r\n transform: scale(1.2);\r\n transition: 0.5s;\r\n}\r\n\r\n.card-avatar-container {\r\n width: 120px;\r\n height: 120px;\r\n border-radius: 50%;\r\n overflow: hidden;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 1;\r\n}\r\n\r\n.card-avatar {\r\n object-fit: cover;\r\n display: block;\r\n}\r\n\r\n.card-wrap-details {\r\n width: 100%;\r\n max-width: 200px;\r\n height: 100px;\r\n}\r\n\r\n.card-fullname {\r\n /* position: absolute;\r\n bottom: 0; */\r\n font-size: 22px;\r\n font-weight: 700;\r\n text-align: center;\r\n word-wrap: break-word;\r\n word-break: break-word;\r\n /* white-space: nowrap;\r\n transform: translateY(-10px) translateX(-50%);\r\n left: 50%; */\r\n letter-spacing: 0.5px;\r\n}\r\n\r\n.card-jobtitle {\r\n /* position: absolute;\r\n bottom: 0; */\r\n font-size: 11px;\r\n /* white-space: nowrap; */\r\n font-weight: 500;\r\n text-align: center;\r\n opacity: 0.7;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n word-wrap: break-word;\r\n word-break: break-word;\r\n /* left: 50%;\r\n transform: translateX(-50%) translateY(-7px); */\r\n margin: 0;\r\n}\r\n\r\n.card-main {\r\n position: relative;\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n padding-top: 10px;\r\n}\r\n\r\n.card-section {\r\n display: block;\r\n}\r\n\r\n.card-content {\r\n padding: 20px;\r\n}\r\n\r\n.card-subtitle {\r\n font-weight: 700;\r\n font-size: 13px;\r\n margin-bottom: 8px;\r\n color: #333;\r\n letter-spacing: 0.5px;\r\n}\r\n\r\n.card-desc {\r\n line-height: 1.6;\r\n color: rgb(110, 110, 115);\r\n font-size: 14px;\r\n margin: 0;\r\n font-weight: 400;\r\n min-height: 10ch;\r\n}\r\n\r\n.card-container-url {\r\n display: flex;\r\n align-items: center;\r\n padding: 0 20px;\r\n margin-bottom: 30px;\r\n}\r\n\r\n.card-icon {\r\n color: #8797a1;\r\n height: 32px;\r\n width: 32px;\r\n border-radius: 50%;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: 0.3s;\r\n background-color: rgba(93, 133, 193, 0.05);\r\n margin-right: 10px;\r\n}\r\n\r\n.go-to-profile {\r\n align-self: center;\r\n color: #06c;\r\n text-decoration: none;\r\n}\r\n\r\n.go-to-profile:hover {\r\n text-decoration: underline;\r\n}\r\n\r\n.link_disabled {\r\n color: #cccccc;\r\n cursor: not-allowed;\r\n text-decoration: none;\r\n}\r\n";
|
|
2
|
+
const styles = ".card {\r\n max-width: 340px;\r\n width: 100%;\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n position: relative;\r\n z-index: 1;\r\n background-color: #fff;\r\n display: flex;\r\n flex-direction: column;\r\n border-radius: 10px;\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\r\n font-family: 'Roboto Condensed', sans-serif;\r\n transition: 0.3s;\r\n}\r\n\r\n.card-header {\r\n position: relative;\r\n display: flex;\r\n justify-content: flex-end;\r\n flex-direction: column;\r\n align-items: center;\r\n height: 250px;\r\n flex-shrink: 0;\r\n width: 100%;\r\n transition: 0.3s;\r\n}\r\n\r\n.card-cover {\r\n width: 100%;\r\n height: 160px;\r\n position: absolute;\r\n top: -28%;\r\n left: 0;\r\n will-change: top;\r\n background: #00758a;\r\n background-size: cover;\r\n background-position: center;\r\n transform: scale(1.2);\r\n transition: 0.5s;\r\n}\r\n\r\n.card-avatar-container {\r\n width: 120px;\r\n height: 120px;\r\n border-radius: 50%;\r\n overflow: hidden;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 1;\r\n}\r\n\r\n.card-avatar {\r\n object-fit: cover;\r\n display: block;\r\n}\r\n\r\n.card-wrap-details {\r\n width: 100%;\r\n max-width: 200px;\r\n height: 100px;\r\n}\r\n\r\n.card-fullname {\r\n /* position: absolute;\r\n bottom: 0; */\r\n font-size: 22px;\r\n font-weight: 700;\r\n text-align: center;\r\n word-wrap: break-word;\r\n word-break: break-word;\r\n /* white-space: nowrap;\r\n transform: translateY(-10px) translateX(-50%);\r\n left: 50%; */\r\n letter-spacing: 0.5px;\r\n}\r\n\r\n.card-jobtitle {\r\n /* position: absolute;\r\n bottom: 0; */\r\n font-size: 11px;\r\n /* white-space: nowrap; */\r\n line-height: 1.5;\r\n font-weight: 500;\r\n text-align: center;\r\n opacity: 0.7;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n word-wrap: break-word;\r\n word-break: break-word;\r\n /* left: 50%;\r\n transform: translateX(-50%) translateY(-7px); */\r\n margin: 0;\r\n}\r\n\r\n.card-main {\r\n position: relative;\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n padding-top: 10px;\r\n}\r\n\r\n.card-section {\r\n display: block;\r\n}\r\n\r\n.card-content {\r\n padding: 20px;\r\n height: 150px;\r\n}\r\n\r\n.card-subtitle {\r\n font-weight: 700;\r\n font-size: 13px;\r\n margin-bottom: 8px;\r\n color: #333;\r\n letter-spacing: 0.5px;\r\n}\r\n\r\n.card-desc {\r\n line-height: 1.6;\r\n color: rgb(110, 110, 115);\r\n font-size: 14px;\r\n margin: 0;\r\n font-weight: 400;\r\n min-height: 10ch;\r\n}\r\n\r\n.card-container-url {\r\n display: flex;\r\n align-items: center;\r\n padding: 0 20px;\r\n margin-bottom: 30px;\r\n}\r\n\r\n.card-icon {\r\n color: #8797a1;\r\n height: 32px;\r\n width: 32px;\r\n border-radius: 50%;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: 0.3s;\r\n background-color: rgba(93, 133, 193, 0.05);\r\n margin-right: 10px;\r\n}\r\n\r\n.go-to-profile {\r\n align-self: center;\r\n color: #06c;\r\n text-decoration: none;\r\n}\r\n\r\n.go-to-profile:hover {\r\n text-decoration: underline;\r\n}\r\n\r\n.link_disabled {\r\n color: #cccccc;\r\n cursor: not-allowed;\r\n text-decoration: none;\r\n}\r\n";
|
|
3
3
|
module.exports = styles;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const styles = ".card {\r\n max-width: 340px;\r\n width: 100%;\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n position: relative;\r\n z-index: 1;\r\n background-color: #fff;\r\n display: flex;\r\n flex-direction: column;\r\n border-radius: 10px;\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\r\n font-family: 'Roboto Condensed', sans-serif;\r\n transition: 0.3s;\r\n}\r\n\r\n.card-header {\r\n position: relative;\r\n display: flex;\r\n justify-content: flex-end;\r\n flex-direction: column;\r\n align-items: center;\r\n height: 250px;\r\n flex-shrink: 0;\r\n width: 100%;\r\n transition: 0.3s;\r\n}\r\n\r\n.card-cover {\r\n width: 100%;\r\n height: 160px;\r\n position: absolute;\r\n top: -28%;\r\n left: 0;\r\n will-change: top;\r\n background: #00758a;\r\n background-size: cover;\r\n background-position: center;\r\n transform: scale(1.2);\r\n transition: 0.5s;\r\n}\r\n\r\n.card-avatar-container {\r\n width: 120px;\r\n height: 120px;\r\n border-radius: 50%;\r\n overflow: hidden;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 1;\r\n}\r\n\r\n.card-avatar {\r\n object-fit: cover;\r\n display: block;\r\n}\r\n\r\n.card-wrap-details {\r\n width: 100%;\r\n max-width: 200px;\r\n height: 100px;\r\n}\r\n\r\n.card-fullname {\r\n /* position: absolute;\r\n bottom: 0; */\r\n font-size: 22px;\r\n font-weight: 700;\r\n text-align: center;\r\n word-wrap: break-word;\r\n word-break: break-word;\r\n /* white-space: nowrap;\r\n transform: translateY(-10px) translateX(-50%);\r\n left: 50%; */\r\n letter-spacing: 0.5px;\r\n}\r\n\r\n.card-jobtitle {\r\n /* position: absolute;\r\n bottom: 0; */\r\n font-size: 11px;\r\n /* white-space: nowrap; */\r\n font-weight: 500;\r\n text-align: center;\r\n opacity: 0.7;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n word-wrap: break-word;\r\n word-break: break-word;\r\n /* left: 50%;\r\n transform: translateX(-50%) translateY(-7px); */\r\n margin: 0;\r\n}\r\n\r\n.card-main {\r\n position: relative;\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n padding-top: 10px;\r\n}\r\n\r\n.card-section {\r\n display: block;\r\n}\r\n\r\n.card-content {\r\n padding: 20px;\r\n}\r\n\r\n.card-subtitle {\r\n font-weight: 700;\r\n font-size: 13px;\r\n margin-bottom: 8px;\r\n color: #333;\r\n letter-spacing: 0.5px;\r\n}\r\n\r\n.card-desc {\r\n line-height: 1.6;\r\n color: rgb(110, 110, 115);\r\n font-size: 14px;\r\n margin: 0;\r\n font-weight: 400;\r\n min-height: 10ch;\r\n}\r\n\r\n.card-container-url {\r\n display: flex;\r\n align-items: center;\r\n padding: 0 20px;\r\n margin-bottom: 30px;\r\n}\r\n\r\n.card-icon {\r\n color: #8797a1;\r\n height: 32px;\r\n width: 32px;\r\n border-radius: 50%;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: 0.3s;\r\n background-color: rgba(93, 133, 193, 0.05);\r\n margin-right: 10px;\r\n}\r\n\r\n.go-to-profile {\r\n align-self: center;\r\n color: #06c;\r\n text-decoration: none;\r\n}\r\n\r\n.go-to-profile:hover {\r\n text-decoration: underline;\r\n}\r\n\r\n.link_disabled {\r\n color: #cccccc;\r\n cursor: not-allowed;\r\n text-decoration: none;\r\n}\r\n";
|
|
1
|
+
const styles = ".card {\r\n max-width: 340px;\r\n width: 100%;\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n position: relative;\r\n z-index: 1;\r\n background-color: #fff;\r\n display: flex;\r\n flex-direction: column;\r\n border-radius: 10px;\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\r\n font-family: 'Roboto Condensed', sans-serif;\r\n transition: 0.3s;\r\n}\r\n\r\n.card-header {\r\n position: relative;\r\n display: flex;\r\n justify-content: flex-end;\r\n flex-direction: column;\r\n align-items: center;\r\n height: 250px;\r\n flex-shrink: 0;\r\n width: 100%;\r\n transition: 0.3s;\r\n}\r\n\r\n.card-cover {\r\n width: 100%;\r\n height: 160px;\r\n position: absolute;\r\n top: -28%;\r\n left: 0;\r\n will-change: top;\r\n background: #00758a;\r\n background-size: cover;\r\n background-position: center;\r\n transform: scale(1.2);\r\n transition: 0.5s;\r\n}\r\n\r\n.card-avatar-container {\r\n width: 120px;\r\n height: 120px;\r\n border-radius: 50%;\r\n overflow: hidden;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 1;\r\n}\r\n\r\n.card-avatar {\r\n object-fit: cover;\r\n display: block;\r\n}\r\n\r\n.card-wrap-details {\r\n width: 100%;\r\n max-width: 200px;\r\n height: 100px;\r\n}\r\n\r\n.card-fullname {\r\n /* position: absolute;\r\n bottom: 0; */\r\n font-size: 22px;\r\n font-weight: 700;\r\n text-align: center;\r\n word-wrap: break-word;\r\n word-break: break-word;\r\n /* white-space: nowrap;\r\n transform: translateY(-10px) translateX(-50%);\r\n left: 50%; */\r\n letter-spacing: 0.5px;\r\n}\r\n\r\n.card-jobtitle {\r\n /* position: absolute;\r\n bottom: 0; */\r\n font-size: 11px;\r\n /* white-space: nowrap; */\r\n line-height: 1.5;\r\n font-weight: 500;\r\n text-align: center;\r\n opacity: 0.7;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n word-wrap: break-word;\r\n word-break: break-word;\r\n /* left: 50%;\r\n transform: translateX(-50%) translateY(-7px); */\r\n margin: 0;\r\n}\r\n\r\n.card-main {\r\n position: relative;\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n padding-top: 10px;\r\n}\r\n\r\n.card-section {\r\n display: block;\r\n}\r\n\r\n.card-content {\r\n padding: 20px;\r\n height: 150px;\r\n}\r\n\r\n.card-subtitle {\r\n font-weight: 700;\r\n font-size: 13px;\r\n margin-bottom: 8px;\r\n color: #333;\r\n letter-spacing: 0.5px;\r\n}\r\n\r\n.card-desc {\r\n line-height: 1.6;\r\n color: rgb(110, 110, 115);\r\n font-size: 14px;\r\n margin: 0;\r\n font-weight: 400;\r\n min-height: 10ch;\r\n}\r\n\r\n.card-container-url {\r\n display: flex;\r\n align-items: center;\r\n padding: 0 20px;\r\n margin-bottom: 30px;\r\n}\r\n\r\n.card-icon {\r\n color: #8797a1;\r\n height: 32px;\r\n width: 32px;\r\n border-radius: 50%;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: 0.3s;\r\n background-color: rgba(93, 133, 193, 0.05);\r\n margin-right: 10px;\r\n}\r\n\r\n.go-to-profile {\r\n align-self: center;\r\n color: #06c;\r\n text-decoration: none;\r\n}\r\n\r\n.go-to-profile:hover {\r\n text-decoration: underline;\r\n}\r\n\r\n.link_disabled {\r\n color: #cccccc;\r\n cursor: not-allowed;\r\n text-decoration: none;\r\n}\r\n";
|
|
2
2
|
export {
|
|
3
3
|
styles as default
|
|
4
4
|
};
|
|
@@ -23,6 +23,10 @@ export interface ButtonProps {
|
|
|
23
23
|
ariaLabel?: string;
|
|
24
24
|
type?: ButtonType;
|
|
25
25
|
size?: ButtonSize;
|
|
26
|
+
href?: string;
|
|
27
|
+
target?: string;
|
|
28
|
+
rel?: string;
|
|
29
|
+
className?: string;
|
|
26
30
|
onClick$?: QRL<() => void> | QRL<() => boolean> | QRL<() => Promise<void>> | QRL<(type: string | unknown) => Promise<void>>;
|
|
27
31
|
isLoading?: boolean | Signal<boolean>;
|
|
28
32
|
active?: boolean;
|