fix(menuCountry): fix border error and initial values

packages/component-faraday-ui/src/AuthorCard.js

@@ -6,7 +6,7 @@ import { th } from '@pubsweet/ui-toolkit'
 import { required } from 'xpub-validators'
 import { reduxForm, Field } from 'redux-form'
 
-import { MenuCountry } from 'pubsweet-component-faraday-ui'
+import { MenuCountry, ItemOverrideAlert } from 'pubsweet-component-faraday-ui'
 import { H3, Spinner, Checkbox, TextField, ValidatedField } from '@pubsweet/ui'
 import {
   compose,
@@ -187,7 +187,7 @@ const AuthorEdit = ({
           validate={[required]}
         />
       </Item>
-      <Item vertical>
+      <ItemOverrideAlert vertical>
         <Label required>Country</Label>
         <ValidatedField
           component={MenuCountry}
@@ -196,7 +196,7 @@ const AuthorEdit = ({
           placeholder="Please select"
           validate={[required]}
         />
-      </Item>
+      </ItemOverrideAlert>
     </Row>
   </AuthorContainer>
 )

packages/component-faraday-ui/src/MenuCountry.js

 import React, { Fragment } from 'react'
 import styled from 'styled-components'
-import { th, override } from '@pubsweet/ui-toolkit'
+import { th, override, validationColor } from '@pubsweet/ui-toolkit'
 import { startsWith, toLower, get, head } from 'lodash'
 import { withCountries } from 'pubsweet-component-faraday-ui'
 import { compose, withState, withHandlers, withProps } from 'recompose'
@@ -20,6 +20,7 @@ const Menu = ({
   placeholder,
   handleSelect,
   onTextChange,
+  validationStatus,
 }) => (
   <Fragment>
     {open && <CloseOverlay onClick={toggleMenu} />}
@@ -29,6 +30,7 @@ const Menu = ({
         onClick={toggleMenu}
         onKeyUp={onEnter}
         placeholder={placeholder}
+        validationStatus={validationStatus}
         value={userInput}
       />
       {open && (
@@ -46,7 +48,11 @@ const Menu = ({
 
 export default compose(
   withCountries,
-  withState('userInput', 'updateUserInput', ''),
+  withState(
+    'userInput',
+    'updateUserInput',
+    ({ value, countryLabel }) => (value ? countryLabel(value) : ''),
+  ),
   withState('open', 'updateOptionsVisibility', false),
   withHandlers({
     handleSelect: ({
@@ -93,7 +99,7 @@ export default compose(
 const Input = styled.input`
   width: 100%;
   height: calc(${th('gridUnit')} * 4);
-  border: ${th('accordion.border')};
+  border: ${th('borderWidth')} ${th('borderStyle')} ${validationColor};
   border-radius: ${th('borderRadius')};
   padding: 0 ${th('gridUnit')};
   font-family: ${th('fontHeading')};