@laerdal/life-react-components 0.0.280-dev.3 → 0.0.280-dev.7
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/esm/Banners/Banner.js +107 -52
- package/dist/esm/Banners/Banner.js.map +1 -1
- package/dist/esm/Banners/styles.js +122 -0
- package/dist/esm/Banners/styles.js.map +1 -0
- package/dist/esm/Footer/Components/FooterNewsletterAndSocialSection.js +36 -15
- package/dist/esm/Footer/Components/FooterNewsletterAndSocialSection.js.map +1 -1
- package/dist/esm/InputFields/styling.js +7 -1
- package/dist/esm/InputFields/styling.js.map +1 -1
- package/dist/esm/styles/typography.js +61 -22
- package/dist/esm/styles/typography.js.map +1 -1
- package/dist/js/Banners/Banner.d.ts +2 -0
- package/dist/js/Banners/Banner.js +74 -41
- package/dist/js/Banners/Banner.js.map +1 -1
- package/dist/js/Banners/styles.d.ts +1 -0
- package/dist/js/Banners/styles.js +33 -0
- package/dist/js/Banners/styles.js.map +1 -0
- package/dist/js/Footer/Components/FooterNewsletterAndSocialSection.js +18 -4
- package/dist/js/Footer/Components/FooterNewsletterAndSocialSection.js.map +1 -1
- package/dist/js/InputFields/styling.js +2 -2
- package/dist/js/InputFields/styling.js.map +1 -1
- package/dist/js/styles/typography.js +75 -67
- package/dist/js/styles/typography.js.map +1 -1
- package/dist/umd/Banners/Banner.js +109 -55
- package/dist/umd/Banners/Banner.js.map +1 -1
- package/dist/umd/Banners/styles.js +141 -0
- package/dist/umd/Banners/styles.js.map +1 -0
- package/dist/umd/Footer/Components/FooterNewsletterAndSocialSection.js +39 -19
- package/dist/umd/Footer/Components/FooterNewsletterAndSocialSection.js.map +1 -1
- package/dist/umd/InputFields/styling.js +7 -1
- package/dist/umd/InputFields/styling.js.map +1 -1
- package/dist/umd/styles/typography.js +64 -25
- package/dist/umd/styles/typography.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","COLORS","correct_100","black","primary_20","link","BannerCenter","color","BREAKPOINTS","MEDIUM","LARGE","XLARGE","type","linkText","hover","bottom","testId","icon","onClose","Banner","formatTypeToLowerCase","warning_700","critical_700","correct_700","primary_700"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Tip, Attention, ThumbsUp, Help, Close } from '../icons/systemicons/SystemIcons';\nimport { Button } from '../Button';\n\n/**\n * Styles for <Banner />\n */\nconst BannerContainer = styled.div<BannerProps>`\n background: ${(props: BannerProps) => (props.type ? props.type : COLORS.correct_100)};\n min-height: 48px;\n display: flex;\n color: ${COLORS.black};\n margin-top: ${(props: BannerProps) => (props.bottom ? 'auto' : '0')};\n\n button:last-child {\n margin: 0 0 0 auto;\n line-height: 0;\n cursor: pointer;\n }\n button:last-child:hover {\n margin: 0 0 0 auto;\n background: ${(props: BannerProps) => (props.hover ? props.hover : COLORS.primary_20)};\n }\n\n a {\n color: ${(props: BannerProps) => (props.link)};\n font-weight: bold;\n text-decoration: none;\n \n &:hover {\n text-decoration: underline;\n }\n }\n\n font-family: Lato;\n font-style: normal;\n font-weight: normal;\n font-size: 16px;\n line-height: 140%;\n`;\n\nconst BannerCenter = styled.div`\n color: ${(props) => props.color};\n font-size: 18px;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n width: 100%;\n margin: 0 8px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 56px;\n }\n ${BREAKPOINTS.XLARGE} {\n width: 1120px;\n margin: 0 auto;\n }\n >svg {\n margin-right:8px;\n }\n`;\n\ntype BannerProps = {\n type?: string;\n link?: string;\n linkText?: string;\n hover?: string;\n bottom?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n onClose?: () => void;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ type, children, bottom, testId, linkText, link, onClose, icon }) => {\n\n const formatTypeToLowerCase = type?.toLowerCase();\n switch (formatTypeToLowerCase) {\n case 'warning':\n return (\n <BannerContainer data-testid={testId} type={COLORS.warning_100} link={COLORS.warning_700} hover={COLORS.warning_20} bottom={bottom}>\n <BannerCenter color={COLORS.warning_700}>\n { icon ? icon : <Help color={COLORS.warning_700} size=\"24px\" /> }\n {children} \n {link && linkText && <a href={link} target=\"_blank\">{linkText}</a>}\n { onClose &&\n <Button variant=\"text\" onClick={() => onClose()}>\n <Close color={COLORS.warning_500} size=\"24px\" />\n </Button>\n }\n </BannerCenter>\n </BannerContainer>\n );\n case 'critical':\n return (\n <BannerContainer data-testid={testId} type={COLORS.critical_100} link={COLORS.critical_700} hover={COLORS.critical_20} bottom={bottom}>\n <BannerCenter color={COLORS.critical_700}>\n { icon ? icon : <Attention color={COLORS.critical_700} size=\"24px\" /> }\n {children} \n {link && linkText && <a href={link} target=\"_blank\">{linkText}</a>}\n { onClose &&\n <Button variant=\"text\" onClick={() => onClose()}>\n <Close color={COLORS.critical_500} size=\"24px\" />\n </Button>\n }\n </BannerCenter>\n </BannerContainer>\n );\n case 'positive':\n return (\n <BannerContainer data-testid={testId} type={COLORS.correct_100} link={COLORS.correct_700} hover={COLORS.correct_20} bottom={bottom}>\n <BannerCenter color={COLORS.correct_700}>\n { icon ? icon : <ThumbsUp color={COLORS.correct_700} size=\"24px\" /> }\n {children} \n {link && linkText && <a href={link} target=\"_blank\">{linkText}</a>}\n { onClose &&\n <Button variant=\"text\" onClick={() => onClose()}>\n <Close color={COLORS.correct_500} size=\"24px\" />\n </Button>\n }\n </BannerCenter>\n </BannerContainer>\n );\n default:\n return (\n <BannerContainer data-testid={testId} type={COLORS.primary_100} link={COLORS.primary_700} hover={COLORS.primary_20} bottom={bottom}>\n <BannerCenter color={COLORS.primary_700}>\n { icon ? icon : <Tip color={COLORS.primary_700} size=\"24px\" /> } \n {children} \n {link && linkText && <a href={link} target=\"_blank\">{linkText}</a>}\n { onClose &&\n <Button variant=\"text\" onClick={() => onClose()}>\n <Close color={COLORS.primary_500} size=\"24px\" />\n </Button>\n }\n </BannerCenter>\n </BannerContainer>\n );\n }\n};\n\nexport default Banner;\n"],"file":"Banner.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","COLORS","correct_100","black","BREAKPOINTS","MEDIUM","LARGE","link","BannerCenter","color","ButtonWrapper","getButtonStyle","BannerContentWrapper","size","type","linkText","hover","bottom","testId","icon","onClose","noIcon","Banner","formatTypeToLowerCase"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA;AACA;AACA;AACA,QAAMA,eAAe,GAAGC,2BAAOC,GAAiB;AAChD,gBAAiBC,KAAD,IAAyBA,KAAK,CAALA,IAAAA,GAAaA,KAAK,CAAlBA,IAAAA,GAA0BC,eAAOC,WAAa;AACvF;AACA;AACA,WAAWD,eAAOE,KAAM;AACxB,gBAAiBH,KAAD,IAAyBA,KAAK,CAALA,MAAAA,GAAAA,MAAAA,GAAwB,GAAK;AACtE;AACA;AACA;AACA;AACA,MAAMI,oBAAYC,MAAO;AACzB;AACA;AACA,MAAMD,oBAAYE,KAAM;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAcN,KAAD,IAAwBA,KAAK,CAACO,IAAK;AAChD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAzCA,CAAA;AA4CA,QAAMC,YAAY,GAAGV,2BAAOC,GAAI;AAChC,WAAYC,KAAD,IAAWA,KAAK,CAACS,KAAM;AAClC;AACA;AACA;AACA;AACA,IAAIL,oBAAYC,MAAO;AACvB;AACA;AACA,IAAID,oBAAYE,KAAM;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAzBA,CAAA;AA4BA,QAAMI,aAAa,GAAGZ,2BAAOC,GAAuB;AACpD;AACA,IAAKC,KAAD,IAAYA,KAAK,CAALA,IAAAA,GAAaW,6BAAeX,KAAK,CAAjCA,IAAaW,CAAbX,GAA0C,IAAM;AAFhE,CAAA;AAKA,QAAMY,oBAAoB,GAAGd,2BAAOC,GAAI;AACxC;AACA;AACA;AACA;AACA;AACA;AANA,CAAA;;AAsBA,QAAMuB,MAA4C,GAAG,CAAC;AAAA,IAAA,IAAA;AAAA,IAAA,IAAA;AAAA,IAAA,QAAA;AAAA,IAAA,MAAA;AAAA,IAAA,MAAA;AAAA,IAAA,QAAA;AAAA,IAAA,IAAA;AAAA,IAAA,OAAA;AAAA,IAAA,IAAA;AAAuED,IAAAA;AAAvE,GAAD,KAAqF;AACxI,UAAME,qBAAqB,GAAGT,IAAI,EAAlC,WAA8BA,EAA9B;;AACA,YAAA,qBAAA;AACE,WAAA,SAAA;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAiB,yBAAjB,MAAA;AAAsC,UAAA,IAAI,EAAEb,eAA5C,WAAA;AAAgE,UAAA,IAAI,EAAEA,eAAtE,WAAA;AAA0F,UAAA,KAAK,EAAEA,eAAjG,UAAA;AAAoH,UAAA,MAAM,EAAEgB;AAA5H,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AAAc,UAAA,KAAK,EAAEhB,eAArB,WAAA;AAAyC,UAAA,SAAS,EAAEY;AAApD,SAAA,EACGM,IAAI,GAAA,IAAA,GAAUE,MAAM,GAAA,IAAA,GAAA,aAAU,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA;AAAM,UAAA,KAAK,EAAEpB,eAAb,WAAA;AAAiC,UAAA,IAAI,EAAC;AAAtC,SAAA,CADjC,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAEGM,IAAI,IAAJA,QAAAA,IAAAA,aACC,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAG,UAAA,IAAI,EAAP,IAAA;AAAe,UAAA,MAAM,EAAC;AAAtB,SAAA,EALN,QAKM,CAHJ,CAFF,EAUGa,OAAO,IAAA,aACN,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAe,UAAA,IAAI,EAAEG;AAArB,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,UAAA,OAAO,EAAnB,WAAA;AAAgC,UAAA,KAAK,EAArC,UAAA;AAAiD,UAAA,wBAAwB,EAAzE,IAAA;AAA0E,UAAA,MAAM,EAAE,MAAMH,OAAO;AAA/F,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAO,UAAA,KAAK,EAAEnB,eAAd,WAAA;AAAkC,UAAA,IAAI,EAAC;AAAvC,SAAA,CADF,CADF,CAXJ,CADF,CADF;;AAsBF,WAAA,UAAA;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAiB,yBAAjB,MAAA;AAAsC,UAAA,IAAI,EAAEA,eAA5C,YAAA;AAAiE,UAAA,IAAI,EAAEA,eAAvE,YAAA;AAA4F,UAAA,KAAK,EAAEA,eAAnG,WAAA;AAAuH,UAAA,MAAM,EAA7H,MAAA;AAAuI,UAAA,SAAS,EAAEY;AAAlJ,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AAAc,UAAA,KAAK,EAAEZ,eAArB,YAAA;AAA0C,UAAA,SAAS,EAAEY;AAArD,SAAA,EACGM,IAAI,GAAA,IAAA,GAAUE,MAAM,GAAA,IAAA,GAAA,aAAU,KAAA,CAAA,aAAA,CAAA,sBAAA,EAAA;AAAW,UAAA,KAAK,EAAEpB,eAAlB,YAAA;AAAuC,UAAA,IAAI,EAAC;AAA5C,SAAA,CADjC,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAEGM,IAAI,IAAJA,QAAAA,IAAAA,aACC,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAG,UAAA,IAAI,EAAP,IAAA;AAAe,UAAA,MAAM,EAAC;AAAtB,SAAA,EALN,QAKM,CAHJ,CAFF,EAUGa,OAAO,IAAA,aACN,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAe,UAAA,IAAI,EAAEG;AAArB,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,UAAA,OAAO,EAAnB,WAAA;AAAgC,UAAA,KAAK,EAArC,UAAA;AAAiD,UAAA,wBAAwB,EAAzE,IAAA;AAA0E,UAAA,MAAM,EAAE,MAAMH,OAAO;AAA/F,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAO,UAAA,KAAK,EAAEnB,eAAd,YAAA;AAAmC,UAAA,IAAI,EAAC;AAAxC,SAAA,CADF,CADF,CAXJ,CADF,CADF;;AAsBF,WAAA,UAAA;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAiB,yBAAjB,MAAA;AAAsC,UAAA,IAAI,EAAEA,eAA5C,WAAA;AAAgE,UAAA,IAAI,EAAEA,eAAtE,WAAA;AAA0F,UAAA,KAAK,EAAEA,eAAjG,UAAA;AAAoH,UAAA,MAAM,EAA1H,MAAA;AAAoI,UAAA,SAAS,EAAEY;AAA/I,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AAAc,UAAA,KAAK,EAAEZ,eAArB,WAAA;AAAyC,UAAA,SAAS,EAAEY;AAApD,SAAA,EACGM,IAAI,GAAA,IAAA,GAAUE,MAAM,GAAA,IAAA,GAAA,aAAU,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA;AAAU,UAAA,KAAK,EAAEpB,eAAjB,WAAA;AAAqC,UAAA,IAAI,EAAC;AAA1C,SAAA,CADjC,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAEGM,IAAI,IAAJA,QAAAA,IAAAA,aACC,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAG,UAAA,IAAI,EAAP,IAAA;AAAe,UAAA,MAAM,EAAC;AAAtB,SAAA,EALN,QAKM,CAHJ,CAFF,EAUGa,OAAO,IAAA,aACN,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAe,UAAA,IAAI,EAAEG;AAArB,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,UAAA,OAAO,EAAnB,WAAA;AAAgC,UAAA,KAAK,EAArC,UAAA;AAAiD,UAAA,wBAAwB,EAAzE,IAAA;AAA0E,UAAA,MAAM,EAAE,MAAMH,OAAO;AAA/F,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAO,UAAA,KAAK,EAAEnB,eAAd,WAAA;AAAkC,UAAA,IAAI,EAAC;AAAvC,SAAA,CADF,CADF,CAXJ,CADF,CADF;;AAsBF;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAiB,yBAAjB,MAAA;AAAsC,UAAA,IAAI,EAAEA,eAA5C,WAAA;AAAgE,UAAA,IAAI,EAAEA,eAAtE,WAAA;AAA0F,UAAA,KAAK,EAAEA,eAAjG,UAAA;AAAoH,UAAA,MAAM,EAA1H,MAAA;AAAoI,UAAA,SAAS,EAAEY;AAA/I,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AAAc,UAAA,KAAK,EAAEZ,eAArB,WAAA;AAAyC,UAAA,SAAS,EAAEY;AAApD,SAAA,EACGM,IAAI,GAAA,IAAA,GAAUE,MAAM,GAAA,IAAA,GAAA,aAAU,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA;AAAK,UAAA,KAAK,EAAEpB,eAAZ,WAAA;AAAgC,UAAA,IAAI,EAAC;AAArC,SAAA,CADjC,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAEGM,IAAI,IAAJA,QAAAA,IAAAA,aACC,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAG,UAAA,IAAI,EAAP,IAAA;AAAe,UAAA,MAAM,EAAC;AAAtB,SAAA,EALN,QAKM,CAHJ,CAFF,EAUGa,OAAO,IAAA,aACN,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAe,UAAA,IAAI,EAAC;AAApB,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,UAAA,OAAO,EAAnB,WAAA;AAAgC,UAAA,KAAK,EAArC,UAAA;AAAiD,UAAA,wBAAwB,EAAzE,IAAA;AAA0E,UAAA,MAAM,EAAE,MAAMA,OAAO;AAA/F,SAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAO,UAAA,KAAK,EAAEnB,eAAd,WAAA;AAAkC,UAAA,IAAI,EAAC;AAAvC,SAAA,CADF,CADF,CAXJ,CADF,CADF;AAvEJ;AAFF,GAAA;;;AAZEY,IAAAA,I,6BAAO,O,EAAU,Q,EAAW,O;AAC5BC,IAAAA,I;AACAP,IAAAA,I;AACAQ,IAAAA,Q;AACAC,IAAAA,K;AACAC,IAAAA,M;AACAC,IAAAA,M;AACAC,IAAAA,I;AACAC,IAAAA,O;AACAC,IAAAA,M;;oBAqGF,M","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Tip, Attention, ThumbsUp, Help, Close } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\n\n/**\n * Styles for <Banner />\n */\nconst BannerContainer = styled.div<BannerProps>`\n background: ${(props: BannerProps) => (props.type ? props.type : COLORS.correct_100)};\n min-height: 48px;\n display: flex;\n color: ${COLORS.black};\n margin-top: ${(props: BannerProps) => (props.bottom ? 'auto' : '0')};\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 16px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n a {\n color: ${(props: BannerProps) => props.link};\n font-weight: bold;\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n }\n\n font-family: Lato;\n font-style: normal;\n font-weight: normal;\n font-size: 16px;\n line-height: 20px;\n`;\n\nconst BannerCenter = styled.div`\n color: ${(props) => props.color};\n font-size: 18px;\n display: flex;\n width: 100%;\n margin: 0 6px 0 16px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 22px 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 46px 0 56px;\n }\n &.small {\n margin: 0 6px 0 16px;\n }\n &.medium {\n margin: 0 22px 0 32px;\n }\n &.large {\n margin: 0 46px 0 56px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n`;\n\nconst ButtonWrapper = styled.div<{ type?: string }>`\n margin: 0 0 0 auto;\n ${(props) => (props.type ? getButtonStyle(props.type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: 12px 0;\n &:not(:first-child) {\n margin-left: 8px;\n }\n`;\n\ntype BannerProps = {\n size?: 'small' | 'medium' | 'large';\n type?: string;\n link?: string;\n linkText?: string;\n hover?: string;\n bottom?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n onClose?: () => void;\n noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon }) => {\n const formatTypeToLowerCase = type?.toLowerCase();\n switch (formatTypeToLowerCase) {\n case 'warning':\n return (\n <BannerContainer data-testid={testId} type={COLORS.warning_100} link={COLORS.warning_700} hover={COLORS.warning_20} bottom={bottom}>\n <BannerCenter color={COLORS.warning_700} className={size}>\n {icon ? icon : noIcon ? null : <Help color={COLORS.warning_700} size=\"24px\" />}\n <BannerContentWrapper>\n {children} \n {link && linkText && (\n <a href={link} target=\"_blank\">\n {linkText}\n </a>\n )}\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper type={formatTypeToLowerCase}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={() => onClose()}>\n <Close color={COLORS.warning_500} size=\"24px\" />\n </IconButton>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n case 'critical':\n return (\n <BannerContainer data-testid={testId} type={COLORS.critical_100} link={COLORS.critical_700} hover={COLORS.critical_20} bottom={bottom} className={size}>\n <BannerCenter color={COLORS.critical_700} className={size}>\n {icon ? icon : noIcon ? null : <Attention color={COLORS.critical_700} size=\"24px\" />}\n <BannerContentWrapper>\n {children} \n {link && linkText && (\n <a href={link} target=\"_blank\">\n {linkText}\n </a>\n )}\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper type={formatTypeToLowerCase}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={() => onClose()}>\n <Close color={COLORS.critical_500} size=\"24px\" />\n </IconButton>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n case 'positive':\n return (\n <BannerContainer data-testid={testId} type={COLORS.correct_100} link={COLORS.correct_700} hover={COLORS.correct_20} bottom={bottom} className={size}>\n <BannerCenter color={COLORS.correct_700} className={size}>\n {icon ? icon : noIcon ? null : <ThumbsUp color={COLORS.correct_700} size=\"24px\" />}\n <BannerContentWrapper>\n {children} \n {link && linkText && (\n <a href={link} target=\"_blank\">\n {linkText}\n </a>\n )}\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper type={formatTypeToLowerCase}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={() => onClose()}>\n <Close color={COLORS.correct_500} size=\"24px\" />\n </IconButton>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n default:\n return (\n <BannerContainer data-testid={testId} type={COLORS.primary_100} link={COLORS.primary_700} hover={COLORS.primary_20} bottom={bottom} className={size}>\n <BannerCenter color={COLORS.primary_700} className={size}>\n {icon ? icon : noIcon ? null : <Tip color={COLORS.primary_700} size=\"24px\" />}\n <BannerContentWrapper>\n {children} \n {link && linkText && (\n <a href={link} target=\"_blank\">\n {linkText}\n </a>\n )}\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper type=\"neutral\">\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={() => onClose()}>\n <Close color={COLORS.primary_500} size=\"24px\" />\n </IconButton>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n }\n};\n\nexport default Banner;\n"],"file":"Banner.js"}
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
(function (global, factory) {
|
|
2
|
+
if (typeof define === "function" && define.amd) {
|
|
3
|
+
define(["exports", "styled-components", "../styles"], factory);
|
|
4
|
+
} else if (typeof exports !== "undefined") {
|
|
5
|
+
factory(exports, require("styled-components"), require("../styles"));
|
|
6
|
+
} else {
|
|
7
|
+
var mod = {
|
|
8
|
+
exports: {}
|
|
9
|
+
};
|
|
10
|
+
factory(mod.exports, global.styledComponents, global.styles);
|
|
11
|
+
global.undefined = mod.exports;
|
|
12
|
+
}
|
|
13
|
+
})(this, function (exports, _styledComponents, _styles) {
|
|
14
|
+
"use strict";
|
|
15
|
+
|
|
16
|
+
Object.defineProperty(exports, "__esModule", {
|
|
17
|
+
value: true
|
|
18
|
+
});
|
|
19
|
+
exports.getButtonStyle = undefined;
|
|
20
|
+
|
|
21
|
+
const getButtonStyle = exports.getButtonStyle = type => {
|
|
22
|
+
switch (type) {
|
|
23
|
+
case 'warning':
|
|
24
|
+
return _styledComponents.css`
|
|
25
|
+
div {
|
|
26
|
+
background-color: transparent;
|
|
27
|
+
}
|
|
28
|
+
div svg path,
|
|
29
|
+
div svg {
|
|
30
|
+
fill: ${_styles.COLORS.warning_500};
|
|
31
|
+
}
|
|
32
|
+
&:hover:not(:disabled) {
|
|
33
|
+
div {
|
|
34
|
+
background-color: ${_styles.COLORS.warning_200};
|
|
35
|
+
}
|
|
36
|
+
div svg path,
|
|
37
|
+
div svg {
|
|
38
|
+
fill: ${_styles.COLORS.warning_700};
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
&:active:not(:disabled) {
|
|
42
|
+
div {
|
|
43
|
+
background: ${_styles.COLORS.warning_300};
|
|
44
|
+
}
|
|
45
|
+
div svg path,
|
|
46
|
+
div svg {
|
|
47
|
+
fill: ${_styles.COLORS.warning_800};
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
`;
|
|
51
|
+
|
|
52
|
+
case 'critical':
|
|
53
|
+
return _styledComponents.css`
|
|
54
|
+
div {
|
|
55
|
+
background-color: transparent;
|
|
56
|
+
}
|
|
57
|
+
div svg path,
|
|
58
|
+
div svg {
|
|
59
|
+
fill: ${_styles.COLORS.critical_600};
|
|
60
|
+
}
|
|
61
|
+
&:hover:not(:disabled) {
|
|
62
|
+
div {
|
|
63
|
+
background-color: ${_styles.COLORS.critical_200};
|
|
64
|
+
}
|
|
65
|
+
div svg path,
|
|
66
|
+
div svg {
|
|
67
|
+
fill: ${_styles.COLORS.critical_700};
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
&:active:not(:disabled) {
|
|
71
|
+
div {
|
|
72
|
+
background: ${_styles.COLORS.critical_300};
|
|
73
|
+
}
|
|
74
|
+
div svg path,
|
|
75
|
+
div svg {
|
|
76
|
+
fill: ${_styles.COLORS.critical_800};
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
`;
|
|
80
|
+
|
|
81
|
+
case 'positive':
|
|
82
|
+
return _styledComponents.css`
|
|
83
|
+
div {
|
|
84
|
+
background-color: transparent;
|
|
85
|
+
}
|
|
86
|
+
div svg path,
|
|
87
|
+
div svg {
|
|
88
|
+
fill: ${_styles.COLORS.correct_500};
|
|
89
|
+
}
|
|
90
|
+
&:hover:not(:disabled) {
|
|
91
|
+
div {
|
|
92
|
+
background-color: ${_styles.COLORS.correct_200};
|
|
93
|
+
}
|
|
94
|
+
div svg path,
|
|
95
|
+
div svg {
|
|
96
|
+
fill: ${_styles.COLORS.correct_700};
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
&:active:not(:disabled) {
|
|
100
|
+
div {
|
|
101
|
+
background: ${_styles.COLORS.correct_300};
|
|
102
|
+
}
|
|
103
|
+
div svg path,
|
|
104
|
+
div svg {
|
|
105
|
+
fill: ${_styles.COLORS.correct_800};
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
`;
|
|
109
|
+
|
|
110
|
+
default:
|
|
111
|
+
return _styledComponents.css`
|
|
112
|
+
div {
|
|
113
|
+
background-color: transparent;
|
|
114
|
+
}
|
|
115
|
+
div svg path,
|
|
116
|
+
div svg {
|
|
117
|
+
fill: ${_styles.COLORS.primary_500};
|
|
118
|
+
}
|
|
119
|
+
&:hover:not(:disabled) {
|
|
120
|
+
div {
|
|
121
|
+
background-color: ${_styles.COLORS.primary_200};
|
|
122
|
+
}
|
|
123
|
+
div svg path,
|
|
124
|
+
div svg {
|
|
125
|
+
fill: ${_styles.COLORS.primary_700};
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
&:active:not(:disabled) {
|
|
129
|
+
div {
|
|
130
|
+
background: ${_styles.COLORS.primary_300};
|
|
131
|
+
}
|
|
132
|
+
div svg path,
|
|
133
|
+
div svg {
|
|
134
|
+
fill: ${_styles.COLORS.primary_800};
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
`;
|
|
138
|
+
}
|
|
139
|
+
};
|
|
140
|
+
});
|
|
141
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/Banners/styles.tsx"],"names":["getButtonStyle","type","css","COLORS","warning_500","warning_200","warning_700","warning_300","warning_800","critical_600","critical_200","critical_700","critical_300","critical_800","correct_500","correct_200","correct_700","correct_300","correct_800","primary_500","primary_200","primary_700","primary_300","primary_800"],"mappings":";;;;;;;;;;;;;;;;;;;;AAGO,QAAMA,cAAc,WAAdA,cAAc,GAAIC,IAAD,IAAkB;AAC9C,YAAA,IAAA;AACE,WAAA,SAAA;AACE,eAAOC,qBAAI;AACjB;AACA;AACA;AACA;AACA;AACA,kBAAkBC,eAAOC,WAAY;AACrC;AACA;AACA;AACA,gCAAgCD,eAAOE,WAAY;AACnD;AACA;AACA;AACA,oBAAoBF,eAAOG,WAAY;AACvC;AACA;AACA;AACA;AACA,0BAA0BH,eAAOI,WAAY;AAC7C;AACA;AACA;AACA,oBAAoBJ,eAAOK,WAAY;AACvC;AACA;AAzBM,OAAA;;AA2BF,WAAA,UAAA;AACE,eAAON,qBAAI;AACjB;AACA;AACA;AACA;AACA;AACA,kBAAkBC,eAAOM,YAAa;AACtC;AACA;AACA;AACA,gCAAgCN,eAAOO,YAAa;AACpD;AACA;AACA;AACA,oBAAoBP,eAAOQ,YAAa;AACxC;AACA;AACA;AACA;AACA,0BAA0BR,eAAOS,YAAa;AAC9C;AACA;AACA;AACA,oBAAoBT,eAAOU,YAAa;AACxC;AACA;AAzBM,OAAA;;AA2BF,WAAA,UAAA;AACE,eAAOX,qBAAI;AACjB;AACA;AACA;AACA;AACA;AACA,kBAAkBC,eAAOW,WAAY;AACrC;AACA;AACA;AACA,gCAAgCX,eAAOY,WAAY;AACnD;AACA;AACA;AACA,oBAAoBZ,eAAOa,WAAY;AACvC;AACA;AACA;AACA;AACA,0BAA0Bb,eAAOc,WAAY;AAC7C;AACA;AACA;AACA,oBAAoBd,eAAOe,WAAY;AACvC;AACA;AAzBM,OAAA;;AA2BF;AACE,eAAOhB,qBAAI;AACjB;AACA;AACA;AACA;AACA;AACA,kBAAkBC,eAAOgB,WAAY;AACrC;AACA;AACA;AACA,gCAAgChB,eAAOiB,WAAY;AACnD;AACA;AACA;AACA,oBAAoBjB,eAAOkB,WAAY;AACvC;AACA;AACA;AACA;AACA,0BAA0BlB,eAAOmB,WAAY;AAC7C;AACA;AACA;AACA,oBAAoBnB,eAAOoB,WAAY;AACvC;AACA;AAzBM,OAAA;AAtFJ;AADK,GAAA","sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '../styles';\n\nexport const getButtonStyle = (type: string) => {\n switch (type) {\n case 'warning':\n return css`\n div {\n background-color: transparent;\n }\n div svg path,\n div svg {\n fill: ${COLORS.warning_500};\n }\n &:hover:not(:disabled) {\n div {\n background-color: ${COLORS.warning_200};\n }\n div svg path,\n div svg {\n fill: ${COLORS.warning_700};\n }\n }\n &:active:not(:disabled) {\n div {\n background: ${COLORS.warning_300};\n }\n div svg path,\n div svg {\n fill: ${COLORS.warning_800};\n }\n }\n `;\n case 'critical':\n return css`\n div {\n background-color: transparent;\n }\n div svg path,\n div svg {\n fill: ${COLORS.critical_600};\n }\n &:hover:not(:disabled) {\n div {\n background-color: ${COLORS.critical_200};\n }\n div svg path,\n div svg {\n fill: ${COLORS.critical_700};\n }\n }\n &:active:not(:disabled) {\n div {\n background: ${COLORS.critical_300};\n }\n div svg path,\n div svg {\n fill: ${COLORS.critical_800};\n }\n }\n `;\n case 'positive':\n return css`\n div {\n background-color: transparent;\n }\n div svg path,\n div svg {\n fill: ${COLORS.correct_500};\n }\n &:hover:not(:disabled) {\n div {\n background-color: ${COLORS.correct_200};\n }\n div svg path,\n div svg {\n fill: ${COLORS.correct_700};\n }\n }\n &:active:not(:disabled) {\n div {\n background: ${COLORS.correct_300};\n }\n div svg path,\n div svg {\n fill: ${COLORS.correct_800};\n }\n }\n `;\n default:\n return css`\n div {\n background-color: transparent;\n }\n div svg path,\n div svg {\n fill: ${COLORS.primary_500};\n }\n &:hover:not(:disabled) {\n div {\n background-color: ${COLORS.primary_200};\n }\n div svg path,\n div svg {\n fill: ${COLORS.primary_700};\n }\n }\n &:active:not(:disabled) {\n div {\n background: ${COLORS.primary_300};\n }\n div svg path,\n div svg {\n fill: ${COLORS.primary_800};\n }\n }\n `;\n }\n};\n"],"file":"styles.js"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
if (typeof define === "function" && define.amd) {
|
|
3
|
-
define(["exports", "prop-types", "react", "styled-components", "../../styles", "../../InputFields", "../../icons/systemicons/SystemIcons"], factory);
|
|
3
|
+
define(["exports", "prop-types", "react", "styled-components", "../../styles", "../../InputFields", "../../icons/systemicons/SystemIcons", "../../Button"], factory);
|
|
4
4
|
} else if (typeof exports !== "undefined") {
|
|
5
|
-
factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../../styles"), require("../../InputFields"), require("../../icons/systemicons/SystemIcons"));
|
|
5
|
+
factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../../styles"), require("../../InputFields"), require("../../icons/systemicons/SystemIcons"), require("../../Button"));
|
|
6
6
|
} else {
|
|
7
7
|
var mod = {
|
|
8
8
|
exports: {}
|
|
9
9
|
};
|
|
10
|
-
factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.InputFields, global.SystemIcons);
|
|
10
|
+
factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.InputFields, global.SystemIcons, global.Button);
|
|
11
11
|
global.undefined = mod.exports;
|
|
12
12
|
}
|
|
13
|
-
})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _InputFields, _SystemIcons) {
|
|
13
|
+
})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _InputFields, _SystemIcons, _Button) {
|
|
14
14
|
"use strict";
|
|
15
15
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", {
|
|
@@ -179,36 +179,44 @@
|
|
|
179
179
|
display: flex;
|
|
180
180
|
justify-content: center;
|
|
181
181
|
|
|
182
|
-
|
|
182
|
+
button div {
|
|
183
183
|
display: flex;
|
|
184
|
-
width: 32px;
|
|
185
|
-
height: 32px;
|
|
186
184
|
background-color: transparent;
|
|
187
185
|
color: ${_styles.COLORS.white};
|
|
188
186
|
margin: 0 0 0 20px;
|
|
189
|
-
|
|
187
|
+
|
|
188
|
+
svg {
|
|
189
|
+
fill: ${_styles.COLORS.white};
|
|
190
|
+
path {
|
|
191
|
+
fill: ${_styles.COLORS.white};
|
|
192
|
+
}
|
|
193
|
+
}
|
|
190
194
|
|
|
191
195
|
&:first-child {
|
|
192
196
|
margin: 0;
|
|
193
197
|
}
|
|
194
|
-
svg {
|
|
195
|
-
margin: auto;
|
|
196
|
-
}
|
|
197
198
|
&:hover {
|
|
198
199
|
background-color: ${_styles.COLORS.white};
|
|
199
200
|
color: ${_styles.COLORS.neutral_600};
|
|
200
|
-
cursor: pointer;
|
|
201
201
|
}
|
|
202
202
|
&:active {
|
|
203
203
|
background-color: ${_styles.COLORS.primary_800};
|
|
204
204
|
color: ${_styles.COLORS.primary_100};
|
|
205
|
-
cursor: pointer;
|
|
206
205
|
}
|
|
206
|
+
}
|
|
207
|
+
a {
|
|
207
208
|
&:focus {
|
|
208
|
-
background-color: ${_styles.COLORS.white};
|
|
209
|
-
color: ${_styles.COLORS.neutral_600};
|
|
210
|
-
box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;
|
|
211
209
|
outline: none;
|
|
210
|
+
div {
|
|
211
|
+
background-color: ${_styles.COLORS.white};
|
|
212
|
+
color: ${_styles.COLORS.neutral_600};
|
|
213
|
+
outline: none;
|
|
214
|
+
box-shadow: 0px 0px 8px ${_styles.COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
|
|
215
|
+
}
|
|
216
|
+
div svg path,
|
|
217
|
+
div svg {
|
|
218
|
+
fill: ${_styles.COLORS.neutral_600};
|
|
219
|
+
}
|
|
212
220
|
}
|
|
213
221
|
}
|
|
214
222
|
|
|
@@ -236,17 +244,29 @@
|
|
|
236
244
|
href: "https://www.facebook.com/LaerdalMedical/",
|
|
237
245
|
target: "_blank",
|
|
238
246
|
rel: "noreferrer noopener"
|
|
239
|
-
}, /*#__PURE__*/React.createElement(
|
|
247
|
+
}, /*#__PURE__*/React.createElement(_Button.IconButton, {
|
|
248
|
+
variant: "secondary",
|
|
249
|
+
action: () => {},
|
|
250
|
+
tabIndex: -1
|
|
251
|
+
}, /*#__PURE__*/React.createElement(_SystemIcons.Facebook, null))), /*#__PURE__*/React.createElement("a", {
|
|
240
252
|
key: `socialmedia_${Math.floor(Math.random() * 999999999999)}`,
|
|
241
253
|
href: "https://twitter.com/laerdalmedical",
|
|
242
254
|
target: "_blank",
|
|
243
255
|
rel: "noreferrer noopener"
|
|
244
|
-
}, /*#__PURE__*/React.createElement(
|
|
256
|
+
}, /*#__PURE__*/React.createElement(_Button.IconButton, {
|
|
257
|
+
variant: "secondary",
|
|
258
|
+
action: () => {},
|
|
259
|
+
tabIndex: -1
|
|
260
|
+
}, /*#__PURE__*/React.createElement(_SystemIcons.Twitter, null))), /*#__PURE__*/React.createElement("a", {
|
|
245
261
|
key: `socialmedia_${Math.floor(Math.random() * 999999999999)}`,
|
|
246
262
|
href: "https://www.youtube.com/user/LaerdalMedical",
|
|
247
263
|
target: "_blank",
|
|
248
264
|
rel: "noreferrer noopener"
|
|
249
|
-
}, /*#__PURE__*/React.createElement(
|
|
265
|
+
}, /*#__PURE__*/React.createElement(_Button.IconButton, {
|
|
266
|
+
variant: "secondary",
|
|
267
|
+
action: () => {},
|
|
268
|
+
tabIndex: -1
|
|
269
|
+
}, /*#__PURE__*/React.createElement(_SystemIcons.Youtube, null))))));
|
|
250
270
|
};
|
|
251
271
|
|
|
252
272
|
FooterNewsletterAndSocialSection.propTypes = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"names":["NewsletterAndSocial","styled","section","BREAKPOINTS","MEDIUM","NewsletterEmailSection","div","COLORS","white","NewsletterEmail","NewsletterButton","button","SocialMedia","SocialMediaButtons","neutral_600","primary_800","primary_100","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","FooterNewsletterAndSocialSection","React","value","setEmailInput","e","Math"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"names":["NewsletterAndSocial","styled","section","BREAKPOINTS","MEDIUM","NewsletterEmailSection","div","COLORS","white","NewsletterEmail","NewsletterButton","button","SocialMedia","SocialMediaButtons","neutral_600","primary_800","primary_100","primary_500","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","FooterNewsletterAndSocialSection","React","value","setEmailInput","e","Math"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { TextField } from '../../InputFields';\nimport { Facebook, Twitter, Youtube } from '../../icons/systemicons/SystemIcons';\nimport { IconButton } from '../../Button';\n\nconst NewsletterAndSocial = styled.section`\n display: flex;\n flex-direction: column;\n margin-bottom: 16px;\n\n ${BREAKPOINTS.MEDIUM} {\n flex-direction: row;\n }\n`;\n\nconst NewsletterEmailSection = styled.div`\n width: 100%;\n margin: 16px auto 0 auto;\n\n ${BREAKPOINTS.MEDIUM} {\n width: 60%;\n margin: 16px 0 0 0;\n }\n\n label {\n color: ${COLORS.white};\n font-family: Lato;\n font-style: normal;\n font-weight: normal;\n font-size: 16px;\n line-height: 120%;\n margin-bottom: 2px;\n }\n div div {\n width: 100%;\n ${BREAKPOINTS.MEDIUM} {\n width: calc(100% - 82px);\n width: 288px;\n }\n }\n input {\n height: 48px;\n }\n`;\n\nconst NewsletterEmail = styled.div`\n display: flex;\n flex-direction: column;\n margin-top: 2px;\n margin: 2px auto 0 auto;\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 2px 0 0 0;\n flex-direction: row;\n }\n`;\n\nconst NewsletterButton = styled.button`\n background: transparent;\n color: ${COLORS.white};\n width: 100%;\n height: 40px;\n border: 2px solid ${COLORS.white};\n box-sizing: border-box;\n border-radius: 8px;\n margin: 8px 0 4px 0;\n font-family: Lato;\n font-style: normal;\n font-weight: bold;\n font-size: 19px;\n line-height: 23px;\n\n ${BREAKPOINTS.MEDIUM} {\n width: 94px;\n margin: auto 0 4px 8px;\n }\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst SocialMedia = styled.div`\n color: ${COLORS.white};\n margin: 0 auto;\n\n button div {\n box-sizing: border-box;\n border-radius: 4px;\n }\n\n h4 {\n margin-top: 16px;\n margin-bottom: 8px;\n font-weight: normal;\n font-size: 16px;\n }\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 auto;\n button {\n margin: 0 0 0 12px;\n }\n }\n`;\n\nconst SocialMediaButtons = styled.div`\n display: flex;\n justify-content: center;\n\n button div {\n display: flex;\n background-color: transparent;\n color: ${COLORS.white};\n margin: 0 0 0 20px;\n\n svg {\n fill: ${COLORS.white};\n path {\n fill: ${COLORS.white};\n }\n }\n\n &:first-child {\n margin: 0;\n }\n &:hover {\n background-color: ${COLORS.white};\n color: ${COLORS.neutral_600};\n }\n &:active {\n background-color: ${COLORS.primary_800};\n color: ${COLORS.primary_100};\n }\n }\n a {\n &:focus {\n outline: none;\n div {\n background-color: ${COLORS.white};\n color: ${COLORS.neutral_600};\n outline: none;\n box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n }\n div svg path,\n div svg {\n fill: ${COLORS.neutral_600};\n }\n }\n }\n\n ${BREAKPOINTS.MEDIUM} {\n justify-content: flex-end;\n }\n`;\n\ninterface FooterNewsletterAndSocialSection {\n actionOnNewsletterSignup?: (email: string) => void;\n newsletterLabel: string;\n placeholderEmail?: string;\n}\n\nconst FooterNewsletterAndSocialSection = ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => {\n const [emailInput, setEmailInput] = React.useState<string>('');\n return (\n <NewsletterAndSocial>\n <NewsletterEmailSection>\n <label>{newsletterLabel}</label>\n <NewsletterEmail>\n <TextField id=\"NewsletterEmail\" withoutBorder={true} placeholder={placeholderEmail} value={emailInput} onChange={(value: string) => setEmailInput(value)} />\n <NewsletterButton onClick={(e: any) => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)}>Sign up</NewsletterButton>\n </NewsletterEmail>\n </NewsletterEmailSection>\n <SocialMedia>\n <h4>Follow us on social media</h4>\n <SocialMediaButtons>\n <a key={`socialmedia_${Math.floor(Math.random() * 999999999999)}`} href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n <Facebook />\n </IconButton>\n </a>\n <a key={`socialmedia_${Math.floor(Math.random() * 999999999999)}`} href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n <Twitter />\n </IconButton>\n </a>\n <a key={`socialmedia_${Math.floor(Math.random() * 999999999999)}`} href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n <Youtube />\n </IconButton>\n </a>\n </SocialMediaButtons>\n </SocialMedia>\n </NewsletterAndSocial>\n );\n};\n\nexport default FooterNewsletterAndSocialSection;\n"],"file":"FooterNewsletterAndSocialSection.js"}
|
|
@@ -63,7 +63,13 @@
|
|
|
63
63
|
width: 100%;
|
|
64
64
|
border-radius: 4px;
|
|
65
65
|
border: 2px solid transparent;
|
|
66
|
-
|
|
66
|
+
-webkit-appearance: none;
|
|
67
|
+
${props => props.withoutBorder ? `-webkit-box-shadow: none;
|
|
68
|
+
-moz-box-shadow: none;
|
|
69
|
+
box-shadow: none;
|
|
70
|
+
` : `-webkit-box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.neutral_300};
|
|
71
|
+
-moz-box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.neutral_300};
|
|
72
|
+
box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.neutral_300};`}
|
|
67
73
|
background-color: #fff;
|
|
68
74
|
box-sizing: border-box;
|
|
69
75
|
padding: 0 16px !important;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/InputFields/styling.ts"],"names":["InputWrapper","styled","div","props","margin","lockedState","css","COLORS","neutral_100","neutral_300","neutral_600","activeValidationMessageState","warning_400","activeErrorMessageState","critical_400","activeCorrectInput","correct_500","tabbedHereStyle","InputFieldStyling","input","BREAKPOINTS","MEDIUM","black","primary_800","primary_700","ValidationStyling","RequiredStar","span","critical_500","Warning","WarningMessage","warning_500","ErrorMessage","AutofilledMessage"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGO,QAAMA,YAAY,WAAZA,YAAY,GAAGC,2BAAOC,GAA+D;AAClG;AACA,IAAIC,KAAK,IAAKA,KAAK,CAALA,MAAAA,IAAgBA,KAAK,CAArBA,QAAAA,GAAAA,sBAAAA,GAA0D,EAAI;AAC5E,IAAIA,KAAK,IAAKA,KAAK,CAALA,MAAAA,GAAgB,WAAUA,KAAK,CAACC,MAAhCD,GAAAA,GAA4C,EAAI;AAHvD,CAAA;AAMP,QAAME,WAAW,GAAGC,qBAAI;AACxB,sBAAsBC,eAAOC,WAAY;AACzC,sCAAsCD,eAAOE,WAAY;AACzD,WAAWF,eAAOG,WAAY;AAC9B;AACA;AACA;AANA,CAAA;AAQO,QAAMC,4BAA4B,WAA5BA,4BAA4B,GAAGL,qBAAI;AAChD,8CAA8CC,eAAOK,WAAY;AACjE,2CAA2CL,eAAOK,WAAY;AAC9D,sCAAsCL,eAAOK,WAAY;AAHlD,CAAA;AAKP,QAAMC,uBAAuB,GAAGP,qBAAI;AACpC,8CAA8CC,eAAOO,YAAa;AAClE,2CAA2CP,eAAOO,YAAa;AAC/D,sCAAsCP,eAAOO,YAAa;AAH1D,CAAA;AAKA,QAAMC,kBAAkB,GAAGT,qBAAI;AAC/B,8CAA8CC,eAAOS,WAAY;AACjE,2CAA2CT,eAAOS,WAAY;AAC9D,sCAAsCT,eAAOS,WAAY;AAHzD,CAAA;AAKO,QAAMC,eAAe,WAAfA,eAAe,GAAGX,qBAAI;AACnC;AACA;AAFO,CAAA;AAKP,QAAMY,iBAAiB,GAAGjB,2BAAOkB,KAS9B;AACH;AACA;AACA;AACA;AACA,
|
|
1
|
+
{"version":3,"sources":["../../../src/InputFields/styling.ts"],"names":["InputWrapper","styled","div","props","margin","lockedState","css","COLORS","neutral_100","neutral_300","neutral_600","activeValidationMessageState","warning_400","activeErrorMessageState","critical_400","activeCorrectInput","correct_500","tabbedHereStyle","InputFieldStyling","input","BREAKPOINTS","MEDIUM","black","primary_800","primary_700","ValidationStyling","RequiredStar","span","critical_500","Warning","WarningMessage","warning_500","ErrorMessage","AutofilledMessage"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGO,QAAMA,YAAY,WAAZA,YAAY,GAAGC,2BAAOC,GAA+D;AAClG;AACA,IAAIC,KAAK,IAAKA,KAAK,CAALA,MAAAA,IAAgBA,KAAK,CAArBA,QAAAA,GAAAA,sBAAAA,GAA0D,EAAI;AAC5E,IAAIA,KAAK,IAAKA,KAAK,CAALA,MAAAA,GAAgB,WAAUA,KAAK,CAACC,MAAhCD,GAAAA,GAA4C,EAAI;AAHvD,CAAA;AAMP,QAAME,WAAW,GAAGC,qBAAI;AACxB,sBAAsBC,eAAOC,WAAY;AACzC,sCAAsCD,eAAOE,WAAY;AACzD,WAAWF,eAAOG,WAAY;AAC9B;AACA;AACA;AANA,CAAA;AAQO,QAAMC,4BAA4B,WAA5BA,4BAA4B,GAAGL,qBAAI;AAChD,8CAA8CC,eAAOK,WAAY;AACjE,2CAA2CL,eAAOK,WAAY;AAC9D,sCAAsCL,eAAOK,WAAY;AAHlD,CAAA;AAKP,QAAMC,uBAAuB,GAAGP,qBAAI;AACpC,8CAA8CC,eAAOO,YAAa;AAClE,2CAA2CP,eAAOO,YAAa;AAC/D,sCAAsCP,eAAOO,YAAa;AAH1D,CAAA;AAKA,QAAMC,kBAAkB,GAAGT,qBAAI;AAC/B,8CAA8CC,eAAOS,WAAY;AACjE,2CAA2CT,eAAOS,WAAY;AAC9D,sCAAsCT,eAAOS,WAAY;AAHzD,CAAA;AAKO,QAAMC,eAAe,WAAfA,eAAe,GAAGX,qBAAI;AACnC;AACA;AAFO,CAAA;AAKP,QAAMY,iBAAiB,GAAGjB,2BAAOkB,KAS9B;AACH;AACA;AACA;AACA;AACA;AACA,IAAKhB,KAAD,IACA,KAAK,CAAL,aAAA,GACK;AACT;AACA;AAHI,OAAA,GAKK,6CAA4CI,eAAOE,WAAY;AACxE,+CAA+CF,eAAOE,WAAY;AAClE,0CAA0CF,eAAOE,WAAY,GAAG;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaF,eAAOG,WAAY;AAChC;AACA;AACA,IAAIU,oBAAYC,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAWd,eAAOe,KAAM;AACxB;AACA,IAAInB,KAAK,IAAKA,KAAK,CAALA,MAAAA,GAAAA,WAAAA,GAA6B,EAAI;AAC/C,IAAIA,KAAK,IAAKA,KAAK,CAALA,uBAAAA,GAAAA,4BAAAA,GAA+D,EAAI;AACjF,IAAIA,KAAK,IAAKA,KAAK,CAALA,kBAAAA,GAAAA,uBAAAA,GAAqD,EAAI;AACvE,IAAIA,KAAK,IAAKA,KAAK,CAALA,YAAAA,GAAAA,kBAAAA,GAA0C,EAAI;AAC5D,IAAIA,KAAK,IAAKA,KAAK,CAALA,UAAAA,GAAAA,eAAAA,GAAqC,EAAI;AACvD;AACA;AACA,wBAAwBI,eAAOC,WAAY;AAC3C;AACA;AACA;AACA;AACA,aAAaD,eAAOE,WAAY;AAChC;AACA;AACA,gDAAgDF,eAAOgB,WAAY;AACnE,6CAA6ChB,eAAOgB,WAAY;AAChE,wCAAwChB,eAAOgB,WAAY;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gDAAgDhB,eAAOiB,WAAY;AACnE,6CAA6CjB,eAAOiB,WAAY;AAChE,wCAAwCjB,eAAOiB,WAAY;AAC3D;AACA;AACA;AACA,gDAAgDjB,eAAOgB,WAAY;AACnE,6CAA6ChB,eAAOgB,WAAY;AAChE,wCAAwChB,eAAOgB,WAAY;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AA9HA,CAAA;AAiIA,QAAME,iBAAiB,GAAGnB,qBAAI;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAhBA,CAAA;AAmBO,QAAMoB,YAAY,WAAZA,YAAY,GAAGzB,2BAAO0B,IAAK;AACxC,WAAWpB,eAAOqB,YAAa;AAC/B;AACA;AACA;AACA;AACA;AANO,CAAA;AAQA,QAAMC,OAAO,WAAPA,OAAO,GAAG5B,2BAAOC,GAAI;AAClC;AACA;AACA;AACA,IAAIkB,oBAAYC,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAtBO,CAAA;AAwBA,QAAMS,cAAc,WAAdA,cAAc,GAAG7B,gCAAM,OAANA,CAAgB;AAC9C,WAAWM,eAAOwB,WAAY;AADvB,CAAA;AAGA,QAAMC,YAAY,WAAZA,YAAY,GAAG/B,gCAAM,OAANA,CAAgB;AAC5C,WAAWM,eAAOqB,YAAa;AADxB,CAAA;AAGA,QAAMK,iBAAiB,WAAjBA,iBAAiB,GAAGhC,gCAAM,OAANA,CAAgB;AACjD,WAAWM,eAAOG,WAAY;AADvB,CAAA;UAIP,iB,GAAA,iB;UAAA,iB,GAAA,iB","sourcesContent":["import styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../styles';\n\nexport const InputWrapper = styled.div<{ locked?: boolean; disabled?: boolean; margin?: string }>`\n outline: none;\n ${props => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')};\n ${props => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst lockedState = css`\n background-color: ${COLORS.neutral_100};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300} !important;\n color: ${COLORS.neutral_600} !important;\n pointer-events: none;\n outline: none;\n cursor: not-allowed;\n`;\nexport const activeValidationMessageState = css`\n -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\nconst activeErrorMessageState = css`\n -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\nconst activeCorrectInput = css`\n -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n`;\nexport const tabbedHereStyle = css`\n outline: none;\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1 !important;\n`;\n\nconst InputFieldStyling = styled.input<{\n locked?: boolean;\n activeValidationMessage?: boolean;\n activeErrorMessage?: boolean;\n correctInput?: boolean;\n active?: boolean;\n tabbedHere?: boolean;\n withoutBorder?: boolean;\n size?: string;\n}>`\n height: 48px;\n width: 100%;\n border-radius: 4px;\n border: 2px solid transparent;\n -webkit-appearance: none;\n ${(props) =>\n props.withoutBorder\n ? `-webkit-box-shadow: none;\n -moz-box-shadow: none;\n box-shadow: none;\n `\n : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};`}\n background-color: #fff;\n box-sizing: border-box;\n padding: 0 16px !important;\n\n box-sizing: border-box;\n width: 100%;\n outline: none;\n border-radius: 4.5px;\n\n font-size: 16px;\n\n &::placeholder {\n font-family: 'Lato', sans-serif;\n font-style: italic;\n font-weight: normal;\n font-size: 16px;\n color: ${COLORS.neutral_600};\n }\n\n ${BREAKPOINTS.MEDIUM}{ \n font-size: 18px;\n line-height: 18px;\n height: 56px;\n padding: 0 16px !important;\n\n &::placeholder {\n font-size: 18px;\n }\n }\n\n &.small {\n font-size: 16px;\n height: 48px; \n &::placeholder {\n font-size: 16px;\n }\n }\n &.medium {\n font-size: 18px;\n height: 56px; \n &::placeholder {\n font-size: 18px;\n }\n }\n\n\n color: ${COLORS.black} !important;\n\n ${props => (props.locked ? lockedState : '')}\n ${props => (props.activeValidationMessage ? activeValidationMessageState : '')}\n ${props => (props.activeErrorMessage ? activeErrorMessageState : '')}\n ${props => (props.correctInput ? activeCorrectInput : '')}\n ${props => (props.tabbedHere ? tabbedHereStyle : '')}\n\n &:disabled {\n border: 1px solid ${COLORS.neutral_100};\n pointer-events: none;\n box-shadow: none !important;\n outline: none;\n cursor: not-allowed;\n color: ${COLORS.neutral_300} !important;\n }\n &:focus {\n -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n\n &.error {\n border-radius: 4px;\n border-style: solid;\n border-width: 2px;\n border-color: #e97116;\n padding: 0 15px !important;\n }\n\n &:not(.placeholder) {\n line-height: 40px;\n }\n\n &.error {\n margin-bottom: 0 !important;\n }\n\n &:hover {\n -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n }\n\n &.active {\n -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n\n &.show-checkmark.valid {\n background-image: none;\n }\n\n &.show-checkmark.pending {\n background-image: none;\n }\n`;\n\nconst ValidationStyling = css`\n &.error-msg {\n line-height: 14px;\n font-size: 13px;\n text-align: center;\n font-weight: 400;\n box-sizing: border-box;\n }\n\n &.error-msg {\n padding-top: 8px;\n padding-bottom: 0;\n color: #e76468;\n font-weight: 700;\n font-size: 13px;\n line-height: 15px;\n }\n`;\n\nexport const RequiredStar = styled.span`\n color: ${COLORS.critical_500};\n font-size: 28px;\n line-height: 12px;\n font-weight: 700;\n position: relative;\n top: 10px;\n`;\nexport const Warning = styled.div`\n font-size: 12px;\n line-height: 140%;\n\n ${BREAKPOINTS.MEDIUM} {\n font-size: 14px;\n }\n\n &.small {\n font-size: 12px;\n }\n &.medium {\n font-size: 14px;\n }\n\n & * {\n vertical-align: middle;\n display: inline-block;\n }\n\n svg {\n margin-right: 5px;\n }\n`;\nexport const WarningMessage = styled(Warning)`\n color: ${COLORS.warning_500};\n`;\nexport const ErrorMessage = styled(Warning)`\n color: ${COLORS.critical_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n"],"file":"styling.js"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
if (typeof define === "function" && define.amd) {
|
|
3
|
-
define(["exports", "prop-types", "react", "
|
|
3
|
+
define(["exports", "prop-types", "react", "styled-components", "."], factory);
|
|
4
4
|
} else if (typeof exports !== "undefined") {
|
|
5
|
-
factory(exports, require("prop-types"), require("react"), require("
|
|
5
|
+
factory(exports, require("prop-types"), require("react"), require("styled-components"), require("."));
|
|
6
6
|
} else {
|
|
7
7
|
var mod = {
|
|
8
8
|
exports: {}
|
|
9
9
|
};
|
|
10
|
-
factory(mod.exports, global.propTypes, global.react, global.
|
|
10
|
+
factory(mod.exports, global.propTypes, global.react, global.styledComponents, global._);
|
|
11
11
|
global.undefined = mod.exports;
|
|
12
12
|
}
|
|
13
|
-
})(this, function (exports, _propTypes, _react,
|
|
13
|
+
})(this, function (exports, _propTypes, _react, _styledComponents, _) {
|
|
14
14
|
"use strict";
|
|
15
15
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", {
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
const TYPOGRAPHY = {
|
|
34
34
|
fontFamily: 'Lato, sans-serif'
|
|
35
35
|
};
|
|
36
|
-
const TypographyBase = (0, _styledComponents2.default)(
|
|
36
|
+
const TypographyBase = (0, _styledComponents2.default)('div')(({
|
|
37
37
|
color,
|
|
38
38
|
lineHeight,
|
|
39
39
|
fontSize,
|
|
@@ -103,16 +103,50 @@
|
|
|
103
103
|
lineHeight: '24px',
|
|
104
104
|
color: color
|
|
105
105
|
}));
|
|
106
|
-
const
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
106
|
+
const ParagraphStyling = _styledComponents.css`
|
|
107
|
+
:lang(ja-jp) > h1,
|
|
108
|
+
h2,
|
|
109
|
+
h3,
|
|
110
|
+
h4,
|
|
111
|
+
p,
|
|
112
|
+
span {
|
|
113
|
+
max-width: 30em;
|
|
114
|
+
}
|
|
115
|
+
:lang(ko-kr) > h1,
|
|
116
|
+
h2,
|
|
117
|
+
h3,
|
|
118
|
+
h4,
|
|
119
|
+
p,
|
|
120
|
+
span {
|
|
121
|
+
max-width: 30em;
|
|
122
|
+
}
|
|
123
|
+
:lang(zh-CN) > h1,
|
|
124
|
+
h2,
|
|
125
|
+
h3,
|
|
126
|
+
h4,
|
|
127
|
+
p,
|
|
128
|
+
span {
|
|
129
|
+
max-width: 30em;
|
|
130
|
+
}
|
|
131
|
+
h1,
|
|
132
|
+
h2,
|
|
133
|
+
h3,
|
|
134
|
+
h4,
|
|
135
|
+
p,
|
|
136
|
+
span {
|
|
137
|
+
max-width: 34em;
|
|
138
|
+
}
|
|
139
|
+
`;
|
|
140
|
+
const ParagraphBase = (0, _styledComponents2.default)(TypographyBase)`
|
|
141
|
+
p {
|
|
142
|
+
margin-block-start: 0;
|
|
143
|
+
margin-block-end: 0;
|
|
144
|
+
}
|
|
145
|
+
p:not(:only-of-type) {
|
|
146
|
+
margin-bottom: ${props => props.marginBetweenParagraphs || '0'};
|
|
147
|
+
}
|
|
148
|
+
${ParagraphStyling}
|
|
149
|
+
`;
|
|
116
150
|
var ParagraphTextStyle;
|
|
117
151
|
|
|
118
152
|
(function (ParagraphTextStyle) {
|
|
@@ -150,13 +184,14 @@
|
|
|
150
184
|
let fontWeight = paragraphFontWeight(textStyle);
|
|
151
185
|
let fontStyle = paragraphFontStyle(textStyle);
|
|
152
186
|
let textDecorationLine = paragraphTextDecorationLine(textStyle);
|
|
153
|
-
return /*#__PURE__*/_react2.default.createElement(
|
|
187
|
+
return /*#__PURE__*/_react2.default.createElement(ParagraphBase, {
|
|
154
188
|
color: color,
|
|
155
189
|
lineHeight: 36,
|
|
156
190
|
fontSize: 24,
|
|
157
191
|
fontWeight: fontWeight,
|
|
158
192
|
fontStyle: fontStyle,
|
|
159
|
-
textDecorationLine: textDecorationLine
|
|
193
|
+
textDecorationLine: textDecorationLine,
|
|
194
|
+
marginBetweenParagraphs: "18px"
|
|
160
195
|
}, children);
|
|
161
196
|
};
|
|
162
197
|
|
|
@@ -173,13 +208,14 @@
|
|
|
173
208
|
let fontWeight = paragraphFontWeight(textStyle);
|
|
174
209
|
let fontStyle = paragraphFontStyle(textStyle);
|
|
175
210
|
let textDecorationLine = paragraphTextDecorationLine(textStyle);
|
|
176
|
-
return /*#__PURE__*/_react2.default.createElement(
|
|
211
|
+
return /*#__PURE__*/_react2.default.createElement(ParagraphBase, {
|
|
177
212
|
color: color,
|
|
178
213
|
lineHeight: 32,
|
|
179
214
|
fontSize: 20,
|
|
180
215
|
fontWeight: fontWeight,
|
|
181
216
|
fontStyle: fontStyle,
|
|
182
|
-
textDecorationLine: textDecorationLine
|
|
217
|
+
textDecorationLine: textDecorationLine,
|
|
218
|
+
marginBetweenParagraphs: "16px"
|
|
183
219
|
}, children);
|
|
184
220
|
};
|
|
185
221
|
|
|
@@ -196,13 +232,14 @@
|
|
|
196
232
|
let fontWeight = paragraphFontWeight(textStyle);
|
|
197
233
|
let fontStyle = paragraphFontStyle(textStyle);
|
|
198
234
|
let textDecorationLine = paragraphTextDecorationLine(textStyle);
|
|
199
|
-
return /*#__PURE__*/_react2.default.createElement(
|
|
235
|
+
return /*#__PURE__*/_react2.default.createElement(ParagraphBase, {
|
|
200
236
|
color: color,
|
|
201
237
|
lineHeight: 28,
|
|
202
238
|
fontSize: 18,
|
|
203
239
|
fontWeight: fontWeight,
|
|
204
240
|
fontStyle: fontStyle,
|
|
205
|
-
textDecorationLine: textDecorationLine
|
|
241
|
+
textDecorationLine: textDecorationLine,
|
|
242
|
+
marginBetweenParagraphs: "14px"
|
|
206
243
|
}, children);
|
|
207
244
|
};
|
|
208
245
|
|
|
@@ -219,13 +256,14 @@
|
|
|
219
256
|
let fontWeight = paragraphFontWeight(textStyle);
|
|
220
257
|
let fontStyle = paragraphFontStyle(textStyle);
|
|
221
258
|
let textDecorationLine = paragraphTextDecorationLine(textStyle);
|
|
222
|
-
return /*#__PURE__*/_react2.default.createElement(
|
|
259
|
+
return /*#__PURE__*/_react2.default.createElement(ParagraphBase, {
|
|
223
260
|
color: color,
|
|
224
261
|
lineHeight: 24,
|
|
225
262
|
fontSize: 16,
|
|
226
263
|
fontWeight: fontWeight,
|
|
227
264
|
fontStyle: fontStyle,
|
|
228
|
-
textDecorationLine: textDecorationLine
|
|
265
|
+
textDecorationLine: textDecorationLine,
|
|
266
|
+
marginBetweenParagraphs: "12px"
|
|
229
267
|
}, children);
|
|
230
268
|
};
|
|
231
269
|
|
|
@@ -242,13 +280,14 @@
|
|
|
242
280
|
let fontWeight = paragraphFontWeight(textStyle);
|
|
243
281
|
let fontStyle = paragraphFontStyle(textStyle);
|
|
244
282
|
let textDecorationLine = paragraphTextDecorationLine(textStyle);
|
|
245
|
-
return /*#__PURE__*/_react2.default.createElement(
|
|
283
|
+
return /*#__PURE__*/_react2.default.createElement(ParagraphBase, {
|
|
246
284
|
color: color,
|
|
247
285
|
lineHeight: 20,
|
|
248
286
|
fontSize: 14,
|
|
249
287
|
fontWeight: fontWeight,
|
|
250
288
|
fontStyle: fontStyle,
|
|
251
|
-
textDecorationLine: textDecorationLine
|
|
289
|
+
textDecorationLine: textDecorationLine,
|
|
290
|
+
marginBetweenParagraphs: "10px"
|
|
252
291
|
}, children);
|
|
253
292
|
};
|
|
254
293
|
|