@laerdal/life-react-components 3.5.1-uss.hackathon → 3.5.2

package/dist/esm/InputFields/Checkbox.js

@@ -1,192 +0,0 @@
-import _pt from "prop-types";
-import * as React from 'react';
-import styled from 'styled-components';
-import { CheckboxOff, CheckboxOn, CheckboxSemi } from '../icons/systemicons/SystemIcons';
-import { COLORS, ComponentTextStyle } from '../styles';
-import { Size } from '../types';
-import { ComponentLStyling, ComponentMStyling, ComponentSStyling } from '../styles/typography';
-const StyledCheckBox = styled.div`
-  display: flex;
-  width: 100%;
-  min-height: 48px;
-  min-width: 48px;
-
-  ${props => props.margin ? `margin: ${props.margin};` : ''}
-  cursor: pointer;
-
-  color: ${COLORS.black};
-
-  .pointerTransparent {
-    pointer-events: none;
-  }
-
-  .checkbox-icon {
-    margin: 6px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    height: 36px;
-    min-width: 36px;
-    border-radius: 50%;
-
-    svg {
-      color: ${props => props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600};
-    }
-  }
-
-  .checkbox-label {
-    user-select: none;
-    cursor: inherit;
-  }
-
-  &.small {
-    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}
-    .checkbox-label {
-      padding-top: 14px;
-    }
-  }
-
-  &.medium {
-    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}
-    .checkbox-label {
-      padding-top: 12px;
-    }
-  }
-
-  &.large {
-    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}
-    .checkbox-label {
-      padding-top: 12px;
-    }
-  }
-
-  &:not(.disabled):focus {
-    outline: none;
-
-    .checkbox-icon {
-      background-color: ${COLORS.white};
-      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
-
-      svg {
-        color: ${COLORS.neutral_600};
-      }
-    }
-  }
-
-  &:not(.disabled):hover {
-    .checkbox-icon {
-      background-color: ${COLORS.primary_20};
-
-      svg {
-        color: ${COLORS.primary_700};
-      }
-    }
-  }
-
-  &:not(.disabled):active {
-    .checkbox-icon {
-      background: ${COLORS.primary_100};
-      box-shadow: none;
-
-      svg {
-        color: ${COLORS.primary_800};
-      }
-    }
-  }
-
-  &.disabled {
-    box-shadow: none;
-    cursor: not-allowed;
-
-    color: ${COLORS.neutral_300};
-
-    .checkbox-icon,
-    .checkbox-label {
-      pointer-events: none;
-    }
-
-    .checkbox-icon{
-      background-color: ${COLORS.white};
-    }
-
-    .checkbox-icon svg {
-      color: ${COLORS.neutral_300};
-    }
-  }
-`;
-const Checkbox = /*#__PURE__*/React.forwardRef(({
-  id,
-  selected,
-  select,
-  label,
-  showWarning,
-  iconPointerEventsTransparent,
-  disabled,
-  margin,
-  size,
-  semiSelected,
-  children,
-  tabIndexVal
-}, ref) => {
-  const onKeyPress = e => {
-    if (e.keyCode === 13 && !disabled) {
-      select(!selected);
-    }
-  };
-
-  const handleClick = () => {
-    if (disabled) {
-      return;
-    }
-
-    select(!selected);
-  };
-
-  size = size ?? Size.Medium;
-  return /*#__PURE__*/React.createElement(StyledCheckBox, {
-    key: id,
-    ref: ref,
-    disabled: disabled,
-    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : ''),
-    selected: selected,
-    tabIndex: disabled ? -1 : tabIndexVal ? tabIndexVal : 0,
-    showWarning: showWarning,
-    margin: margin,
-    onClick: handleClick,
-    onKeyDown: onKeyPress,
-    onMouseDown: e => e.preventDefault()
-  }, /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: 'checkbox-icon'
-  }, selected ? /*#__PURE__*/React.createElement(CheckboxOn, {
-    className: iconPointerEventsTransparent ? "pointerTransparent" : "",
-    size: "24px"
-  }) : semiSelected ? /*#__PURE__*/React.createElement(CheckboxSemi, {
-    className: iconPointerEventsTransparent ? "pointerTransparent" : "",
-    size: "24px"
-  }) : /*#__PURE__*/React.createElement(CheckboxOff, {
-    className: iconPointerEventsTransparent ? "pointerTransparent" : "",
-    size: "24px"
-  })), label && /*#__PURE__*/React.createElement("label", {
-    className: 'checkbox-label',
-    htmlFor: id
-  }, label), !label && /*#__PURE__*/React.createElement("label", {
-    className: 'checkbox-label',
-    htmlFor: id
-  }, children));
-});
-Checkbox.propTypes = {
-  id: _pt.string.isRequired,
-  selected: _pt.bool.isRequired,
-  select: _pt.func.isRequired,
-  label: _pt.string,
-  showWarning: _pt.bool,
-  disabled: _pt.bool,
-  margin: _pt.string,
-  iconPointerEventsTransparent: _pt.bool,
-  semiSelected: _pt.bool,
-  tabIndexVal: _pt.number
-};
-export default Checkbox;
-//# sourceMappingURL=Checkbox.js.map

