@bosonprotocol/react-kit 0.30.0-alpha.0 → 0.30.0-alpha.1
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/dist/cjs/components/buttons/CommitButtonView.d.ts +2 -7
- package/dist/cjs/components/buttons/CommitButtonView.d.ts.map +1 -1
- package/dist/cjs/components/buttons/CommitButtonView.js +30 -9
- package/dist/cjs/components/buttons/CommitButtonView.js.map +1 -1
- package/dist/esm/components/buttons/CommitButtonView.d.ts +2 -7
- package/dist/esm/components/buttons/CommitButtonView.d.ts.map +1 -1
- package/dist/esm/components/buttons/CommitButtonView.js +30 -9
- package/dist/esm/components/buttons/CommitButtonView.js.map +1 -1
- package/package.json +2 -2
- package/src/components/buttons/CommitButtonView.tsx +35 -23
- package/src/stories/buttons/CommitButtonView.stories.tsx +0 -1
|
@@ -9,12 +9,7 @@ export type CommitButtonViewProps = {
|
|
|
9
9
|
minHeight?: CSSProperties["minHeight"];
|
|
10
10
|
color?: "green" | "black" | "white";
|
|
11
11
|
shape?: "sharp" | "rounded" | "pill";
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
tagline: true;
|
|
15
|
-
} | {
|
|
16
|
-
onTaglineClick?: undefined;
|
|
17
|
-
tagline?: false;
|
|
18
|
-
});
|
|
12
|
+
onTaglineClick?: MouseEventHandler<HTMLDivElement>;
|
|
13
|
+
};
|
|
19
14
|
export declare const CommitButtonView: React.ForwardRefExoticComponent<CommitButtonViewProps & React.RefAttributes<HTMLDivElement>>;
|
|
20
15
|
//# sourceMappingURL=CommitButtonView.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommitButtonView.d.ts","sourceRoot":"","sources":["../../../../src/components/buttons/CommitButtonView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAG7D,OAAe,EAAE,aAAa,EAAO,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"CommitButtonView.d.ts","sourceRoot":"","sources":["../../../../src/components/buttons/CommitButtonView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAG7D,OAAe,EAAE,aAAa,EAAO,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAyD7C,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACnC,OAAO,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;IACpC,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IACrC,cAAc,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CACpD,CAAC;AAQF,eAAO,MAAM,gBAAgB,8FAmD5B,CAAC"}
|
|
@@ -33,13 +33,6 @@ const logo_svg_1 = __importDefault(require("../../assets/logo.svg"));
|
|
|
33
33
|
const styled_components_1 = __importStar(require("styled-components"));
|
|
34
34
|
const SvgImage_1 = require("../ui/SvgImage");
|
|
35
35
|
const Grid_1 = require("../ui/Grid");
|
|
36
|
-
const Wrapper = styled_components_1.default.div `
|
|
37
|
-
width: fit-content;
|
|
38
|
-
height: fit-content;
|
|
39
|
-
display: flex;
|
|
40
|
-
flex-direction: column;
|
|
41
|
-
align-items: center;
|
|
42
|
-
`;
|
|
43
36
|
const StyledButton = (0, styled_components_1.default)(Button_1.Button) `
|
|
44
37
|
${({ $shape }) => {
|
|
45
38
|
if ($shape === "pill") {
|
|
@@ -55,19 +48,47 @@ const StyledButton = (0, styled_components_1.default)(Button_1.Button) `
|
|
|
55
48
|
return "";
|
|
56
49
|
}}
|
|
57
50
|
svg * {
|
|
51
|
+
fill: black;
|
|
52
|
+
}
|
|
53
|
+
&:not(:disabled) svg * {
|
|
58
54
|
fill: ${({ $color }) => ($color === "black" ? "white" : "black")};
|
|
59
55
|
}
|
|
60
56
|
&:hover:not(:disabled) * {
|
|
61
57
|
fill: ${({ $color }) => ($color === "black" ? "black" : "white")};
|
|
62
58
|
}
|
|
63
59
|
`;
|
|
60
|
+
const Tagline = styled_components_1.default.div `
|
|
61
|
+
margin-top: 3px;
|
|
62
|
+
cursor: pointer;
|
|
63
|
+
color: black;
|
|
64
|
+
text-shadow:
|
|
65
|
+
0.07em 0 white,
|
|
66
|
+
0 0.07em white,
|
|
67
|
+
-0.07em 0 white,
|
|
68
|
+
0 -0.07em white,
|
|
69
|
+
-0.07em -0.07em white,
|
|
70
|
+
-0.07em 0.07em white,
|
|
71
|
+
0.07em -0.07em white,
|
|
72
|
+
0.07em 0.07em white;
|
|
73
|
+
`;
|
|
74
|
+
const Wrapper = styled_components_1.default.div `
|
|
75
|
+
width: fit-content;
|
|
76
|
+
height: fit-content;
|
|
77
|
+
display: flex;
|
|
78
|
+
flex-direction: column;
|
|
79
|
+
align-items: center;
|
|
80
|
+
|
|
81
|
+
${StyledButton} {
|
|
82
|
+
transition: background 150ms ease-in-out;
|
|
83
|
+
}
|
|
84
|
+
`;
|
|
64
85
|
const colorToVariant = {
|
|
65
86
|
green: "bosonPrimary",
|
|
66
87
|
black: "black",
|
|
67
88
|
white: "white"
|
|
68
89
|
};
|
|
69
90
|
const logoWidthPx = 100;
|
|
70
|
-
exports.CommitButtonView = (0, react_1.forwardRef)(({ disabled, onClick, minWidth, minHeight, layout = "horizontal", color = "green",
|
|
91
|
+
exports.CommitButtonView = (0, react_1.forwardRef)(({ disabled, onClick, minWidth, minHeight, layout = "horizontal", color = "green", onTaglineClick, shape = "sharp" }, ref) => {
|
|
71
92
|
return (react_1.default.createElement(Wrapper, { ref: ref },
|
|
72
93
|
react_1.default.createElement(StyledButton, { disabled: disabled, onClick: onClick, style: {
|
|
73
94
|
minWidth,
|
|
@@ -76,6 +97,6 @@ exports.CommitButtonView = (0, react_1.forwardRef)(({ disabled, onClick, minWidt
|
|
|
76
97
|
react_1.default.createElement(Grid_1.Grid, { flexDirection: layout === "horizontal" ? "row" : "column", gap: "1rem" },
|
|
77
98
|
"Buy Physical NFT with",
|
|
78
99
|
react_1.default.createElement(SvgImage_1.SvgImage, { src: logo_svg_1.default, width: `${logoWidthPx}px`, height: `${(logoWidthPx * 218) / 947}px` }))),
|
|
79
|
-
|
|
100
|
+
react_1.default.createElement(Tagline, { role: "button", onClick: onTaglineClick }, "What is a physical NFT?")));
|
|
80
101
|
});
|
|
81
102
|
//# sourceMappingURL=CommitButtonView.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommitButtonView.js","sourceRoot":"","sources":["../../../../src/components/buttons/CommitButtonView.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA6D;AAC7D,qCAAkC;AAClC,qEAAyC;AACzC,uEAA+D;AAE/D,6CAA0C;AAC1C,qCAAkC;
|
|
1
|
+
{"version":3,"file":"CommitButtonView.js","sourceRoot":"","sources":["../../../../src/components/buttons/CommitButtonView.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA6D;AAC7D,qCAAkC;AAClC,qEAAyC;AACzC,uEAA+D;AAE/D,6CAA0C;AAC1C,qCAAkC;AAClC,MAAM,YAAY,GAAG,IAAA,2BAAM,EAAC,eAAM,CAAC,CAGjC;IACE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;IACf,IAAI,MAAM,KAAK,MAAM,EAAE;QACrB,OAAO,IAAA,uBAAG,EAAA;;OAET,CAAC;KACH;IACD,IAAI,MAAM,KAAK,SAAS,EAAE;QACxB,OAAO,IAAA,uBAAG,EAAA;;OAET,CAAC;KACH;IACD,OAAO,EAAE,CAAC;AACZ,CAAC;;;;;YAKS,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;;;YAGxD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;;CAEnE,CAAC;AACF,MAAM,OAAO,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;CAazB,CAAC;AAEF,MAAM,OAAO,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;IAOtB,YAAY;;;CAGf,CAAC;AAaF,MAAM,cAAc,GAAG;IACrB,KAAK,EAAE,cAAc;IACrB,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;CACN,CAAC;AACX,MAAM,WAAW,GAAG,GAAG,CAAC;AACX,QAAA,gBAAgB,GAAG,IAAA,kBAAU,EAIxC,CACE,EACE,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,SAAS,EACT,MAAM,GAAG,YAAY,EACrB,KAAK,GAAG,OAAO,EACf,cAAc,EACd,KAAK,GAAG,OAAO,EAChB,EACD,GAAG,EACH,EAAE;IACF,OAAO,CACL,8BAAC,OAAO,IAAC,GAAG,EAAE,GAAG;QACf,8BAAC,YAAY,IACX,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE;gBACL,QAAQ;gBACR,SAAS;aACV,EACD,QAAQ,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,SAAS,EAC5C,OAAO,EAAE,IAAI,EACb,cAAc,kBACN,KAAK,YACL,KAAK;YAEb,8BAAC,WAAI,IACH,aAAa,EAAE,MAAM,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EACzD,GAAG,EAAC,MAAM;;gBAGV,8BAAC,mBAAQ,IACP,GAAG,EAAE,kBAAI,EACT,KAAK,EAAE,GAAG,WAAW,IAAI,EACzB,MAAM,EAAE,GAAG,CAAC,WAAW,GAAG,GAAG,CAAC,GAAG,GAAG,IAAI,GACxC,CACG,CACM;QAEf,8BAAC,OAAO,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,cAAc,8BAEpC,CACF,CACX,CAAC;AACJ,CAAC,CACF,CAAC"}
|
|
@@ -9,12 +9,7 @@ export type CommitButtonViewProps = {
|
|
|
9
9
|
minHeight?: CSSProperties["minHeight"];
|
|
10
10
|
color?: "green" | "black" | "white";
|
|
11
11
|
shape?: "sharp" | "rounded" | "pill";
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
tagline: true;
|
|
15
|
-
} | {
|
|
16
|
-
onTaglineClick?: undefined;
|
|
17
|
-
tagline?: false;
|
|
18
|
-
});
|
|
12
|
+
onTaglineClick?: MouseEventHandler<HTMLDivElement>;
|
|
13
|
+
};
|
|
19
14
|
export declare const CommitButtonView: React.ForwardRefExoticComponent<CommitButtonViewProps & React.RefAttributes<HTMLDivElement>>;
|
|
20
15
|
//# sourceMappingURL=CommitButtonView.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommitButtonView.d.ts","sourceRoot":"","sources":["../../../../src/components/buttons/CommitButtonView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAG7D,OAAe,EAAE,aAAa,EAAO,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"CommitButtonView.d.ts","sourceRoot":"","sources":["../../../../src/components/buttons/CommitButtonView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAG7D,OAAe,EAAE,aAAa,EAAO,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAyD7C,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACnC,OAAO,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;IACpC,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IACrC,cAAc,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CACpD,CAAC;AAQF,eAAO,MAAM,gBAAgB,8FAmD5B,CAAC"}
|
|
@@ -4,13 +4,6 @@ import Logo from "../../assets/logo.svg";
|
|
|
4
4
|
import styled, { css } from "styled-components";
|
|
5
5
|
import { SvgImage } from "../ui/SvgImage";
|
|
6
6
|
import { Grid } from "../ui/Grid";
|
|
7
|
-
const Wrapper = styled.div `
|
|
8
|
-
width: fit-content;
|
|
9
|
-
height: fit-content;
|
|
10
|
-
display: flex;
|
|
11
|
-
flex-direction: column;
|
|
12
|
-
align-items: center;
|
|
13
|
-
`;
|
|
14
7
|
const StyledButton = styled(Button) `
|
|
15
8
|
${({ $shape }) => {
|
|
16
9
|
if ($shape === "pill") {
|
|
@@ -26,19 +19,47 @@ const StyledButton = styled(Button) `
|
|
|
26
19
|
return "";
|
|
27
20
|
}}
|
|
28
21
|
svg * {
|
|
22
|
+
fill: black;
|
|
23
|
+
}
|
|
24
|
+
&:not(:disabled) svg * {
|
|
29
25
|
fill: ${({ $color }) => ($color === "black" ? "white" : "black")};
|
|
30
26
|
}
|
|
31
27
|
&:hover:not(:disabled) * {
|
|
32
28
|
fill: ${({ $color }) => ($color === "black" ? "black" : "white")};
|
|
33
29
|
}
|
|
34
30
|
`;
|
|
31
|
+
const Tagline = styled.div `
|
|
32
|
+
margin-top: 3px;
|
|
33
|
+
cursor: pointer;
|
|
34
|
+
color: black;
|
|
35
|
+
text-shadow:
|
|
36
|
+
0.07em 0 white,
|
|
37
|
+
0 0.07em white,
|
|
38
|
+
-0.07em 0 white,
|
|
39
|
+
0 -0.07em white,
|
|
40
|
+
-0.07em -0.07em white,
|
|
41
|
+
-0.07em 0.07em white,
|
|
42
|
+
0.07em -0.07em white,
|
|
43
|
+
0.07em 0.07em white;
|
|
44
|
+
`;
|
|
45
|
+
const Wrapper = styled.div `
|
|
46
|
+
width: fit-content;
|
|
47
|
+
height: fit-content;
|
|
48
|
+
display: flex;
|
|
49
|
+
flex-direction: column;
|
|
50
|
+
align-items: center;
|
|
51
|
+
|
|
52
|
+
${StyledButton} {
|
|
53
|
+
transition: background 150ms ease-in-out;
|
|
54
|
+
}
|
|
55
|
+
`;
|
|
35
56
|
const colorToVariant = {
|
|
36
57
|
green: "bosonPrimary",
|
|
37
58
|
black: "black",
|
|
38
59
|
white: "white"
|
|
39
60
|
};
|
|
40
61
|
const logoWidthPx = 100;
|
|
41
|
-
export const CommitButtonView = forwardRef(({ disabled, onClick, minWidth, minHeight, layout = "horizontal", color = "green",
|
|
62
|
+
export const CommitButtonView = forwardRef(({ disabled, onClick, minWidth, minHeight, layout = "horizontal", color = "green", onTaglineClick, shape = "sharp" }, ref) => {
|
|
42
63
|
return (React.createElement(Wrapper, { ref: ref },
|
|
43
64
|
React.createElement(StyledButton, { disabled: disabled, onClick: onClick, style: {
|
|
44
65
|
minWidth,
|
|
@@ -47,6 +68,6 @@ export const CommitButtonView = forwardRef(({ disabled, onClick, minWidth, minHe
|
|
|
47
68
|
React.createElement(Grid, { flexDirection: layout === "horizontal" ? "row" : "column", gap: "1rem" },
|
|
48
69
|
"Buy Physical NFT with",
|
|
49
70
|
React.createElement(SvgImage, { src: Logo, width: `${logoWidthPx}px`, height: `${(logoWidthPx * 218) / 947}px` }))),
|
|
50
|
-
|
|
71
|
+
React.createElement(Tagline, { role: "button", onClick: onTaglineClick }, "What is a physical NFT?")));
|
|
51
72
|
});
|
|
52
73
|
//# sourceMappingURL=CommitButtonView.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommitButtonView.js","sourceRoot":"","sources":["../../../../src/components/buttons/CommitButtonView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAqB,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,IAAI,MAAM,uBAAuB,CAAC;AACzC,OAAO,MAAM,EAAE,EAAiB,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAE/D,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"CommitButtonView.js","sourceRoot":"","sources":["../../../../src/components/buttons/CommitButtonView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAqB,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,IAAI,MAAM,uBAAuB,CAAC;AACzC,OAAO,MAAM,EAAE,EAAiB,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAE/D,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAGjC;IACE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;IACf,IAAI,MAAM,KAAK,MAAM,EAAE;QACrB,OAAO,GAAG,CAAA;;OAET,CAAC;KACH;IACD,IAAI,MAAM,KAAK,SAAS,EAAE;QACxB,OAAO,GAAG,CAAA;;OAET,CAAC;KACH;IACD,OAAO,EAAE,CAAC;AACZ,CAAC;;;;;YAKS,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;;;YAGxD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;;CAEnE,CAAC;AACF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;CAazB,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;IAOtB,YAAY;;;CAGf,CAAC;AAaF,MAAM,cAAc,GAAG;IACrB,KAAK,EAAE,cAAc;IACrB,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;CACN,CAAC;AACX,MAAM,WAAW,GAAG,GAAG,CAAC;AACxB,MAAM,CAAC,MAAM,gBAAgB,GAAG,UAAU,CAIxC,CACE,EACE,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,SAAS,EACT,MAAM,GAAG,YAAY,EACrB,KAAK,GAAG,OAAO,EACf,cAAc,EACd,KAAK,GAAG,OAAO,EAChB,EACD,GAAG,EACH,EAAE;IACF,OAAO,CACL,oBAAC,OAAO,IAAC,GAAG,EAAE,GAAG;QACf,oBAAC,YAAY,IACX,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE;gBACL,QAAQ;gBACR,SAAS;aACV,EACD,QAAQ,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,SAAS,EAC5C,OAAO,EAAE,IAAI,EACb,cAAc,kBACN,KAAK,YACL,KAAK;YAEb,oBAAC,IAAI,IACH,aAAa,EAAE,MAAM,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EACzD,GAAG,EAAC,MAAM;;gBAGV,oBAAC,QAAQ,IACP,GAAG,EAAE,IAAI,EACT,KAAK,EAAE,GAAG,WAAW,IAAI,EACzB,MAAM,EAAE,GAAG,CAAC,WAAW,GAAG,GAAG,CAAC,GAAG,GAAG,IAAI,GACxC,CACG,CACM;QAEf,oBAAC,OAAO,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,cAAc,8BAEpC,CACF,CACX,CAAC;AACJ,CAAC,CACF,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bosonprotocol/react-kit",
|
|
3
3
|
"description": "React toolkit with smart components and hooks for building on top of the Boson Protocol.",
|
|
4
|
-
"version": "0.30.0-alpha.
|
|
4
|
+
"version": "0.30.0-alpha.1",
|
|
5
5
|
"main": "./dist/cjs/index.js",
|
|
6
6
|
"module": "./dist/esm/index.js",
|
|
7
7
|
"types": "./dist/cjs/index.d.ts",
|
|
@@ -170,5 +170,5 @@
|
|
|
170
170
|
"overrides": {
|
|
171
171
|
"typescript": "^5.1.6"
|
|
172
172
|
},
|
|
173
|
-
"gitHead": "
|
|
173
|
+
"gitHead": "c1417a374111bd6ab1e30270ec575e800e0c6bb9"
|
|
174
174
|
}
|
|
@@ -5,15 +5,6 @@ import styled, { CSSProperties, css } from "styled-components";
|
|
|
5
5
|
import { IButton } from "../ui/ThemedButton";
|
|
6
6
|
import { SvgImage } from "../ui/SvgImage";
|
|
7
7
|
import { Grid } from "../ui/Grid";
|
|
8
|
-
|
|
9
|
-
const Wrapper = styled.div`
|
|
10
|
-
width: fit-content;
|
|
11
|
-
height: fit-content;
|
|
12
|
-
display: flex;
|
|
13
|
-
flex-direction: column;
|
|
14
|
-
align-items: center;
|
|
15
|
-
`;
|
|
16
|
-
|
|
17
8
|
const StyledButton = styled(Button)<{
|
|
18
9
|
$color: CommitButtonViewProps["color"];
|
|
19
10
|
$shape: CommitButtonViewProps["shape"];
|
|
@@ -32,12 +23,41 @@ const StyledButton = styled(Button)<{
|
|
|
32
23
|
return "";
|
|
33
24
|
}}
|
|
34
25
|
svg * {
|
|
26
|
+
fill: black;
|
|
27
|
+
}
|
|
28
|
+
&:not(:disabled) svg * {
|
|
35
29
|
fill: ${({ $color }) => ($color === "black" ? "white" : "black")};
|
|
36
30
|
}
|
|
37
31
|
&:hover:not(:disabled) * {
|
|
38
32
|
fill: ${({ $color }) => ($color === "black" ? "black" : "white")};
|
|
39
33
|
}
|
|
40
34
|
`;
|
|
35
|
+
const Tagline = styled.div`
|
|
36
|
+
margin-top: 3px;
|
|
37
|
+
cursor: pointer;
|
|
38
|
+
color: black;
|
|
39
|
+
text-shadow:
|
|
40
|
+
0.07em 0 white,
|
|
41
|
+
0 0.07em white,
|
|
42
|
+
-0.07em 0 white,
|
|
43
|
+
0 -0.07em white,
|
|
44
|
+
-0.07em -0.07em white,
|
|
45
|
+
-0.07em 0.07em white,
|
|
46
|
+
0.07em -0.07em white,
|
|
47
|
+
0.07em 0.07em white;
|
|
48
|
+
`;
|
|
49
|
+
|
|
50
|
+
const Wrapper = styled.div`
|
|
51
|
+
width: fit-content;
|
|
52
|
+
height: fit-content;
|
|
53
|
+
display: flex;
|
|
54
|
+
flex-direction: column;
|
|
55
|
+
align-items: center;
|
|
56
|
+
|
|
57
|
+
${StyledButton} {
|
|
58
|
+
transition: background 150ms ease-in-out;
|
|
59
|
+
}
|
|
60
|
+
`;
|
|
41
61
|
|
|
42
62
|
export type CommitButtonViewProps = {
|
|
43
63
|
disabled?: boolean;
|
|
@@ -47,10 +67,8 @@ export type CommitButtonViewProps = {
|
|
|
47
67
|
minHeight?: CSSProperties["minHeight"];
|
|
48
68
|
color?: "green" | "black" | "white";
|
|
49
69
|
shape?: "sharp" | "rounded" | "pill";
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
| { onTaglineClick?: undefined; tagline?: false }
|
|
53
|
-
);
|
|
70
|
+
onTaglineClick?: MouseEventHandler<HTMLDivElement>;
|
|
71
|
+
};
|
|
54
72
|
|
|
55
73
|
const colorToVariant = {
|
|
56
74
|
green: "bosonPrimary",
|
|
@@ -70,7 +88,6 @@ export const CommitButtonView = forwardRef<
|
|
|
70
88
|
minHeight,
|
|
71
89
|
layout = "horizontal",
|
|
72
90
|
color = "green",
|
|
73
|
-
tagline = true,
|
|
74
91
|
onTaglineClick,
|
|
75
92
|
shape = "sharp"
|
|
76
93
|
},
|
|
@@ -103,15 +120,10 @@ export const CommitButtonView = forwardRef<
|
|
|
103
120
|
/>
|
|
104
121
|
</Grid>
|
|
105
122
|
</StyledButton>
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
style={{ cursor: "pointer" }}
|
|
111
|
-
>
|
|
112
|
-
What is a physical NFT?
|
|
113
|
-
</div>
|
|
114
|
-
)}
|
|
123
|
+
|
|
124
|
+
<Tagline role="button" onClick={onTaglineClick}>
|
|
125
|
+
What is a physical NFT?
|
|
126
|
+
</Tagline>
|
|
115
127
|
</Wrapper>
|
|
116
128
|
);
|
|
117
129
|
}
|