@laerdal/life-react-components 1.11.0-dev.40.full → 1.11.0-dev.41.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,11 +47,11 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
47
47
 
48
48
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
49
49
 
50
- var CardTopLevelContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _index.COLORS.white, _index.BOXSHADOWS.BOXSHADOW_L1, _index.COLORS.neutral_200);
50
+ var CardTopLevelContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n min-width: 240px;\n max-width: 560px;\n overflow: hidden;\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"])), _index.COLORS.white, _index.BOXSHADOWS.BOXSHADOW_L1, _index.COLORS.neutral_200);
51
51
 
52
52
  exports.CardTopLevelContainer = CardTopLevelContainer;
53
53
 
54
- 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);
54
+ var Wrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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);
55
55
 
56
56
  exports.Wrapper = Wrapper;
57
57
 
@@ -1 +1 @@
1
- {"version":3,"file":"Card.cjs","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","className","rest","React","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","useActionWithin","cls","defaultOnMouseDownHandler","a","key","e","instance"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"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 extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\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 className,\n ...rest\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} ${className || ''}`;\n\n return (\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 {...rest}>\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEO,IAAMA,qBAAqB,GAAGC,yBAAA,CAAOC,GAAV,wVACZC,aAAA,CAAOC,KADK,EAWhBC,iBAAA,CAAWC,YAXK,EAeVH,aAAA,CAAOI,WAfG,CAA3B;;;;AAoBA,IAAMC,OAAO,GAAGP,yBAAA,CAAOC,GAAV,2vBAKdO,kBALc,EAYZT,qBAZY,EAcUG,aAAA,CAAOO,UAdjB,EAkBUP,aAAA,CAAOQ,WAlBjB,EAwBZX,qBAxBY,EA0BIK,iBAAA,CAAWO,YA1Bf,EA8BIP,iBAAA,CAAWQ,YA9Bf,EAsCdb,qBAtCc,EAuCMG,aAAA,CAAOW,WAvCb,CAAb;;;;AAsDP,IAAMC,IAAwC,GAAG,SAA3CA,IAA2C,OASkB;EAAA,IARfC,aAQe,QARfA,aAQe;EAAA,IAPfC,eAOe,QAPfA,eAOe;EAAA,IANfC,kBAMe,QANfA,kBAMe;EAAA,IALfC,kBAKe,QALfA,kBAKe;EAAA,IAJfC,QAIe,QAJfA,QAIe;EAAA,wBAHfC,OAGe;EAAA,IAHfA,OAGe,6BAHL,UAGK;EAAA,IAFfC,SAEe,QAFfA,SAEe;EAAA,IADZC,IACY;;EAGjE,sBAAsCC,KAAK,CAACC,QAAN,CAA+C,EAA/C,CAAtC;EAAA;EAAA,IAAOC,WAAP;EAAA,IAAoBC,cAApB;;EACA,IAAMC,WAAW,GAAIJ,KAAK,CAACK,MAAN,CAA6B,IAA7B,CAArB;EACA,IAAMC,YAAY,GAAGN,KAAK,CAACK,MAAN,CAA6B,IAA7B,CAArB;EAEA,IAAAE,sBAAA,EAAgBD,YAAhB,6CAAkCJ,WAAlC,IAA+CE,WAA/C;EAEA,IAAMI,GAAG,aAAM,CAAC,CAAChB,aAAF,GAAkB,aAAlB,GAAkC,EAAxC,cAA8CI,QAAQ,GAAG,UAAH,GAAgB,EAAtE,cAA4EC,OAA5E,cAAuFC,SAAS,IAAI,EAApG,CAAT;EAEA,oBACE,qBAAC,OAAD;IAAS,GAAG,EAAEQ,YAAd;IACS,SAAS,EAAEE,GADpB;IAES,QAAQ,EAAE,CAAC,CAAChB,aAAF,IAAmB,CAACI,QAApB,GAA+B,CAA/B,GAAmC,CAAC,CAFvD;IAGS,WAAW,EAAEa,gCAHtB;IAIS,SAAS,EAAE,mBAAAC,CAAC;MAAA,OAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACf,QAAtB,IAAkCJ,aAAlC,IAAmDA,aAAa,EAApE;IAAA,CAJrB;IAKS,OAAO,EAAE,iBAAAoB,CAAC;MAAA,OAAI,CAAChB,QAAD,IAAaJ,aAAb,IAA8BA,aAAa,EAA/C;IAAA,CALnB;IAMS,eAAa;EANtB,GAOaO,IAPb;IAAA,uBAQE,sBAAC,qBAAD;MAAA,WAEIN,eAAe,iBACf,qBAAC,uBAAD;QAAgB,GAAG,EAAEW;MAArB,GACMX,eADN;QACuB,QAAQ,EAAEG;MADjC,GAHJ,EAOIF,kBAAkB,iBAClB,qBAAC,0BAAD,kCAAuBA,kBAAvB;QAA2C,QAAQ,EAAEE;MAArD,GARJ,EAWID,kBAAkB,iBAClB,qBAAC,0BAAD;QAAmB,GAAG,EAAE,aAAAkB,QAAQ;UAAA,OAAIV,cAAc,CAACU,QAAD,aAACA,QAAD,cAACA,QAAD,GAAa,EAAb,CAAlB;QAAA;MAAhC,GACuBlB,kBADvB;QAC2C,QAAQ,EAAEC;MADrD,GAZJ;IAAA;EARF,GADF;AA4BD,CAhDD;;;EAREJ,a;EACAI,Q;EAIAC,O,4BAAU,S,EAAY,U;;eAqDTN,I"}
1
+ {"version":3,"file":"Card.cjs","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","className","rest","React","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","useActionWithin","cls","defaultOnMouseDownHandler","a","key","e","instance"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"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 min-width: 240px;\n max-width: 560px;\n overflow: hidden;\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 &.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 extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\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 className,\n ...rest\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} ${className || ''}`;\n\n return (\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 {...rest}>\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEO,IAAMA,qBAAqB,GAAGC,yBAAA,CAAOC,GAAV,uZACZC,aAAA,CAAOC,KADK,EAchBC,iBAAA,CAAWC,YAdK,EAkBVH,aAAA,CAAOI,WAlBG,CAA3B;;;;AAuBA,IAAMC,OAAO,GAAGP,yBAAA,CAAOC,GAAV,0sBAEdO,kBAFc,EASZT,qBATY,EAWUG,aAAA,CAAOO,UAXjB,EAeUP,aAAA,CAAOQ,WAfjB,EAqBZX,qBArBY,EAuBIK,iBAAA,CAAWO,YAvBf,EA2BIP,iBAAA,CAAWQ,YA3Bf,EAmCdb,qBAnCc,EAoCMG,aAAA,CAAOW,WApCb,CAAb;;;;AAmDP,IAAMC,IAAwC,GAAG,SAA3CA,IAA2C,OASkB;EAAA,IARfC,aAQe,QARfA,aAQe;EAAA,IAPfC,eAOe,QAPfA,eAOe;EAAA,IANfC,kBAMe,QANfA,kBAMe;EAAA,IALfC,kBAKe,QALfA,kBAKe;EAAA,IAJfC,QAIe,QAJfA,QAIe;EAAA,wBAHfC,OAGe;EAAA,IAHfA,OAGe,6BAHL,UAGK;EAAA,IAFfC,SAEe,QAFfA,SAEe;EAAA,IADZC,IACY;;EAGjE,sBAAsCC,KAAK,CAACC,QAAN,CAA+C,EAA/C,CAAtC;EAAA;EAAA,IAAOC,WAAP;EAAA,IAAoBC,cAApB;;EACA,IAAMC,WAAW,GAAIJ,KAAK,CAACK,MAAN,CAA6B,IAA7B,CAArB;EACA,IAAMC,YAAY,GAAGN,KAAK,CAACK,MAAN,CAA6B,IAA7B,CAArB;EAEA,IAAAE,sBAAA,EAAgBD,YAAhB,6CAAkCJ,WAAlC,IAA+CE,WAA/C;EAEA,IAAMI,GAAG,aAAM,CAAC,CAAChB,aAAF,GAAkB,aAAlB,GAAkC,EAAxC,cAA8CI,QAAQ,GAAG,UAAH,GAAgB,EAAtE,cAA4EC,OAA5E,cAAuFC,SAAS,IAAI,EAApG,CAAT;EAEA,oBACE,qBAAC,OAAD;IAAS,GAAG,EAAEQ,YAAd;IACS,SAAS,EAAEE,GADpB;IAES,QAAQ,EAAE,CAAC,CAAChB,aAAF,IAAmB,CAACI,QAApB,GAA+B,CAA/B,GAAmC,CAAC,CAFvD;IAGS,WAAW,EAAEa,gCAHtB;IAIS,SAAS,EAAE,mBAAAC,CAAC;MAAA,OAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACf,QAAtB,IAAkCJ,aAAlC,IAAmDA,aAAa,EAApE;IAAA,CAJrB;IAKS,OAAO,EAAE,iBAAAoB,CAAC;MAAA,OAAI,CAAChB,QAAD,IAAaJ,aAAb,IAA8BA,aAAa,EAA/C;IAAA,CALnB;IAMS,eAAa;EANtB,GAOaO,IAPb;IAAA,uBAQE,sBAAC,qBAAD;MAAA,WAEIN,eAAe,iBACf,qBAAC,uBAAD;QAAgB,GAAG,EAAEW;MAArB,GACMX,eADN;QACuB,QAAQ,EAAEG;MADjC,GAHJ,EAOIF,kBAAkB,iBAClB,qBAAC,0BAAD,kCAAuBA,kBAAvB;QAA2C,QAAQ,EAAEE;MAArD,GARJ,EAWID,kBAAkB,iBAClB,qBAAC,0BAAD;QAAmB,GAAG,EAAE,aAAAkB,QAAQ;UAAA,OAAIV,cAAc,CAACU,QAAD,aAACA,QAAD,cAACA,QAAD,GAAa,EAAb,CAAlB;QAAA;MAAhC,GACuBlB,kBADvB;QAC2C,QAAQ,EAAEC;MADrD,GAZJ;IAAA;EARF,GADF;AA4BD,CAhDD;;;EAREJ,a;EACAI,Q;EAIAC,O,4BAAU,S,EAAY,U;;eAqDTN,I"}
@@ -20,8 +20,8 @@ import CardBottomSection from './CardBottomSection';
20
20
  import { BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin } from '../../index';
21
21
  import { jsx as _jsx } from "react/jsx-runtime";
22
22
  import { jsxs as _jsxs } from "react/jsx-runtime";
23
- 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);
24
- 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
+ export var CardTopLevelContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n min-width: 240px;\n max-width: 560px;\n overflow: hidden;\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);
24
+ export var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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);
25
25
 
26
26
  var Card = function Card(_ref) {
27
27
  var onCardClicked = _ref.onCardClicked,
@@ -1 +1 @@
1
- {"version":3,"file":"Card.js","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","className","rest","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","a","key","e","instance"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"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 extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\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 className,\n ...rest\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} ${className || ''}`;\n\n return (\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 {...rest}>\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"],"mappings":"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"}
1
+ {"version":3,"file":"Card.js","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","className","rest","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","a","key","e","instance"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"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 min-width: 240px;\n max-width: 560px;\n overflow: hidden;\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 &.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 extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\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 className,\n ...rest\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} ${className || ''}`;\n\n return (\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 {...rest}>\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"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "1.11.0-dev.40.full",
3
+ "version": "1.11.0-dev.41.full",
4
4
  "private": false,
5
5
  "author": "Erik Martirosyan <erik.martirosyan@laerdal.com>",
6
6
  "contributors": [],