From a58f0804a7c41bdf0ccd4f61a34175e7ad80c260 Mon Sep 17 00:00:00 2001
From: Adam Butterworth <adamjbutterworth@gmail.com>
Date: Tue, 12 Mar 2019 17:14:22 -0400
Subject: [PATCH] fix: ui polish (#79)

* fix: change label of language to primary language spoken

* fix: add labels to top of empty states

* fix: add help text to name field in editable or empty states

* fix: move repeated messages into separate files

* fix: translate missed string
---
 src/components/ProfilePage.jsx                |  2 +-
 src/components/ProfilePage/Bio.jsx            | 17 +++---
 src/components/ProfilePage/Certificates.jsx   |  4 +-
 src/components/ProfilePage/Country.jsx        | 36 +++++++------
 .../ProfilePage/Country.messages.jsx          | 16 ++++++
 src/components/ProfilePage/Education.jsx      | 17 +++---
 src/components/ProfilePage/Name.jsx           | 31 ++++++-----
 src/components/ProfilePage/Name.messages.jsx  | 10 ++++
 .../ProfilePage/PreferredLanguage.jsx         | 52 +++++++++----------
 .../PreferredLanguage.messages.jsx            | 16 ++++++
 src/components/ProfilePage/SocialLinks.jsx    | 21 ++++----
 .../ProfilePage/elements/EmptyContent.jsx     | 11 ++--
 12 files changed, 142 insertions(+), 91 deletions(-)
 create mode 100644 src/components/ProfilePage/Country.messages.jsx
 create mode 100644 src/components/ProfilePage/PreferredLanguage.messages.jsx

diff --git a/src/components/ProfilePage.jsx b/src/components/ProfilePage.jsx
index 8b76f64..0546a1e 100644
--- a/src/components/ProfilePage.jsx
+++ b/src/components/ProfilePage.jsx
@@ -191,7 +191,7 @@ export class ProfilePage extends React.Component {
                 {...commonFormProps}
               />
             </Col>
-            <Col md={8} className="pt-md-3">
+            <Col md={8} lg={{ size: 8, offset: 1 }} className="pt-md-3">
               {shouldShowAgeMessage ? <AgeMessage accountURL="#account" /> : null}
               <Bio
                 bio={bio}
diff --git a/src/components/ProfilePage/Bio.jsx b/src/components/ProfilePage/Bio.jsx
index 4210ee8..e3cc5e0 100644
--- a/src/components/ProfilePage/Bio.jsx
+++ b/src/components/ProfilePage/Bio.jsx
@@ -94,13 +94,16 @@ class Bio extends React.Component {
             </React.Fragment>
           ),
           empty: (
-            <EmptyContent onClick={this.handleOpen}>
-              <FormattedMessage
-                id="profile.bio.empty"
-                defaultMessage="Add a short bio"
-                description="instructions when the user hasn't written an About Me"
-              />
-            </EmptyContent>
+            <React.Fragment>
+              <EditableItemHeader content={intl.formatMessage(messages['profile.bio.about.me'])} />
+              <EmptyContent onClick={this.handleOpen}>
+                <FormattedMessage
+                  id="profile.bio.empty"
+                  defaultMessage="Add a short bio"
+                  description="instructions when the user hasn't written an About Me"
+                />
+              </EmptyContent>
+            </React.Fragment>
           ),
           static: (
             <React.Fragment>
diff --git a/src/components/ProfilePage/Certificates.jsx b/src/components/ProfilePage/Certificates.jsx
index 39ecb03..988e249 100644
--- a/src/components/ProfilePage/Certificates.jsx
+++ b/src/components/ProfilePage/Certificates.jsx
@@ -148,7 +148,7 @@ class Certificates extends React.Component {
             </React.Fragment>
           ),
           empty: (
-            <div>
+            <React.Fragment>
               <EditableItemHeader
                 content={intl.formatMessage(messages['profile.certificates.my.certificates'])}
                 showEditButton
@@ -157,7 +157,7 @@ class Certificates extends React.Component {
                 visibility={visibilityCourseCertificates}
               />
               {this.renderCertificates()}
-            </div>
+            </React.Fragment>
           ),
           static: (
             <React.Fragment>
diff --git a/src/components/ProfilePage/Country.jsx b/src/components/ProfilePage/Country.jsx
index d023122..beeac65 100644
--- a/src/components/ProfilePage/Country.jsx
+++ b/src/components/ProfilePage/Country.jsx
@@ -2,7 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Form, FormFeedback, FormGroup, Input, Label } from 'reactstrap';
 import { connect } from 'react-redux';
-import { FormattedMessage } from 'react-intl';
+import { injectIntl, intlShape } from 'react-intl';
+
+import messages from './Country.messages';
 
 // Components
 import FormControls from './elements/FormControls';
@@ -49,7 +51,7 @@ class Country extends React.Component {
 
   render() {
     const {
-      formId, country, visibilityCountry, editMode, saveState, error,
+      formId, country, visibilityCountry, editMode, saveState, error, intl,
     } = this.props;
 
     return (
@@ -62,11 +64,7 @@ class Country extends React.Component {
               <Form onSubmit={this.handleSubmit}>
                 <FormGroup>
                   <Label for="country" id={`${formId}-label`}>
-                    <FormattedMessage
-                      id="profile.country.label"
-                      defaultMessage="Location"
-                      description="Location form label"
-                    />
+                    {intl.formatMessage(messages['profile.country.label'])}
                   </Label>
                   <Input
                     type="select"
@@ -97,7 +95,7 @@ class Country extends React.Component {
           editable: (
             <React.Fragment>
               <EditableItemHeader
-                content="Location"
+                content={intl.formatMessage(messages['profile.country.label'])}
                 showEditButton
                 onClickEdit={this.handleOpen}
                 showVisibility={visibilityCountry !== null}
@@ -107,17 +105,20 @@ class Country extends React.Component {
             </React.Fragment>
           ),
           empty: (
-            <EmptyContent onClick={this.handleOpen}>
-              <FormattedMessage
-                id="profile.country.empty"
-                defaultMessage="Add location"
-                description="instructions when the user doesn't have a location set"
+            <React.Fragment>
+              <EditableItemHeader
+                content={intl.formatMessage(messages['profile.country.label'])}
               />
-            </EmptyContent>
+              <EmptyContent onClick={this.handleOpen}>
+                {intl.formatMessage(messages['profile.country.empty'])}
+              </EmptyContent>
+            </React.Fragment>
           ),
           static: (
             <React.Fragment>
-              <EditableItemHeader content="Location" />
+              <EditableItemHeader
+                content={intl.formatMessage(messages['profile.country.label'])}
+              />
               <p className="h5">{ALL_COUNTRIES[country]}</p>
             </React.Fragment>
           ),
@@ -146,6 +147,9 @@ Country.propTypes = {
   submitHandler: PropTypes.func.isRequired,
   closeHandler: PropTypes.func.isRequired,
   openHandler: PropTypes.func.isRequired,
+
+  // i18n
+  intl: intlShape.isRequired,
 };
 
 Country.defaultProps = {
@@ -159,4 +163,4 @@ Country.defaultProps = {
 export default connect(
   editableFormSelector,
   {},
-)(Country);
+)(injectIntl(Country));
diff --git a/src/components/ProfilePage/Country.messages.jsx b/src/components/ProfilePage/Country.messages.jsx
new file mode 100644
index 0000000..9472e57
--- /dev/null
+++ b/src/components/ProfilePage/Country.messages.jsx
@@ -0,0 +1,16 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  'profile.country.label': {
+    id: 'profile.country.label',
+    defaultMessage: 'Location',
+    description: 'The label for a country in a user profile.',
+  },
+  'profile.country.empty': {
+    id: 'profile.country.empty',
+    defaultMessage: 'Add location',
+    description: 'The affordance to add country location to a user’s profile.',
+  },
+});
+
+export default messages;
diff --git a/src/components/ProfilePage/Education.jsx b/src/components/ProfilePage/Education.jsx
index a9c3a62..a25e870 100644
--- a/src/components/ProfilePage/Education.jsx
+++ b/src/components/ProfilePage/Education.jsx
@@ -105,13 +105,16 @@ class Education extends React.Component {
             </React.Fragment>
           ),
           empty: (
-            <EmptyContent onClick={this.handleOpen}>
-              <FormattedMessage
-                id="profile.education.empty"
-                defaultMessage="Add education"
-                description="instructions when the user doesn't have their level of education set"
-              />
-            </EmptyContent>
+            <React.Fragment>
+              <EditableItemHeader content={intl.formatMessage(messages['profile.education.education'])} />
+              <EmptyContent onClick={this.handleOpen}>
+                <FormattedMessage
+                  id="profile.education.empty"
+                  defaultMessage="Add education"
+                  description="instructions when the user doesn't have their level of education set"
+                />
+              </EmptyContent>
+            </React.Fragment>
           ),
           static: (
             <React.Fragment>
diff --git a/src/components/ProfilePage/Name.jsx b/src/components/ProfilePage/Name.jsx
index 4b2e1c2..201902a 100644
--- a/src/components/ProfilePage/Name.jsx
+++ b/src/components/ProfilePage/Name.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Form, FormFeedback, FormGroup, FormText, Input, Label } from 'reactstrap';
 import { connect } from 'react-redux';
-import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
+import { injectIntl, intlShape } from 'react-intl';
 
 import messages from './Name.messages';
 
@@ -60,7 +60,9 @@ class Name extends React.Component {
             <div role="dialog" aria-labelledby={`${formId}-label`}>
               <Form onSubmit={this.handleSubmit}>
                 <FormGroup>
-                  <Label for="name" id={`${formId}-label`}>Full Name</Label>
+                  <Label for="name" id={`${formId}-label`}>
+                    {intl.formatMessage(messages['profile.name.full.name'])}
+                  </Label>
                   <Input
                     type="text"
                     id={formId}
@@ -71,11 +73,7 @@ class Name extends React.Component {
                     aria-describedby={`${formId}-error-feedback ${formId}-help-text`}
                   />
                   <FormText id={`${formId}-help-text`}>
-                    <FormattedMessage
-                      id="profile.name.details"
-                      defaultMessage="This is the name that appears in your account and on your certificates."
-                      description="describes the area for the user to update their name"
-                    />
+                    {intl.formatMessage(messages['profile.name.details'])}
                   </FormText>
                   <FormFeedback id={`${formId}-error-feedback`}>{error}</FormFeedback>
                 </FormGroup>
@@ -99,16 +97,21 @@ class Name extends React.Component {
                 visibility={visibilityName}
               />
               <p className="h5">{name}</p>
+              <FormText>
+                {intl.formatMessage(messages['profile.name.details'])}
+              </FormText>
             </React.Fragment>
           ),
           empty: (
-            <EmptyContent onClick={this.handleOpen}>
-              <FormattedMessage
-                id="profile.name.empty"
-                defaultMessage="Add name"
-                description="instructions when the user hasn't entered their name"
-              />
-            </EmptyContent>
+            <React.Fragment>
+              <EditableItemHeader content={intl.formatMessage(messages['profile.name.full.name'])} />
+              <EmptyContent onClick={this.handleOpen}>
+                {intl.formatMessage(messages['profile.name.empty'])}
+              </EmptyContent>
+              <FormText>
+                {intl.formatMessage(messages['profile.name.details'])}
+              </FormText>
+            </React.Fragment>
           ),
           static: (
             <React.Fragment>
diff --git a/src/components/ProfilePage/Name.messages.jsx b/src/components/ProfilePage/Name.messages.jsx
index 7cdf91a..9769af7 100644
--- a/src/components/ProfilePage/Name.messages.jsx
+++ b/src/components/ProfilePage/Name.messages.jsx
@@ -6,6 +6,16 @@ const messages = defineMessages({
     defaultMessage: 'Full Name',
     description: 'A section of a user profile',
   },
+  'profile.name.details': {
+    id: 'profile.name.details',
+    defaultMessage: 'This is the name that appears in your account and on your certificates.',
+    description: 'Describes the area for a user to update their name.',
+  },
+  'profile.name.empty': {
+    id: 'profile.name.empty',
+    defaultMessage: 'Add name',
+    description: 'The affordance to add a name to a user’s profile.',
+  },
 });
 
 export default messages;
diff --git a/src/components/ProfilePage/PreferredLanguage.jsx b/src/components/ProfilePage/PreferredLanguage.jsx
index f46cfc5..e58fbd2 100644
--- a/src/components/ProfilePage/PreferredLanguage.jsx
+++ b/src/components/ProfilePage/PreferredLanguage.jsx
@@ -2,7 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Form, FormFeedback, FormGroup, Input, Label } from 'reactstrap';
 import { connect } from 'react-redux';
-import { FormattedMessage } from 'react-intl';
+import { injectIntl, intlShape } from 'react-intl';
+
+import messages from './PreferredLanguage.messages';
 
 // Components
 import FormControls from './elements/FormControls';
@@ -57,7 +59,13 @@ class PreferredLanguage extends React.Component {
 
   render() {
     const {
-      formId, languageProficiencies, visibilityLanguageProficiencies, editMode, saveState, error,
+      formId,
+      languageProficiencies,
+      visibilityLanguageProficiencies,
+      editMode,
+      saveState,
+      error,
+      intl,
     } = this.props;
 
     const value = languageProficiencies.length ? languageProficiencies[0].code : '';
@@ -72,11 +80,7 @@ class PreferredLanguage extends React.Component {
               <Form onSubmit={this.handleSubmit}>
                 <FormGroup>
                   <Label for={formId} id={`${formId}-label`}>
-                    <FormattedMessage
-                      id="profile.preferredlanguage.label"
-                      defaultMessage="Language"
-                      description="Preferred language label"
-                    />
+                    {intl.formatMessage(messages['profile.preferredlanguage.label'])}
                   </Label>
                   <Input
                     type="select"
@@ -107,13 +111,7 @@ class PreferredLanguage extends React.Component {
           editable: (
             <React.Fragment>
               <EditableItemHeader
-                content={(
-                  <FormattedMessage
-                    id="profile.preferredlanguage.label"
-                    defaultMessage="Language"
-                    description="Preferred language label"
-                  />
-                )}
+                content={intl.formatMessage(messages['profile.preferredlanguage.label'])}
                 showEditButton
                 onClickEdit={this.handleOpen}
                 showVisibility={visibilityLanguageProficiencies !== null}
@@ -123,24 +121,19 @@ class PreferredLanguage extends React.Component {
             </React.Fragment>
           ),
           empty: (
-            <EmptyContent onClick={this.handleOpen}>
-              <FormattedMessage
-                id="profile.preferredlanguage.empty"
-                defaultMessage="Add language"
-                description="instructions when the user doesn't have a location set"
+            <React.Fragment>
+              <EditableItemHeader
+                content={intl.formatMessage(messages['profile.preferredlanguage.label'])}
               />
-            </EmptyContent>
+              <EmptyContent onClick={this.handleOpen}>
+                {intl.formatMessage(messages['profile.preferredlanguage.empty'])}
+              </EmptyContent>
+            </React.Fragment>
           ),
           static: (
             <React.Fragment>
               <EditableItemHeader
-                content={(
-                  <FormattedMessage
-                    id="profile.preferredlanguage.label"
-                    defaultMessage="Language"
-                    description="Preferred language label"
-                  />
-                )}
+                content={intl.formatMessage(messages['profile.preferredlanguage.label'])}
               />
               <p className="h5">{ALL_LANGUAGES[value]}</p>
             </React.Fragment>
@@ -175,6 +168,9 @@ PreferredLanguage.propTypes = {
   submitHandler: PropTypes.func.isRequired,
   closeHandler: PropTypes.func.isRequired,
   openHandler: PropTypes.func.isRequired,
+
+  // i18n
+  intl: intlShape.isRequired,
 };
 
 PreferredLanguage.defaultProps = {
@@ -188,4 +184,4 @@ PreferredLanguage.defaultProps = {
 export default connect(
   editableFormSelector,
   {},
-)(PreferredLanguage);
+)(injectIntl(PreferredLanguage));
diff --git a/src/components/ProfilePage/PreferredLanguage.messages.jsx b/src/components/ProfilePage/PreferredLanguage.messages.jsx
new file mode 100644
index 0000000..9575200
--- /dev/null
+++ b/src/components/ProfilePage/PreferredLanguage.messages.jsx
@@ -0,0 +1,16 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  'profile.preferredlanguage.empty': {
+    id: 'profile.preferredlanguage.empty',
+    defaultMessage: 'Add language',
+    description: 'Instructions when the user doesn’t have a preferred language set.',
+  },
+  'profile.preferredlanguage.label': {
+    id: 'profile.preferredlanguage.label',
+    defaultMessage: 'Primary Language Spoken',
+    description: 'The label for a user’s primary spoken language.',
+  },
+});
+
+export default messages;
diff --git a/src/components/ProfilePage/SocialLinks.jsx b/src/components/ProfilePage/SocialLinks.jsx
index 3d22714..a898eea 100644
--- a/src/components/ProfilePage/SocialLinks.jsx
+++ b/src/components/ProfilePage/SocialLinks.jsx
@@ -101,15 +101,18 @@ class SocialLinks extends React.Component {
         expression={editMode}
         cases={{
           empty: (
-            <ul className="list-unstyled">
-              {socialLinks.map(({ platform }) => (
-                <EmptyListItem
-                  key={platform}
-                  onClick={this.handleOpen}
-                  name={platformDisplayInfo[platform].name}
-                />
-              ))}
-            </ul>
+            <React.Fragment>
+              <EditableItemHeader content={intl.formatMessage(messages['profile.sociallinks.social.links'])} />
+              <ul className="list-unstyled">
+                {socialLinks.map(({ platform }) => (
+                  <EmptyListItem
+                    key={platform}
+                    onClick={this.handleOpen}
+                    name={platformDisplayInfo[platform].name}
+                  />
+                ))}
+              </ul>
+            </React.Fragment>
           ),
           static: (
             <React.Fragment>
diff --git a/src/components/ProfilePage/elements/EmptyContent.jsx b/src/components/ProfilePage/elements/EmptyContent.jsx
index a7cc4dd..7a226f0 100644
--- a/src/components/ProfilePage/elements/EmptyContent.jsx
+++ b/src/components/ProfilePage/elements/EmptyContent.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPlus } from '@fortawesome/free-solid-svg-icons';
 
@@ -17,16 +16,14 @@ function EmptyContent({ children, onClick, showPlusIcon }) {
   return (
     <div>
       {onClick ? (
-        <Button
-          type="button"
-          color="link"
-          block
-          className="pl-0 text-left"
+        <a
+          role="button"
+          className="pl-0 text-left d-block"
           {...interactiveProps}
         >
           {showPlusIcon ? <FontAwesomeIcon size="xs" className="mr-2" icon={faPlus} /> : null}
           {children}
-        </Button>
+        </a>
       ) : children}
     </div>
   );