@manamerge/mana-atomic-ui 1.0.197 → 1.0.198

package/dist/index.d.ts

@@ -160,6 +160,7 @@ interface CardTeaserTypes {
     onClick?: React.MouseEventHandler<HTMLElement>;
     checks?: string[];
     svg?: FunctionComponent<SVGProps<SVGSVGElement>>;
+    backgroundSvg?: FunctionComponent<SVGProps<SVGSVGElement>>;
     cardImageSrc?: string;
     separator?: boolean;
 }

package/dist/index.js

@@ -1006,21 +1006,20 @@ const CardContainer = styled.div `
     var _a;
     const thisTheme = ((_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) || {};
     return css `
-            background-image: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.background};
             border-radius: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.borderRadius};
             max-width: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.maxWidth};
         `;
 }}
-
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: space-between;
 `;
 const HeadingCompanyDate = styled(Heading).attrs(({ theme, moleculeVariant }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f;
     return ({
-        variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.headingCompanyDate) === null || _c === void 0 ? void 0 : _c.variant
+        variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.headingCompanyDate) === null || _c === void 0 ? void 0 : _c.variant,
+        asTag: (_f = (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _d === void 0 ? void 0 : _d[moleculeVariant]) === null || _e === void 0 ? void 0 : _e.headingCompanyDate) === null || _f === void 0 ? void 0 : _f.asTag
     });
 }) `
     ${({ theme, moleculeVariant }) => {
@@ -1037,19 +1036,12 @@ const HeadingCompanyDate = styled(Heading).attrs(({ theme, moleculeVariant }) =>
     overflow: hidden;
 `;
 const HeadingTitle = styled(Heading).attrs(({ theme, moleculeVariant }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f;
     return ({
-        variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.headingTitle) === null || _c === void 0 ? void 0 : _c.variant
+        variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.headingTitle) === null || _c === void 0 ? void 0 : _c.variant,
+        asTag: (_f = (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _d === void 0 ? void 0 : _d[moleculeVariant]) === null || _e === void 0 ? void 0 : _e.headingTitle) === null || _f === void 0 ? void 0 : _f.asTag
     });
