@laerdal/life-react-components 1.2.2-dev.15.full → 1.2.2-dev.17.full

package/dist/umd/Modals/ModalStyles.js

@@ -16,7 +16,7 @@
   Object.defineProperty(exports, "__esModule", {
     value: true
   });
-  exports.getNoteMessageColor = exports.getBackgroundColor = exports.ModalFooter = exports.ModalBody = exports.ModalNoteSection = exports.ModalTitle = exports.BackButtonWrapper = exports.CloseButtonWrapper = exports.ModalTitleSection = exports.Column = exports.StyledModalHeader = exports.ModalHeader = undefined;
+  exports.getNoteMessageColor = exports.getBackgroundColor = exports.ModalFooter = exports.ModalBody = exports.ModalNoteSection = exports.ModalTitle = exports.BackButtonWrapper = exports.CloseButtonWrapper = exports.FlexContainer = exports.ModalHeaderActions = exports.ModalHeaderActionsWithImage = exports.ModalTitleSection = exports.Column = exports.StyledModalHeader = exports.ModalHeader = undefined;
 
   var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
@@ -59,38 +59,37 @@
   height: 100%;
 `;
   const ModalTitleSection = exports.ModalTitleSection = _styledComponents2.default.section`
+  word-break: break-word;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+`;
+  const ModalHeaderActionsWithImage = exports.ModalHeaderActionsWithImage = _styledComponents2.default.div`
+  display: flex;
+  flex-direction: ${props => !props.hasBackButton ? 'row-reverse' : 'row'};
+  justify-content: space-between;
+  width: 100%;
+  z-index: 1;
+`;
+  const ModalHeaderActions = exports.ModalHeaderActions = _styledComponents2.default.div`
+  display: flex;
+  margin: -12px -12px 0 0;
+`;
+  const FlexContainer = exports.FlexContainer = _styledComponents2.default.div`
   display: flex;
-  div#tooltip {
-    margin-left: 12px;
-  }
 `;
   const CloseButtonWrapper = exports.CloseButtonWrapper = _styledComponents2.default.div`
   button {
     ${props => props.hasImage ? _styledComponents.css`
-            position: absolute;
-            right: 0;
-            top: 0;
-            margin: -12px !important;
+            margin: -12px -12px 0 0 !important;
           ` : _styledComponents.css`
-            position: absolute;
-            top: 0;
-            right: 0;
             left: unset;
-            margin: ${props.size === _types.Size.Small ? '4px 4px 0 0' : props.size === _types.Size.Large ? '20px 20px 0 0' : '12px 12px 0 0'} !important;
           `}
   }
 `;
   const BackButtonWrapper = exports.BackButtonWrapper = _styledComponents2.default.div`
   button {
-    ${props => props.hasImage ? _styledComponents.css`
-            left: 0;
-            top: 0;
-            position: absolute;
-            margin: -12px 0 0 -12px !important;
-          ` : _styledComponents.css`
-            position: unset;
-            margin: -12px 0 0 -12px !important;
-          `}
+    margin: -12px 0 0 -12px !important;
   }
 `;
   const ModalTitle = exports.ModalTitle = _styledComponents2.default.h5`
