@laerdal/life-react-components 1.9.9-dev.41 → 1.9.9-dev.42.full
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.
|
@@ -47,7 +47,7 @@ var CardTopLevelContainer = _styledComponents.default.div(_templateObject || (_t
|
|
|
47
47
|
|
|
48
48
|
exports.CardTopLevelContainer = CardTopLevelContainer;
|
|
49
49
|
|
|
50
|
-
var Wrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: max-content;\n width: max-content;\n\n &.interactive:focus {\n ", "\n }\n\n &.interactive:not(.disabled) {\n cursor: pointer;\n\n &.outline:not(.action-within) {\n ", " {\n &:hover {\n background-color: ", ";\n }\n\n &:active, &.active-state {\n background-color: ", ";\n }\n }\n }\n\n &.elevated:not(.action-within) {\n ", " {\n &:hover {\n box-shadow: ", ";\n }\n\n &:active, &.active-state {\n box-shadow: ", ";\n }\n }\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n }\n"])), _index.focusStyles, CardTopLevelContainer, _index.COLORS.primary_20, _index.COLORS.primary_100, CardTopLevelContainer, _index.BOXSHADOWS.BOXSHADOW_L3, _index.BOXSHADOWS.BOXSHADOW_L2);
|
|
50
|
+
var Wrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: max-content;\n width: max-content;\n\n &.interactive:focus {\n ", "\n }\n\n &.interactive:not(.disabled) {\n cursor: pointer;\n\n &.outline:not(.action-within) {\n ", " {\n &:hover {\n background-color: ", ";\n }\n\n &:active, &.active-state {\n background-color: ", ";\n }\n }\n }\n\n &.elevated:not(.action-within) {\n ", " {\n &:hover {\n box-shadow: ", ";\n }\n\n &:active, &.active-state {\n box-shadow: ", ";\n }\n }\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n ", "{\n border: 1px solid ", ";\n }\n }\n"])), _index.focusStyles, CardTopLevelContainer, _index.COLORS.primary_20, _index.COLORS.primary_100, CardTopLevelContainer, _index.BOXSHADOWS.BOXSHADOW_L3, _index.BOXSHADOWS.BOXSHADOW_L2, CardTopLevelContainer, _index.COLORS.neutral_100);
|
|
51
51
|
|
|
52
52
|
exports.Wrapper = Wrapper;
|
|
53
53
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Card/VerticalCard/Card.tsx"],"names":["CardTopLevelContainer","styled","div","COLORS","white","BOXSHADOWS","BOXSHADOW_L1","neutral_200","Wrapper","focusStyles","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","React","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","defaultOnMouseDownHandler","a","key","e","instance"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEO,IAAMA,qBAAqB,GAAGC,0BAAOC,GAAV,wVACZC,cAAOC,KADK,EAWhBC,kBAAWC,YAXK,EAeVH,cAAOI,WAfG,CAA3B;;;;AAoBA,IAAMC,OAAO,GAAGP,0BAAOC,GAAV,
|
|
1
|
+
{"version":3,"sources":["../../../src/Card/VerticalCard/Card.tsx"],"names":["CardTopLevelContainer","styled","div","COLORS","white","BOXSHADOWS","BOXSHADOW_L1","neutral_200","Wrapper","focusStyles","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","neutral_100","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","React","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","defaultOnMouseDownHandler","a","key","e","instance"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEO,IAAMA,qBAAqB,GAAGC,0BAAOC,GAAV,wVACZC,cAAOC,KADK,EAWhBC,kBAAWC,YAXK,EAeVH,cAAOI,WAfG,CAA3B;;;;AAoBA,IAAMC,OAAO,GAAGP,0BAAOC,GAAV,2vBAKdO,kBALc,EAYZT,qBAZY,EAcUG,cAAOO,UAdjB,EAkBUP,cAAOQ,WAlBjB,EAwBZX,qBAxBY,EA0BIK,kBAAWO,YA1Bf,EA8BIP,kBAAWQ,YA9Bf,EAsCdb,qBAtCc,EAuCMG,cAAOW,WAvCb,CAAb;;;;AAsDP,IAAMC,IAAwC,GAAG,SAA3CA,IAA2C,OAOkB;AAAA,MANfC,aAMe,QANfA,aAMe;AAAA,MALfC,eAKe,QALfA,eAKe;AAAA,MAJfC,kBAIe,QAJfA,kBAIe;AAAA,MAHfC,kBAGe,QAHfA,kBAGe;AAAA,MAFfC,QAEe,QAFfA,QAEe;AAAA,0BADfC,OACe;AAAA,MADfA,OACe,6BADL,UACK;;AAGjE,wBAAsCC,KAAK,CAACC,QAAN,CAA+C,EAA/C,CAAtC;AAAA;AAAA,MAAOC,WAAP;AAAA,MAAoBC,cAApB;;AACA,MAAMC,WAAW,GAAIJ,KAAK,CAACK,MAAN,CAA6B,IAA7B,CAArB;AACA,MAAMC,YAAY,GAAGN,KAAK,CAACK,MAAN,CAA6B,IAA7B,CAArB;AAEA,8BAAgBC,YAAhB,6CAAkCJ,WAAlC,IAA+CE,WAA/C;AAEA,MAAMG,GAAG,aAAM,CAAC,CAACb,aAAF,GAAkB,aAAlB,GAAkC,EAAxC,cAA8CI,QAAQ,GAAG,UAAH,GAAgB,EAAtE,cAA4EC,OAA5E,CAAT;AAEA,sBAEE,qBAAC,OAAD;AAAS,IAAA,GAAG,EAAEO,YAAd;AACS,IAAA,SAAS,EAAEC,GADpB;AAES,IAAA,QAAQ,EAAE,CAAC,CAACb,aAAF,IAAmB,CAACI,QAApB,GAA+B,CAA/B,GAAmC,CAAC,CAFvD;AAGS,IAAA,WAAW,EAAEU,gCAHtB;AAIS,IAAA,SAAS,EAAE,mBAAAC,CAAC;AAAA,aAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACZ,QAAtB,IAAkCJ,aAAlC,IAAmDA,aAAa,EAApE;AAAA,KAJrB;AAKS,IAAA,OAAO,EAAE,iBAAAiB,CAAC;AAAA,aAAI,CAACb,QAAD,IAAaJ,aAAb,IAA8BA,aAAa,EAA/C;AAAA,KALnB;AAMS,mBAAa,cANtB;AAAA,2BAOE,sBAAC,qBAAD;AAAA,iBAEIC,eAAe,iBACf,qBAAC,uBAAD;AAAgB,QAAA,GAAG,EAAES;AAArB,SACMT,eADN;AACuB,QAAA,QAAQ,EAAEG;AADjC,SAHJ,EAOIF,kBAAkB,iBAClB,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,QAAA,QAAQ,EAAEE;AAArD,SARJ,EAWID,kBAAkB,iBAClB,qBAAC,0BAAD;AAAmB,QAAA,GAAG,EAAE,aAAAe,QAAQ;AAAA,iBAAIT,cAAc,CAACS,QAAD,aAACA,QAAD,cAACA,QAAD,GAAa,EAAb,CAAlB;AAAA;AAAhC,SACuBf,kBADvB;AAC2C,QAAA,QAAQ,EAAEC;AADrD,SAZJ;AAAA;AAPF,IAFF;AA4BD,CA9CD;;;AAREJ,EAAAA,a;AACAI,EAAAA,Q;AAIAC,EAAAA,O,4BAAU,S,EAAY,U;;eAmDTN,I","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n background-color: ${COLORS.white};\n\n border-radius: 8px;\n\n background-clip: padding-box;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n .elevated & {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n }\n\n .outline & {\n border: 1px solid ${COLORS.neutral_200};\n }\n`;\n\n\nexport const Wrapper = styled.div`\n height: max-content;\n width: max-content;\n\n &.interactive:focus {\n ${focusStyles}\n }\n\n &.interactive:not(.disabled) {\n cursor: pointer;\n\n &.outline:not(.action-within) {\n ${CardTopLevelContainer} {\n &:hover {\n background-color: ${COLORS.primary_20};\n }\n\n &:active, &.active-state {\n background-color: ${COLORS.primary_100};\n }\n }\n }\n\n &.elevated:not(.action-within) {\n ${CardTopLevelContainer} {\n &:hover {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n }\n\n &:active, &.active-state {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n }\n }\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n ${CardTopLevelContainer}{\n border: 1px solid ${COLORS.neutral_100};\n }\n }\n`;\n\n\nexport interface CardProps {\n onCardClicked?: () => {};\n disabled?: boolean;\n topSectionProps?: CardTopSectionProps;\n middleSectionProps?: CardMiddleSectionProps;\n bottomSectionProps?: CardBottomSectionProps;\n variant?: 'outline' | 'elevated';\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n onCardClicked,\n topSectionProps,\n middleSectionProps,\n bottomSectionProps,\n disabled,\n variant = 'elevated'\n }: CardProps) => {\n\n\n const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n const checkBoxRef = React.useRef<HTMLDivElement>(null);\n const containerRef = React.useRef<HTMLDivElement>(null);\n\n useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\n\n const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant}`;\n\n return (\n\n <Wrapper ref={containerRef}\n className={cls}\n tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n onClick={e => !disabled && onCardClicked && onCardClicked()}\n data-testid={'card-wrapper'}>\n <CardTopLevelContainer>\n {\n topSectionProps &&\n <CardTopSection ref={checkBoxRef}\n {...topSectionProps} disabled={disabled}/>\n }\n {\n middleSectionProps &&\n <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\n }\n {\n bottomSectionProps &&\n <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\n {...bottomSectionProps} disabled={disabled}/>\n }\n </CardTopLevelContainer>\n </Wrapper>\n\n );\n};\n\nexport default Card;\n"],"file":"Card.cjs"}
|
|
@@ -19,7 +19,7 @@ import { BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWi
|
|
|
19
19
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
20
20
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
21
21
|
export var CardTopLevelContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n\n border-radius: 8px;\n\n background-clip: padding-box;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n .elevated & {\n box-shadow: ", ";\n }\n\n .outline & {\n border: 1px solid ", ";\n }\n"])), COLORS.white, BOXSHADOWS.BOXSHADOW_L1, COLORS.neutral_200);
|
|
22
|
-
export var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n height: max-content;\n width: max-content;\n\n &.interactive:focus {\n ", "\n }\n\n &.interactive:not(.disabled) {\n cursor: pointer;\n\n &.outline:not(.action-within) {\n ", " {\n &:hover {\n background-color: ", ";\n }\n\n &:active, &.active-state {\n background-color: ", ";\n }\n }\n }\n\n &.elevated:not(.action-within) {\n ", " {\n &:hover {\n box-shadow: ", ";\n }\n\n &:active, &.active-state {\n box-shadow: ", ";\n }\n }\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n }\n"])), focusStyles, CardTopLevelContainer, COLORS.primary_20, COLORS.primary_100, CardTopLevelContainer, BOXSHADOWS.BOXSHADOW_L3, BOXSHADOWS.BOXSHADOW_L2);
|
|
22
|
+
export var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n height: max-content;\n width: max-content;\n\n &.interactive:focus {\n ", "\n }\n\n &.interactive:not(.disabled) {\n cursor: pointer;\n\n &.outline:not(.action-within) {\n ", " {\n &:hover {\n background-color: ", ";\n }\n\n &:active, &.active-state {\n background-color: ", ";\n }\n }\n }\n\n &.elevated:not(.action-within) {\n ", " {\n &:hover {\n box-shadow: ", ";\n }\n\n &:active, &.active-state {\n box-shadow: ", ";\n }\n }\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n ", "{\n border: 1px solid ", ";\n }\n }\n"])), focusStyles, CardTopLevelContainer, COLORS.primary_20, COLORS.primary_100, CardTopLevelContainer, BOXSHADOWS.BOXSHADOW_L3, BOXSHADOWS.BOXSHADOW_L2, CardTopLevelContainer, COLORS.neutral_100);
|
|
23
23
|
|
|
24
24
|
var Card = function Card(_ref) {
|
|
25
25
|
var onCardClicked = _ref.onCardClicked,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Card/VerticalCard/Card.tsx"],"names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","BOXSHADOWS","COLORS","defaultOnMouseDownHandler","focusStyles","useActionWithin","CardTopLevelContainer","div","white","BOXSHADOW_L1","neutral_200","Wrapper","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","a","key","e","instance"],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,cAAP,MAAkD,kBAAlD;AACA,OAAOC,iBAAP,MAAwD,qBAAxD;AACA,OAAOC,iBAAP,MAAwD,qBAAxD;AACA,SAAQC,UAAR,EAAoBC,MAApB,EAA4BC,yBAA5B,EAAuDC,WAAvD,EAAoEC,eAApE,QAA0F,aAA1F;;;AAEA,OAAO,IAAMC,qBAAqB,GAAGT,MAAM,CAACU,GAAV,0UACZL,MAAM,CAACM,KADK,EAWhBP,UAAU,CAACQ,YAXK,EAeVP,MAAM,CAACQ,WAfG,CAA3B;AAoBP,OAAO,IAAMC,OAAO,GAAGd,MAAM,CAACU,GAAV,
|
|
1
|
+
{"version":3,"sources":["../../../src/Card/VerticalCard/Card.tsx"],"names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","BOXSHADOWS","COLORS","defaultOnMouseDownHandler","focusStyles","useActionWithin","CardTopLevelContainer","div","white","BOXSHADOW_L1","neutral_200","Wrapper","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","neutral_100","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","a","key","e","instance"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n background-color: ${COLORS.white};\n\n border-radius: 8px;\n\n background-clip: padding-box;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n .elevated & {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n }\n\n .outline & {\n border: 1px solid ${COLORS.neutral_200};\n }\n`;\n\n\nexport const Wrapper = styled.div`\n height: max-content;\n width: max-content;\n\n &.interactive:focus {\n ${focusStyles}\n }\n\n &.interactive:not(.disabled) {\n cursor: pointer;\n\n &.outline:not(.action-within) {\n ${CardTopLevelContainer} {\n &:hover {\n background-color: ${COLORS.primary_20};\n }\n\n &:active, &.active-state {\n background-color: ${COLORS.primary_100};\n }\n }\n }\n\n &.elevated:not(.action-within) {\n ${CardTopLevelContainer} {\n &:hover {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n }\n\n &:active, &.active-state {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n }\n }\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n ${CardTopLevelContainer}{\n border: 1px solid ${COLORS.neutral_100};\n }\n }\n`;\n\n\nexport interface CardProps {\n onCardClicked?: () => {};\n disabled?: boolean;\n topSectionProps?: CardTopSectionProps;\n middleSectionProps?: CardMiddleSectionProps;\n bottomSectionProps?: CardBottomSectionProps;\n variant?: 'outline' | 'elevated';\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n onCardClicked,\n topSectionProps,\n middleSectionProps,\n bottomSectionProps,\n disabled,\n variant = 'elevated'\n }: CardProps) => {\n\n\n const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n const checkBoxRef = React.useRef<HTMLDivElement>(null);\n const containerRef = React.useRef<HTMLDivElement>(null);\n\n useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\n\n const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant}`;\n\n return (\n\n <Wrapper ref={containerRef}\n className={cls}\n tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n onClick={e => !disabled && onCardClicked && onCardClicked()}\n data-testid={'card-wrapper'}>\n <CardTopLevelContainer>\n {\n topSectionProps &&\n <CardTopSection ref={checkBoxRef}\n {...topSectionProps} disabled={disabled}/>\n }\n {\n middleSectionProps &&\n <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\n }\n {\n bottomSectionProps &&\n <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\n {...bottomSectionProps} disabled={disabled}/>\n }\n </CardTopLevelContainer>\n </Wrapper>\n\n );\n};\n\nexport default Card;\n"],"file":"Card.js"}
|