FormItems.js

import React from 'react'
import { th } from '@pubsweet/ui'
import styled, { css } from 'styled-components'

const defaultText = css`
  color: ${th('colorText')};
  font-family: ${th('fontReading')};
  font-size: ${th('fontSizeBaseSmall')};
`

export const RootContainer = styled.div`
  background-color: ${th('backgroundColorReverse')};
  border: ${({ bordered }) => (bordered ? th('borderDefault') : 'none')};
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 600px;
  min-width: 500px;
  padding: calc(${th('subGridUnit')} * 2) calc(${th('subGridUnit')} * 4);
`

export const Title = styled.div`
  color: ${th('colorPrimary')};
  font-family: ${th('fontHeading')};
  font-size: ${th('fontSizeHeading5')};
  font-weight: bold;
  margin: ${th('subGridUnit')} auto;
  text-align: center;
`
export const Subtitle = styled.div`
  font-family: ${th('fontReading')};
  font-size: ${th('fontSizeBase')};
  font-weight: normal;
  margin: ${th('subGridUnit')} auto;
  text-align: center;
`

export const Email = styled.div`
  font-family: ${th('fontReading')};
  font-size: ${th('fontSizeBase')};
  font-weight: normal;
  margin: ${th('subGridUnit')} auto;
  text-align: center;
`

export const FormContainer = styled.form``

export const Row = styled.div`
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin: ${({ noMargin }) =>
    noMargin ? 0 : css`calc(${th('subGridUnit')} * 2) 0`};

  div[role='alert'] {
    margin-top: 0;
  }
`

export const RowItem = styled.div`
  display: flex;
  flex: ${({ flex }) => flex || 1};
  flex-direction: ${({ vertical }) => (vertical ? 'column' : 'row')};
  justify-content: ${({ centered }) => (centered ? 'center' : 'initial')};

  & > div {
    flex: 1;
  }
`

export const Label = styled.div`
  color: ${th('colorPrimary')};
  font-family: ${th('fontReading')};
  font-size: ${th('fontSizeBaseSmall')};
  margin: ${th('subGridUnit')} 0;
  text-transform: uppercase;
`

export const Err = styled.span`
  color: ${th('colorError')};
  font-family: ${th('fontReading')};
  font-size: ${th('fontSizeBase')};
  margin-top: calc(${th('gridUnit')} * -1);
  text-align: center;
`

export const Textarea = styled.textarea`
  border: ${th('borderDefault')};
  border-color: ${({ hasError }) =>
    hasError ? th('colorError') : th('colorPrimary')};
  font-size: ${th('fontSizeBaseSmall')};
  font-family: ${th('fontWriting')};
  padding: ${th('subGridUnit')};
  outline: none;
  transition: all 300ms linear;

  width: ${({ width }) => `${width || 500}px`};
  height: ${({ height }) => `${height || 150}px`};

  &:active,
  &:focus {
    border-color: #54a5fa;
  }

  &:read-only {
    background-color: ${th('colorBackgroundHue')};
  }
`

export const CustomRadioGroup = styled.div`
  div {
    flex-direction: row;
    justify-content: ${({ justify }) => justify || 'space-between'};
    label {
      span:last-child {
        font-style: normal;
        ${defaultText};
      }
    }
  }
  & ~ div {
    margin-top: 0;
  }
`

export const TextAreaField = input => <Textarea {...input} height={70} />