@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/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","TextField","Facebook","Twitter","Youtube","NewsletterAndSocial","section","MEDIUM","NewsletterEmailSection","div","white","NewsletterEmail","NewsletterButton","button","SocialMedia","SocialMediaButtons","neutral_600","primary_800","primary_100","FooterNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","emailInput","setEmailInput","useState","value","e","target","Math","floor","random"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,cAApC;AACA,SAASC,SAAT,QAA0B,mBAA1B;AACA,SAASC,QAAT,EAAmBC,OAAnB,EAA4BC,OAA5B,QAA2C,qCAA3C;AAEA,MAAMC,mBAAmB,
|
|
1
|
+
{"version":3,"sources":["../../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","TextField","Facebook","Twitter","Youtube","IconButton","NewsletterAndSocial","section","MEDIUM","NewsletterEmailSection","div","white","NewsletterEmail","NewsletterButton","button","SocialMedia","SocialMediaButtons","neutral_600","primary_800","primary_100","primary_500","FooterNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","emailInput","setEmailInput","useState","value","e","target","Math","floor","random"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,cAApC;AACA,SAASC,SAAT,QAA0B,mBAA1B;AACA,SAASC,QAAT,EAAmBC,OAAnB,EAA4BC,OAA5B,QAA2C,qCAA3C;AACA,SAASC,UAAT,QAA2B,cAA3B;AAEA,MAAMC,mBAAmB,GAAGR,MAAM,CAACS,OAAQ;AAC3C;AACA;AACA;AACA;AACA,IAAIR,WAAW,CAACS,MAAO;AACvB;AACA;AACA,CARA;AAUA,MAAMC,sBAAsB,GAAGX,MAAM,CAACY,GAAI;AAC1C;AACA;AACA;AACA,IAAIX,WAAW,CAACS,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA,aAAaR,MAAM,CAACW,KAAM;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMZ,WAAW,CAACS,MAAO;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CA5BA;AA8BA,MAAMI,eAAe,GAAGd,MAAM,CAACY,GAAI;AACnC;AACA;AACA;AACA;AACA;AACA,IAAIX,WAAW,CAACS,MAAO;AACvB;AACA;AACA;AACA,CAVA;AAYA,MAAMK,gBAAgB,GAAGf,MAAM,CAACgB,MAAO;AACvC;AACA,WAAWd,MAAM,CAACW,KAAM;AACxB;AACA;AACA,sBAAsBX,MAAM,CAACW,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIZ,WAAW,CAACS,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAvBA;AAyBA,MAAMO,WAAW,GAAGjB,MAAM,CAACY,GAAI;AAC/B,WAAWV,MAAM,CAACW,KAAM;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIZ,WAAW,CAACS,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA,CAtBA;AAwBA,MAAMQ,kBAAkB,GAAGlB,MAAM,CAACY,GAAI;AACtC;AACA;AACA;AACA;A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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"}
|
|
@@ -37,7 +37,13 @@ const InputFieldStyling = styled.input`
|
|
|
37
37
|
width: 100%;
|
|
38
38
|
border-radius: 4px;
|
|
39
39
|
border: 2px solid transparent;
|
|
40
|
-
|
|
40
|
+
-webkit-appearance: none;
|
|
41
|
+
${props => props.withoutBorder ? `-webkit-box-shadow: none;
|
|
42
|
+
-moz-box-shadow: none;
|
|
43
|
+
box-shadow: none;
|
|
44
|
+
` : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};
|
|
45
|
+
-moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};
|
|
46
|
+
box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};`}
|
|
41
47
|
background-color: #fff;
|
|
42
48
|
box-sizing: border-box;
|
|
43
49
|
padding: 0 16px !important;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/InputFields/styling.ts"],"names":["styled","css","BREAKPOINTS","COLORS","InputWrapper","div","props","locked","disabled","margin","lockedState","neutral_100","neutral_300","neutral_600","activeValidationMessageState","warning_400","activeErrorMessageState","critical_400","activeCorrectInput","correct_500","tabbedHereStyle","InputFieldStyling","input","withoutBorder","MEDIUM","black","activeValidationMessage","activeErrorMessage","correctInput","tabbedHere","primary_800","primary_700","ValidationStyling","RequiredStar","span","critical_500","Warning","WarningMessage","warning_500","ErrorMessage","AutofilledMessage"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,WAApC;AAEA,OAAO,MAAMC,YAAY,GAAGJ,MAAM,CAACK,GAA+D;AAClG;AACA,IAAIC,KAAK,IAAKA,KAAK,CAACC,MAAN,IAAgBD,KAAK,CAACE,QAAtB,GAAiC,sBAAjC,GAA0D,EAAI;AAC5E,IAAIF,KAAK,IAAKA,KAAK,CAACG,MAAN,GAAgB,WAAUH,KAAK,CAACG,MAAO,GAAvC,GAA4C,EAAI;AAC9D,CAJO;AAMP,MAAMC,WAAW,GAAGT,GAAI;AACxB,sBAAsBE,MAAM,CAACQ,WAAY;AACzC,sCAAsCR,MAAM,CAACS,WAAY;AACzD,WAAWT,MAAM,CAACU,WAAY;AAC9B;AACA;AACA;AACA,CAPA;AAQA,OAAO,MAAMC,4BAA4B,GAAGb,GAAI;AAChD,8CAA8CE,MAAM,CAACY,WAAY;AACjE,2CAA2CZ,MAAM,CAACY,WAAY;AAC9D,sCAAsCZ,MAAM,CAACY,WAAY;AACzD,CAJO;AAKP,MAAMC,uBAAuB,GAAGf,GAAI;AACpC,8CAA8CE,MAAM,CAACc,YAAa;AAClE,2CAA2Cd,MAAM,CAACc,YAAa;AAC/D,sCAAsCd,MAAM,CAACc,YAAa;AAC1D,CAJA;AAKA,MAAMC,kBAAkB,GAAGjB,GAAI;AAC/B,8CAA8CE,MAAM,CAACgB,WAAY;AACjE,2CAA2ChB,MAAM,CAACgB,WAAY;AAC9D,sCAAsChB,MAAM,CAACgB,WAAY;AACzD,CAJA;AAKA,OAAO,MAAMC,eAAe,GAAGnB,GAAI;AACnC;AACA;AACA,CAHO;AAKP,MAAMoB,iBAAiB,GAAGrB,MAAM,CAACsB,KAS9B;AACH;AACA;AACA;AACA;AACA,
|
|
1
|
+
{"version":3,"sources":["../../../src/InputFields/styling.ts"],"names":["styled","css","BREAKPOINTS","COLORS","InputWrapper","div","props","locked","disabled","margin","lockedState","neutral_100","neutral_300","neutral_600","activeValidationMessageState","warning_400","activeErrorMessageState","critical_400","activeCorrectInput","correct_500","tabbedHereStyle","InputFieldStyling","input","withoutBorder","MEDIUM","black","activeValidationMessage","activeErrorMessage","correctInput","tabbedHere","primary_800","primary_700","ValidationStyling","RequiredStar","span","critical_500","Warning","WarningMessage","warning_500","ErrorMessage","AutofilledMessage"],"mappings":"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","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,11 +1,11 @@
|
|
|
1
1
|
import _pt from "prop-types";
|
|
2
2
|
import React from 'react';
|
|
3
|
+
import styled, { css } from 'styled-components';
|
|
3
4
|
import { COLORS } from '.';
|
|
4
|
-
import styled from 'styled-components';
|
|
5
5
|
const TYPOGRAPHY = {
|
|
6
6
|
fontFamily: 'Lato, sans-serif'
|
|
7
7
|
};
|
|
8
|
-
const TypographyBase = styled(
|
|
8
|
+
const TypographyBase = styled('div')(({
|
|
9
9
|
color,
|
|
10
10
|
lineHeight,
|
|
11
11
|
fontSize,
|
|
@@ -75,16 +75,50 @@ const HeadlineXXS = styled(HeadlineBase)(({
|
|
|
75
75
|
lineHeight: '24px',
|
|
76
76
|
color: color
|
|
77
77
|
}));
|
|
78
|
-
const
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
78
|
+
const ParagraphStyling = css`
|
|
79
|
+
:lang(ja-jp) > h1,
|
|
80
|
+
h2,
|
|
81
|
+
h3,
|
|
82
|
+
h4,
|
|
83
|
+
p,
|
|
84
|
+
span {
|
|
85
|
+
max-width: 30em;
|
|
86
|
+
}
|
|
87
|
+
:lang(ko-kr) > h1,
|
|
88
|
+
h2,
|
|
89
|
+
h3,
|
|
90
|
+
h4,
|
|
91
|
+
p,
|
|
92
|
+
span {
|
|
93
|
+
max-width: 30em;
|
|
94
|
+
}
|
|
95
|
+
:lang(zh-CN) > h1,
|
|
96
|
+
h2,
|
|
97
|
+
h3,
|
|
98
|
+
h4,
|
|
99
|
+
p,
|
|
100
|
+
span {
|
|
101
|
+
max-width: 30em;
|
|
102
|
+
}
|
|
103
|
+
h1,
|
|
104
|
+
h2,
|
|
105
|
+
h3,
|
|
106
|
+
h4,
|
|
107
|
+
p,
|
|
108
|
+
span {
|
|
109
|
+
max-width: 34em;
|
|
110
|
+
}
|
|
111
|
+
`;
|
|
112
|
+
const ParagraphBase = styled(TypographyBase)`
|
|
113
|
+
p {
|
|
114
|
+
margin-block-start: 0;
|
|
115
|
+
margin-block-end: 0;
|
|
116
|
+
}
|
|
117
|
+
p:not(:only-of-type) {
|
|
118
|
+
margin-bottom: ${props => props.marginBetweenParagraphs || '0'};
|
|
119
|
+
}
|
|
120
|
+
${ParagraphStyling}
|
|
121
|
+
`;
|
|
88
122
|
var ParagraphTextStyle;
|
|
89
123
|
|
|
90
124
|
(function (ParagraphTextStyle) {
|
|
@@ -122,13 +156,14 @@ const ParagraphXL = ({
|
|
|
122
156
|
let fontWeight = paragraphFontWeight(textStyle);
|
|
123
157
|
let fontStyle = paragraphFontStyle(textStyle);
|
|
124
158
|
let textDecorationLine = paragraphTextDecorationLine(textStyle);
|
|
125
|
-
return /*#__PURE__*/React.createElement(
|
|
159
|
+
return /*#__PURE__*/React.createElement(ParagraphBase, {
|
|
126
160
|
color: color,
|
|
127
161
|
lineHeight: 36,
|
|
128
162
|
fontSize: 24,
|
|
129
163
|
fontWeight: fontWeight,
|
|
130
164
|
fontStyle: fontStyle,
|
|
131
|
-
textDecorationLine: textDecorationLine
|
|
165
|
+
textDecorationLine: textDecorationLine,
|
|
166
|
+
marginBetweenParagraphs: "18px"
|
|
132
167
|
}, children);
|
|
133
168
|
};
|
|
134
169
|
|
|
@@ -145,13 +180,14 @@ const ParagraphL = ({
|
|
|
145
180
|
let fontWeight = paragraphFontWeight(textStyle);
|
|
146
181
|
let fontStyle = paragraphFontStyle(textStyle);
|
|
147
182
|
let textDecorationLine = paragraphTextDecorationLine(textStyle);
|
|
148
|
-
return /*#__PURE__*/React.createElement(
|
|
183
|
+
return /*#__PURE__*/React.createElement(ParagraphBase, {
|
|
149
184
|
color: color,
|
|
150
185
|
lineHeight: 32,
|
|
151
186
|
fontSize: 20,
|
|
152
187
|
fontWeight: fontWeight,
|
|
153
188
|
fontStyle: fontStyle,
|
|
154
|
-
textDecorationLine: textDecorationLine
|
|
189
|
+
textDecorationLine: textDecorationLine,
|
|
190
|
+
marginBetweenParagraphs: "16px"
|
|
155
191
|
}, children);
|
|
156
192
|
};
|
|
157
193
|
|
|
@@ -168,13 +204,14 @@ const ParagraphM = ({
|
|
|
168
204
|
let fontWeight = paragraphFontWeight(textStyle);
|
|
169
205
|
let fontStyle = paragraphFontStyle(textStyle);
|
|
170
206
|
let textDecorationLine = paragraphTextDecorationLine(textStyle);
|
|
171
|
-
return /*#__PURE__*/React.createElement(
|
|
207
|
+
return /*#__PURE__*/React.createElement(ParagraphBase, {
|
|
172
208
|
color: color,
|
|
173
209
|
lineHeight: 28,
|
|
174
210
|
fontSize: 18,
|
|
175
211
|
fontWeight: fontWeight,
|
|
176
212
|
fontStyle: fontStyle,
|
|
177
|
-
textDecorationLine: textDecorationLine
|
|
213
|
+
textDecorationLine: textDecorationLine,
|
|
214
|
+
marginBetweenParagraphs: "14px"
|
|
178
215
|
}, children);
|
|
179
216
|
};
|
|
180
217
|
|
|
@@ -191,13 +228,14 @@ const ParagraphS = ({
|
|
|
191
228
|
let fontWeight = paragraphFontWeight(textStyle);
|
|
192
229
|
let fontStyle = paragraphFontStyle(textStyle);
|
|
193
230
|
let textDecorationLine = paragraphTextDecorationLine(textStyle);
|
|
194
|
-
return /*#__PURE__*/React.createElement(
|
|
231
|
+
return /*#__PURE__*/React.createElement(ParagraphBase, {
|
|
195
232
|
color: color,
|
|
196
233
|
lineHeight: 24,
|
|
197
234
|
fontSize: 16,
|
|
198
235
|
fontWeight: fontWeight,
|
|
199
236
|
fontStyle: fontStyle,
|
|
200
|
-
textDecorationLine: textDecorationLine
|
|
237
|
+
textDecorationLine: textDecorationLine,
|
|
238
|
+
marginBetweenParagraphs: "12px"
|
|
201
239
|
}, children);
|
|
202
240
|
};
|
|
203
241
|
|
|
@@ -214,13 +252,14 @@ const ParagraphXS = ({
|
|
|
214
252
|
let fontWeight = paragraphFontWeight(textStyle);
|
|
215
253
|
let fontStyle = paragraphFontStyle(textStyle);
|
|
216
254
|
let textDecorationLine = paragraphTextDecorationLine(textStyle);
|
|
217
|
-
return /*#__PURE__*/React.createElement(
|
|
255
|
+
return /*#__PURE__*/React.createElement(ParagraphBase, {
|
|
218
256
|
color: color,
|
|
219
257
|
lineHeight: 20,
|
|
220
258
|
fontSize: 14,
|
|
221
259
|
fontWeight: fontWeight,
|
|
222
260
|
fontStyle: fontStyle,
|
|
223
|
-
textDecorationLine: textDecorationLine
|
|
261
|
+
textDecorationLine: textDecorationLine,
|
|
262
|
+
marginBetweenParagraphs: "10px"
|
|
224
263
|
}, children);
|
|
225
264
|
};
|
|
226
265
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/styles/typography.tsx"],"names":["React","COLORS","styled","TYPOGRAPHY","fontFamily","TypographyBase","color","lineHeight","fontSize","fontWeight","fontStyle","textTransform","textDecorationLine","black","HeadlineBase","HeadlineXL","HeadlineL","HeadlineM","HeadlineS","HeadlineXS","HeadlineXXS","ParagraphBase","ParagraphTextStyle","paragraphFontWeight","textStyle","Bold","paragraphFontStyle","Italic","paragraphTextDecorationLine","textDecoration","Underline","ParagraphXL","children","ParagraphL","ParagraphM","ParagraphS","ParagraphXS","ComponentTextStyle","componentFontWeight","UppercaseBold","componentFontStyle","componentTextTransformation","ComponentXL","ComponentL","ComponentM","ComponentS","ComponentXS","ComponentXXS"],"mappings":";AAAA,OAAOA,KAAP,MAAyC,OAAzC;AACA,SAASC,MAAT,QAAuB,GAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAGA,MAAMC,UAAU,GAAG;AACjBC,EAAAA,UAAU,EAAE;AADK,CAAnB;AAcA,MAAMC,cAAc,GAAGH,MAAM,CAAC,KAAD,CAAN,CAA+B,CAAC;AAACI,EAAAA,KAAD;AAAQC,EAAAA,UAAR;AAAoBC,EAAAA,QAApB;AAA8BC,EAAAA,UAA9B;AAA0CC,EAAAA,SAA1C;AAAqDC,EAAAA,aAArD;AAAoEC,EAAAA;AAApE,CAAD,MAA8F;AAClJR,EAAAA,UAAU,EAAED,UAAU,CAACC,UAD2H;AAElJI,EAAAA,QAAQ,EAAEA,QAFwI;AAGlJC,EAAAA,UAAU,EAAEA,UAHsI;AAIlJF,EAAAA,UAAU,EAAEA,UAAU,GAAG,IAJyH;AAKlJI,EAAAA,aAAa,EAAGA,aAAa,GAAEA,aAAF,GAAkB,MALmG;AAMlJC,EAAAA,kBAAkB,EAAGA,kBAAkB,GAAEA,kBAAF,GAAuB,MANoF;AAOlJF,EAAAA,SAAS,EAAGA,SAAS,GAAGA,SAAH,GAAe,QAP8G;AAQlJJ,EAAAA,KAAK,EAAGA,KAAK,GAAGA,KAAH,GAAWL,MAAM,CAACY;AARmH,CAA9F,CAA/B,CAAvB;AAqBA,MAAMC,YAAY,GAAGZ,MAAM,CAACG,cAAD,CAAN,CAAsC,CAAC;AAACC,EAAAA,KAAD;AAAQC,EAAAA,UAAR;AAAoBC,EAAAA;AAApB,CAAD,MAAoC;AAC7FA,EAAAA,QAAQ,EAAEA,QADmF;AAE7FC,EAAAA,UAAU,EAAE,GAFiF;AAG7FF,EAAAA,UAAU,EAAEA,UAHiF;AAI7FD,EAAAA,KAAK,EAAEA;AAJsF,CAApC,CAAtC,CAArB;AAOA,MAAMS,UAAU,GAAGb,MAAM,CAACY,YAAD,CAAN,CAAgC,CAAC;AAACR,EAAAA;AAAD,CAAD,MAAc;AAC/DE,EAAAA,QAAQ,EAAE,MADqD;AAE/DD,EAAAA,UAAU,EAAE,MAFmD;AAG/DD,EAAAA,KAAK,EAAEA;AAHwD,CAAd,CAAhC,CAAnB;AAMA,MAAMU,SAAS,GAAGd,MAAM,CAACY,YAAD,CAAN,CAAgC,CAAC;AAACR,EAAAA;AAAD,CAAD,MAAc;AAC9DE,EAAAA,QAAQ,EAAE,MADoD;AAE9DD,EAAAA,UAAU,EAAE,MAFkD;AAG9DD,EAAAA,KAAK,EAAEA;AAHuD,CAAd,CAAhC,CAAlB;AAMA,MAAMW,SAAS,GAAGf,MAAM,CAACY,YAAD,CAAN,CAAgC,CAAC;AAACR,EAAAA;AAAD,CAAD,MAAc;AAC9DE,EAAAA,QAAQ,EAAE,MADoD;AAE9DD,EAAAA,UAAU,EAAE,MAFkD;AAG9DD,EAAAA,KAAK,EAAEA;AAHuD,CAAd,CAAhC,CAAlB;AAMA,MAAMY,SAAS,GAAGhB,MAAM,CAACY,YAAD,CAAN,CAAgC,CAAC;AAACR,EAAAA;AAAD,CAAD,MAAc;AAC9DE,EAAAA,QAAQ,EAAE,MADoD;AAE9DD,EAAAA,UAAU,EAAE,MAFkD;AAG9DD,EAAAA,KAAK,EAAEA;AAHuD,CAAd,CAAhC,CAAlB;AAMA,MAAMa,UAAU,GAAGjB,MAAM,CAACY,YAAD,CAAN,CAAgC,CAAC;AAACR,EAAAA;AAAD,CAAD,MAAc;AAC/DE,EAAAA,QAAQ,EAAE,MADqD;AAE/DD,EAAAA,UAAU,EAAE,MAFmD;AAG/DD,EAAAA,KAAK,EAAEA;AAHwD,CAAd,CAAhC,CAAnB;AAMA,MAAMc,WAAW,GAAGlB,MAAM,CAACY,YAAD,CAAN,CAAgC,CAAC;AAACR,EAAAA;AAAD,CAAD,MAAc;AAChEE,EAAAA,QAAQ,EAAE,MADsD;AAEhED,EAAAA,UAAU,EAAE,MAFoD;AAGhED,EAAAA,KAAK,EAAEA;AAHyD,CAAd,CAAhC,CAApB;AAYA,MAAMe,aAAa,GAAGnB,MAAM,CAACG,cAAD,CAAN,CAAuC,CAAC;AAACC,EAAAA,KAAD;AAAQC,EAAAA,UAAR;AAAoBC,EAAAA;AAApB,CAAD,MAAoC;AAC/FA,EAAAA,QAAQ,EAAEA,QADqF;AAE/FC,EAAAA,UAAU,EAAE,GAFmF;AAG/FF,EAAAA,UAAU,EAAEA,UAHmF;AAI/FD,EAAAA,KAAK,EAAEA;AAJwF,CAApC,CAAvC,CAAtB;IAWKgB,kB;;WAAAA,kB;AAAAA,EAAAA,kB,CAAAA,kB;AAAAA,EAAAA,kB,CAAAA,kB;AAAAA,EAAAA,kB,CAAAA,kB;AAAAA,EAAAA,kB,CAAAA,kB;GAAAA,kB,KAAAA,kB;;AAcL,MAAMC,mBAAmB,GAAIC,SAAD,IAAoC;AAC9D,MAAIf,UAAU,GAAG,GAAjB;;AACA,MAAIe,SAAS,KAAKF,kBAAkB,CAACG,IAArC,EAA2C;AACzChB,IAAAA,UAAU,GAAG,GAAb;AACD;;AACD,SAAOA,UAAP;AACD,CAND;;AAQA,MAAMiB,kBAAkB,GAAIF,SAAD,IAAoC;AAC7D,MAAId,SAAS,GAAIc,SAAS,IAAIA,SAAS,KAAKF,kBAAkB,CAACK,MAA/C,GAAyD,QAAzD,GAAoE,EAApF;AACA,SAAOjB,SAAP;AACD,CAHD;;AAKA,MAAMkB,2BAA2B,GAAIJ,SAAD,IAAkE;AACpG,MAAIK,cAA4C,GAAIL,SAAS,IAAIA,SAAS,KAAKF,kBAAkB,CAACQ,SAA/C,GAA4D,WAA5D,GAA0E,MAA7H;AACA,SAAOD,cAAP;AACD,CAHD;;AAMA,MAAME,WAA8C,GAAG,CAAC;AAACzB,EAAAA,KAAD;AAAQkB,EAAAA,SAAR;AAAmBQ,EAAAA;AAAnB,CAAD,KAAkC;AACvF,MAAIvB,UAAU,GAAGc,mBAAmB,CAACC,SAAD,CAApC;AACA,MAAId,SAAS,GAAGgB,kBAAkB,CAACF,SAAD,CAAlC;AACA,MAAIZ,kBAAkB,GAAGgB,2BAA2B,CAACJ,SAAD,CAApD;AACA,sBACE,oBAAC,cAAD;AAAgB,IAAA,KAAK,EAAGlB,KAAxB;AAA+B,IAAA,UAAU,EAAE,EAA3C;AAA+C,IAAA,QAAQ,EAAE,EAAzD;AAA6D,IAAA,UAAU,EAAEG,UAAzE;AAAqF,IAAA,SAAS,EAAEC,SAAhG;AAA2G,IAAA,kBAAkB,EAAEE;AAA/H,KACGoB,QADH,CADF;AAKD,CATD;;;AAxBE1B,EAAAA,K;AACAkB,EAAAA,S;;;AAkCF,MAAMS,UAA6C,GAAG,CAAC;AAAC3B,EAAAA,KAAD;AAAQkB,EAAAA,SAAR;AAAmBQ,EAAAA;AAAnB,CAAD,KAAkC;AACtF,MAAIvB,UAAU,GAAGc,mBAAmB,CAACC,SAAD,CAApC;AACA,MAAId,SAAS,GAAGgB,kBAAkB,CAACF,SAAD,CAAlC;AACA,MAAIZ,kBAAkB,GAAGgB,2BAA2B,CAACJ,SAAD,CAApD;AACA,sBACE,oBAAC,cAAD;AAAgB,IAAA,KAAK,EAAGlB,KAAxB;AAA+B,IAAA,UAAU,EAAE,EAA3C;AAA+C,IAAA,QAAQ,EAAE,EAAzD;AAA6D,IAAA,UAAU,EAAEG,UAAzE;AAAqF,IAAA,SAAS,EAAEC,SAAhG;AAA2G,IAAA,kBAAkB,EAAEE;AAA/H,KACGoB,QADH,CADF;AAKD,CATD;;;AAnCE1B,EAAAA,K;AACAkB,EAAAA,S;;;AA6CF,MAAMU,UAA6C,GAAG,CAAC;AAAC5B,EAAAA,KAAD;AAAQkB,EAAAA,SAAR;AAAmBQ,EAAAA;AAAnB,CAAD,KAAkC;AACtF,MAAIvB,UAAU,GAAGc,mBAAmB,CAACC,SAAD,CAApC;AACA,MAAId,SAAS,GAAGgB,kBAAkB,CAACF,SAAD,CAAlC;AACA,MAAIZ,kBAAkB,GAAGgB,2BAA2B,CAACJ,SAAD,CAApD;AACA,sBACE,oBAAC,cAAD;AAAgB,IAAA,KAAK,EAAGlB,KAAxB;AAA+B,IAAA,UAAU,EAAE,EAA3C;AAA+C,IAAA,QAAQ,EAAE,EAAzD;AAA6D,IAAA,UAAU,EAAEG,UAAzE;AAAqF,IAAA,SAAS,EAAEC,SAAhG;AAA2G,IAAA,kBAAkB,EAAEE;AAA/H,KACGoB,QADH,CADF;AAKD,CATD;;;AA9CE1B,EAAAA,K;AACAkB,EAAAA,S;;;AAwDF,MAAMW,UAA6C,GAAG,CAAC;AAAC7B,EAAAA,KAAD;AAAQkB,EAAAA,SAAR;AAAmBQ,EAAAA;AAAnB,CAAD,KAAkC;AACtF,MAAIvB,UAAU,GAAGc,mBAAmB,CAACC,SAAD,CAApC;AACA,MAAId,SAAS,GAAGgB,kBAAkB,CAACF,SAAD,CAAlC;AACA,MAAIZ,kBAAkB,GAAGgB,2BAA2B,CAACJ,SAAD,CAApD;AACA,sBACE,oBAAC,cAAD;AAAgB,IAAA,KAAK,EAAGlB,KAAxB;AAA+B,IAAA,UAAU,EAAE,EAA3C;AAA+C,IAAA,QAAQ,EAAE,EAAzD;AAA6D,IAAA,UAAU,EAAEG,UAAzE;AAAqF,IAAA,SAAS,EAAEC,SAAhG;AAA2G,IAAA,kBAAkB,EAAEE;AAA/H,KACGoB,QADH,CADF;AAKD,CATD;;;AAzDE1B,EAAAA,K;AACAkB,EAAAA,S;;;AAmEF,MAAMY,WAA8C,GAAG,CAAC;AAAC9B,EAAAA,KAAD;AAAQkB,EAAAA,SAAR;AAAmBQ,EAAAA;AAAnB,CAAD,KAAkC;AACvF,MAAIvB,UAAU,GAAGc,mBAAmB,CAACC,SAAD,CAApC;AACA,MAAId,SAAS,GAAGgB,kBAAkB,CAACF,SAAD,CAAlC;AACA,MAAIZ,kBAAkB,GAAGgB,2BAA2B,CAACJ,SAAD,CAApD;AACA,sBACE,oBAAC,cAAD;AAAgB,IAAA,KAAK,EAAGlB,KAAxB;AAA+B,IAAA,UAAU,EAAE,EAA3C;AAA+C,IAAA,QAAQ,EAAE,EAAzD;AAA6D,IAAA,UAAU,EAAEG,UAAzE;AAAqF,IAAA,SAAS,EAAEC,SAAhG;AAA2G,IAAA,kBAAkB,EAAEE;AAA/H,KACGoB,QADH,CADF;AAKD,CATD;;;AApEE1B,EAAAA,K;AACAkB,EAAAA,S;;IA+EGa,kB;;WAAAA,kB;AAAAA,EAAAA,kB,CAAAA,kB;AAAAA,EAAAA,kB,CAAAA,kB;AAAAA,EAAAA,kB,CAAAA,kB;AAAAA,EAAAA,kB,CAAAA,kB;GAAAA,kB,KAAAA,kB;;AAYL,MAAMC,mBAAmB,GAAId,SAAD,IAAoC;AAC9D,MAAIf,UAAU,GAAG,GAAjB;;AACA,MAAIe,SAAS,KAAKa,kBAAkB,CAACZ,IAAjC,IAAyCD,SAAS,KAAKa,kBAAkB,CAACE,aAA9E,EAA6F;AAC3F9B,IAAAA,UAAU,GAAG,GAAb;AACD;;AACD,SAAOA,UAAP;AACD,CAND;;AAQA,MAAM+B,kBAAkB,GAAIhB,SAAD,IAAoC;AAC7D,MAAId,SAAS,GAAIc,SAAS,IAAIA,SAAS,KAAKa,kBAAkB,CAACV,MAA/C,GAAyD,QAAzD,GAAoE,EAApF;AACA,SAAOjB,SAAP;AACD,CAHD;;AAKA,MAAM+B,2BAA2B,GAAIjB,SAAD,IAA6D;AAC/F,MAAId,SAAkC,GAAIc,SAAS,IAAIA,SAAS,KAAKa,kBAAkB,CAACE,aAA/C,GAAgE,WAAhE,GAA8E,MAAvH;AACA,SAAO7B,SAAP;AACD,CAHD;;AAKA,MAAMgC,WAA8C,GAAG,CAAC;AAACpC,EAAAA,KAAD;AAAQkB,EAAAA,SAAR;AAAmBQ,EAAAA;AAAnB,CAAD,KAAkC;AACvF,MAAIvB,UAAU,GAAG6B,mBAAmB,CAACd,SAAD,CAApC;AACA,MAAId,SAAS,GAAG8B,kBAAkB,CAAChB,SAAD,CAAlC;AACA,sBACE,oBAAC,cAAD;AAAgB,IAAA,KAAK,EAAGlB,KAAxB;AAA+B,IAAA,UAAU,EAAE,EAA3C;AAA+C,IAAA,QAAQ,EAAE,EAAzD;AAA6D,IAAA,UAAU,EAAEG,UAAzE;AAAqF,IAAA,SAAS,EAAEC;AAAhG,KACGsB,QADH,CADF;AAKD,CARD;;;AAtBE1B,EAAAA,K;AACAkB,EAAAA,S;;;AA+BF,MAAMmB,UAA6C,GAAG,CAAC;AAACrC,EAAAA,KAAD;AAAQkB,EAAAA,SAAR;AAAmBQ,EAAAA;AAAnB,CAAD,KAAkC;AACtF,MAAIvB,UAAU,GAAG6B,mBAAmB,CAACd,SAAD,CAApC;AACA,MAAId,SAAS,GAAG8B,kBAAkB,CAAChB,SAAD,CAAlC;AACA,sBACE,oBAAC,cAAD;AAAgB,IAAA,KAAK,EAAGlB,KAAxB;AAA+B,IAAA,UAAU,EAAE,EAA3C;AAA+C,IAAA,QAAQ,EAAE,EAAzD;AAA6D,IAAA,UAAU,EAAEG,UAAzE;AAAqF,IAAA,SAAS,EAAEC;AAAhG,KACGsB,QADH,CADF;AAKD,CARD;;;AAhCE1B,EAAAA,K;AACAkB,EAAAA,S;;;AAyCF,MAAMoB,UAA6C,GAAG,CAAC;AAACtC,EAAAA,KAAD;AAAQkB,EAAAA,SAAR;AAAmBQ,EAAAA;AAAnB,CAAD,KAAkC;AACtF,MAAIvB,UAAU,GAAG6B,mBAAmB,CAACd,SAAD,CAApC;AACA,MAAId,SAAS,GAAG8B,kBAAkB,CAAChB,SAAD,CAAlC;AACA,sBACE,oBAAC,cAAD;AAAgB,IAAA,KAAK,EAAGlB,KAAxB;AAA+B,IAAA,UAAU,EAAE,EAA3C;AAA+C,IAAA,QAAQ,EAAE,EAAzD;AAA6D,IAAA,UAAU,EAAEG,UAAzE;AAAqF,IAAA,SAAS,EAAEC;AAAhG,KACGsB,QADH,CADF;AAKD,CARD;;;AA1CE1B,EAAAA,K;AACAkB,EAAAA,S;;;AAmDF,MAAMqB,UAA6C,GAAG,CAAC;AAACvC,EAAAA,KAAD;AAAQkB,EAAAA,SAAR;AAAmBQ,EAAAA;AAAnB,CAAD,KAAkC;AACtF,MAAIvB,UAAU,GAAG6B,mBAAmB,CAACd,SAAD,CAApC;AACA,MAAId,SAAS,GAAG8B,kBAAkB,CAAChB,SAAD,CAAlC;AACA,sBACE,oBAAC,cAAD;AAAgB,IAAA,KAAK,EAAGlB,KAAxB;AAA+B,IAAA,UAAU,EAAE,EAA3C;AAA+C,IAAA,QAAQ,EAAE,EAAzD;AAA6D,IAAA,UAAU,EAAEG,UAAzE;AAAqF,IAAA,SAAS,EAAEC;AAAhG,KACGsB,QADH,CADF;AAKD,CARD;;;AApDE1B,EAAAA,K;AACAkB,EAAAA,S;;;AA6DF,MAAMsB,WAA8C,GAAG,CAAC;AAACxC,EAAAA,KAAD;AAAQkB,EAAAA,SAAR;AAAmBQ,EAAAA;AAAnB,CAAD,KAAkC;AACvF,MAAIvB,UAAU,GAAG6B,mBAAmB,CAACd,SAAD,CAApC;AACA,MAAId,SAAS,GAAG8B,kBAAkB,CAAChB,SAAD,CAAlC;AACA,MAAIb,aAAa,GAAG8B,2BAA2B,CAACjB,SAAD,CAA/C;AACA,sBACE,oBAAC,cAAD;AAAgB,IAAA,KAAK,EAAGlB,KAAxB;AAA+B,IAAA,UAAU,EAAE,EAA3C;AAA+C,IAAA,QAAQ,EAAE,EAAzD;AAA6D,IAAA,UAAU,EAAEG,UAAzE;AAAqF,IAAA,SAAS,EAAEC,SAAhG;AAA2G,IAAA,aAAa,EAAEC;AAA1H,KACGqB,QADH,CADF;AAKD,CATD;;;AA9DE1B,EAAAA,K;AACAkB,EAAAA,S;;;AAwEF,MAAMuB,YAA+C,GAAG,CAAC;AAACzC,EAAAA,KAAD;AAAQkB,EAAAA,SAAR;AAAmBQ,EAAAA;AAAnB,CAAD,KAAkC;AACxF,MAAIvB,UAAU,GAAG6B,mBAAmB,CAACd,SAAD,CAApC;AACA,MAAId,SAAS,GAAG8B,kBAAkB,CAAChB,SAAD,CAAlC;AACA,MAAIb,aAAa,GAAG8B,2BAA2B,CAACjB,SAAD,CAA/C;AACA,sBACE,oBAAC,cAAD;AAAgB,IAAA,KAAK,EAAGlB,KAAxB;AAA+B,IAAA,UAAU,EAAE,EAA3C;AAA+C,IAAA,QAAQ,EAAE,EAAzD;AAA6D,IAAA,UAAU,EAAEG,UAAzE;AAAqF,IAAA,SAAS,EAAEC,SAAhG;AAA2G,IAAA,aAAa,EAAEC;AAA1H,KACGqB,QADH,CADF;AAKD,CATD;;;AAzEE1B,EAAAA,K;AACAkB,EAAAA,S;;AAoFF,SAAQrB,UAAR;AACA,SAAQY,UAAR,EAAoBC,SAApB,EAA+BC,SAA/B,EAA0CC,SAA1C,EAAqDC,UAArD,EAAiEC,WAAjE;AACA,SAAQE,kBAAR,EAA4BS,WAA5B,EAAyCE,UAAzC,EAAqDC,UAArD,EAAiEC,UAAjE,EAA6EC,WAA7E;AACA,SAAQC,kBAAR,EAA4BK,WAA5B,EAAyCC,UAAzC,EAAqDC,UAArD,EAAiEC,UAAjE,EAA6EC,WAA7E,EAA0FC,YAA1F","sourcesContent":["import React, { FunctionComponent } from 'react';\nimport { COLORS } from '.';\nimport styled from 'styled-components';\nimport {Property} from 'csstype'\n\nconst TYPOGRAPHY = {\n fontFamily: 'Lato, sans-serif',\n};\n\ninterface ITypographyBase {\n color?: string,\n lineHeight: number,\n fontSize: number,\n fontWeight: number,\n fontStyle?: string,\n textTransform?: Property.TextTransform\n textDecorationLine?: Property.TextDecorationLine\n}\n\nconst TypographyBase = styled(\"div\")<ITypographyBase>(({color, lineHeight, fontSize, fontWeight, fontStyle, textTransform, textDecorationLine}) => ({ \n fontFamily: TYPOGRAPHY.fontFamily,\n fontSize: fontSize,\n fontWeight: fontWeight,\n lineHeight: lineHeight + 'px',\n textTransform: (textTransform? textTransform : 'none'),\n textDecorationLine: (textDecorationLine? textDecorationLine : 'none'),\n fontStyle: (fontStyle ? fontStyle : 'normal'),\n color: (color ? color : COLORS.black)\n}));\n\n\ninterface IHeadline {\n color?: string\n}\n\ninterface IHeadlineBase {\n color?: string,\n lineHeight: number,\n fontSize: number\n}\nconst HeadlineBase = styled(TypographyBase)<IHeadlineBase>(({color, lineHeight, fontSize}) => ({ \n fontSize: fontSize,\n fontWeight: 700,\n lineHeight: lineHeight,\n color: color\n}));\n\nconst HeadlineXL = styled(HeadlineBase)<IHeadline>(({color}) => ({ \n fontSize: '48px',\n lineHeight: '64px',\n color: color\n}));\n\nconst HeadlineL = styled(HeadlineBase)<IHeadline>(({color}) => ({ \n fontSize: '40px',\n lineHeight: '52px',\n color: color\n}));\n\nconst HeadlineM = styled(HeadlineBase)<IHeadline>(({color}) => ({ \n fontSize: '32px',\n lineHeight: '40px',\n color: color\n}));\n\nconst HeadlineS = styled(HeadlineBase)<IHeadline>(({color}) => ({ \n fontSize: '28px',\n lineHeight: '36px',\n color: color\n}));\n\nconst HeadlineXS = styled(HeadlineBase)<IHeadline>(({color}) => ({ \n fontSize: '24px',\n lineHeight: '32px',\n color: color\n}));\n\nconst HeadlineXXS = styled(HeadlineBase)<IHeadline>(({color}) => ({ \n fontSize: '20px',\n lineHeight: '24px',\n color: color\n}));\n\ninterface IParagraphBase {\n color?: string,\n lineHeight: number,\n fontSize: number\n}\n\nconst ParagraphBase = styled(TypographyBase)<IParagraphBase>(({color, lineHeight, fontSize}) => ({ \n fontSize: fontSize,\n fontWeight: 400,\n lineHeight: lineHeight,\n color: color\n}));\n\ninterface IParagraph {\n color?: string\n}\n\nenum ParagraphTextStyle {\n Regular = 1,\n Bold,\n Italic,\n Underline\n}\n\n\ntype ParagraphProps = {\n color?: string, \n textStyle?: ParagraphTextStyle\n};\n\n\nconst paragraphFontWeight = (textStyle?: ParagraphTextStyle) => {\n let fontWeight = 400;\n if (textStyle === ParagraphTextStyle.Bold) {\n fontWeight = 700;\n }\n return fontWeight;\n};\n\nconst paragraphFontStyle = (textStyle?: ParagraphTextStyle) => {\n let fontStyle = (textStyle && textStyle === ParagraphTextStyle.Italic) ? 'italic' : '';\n return fontStyle;\n};\n\nconst paragraphTextDecorationLine = (textStyle?: ParagraphTextStyle) : Property.TextDecorationLine => {\n let textDecoration : Property.TextDecorationLine = (textStyle && textStyle === ParagraphTextStyle.Underline) ? 'underline' : 'none';\n return textDecoration;\n};\n\n\nconst ParagraphXL: FunctionComponent<ParagraphProps> = ({color, textStyle, children}) => { \n let fontWeight = paragraphFontWeight(textStyle);\n let fontStyle = paragraphFontStyle(textStyle);\n let textDecorationLine = paragraphTextDecorationLine(textStyle);\n return (\n <TypographyBase color= {color} lineHeight={36} fontSize={24} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine}>\n {children}\n </TypographyBase>\n )\n};\n\nconst ParagraphL: FunctionComponent<ParagraphProps> = ({color, textStyle, children}) => { \n let fontWeight = paragraphFontWeight(textStyle);\n let fontStyle = paragraphFontStyle(textStyle);\n let textDecorationLine = paragraphTextDecorationLine(textStyle);\n return (\n <TypographyBase color= {color} lineHeight={32} fontSize={20} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine}>\n {children}\n </TypographyBase>\n )\n};\n\nconst ParagraphM: FunctionComponent<ParagraphProps> = ({color, textStyle, children}) => { \n let fontWeight = paragraphFontWeight(textStyle);\n let fontStyle = paragraphFontStyle(textStyle);\n let textDecorationLine = paragraphTextDecorationLine(textStyle);\n return (\n <TypographyBase color= {color} lineHeight={28} fontSize={18} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine}>\n {children}\n </TypographyBase>\n )\n};\n\nconst ParagraphS: FunctionComponent<ParagraphProps> = ({color, textStyle, children}) => { \n let fontWeight = paragraphFontWeight(textStyle);\n let fontStyle = paragraphFontStyle(textStyle);\n let textDecorationLine = paragraphTextDecorationLine(textStyle);\n return (\n <TypographyBase color= {color} lineHeight={24} fontSize={16} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine}>\n {children}\n </TypographyBase>\n )\n};\n\nconst ParagraphXS: FunctionComponent<ParagraphProps> = ({color, textStyle, children}) => { \n let fontWeight = paragraphFontWeight(textStyle);\n let fontStyle = paragraphFontStyle(textStyle);\n let textDecorationLine = paragraphTextDecorationLine(textStyle);\n return (\n <TypographyBase color= {color} lineHeight={20} fontSize={14} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine}>\n {children}\n </TypographyBase>\n )\n};\n\n\nenum ComponentTextStyle {\n Regular = 1,\n Bold,\n Italic,\n UppercaseBold\n}\n\ntype ComponentProps = {\n color?: string, \n textStyle?: ComponentTextStyle\n};\n\nconst componentFontWeight = (textStyle?: ComponentTextStyle) => {\n let fontWeight = 400;\n if (textStyle === ComponentTextStyle.Bold || textStyle === ComponentTextStyle.UppercaseBold) {\n fontWeight = 700;\n }\n return fontWeight;\n};\n\nconst componentFontStyle = (textStyle?: ComponentTextStyle) => {\n let fontStyle = (textStyle && textStyle === ComponentTextStyle.Italic) ? 'italic' : '';\n return fontStyle;\n};\n\nconst componentTextTransformation = (textStyle?: ComponentTextStyle) : Property.TextTransform => {\n let fontStyle : Property.TextTransform = (textStyle && textStyle === ComponentTextStyle.UppercaseBold) ? 'uppercase' : 'none';\n return fontStyle;\n};\n\nconst ComponentXL: FunctionComponent<ComponentProps> = ({color, textStyle, children}) => { \n let fontWeight = componentFontWeight(textStyle);\n let fontStyle = componentFontStyle(textStyle);\n return (\n <TypographyBase color= {color} lineHeight={28} fontSize={24} fontWeight={fontWeight} fontStyle={fontStyle} >\n {children}\n </TypographyBase>\n )\n};\n\nconst ComponentL: FunctionComponent<ComponentProps> = ({color, textStyle, children}) => { \n let fontWeight = componentFontWeight(textStyle);\n let fontStyle = componentFontStyle(textStyle);\n return (\n <TypographyBase color= {color} lineHeight={24} fontSize={20} fontWeight={fontWeight} fontStyle={fontStyle} >\n {children}\n </TypographyBase>\n )\n};\n\nconst ComponentM: FunctionComponent<ComponentProps> = ({color, textStyle, children}) => { \n let fontWeight = componentFontWeight(textStyle);\n let fontStyle = componentFontStyle(textStyle);\n return (\n <TypographyBase color= {color} lineHeight={24} fontSize={18} fontWeight={fontWeight} fontStyle={fontStyle} >\n {children}\n </TypographyBase>\n )\n};\n\nconst ComponentS: FunctionComponent<ComponentProps> = ({color, textStyle, children}) => { \n let fontWeight = componentFontWeight(textStyle);\n let fontStyle = componentFontStyle(textStyle);\n return (\n <TypographyBase color= {color} lineHeight={20} fontSize={16} fontWeight={fontWeight} fontStyle={fontStyle} >\n {children}\n </TypographyBase>\n )\n};\n\nconst ComponentXS: FunctionComponent<ComponentProps> = ({color, textStyle, children}) => { \n let fontWeight = componentFontWeight(textStyle);\n let fontStyle = componentFontStyle(textStyle);\n let textTransform = componentTextTransformation(textStyle);\n return (\n <TypographyBase color= {color} lineHeight={16} fontSize={14} fontWeight={fontWeight} fontStyle={fontStyle} textTransform={textTransform}>\n {children}\n </TypographyBase>\n )\n};\n\nconst ComponentXXS: FunctionComponent<ComponentProps> = ({color, textStyle, children}) => { \n let fontWeight = componentFontWeight(textStyle);\n let fontStyle = componentFontStyle(textStyle);\n let textTransform = componentTextTransformation(textStyle);\n return (\n <TypographyBase color= {color} lineHeight={16} fontSize={12} fontWeight={fontWeight} fontStyle={fontStyle} textTransform={textTransform} >\n {children}\n </TypographyBase>\n )\n};\n\n\nexport {TYPOGRAPHY}\nexport {HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS}\nexport {ParagraphTextStyle, ParagraphXL, ParagraphL, ParagraphM, ParagraphS, ParagraphXS}\nexport {ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS}"],"file":"typography.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/styles/typography.tsx"],"names":["React","styled","css","COLORS","TYPOGRAPHY","fontFamily","TypographyBase","color","lineHeight","fontSize","fontWeight","fontStyle","textTransform","textDecorationLine","black","HeadlineBase","HeadlineXL","HeadlineL","HeadlineM","HeadlineS","HeadlineXS","HeadlineXXS","ParagraphStyling","ParagraphBase","props","marginBetweenParagraphs","ParagraphTextStyle","paragraphFontWeight","textStyle","Bold","paragraphFontStyle","Italic","paragraphTextDecorationLine","textDecoration","Underline","ParagraphXL","children","ParagraphL","ParagraphM","ParagraphS","ParagraphXS","ComponentTextStyle","componentFontWeight","UppercaseBold","componentFontStyle","componentTextTransformation","ComponentXL","ComponentL","ComponentM","ComponentS","ComponentXS","ComponentXXS"],"mappings":"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","sourcesContent":["import React, { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { COLORS } from '.';\nimport { Property } from 'csstype';\n\nconst TYPOGRAPHY = {\n fontFamily: 'Lato, sans-serif',\n};\n\ninterface ITypographyBase {\n color?: string;\n lineHeight: number;\n fontSize: number;\n fontWeight: number;\n fontStyle?: string;\n textTransform?: Property.TextTransform;\n textDecorationLine?: Property.TextDecorationLine;\n}\n\nconst TypographyBase = styled('div')<ITypographyBase>(({ color, lineHeight, fontSize, fontWeight, fontStyle, textTransform, textDecorationLine }) => ({\n fontFamily: TYPOGRAPHY.fontFamily,\n fontSize: fontSize,\n fontWeight: fontWeight,\n lineHeight: lineHeight + 'px',\n textTransform: textTransform ? textTransform : 'none',\n textDecorationLine: textDecorationLine ? textDecorationLine : 'none',\n fontStyle: fontStyle ? fontStyle : 'normal',\n color: color ? color : COLORS.black,\n}));\n\ninterface IHeadline {\n color?: string;\n}\n\ninterface IHeadlineBase {\n color?: string;\n lineHeight: number;\n fontSize: number;\n}\nconst HeadlineBase = styled(TypographyBase)<IHeadlineBase>(({ color, lineHeight, fontSize }) => ({\n fontSize: fontSize,\n fontWeight: 700,\n lineHeight: lineHeight,\n color: color,\n}));\n\nconst HeadlineXL = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n fontSize: '48px',\n lineHeight: '64px',\n color: color,\n}));\n\nconst HeadlineL = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n fontSize: '40px',\n lineHeight: '52px',\n color: color,\n}));\n\nconst HeadlineM = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n fontSize: '32px',\n lineHeight: '40px',\n color: color,\n}));\n\nconst HeadlineS = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n fontSize: '28px',\n lineHeight: '36px',\n color: color,\n}));\n\nconst HeadlineXS = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n fontSize: '24px',\n lineHeight: '32px',\n color: color,\n}));\n\nconst HeadlineXXS = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n fontSize: '20px',\n lineHeight: '24px',\n color: color,\n}));\n\nconst ParagraphStyling = css`\n :lang(ja-jp) > h1,\n h2,\n h3,\n h4,\n p,\n span {\n max-width: 30em;\n }\n :lang(ko-kr) > h1,\n h2,\n h3,\n h4,\n p,\n span {\n max-width: 30em;\n }\n :lang(zh-CN) > h1,\n h2,\n h3,\n h4,\n p,\n span {\n max-width: 30em;\n }\n h1,\n h2,\n h3,\n h4,\n p,\n span {\n max-width: 34em;\n }\n`;\n\ninterface IParagraphBase {\n color?: string;\n lineHeight: number;\n fontSize: number;\n marginBetweenParagraphs?: string;\n}\n\nconst ParagraphBase = styled(TypographyBase)<IParagraphBase>`\n p {\n margin-block-start: 0;\n margin-block-end: 0;\n }\n p:not(:only-of-type) {\n margin-bottom: ${(props) => props.marginBetweenParagraphs || '0'};\n }\n ${ParagraphStyling}\n`;\n\ninterface IParagraph {\n color?: string;\n}\n\nenum ParagraphTextStyle {\n Regular = 1,\n Bold,\n Italic,\n Underline,\n}\n\ntype ParagraphProps = {\n color?: string;\n textStyle?: ParagraphTextStyle;\n};\n\nconst paragraphFontWeight = (textStyle?: ParagraphTextStyle) => {\n let fontWeight = 400;\n if (textStyle === ParagraphTextStyle.Bold) {\n fontWeight = 700;\n }\n return fontWeight;\n};\n\nconst paragraphFontStyle = (textStyle?: ParagraphTextStyle) => {\n let fontStyle = textStyle && textStyle === ParagraphTextStyle.Italic ? 'italic' : '';\n return fontStyle;\n};\n\nconst paragraphTextDecorationLine = (textStyle?: ParagraphTextStyle): Property.TextDecorationLine => {\n let textDecoration: Property.TextDecorationLine = textStyle && textStyle === ParagraphTextStyle.Underline ? 'underline' : 'none';\n return textDecoration;\n};\n\nconst ParagraphXL: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n let fontWeight = paragraphFontWeight(textStyle);\n let fontStyle = paragraphFontStyle(textStyle);\n let textDecorationLine = paragraphTextDecorationLine(textStyle);\n return (\n <ParagraphBase color={color} lineHeight={36} fontSize={24} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"18px\">\n {children}\n </ParagraphBase>\n );\n};\n\nconst ParagraphL: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n let fontWeight = paragraphFontWeight(textStyle);\n let fontStyle = paragraphFontStyle(textStyle);\n let textDecorationLine = paragraphTextDecorationLine(textStyle);\n return (\n <ParagraphBase color={color} lineHeight={32} fontSize={20} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"16px\">\n {children}\n </ParagraphBase>\n );\n};\n\nconst ParagraphM: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n let fontWeight = paragraphFontWeight(textStyle);\n let fontStyle = paragraphFontStyle(textStyle);\n let textDecorationLine = paragraphTextDecorationLine(textStyle);\n return (\n <ParagraphBase color={color} lineHeight={28} fontSize={18} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"14px\">\n {children}\n </ParagraphBase>\n );\n};\n\nconst ParagraphS: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n let fontWeight = paragraphFontWeight(textStyle);\n let fontStyle = paragraphFontStyle(textStyle);\n let textDecorationLine = paragraphTextDecorationLine(textStyle);\n return (\n <ParagraphBase color={color} lineHeight={24} fontSize={16} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"12px\">\n {children}\n </ParagraphBase>\n );\n};\n\nconst ParagraphXS: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n let fontWeight = paragraphFontWeight(textStyle);\n let fontStyle = paragraphFontStyle(textStyle);\n let textDecorationLine = paragraphTextDecorationLine(textStyle);\n return (\n <ParagraphBase color={color} lineHeight={20} fontSize={14} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"10px\">\n {children}\n </ParagraphBase>\n );\n};\n\nenum ComponentTextStyle {\n Regular = 1,\n Bold,\n Italic,\n UppercaseBold,\n}\n\ntype ComponentProps = {\n color?: string;\n textStyle?: ComponentTextStyle;\n};\n\nconst componentFontWeight = (textStyle?: ComponentTextStyle) => {\n let fontWeight = 400;\n if (textStyle === ComponentTextStyle.Bold || textStyle === ComponentTextStyle.UppercaseBold) {\n fontWeight = 700;\n }\n return fontWeight;\n};\n\nconst componentFontStyle = (textStyle?: ComponentTextStyle) => {\n let fontStyle = textStyle && textStyle === ComponentTextStyle.Italic ? 'italic' : '';\n return fontStyle;\n};\n\nconst componentTextTransformation = (textStyle?: ComponentTextStyle): Property.TextTransform => {\n let fontStyle: Property.TextTransform = textStyle && textStyle === ComponentTextStyle.UppercaseBold ? 'uppercase' : 'none';\n return fontStyle;\n};\n\nconst ComponentXL: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n let fontWeight = componentFontWeight(textStyle);\n let fontStyle = componentFontStyle(textStyle);\n return (\n <TypographyBase color={color} lineHeight={28} fontSize={24} fontWeight={fontWeight} fontStyle={fontStyle}>\n {children}\n </TypographyBase>\n );\n};\n\nconst ComponentL: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n let fontWeight = componentFontWeight(textStyle);\n let fontStyle = componentFontStyle(textStyle);\n return (\n <TypographyBase color={color} lineHeight={24} fontSize={20} fontWeight={fontWeight} fontStyle={fontStyle}>\n {children}\n </TypographyBase>\n );\n};\n\nconst ComponentM: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n let fontWeight = componentFontWeight(textStyle);\n let fontStyle = componentFontStyle(textStyle);\n return (\n <TypographyBase color={color} lineHeight={24} fontSize={18} fontWeight={fontWeight} fontStyle={fontStyle}>\n {children}\n </TypographyBase>\n );\n};\n\nconst ComponentS: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n let fontWeight = componentFontWeight(textStyle);\n let fontStyle = componentFontStyle(textStyle);\n return (\n <TypographyBase color={color} lineHeight={20} fontSize={16} fontWeight={fontWeight} fontStyle={fontStyle}>\n {children}\n </TypographyBase>\n );\n};\n\nconst ComponentXS: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n let fontWeight = componentFontWeight(textStyle);\n let fontStyle = componentFontStyle(textStyle);\n let textTransform = componentTextTransformation(textStyle);\n return (\n <TypographyBase color={color} lineHeight={16} fontSize={14} fontWeight={fontWeight} fontStyle={fontStyle} textTransform={textTransform}>\n {children}\n </TypographyBase>\n );\n};\n\nconst ComponentXXS: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n let fontWeight = componentFontWeight(textStyle);\n let fontStyle = componentFontStyle(textStyle);\n let textTransform = componentTextTransformation(textStyle);\n return (\n <TypographyBase color={color} lineHeight={16} fontSize={12} fontWeight={fontWeight} fontStyle={fontStyle} textTransform={textTransform}>\n {children}\n </TypographyBase>\n );\n};\n\nexport { TYPOGRAPHY };\nexport { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS };\nexport { ParagraphTextStyle, ParagraphXL, ParagraphL, ParagraphM, ParagraphS, ParagraphXS };\nexport { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS };\n"],"file":"typography.js"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
declare type BannerProps = {
|
|
3
|
+
size?: 'small' | 'medium' | 'large';
|
|
3
4
|
type?: string;
|
|
4
5
|
link?: string;
|
|
5
6
|
linkText?: string;
|
|
@@ -8,6 +9,7 @@ declare type BannerProps = {
|
|
|
8
9
|
testId?: string;
|
|
9
10
|
icon?: React.ReactNode;
|
|
10
11
|
onClose?: () => void;
|
|
12
|
+
noIcon?: boolean;
|
|
11
13
|
};
|
|
12
14
|
declare const Banner: React.FunctionComponent<BannerProps>;
|
|
13
15
|
export default Banner;
|
|
@@ -19,7 +19,9 @@ var _SystemIcons = require("../icons/systemicons/SystemIcons");
|
|
|
19
19
|
|
|
20
20
|
var _Button = require("../Button");
|
|
21
21
|
|
|
22
|
-
var
|
|
22
|
+
var _styles2 = require("./styles");
|
|
23
|
+
|
|
24
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
23
25
|
|
|
24
26
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
25
27
|
|
|
@@ -32,29 +34,35 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
|
|
|
32
34
|
/**
|
|
33
35
|
* Styles for <Banner />
|
|
34
36
|
*/
|
|
35
|
-
var BannerContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background: ", ";\n min-height: 48px;\n display: flex;\n color: ", ";\n margin-top: ", ";\n\n button:last-child {\n margin: 0 0 0
|
|
37
|
+
var BannerContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background: ", ";\n min-height: 48px;\n display: flex;\n color: ", ";\n margin-top: ", ";\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ", " {\n margin: 0 0 0 16px;\n }\n ", " {\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: ", ";\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"])), function (props) {
|
|
36
38
|
return props.type ? props.type : _styles.COLORS.correct_100;
|
|
37
39
|
}, _styles.COLORS.black, function (props) {
|
|
38
40
|
return props.bottom ? 'auto' : '0';
|
|
39
|
-
}, function (props) {
|
|
40
|
-
return props.hover ? props.hover : _styles.COLORS.primary_20;
|
|
41
|
-
}, function (props) {
|
|
41
|
+
}, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE, function (props) {
|
|
42
42
|
return props.link;
|
|
43
43
|
});
|
|
44
44
|
|
|
45
|
-
var BannerCenter = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: ", ";\n font-size: 18px;\n display: flex;\n
|
|
45
|
+
var BannerCenter = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: ", ";\n font-size: 18px;\n display: flex;\n width: 100%;\n margin: 0 6px 0 16px;\n ", " {\n margin: 0 22px 0 32px;\n }\n ", " {\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"])), function (props) {
|
|
46
46
|
return props.color;
|
|
47
|
-
}, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE
|
|
47
|
+
}, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE);
|
|
48
|
+
|
|
49
|
+
var ButtonWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin: 0 0 0 auto;\n ", ";\n"])), function (props) {
|
|
50
|
+
return props.type ? (0, _styles2.getButtonStyle)(props.type) : null;
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
var BannerContentWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n margin: 12px 0;\n &:not(:first-child) {\n margin-left: 8px;\n }\n"])));
|
|
48
54
|
|
|
49
55
|
var Banner = function Banner(_ref) {
|
|
50
|
-
var
|
|
56
|
+
var size = _ref.size,
|
|
57
|
+
type = _ref.type,
|
|
51
58
|
children = _ref.children,
|
|
52
59
|
bottom = _ref.bottom,
|
|
53
60
|
testId = _ref.testId,
|
|
54
61
|
linkText = _ref.linkText,
|
|
55
62
|
link = _ref.link,
|
|
56
63
|
onClose = _ref.onClose,
|
|
57
|
-
icon = _ref.icon
|
|
64
|
+
icon = _ref.icon,
|
|
65
|
+
noIcon = _ref.noIcon;
|
|
58
66
|
var formatTypeToLowerCase = type === null || type === void 0 ? void 0 : type.toLowerCase();
|
|
59
67
|
|
|
60
68
|
switch (formatTypeToLowerCase) {
|
|
@@ -66,22 +74,27 @@ var Banner = function Banner(_ref) {
|
|
|
66
74
|
hover: _styles.COLORS.warning_20,
|
|
67
75
|
bottom: bottom
|
|
68
76
|
}, /*#__PURE__*/React.createElement(BannerCenter, {
|
|
69
|
-
color: _styles.COLORS.warning_700
|
|
70
|
-
|
|
77
|
+
color: _styles.COLORS.warning_700,
|
|
78
|
+
className: size
|
|
79
|
+
}, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(_SystemIcons.Help, {
|
|
71
80
|
color: _styles.COLORS.warning_700,
|
|
72
81
|
size: "24px"
|
|
73
|
-
}), children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
|
|
82
|
+
}), /*#__PURE__*/React.createElement(BannerContentWrapper, null, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
|
|
74
83
|
href: link,
|
|
75
84
|
target: "_blank"
|
|
76
|
-
}, linkText), onClose && /*#__PURE__*/React.createElement(
|
|
77
|
-
|
|
78
|
-
|
|
85
|
+
}, linkText)), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, {
|
|
86
|
+
type: formatTypeToLowerCase
|
|
87
|
+
}, /*#__PURE__*/React.createElement(_Button.IconButton, {
|
|
88
|
+
variant: "secondary",
|
|
89
|
+
shape: "circular",
|
|
90
|
+
useTransparentBackground: true,
|
|
91
|
+
action: function action() {
|
|
79
92
|
return onClose();
|
|
80
93
|
}
|
|
81
94
|
}, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
|
|
82
95
|
color: _styles.COLORS.warning_500,
|
|
83
96
|
size: "24px"
|
|
84
|
-
}))));
|
|
97
|
+
})))));
|
|
85
98
|
|
|
86
99
|
case 'critical':
|
|
87
100
|
return /*#__PURE__*/React.createElement(BannerContainer, {
|
|
@@ -89,24 +102,30 @@ var Banner = function Banner(_ref) {
|
|
|
89
102
|
type: _styles.COLORS.critical_100,
|
|
90
103
|
link: _styles.COLORS.critical_700,
|
|
91
104
|
hover: _styles.COLORS.critical_20,
|
|
92
|
-
bottom: bottom
|
|
105
|
+
bottom: bottom,
|
|
106
|
+
className: size
|
|
93
107
|
}, /*#__PURE__*/React.createElement(BannerCenter, {
|
|
94
|
-
color: _styles.COLORS.critical_700
|
|
95
|
-
|
|
108
|
+
color: _styles.COLORS.critical_700,
|
|
109
|
+
className: size
|
|
110
|
+
}, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(_SystemIcons.Attention, {
|
|
96
111
|
color: _styles.COLORS.critical_700,
|
|
97
112
|
size: "24px"
|
|
98
|
-
}), children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
|
|
113
|
+
}), /*#__PURE__*/React.createElement(BannerContentWrapper, null, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
|
|
99
114
|
href: link,
|
|
100
115
|
target: "_blank"
|
|
101
|
-
}, linkText), onClose && /*#__PURE__*/React.createElement(
|
|
102
|
-
|
|
103
|
-
|
|
116
|
+
}, linkText)), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, {
|
|
117
|
+
type: formatTypeToLowerCase
|
|
118
|
+
}, /*#__PURE__*/React.createElement(_Button.IconButton, {
|
|
119
|
+
variant: "secondary",
|
|
120
|
+
shape: "circular",
|
|
121
|
+
useTransparentBackground: true,
|
|
122
|
+
action: function action() {
|
|
104
123
|
return onClose();
|
|
105
124
|
}
|
|
106
125
|
}, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
|
|
107
126
|
color: _styles.COLORS.critical_500,
|
|
108
127
|
size: "24px"
|
|
109
|
-
}))));
|
|
128
|
+
})))));
|
|
110
129
|
|
|
111
130
|
case 'positive':
|
|
112
131
|
return /*#__PURE__*/React.createElement(BannerContainer, {
|
|
@@ -114,24 +133,30 @@ var Banner = function Banner(_ref) {
|
|
|
114
133
|
type: _styles.COLORS.correct_100,
|
|
115
134
|
link: _styles.COLORS.correct_700,
|
|
116
135
|
hover: _styles.COLORS.correct_20,
|
|
117
|
-
bottom: bottom
|
|
136
|
+
bottom: bottom,
|
|
137
|
+
className: size
|
|
118
138
|
}, /*#__PURE__*/React.createElement(BannerCenter, {
|
|
119
|
-
color: _styles.COLORS.correct_700
|
|
120
|
-
|
|
139
|
+
color: _styles.COLORS.correct_700,
|
|
140
|
+
className: size
|
|
141
|
+
}, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(_SystemIcons.ThumbsUp, {
|
|
121
142
|
color: _styles.COLORS.correct_700,
|
|
122
143
|
size: "24px"
|
|
123
|
-
}), children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
|
|
144
|
+
}), /*#__PURE__*/React.createElement(BannerContentWrapper, null, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
|
|
124
145
|
href: link,
|
|
125
146
|
target: "_blank"
|
|
126
|
-
}, linkText), onClose && /*#__PURE__*/React.createElement(
|
|
127
|
-
|
|
128
|
-
|
|
147
|
+
}, linkText)), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, {
|
|
148
|
+
type: formatTypeToLowerCase
|
|
149
|
+
}, /*#__PURE__*/React.createElement(_Button.IconButton, {
|
|
150
|
+
variant: "secondary",
|
|
151
|
+
shape: "circular",
|
|
152
|
+
useTransparentBackground: true,
|
|
153
|
+
action: function action() {
|
|
129
154
|
return onClose();
|
|
130
155
|
}
|
|
131
156
|
}, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
|
|
132
157
|
color: _styles.COLORS.correct_500,
|
|
133
158
|
size: "24px"
|
|
134
|
-
}))));
|
|
159
|
+
})))));
|
|
135
160
|
|
|
136
161
|
default:
|
|
137
162
|
return /*#__PURE__*/React.createElement(BannerContainer, {
|
|
@@ -139,28 +164,35 @@ var Banner = function Banner(_ref) {
|
|
|
139
164
|
type: _styles.COLORS.primary_100,
|
|
140
165
|
link: _styles.COLORS.primary_700,
|
|
141
166
|
hover: _styles.COLORS.primary_20,
|
|
142
|
-
bottom: bottom
|
|
167
|
+
bottom: bottom,
|
|
168
|
+
className: size
|
|
143
169
|
}, /*#__PURE__*/React.createElement(BannerCenter, {
|
|
144
|
-
color: _styles.COLORS.primary_700
|
|
145
|
-
|
|
170
|
+
color: _styles.COLORS.primary_700,
|
|
171
|
+
className: size
|
|
172
|
+
}, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(_SystemIcons.Tip, {
|
|
146
173
|
color: _styles.COLORS.primary_700,
|
|
147
174
|
size: "24px"
|
|
148
|
-
}), children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
|
|
175
|
+
}), /*#__PURE__*/React.createElement(BannerContentWrapper, null, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement("a", {
|
|
149
176
|
href: link,
|
|
150
177
|
target: "_blank"
|
|
151
|
-
}, linkText), onClose && /*#__PURE__*/React.createElement(
|
|
152
|
-
|
|
153
|
-
|
|
178
|
+
}, linkText)), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, {
|
|
179
|
+
type: "neutral"
|
|
180
|
+
}, /*#__PURE__*/React.createElement(_Button.IconButton, {
|
|
181
|
+
variant: "secondary",
|
|
182
|
+
shape: "circular",
|
|
183
|
+
useTransparentBackground: true,
|
|
184
|
+
action: function action() {
|
|
154
185
|
return onClose();
|
|
155
186
|
}
|
|
156
187
|
}, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
|
|
157
188
|
color: _styles.COLORS.primary_500,
|
|
158
189
|
size: "24px"
|
|
159
|
-
}))));
|
|
190
|
+
})))));
|
|
160
191
|
}
|
|
161
192
|
};
|
|
162
193
|
|
|
163
194
|
Banner.propTypes = {
|
|
195
|
+
size: _propTypes.default.oneOf(['small', 'medium', 'large']),
|
|
164
196
|
type: _propTypes.default.string,
|
|
165
197
|
link: _propTypes.default.string,
|
|
166
198
|
linkText: _propTypes.default.string,
|
|
@@ -168,7 +200,8 @@ Banner.propTypes = {
|
|
|
168
200
|
bottom: _propTypes.default.bool,
|
|
169
201
|
testId: _propTypes.default.string,
|
|
170
202
|
icon: _propTypes.default.node,
|
|
171
|
-
onClose: _propTypes.default.func
|
|
203
|
+
onClose: _propTypes.default.func,
|
|
204
|
+
noIcon: _propTypes.default.bool
|
|
172
205
|
};
|
|
173
206
|
var _default = Banner;
|
|
174
207
|
exports.default = _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","type","COLORS","correct_100","black","bottom","hover","primary_20","link","BannerCenter","color","BREAKPOINTS","MEDIUM","LARGE","XLARGE","Banner","children","testId","linkText","onClose","icon","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_20","warning_500","critical_100","critical_700","critical_20","critical_500","correct_700","correct_20","correct_500","primary_100","primary_700","primary_500"],"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","type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","link","BannerCenter","color","ButtonWrapper","BannerContentWrapper","Banner","size","children","testId","linkText","onClose","icon","noIcon","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_20","warning_500","critical_100","critical_700","critical_20","critical_500","correct_700","correct_20","correct_500","primary_100","primary_700","primary_20","primary_500","hover"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA;AACA;AACA;AACA,IAAMA,eAAe,GAAGC,0BAAOC,GAAV,muBACL,UAACC,KAAD;AAAA,SAAyBA,KAAK,CAACC,IAAN,GAAaD,KAAK,CAACC,IAAnB,GAA0BC,eAAOC,WAA1D;AAAA,CADK,EAIVD,eAAOE,KAJG,EAKL,UAACJ,KAAD;AAAA,SAAyBA,KAAK,CAACK,MAAN,GAAe,MAAf,GAAwB,GAAjD;AAAA,CALK,EAUfC,oBAAYC,MAVG,EAafD,oBAAYE,KAbG,EA4BR,UAACR,KAAD;AAAA,SAAwBA,KAAK,CAACS,IAA9B;AAAA,CA5BQ,CAArB;;AA4CA,IAAMC,YAAY,GAAGZ,0BAAOC,GAAV,qcACP,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACW,KAAjB;AAAA,CADO,EAMdL,oBAAYC,MANE,EASdD,oBAAYE,KATE,CAAlB;;AA4BA,IAAMI,aAAa,GAAGd,0BAAOC,GAAV,0GAEf,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,IAAN,GAAa,6BAAeD,KAAK,CAACC,IAArB,CAAb,GAA0C,IAAtD;AAAA,CAFe,CAAnB;;AAKA,IAAMY,oBAAoB,GAAGf,0BAAOC,GAAV,2LAA1B;;AAsBA,IAAMe,MAA4C,GAAG,SAA/CA,MAA+C,OAAqF;AAAA,MAAlFC,IAAkF,QAAlFA,IAAkF;AAAA,MAA5Ed,IAA4E,QAA5EA,IAA4E;AAAA,MAAtEe,QAAsE,QAAtEA,QAAsE;AAAA,MAA5DX,MAA4D,QAA5DA,MAA4D;AAAA,MAApDY,MAAoD,QAApDA,MAAoD;AAAA,MAA5CC,QAA4C,QAA5CA,QAA4C;AAAA,MAAlCT,IAAkC,QAAlCA,IAAkC;AAAA,MAA5BU,OAA4B,QAA5BA,OAA4B;AAAA,MAAnBC,IAAmB,QAAnBA,IAAmB;AAAA,MAAbC,MAAa,QAAbA,MAAa;AACxI,MAAMC,qBAAqB,GAAGrB,IAAH,aAAGA,IAAH,uBAAGA,IAAI,CAAEsB,WAAN,EAA9B;;AACA,UAAQD,qBAAR;AACE,SAAK,SAAL;AACE,0BACE,oBAAC,eAAD;AAAiB,uBAAaL,MAA9B;AAAsC,QAAA,IAAI,EAAEf,eAAOsB,WAAnD;AAAgE,QAAA,IAAI,EAAEtB,eAAOuB,WAA7E;AAA0F,QAAA,KAAK,EAAEvB,eAAOwB,UAAxG;AAAoH,QAAA,MAAM,EAAErB;AAA5H,sBACE,oBAAC,YAAD;AAAc,QAAA,KAAK,EAAEH,eAAOuB,WAA5B;AAAyC,QAAA,SAAS,EAAEV;AAApD,SACGK,IAAI,GAAGA,IAAH,GAAUC,MAAM,GAAG,IAAH,gBAAU,oBAAC,iBAAD;AAAM,QAAA,KAAK,EAAEnB,eAAOuB,WAApB;AAAiC,QAAA,IAAI,EAAC;AAAtC,QADjC,eAEE,oBAAC,oBAAD,QACGT,QADH,cAEGP,IAAI,IAAIS,QAAR,iBACC;AAAG,QAAA,IAAI,EAAET,IAAT;AAAe,QAAA,MAAM,EAAC;AAAtB,SACGS,QADH,CAHJ,CAFF,EAUGC,OAAO,iBACN,oBAAC,aAAD;AAAe,QAAA,IAAI,EAAEG;AAArB,sBACE,oBAAC,kBAAD;AAAY,QAAA,OAAO,EAAC,WAApB;AAAgC,QAAA,KAAK,EAAC,UAAtC;AAAiD,QAAA,wBAAwB,MAAzE;AAA0E,QAAA,MAAM,EAAE;AAAA,iBAAMH,OAAO,EAAb;AAAA;AAAlF,sBACE,oBAAC,kBAAD;AAAO,QAAA,KAAK,EAAEjB,eAAOyB,WAArB;AAAkC,QAAA,IAAI,EAAC;AAAvC,QADF,CADF,CAXJ,CADF,CADF;;AAsBF,SAAK,UAAL;AACE,0BACE,oBAAC,eAAD;AAAiB,uBAAaV,MAA9B;AAAsC,QAAA,IAAI,EAAEf,eAAO0B,YAAnD;AAAiE,QAAA,IAAI,EAAE1B,eAAO2B,YAA9E;AAA4F,QAAA,KAAK,EAAE3B,eAAO4B,WAA1G;AAAuH,QAAA,MAAM,EAAEzB,MAA/H;AAAuI,QAAA,SAAS,EAAEU;AAAlJ,sBACE,oBAAC,YAAD;AAAc,QAAA,KAAK,EAAEb,eAAO2B,YAA5B;AAA0C,QAAA,SAAS,EAAEd;AAArD,SACGK,IAAI,GAAGA,IAAH,GAAUC,MAAM,GAAG,IAAH,gBAAU,oBAAC,sBAAD;AAAW,QAAA,KAAK,EAAEnB,eAAO2B,YAAzB;AAAuC,QAAA,IAAI,EAAC;AAA5C,QADjC,eAEE,oBAAC,oBAAD,QACGb,QADH,cAEGP,IAAI,IAAIS,QAAR,iBACC;AAAG,QAAA,IAAI,EAAET,IAAT;AAAe,QAAA,MAAM,EAAC;AAAtB,SACGS,QADH,CAHJ,CAFF,EAUGC,OAAO,iBACN,oBAAC,aAAD;AAAe,QAAA,IAAI,EAAEG;AAArB,sBACE,oBAAC,kBAAD;AAAY,QAAA,OAAO,EAAC,WAApB;AAAgC,QAAA,KAAK,EAAC,UAAtC;AAAiD,QAAA,wBAAwB,MAAzE;AAA0E,QAAA,MAAM,EAAE;AAAA,iBAAMH,OAAO,EAAb;AAAA;AAAlF,sBACE,oBAAC,kBAAD;AAAO,QAAA,KAAK,EAAEjB,eAAO6B,YAArB;AAAmC,QAAA,IAAI,EAAC;AAAxC,QADF,CADF,CAXJ,CADF,CADF;;AAsBF,SAAK,UAAL;AACE,0BACE,oBAAC,eAAD;AAAiB,uBAAad,MAA9B;AAAsC,QAAA,IAAI,EAAEf,eAAOC,WAAnD;AAAgE,QAAA,IAAI,EAAED,eAAO8B,WAA7E;AAA0F,QAAA,KAAK,EAAE9B,eAAO+B,UAAxG;AAAoH,QAAA,MAAM,EAAE5B,MAA5H;AAAoI,QAAA,SAAS,EAAEU;AAA/I,sBACE,oBAAC,YAAD;AAAc,QAAA,KAAK,EAAEb,eAAO8B,WAA5B;AAAyC,QAAA,SAAS,EAAEjB;AAApD,SACGK,IAAI,GAAGA,IAAH,GAAUC,MAAM,GAAG,IAAH,gBAAU,oBAAC,qBAAD;AAAU,QAAA,KAAK,EAAEnB,eAAO8B,WAAxB;AAAqC,QAAA,IAAI,EAAC;AAA1C,QADjC,eAEE,oBAAC,oBAAD,QACGhB,QADH,cAEGP,IAAI,IAAIS,QAAR,iBACC;AAAG,QAAA,IAAI,EAAET,IAAT;AAAe,QAAA,MAAM,EAAC;AAAtB,SACGS,QADH,CAHJ,CAFF,EAUGC,OAAO,iBACN,oBAAC,aAAD;AAAe,QAAA,IAAI,EAAEG;AAArB,sBACE,oBAAC,kBAAD;AAAY,QAAA,OAAO,EAAC,WAApB;AAAgC,QAAA,KAAK,EAAC,UAAtC;AAAiD,QAAA,wBAAwB,MAAzE;AAA0E,QAAA,MAAM,EAAE;AAAA,iBAAMH,OAAO,EAAb;AAAA;AAAlF,sBACE,oBAAC,kBAAD;AAAO,QAAA,KAAK,EAAEjB,eAAOgC,WAArB;AAAkC,QAAA,IAAI,EAAC;AAAvC,QADF,CADF,CAXJ,CADF,CADF;;AAsBF;AACE,0BACE,oBAAC,eAAD;AAAiB,uBAAajB,MAA9B;AAAsC,QAAA,IAAI,EAAEf,eAAOiC,WAAnD;AAAgE,QAAA,IAAI,EAAEjC,eAAOkC,WAA7E;AAA0F,QAAA,KAAK,EAAElC,eAAOmC,UAAxG;AAAoH,QAAA,MAAM,EAAEhC,MAA5H;AAAoI,QAAA,SAAS,EAAEU;AAA/I,sBACE,oBAAC,YAAD;AAAc,QAAA,KAAK,EAAEb,eAAOkC,WAA5B;AAAyC,QAAA,SAAS,EAAErB;AAApD,SACGK,IAAI,GAAGA,IAAH,GAAUC,MAAM,GAAG,IAAH,gBAAU,oBAAC,gBAAD;AAAK,QAAA,KAAK,EAAEnB,eAAOkC,WAAnB;AAAgC,QAAA,IAAI,EAAC;AAArC,QADjC,eAEE,oBAAC,oBAAD,QACGpB,QADH,cAEGP,IAAI,IAAIS,QAAR,iBACC;AAAG,QAAA,IAAI,EAAET,IAAT;AAAe,QAAA,MAAM,EAAC;AAAtB,SACGS,QADH,CAHJ,CAFF,EAUGC,OAAO,iBACN,oBAAC,aAAD;AAAe,QAAA,IAAI,EAAC;AAApB,sBACE,oBAAC,kBAAD;AAAY,QAAA,OAAO,EAAC,WAApB;AAAgC,QAAA,KAAK,EAAC,UAAtC;AAAiD,QAAA,wBAAwB,MAAzE;AAA0E,QAAA,MAAM,EAAE;AAAA,iBAAMA,OAAO,EAAb;AAAA;AAAlF,sBACE,oBAAC,kBAAD;AAAO,QAAA,KAAK,EAAEjB,eAAOoC,WAArB;AAAkC,QAAA,IAAI,EAAC;AAAvC,QADF,CADF,CAXJ,CADF,CADF;AAvEJ;AA8FD,CAhGD;;;AAZEvB,EAAAA,I,4BAAO,O,EAAU,Q,EAAW,O;AAC5Bd,EAAAA,I;AACAQ,EAAAA,I;AACAS,EAAAA,Q;AACAqB,EAAAA,K;AACAlC,EAAAA,M;AACAY,EAAAA,M;AACAG,EAAAA,I;AACAD,EAAAA,O;AACAE,EAAAA,M;;eAqGaP,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 @@
|
|
|
1
|
+
export declare const getButtonStyle: (type: string) => import("styled-components").FlattenSimpleInterpolation;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getButtonStyle = void 0;
|
|
7
|
+
|
|
8
|
+
var _styledComponents = require("styled-components");
|
|
9
|
+
|
|
10
|
+
var _styles = require("../styles");
|
|
11
|
+
|
|
12
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
13
|
+
|
|
14
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
15
|
+
|
|
16
|
+
var getButtonStyle = function getButtonStyle(type) {
|
|
17
|
+
switch (type) {
|
|
18
|
+
case 'warning':
|
|
19
|
+
return (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n div {\n background-color: transparent;\n }\n div svg path,\n div svg {\n fill: ", ";\n }\n &:hover:not(:disabled) {\n div {\n background-color: ", ";\n }\n div svg path,\n div svg {\n fill: ", ";\n }\n }\n &:active:not(:disabled) {\n div {\n background: ", ";\n }\n div svg path,\n div svg {\n fill: ", ";\n }\n }\n "])), _styles.COLORS.warning_500, _styles.COLORS.warning_200, _styles.COLORS.warning_700, _styles.COLORS.warning_300, _styles.COLORS.warning_800);
|
|
20
|
+
|
|
21
|
+
case 'critical':
|
|
22
|
+
return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n div {\n background-color: transparent;\n }\n div svg path,\n div svg {\n fill: ", ";\n }\n &:hover:not(:disabled) {\n div {\n background-color: ", ";\n }\n div svg path,\n div svg {\n fill: ", ";\n }\n }\n &:active:not(:disabled) {\n div {\n background: ", ";\n }\n div svg path,\n div svg {\n fill: ", ";\n }\n }\n "])), _styles.COLORS.critical_600, _styles.COLORS.critical_200, _styles.COLORS.critical_700, _styles.COLORS.critical_300, _styles.COLORS.critical_800);
|
|
23
|
+
|
|
24
|
+
case 'positive':
|
|
25
|
+
return (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n div {\n background-color: transparent;\n }\n div svg path,\n div svg {\n fill: ", ";\n }\n &:hover:not(:disabled) {\n div {\n background-color: ", ";\n }\n div svg path,\n div svg {\n fill: ", ";\n }\n }\n &:active:not(:disabled) {\n div {\n background: ", ";\n }\n div svg path,\n div svg {\n fill: ", ";\n }\n }\n "])), _styles.COLORS.correct_500, _styles.COLORS.correct_200, _styles.COLORS.correct_700, _styles.COLORS.correct_300, _styles.COLORS.correct_800);
|
|
26
|
+
|
|
27
|
+
default:
|
|
28
|
+
return (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n div {\n background-color: transparent;\n }\n div svg path,\n div svg {\n fill: ", ";\n }\n &:hover:not(:disabled) {\n div {\n background-color: ", ";\n }\n div svg path,\n div svg {\n fill: ", ";\n }\n }\n &:active:not(:disabled) {\n div {\n background: ", ";\n }\n div svg path,\n div svg {\n fill: ", ";\n }\n }\n "])), _styles.COLORS.primary_500, _styles.COLORS.primary_200, _styles.COLORS.primary_700, _styles.COLORS.primary_300, _styles.COLORS.primary_800);
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
exports.getButtonStyle = getButtonStyle;
|
|
33
|
+
//# sourceMappingURL=styles.js.map
|