package/dist/esm/InputFields/Checkbox.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["React","styled","CheckboxOff","CheckboxOn","CheckboxSemi","COLORS","ComponentTextStyle","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","StyledCheckBox","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","forwardRef","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","tabIndexVal","ref","onKeyPress","e","keyCode","handleClick","Medium","toString","toLowerCase","concat","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\r\nimport {COLORS, ComponentTextStyle} from '../styles';\r\nimport { Size } from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\r\n\r\nconst StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\r\n  display: flex;\r\n  width: 100%;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n\r\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\r\n  cursor: pointer;\r\n\r\n  color: ${COLORS.black};\r\n\r\n  .pointerTransparent {\r\n    pointer-events: none;\r\n  }\r\n\r\n  .checkbox-icon {\r\n    margin: 6px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    height: 36px;\r\n    min-width: 36px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\r\n    }\r\n  }\r\n\r\n  .checkbox-label {\r\n    user-select: none;\r\n    cursor: inherit;\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .checkbox-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):focus {\r\n    outline: none;\r\n\r\n    .checkbox-icon {\r\n      background-color: ${COLORS.white};\r\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\r\n\r\n      svg {\r\n        color: ${COLORS.neutral_600};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):hover {\r\n    .checkbox-icon {\r\n      background-color: ${COLORS.primary_20};\r\n\r\n      svg {\r\n        color: ${COLORS.primary_700};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):active {\r\n    .checkbox-icon {\r\n      background: ${COLORS.primary_100};\r\n      box-shadow: none;\r\n\r\n      svg {\r\n        color: ${COLORS.primary_800};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    box-shadow: none;\r\n    cursor: not-allowed;\r\n\r\n    color: ${COLORS.neutral_300};\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .checkbox-icon{\r\n      background-color: ${COLORS.white};\r\n    }\r\n\r\n    .checkbox-icon svg {\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n`;\r\n\r\ninterface Props {\r\n  id: string;\r\n  selected: boolean;\r\n  select: (selected: boolean) => void;\r\n  label?: string;\r\n  showWarning?: boolean;\r\n  disabled?: boolean;\r\n  margin?: string;\r\n  size?: Size;\r\n  iconPointerEventsTransparent?: boolean;\r\n  semiSelected?: boolean;\r\n  tabIndexVal?: number;\r\n}\r\n\r\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\r\n                                                            id,\r\n                                                            selected,\r\n                                                            select,\r\n                                                            label,\r\n                                                            showWarning,\r\n                                                            iconPointerEventsTransparent,\r\n                                                            disabled,\r\n                                                            margin,\r\n                                                            size,\r\n                                                            semiSelected,\r\n                                                            children,\r\n                                                            tabIndexVal\r\n                                                          }, ref) => {\r\n  const onKeyPress = (e: any) => {\r\n    if (e.keyCode === 13 && !disabled) {\r\n      select(!selected);\r\n    }\r\n  };\r\n\r\n  const handleClick = () => {\r\n    if (disabled) {\r\n      return;\r\n    }\r\n    select(!selected);\r\n  };\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  return (\r\n    <StyledCheckBox key={id}\r\n                    ref={ref}\r\n                    disabled={disabled}\r\n                    className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\r\n                    selected={selected}\r\n                    tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n                    showWarning={showWarning}\r\n                    margin={margin}\r\n                    onClick={handleClick}\r\n                    onKeyDown={onKeyPress}\r\n                    onMouseDown={e => e.preventDefault()}>\r\n      <div id={id} className={'checkbox-icon'}>\r\n        {\r\n          selected\r\n            ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\r\n            : semiSelected\r\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\r\n              : <CheckboxOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\r\n        }\r\n      </div>\r\n      {\r\n        label &&\r\n        (\r\n          <label className={'checkbox-label'}\r\n                 htmlFor={id}>\r\n            {label}\r\n          </label>\r\n        )\r\n      }\r\n      {\r\n        !label &&\r\n        <label className={'checkbox-label'}\r\n               htmlFor={id}>\r\n          {children}\r\n        </label>\r\n      }\r\n    </StyledCheckBox>\r\n  );\r\n});\r\n\r\nexport default Checkbox;\r\n"],"file":"Checkbox.js"}