@laerdal/life-react-components 1.8.0-dev.36.full → 1.8.0-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.
|
@@ -59,7 +59,7 @@ var ProfileButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
59
59
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
|
|
60
60
|
src: portraitSrc
|
|
61
61
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(PortraitOverlay, {})]
|
|
62
|
-
}) || initials && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.
|
|
62
|
+
}) || initials && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ComponentS, {
|
|
63
63
|
className: "initials",
|
|
64
64
|
textStyle: _styles.ComponentTextStyle.Bold,
|
|
65
65
|
color: disabled ? _.COLORS.neutral_300 : _.COLORS.white,
|
|
@@ -82,7 +82,7 @@ var ProfileButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
82
82
|
hideOnLowWidth: hideOnLowWidth,
|
|
83
83
|
children: [renderIcon(), notificationVariant && /*#__PURE__*/(0, _jsxRuntime.jsx)(NotificationContainer, {
|
|
84
84
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationDot.NotificationDot, {
|
|
85
|
-
size: _.Size.
|
|
85
|
+
size: _.Size.Medium,
|
|
86
86
|
variant: notificationVariant
|
|
87
87
|
})
|
|
88
88
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/ProfileButton/ProfileButton.tsx"],"names":["PortraitOverlay","styled","div","COLORS","black","Container","StyledPrimaryIconButton","props","hideOnLowWidth","BREAKPOINTS","MEDIUM","IconButtonContent","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","React","forwardRef","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","renderIcon","ComponentTextStyle","Bold","white","Size","
|
|
1
|
+
{"version":3,"sources":["../../src/ProfileButton/ProfileButton.tsx"],"names":["PortraitOverlay","styled","div","COLORS","black","Container","StyledPrimaryIconButton","props","hideOnLowWidth","BREAKPOINTS","MEDIUM","IconButtonContent","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","React","forwardRef","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","renderIcon","ComponentTextStyle","Bold","white","Size","Medium"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAcA,IAAMA,eAAe,GAAGC,0BAAOC,GAAV,0OAICC,SAAOC,KAJR,CAArB;;AAWA,IAAMC,SAAS,GAAGJ,0BAAOC,GAAV,8vBAMXI,mCANW,EAOA,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,cAAN,GAAuB,MAAvB,GAAgC,QAArC;AAAA,CAPL,EASTC,oBAAYC,MATH,EAkBPC,6BAlBO,EAmBaR,SAAOS,WAnBpB,EAsBGT,SAAOU,WAtBV,EA6BPb,eA7BO,EAqCPA,eArCO,CAAf;;AA6CA,IAAMc,qBAAqB,GAAGb,0BAAOC,GAAV,8IAA3B;;AAMA,IAAMa,YAAY,GAAGd,0BAAOC,GAAV,qPAAlB;;AAaA,IAAMc,aAAa,gBAAGC,KAAK,CAACC,UAAN,CAAwD,gBAUIC,GAVJ,EAUY;AAAA,MATTC,WASS,QATTA,WASS;AAAA,MARTC,IAQS,QARTA,IAQS;AAAA,MAPTC,QAOS,QAPTA,QAOS;AAAA,MANTC,OAMS,QANTA,OAMS;AAAA,MALTf,cAKS,QALTA,cAKS;AAAA,MAJTgB,QAIS,QAJTA,QAIS;AAAA,MAHTC,mBAGS,QAHTA,mBAGS;AAAA,MAFTC,SAES,QAFTA,SAES;AAAA,MADTC,QACS,QADTA,QACS;;AACxF,MAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,WACGR,WAAW,iBACV,sBAAC,YAAD;AAAA,8BACE;AAAK,QAAA,GAAG,EAAEA;AAAV,QADF,eAEE,qBAAC,eAAD,KAFF;AAAA,MADF,IAMCE,QAAQ,iBACP,qBAAC,kBAAD;AAAY,MAAA,SAAS,EAAC,UAAtB;AAAiC,MAAA,SAAS,EAAEO,2BAAmBC,IAA/D;AACY,MAAA,KAAK,EAAEN,QAAQ,GAAGrB,SAAOU,WAAV,GAAwBV,SAAO4B,KAD1D;AAAA,gBAEGT;AAFH,MAPF,iBAWM;AAAA,gBAAGD;AAAH,MAZR;AAcD,GAfD;;AAiBA,sBACE,qBAAC,SAAD;AAAW,IAAA,cAAc,EAAEb,cAA3B;AAAA,2BACE,sBAAC,YAAD;AAAY,MAAA,GAAG,EAAEW,GAAjB;AACY,MAAA,SAAS,EAAEO,SADvB;AAEY,MAAA,QAAQ,EAAEF,QAFtB;AAGY,MAAA,MAAM,EAAED,OAHpB;AAIY,MAAA,OAAO,EAAC,SAJpB;AAKY,MAAA,QAAQ,EAAEI,QALtB;AAMY,MAAA,KAAK,EAAC,UANlB;AAOY,MAAA,cAAc,EAAEnB,cAP5B;AAAA,iBAQGoB,UAAU,EARb,EASGH,mBAAmB,iBAClB,qBAAC,qBAAD;AAAA,+BACE,qBAAC,gCAAD;AAAiB,UAAA,IAAI,EAAEO,OAAKC,MAA5B;AAAoC,UAAA,OAAO,EAAER;AAA7C;AADF,QAVJ;AAAA;AADF,IADF;AAmBD,CA/CqB,CAAtB;;AAtFEL,EAAAA,W;AACAC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,O;AACAC,EAAAA,Q;AACAC,EAAAA,mB,4BAAsB,U,EAAa,U;AACnCC,EAAAA,S;AACAlB,EAAAA,c;AACAmB,EAAAA,Q;;eA+HaX,a","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, IconButton, Size} from '..';\nimport {IconButtonContent, StyledPrimaryIconButton} from '../Button/Iconbutton';\nimport {NotificationDot} from '../NotificationDot';\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\n\ntype ProfileButtonProps = {\n portraitSrc?: string;\n icon?: React.ReactNode;\n initials?: string;\n onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n disabled?: boolean;\n notificationVariant?: 'positive' | 'critical';\n className?: string;\n hideOnLowWidth?: boolean;\n tabIndex?: number;\n};\n\nconst PortraitOverlay = styled.div`\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: ${COLORS.black};\n opacity: 0;\n position: absolute;\n top: 0px;\n left: 0px;\n`;\n\nconst Container = styled.div<{ hideOnLowWidth?: boolean }>`\n width: 48px;\n height: 48px;\n display: inline;\n user-select: none;\n \n ${StyledPrimaryIconButton} {\n display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\n\n ${BREAKPOINTS.MEDIUM} {\n display: inline;\n }\n\n :disabled {\n img {\n filter: grayscale(100%);\n }\n\n ${IconButtonContent} {\n background-color: ${COLORS.neutral_100};\n\n svg, svg path {\n fill: ${COLORS.neutral_300};\n }\n }\n }\n\n :hover:not(:disabled):not(:active),\n &.hover-state {\n ${PortraitOverlay} {\n opacity: 0.25;\n transition: opacity 100ms ease-in-out;\n }\n }\n\n :active:not(:disabled),\n &.active-state {\n ${PortraitOverlay} {\n opacity: 0.5;\n transition: opacity 0ms ease-in-out;\n }\n }\n }\n`;\n\nconst NotificationContainer = styled.div`\n position: absolute;\n left: 30px;\n bottom: 30px;\n`;\n\nconst ImageWrapper = styled.div`\n width: 36px;\n height: 36px;\n position: relative;\n\n img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n object-fit: cover;\n }\n`;\n\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\n portraitSrc,\n icon,\n initials,\n onClick,\n hideOnLowWidth,\n disabled,\n notificationVariant,\n className,\n tabIndex\n }, ref) => {\n const renderIcon = () => {\n return (\n (portraitSrc && (\n <ImageWrapper>\n <img src={portraitSrc}/>\n <PortraitOverlay/>\n </ImageWrapper>\n )) ||\n (initials && (\n <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\n color={disabled ? COLORS.neutral_300 : COLORS.white}>\n {initials}\n </ComponentS>\n )) || <>{icon}</>\n );\n };\n\n return (\n <Container hideOnLowWidth={hideOnLowWidth}>\n <IconButton ref={ref}\n className={className}\n disabled={disabled}\n action={onClick}\n variant=\"primary\"\n tabIndex={tabIndex}\n shape=\"circular\"\n hideOnLowWidth={hideOnLowWidth}>\n {renderIcon()}\n {notificationVariant && (\n <NotificationContainer>\n <NotificationDot size={Size.Medium} variant={notificationVariant}/>\n </NotificationContainer>\n )}\n </IconButton>\n </Container>\n );\n});\n\nexport default ProfileButton;\n"],"file":"ProfileButton.cjs"}
|
|
@@ -8,7 +8,7 @@ import styled from 'styled-components';
|
|
|
8
8
|
import { COLORS, IconButton, Size } from '..';
|
|
9
9
|
import { IconButtonContent, StyledPrimaryIconButton } from '../Button/Iconbutton';
|
|
10
10
|
import { NotificationDot } from '../NotificationDot';
|
|
11
|
-
import { BREAKPOINTS,
|
|
11
|
+
import { BREAKPOINTS, ComponentS, ComponentTextStyle } from '../styles';
|
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
13
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
14
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
@@ -34,7 +34,7 @@ var ProfileButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
34
34
|
children: [/*#__PURE__*/_jsx("img", {
|
|
35
35
|
src: portraitSrc
|
|
36
36
|
}), /*#__PURE__*/_jsx(PortraitOverlay, {})]
|
|
37
|
-
}) || initials && /*#__PURE__*/_jsx(
|
|
37
|
+
}) || initials && /*#__PURE__*/_jsx(ComponentS, {
|
|
38
38
|
className: "initials",
|
|
39
39
|
textStyle: ComponentTextStyle.Bold,
|
|
40
40
|
color: disabled ? COLORS.neutral_300 : COLORS.white,
|
|
@@ -57,7 +57,7 @@ var ProfileButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
57
57
|
hideOnLowWidth: hideOnLowWidth,
|
|
58
58
|
children: [renderIcon(), notificationVariant && /*#__PURE__*/_jsx(NotificationContainer, {
|
|
59
59
|
children: /*#__PURE__*/_jsx(NotificationDot, {
|
|
60
|
-
size: Size.
|
|
60
|
+
size: Size.Medium,
|
|
61
61
|
variant: notificationVariant
|
|
62
62
|
})
|
|
63
63
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/ProfileButton/ProfileButton.tsx"],"names":["React","styled","COLORS","IconButton","Size","IconButtonContent","StyledPrimaryIconButton","NotificationDot","BREAKPOINTS","
|
|
1
|
+
{"version":3,"sources":["../../src/ProfileButton/ProfileButton.tsx"],"names":["React","styled","COLORS","IconButton","Size","IconButtonContent","StyledPrimaryIconButton","NotificationDot","BREAKPOINTS","ComponentS","ComponentTextStyle","PortraitOverlay","div","black","Container","props","hideOnLowWidth","MEDIUM","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","forwardRef","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","renderIcon","Bold","white","Medium"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,UAAhB,EAA4BC,IAA5B,QAAuC,IAAvC;AACA,SAAQC,iBAAR,EAA2BC,uBAA3B,QAAyD,sBAAzD;AACA,SAAQC,eAAR,QAA8B,oBAA9B;AACA,SAAQC,WAAR,EAAqBC,UAArB,EAAiCC,kBAAjC,QAA0D,WAA1D;;;;AAcA,IAAMC,eAAe,GAAGV,MAAM,CAACW,GAAV,4NAICV,MAAM,CAACW,KAJR,CAArB;AAWA,IAAMC,SAAS,GAAGb,MAAM,CAACW,GAAV,gvBAMXN,uBANW,EAOA,UAAAS,KAAK;AAAA,SAAKA,KAAK,CAACC,cAAN,GAAuB,MAAvB,GAAgC,QAArC;AAAA,CAPL,EASTR,WAAW,CAACS,MATH,EAkBPZ,iBAlBO,EAmBaH,MAAM,CAACgB,WAnBpB,EAsBGhB,MAAM,CAACiB,WAtBV,EA6BPR,eA7BO,EAqCPA,eArCO,CAAf;AA6CA,IAAMS,qBAAqB,GAAGnB,MAAM,CAACW,GAAV,gIAA3B;AAMA,IAAMS,YAAY,GAAGpB,MAAM,CAACW,GAAV,uOAAlB;AAaA,IAAMU,aAAa,gBAAGtB,KAAK,CAACuB,UAAN,CAAwD,gBAUIC,GAVJ,EAUY;AAAA,MATTC,WASS,QATTA,WASS;AAAA,MARTC,IAQS,QARTA,IAQS;AAAA,MAPTC,QAOS,QAPTA,QAOS;AAAA,MANTC,OAMS,QANTA,OAMS;AAAA,MALTZ,cAKS,QALTA,cAKS;AAAA,MAJTa,QAIS,QAJTA,QAIS;AAAA,MAHTC,mBAGS,QAHTA,mBAGS;AAAA,MAFTC,SAES,QAFTA,SAES;AAAA,MADTC,QACS,QADTA,QACS;;AACxF,MAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,WACGR,WAAW,iBACV,MAAC,YAAD;AAAA,8BACE;AAAK,QAAA,GAAG,EAAEA;AAAV,QADF,eAEE,KAAC,eAAD,KAFF;AAAA,MADF,IAMCE,QAAQ,iBACP,KAAC,UAAD;AAAY,MAAA,SAAS,EAAC,UAAtB;AAAiC,MAAA,SAAS,EAAEjB,kBAAkB,CAACwB,IAA/D;AACY,MAAA,KAAK,EAAEL,QAAQ,GAAG3B,MAAM,CAACiB,WAAV,GAAwBjB,MAAM,CAACiC,KAD1D;AAAA,gBAEGR;AAFH,MAPF,iBAWM;AAAA,gBAAGD;AAAH,MAZR;AAcD,GAfD;;AAiBA,sBACE,KAAC,SAAD;AAAW,IAAA,cAAc,EAAEV,cAA3B;AAAA,2BACE,MAAC,UAAD;AAAY,MAAA,GAAG,EAAEQ,GAAjB;AACY,MAAA,SAAS,EAAEO,SADvB;AAEY,MAAA,QAAQ,EAAEF,QAFtB;AAGY,MAAA,MAAM,EAAED,OAHpB;AAIY,MAAA,OAAO,EAAC,SAJpB;AAKY,MAAA,QAAQ,EAAEI,QALtB;AAMY,MAAA,KAAK,EAAC,UANlB;AAOY,MAAA,cAAc,EAAEhB,cAP5B;AAAA,iBAQGiB,UAAU,EARb,EASGH,mBAAmB,iBAClB,KAAC,qBAAD;AAAA,+BACE,KAAC,eAAD;AAAiB,UAAA,IAAI,EAAE1B,IAAI,CAACgC,MAA5B;AAAoC,UAAA,OAAO,EAAEN;AAA7C;AADF,QAVJ;AAAA;AADF,IADF;AAmBD,CA/CqB,CAAtB;;AAtFEL,EAAAA,W;AACAC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,O;AACAC,EAAAA,Q;AACAC,EAAAA,mB,aAAsB,U,EAAa,U;AACnCC,EAAAA,S;AACAf,EAAAA,c;AACAgB,EAAAA,Q;;AA+HF,eAAeV,aAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, IconButton, Size} from '..';\nimport {IconButtonContent, StyledPrimaryIconButton} from '../Button/Iconbutton';\nimport {NotificationDot} from '../NotificationDot';\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\n\ntype ProfileButtonProps = {\n portraitSrc?: string;\n icon?: React.ReactNode;\n initials?: string;\n onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n disabled?: boolean;\n notificationVariant?: 'positive' | 'critical';\n className?: string;\n hideOnLowWidth?: boolean;\n tabIndex?: number;\n};\n\nconst PortraitOverlay = styled.div`\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: ${COLORS.black};\n opacity: 0;\n position: absolute;\n top: 0px;\n left: 0px;\n`;\n\nconst Container = styled.div<{ hideOnLowWidth?: boolean }>`\n width: 48px;\n height: 48px;\n display: inline;\n user-select: none;\n \n ${StyledPrimaryIconButton} {\n display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\n\n ${BREAKPOINTS.MEDIUM} {\n display: inline;\n }\n\n :disabled {\n img {\n filter: grayscale(100%);\n }\n\n ${IconButtonContent} {\n background-color: ${COLORS.neutral_100};\n\n svg, svg path {\n fill: ${COLORS.neutral_300};\n }\n }\n }\n\n :hover:not(:disabled):not(:active),\n &.hover-state {\n ${PortraitOverlay} {\n opacity: 0.25;\n transition: opacity 100ms ease-in-out;\n }\n }\n\n :active:not(:disabled),\n &.active-state {\n ${PortraitOverlay} {\n opacity: 0.5;\n transition: opacity 0ms ease-in-out;\n }\n }\n }\n`;\n\nconst NotificationContainer = styled.div`\n position: absolute;\n left: 30px;\n bottom: 30px;\n`;\n\nconst ImageWrapper = styled.div`\n width: 36px;\n height: 36px;\n position: relative;\n\n img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n object-fit: cover;\n }\n`;\n\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\n portraitSrc,\n icon,\n initials,\n onClick,\n hideOnLowWidth,\n disabled,\n notificationVariant,\n className,\n tabIndex\n }, ref) => {\n const renderIcon = () => {\n return (\n (portraitSrc && (\n <ImageWrapper>\n <img src={portraitSrc}/>\n <PortraitOverlay/>\n </ImageWrapper>\n )) ||\n (initials && (\n <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\n color={disabled ? COLORS.neutral_300 : COLORS.white}>\n {initials}\n </ComponentS>\n )) || <>{icon}</>\n );\n };\n\n return (\n <Container hideOnLowWidth={hideOnLowWidth}>\n <IconButton ref={ref}\n className={className}\n disabled={disabled}\n action={onClick}\n variant=\"primary\"\n tabIndex={tabIndex}\n shape=\"circular\"\n hideOnLowWidth={hideOnLowWidth}>\n {renderIcon()}\n {notificationVariant && (\n <NotificationContainer>\n <NotificationDot size={Size.Medium} variant={notificationVariant}/>\n </NotificationContainer>\n )}\n </IconButton>\n </Container>\n );\n});\n\nexport default ProfileButton;\n"],"file":"ProfileButton.js"}
|