advancedvariant.js

import React from 'react';
import styled from 'styled-components';
import { variant } from 'styled-system';

import { base, colors, shadows } from 'theme';

import Box from '../Box';

const BaseInput = styled('input')`
  transition: all ${base.transition};
  height: 55px;
  border-width: 1px;
  border-style: solid;
  border-image: initial;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  padding: 0px 16px;
  box-sizing: border-box;
  width: 100%;
  box-shadow: ${shadows.small};
  background-color: #fff;
  border-color: ${colors.grey100};
  color: ${colors.darkBlue400};
  border-radius: 6px;

  &:hover {
    border-color: ${colors.grey200};
  }

  &:focus {
    outline: none;
    border-color: ${colors.primary};
    box-shadow: ${shadows.smallHover};
  }

  &:disabled {
    pointer-events: none;
    opacity: 0.5;
    background-color: rgb(240, 240, 240);
    border-color: rgb(170, 170, 170);
  }

  &::-webkit-input-placeholder,
  &::placeholder {
    opacity: 0.5;
  }
`;

const InputContainer = styled(Box)`
  svg {
    width: 16px;
    height: 16px;
    top: 14px;
    left: 14px;
    display: block;
    position: absolute;
    fill: none;
    stroke: #16bf78;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
    transition: stroke 0.3s;
    path {
      stroke-dasharray: 80;
      stroke-dashoffset: var(--path, 170);
      transition: stroke-dashoffset 0.5s ease var(--path-delay, 0.3s);
    }
    polyline {
      stroke-dasharray: 12;
      stroke-dashoffset: var(--tick, 12);
      transition: stroke-dashoffset 0.45s ease var(--tick-delay, 0s);
    }
  }
`;

const StyledInput = styled(BaseInput)(
  variant({
    prop: 'size',
    variants: {
      m: {
        fontSize: 1,
        lineHeight: 'heading',
      },
    },
  }),
);

const Input = props => (
  <InputContainer>
    <StyledInput placeholder={props.placeholder} />
    <svg viewBox="0 0 18 18">
      <path d="M11.5,10.5 C6.4987941,17.5909626 1,3.73719105 11.5,6 C10.4594155,14.5485365 17,13.418278 17,9 C17,4.581722 13.418278,1 9,1 C4.581722,1 1,4.581722 1,9 C1,13.418278 4.581722,17 9,17 C13.418278,17 17,13.42 17,9"></path>
      <polyline points="5 9.25 8 12 13 6"></polyline>
    </svg>
  </InputContainer>
);

Input.defaultProps = {
  size: 'm'
};

export default Input;