-}) `
-    ${({ theme, moleculeVariant }) => {
-    var _a, _b;
-    const headingTheme = ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.headingTitle) || {};
-    return css `
-            color: ${headingTheme === null || headingTheme === void 0 ? void 0 : headingTheme.color};
-        `;
-}}
-`;
+}) ``;
 const TextListItem = styled(Text).attrs(({ theme, moleculeVariant }) => {
     var _a, _b, _c;
     return ({
@@ -1060,7 +1052,6 @@ const TextListItem = styled(Text).attrs(({ theme, moleculeVariant }) => {
     var _a, _b;
     const thisTheme = ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.text) || {};
     return css `
-            color: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.color};
             margin: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.margin};
         `;
 }}
@@ -1079,6 +1070,7 @@ const List = styled.ul `
 `;
 const ButtonCardContainer = styled.div `
     align-self: center;
+    margin-top: 15px;
     ${({ theme }) => theme.media.mobileUp} {
         align-self: flex-start;
     }
@@ -1121,6 +1113,7 @@ const LeftCardContainer = styled.div `
     display: flex;
     flex-direction: column;
     width: 100%;
+    z-index: 1;
     ${({ theme, moleculeVariant }) => {
     var _a, _b, _c, _d, _e;
     const leftCardContainer = ((_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.leftCardContainer) === null || _c === void 0 ? void 0 : _c.responsive) || {};
@@ -1178,11 +1171,24 @@ const Separator = styled.section `
     }
 `;
 const IconCard = styled(Icon).attrs(({ theme, moleculeVariant }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     return ({
-        variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.icon) === null || _c === void 0 ? void 0 : _c.variant
+        variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.icon) === null || _c === void 0 ? void 0 : _c.variant,
+        fill: (_f = (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _d === void 0 ? void 0 : _d[moleculeVariant]) === null || _e === void 0 ? void 0 : _e.icon) === null || _f === void 0 ? void 0 : _f.fill,
+        stroke: (_j = (_h = (_g = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _g === void 0 ? void 0 : _g[moleculeVariant]) === null || _h === void 0 ? void 0 : _h.icon) === null || _j === void 0 ? void 0 : _j.stroke
     });
-}) ``;
+}) `
+    ${({ theme, moleculeVariant }) => {
+    var _a;
+    const thisTheme = ((_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) || {};
+    return css `
+            &:hover {
+                fill: ${thisTheme.icon.hover.fill};
+                stroke: ${thisTheme.icon.hover.stroke};
+            }
+        `;
+}};
+`;
 const ButtonCard = styled(Button).attrs(({ theme, moleculeVariant }) => {
     var _a, _b, _c;
     return ({
@@ -1193,18 +1199,43 @@ const CardBackgroundColor = styled.div `
     ${({ theme, moleculeVariant }) => {
     var _a;
     const thisTheme = ((_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) || {};
+    const { largeMobileUp } = theme.media;
     return css `
-            width: 100%;
+            position: relative;
+            max-width: 500px;
             border-radius: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.borderRadius};
             max-width: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.maxWidth};
             background: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.gradientBackground};
+            ${largeMobileUp} {
+                width: 100%;
+            }
+        `;
+}}
+`;
+const GradientStyle = styled(Gradient).attrs(({ theme, moleculeVariant }) => {
+    var _a, _b, _c;
+    return ({
+        variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.gradient) === null || _c === void 0 ? void 0 : _c.variant
+    });
+}) ``;
+const BackgroundSvg = styled(Icon) `
+    ${({ theme, moleculeVariant }) => {
+    var _a;
+    const thisTheme = ((_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) || {};
+    return css `
+            position: absolute;
+            inset: 0;
+            z-index: 0;
+            width: 100%;
+            height: 100%;
+            border-radius: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.borderRadius};
         `;
 }}
 `;
 
-const CardTeaser = ({ moleculeVariant = "primary", company, year, title, checks, onClick, buttonName, svg, cardImageSrc, separator }) => {
+const CardTeaser = ({ moleculeVariant = "primary", company, year, title, checks, onClick, buttonName, svg, backgroundSvg, cardImageSrc, separator }) => {
     const compVariant = "CardTeaser-" + moleculeVariant;
-    return (jsx(CardBackgroundColor, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant }, { children: jsxs(CardContainer, Object.assign({ moleculeVariant: compVariant }, { children: [jsxs(LeftCardContainer, Object.assign({ moleculeVariant: compVariant }, { children: [(company || year) && (jsxs(HeadingCompanyDate, Object.assign({ moleculeVariant: compVariant }, { children: [company, " ", company && year && "•", " ", year] }))), jsx(HeadingTitle, Object.assign({ moleculeVariant: compVariant }, { children: title })), separator && jsx(Separator, { moleculeVariant: compVariant }), jsx(List, Object.assign({ moleculeVariant: compVariant }, { children: checks === null || checks === void 0 ? void 0 : checks.map((check, index) => (jsxs(ListItem, Object.assign({ moleculeVariant: compVariant }, { children: [svg && (jsx(IconCard, { moleculeVariant: compVariant, svg: svg })), jsx(TextListItem, Object.assign({ moleculeVariant: compVariant }, { children: check }))] }), index))) })), buttonName && buttonName.length > 0 && (jsx(ButtonCardContainer, { children: jsx(ButtonCard, Object.assign({ moleculeVariant: compVariant, onClick: onClick }, { children: buttonName })) }))] })), jsx(ImageContainer, { children: jsx(Image, { moleculeVariant: compVariant, src: cardImageSrc, alt: "Experience" }) })] })) })));
+    return (jsxs(CardBackgroundColor, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant }, { children: [backgroundSvg && (jsx(BackgroundSvg, { moleculeVariant: compVariant, svg: backgroundSvg })), jsxs(CardContainer, Object.assign({ moleculeVariant: compVariant }, { children: [jsxs(LeftCardContainer, Object.assign({ moleculeVariant: compVariant }, { children: [(company || year) && (jsx(GradientStyle, Object.assign({ moleculeVariant: "primary" }, { children: jsxs(HeadingCompanyDate, Object.assign({ moleculeVariant: compVariant }, { children: [company, " ", company && year && "•", " ", year] })) }))), jsx(HeadingTitle, Object.assign({ moleculeVariant: compVariant }, { children: title })), separator && jsx(Separator, { moleculeVariant: compVariant }), jsx(List, Object.assign({ moleculeVariant: compVariant }, { children: checks === null || checks === void 0 ? void 0 : checks.map((check, index) => (jsxs(ListItem, Object.assign({ moleculeVariant: compVariant }, { children: [svg && (jsx(IconCard, { moleculeVariant: compVariant, svg: svg })), jsx(TextListItem, Object.assign({ moleculeVariant: compVariant }, { children: check }))] }), index))) })), buttonName && buttonName.length > 0 && (jsx(ButtonCardContainer, { children: jsx(ButtonCard, Object.assign({ moleculeVariant: compVariant, onClick: onClick }, { children: buttonName })) }))] })), jsx(ImageContainer, { children: jsx(Image, { moleculeVariant: compVariant, src: cardImageSrc, alt: "Experience" }) })] }))] })));
 };
 
 const scroll = keyframes `