@hhgtech/hhg-components/build/MobileBottomNavigationIcon-1cbf7cf6.js

Hello Health Group common components

'use strict';

var tslib_es6 = require('./tslib.es6-92cccef3.js');
var React = require('react');
var index = require('./index-25f2e7a5.js');
var miscTheme = require('./miscTheme.js');
var react = require('@emotion/react');
var styled = require('@emotion/styled');
var utils = require('./utils-7ba0038a.js');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);

const slideInUp = react.keyframes `
  from {
    transform: translateY(100%);
    visibility: visible;
  }

  to {
    transform: translateY(0);
  }
`;
const slideOutDown = react.keyframes `
  from {
    transform: translate(0, 0);
  }

  to {
    visibility: hidden;
    transform: translate(0, 100%);
  }
`;
const StyledMobileBottomNavigationIcon = styled__default["default"].div `
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  gap: 4px;

  .mobile-navigation-label {
    font-weight: 500;
    font-size: 10px;
    line-height: 16px;
    color: ${miscTheme.theme.colors.gray600};
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 60px;
    text-align: center;
    ${utils.MediaQueries.mbDown} {
      max-width: 60px;
    }
  }

  .mobile-navigation-icon {
    position: relative;
    height: 24px;
    &[data-no-label='true'] {
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0px;
      gap: 16px;
      width: 40px;
      height: 40px;
    }
  }

  &[data-is-special='true'] {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px 12px 4px 6px;
    gap: 4px;

    min-width: 152px;
    height: 32px;
    /* Neutral/Neutral-50 */
    background: ${miscTheme.theme.colors.primary50};
    border-radius: 20px;
    flex-grow: 1;
    .mobile-navigation-icon {
      &[data-no-label='true'] {
        width: 24px;
        height: 24px;
      }
    }
    .mobile-navigation-label {
      max-width: max-content;
      color: ${miscTheme.theme.colors.primaryBase};
    }
  }

  &[data-is-active='true'] {
    .mobile-navigation-label {
      color: ${miscTheme.theme.colors.primaryBase};
    }
  }

  &[data-is-disabled='true'] {
    opacity: 0.2;
  }
`;
const StyledMobileBottomNavigation = styled__default["default"].div `
  z-index: 100;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 56px;
  min-height: 56px;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-evenly;
  background-color: ${miscTheme.theme.colors.white};
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    min-height: calc(56px + env(safe-area-inset-bottom));
    max-height: calc(56px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
  }
  a {
    text-decoration: none;
  }
  &[data-is-collapsed='true'] {
    animation: ${slideOutDown} 500ms ease-in-out forwards;
  }

  &[data-is-collapsed='false'] {
    animation: ${slideInUp} 500ms ease-in-out forwards;
  }
  &[data-template='health-tool'] {
    height: 44px;
    max-height: 44px;
    min-height: 44px;
    justify-content: space-between;
    & > div {
      flex: 0;
    }
  }
`;
const StyledBadge = styled__default["default"].span `
  position: absolute;
  left: 100%;
  transform: translate(-10px, calc(-50% + 3px));
  background-color: ${miscTheme.theme.colors.green800};
  border-radius: 32px;
  border: 2px solid ${miscTheme.theme.colors.white};
  padding: 1px 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 20px;
  aspect-ratio: 1;
  &[data-no-label='true'] {
    left: 0;
    transform: translate(22px, -50%);
  }
`;
styled__default["default"].div `
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background-color: ${miscTheme.theme.colors.primaryBase};
  transition: width 150ms linear;
`;
styled__default["default"].div `
  a {
    text-decoration: none;
  }
`;

const MobileBottomNavigationIcon = (_a) => {
    var { badgeAmount, disabled = false, hasBadge = false, icon, isActive = false, isSpecial = false, label } = _a, props = tslib_es6.__rest(_a, ["badgeAmount", "disabled", "hasBadge", "icon", "isActive", "isSpecial", "label"]);
    return (React__default["default"].createElement(StyledMobileBottomNavigationIcon, Object.assign({ "data-is-special": isSpecial, "data-is-active": isActive, "data-is-disabled": disabled }, props),
        React__default["default"].createElement("div", { className: "mobile-navigation-icon", "data-no-label": !Boolean(label) },
            hasBadge && (React__default["default"].createElement(StyledBadge, { "data-no-label": !Boolean(label) },
                React__default["default"].createElement(index.Text, { size: "s5", weight: "semiBold", color: isSpecial ? miscTheme.theme.colors.primaryBase : miscTheme.theme.colors.white }, badgeAmount))),
            icon),
        label && React__default["default"].createElement("span", { className: "mobile-navigation-label" }, label)));
};

exports.MobileBottomNavigationIcon = MobileBottomNavigationIcon;
exports.StyledMobileBottomNavigation = StyledMobileBottomNavigation;