@alveole/components 0.23.0 → 0.23.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.
- package/dist/ui/Button/Button.d.ts.map +1 -1
- package/dist/ui/Button/Button.js +10 -2
- package/dist/ui/Button/Button.stories.d.ts +13 -0
- package/dist/ui/Button/Button.stories.d.ts.map +1 -1
- package/dist/ui/Button/Button.styles.d.ts +13 -0
- package/dist/ui/Button/Button.styles.d.ts.map +1 -1
- package/dist/ui/Button/Button.styles.js +13 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAA0C,cAAc,EAA8B,IAAI,EAAE,MAAM,cAAc,CAAC;AACxH,OAAO,EAAO,QAAQ,EAAc,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,SAAS,EAAc,MAAM,eAAe,CAAC;AAOtD,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;IACvD,SAAS,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC9B,OAAO,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,MAAM;WAdV,MAAM;WACN,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;aACvB,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM;gBAC1C,SAAS,CAAC,MAAM,CAAC;cACnB,SAAS,CAAC,MAAM,CAAC;qBACV,QAAQ;gBACb,OAAO;gBACP,OAAO;iBACN,OAAO;gBACR,OAAO;WACZ,QAAQ,GAAG,QAAQ;gBACd,OAAO;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAA0C,cAAc,EAA8B,IAAI,EAAE,MAAM,cAAc,CAAC;AACxH,OAAO,EAAO,QAAQ,EAAc,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,SAAS,EAAc,MAAM,eAAe,CAAC;AAOtD,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;IACvD,SAAS,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC9B,OAAO,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,MAAM;WAdV,MAAM;WACN,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;aACvB,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM;gBAC1C,SAAS,CAAC,MAAM,CAAC;cACnB,SAAS,CAAC,MAAM,CAAC;qBACV,QAAQ;gBACb,OAAO;gBACP,OAAO;iBACN,OAAO;gBACR,OAAO;WACZ,QAAQ,GAAG,QAAQ;gBACd,OAAO;8BAoLnB,CAAC"}
|
package/dist/ui/Button/Button.js
CHANGED
|
@@ -17,7 +17,7 @@ export const Button = React.forwardRef(function Button(props, ref) {
|
|
|
17
17
|
: styles.mdContainer;
|
|
18
18
|
const titleSize = size === 'sm' ? styles.smTitle : size === 'lg' ? styles.lgTitle : size === 'xs' ? styles.xsTitle : styles.mdTitle;
|
|
19
19
|
const noPaddingStyle = { paddingTop: 0, paddingBottom: 0, paddingLeft: 0, paddingRight: 0 };
|
|
20
|
-
const buttonContainerStyle = () => {
|
|
20
|
+
const buttonContainerStyle = (state) => {
|
|
21
21
|
let applicableStyles = {
|
|
22
22
|
...styles.container,
|
|
23
23
|
...(startIcon
|
|
@@ -39,21 +39,29 @@ export const Button = React.forwardRef(function Button(props, ref) {
|
|
|
39
39
|
applicableStyles = { ...applicableStyles, ...styles.primaryContainer };
|
|
40
40
|
if (disabled)
|
|
41
41
|
applicableStyles = { ...applicableStyles, ...styles.primaryContainerDisabled };
|
|
42
|
+
else if (state?.pressed)
|
|
43
|
+
applicableStyles = { ...applicableStyles, ...styles.primaryContainerPressed };
|
|
42
44
|
}
|
|
43
45
|
else if (variant === 'secondary') {
|
|
44
46
|
applicableStyles = { ...applicableStyles, ...styles.secondaryContainer };
|
|
45
47
|
if (disabled)
|
|
46
48
|
applicableStyles = { ...applicableStyles, ...styles.secondaryContainerDisabled };
|
|
49
|
+
else if (state?.pressed)
|
|
50
|
+
applicableStyles = { ...applicableStyles, ...styles.secondaryContainerPressed };
|
|
47
51
|
}
|
|
48
52
|
else if (variant === 'tertiary') {
|
|
49
53
|
applicableStyles = { ...applicableStyles, ...styles.tertiaryContainer };
|
|
50
54
|
if (disabled)
|
|
51
55
|
applicableStyles = { ...applicableStyles, ...styles.tertiaryContainerDisabled };
|
|
56
|
+
else if (state?.pressed)
|
|
57
|
+
applicableStyles = { ...applicableStyles, ...styles.tertiaryContainerPressed };
|
|
52
58
|
}
|
|
53
59
|
else if (variant === 'link') {
|
|
54
60
|
applicableStyles = { ...applicableStyles, ...styles.linkContainer };
|
|
55
61
|
if (disabled)
|
|
56
62
|
applicableStyles = { ...applicableStyles, ...styles.tertiaryContainerDisabled };
|
|
63
|
+
else if (state?.pressed)
|
|
64
|
+
applicableStyles = { ...applicableStyles, ...styles.linkContainerPressed };
|
|
57
65
|
}
|
|
58
66
|
return {
|
|
59
67
|
...applicableStyles,
|
|
@@ -152,5 +160,5 @@ export const Button = React.forwardRef(function Button(props, ref) {
|
|
|
152
160
|
: {}),
|
|
153
161
|
...(disabled ? { borderWidth: 0 } : {}),
|
|
154
162
|
};
|
|
155
|
-
return (_jsx(Pressable, { ref: ref, disabled: disabled, accessibilityRole: "button", ...(type === 'submit' ? { 'aria-selected': true } : {}), ...(fullWidth ? { style: { width: '100%' } } : {}), ...buttonProps, style: [pressableStyle], children: (state) => (_jsxs(Box, { style: [buttonContainerStyle(), style], hoverStyle: { ...buttonContainerHoverStyle(), ...hoverStyle }, ...containerProps, children: [startIcon && _jsx(LucideIcon, { name: startIcon, ...iconStyle({ hovered: !!state.hovered }) }), _jsx(Typography, { "user-select": false, style: textStyle({ hovered: !!state.hovered }), children: title }), isLoading ? (_jsx(ActivityIndicator, { size: "small", style: styles.buttonLoader })) : (endIcon && _jsx(LucideIcon, { name: endIcon, ...iconStyle({ hovered: !!state.hovered }) }))] })) }));
|
|
163
|
+
return (_jsx(Pressable, { ref: ref, disabled: disabled, accessibilityRole: "button", ...(type === 'submit' ? { 'aria-selected': true } : {}), ...(fullWidth ? { style: { width: '100%' } } : {}), ...buttonProps, style: [pressableStyle], children: (state) => (_jsxs(Box, { style: [buttonContainerStyle({ pressed: state.pressed }), style], hoverStyle: { ...buttonContainerHoverStyle(), ...hoverStyle }, ...containerProps, children: [startIcon && _jsx(LucideIcon, { name: startIcon, ...iconStyle({ hovered: !!state.hovered }) }), _jsx(Typography, { "user-select": false, style: textStyle({ hovered: !!state.hovered }), children: title }), isLoading ? (_jsx(ActivityIndicator, { size: "small", style: styles.buttonLoader })) : (endIcon && _jsx(LucideIcon, { name: endIcon, ...iconStyle({ hovered: !!state.hovered }) }))] })) }));
|
|
156
164
|
});
|
|
@@ -56,6 +56,9 @@ declare const _default: {
|
|
|
56
56
|
primaryContainerHover: {
|
|
57
57
|
backgroundColor: "#0048AC";
|
|
58
58
|
};
|
|
59
|
+
primaryContainerPressed: {
|
|
60
|
+
backgroundColor: "#0048AC";
|
|
61
|
+
};
|
|
59
62
|
secondaryTitle: {
|
|
60
63
|
color: "#151617";
|
|
61
64
|
};
|
|
@@ -72,6 +75,10 @@ declare const _default: {
|
|
|
72
75
|
borderColor: "#DEE3EC";
|
|
73
76
|
backgroundColor: "rgba(0, 0, 0, 0.04)";
|
|
74
77
|
};
|
|
78
|
+
secondaryContainerPressed: {
|
|
79
|
+
borderColor: "#DEE3EC";
|
|
80
|
+
backgroundColor: "rgba(0, 0, 0, 0.04)";
|
|
81
|
+
};
|
|
75
82
|
tertiaryTitle: {
|
|
76
83
|
color: "#151617";
|
|
77
84
|
};
|
|
@@ -82,6 +89,9 @@ declare const _default: {
|
|
|
82
89
|
tertiaryContainerHover: {
|
|
83
90
|
backgroundColor: "rgba(0, 0, 0, 0.04)";
|
|
84
91
|
};
|
|
92
|
+
tertiaryContainerPressed: {
|
|
93
|
+
backgroundColor: "rgba(0, 0, 0, 0.04)";
|
|
94
|
+
};
|
|
85
95
|
linkTitle: {
|
|
86
96
|
color: "#076D8A";
|
|
87
97
|
};
|
|
@@ -94,6 +104,9 @@ declare const _default: {
|
|
|
94
104
|
linkContainerHover: {
|
|
95
105
|
backgroundColor: "transparent";
|
|
96
106
|
};
|
|
107
|
+
linkContainerPressed: {
|
|
108
|
+
backgroundColor: "transparent";
|
|
109
|
+
};
|
|
97
110
|
xsContainer: {
|
|
98
111
|
paddingLeft: import("@alveole/theme").Spacing;
|
|
99
112
|
paddingRight: import("@alveole/theme").Spacing;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAQkB;AAElB,eAAO,MAAM,KAAK,+CAMjB,CAAC;AAEF,eAAO,MAAM,OAAO,+CAKnB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAKrB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAKpB,CAAC;AAEF,eAAO,MAAM,IAAI,+CAKhB,CAAC;AAEF,eAAO,MAAM,KAAK,+CAQjB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAIrB,CAAC"}
|
|
@@ -36,6 +36,9 @@ export declare const useStyles: () => {
|
|
|
36
36
|
primaryContainerHover: {
|
|
37
37
|
backgroundColor: "#0048AC";
|
|
38
38
|
};
|
|
39
|
+
primaryContainerPressed: {
|
|
40
|
+
backgroundColor: "#0048AC";
|
|
41
|
+
};
|
|
39
42
|
secondaryTitle: {
|
|
40
43
|
color: "#151617";
|
|
41
44
|
};
|
|
@@ -52,6 +55,10 @@ export declare const useStyles: () => {
|
|
|
52
55
|
borderColor: "#DEE3EC";
|
|
53
56
|
backgroundColor: "rgba(0, 0, 0, 0.04)";
|
|
54
57
|
};
|
|
58
|
+
secondaryContainerPressed: {
|
|
59
|
+
borderColor: "#DEE3EC";
|
|
60
|
+
backgroundColor: "rgba(0, 0, 0, 0.04)";
|
|
61
|
+
};
|
|
55
62
|
tertiaryTitle: {
|
|
56
63
|
color: "#151617";
|
|
57
64
|
};
|
|
@@ -62,6 +69,9 @@ export declare const useStyles: () => {
|
|
|
62
69
|
tertiaryContainerHover: {
|
|
63
70
|
backgroundColor: "rgba(0, 0, 0, 0.04)";
|
|
64
71
|
};
|
|
72
|
+
tertiaryContainerPressed: {
|
|
73
|
+
backgroundColor: "rgba(0, 0, 0, 0.04)";
|
|
74
|
+
};
|
|
65
75
|
linkTitle: {
|
|
66
76
|
color: "#076D8A";
|
|
67
77
|
};
|
|
@@ -74,6 +84,9 @@ export declare const useStyles: () => {
|
|
|
74
84
|
linkContainerHover: {
|
|
75
85
|
backgroundColor: "transparent";
|
|
76
86
|
};
|
|
87
|
+
linkContainerPressed: {
|
|
88
|
+
backgroundColor: "transparent";
|
|
89
|
+
};
|
|
77
90
|
xsContainer: {
|
|
78
91
|
paddingLeft: import("@alveole/theme").Spacing;
|
|
79
92
|
paddingRight: import("@alveole/theme").Spacing;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS
|
|
1
|
+
{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2NnB,CAAC"}
|
|
@@ -38,6 +38,9 @@ export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
|
|
|
38
38
|
primaryContainerHover: {
|
|
39
39
|
backgroundColor: color.light.background['action-high-primary-hover'],
|
|
40
40
|
},
|
|
41
|
+
primaryContainerPressed: {
|
|
42
|
+
backgroundColor: color.light.background['action-high-primary-hover'],
|
|
43
|
+
},
|
|
41
44
|
secondaryTitle: {
|
|
42
45
|
color: color.light.text['action-high-grey'],
|
|
43
46
|
},
|
|
@@ -54,6 +57,10 @@ export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
|
|
|
54
57
|
borderColor: color.light.border['default-grey'],
|
|
55
58
|
backgroundColor: color.light.background['transparent-hover'],
|
|
56
59
|
},
|
|
60
|
+
secondaryContainerPressed: {
|
|
61
|
+
borderColor: color.light.border['default-grey'],
|
|
62
|
+
backgroundColor: color.light.background['transparent-hover'],
|
|
63
|
+
},
|
|
57
64
|
tertiaryTitle: {
|
|
58
65
|
color: color.light.text['action-high-grey'],
|
|
59
66
|
},
|
|
@@ -64,6 +71,9 @@ export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
|
|
|
64
71
|
tertiaryContainerHover: {
|
|
65
72
|
backgroundColor: color.light.background['transparent-hover'],
|
|
66
73
|
},
|
|
74
|
+
tertiaryContainerPressed: {
|
|
75
|
+
backgroundColor: color.light.background['transparent-hover'],
|
|
76
|
+
},
|
|
67
77
|
linkTitle: {
|
|
68
78
|
color: color.text.link.default,
|
|
69
79
|
},
|
|
@@ -76,6 +86,9 @@ export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
|
|
|
76
86
|
linkContainerHover: {
|
|
77
87
|
backgroundColor: color.background.button.tertiary.default,
|
|
78
88
|
},
|
|
89
|
+
linkContainerPressed: {
|
|
90
|
+
backgroundColor: color.background.button.tertiary.default,
|
|
91
|
+
},
|
|
79
92
|
// Sizes
|
|
80
93
|
xsContainer: {
|
|
81
94
|
paddingLeft: spacing('075'),
|