@@ -101,7 +100,7 @@
   const ModalNoteSection = exports.ModalNoteSection = _styledComponents2.default.section`
   background-color: ${props => getBackgroundColor(props.state)};
   font-size: ${props => props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px'};
-  margin-top: ${props => props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px'};
+  margin-top: ${props => props?.size === 'small' ? `0px` : props?.size === 'large' ? '16px' : '4px'};
   margin-bottom: ${props => props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px'};
   display: flex;
   flex-direction: row;
@@ -109,7 +108,7 @@
   border-radius: 2px;
 
   span {
-    display:block;
+    display: block;
     width: 80%;
     margin-left: 8px;
     color: ${props => getNoteMessageColor(props.state)};
@@ -134,6 +133,19 @@
   justify-content: flex-end;
 
   gap: ${props => props?.size === 'large' ? `16px` : '8px'};
+
+  .footer-action {
+    order: -1;
+    margin-right: auto;
+    display: flex;
+    align-items: center;
+    font-size: ${props => props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px'};
+    gap: ${props => props?.size === _types.Size.Large ? `8px` : props?.size === _types.Size.Small ? '4px' : '6px'};
+  }
+
+  .footer-action.note {
+    color: ${_.COLORS.neutral_600};
+  }
 `;
 
   const getBackgroundColor = exports.getBackgroundColor = state => {

package/dist/umd/Modals/ModalStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/ModalStyles.ts"],"names":["ModalHeader","styled","section","props","StyledModalHeader","height","Column","div","ModalTitleSection","CloseButtonWrapper","css","Size","BackButtonWrapper","ModalTitle","h5","ModalNoteSection","getBackgroundColor","getNoteMessageColor","ModalBody","ModalFooter","state","COLORS"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '..';\nimport { Size } from '../types'\n\n/**\n * Modal styles\n */\nexport const ModalHeader = styled.section<{ marginBottom?: string }>`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: ${(props) => props.marginBottom || '24px'};\n`;\n\nexport const StyledModalHeader = styled(ModalHeader)<{ marginBottom?: string; size?: string; height?: number }>`\n  flex: 0 calc(50% - 5px);\n  flex-direction: column;\n  position: relative;\n  text-align: left;\n  height: ${(props) => (props.height ? `${props.height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24)}px` : '')};\n  img {\n    width: 100%;\n    height: ${(props) => `${props.height}px`};\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    border-radius: 8px 8px 0 0;\n    object-fit: cover;\n  }\n`;\n\nexport const Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nexport const ModalTitleSection = styled.section`\n  display: flex;\n  div#tooltip {\n    margin-left: 12px;\n  }\n`;\n\nexport const CloseButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    ${(props) =>\n      props.hasImage\n        ? css`\n            position: absolute;\n            right: 0;\n            top: 0;\n            margin: -12px !important;\n          `\n        : css`\n            position: absolute;\n            top: 0;\n            right: 0;\n            left: unset;\n            margin: ${props.size === Size.Small ? '4px 4px 0 0' : props.size === Size.Large ? '20px 20px 0 0' : '12px 12px 0 0'} !important;\n          `}\n  }\n`;\n\nexport const BackButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    ${(props) =>\n      props.hasImage\n        ? css`\n            left: 0;\n            top: 0;\n            position: absolute;\n            margin: -12px 0 0 -12px !important;\n          `\n        : css`\n            position: unset;\n            margin: -12px 0 0 -12px !important;\n          `}\n  }\n`;\n\nexport const ModalTitle = styled.h5<{ fontSize?: string }>`\n  margin: 0;\n  font-size: ${(props) => props.fontSize || '1.25em'};\n  font-weight: bold;\n`;\n\nexport const ModalNoteSection = styled.section<{state:string, size?:string}>`\n  background-color: ${(props)=> getBackgroundColor(props.state)};\n  font-size: ${(props)=> (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n  margin-top: ${(props)=> (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  margin-bottom: ${(props)=> (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  display: flex;\n  flex-direction: row;\n  padding: ${(props)=> (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n  border-radius: 2px;\n\n  span {\n    display:block;\n    width: 80%;\n    margin-left: 8px;\n    color: ${(props)=> getNoteMessageColor(props.state)};\n  }\n`;\n\nexport const ModalBody = styled.section<{ size?: string }>`\n  > :first-child {\n    margin-top: 24px;\n  }\n\n  > :last-child {\n    margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  }\n\n  p: first-of-type {\n    padding-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  }\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\n  margin-top: ${(props) => (props?.size === Size.Small ? `20px` : props?.size === Size.Large ? '28px' : '24px')};\n  display: flex;\n  justify-content: flex-end;\n\n  gap: ${(props) => (props?.size === 'large' ? `16px` : '8px')};\n`;\n\nexport const getBackgroundColor = (state:string) => {\n  switch(state){\n    case 'positive': return COLORS.correct_100;\n    case 'warning': return COLORS.warning_100;\n    case 'critical': return COLORS.critical_100;\n    default: return COLORS.primary_100;\n  }\n}\n\nexport const getNoteMessageColor = (state:string) => {\n  switch(state){\n    case 'positive': return COLORS.correct_700;\n    case 'warning': return COLORS.warning_700;\n    case 'critical': return COLORS.critical_700;\n    default: return COLORS.primary_700;\n  }\n}"],"file":"ModalStyles.js"}
+{"version":3,"sources":["../../../src/Modals/ModalStyles.ts"],"names":["ModalHeader","styled","section","props","StyledModalHeader","height","Column","div","ModalTitleSection","ModalHeaderActionsWithImage","ModalHeaderActions","FlexContainer","CloseButtonWrapper","css","BackButtonWrapper","ModalTitle","h5","ModalNoteSection","getBackgroundColor","getNoteMessageColor","ModalBody","ModalFooter","Size","COLORS","neutral_600","state"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '..';\nimport { Size } from '../types';\n\n/**\n * Modal styles\n */\nexport const ModalHeader = styled.section<{ marginBottom?: string }>`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: ${(props) => props.marginBottom || '24px'};\n`;\n\nexport const StyledModalHeader = styled(ModalHeader)<{ marginBottom?: string; size?: string; height?: number }>`\n  flex: 0 calc(50% - 5px);\n  flex-direction: column;\n  position: relative;\n  text-align: left;\n  height: ${(props) => (props.height ? `${props.height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24)}px` : '')};\n  img {\n    width: 100%;\n    height: ${(props) => `${props.height}px`};\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    border-radius: 8px 8px 0 0;\n    object-fit: cover;\n  }\n`;\n\nexport const Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nexport const ModalTitleSection = styled.section`\n  word-break: break-word;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n`;\n\nexport const ModalHeaderActionsWithImage = styled.div<{ hasBackButton?: boolean }>`\n  display: flex;\n  flex-direction: ${(props) => (!props.hasBackButton ? 'row-reverse' : 'row')};\n  justify-content: space-between;\n  width: 100%;\n  z-index: 1;\n`;\n\nexport const ModalHeaderActions = styled.div`\n  display: flex;\n  margin: -12px -12px 0 0;\n`;\n\nexport const FlexContainer = styled.div`\n  display: flex;\n`;\n\nexport const CloseButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    ${(props) =>\n      props.hasImage\n        ? css`\n            margin: -12px -12px 0 0 !important;\n          `\n        : css`\n            left: unset;\n          `}\n  }\n`;\n\nexport const BackButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    margin: -12px 0 0 -12px !important;\n  }\n`;\n\nexport const ModalTitle = styled.h5<{ fontSize?: string }>`\n  margin: 0;\n  font-size: ${(props) => props.fontSize || '1.25em'};\n  font-weight: bold;\n`;\n\nexport const ModalNoteSection = styled.section<{ state: string; size?: string }>`\n  background-color: ${(props) => getBackgroundColor(props.state)};\n  font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n  margin-top: ${(props) => (props?.size === 'small' ? `0px` : props?.size === 'large' ? '16px' : '4px')};\n  margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  display: flex;\n  flex-direction: row;\n  padding: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n  border-radius: 2px;\n\n  span {\n    display: block;\n    width: 80%;\n    margin-left: 8px;\n    color: ${(props) => getNoteMessageColor(props.state)};\n  }\n`;\n\nexport const ModalBody = styled.section<{ size?: string }>`\n  > :first-child {\n    margin-top: 24px;\n  }\n\n  > :last-child {\n    margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  }\n\n  p: first-of-type {\n    padding-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  }\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\n  margin-top: ${(props) => (props?.size === Size.Small ? `20px` : props?.size === Size.Large ? '28px' : '24px')};\n  display: flex;\n  justify-content: flex-end;\n\n  gap: ${(props) => (props?.size === 'large' ? `16px` : '8px')};\n\n  .footer-action {\n    order: -1;\n    margin-right: auto;\n    display: flex;\n    align-items: center;\n    font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n    gap: ${(props) => (props?.size === Size.Large ? `8px` : props?.size === Size.Small ? '4px' : '6px')};\n  }\n\n  .footer-action.note {\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nexport const getBackgroundColor = (state: string) => {\n  switch (state) {\n    case 'positive':\n      return COLORS.correct_100;\n    case 'warning':\n      return COLORS.warning_100;\n    case 'critical':\n      return COLORS.critical_100;\n    default:\n      return COLORS.primary_100;\n  }\n};\n\nexport const getNoteMessageColor = (state: string) => {\n  switch (state) {\n    case 'positive':\n      return COLORS.correct_700;\n    case 'warning':\n      return COLORS.warning_700;\n    case 'critical':\n      return COLORS.critical_700;\n    default:\n      return COLORS.primary_700;\n  }\n};\n"],"file":"ModalStyles.js"}

package/dist/umd/Modals/ModalTypes.js

@@ -0,0 +1,20 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports);
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+});
+//# sourceMappingURL=ModalTypes.js.map

package/dist/umd/Modals/ModalTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"ModalTypes.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "1.2.2-dev.15.full",
+  "version": "1.2.2-dev.17.full",
   "private": false,
   "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
   "contributors": [