@laerdal/life-react-components 3.6.0-dev.1.full → 3.6.1

package/dist/Button/TextButton.js

@@ -0,0 +1,640 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _pt from "prop-types";
+const _excluded = ["children", "variant", "type", "size", "invertFocus", "width", "testId", "disabled", "flatEdge", "icon", "iconPosition"],
+  _excluded2 = ["loading"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import * as React from 'react';
+import styled, { useTheme } from 'styled-components';
+import { LoadingIndicator } from '../LoadingIndicator';
+import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles';
+import { COLORS, focusStyles, invertedFocusStyles } from '../styles';
+import { Size } from '../types';
+import { defaultOnMouseDownHandler } from '../common';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const getBorderRadius = (flatEdge, radius) => {
+  switch (flatEdge) {
+    case 'left':
+      return `0px ${radius}px ${radius}px 0px`;
+    case 'right':
+      return `${radius}px 0px 0px ${radius}px`;
+    case 'none':
+    default:
+      return `${radius}px`;
+  }
+};
+export const TextButtonContentContainer = styled.div`
+  min-width: 64px;
+`;
+const TextButtonBaseStyled = styled.button``;
+export const TextButtonPrimaryStyled = styled(TextButtonBaseStyled)`
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  box-sizing: border-box;  
+  &.loading-state {
+    cursor: wait;
+  }
+  ${TextButtonContentContainer} {
+    ${props => props.$size === Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)) : props.$size === Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)) : ComponentMStyling(ComponentTextStyle.Bold, COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme))};
+
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'primary'
+}, props.theme)};
+    border-radius: ${props => getBorderRadius(props.$flatEdge, 8)};
+
+    width: ${props => props.$width};
+    position: relative;
+
+    min-height: ${props => props.$size === Size.Large ? '56px' : props.$size === Size.Small ? '32px' : '40px'};
+
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: ${props => props.$size === Size.Large ? '14px 16px' : props.$size === Size.Small ? '6px 8px' : '8px 12px'};
+
+    span.icon:not(.loading) {
+      pointer-events: none;
+    }
+
+    span.loading {
+      opacity: 0;
+    }
+
+    .icon {
+      margin: ${props => props.$size === Size.Medium ? props.$iconOnly ? '-2px -8px' : '' : props.$size === Size.Small ? props.$iconOnly ? '-2px -6px' : '' : ''};
+      width: ${props => props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px'};
+      height: ${props => props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px'};
+      svg {
+        width: ${props => props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px'} !important;
+        height: ${props => props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px'} !important;
+      }
+    }
+
+    .label {
+      margin: 0 4px;
+    }
+
+    div {
+      position: absolute;
+      width: 100%;
+      svg {
+        height: ${props => props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px'};
+        width: ${props => props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px'};
+        path {
+          fill: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
+        }
+      }
+    }
+  }
+  &:hover > ${TextButtonContentContainer},
+  &.hover-state > ${TextButtonContentContainer} {
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'hover',
+  defaultVariant: 'primary'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
+  }
+  &:active > ${TextButtonContentContainer},
+  &.active-state > ${TextButtonContentContainer} {
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'active',
+  defaultVariant: 'primary'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
+  }
+
+  &:focus,
+  &.focus-state {
+    ${props => props.$invertFocus || props.$invertFocus === undefined ? invertedFocusStyles : focusStyles}
+  }
+  &:disabled,
+  &.disabled-state {
+    cursor: not-allowed;
+  }
+  &:disabled > ${TextButtonContentContainer},
+  &.disabled-state > ${TextButtonContentContainer} {
+    pointer-events: none;
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'disabled'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  state: 'disabled'
+}, props.theme)};
+  }
+`;
+export const TextButtonSecondaryStyled = styled(TextButtonPrimaryStyled)`
+  ${TextButtonContentContainer} {
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'primary'
+}, props.theme)};
+    background-color: transparent;
+    div svg path {
+      fill: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'primary'
+}, props.theme)};
+    }
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'primary'
+}, props.theme)};
+    
+    padding: ${props => props.$size === Size.Large ? '12px 16px' : props.$size === Size.Small ? '4px 8px' : '6px 12px'};
+  }
+
+  &:hover > ${TextButtonContentContainer},
+  &.hover-state > ${TextButtonContentContainer} {
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover',
+  defaultVariant: 'primary'
+}, props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'hover',
+  defaultVariant: 'primary'
+}, props.theme)};
+    
+    background-color: transparent;
+    div {
+      svg {
+        path {
+          fill: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover',
+  defaultVariant: 'primary'
+}, props.theme)};
+        }
+      }
+    }
+  }
+  &:active > ${TextButtonContentContainer},
+  &.active-state > ${TextButtonContentContainer} {
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'active',
+  defaultVariant: 'primary'
+}, props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'active',
+  defaultVariant: 'primary'
+}, props.theme)};
+    
+    background-color: transparent;
+    div {
+      svg {
+        path {
+          fill: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover',
+  defaultVariant: 'primary'
+}, props.theme)};
+        }
+      }
+    }
+  }
+
+  &:disabled > ${TextButtonContentContainer},
+  &.disabled-state > ${TextButtonContentContainer} {
+    background-color: transparent;
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled'
+}, props.theme)};
+  }
+`;
+export const TextButtonInvertedSecondaryStyled = styled(TextButtonPrimaryStyled)`
+  ${TextButtonContentContainer} {
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'inverse'
+}, props.theme)};
+    background-color: transparent;
+    div svg path {
+      fill: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'inverse'
+}, props.theme)};
+    }
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'inverse'
+}, props.theme)};
+    
+    padding: ${props => props.$size === Size.Large ? '12px 16px' : props.$size === Size.Small ? '4px 8px' : '6px 12px'};
+  }
+
+  &:hover > ${TextButtonContentContainer},
+  &.hover-state > ${TextButtonContentContainer} {
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover',
+  defaultVariant: 'inverse'
+}, props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'hover',
+  defaultVariant: 'inverse'
+}, props.theme)};
+
+    background-color: transparent;
+    div {
+      svg {
+        path {
+          fill: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover',
+  defaultVariant: 'inverse'
+}, props.theme)};
+        }
+      }
+    }
+  }
+  &:active > ${TextButtonContentContainer},
+  &.active-state > ${TextButtonContentContainer} {
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'active',
+  defaultVariant: 'inverse'
+}, props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'active',
+  defaultVariant: 'inverse'
+}, props.theme)};
+
+    background-color: transparent;
+    div {
+      svg {
+        path {
+          fill: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover',
+  defaultVariant: 'inverse'
+}, props.theme)};
+        }
+      }
+    }
+  }
+
+  &:disabled > ${TextButtonContentContainer},
+  &.disabled-state > ${TextButtonContentContainer} {
+    background-color: transparent;
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled',
+  defaultVariant: 'inverse'
+}, props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled',
+  defaultVariant: 'inverse'
+}, props.theme)};
+  }
+`;
+export const TextButtonTertiaryStyled = styled(TextButtonPrimaryStyled)`
+${TextButtonContentContainer} {
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'primary'
+}, props.theme)};
+    background-color: transparent;
+
+    div svg path {
+      fill: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'primary'
+}, props.theme)};
+    }
+
+    padding: ${props => props.$size === Size.Large ? '12px 16px' : props.$size === Size.Small ? '4px 8px' : '6px 12px'};
+  }
+
+  &:hover > ${TextButtonContentContainer},
+  &.hover-state > ${TextButtonContentContainer} {
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'primary'
+}, props.theme)};
+
+    div {
+      svg {
+        path {
+          fill: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'primary'
+}, props.theme)};
+        }
+      }
+    }
+  }
+  &:active > ${TextButtonContentContainer},
+  &.active-state > ${TextButtonContentContainer} {
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'primary'
+}, props.theme)};
+
+    div {
+      svg {
+        path {
+          fill: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'primary'
+}, props.theme)};
+        }
+      }
+    }
+  }
+
+  &:disabled > ${TextButtonContentContainer},
+  &.disabled-state > ${TextButtonContentContainer} {
+    background-color: transparent !important;
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  state: 'disabled'
+}, props.theme)};
+    border-color: transparent !important;
+  }
+`;
+export const TextButtonPositiveStyled = styled(TextButtonPrimaryStyled)`
+  ${TextButtonContentContainer} {
+    color: white;
+    background-color: ${props => COLORS.getColor('positive_500', props.theme)};
+  }
+  &:hover > ${TextButtonContentContainer},
+  &.hover-state > ${TextButtonContentContainer} {
+    background-color: ${props => COLORS.getColor('positive_700', props.theme)};
+  }
+  &:active > ${TextButtonContentContainer},
+  &.active-state > ${TextButtonContentContainer} {
+    background-color: ${props => COLORS.getColor('positive_800', props.theme)};
+  }
+
+  &:disabled > ${TextButtonContentContainer},
+  &.disabled-state > ${TextButtonContentContainer} {
+    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};
+    color: ${props => COLORS.getColor('neutral_300', props.theme)};
+  }
+`;
+export const TextButtonDestructiveStyled = styled(TextButtonPrimaryStyled)`
+${TextButtonContentContainer} {
+    color: white;
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'critical'
+}, props.theme)};
+  }
+  &:hover > ${TextButtonContentContainer},
+  &.hover-state > ${TextButtonContentContainer} {
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'hover',
+  defaultVariant: 'critical'
+}, props.theme)};
+  }
+  &:active > ${TextButtonContentContainer},
+  &.active-state > ${TextButtonContentContainer} {
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'active',
+  defaultVariant: 'critical'
+}, props.theme)};
+  }
+
+  &:disabled > ${TextButtonContentContainer},
+  &.disabled-state > ${TextButtonContentContainer} {
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'disabled'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  state: 'disabled'
+}, props.theme)};    
+  }
+`;
+export const TextButtonSecondaryDestructiveStyled = styled(TextButtonPrimaryStyled)`
+  ${TextButtonContentContainer} {
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'critical'
+}, props.theme)};
+    background-color: transparent;
+    div svg path {
+      fill: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'critical'
+}, props.theme)};
+    }
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'critical'
+}, props.theme)};
+    
+    padding: ${props => props.$size === Size.Large ? '12px 16px' : props.$size === Size.Small ? '4px 8px' : '6px 12px'};
+  }
+
+  &:hover > ${TextButtonContentContainer},
+  &.hover-state > ${TextButtonContentContainer} {
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover',
+  defaultVariant: 'critical'
+}, props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'hover',
+  defaultVariant: 'critical'
+}, props.theme)};
+    
+    background-color: transparent;
+    div {
+      svg {
+        path {
+          fill: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover',
+  defaultVariant: 'critical'
+}, props.theme)};
+        }
+      }
+    }
+  }
+  &:active > ${TextButtonContentContainer},
+  &.active-state > ${TextButtonContentContainer} {
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'active',
+  defaultVariant: 'critical'
+}, props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'active',
+  defaultVariant: 'critical'
+}, props.theme)};
+    
+    background-color: transparent;
+    div {
+      svg {
+        path {
+          fill: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover',
+  defaultVariant: 'critical'
+}, props.theme)};
+        }
+      }
+    }
+  }
+
+  &:disabled > ${TextButtonContentContainer},
+  &.disabled-state > ${TextButtonContentContainer} {
+    background-color: transparent;
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled'
+}, props.theme)};
+  }
+`;
+/**
+ * TextButton component
+ */
+const TextButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      children = '',
+      variant = 'primary',
+      type = 'button',
+      size = Size.Medium,
+      invertFocus,
+      width = 'auto',
+      testId,
+      disabled,
+      flatEdge,
+      icon,
+      iconPosition = 'left'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // Let's filter out properties that we don't need to render.
+  const {
+      loading
+    } = props,
+    renderProps = _objectWithoutProperties(props, _excluded2);
+  const theme = useTheme();
+  const renderIcon = () => /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx("span", {
+      className: (children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon'),
+      children: icon
+    })
+  });
+  const renderContent = () => /*#__PURE__*/_jsxs(_Fragment, {
+    children: [icon && iconPosition == 'left' && renderIcon(), children && /*#__PURE__*/_jsx("span", {
+      className: loading ? 'label loading' : 'label',
+      children: children
+    }), icon && iconPosition == 'right' && renderIcon(), loading && /*#__PURE__*/_jsx(LoadingIndicator, {})]
+  });
+  let TextButtonStyled = TextButtonPrimaryStyled;
+  switch (variant) {
+    case 'secondary':
+      TextButtonStyled = TextButtonSecondaryStyled;
+      break;
+    case 'tertiary':
+      TextButtonStyled = TextButtonTertiaryStyled;
+      break;
+    case 'positive':
+      TextButtonStyled = TextButtonPositiveStyled;
+      break;
+    case 'destructive':
+      TextButtonStyled = TextButtonDestructiveStyled;
+      break;
+    case 'secondaryDestructive':
+      TextButtonStyled = TextButtonSecondaryDestructiveStyled;
+      break;
+    case 'secondaryInverse':
+      TextButtonStyled = TextButtonInvertedSecondaryStyled;
+      break;
+  }
+  return /*#__PURE__*/_jsx(TextButtonStyled, _objectSpread(_objectSpread({}, renderProps), {}, {
+    $size: size,
+    $invertFocus: invertFocus,
+    ref: ref,
+    disabled: disabled,
+    $iconOnly: !children,
+    type: type,
+    $flatEdge: flatEdge,
+    $width: width,
+    "data-testid": testId,
+    className: props.loading ? 'loading-state ' + props.className : ' ' + props.className,
+    onMouseDown: defaultOnMouseDownHandler,
+    children: /*#__PURE__*/_jsx(TextButtonContentContainer, {
+      children: renderContent()
+    })
+  }));
+});
+TextButton.propTypes = {
+  variant: _pt.oneOf(['primary', 'secondary', 'tertiary', 'positive', 'destructive', 'secondaryDestructive', 'secondaryInverse']),
+  invertFocus: _pt.bool,
+  width: _pt.oneOfType([_pt.oneOf(['auto']), _pt.string]),
+  loading: _pt.bool,
+  testId: _pt.string,
+  icon: _pt.node,
+  iconPosition: _pt.oneOf(['left', 'right'])
+};
+export default TextButton;
+//# sourceMappingURL=TextButton.js.map