@gssfed/vital-ui-kit-react/src/Card/FooterButton.jsx

Vital UI Kit for React!

/**
 * @flow
 * Copyright © 2018 Galaxy Software Services https://github.com/GSS-FED/vital-ui-kit-react
 * MIT license
 */

import * as React from 'react';
import styled from 'styled-components';

const ButtonWrapper = styled.div`
  position: relative;
  height: 50px;
  display: table-cell;
  vertical-align: middle;

  &:not(:last-child) {
    &:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 1px;
      height: 100%;
      background: ${({ theme }) => theme.borderColor};
    }
  }
`;

const Button = styled.button`
  padding: 0 10px;
  margin: 0;
  border: 0;
  border-radius: 0;
  height: 100%;
  width: 100%;
  background-color: ${({ theme }) => theme.button.bg};
  transition: all 120ms ease-in;
  line-height: 50px;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  color: ${({ primary, theme }) => theme.card.button.color(primary)};

  &:hover {
    background-color: ${({ theme }) => theme.card.button.hover};
  }
`;

type Props = {
  children: React.Node,
  primary?: boolean,
  onClick: () => {},
};

const FooterButton = ({
  children,
  primary,
  onClick,
  ...props
}: Props) => (
  <ButtonWrapper {...props} onClick={onClick}>
    <Button primary={primary}>{children}</Button>
  </ButtonWrapper>
);

FooterButton.defaultProps = {
  primary: false,
};

export default FooterButton;