@manamerge/mana-atomic-ui 0.0.72 → 0.0.74

package/dist/index.d.ts

@@ -133,4 +133,27 @@ interface FooterTypes {
 }
 declare const Footer: React.FC<FooterTypes>;
 
-export { Button, Footer, Header, Heading, Icon, Link, Navigation, Text };
+interface CardTeaserTypes {
+    company?: string;
+    year?: string;
+    title?: string;
+    buttonName?: string;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    checks?: string[];
+    svg?: FunctionComponent<SVGProps<SVGSVGElement>>;
+    cardImageSrc?: string;
+    separator?: boolean;
+}
+declare const CardTeaser: React.FC<CardTeaserTypes>;
+
+interface CardBannerTypes {
+    icon?: FunctionComponent<SVGProps<SVGSVGElement>>;
+    title?: string;
+    description?: string;
+    children?: ReactNode;
+    buttonText?: string;
+    buttonClick?: React.MouseEventHandler<HTMLElement>;
+}
+declare const CardBanner: React.FC<CardBannerTypes>;
+
+export { Button, CardBanner, CardTeaser, Footer, Header, Heading, Icon, Link, Navigation, Text };

package/dist/index.js

@@ -326,18 +326,13 @@ const Link = (_a) => {
     return (React.createElement(StyledLink$2, Object.assign({ className: classNames("Link-" + variant), variant: "Link-" + variant, as: Component, fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight }, componentProps, props), children));
 };
 
-const WrapperHeader = styled.div `
+const WrapperBackground = styled.div `
+    position: relative;
     display: flex;
-    flex-direction: column;
     align-items: center;
     justify-content: center;
     height: 100vh;
-    text-align: center;
-    gap: 15px;
-
-    border-radius: 50%;
-    position: relative;
-
+    width: 100%;
     &::before {
         content: "";
         position: absolute;
@@ -357,30 +352,24 @@ const WrapperHeader = styled.div `
                 );
             `;
 }}
-
-        z-index: -1;
-    }
-
-    &::before {
         animation: glow 3s infinite alternate ease-in-out;
     }
-
-    @keyframes glow {
-        0% {
-            transform: scale(1);
-            opacity: 0.5;
-        }
-        100% {
-            transform: scale(1.5);
-            opacity: 1;
-        }
-    }
+`;
+const WrapperHeader = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    gap: 15px;
+    position: relative;
 `;
 const WrapperLineTop = styled.div `
     display: flex;
     align-items: center;
     justify-content: center;
     width: fit-content;
+    align-items: baseline;
     border-radius: 45px;
     padding-left: 8px;
     padding-right: 8px;
@@ -430,7 +419,7 @@ const AtomIconDot = styled(Icon).attrs(({ theme }) => {
         `;
 }}
 `;
-const AtomHeading = styled(Heading).attrs(({ theme }) => {
+const AtomHeading$1 = styled(Heading).attrs(({ theme }) => {
     var _a, _b;
     return ({
         variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.header) === null || _a === void 0 ? void 0 : _a.atomHeading) === null || _b === void 0 ? void 0 : _b.variant) || "h1"
@@ -487,22 +476,22 @@ const AtomIconRight = styled(Icon).attrs(({ theme }) => {
 }) ``;
 
 const Header = ({ iconTop, iconDot, iconLeft, iconRight, textBanner, headingTitle, textTitle, buttonLeftText, buttonLeftClick, buttonRightText, buttonRightClick }) => {
-    return (React.createElement(WrapperHeader, null,
-        React.createElement("div", null,
-            iconTop && React.createElement(AtomIconTop, { svg: iconTop }),
-            React.createElement(WrapperLineTop, null,
-                iconDot && React.createElement(AtomIconDot, { svg: iconDot }),
-                React.createElement(AtomTextTitle, null, textBanner))),
-        React.createElement(AtomHeading, null, headingTitle),
-        React.createElement("div", null, textTitle &&
-            textTitle.map((text, i) => (React.createElement(AtomTextTitle, { key: i }, text)))),
-        React.createElement(WrapperLineBottom, null,
-            React.createElement(AtomButtonLeft, { onClick: buttonLeftClick },
-                iconLeft && React.createElement(AtomIconLeft, { svg: iconLeft }),
-                React.createElement(AtomTextLeft, null, buttonLeftText)),
-            React.createElement(AtomButtonRight, { onClick: buttonRightClick },
-                React.createElement(AtomTextRight, null, buttonRightText),
-                iconRight && React.createElement(AtomIconRight, { svg: iconRight })))));
+    return (React.createElement(WrapperBackground, null,
+        React.createElement(WrapperHeader, null,
+            React.createElement("div", null,
+                iconTop && React.createElement(AtomIconTop, { svg: iconTop }),
+                React.createElement(WrapperLineTop, null,
+                    iconDot && React.createElement(AtomIconDot, { svg: iconDot }),
+                    React.createElement(AtomTextTitle, null, textBanner))),
+            React.createElement(AtomHeading$1, null, headingTitle),
+            React.createElement("div", null, textTitle === null || textTitle === void 0 ? void 0 : textTitle.map((text, i) => (React.createElement(AtomTextTitle, { key: i }, text)))),
+            React.createElement(WrapperLineBottom, null,
+                React.createElement(AtomButtonLeft, { onClick: buttonLeftClick },
+                    iconLeft && React.createElement(AtomIconLeft, { svg: iconLeft }),
+                    React.createElement(AtomTextLeft, null, buttonLeftText)),
+                React.createElement(AtomButtonRight, { onClick: buttonRightClick },
+                    React.createElement(AtomTextRight, null, buttonRightText),
+                    iconRight && React.createElement(AtomIconRight, { svg: iconRight }))))));
 };
 
 const NavBar = styled.nav `
