@laerdal/life-react-components 1.10.3-dev.36.full → 1.10.3-dev.37
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.
|
@@ -33,19 +33,19 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
33
33
|
|
|
34
34
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
35
35
|
|
|
36
|
-
var StyledLink = (0, _styledComponents.default)(_reactRouterDom.Link)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n text-align: center;\n text-decoration: none;\n display: flex;\n align-items: center;\n &:focus-within {\n outline: none;\n }\n svg {\n
|
|
36
|
+
var StyledLink = (0, _styledComponents.default)(_reactRouterDom.Link)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n text-align: center;\n text-decoration: none;\n display: flex;\n align-items: center;\n &:focus-within {\n outline: none;\n }\n svg {\n width: 66px;\n height: 36px;\n color: ", ";\n ", " {\n width: 88px;\n height: 48px;\n }\n }\n"])), function (props) {
|
|
37
37
|
return props.$color;
|
|
38
|
-
}, _styles.BREAKPOINTS.
|
|
38
|
+
}, _styles.BREAKPOINTS.MEDIUM);
|
|
39
39
|
|
|
40
40
|
var LogoContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n height: 40px;\n margin-right: 16px;\n box-sizing: border-box;\n padding: 24px 0;\n\n ", " {\n margin-top: 8px;\n margin-bottom: 7px;\n }\n\n &:focus-within {\n ", "\n }\n\n &.inverted:focus-within {\n ", "\n }\n"])), _styles.BREAKPOINTS.LARGE, _styles.focusStyles, _styles.invertedFocusStyles);
|
|
41
41
|
|
|
42
|
-
var Name = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 8px;\n padding-left: 8px;\n border-left: 1px solid ", ";\n letter-spacing: -0.02em;\n max-width: 200px;\n white-space: nowrap;\n overflow: hidden;\n\n ", "\n\n font-weight: 300 !important;\n line-height: 24px !important;\n\n ", " {\n margin-left: 12px;\n padding-left: 12px;\n
|
|
42
|
+
var Name = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 8px;\n padding-left: 8px;\n border-left: 1px solid ", ";\n letter-spacing: -0.02em;\n max-width: 200px;\n white-space: nowrap;\n overflow: hidden;\n\n ", "\n\n font-weight: 300 !important;\n line-height: 24px !important;\n\n ", " {\n ", ";\n }\n\n ", " {\n margin-left: 12px;\n padding-left: 12px;\n }\n"])), function (props) {
|
|
43
43
|
return props.$color || _styles.COLORS.black;
|
|
44
44
|
}, function (props) {
|
|
45
45
|
return props.noSizeChangeOnMobile ? (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black) : (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black);
|
|
46
|
-
}, _styles.BREAKPOINTS.
|
|
46
|
+
}, _styles.BREAKPOINTS.MEDIUM, function (props) {
|
|
47
47
|
return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black);
|
|
48
|
-
});
|
|
48
|
+
}, _styles.BREAKPOINTS.LARGE);
|
|
49
49
|
|
|
50
50
|
var BetaTag = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n padding: 4px 8px;\n margin-left: 8px;\n margin-top: 2px;\n border-left: none;\n border-radius: 2px;\n\n ", "\n"])), function (props) {
|
|
51
51
|
return props.backgroundColor || _styles.COLORS.accent2_500;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"names":["StyledLink","Link","props","$color","BREAKPOINTS","
|
|
1
|
+
{"version":3,"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"names":["StyledLink","Link","props","$color","BREAKPOINTS","MEDIUM","LogoContainer","styled","div","LARGE","focusStyles","invertedFocusStyles","Name","span","COLORS","black","noSizeChangeOnMobile","ComponentTextStyle","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","inverted","defaultOnMouseDownHandler"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;AAEA,IAAMA,UAAU,GAAG,+BAAOC,oBAAP,CAAH,+VAWH,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,MAAjB;AAAA,CAXG,EAYVC,oBAAYC,MAZF,CAAhB;;AAmBA,IAAMC,aAAa,GAAGC,0BAAOC,GAAV,4WAQfJ,oBAAYK,KARG,EAcbC,mBAda,EAkBbC,2BAlBa,CAAnB;;AAsBA,IAAMC,IAAI,GAAGL,0BAAOM,IAAV,4aAGiB,UAACX,KAAD;AAAA,SAAWA,KAAK,CAACC,MAAN,IAAgBW,eAAOC,KAAlC;AAAA,CAHjB,EASN,UAACb,KAAD;AAAA,SACAA,KAAK,CAACc,oBAAN,GACI,+BAAkBC,2BAAmBC,OAArC,EAA8ChB,KAAK,CAACC,MAAN,IAAgBW,eAAOC,KAArE,CADJ,GAEI,gCAAmBE,2BAAmBC,OAAtC,EAA+ChB,KAAK,CAACC,MAAN,IAAgBW,eAAOC,KAAtE,CAHJ;AAAA,CATM,EAiBNX,oBAAYC,MAjBN,EAkBJ,UAACH,KAAD;AAAA,SAAW,+BAAkBe,2BAAmBC,OAArC,EAA8ChB,KAAK,CAACC,MAAN,IAAgBW,eAAOC,KAArE,CAAX;AAAA,CAlBI,EAqBNX,oBAAYK,KArBN,CAAV;;AA2BA,IAAMU,OAAO,GAAGZ,0BAAOM,IAAV,wOACS,UAACX,KAAD;AAAA,SAAWA,KAAK,CAACkB,eAAN,IAAyBN,eAAOO,WAA3C;AAAA,CADT,EAQT,UAACnB,KAAD;AAAA,SAAW,gCAAmBe,2BAAmBK,aAAtC,EAAqDpB,KAAK,CAACC,MAAN,IAAgBW,eAAOS,KAA5E,CAAX;AAAA,CARS,CAAb;;AAuBA,IAAMC,IAAI,GAAG,SAAPA,IAAO,OAA+J;AAAA,MAA5JC,IAA4J,QAA5JA,IAA4J;AAAA,MAAtJC,WAAsJ,QAAtJA,WAAsJ;AAAA,MAAzIC,QAAyI,QAAzIA,OAAyI;AAAA,MAAhIC,EAAgI,QAAhIA,EAAgI;AAAA,MAA5HC,KAA4H,QAA5HA,KAA4H;AAAA,MAArHb,oBAAqH,QAArHA,oBAAqH;AAAA,MAA/Fc,sBAA+F,QAA/FA,sBAA+F;AAAA,MAAvEC,YAAuE,QAAvEA,YAAuE;AAAA,MAAzDC,QAAyD,QAAzDA,QAAyD;AAC1K,sBACE,qBAAC,aAAD;AAAe,IAAA,SAAS,EAAEA,QAAQ,GAAG,UAAH,GAAgB,EAAlD;AAAA,2BACE,sBAAC,UAAD;AACE,MAAA,EAAE,EAAEJ,EAAE,IAAI,GADZ;AAEE,MAAA,WAAW,EAAEK,iCAFf;AAGE,MAAA,OAAO,EAAE,mBAAM;AACb,YAAIN,QAAJ,EAAa;AACXA,UAAAA,QAAO;AACR;AACF,OAPH;AAQE,MAAA,MAAM,EAAEE,KARV;AAAA,iBASGA,KAAK,KAAKf,eAAOS,KAAjB,gBAAyB,qBAAC,wBAAD,KAAzB,gBAAgD,qBAAC,mBAAD,KATnD,eAUE,qBAAC,IAAD;AAAM,QAAA,MAAM,EAAEM,KAAd;AAAqB,QAAA,oBAAoB,EAAEb,oBAAoB,IAAI,KAAnE;AAAA,kBACGS;AADH,QAVF,EAaGC,WAAW,iBACV,qBAAC,OAAD;AAAS,QAAA,eAAe,EAAEI,sBAA1B;AAAkD,QAAA,MAAM,EAAEC,YAA1D;AAAA;AAAA,QAdJ;AAAA;AADF,IADF;AAuBD,CAxBD;;;AAXEN,EAAAA,I;AACAC,EAAAA,W;AACAC,EAAAA,O;AACAC,EAAAA,E;AACAC,EAAAA,K;AACAb,EAAAA,oB;AACAc,EAAAA,sB;AACAC,EAAAA,Y;AACAC,EAAAA,Q;;eA6BaR,I","sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles} from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n text-align: center;\n text-decoration: none;\n display: flex;\n align-items: center;\n &:focus-within {\n outline: none;\n }\n svg {\n width: 66px;\n height: 36px;\n color: ${(props) => props.$color};\n ${BREAKPOINTS.MEDIUM} {\n width: 88px;\n height: 48px;\n }\n }\n`;\n\nconst LogoContainer = styled.div`\n display: flex;\n align-items: center;\n height: 40px;\n margin-right: 16px;\n box-sizing: border-box;\n padding: 24px 0;\n\n ${BREAKPOINTS.LARGE} {\n margin-top: 8px;\n margin-bottom: 7px;\n }\n\n &:focus-within {\n ${focusStyles}\n }\n\n &.inverted:focus-within {\n ${invertedFocusStyles}\n }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n margin-left: 8px;\n padding-left: 8px;\n border-left: 1px solid ${(props) => props.$color || COLORS.black};\n letter-spacing: -0.02em;\n max-width: 200px;\n white-space: nowrap;\n overflow: hidden;\n\n ${(props) =>\n props.noSizeChangeOnMobile\n ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n font-weight: 300 !important;\n line-height: 24px !important;\n\n ${BREAKPOINTS.MEDIUM} {\n ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)};\n }\n\n ${BREAKPOINTS.LARGE} {\n margin-left: 12px;\n padding-left: 12px;\n }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n padding: 4px 8px;\n margin-left: 8px;\n margin-top: 2px;\n border-left: none;\n border-radius: 2px;\n\n ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n name: string;\n showBetaTag?: boolean;\n onClick?: () => void;\n to?: string;\n color?: string;\n noSizeChangeOnMobile?: boolean;\n betaTagBackgroundColor?: string;\n betaTagColor?: string;\n inverted?: boolean;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor, inverted }: LogoProps): React.ReactElement<LogoProps> => {\n return (\n <LogoContainer className={inverted ? 'inverted' : ''}>\n <StyledLink\n to={to || '/'}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}\n $color={color}>\n {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n {name}\n </Name>\n {showBetaTag && (\n <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n BETA\n </BetaTag>\n )}\n </StyledLink>\n </LogoContainer>\n );\n};\n\nexport default Logo;\n"],"file":"Logo.cjs"}
|
|
@@ -12,17 +12,17 @@ import { ComponentMStyling, ComponentXSStyling } from '../styles';
|
|
|
12
12
|
import { defaultOnMouseDownHandler } from '../common';
|
|
13
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
14
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
15
|
-
var StyledLink = styled(Link)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n text-align: center;\n text-decoration: none;\n display: flex;\n align-items: center;\n &:focus-within {\n outline: none;\n }\n svg {\n
|
|
15
|
+
var StyledLink = styled(Link)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n text-align: center;\n text-decoration: none;\n display: flex;\n align-items: center;\n &:focus-within {\n outline: none;\n }\n svg {\n width: 66px;\n height: 36px;\n color: ", ";\n ", " {\n width: 88px;\n height: 48px;\n }\n }\n"])), function (props) {
|
|
16
16
|
return props.$color;
|
|
17
|
-
}, BREAKPOINTS.
|
|
17
|
+
}, BREAKPOINTS.MEDIUM);
|
|
18
18
|
var LogoContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n height: 40px;\n margin-right: 16px;\n box-sizing: border-box;\n padding: 24px 0;\n\n ", " {\n margin-top: 8px;\n margin-bottom: 7px;\n }\n\n &:focus-within {\n ", "\n }\n\n &.inverted:focus-within {\n ", "\n }\n"])), BREAKPOINTS.LARGE, focusStyles, invertedFocusStyles);
|
|
19
|
-
var Name = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin-left: 8px;\n padding-left: 8px;\n border-left: 1px solid ", ";\n letter-spacing: -0.02em;\n max-width: 200px;\n white-space: nowrap;\n overflow: hidden;\n\n ", "\n\n font-weight: 300 !important;\n line-height: 24px !important;\n\n ", " {\n margin-left: 12px;\n padding-left: 12px;\n
|
|
19
|
+
var Name = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin-left: 8px;\n padding-left: 8px;\n border-left: 1px solid ", ";\n letter-spacing: -0.02em;\n max-width: 200px;\n white-space: nowrap;\n overflow: hidden;\n\n ", "\n\n font-weight: 300 !important;\n line-height: 24px !important;\n\n ", " {\n ", ";\n }\n\n ", " {\n margin-left: 12px;\n padding-left: 12px;\n }\n"])), function (props) {
|
|
20
20
|
return props.$color || COLORS.black;
|
|
21
21
|
}, function (props) {
|
|
22
22
|
return props.noSizeChangeOnMobile ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black) : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black);
|
|
23
|
-
}, BREAKPOINTS.
|
|
23
|
+
}, BREAKPOINTS.MEDIUM, function (props) {
|
|
24
24
|
return ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black);
|
|
25
|
-
});
|
|
25
|
+
}, BREAKPOINTS.LARGE);
|
|
26
26
|
var BetaTag = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n background-color: ", ";\n padding: 4px 8px;\n margin-left: 8px;\n margin-top: 2px;\n border-left: none;\n border-radius: 2px;\n\n ", "\n"])), function (props) {
|
|
27
27
|
return props.backgroundColor || COLORS.accent2_500;
|
|
28
28
|
}, function (props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"names":["React","Link","styled","LaerdalLogo","LaerdalWhiteLogo","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","invertedFocusStyles","ComponentMStyling","ComponentXSStyling","defaultOnMouseDownHandler","StyledLink","props","$color","
|
|
1
|
+
{"version":3,"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"names":["React","Link","styled","LaerdalLogo","LaerdalWhiteLogo","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","invertedFocusStyles","ComponentMStyling","ComponentXSStyling","defaultOnMouseDownHandler","StyledLink","props","$color","MEDIUM","LogoContainer","div","LARGE","Name","span","black","noSizeChangeOnMobile","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","inverted"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles} from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n text-align: center;\n text-decoration: none;\n display: flex;\n align-items: center;\n &:focus-within {\n outline: none;\n }\n svg {\n width: 66px;\n height: 36px;\n color: ${(props) => props.$color};\n ${BREAKPOINTS.MEDIUM} {\n width: 88px;\n height: 48px;\n }\n }\n`;\n\nconst LogoContainer = styled.div`\n display: flex;\n align-items: center;\n height: 40px;\n margin-right: 16px;\n box-sizing: border-box;\n padding: 24px 0;\n\n ${BREAKPOINTS.LARGE} {\n margin-top: 8px;\n margin-bottom: 7px;\n }\n\n &:focus-within {\n ${focusStyles}\n }\n\n &.inverted:focus-within {\n ${invertedFocusStyles}\n }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n margin-left: 8px;\n padding-left: 8px;\n border-left: 1px solid ${(props) => props.$color || COLORS.black};\n letter-spacing: -0.02em;\n max-width: 200px;\n white-space: nowrap;\n overflow: hidden;\n\n ${(props) =>\n props.noSizeChangeOnMobile\n ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n font-weight: 300 !important;\n line-height: 24px !important;\n\n ${BREAKPOINTS.MEDIUM} {\n ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)};\n }\n\n ${BREAKPOINTS.LARGE} {\n margin-left: 12px;\n padding-left: 12px;\n }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n padding: 4px 8px;\n margin-left: 8px;\n margin-top: 2px;\n border-left: none;\n border-radius: 2px;\n\n ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n name: string;\n showBetaTag?: boolean;\n onClick?: () => void;\n to?: string;\n color?: string;\n noSizeChangeOnMobile?: boolean;\n betaTagBackgroundColor?: string;\n betaTagColor?: string;\n inverted?: boolean;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor, inverted }: LogoProps): React.ReactElement<LogoProps> => {\n return (\n <LogoContainer className={inverted ? 'inverted' : ''}>\n <StyledLink\n to={to || '/'}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}\n $color={color}>\n {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n {name}\n </Name>\n {showBetaTag && (\n <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n BETA\n </BetaTag>\n )}\n </StyledLink>\n </LogoContainer>\n );\n};\n\nexport default Logo;\n"],"file":"Logo.js"}
|