@kiwicom/orbit-components/es/Button/helpers/getButtonBoxShadow.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

import { css } from "styled-components";
import convertHexToRgba from "@kiwicom/orbit-design-tokens/lib/convertHexToRgba";
import { TOKENS, TYPE_OPTIONS, BUTTON_STATES } from "../consts";
import getTypeToken from "./getTypeToken";
const opacity = {
  default: {
    [TYPE_OPTIONS.PRIMARY]: 15,
    [TYPE_OPTIONS.SECONDARY]: 8,
    [TYPE_OPTIONS.INFO]: 15,
    [TYPE_OPTIONS.SUCCESS]: 15,
    [TYPE_OPTIONS.WARNING]: 15,
    [TYPE_OPTIONS.CRITICAL]: 15,
    [TYPE_OPTIONS.FACEBOOK]: 15,
    [TYPE_OPTIONS.GOOGLE]: 8,
    [TYPE_OPTIONS.WHITE]: 8
  },
  bordered: {
    [TYPE_OPTIONS.PRIMARY]: 15,
    [TYPE_OPTIONS.SECONDARY]: 15,
    [TYPE_OPTIONS.INFO]: 15,
    [TYPE_OPTIONS.SUCCESS]: 15,
    [TYPE_OPTIONS.WARNING]: 15,
    [TYPE_OPTIONS.CRITICAL]: 15,
    [TYPE_OPTIONS.FACEBOOK]: 15,
    [TYPE_OPTIONS.GOOGLE]: 15,
    [TYPE_OPTIONS.WHITE]: 15
  }
};

const getButtonBoxShadow = state => ({
  disabled,
  bordered,
  theme,
  type
}) => {
  if (disabled) {
    return null;
  }

  if (state === BUTTON_STATES.DEFAULT && bordered) {
    return css(["box-shadow:inset 0 0 0 1px ", ";"], getTypeToken(TOKENS.borderColorButton));
  }

  if (state === BUTTON_STATES.HOVER && bordered) {
    return css(["box-shadow:inset 0 0 0 1px ", ";"], getTypeToken(TOKENS.borderColorButtonHover));
  }

  if (state === BUTTON_STATES.ACTIVE) {
    if (bordered) {
      return css(["box-shadow:inset 0 0 0 1px ", ",inset 0 0 6px 3px ", ";"], getTypeToken(TOKENS.borderColorButtonActive), convertHexToRgba(theme.orbit.paletteInkNormal, opacity.bordered[type]));
    }

    return css(["box-shadow:inset 0 0 6px 3px ", ";"], convertHexToRgba(theme.orbit.paletteInkNormal, opacity.default[type]));
  }

  if (state === BUTTON_STATES.FOCUS) {
    return css(["", " &:active{", ";}"], !bordered && css(["box-shadow:0 0 0 3px ", ";"], getTypeToken(TOKENS.borderColorButtonFocus)), bordered ? css(["box-shadow:inset 0 0 0 1px ", ",inset 0 0 6px 3px ", ";"], getTypeToken(TOKENS.borderColorButtonActive), convertHexToRgba(theme.orbit.paletteInkNormal, opacity.bordered[type])) : css(["box-shadow:inset 0 0 6px 3px ", ";"], convertHexToRgba(theme.orbit.paletteInkNormal, opacity.default[type])));
  }

  return null;
};

export default getButtonBoxShadow;