spacemaker-button/dist/index.js

'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var styled = require('styled-components');
var styled__default = _interopDefault(styled);

var ColfaxLight = {
  "font-family": "Colfax",
  "font-weight": 300,
  "font-style": "normal"
};

var ColfaxRegular = {
  "font-family": "Colfax",
  "font-weight": 400,
  "font-style": "normal"
};

var ColfaxMedium = {
  "font-family": "Colfax",
  "font-weight": 500,
  "font-style": "normal"
};

var _extends = Object.assign || function (target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i];

    for (var key in source) {
      if (Object.prototype.hasOwnProperty.call(source, key)) {
        target[key] = source[key];
      }
    }
  }

  return target;
};

var taggedTemplateLiteral = function (strings, raw) {
  return Object.freeze(Object.defineProperties(strings, {
    raw: {
      value: Object.freeze(raw)
    }
  }));
};

var colors = {
  fontColor: "#000",
  white: "#FFFFFF",
  red: "#E64E5E",
  orange: "#FF8153",
  yellow: "#FACD66",
  aqua1: "#3F9AAC",
  aqua2: "#88B7C3",
  blue1: "#2C567C",
  blue2: "#1776AC",
  blue3: "#359AD4",
  gray0: "#141B22",
  gray1: "#2A333D",
  gray2: "#424D58",
  gray3: "#5B6671",
  gray4: "#9099A3",
  gray5: "#CFD7E0",
  gray5_5: "#E7ECF2",
  gray6: "#F3F4F6",
  sliderBar: "#D5E3EE"
};

var typo = {
  header1: _extends({}, ColfaxLight, {
    fontSize: "22px",
    letterSpacing: "0px",
    lineHeight: "24px",
    color: colors.fontColor
  }),
  header2: _extends({}, ColfaxRegular, {
    fontSize: "18px",
    letterSpacing: "0.25px",
    lineHeight: "24px",
    color: colors.fontColor
  }),
  header3: _extends({}, ColfaxMedium, {
    fontSize: "16px",
    letterSpacing: "0px",
    lineHeight: "20px",
    color: colors.gray1
  }),
  header4: _extends({}, ColfaxMedium, {
    fontSize: "14px",
    letterSpacing: "0.5px",
    lineHeight: "17px",
    color: colors.white
  }),
  header5: _extends({}, ColfaxMedium, {
    textTransform: "uppercase",
    fontSize: "13px",
    letterSpacing: "1.25px",
    lineHeight: "16px",
    color: colors.gray3
  }),
  header6: _extends({}, ColfaxMedium, {
    fontSize: "11px",
    letterSpacing: "1.5px",
    lineHeight: "15px",
    color: colors.gray4,
    textTransform: "uppercase"
  }),
  text1: _extends({}, ColfaxRegular, {
    fontSize: "14px",
    letterSpacing: "0.25px",
    lineHeight: "18px",
    color: colors.fontColor
  }),
  text2: _extends({}, ColfaxRegular, {
    fontSize: "13px",
    letterSpacing: "0.25px",
    lineHeight: "18px",
    color: colors.fontColor
  }),
  text3: _extends({}, ColfaxRegular, {
    fontSize: "12px",
    letterSpacing: "0.25px",
    lineHeight: "16px",
    color: colors.gray1
  }),
  meta1: _extends({}, ColfaxRegular, {
    fontSize: "12px",
    letterSpacing: "0px",
    lineHeight: "16px",
    color: colors.gray3
  }),
  meta2: _extends({}, ColfaxRegular, {
    fontSize: "11px",
    textTransform: "uppercase",
    letterSpacing: "1.5px",
    lineHeight: "12px",
    color: colors.gray4
  })
};

var theme = {
  colors: colors,
  typo: typo,
  spacing: {
    xxxs: "3px",
    xxs: "6px",
    xs: "8px",
    s: "10px",
    m: "15px",
    l: "20px",
    xl: "25px",
    xxl: "30px",
    xxxl: "35px",
    xxxxl: "40px",
    xl5: "50px"
  }
};

var _templateObject = taggedTemplateLiteral(["\n  height: 36px;\n  border-radius: 6px;\n  border: 2px solid ", ";\n  ", ";\n  font-weight: 500;\n  cursor: pointer;\n  text-align: center;\n  padding-top: 4px;\n  background-color: ", ";\n  &:hover {\n    border: 2px solid ", ";\n  }\n  &:focus {\n    background-color: ", ";\n  }\n  span {\n    margin: ", ";\n  }\n"], ["\n  height: 36px;\n  border-radius: 6px;\n  border: 2px solid ", ";\n  ", ";\n  font-weight: 500;\n  cursor: pointer;\n  text-align: center;\n  padding-top: 4px;\n  background-color: ", ";\n  &:hover {\n    border: 2px solid ", ";\n  }\n  &:focus {\n    background-color: ", ";\n  }\n  span {\n    margin: ", ";\n  }\n"]);

var StyledButton = styled__default.button(_templateObject, function (p) {
  return p.theme.colors.blue2;
}, function (p) {
  return p.theme.typo.header4;
}, function (p) {
  return p.theme.colors.blue2;
}, function (p) {
  return p.theme.colors.blue1;
}, function (p) {
  return p.theme.colors.blue1;
}, function (p) {
  return p.theme.spacing.xxxl;
});

var Button = function Button(_ref) {
  var onClick = _ref.onClick,
      text = _ref.text;
  return React.createElement(
    styled.ThemeProvider,
    { theme: theme },
    React.createElement(
      StyledButton,
      { onClick: onClick },
      React.createElement(
        "span",
        null,
        text
      )
    )
  );
};

module.exports = Button;