@@ -727,5 +716,301 @@ const Footer = ({ children, svg, routes }) => {
         React.createElement(FooterNav, null, sortedRoutes.map(renderRouteLink))));
 };
 
-export { Button, Footer, Header, Heading, Icon, Link, Navigation, Text };
+const CardContainer = styled.div `
+    overflow: hidden;
+
+    ${({ theme }) => {
+    const textTheme = (theme === null || theme === void 0 ? void 0 : theme.cardTeaser) || {};
+    return css `
+            background-image: ${textTheme === null || textTheme === void 0 ? void 0 : textTheme.background};
+            border-radius: ${textTheme === null || textTheme === void 0 ? void 0 : textTheme.borderRadius};
+            max-width: ${textTheme === null || textTheme === void 0 ? void 0 : textTheme.maxWidth};
+        `;
+}}
+
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+`;
+const HeadingCompanyDate = styled(Heading).attrs(({ theme }) => {
+    var _a, _b;
+    return ({
+        variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a.headingCompanyDate) === null || _b === void 0 ? void 0 : _b.variant) || "h1"
+    });
+}) `
+    ${({ theme }) => {
+    var _a;
+    const headingTheme = ((_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a.headingCompanyDate) || {};
+    return css `
+            color: ${headingTheme === null || headingTheme === void 0 ? void 0 : headingTheme.color};
+            text-transform: ${headingTheme === null || headingTheme === void 0 ? void 0 : headingTheme.textTransform};
+        `;
+}}
+
+    margin-bottom: 16px;
+    white-space: nowrap;
+    overflow: hidden;
+`;
+const HeadingTitle = styled(Heading).attrs(({ theme }) => {
+    var _a, _b;
+    return ({
+        variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a.headingTitle) === null || _b === void 0 ? void 0 : _b.variant) || "h1"
+    });
+}) `
+    ${({ theme }) => {
+    var _a;
+    const headingTheme = ((_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a.headingTitle) || {};
+    return css `
+            color: ${headingTheme === null || headingTheme === void 0 ? void 0 : headingTheme.color};
+        `;
+}}
+`;
+const TextListItem = styled(Text).attrs(({ theme }) => {
+    var _a, _b;
+    return ({
+        variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.variant) || "regular"
+    });
+}) `
+    ${({ theme }) => {
+    var _a;
+    const textTheme = ((_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a.text) || {};
+    return css `
+            color: ${textTheme === null || textTheme === void 0 ? void 0 : textTheme.color};
+            margin: ${textTheme === null || textTheme === void 0 ? void 0 : textTheme.margin};
+        `;
+}}
+`;
+const List = styled.ul `
+    list-style: none;
+
+    ${({ theme }) => {
+    var _a;
+    const textTheme = ((_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a.list) || {};
+    return css `
+            padding: ${textTheme === null || textTheme === void 0 ? void 0 : textTheme.padding};
+            margin: ${textTheme === null || textTheme === void 0 ? void 0 : textTheme.margin};
+        `;
+}}
+`;
+const ButtonCardContainer = styled.div `
+    align-self: center;
+    ${({ theme }) => theme.media.mobileUp} {
+        align-self: flex-start;
+    }
+`;
+const ImageContainer = styled.div `
+    position: relative;
+    display: flex;
+    justify-content: flex-end;
+
+    ${({ theme }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const textTheme = ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a.imageContainer) === null || _b === void 0 ? void 0 : _b.responsive) || {};
+    const { tinyMobileUp, largeMobileUp, desktopUp } = theme.media;
+    return css `
+            ${tinyMobileUp} {
+                right: ${(_c = textTheme === null || textTheme === void 0 ? void 0 : textTheme.tinyMobileUp) === null || _c === void 0 ? void 0 : _c.right};
+                top: ${(_d = textTheme === null || textTheme === void 0 ? void 0 : textTheme.tinyMobileUp) === null || _d === void 0 ? void 0 : _d.top};
+                padding: ${(_e = textTheme === null || textTheme === void 0 ? void 0 : textTheme.tinyMobileUp) === null || _e === void 0 ? void 0 : _e.padding};
+            }
+            ${largeMobileUp} {
+                right: ${(_f = textTheme === null || textTheme === void 0 ? void 0 : textTheme.largeMobileUp) === null || _f === void 0 ? void 0 : _f.right};
+                top: ${(_g = textTheme === null || textTheme === void 0 ? void 0 : textTheme.largeMobileUp) === null || _g === void 0 ? void 0 : _g.top};
+                padding: ${(_h = textTheme === null || textTheme === void 0 ? void 0 : textTheme.largeMobileUp) === null || _h === void 0 ? void 0 : _h.padding};
+            }
+            ${desktopUp} {
+                padding: ${(_j = textTheme === null || textTheme === void 0 ? void 0 : textTheme.desktopUp) === null || _j === void 0 ? void 0 : _j.padding};
+            }
+        `;
+}}
+`;
+const Image = styled.img `
+    position: absolute;
+    width: 330px;
+    height: auto;
+    max-width: none;
+    display: none;
+    ${({ theme }) => {
+    var _a, _b;
+    return css `
+            border-radius: ${(_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a.image) === null || _b === void 0 ? void 0 : _b.borderRadius};
+        `;
+}}
+    ${({ theme }) => theme.media.desktopUp} {
+        width: 350px;
+    }
+    ${({ theme }) => theme.media.mobileLandscapeUp} {
+        display: block;
+    }
+`;
+const LeftCardContainer = styled.div `
+    display: flex;
+    flex-direction: column;
+    ${({ theme }) => {
+    var _a, _b, _c, _d, _e;
+    const leftCardContainer = ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a.leftCardContainer) === null || _b === void 0 ? void 0 : _b.responsive) || {};
+    const { desktopUp, tinyMobileUp } = theme.media;
+    return css `
+            ${tinyMobileUp} {
+                padding: ${(_c = leftCardContainer === null || leftCardContainer === void 0 ? void 0 : leftCardContainer.tinyMobileUp) === null || _c === void 0 ? void 0 : _c.padding};
+                width: ${(_d = leftCardContainer === null || leftCardContainer === void 0 ? void 0 : leftCardContainer.tinyMobileUp) === null || _d === void 0 ? void 0 : _d.width};
+            }
+            ${desktopUp} {
+                padding: ${(_e = leftCardContainer === null || leftCardContainer === void 0 ? void 0 : leftCardContainer.desktopUp) === null || _e === void 0 ? void 0 : _e.padding};
+            }
+        `;
+}}
+`;
+const ListItem = styled.li `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    ${({ theme }) => {
+    var _a, _b, _c, _d;
+    const listItem = ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a.listItem) === null || _b === void 0 ? void 0 : _b.responsive) || {};
+    const { tinyMobileUp, mobileUp } = theme.media;
+    return css `
+            ${tinyMobileUp} {
+                gap: ${(_c = listItem === null || listItem === void 0 ? void 0 : listItem.tinyMobileUp) === null || _c === void 0 ? void 0 : _c.gap};
+            }
+            ${mobileUp} {
+                gap: ${(_d = listItem === null || listItem === void 0 ? void 0 : listItem.mobileUp) === null || _d === void 0 ? void 0 : _d.gap};
+            }
+        `;
+}}
+`;
+const Separator = styled.section `
+    display: flex;
+    flex-direction: column;
+    display: none;
+
+    ${({ theme }) => {
+    var _a;
+    const textTheme = ((_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a.separator) || {};
+    return css `
+            padding: ${textTheme === null || textTheme === void 0 ? void 0 : textTheme.padding};
+            &:before {
+                content: "";
+                align-self: stretch;
+                border: ${textTheme === null || textTheme === void 0 ? void 0 : textTheme.border};
+                border-image: white 1;
+            }
+        `;
+}}
+    ${({ theme }) => theme.media.largeMobileUp} {
+        display: flex;
+    }
+`;
+const IconCard = styled(Icon).attrs(({ theme }) => {
+    var _a, _b;
+    return ({
+        variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a.icons) === null || _b === void 0 ? void 0 : _b.variant) || "small"
+    });
+}) ``;
+const ButtonCard = styled(Button).attrs(({ theme }) => {
+    var _a, _b;
+    return ({
+        variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a.button) === null || _b === void 0 ? void 0 : _b.variant) || "regular"
+    });
+}) ``;
+const CardBackgroundColor = styled.div `
+    ${({ theme }) => {
+    const textTheme = (theme === null || theme === void 0 ? void 0 : theme.cardTeaser) || {};
+    return css `
+            border-radius: ${textTheme === null || textTheme === void 0 ? void 0 : textTheme.borderRadius};
+            max-width: ${textTheme === null || textTheme === void 0 ? void 0 : textTheme.maxWidth};
+            background: ${textTheme === null || textTheme === void 0 ? void 0 : textTheme.gradientBackground};
+        `;
+}}
+`;
+
+const CardTeaser = ({ company, year, title, checks, onClick, buttonName, svg, cardImageSrc, separator }) => {
+    return (React.createElement(CardBackgroundColor, null,
+        React.createElement(CardContainer, null,
+            React.createElement(LeftCardContainer, null,
+                React.createElement(HeadingCompanyDate, null,
+                    company,
+                    " \u2022 ",
+                    year),
+                React.createElement(HeadingTitle, null, title),
+                separator && React.createElement(Separator, null),
+                React.createElement(List, null, checks === null || checks === void 0 ? void 0 : checks.map((check, index) => (React.createElement(ListItem, { key: index },
+                    svg && React.createElement(IconCard, { svg: svg }),
+                    React.createElement(TextListItem, null, check))))),
+                React.createElement(ButtonCardContainer, null,
+                    React.createElement(ButtonCard, { onClick: onClick }, buttonName))),
+            React.createElement(ImageContainer, null,
+                React.createElement(Image, { src: cardImageSrc, alt: "Experience" })))));
+};
+
+const Card = styled.div `
+    ${(_a) => {
+    var { theme } = _a, props = __rest(_a, ["theme"]);
+    const thisTheme = (theme === null || theme === void 0 ? void 0 : theme.cardBanner) || {};
+    return css `
+            display: flex;
+            flex-direction: ${props.flexDirection ||
+        (thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.flexDirection) ||
+        "row"};
+            justify-content: ${props.justifyContent ||
+        (thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.justifyContent) ||
+        "space-between"};
+            gap: ${props.gap || (thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.gap) || "20px"};
+            align-items: center;
+            background: ${props.background || (thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.background) || ""};
+            border: ${props.border || (thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.border) || ""};
+            border-radius: ${props.borderRadius ||
+        (thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.borderRadius) ||
+        ""};
+            box-shadow: ${props.boxShadow || (thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.boxShadow) || ""};
+            padding: ${props.padding || (thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.padding) || ""};
+            height: ${props.height || (thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.height) || "auto"};
+            max-width: ${props.maxWidth || (thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.maxWidth) || "auto"};
+        `;
+}}
+`;
+const AtomHeading = styled(Heading).attrs(({ theme }) => {
+    var _a, _b;
+    return ({
+        variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _a === void 0 ? void 0 : _a.atomHeading) === null || _b === void 0 ? void 0 : _b.variant) || "h3"
+    });
+}) ``;
+const AtomText = styled(Text).attrs(({ theme }) => {
+    var _a, _b;
+    return ({
+        variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _a === void 0 ? void 0 : _a.atomText) === null || _b === void 0 ? void 0 : _b.variant) || "regular"
+    });
+}) ``;
+const AtomButton = styled(Button).attrs(({ theme }) => {
+    var _a, _b;
+    return ({
+        variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _a === void 0 ? void 0 : _a.atomButton) === null || _b === void 0 ? void 0 : _b.variant) || "primary"
+    });
+}) ``;
+const AtomTextButton = styled(Text).attrs(({ theme }) => {
+    var _a, _b;
+    return ({
+        variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _a === void 0 ? void 0 : _a.atomTextButton) === null || _b === void 0 ? void 0 : _b.variant) || "primary"
+    });
+}) ``;
+const AtomIcon = styled(Icon).attrs(({ theme }) => {
+    var _a, _b;
+    return ({
+        variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _a === void 0 ? void 0 : _a.atomIcon) === null || _b === void 0 ? void 0 : _b.variant) || "medium"
+    });
+}) ``;
+
+const CardBanner = ({ icon, title, description, buttonText, buttonClick }) => {
+    return (React.createElement(Card, null,
+        React.createElement("div", null,
+            React.createElement(AtomHeading, null, title),
+            React.createElement(AtomText, null, description)),
+        buttonClick && (React.createElement(AtomButton, { onClick: buttonClick },
+            React.createElement(AtomTextButton, null, buttonText),
+            icon && React.createElement(AtomIcon, { svg: icon })))));
+};
+
+export { Button, CardBanner, CardTeaser, Footer, Header, Heading, Icon, Link, Navigation, Text };
 //# sourceMappingURL=index.js.map