@manamerge/mana-atomic-ui 1.0.12 → 1.0.16
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/index.d.ts +0 -23
- package/dist/index.js +47 -65
- package/dist/index.js.map +1 -1
- package/dist/themes/themes/ManamergeTheme.ts +0 -39
- package/dist/themes/themes/davidWeb/molecules/navigation.ts +1 -1
- package/dist/themes/themes/manamerge/atoms/button.ts +45 -43
- package/dist/themes/themes/manamerge/miscellaneous/colorpalette.ts +28 -0
- package/dist/themes/themes/manamerge/molecules/navigation.ts +1 -1
- package/dist/types/components/Atoms/Button/Button.css.d.ts +1 -28
- package/dist/types/components/Atoms/Button/Button.d.ts +0 -23
- package/dist/types/components/Atoms/Button/Button.stories.d.ts +1 -2
- package/dist/types/themes/DavidWebTheme.d.ts +1 -1
- package/dist/types/themes/ManamergeTheme.d.ts +2 -42
- package/dist/types/themes/davidWeb/molecules/navigation.d.ts +1 -1
- package/dist/types/themes/manamerge/atoms/button.d.ts +1 -3
- package/dist/types/themes/manamerge/miscellaneous/colorpalette.d.ts +28 -0
- package/dist/types/themes/manamerge/molecules/navigation.d.ts +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -9,29 +9,6 @@ interface ButtonTypes {
|
|
|
9
9
|
children?: ReactNode;
|
|
10
10
|
onClick?: React.MouseEventHandler<HTMLElement>;
|
|
11
11
|
type?: "button" | "submit" | "reset" | undefined;
|
|
12
|
-
color?: string;
|
|
13
|
-
altColor?: string;
|
|
14
|
-
frame?: boolean;
|
|
15
|
-
border?: string;
|
|
16
|
-
text?: string;
|
|
17
|
-
fill?: string;
|
|
18
|
-
effects?: string;
|
|
19
|
-
padding?: string;
|
|
20
|
-
flexbox?: boolean;
|
|
21
|
-
cursor?: string;
|
|
22
|
-
margin?: string;
|
|
23
|
-
display?: string;
|
|
24
|
-
radius?: string;
|
|
25
|
-
fontWeight?: string;
|
|
26
|
-
letterSpacing?: string;
|
|
27
|
-
shadow?: string;
|
|
28
|
-
transition?: string;
|
|
29
|
-
width?: string;
|
|
30
|
-
maxWidth?: string;
|
|
31
|
-
height?: string;
|
|
32
|
-
gap?: string;
|
|
33
|
-
align?: string;
|
|
34
|
-
opacity?: string;
|
|
35
12
|
}
|
|
36
13
|
declare const Button: React.FC<ButtonTypes>;
|
|
37
14
|
|
package/dist/index.js
CHANGED
|
@@ -39,87 +39,72 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
39
39
|
};
|
|
40
40
|
|
|
41
41
|
const ButtonStyle = styled.button `
|
|
42
|
-
${(
|
|
43
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s
|
|
44
|
-
var { variant, theme, disabled } = _a, props = __rest(_a, ["variant", "theme", "disabled"]);
|
|
42
|
+
${({ variant, theme, disabled }) => {
|
|
43
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
45
44
|
const buttonStyles = (theme === null || theme === void 0 ? void 0 : theme.button[variant]) || {};
|
|
46
45
|
return css `
|
|
47
46
|
/* Default State */
|
|
48
47
|
background: ${disabled
|
|
49
|
-
?
|
|
50
|
-
|
|
51
|
-
"transparent"
|
|
52
|
-
: props.background ||
|
|
53
|
-
((_c = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.default) === null || _c === void 0 ? void 0 : _c.background) ||
|
|
54
|
-
"transparent"};
|
|
48
|
+
? ((_a = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.disabled) === null || _a === void 0 ? void 0 : _a.background) || "transparent"
|
|
49
|
+
: ((_b = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.default) === null || _b === void 0 ? void 0 : _b.background) || "transparent"};
|
|
55
50
|
color: ${disabled
|
|
56
|
-
?
|
|
57
|
-
:
|
|
51
|
+
? ((_c = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.disabled) === null || _c === void 0 ? void 0 : _c.text) || "inherit"
|
|
52
|
+
: ((_d = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.default) === null || _d === void 0 ? void 0 : _d.text) || "inherit"};
|
|
58
53
|
border: ${disabled
|
|
59
|
-
?
|
|
60
|
-
:
|
|
61
|
-
opacity: ${disabled
|
|
62
|
-
? (props === null || props === void 0 ? void 0 : props.opacity) || ((_h = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.disabled) === null || _h === void 0 ? void 0 : _h.opacity) || 0.5
|
|
63
|
-
: 1};
|
|
54
|
+
? ((_e = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.disabled) === null || _e === void 0 ? void 0 : _e.border) || "none"
|
|
55
|
+
: ((_f = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.default) === null || _f === void 0 ? void 0 : _f.border) || "none"};
|
|
56
|
+
opacity: ${disabled ? (_g = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.disabled) === null || _g === void 0 ? void 0 : _g.opacity : 1};
|
|
64
57
|
text-transform: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.textTransform) || "none"};
|
|
65
58
|
font-family: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.fontFamily) || "inherit"};
|
|
66
|
-
font-weight: ${
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
border-radius: ${props.radius || (buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.borderRadius) || "0"};
|
|
78
|
-
max-width: ${props.maxWidth || (buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.maxWidth) || "none"};
|
|
79
|
-
max-height: ${props.maxHeight || (buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.maxHeight) || "none"};
|
|
80
|
-
box-shadow: ${props.shadow || (buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.shadow) || "none"};
|
|
81
|
-
transition: ${props.transition ||
|
|
82
|
-
(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.transition) ||
|
|
83
|
-
"all 0.2s ease"};
|
|
84
|
-
display: ${props.display || (buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.display) || "inline-flex"};
|
|
59
|
+
font-weight: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.fontWeight) || "normal"};
|
|
60
|
+
letter-spacing: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.letterSpacing) || "normal"};
|
|
61
|
+
font-size: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.fontSize) || "inherit"};
|
|
62
|
+
line-height: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.lineHeight) || "normal"};
|
|
63
|
+
padding: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.padding) || "0"};
|
|
64
|
+
border-radius: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.borderRadius) || "0"};
|
|
65
|
+
max-width: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.maxWidth) || "none"};
|
|
66
|
+
max-height: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.maxHeight) || "none"};
|
|
67
|
+
box-shadow: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.shadow) || "none"};
|
|
68
|
+
transition: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.transition) || "all 0.2s ease"};
|
|
69
|
+
display: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.display) || "inline-flex"};
|
|
85
70
|
justify-content: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.justifyContent) || "center"};
|
|
86
71
|
align-items: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.alignItems) || "center"};
|
|
87
72
|
cursor: ${disabled
|
|
88
73
|
? "not-allowed"
|
|
89
|
-
:
|
|
90
|
-
overflow: ${
|
|
91
|
-
position: ${
|
|
92
|
-
width: ${
|
|
93
|
-
height: ${
|
|
94
|
-
margin: ${
|
|
95
|
-
gap: ${
|
|
74
|
+
: (buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.cursor) || "pointer"};
|
|
75
|
+
overflow: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.overflow) || "visible"};
|
|
76
|
+
position: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.position) || "relative"};
|
|
77
|
+
width: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.width) || "auto"};
|
|
78
|
+
height: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.height) || "auto"};
|
|
79
|
+
margin: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.margin) || "0"};
|
|
80
|
+
gap: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.gap) || "0"};
|
|
96
81
|
|
|
97
82
|
/* Hover State */
|
|
98
83
|
&:hover {
|
|
99
|
-
background: ${!disabled && ((
|
|
100
|
-
color: ${!disabled && ((
|
|
101
|
-
border: ${!disabled && ((
|
|
102
|
-
filter: ${!disabled && ((
|
|
84
|
+
background: ${!disabled && ((_h = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _h === void 0 ? void 0 : _h.background)};
|
|
85
|
+
color: ${!disabled && ((_j = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _j === void 0 ? void 0 : _j.text)};
|
|
86
|
+
border: ${!disabled && ((_k = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _k === void 0 ? void 0 : _k.border)};
|
|
87
|
+
filter: ${!disabled && ((_l = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _l === void 0 ? void 0 : _l.filter)};
|
|
103
88
|
}
|
|
104
89
|
|
|
105
90
|
/* Active State */
|
|
106
91
|
&:active {
|
|
107
|
-
background: ${!disabled && ((
|
|
108
|
-
color: ${!disabled && ((
|
|
109
|
-
border: ${!disabled && ((
|
|
110
|
-
filter: ${(!disabled && ((
|
|
92
|
+
background: ${!disabled && ((_m = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.active) === null || _m === void 0 ? void 0 : _m.background)};
|
|
93
|
+
color: ${!disabled && ((_o = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.active) === null || _o === void 0 ? void 0 : _o.text)};
|
|
94
|
+
border: ${!disabled && ((_p = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.active) === null || _p === void 0 ? void 0 : _p.border)};
|
|
95
|
+
filter: ${(!disabled && ((_q = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.active) === null || _q === void 0 ? void 0 : _q.filter)) ||
|
|
111
96
|
"brightness(0.9)"};
|
|
112
97
|
}
|
|
113
98
|
|
|
114
99
|
/* Focus State */
|
|
115
100
|
&:focus-visible {
|
|
116
|
-
outline: 2px solid ${((
|
|
101
|
+
outline: 2px solid ${((_r = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.focus) === null || _r === void 0 ? void 0 : _r.outline) || "red"};
|
|
117
102
|
outline-offset: 2px;
|
|
118
103
|
}
|
|
119
104
|
|
|
120
105
|
&:disabled {
|
|
121
106
|
cursor: not-allowed;
|
|
122
|
-
color: ${disabled && ((
|
|
107
|
+
color: ${disabled && ((_s = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.disabled) === null || _s === void 0 ? void 0 : _s.text)};
|
|
123
108
|
background: ${disabled && buttonStyles.disabled.background};
|
|
124
109
|
border-color: ${disabled && `${buttonStyles.disabled.border}`};
|
|
125
110
|
opacity: ${disabled && buttonStyles.disabled.opacity};
|
|
@@ -134,12 +119,6 @@ const ButtonStyle = styled.button `
|
|
|
134
119
|
background-size: contain;
|
|
135
120
|
background-repeat: no-repeat;
|
|
136
121
|
`}
|
|
137
|
-
|
|
138
|
-
/* Effects */
|
|
139
|
-
${({ effects }) => effects &&
|
|
140
|
-
css `
|
|
141
|
-
${effects};
|
|
142
|
-
`}
|
|
143
122
|
`;
|
|
144
123
|
const ImgStyle = styled.svg `
|
|
145
124
|
width: 1em;
|
|
@@ -147,12 +126,12 @@ const ImgStyle = styled.svg `
|
|
|
147
126
|
`;
|
|
148
127
|
|
|
149
128
|
const Button = (_a) => {
|
|
150
|
-
var { variant = "primary", disabled = false, image,
|
|
129
|
+
var { variant = "primary", disabled = false, image, alt, children, onClick, type = "submit" } = _a, props = __rest(_a, ["variant", "disabled", "image", "alt", "children", "onClick", "type"]);
|
|
151
130
|
// Log a warning if both `children` and `alt` are missing for accessibility
|
|
152
131
|
if (!children && !alt) {
|
|
153
132
|
console.error(`Provide either "children" or "alt" property to the Button.`);
|
|
154
133
|
}
|
|
155
|
-
return (jsxs(ButtonStyle, Object.assign({ disabled: disabled, className: classNames("Button-", variant), variant: "Button-" + variant, type: type, "aria-label": alt || "",
|
|
134
|
+
return (jsxs(ButtonStyle, Object.assign({ disabled: disabled, className: classNames("Button-", variant), variant: "Button-" + variant, type: type, "aria-label": alt || "", onClick: (e) => {
|
|
156
135
|
if (!disabled && onClick) {
|
|
157
136
|
onClick(e);
|
|
158
137
|
}
|
|
@@ -528,9 +507,12 @@ const WrapperBackground = styled.div `
|
|
|
528
507
|
|
|
529
508
|
background: linear-gradient(
|
|
530
509
|
${((_b = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.gradientStyles) === null || _b === void 0 ? void 0 : _b.orientation) || "180deg"},
|
|
531
|
-
${((_c = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.gradientStyles) === null || _c === void 0 ? void 0 : _c.primaryColor) ||
|
|
532
|
-
|
|
533
|
-
${((
|
|
510
|
+
${((_c = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.gradientStyles) === null || _c === void 0 ? void 0 : _c.primaryColor) ||
|
|
511
|
+
"rgba(0, 0, 0, 0) 0%"},
|
|
512
|
+
${((_d = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.gradientStyles) === null || _d === void 0 ? void 0 : _d.secondaryColor) ||
|
|
513
|
+
"rgba(85, 173, 14, 0.4) 50%"},
|
|
514
|
+
${((_e = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.gradientStyles) === null || _e === void 0 ? void 0 : _e.tertiaryColor) ||
|
|
515
|
+
"rgba(12, 178, 224, 0.7) 100%"}
|
|
534
516
|
);
|
|
535
517
|
|
|
536
518
|
opacity: 0;
|
|
@@ -776,7 +758,7 @@ const NavLinks = styled.div `
|
|
|
776
758
|
const { largeMobileUp } = theme.media;
|
|
777
759
|
return css `
|
|
778
760
|
${largeMobileUp} {
|
|
779
|
-
|
|
761
|
+
margin: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.margin) || "none"};
|
|
780
762
|
display: flex;
|
|
781
763
|
flex-direction: row;
|
|
782
764
|
gap: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.gap) || "none"};
|
|
@@ -1146,7 +1128,7 @@ const CardBackgroundColor = styled.div `
|
|
|
1146
1128
|
|
|
1147
1129
|
const CardTeaser = ({ moleculeVariant = "primary", company, year, title, checks, onClick, buttonName, svg, cardImageSrc, separator }) => {
|
|
1148
1130
|
const className = "CardTeaser-" + moleculeVariant;
|
|
1149
|
-
return (jsx(CardBackgroundColor, Object.assign({ className: className, moleculeVariant: className }, { children: jsxs(CardContainer, Object.assign({ moleculeVariant: className }, { children: [jsxs(LeftCardContainer, Object.assign({ moleculeVariant: className }, { children: [jsxs(HeadingCompanyDate, Object.assign({ moleculeVariant: className }, { children: [company, "
|
|
1131
|
+
return (jsx(CardBackgroundColor, Object.assign({ className: className, moleculeVariant: className }, { children: jsxs(CardContainer, Object.assign({ moleculeVariant: className }, { children: [jsxs(LeftCardContainer, Object.assign({ moleculeVariant: className }, { children: [(company || year) && (jsxs(HeadingCompanyDate, Object.assign({ moleculeVariant: className }, { children: [company, " ", company && year && "•", " ", year] }))), jsx(HeadingTitle, Object.assign({ moleculeVariant: className }, { children: title })), separator && jsx(Separator, { moleculeVariant: className }), jsx(List, Object.assign({ moleculeVariant: className }, { children: checks === null || checks === void 0 ? void 0 : checks.map((check, index) => (jsxs(ListItem, Object.assign({ moleculeVariant: className }, { children: [svg && (jsx(IconCard, { moleculeVariant: className, svg: svg })), jsx(TextListItem, Object.assign({ moleculeVariant: className }, { children: check }))] }), index))) })), buttonName && buttonName.length > 0 && (jsx(ButtonCardContainer, { children: jsx(ButtonCard, Object.assign({ moleculeVariant: className, onClick: onClick }, { children: buttonName })) }))] })), jsx(ImageContainer, Object.assign({ moleculeVariant: className }, { children: jsx(Image, { moleculeVariant: className, src: cardImageSrc, alt: "Experience" }) }))] })) })));
|
|
1150
1132
|
};
|
|
1151
1133
|
|
|
1152
1134
|
const scroll = keyframes `
|