From 97f2051b806c017c11c7450b8bc04b1b9cebee3c Mon Sep 17 00:00:00 2001
From: Daniel Palafox <dp852@hotmail.com>
Date: Mon, 20 Sep 2021 19:29:00 -0500
Subject: [PATCH] Fix/7550 design qa updates to names modal (#1151)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: styling updates to names modal

* fix: add missing link

* 🤖 GITHUB ACTIONS: formatting 🤖

* 🤖 GITHUB ACTIONS: testing languages 🤖
---
 .../modal-name/modal-name.component.html      | 99 +++++++------------
 .../modal-name/modal-name.component.scss      |  8 ++
 .../properties/top-bar/top-bar.en.properties  | 12 ++-
 .../properties/top-bar/top-bar.lr.properties  |  8 ++
 .../properties/top-bar/top-bar.rl.properties  |  8 ++
 .../properties/top-bar/top-bar.xx.properties  |  8 ++
 6 files changed, 79 insertions(+), 64 deletions(-)

diff --git a/src/app/record/components/top-bar/modals/modal-name/modal-name.component.html b/src/app/record/components/top-bar/modals/modal-name/modal-name.component.html
index 3366cb59fc..81cdd702ca 100644
--- a/src/app/record/components/top-bar/modals/modal-name/modal-name.component.html
+++ b/src/app/record/components/top-bar/modals/modal-name/modal-name.component.html
@@ -4,29 +4,11 @@
   </app-modal-header>
   <app-modal-side-bar>
     <ng-container id="side-bar-title">
-      <a
-        class="side-bar"
-        i18n="@@topBar.givenAndFamilyNames"
-        (click)="toGivenNames()"
-      >
-        Given and family names
+      <a class="side-bar" i18n="@@topBar.yourNames" (click)="toGivenNames()">
+        Your names
       </a>
     </ng-container>
     <ng-container id="side-bar-url-1">
-      <a
-        class="side-bar"
-        i18n="@@topBar.publishedName"
-        (click)="toPublishedName()"
-      >
-        Published name
-      </a>
-    </ng-container>
-    <ng-container id="side-bar-url-2">
-      <a class="side-bar" i18n="@@shared.visibility" (click)="toVisibility()">
-        Visibility
-      </a>
-    </ng-container>
-    <ng-container id="side-bar-url-3">
       <a class="side-bar" i18n="@@topBar.otherNames" (click)="toAlsoKnownAs()">
         Other names
       </a>
@@ -63,9 +45,7 @@
     >
       <div class="row">
         <p>
-          <strong i18n="@@topBar.givenAndFamilyNames">
-            Given and family names
-          </strong>
+          <strong i18n="@@topBar.yourNames"> Your names </strong>
           <span *ngIf="!platform.columns12" class="required">*</span>
         </p>
         <p *ngIf="platform.columns12" class="required-information mat-caption">
@@ -77,10 +57,28 @@
       </div>
     </div>
     <hr />
-    <p class="orc-font-body-small" i18n="@@topBar.yourGivenAndFamilyNames">
-      Your given and family names. These are used on your ORCID record by
-      default.
+    <p
+      class="orc-font-body-small orcid-has-number"
+      i18n="@@topBar.orcidHasANumber"
+    >
+      ORCID has a number of options for adding and managing your names.
     </p>
+    <a
+      class="underline"
+      rel="noopener noreferrer"
+      target="_blank"
+      href="https://support.orcid.org/hc/en-us/articles/360006973853-Add-and-edit-your-name-on-your-ORCID-record"
+      i18n="@@topBar.findOutMore"
+    >
+      Find out more about managing names in your ORCID record
+    </a>
+    <div class="title orc-font-body">
+      <p class="your-given-names">
+        <strong i18n="@@topBar.yourGivenAndFamilyNames"
+          >Your given and family names.</strong
+        >
+      </p>
+    </div>
     <div class="row">
       <label
         for="given-names-input"
@@ -129,22 +127,14 @@
         />
       </mat-form-field>
     </div>
-    <div
-      id="published-name"
-      class="title"
-      [ngClass]="{
-        'orc-font-body': !platform.columns12,
-        'orc-font-body-large': platform.columns12
-      }"
-    >
+    <div id="published-name" class="title orc-font-body">
       <p>
-        <strong i18n="@@topBar.publishedName">Published name</strong>
+        <strong i18n="@@topBar.yourPublishedName">Your published name</strong>
       </p>
     </div>
-    <hr />
-    <p class="orc-font-body-small" i18n="@@topBar.preferredNameFormat">
-      Your preferred name format and structure. If added the published name will
-      be used instead of your given and family names.
+    <p class="orc-font-body-small" i18n="@@topBar.howYouPreferYourName">
+      How you prefer your name to appear when credited. Adding a published name
+      lets you control how your name is displayed in your ORCID record.
     </p>
     <div class="row">
       <label for="published-names-input" class="mat-caption">
@@ -159,26 +149,18 @@
           formControlName="publishedName"
           placeholder=" {{ ngOrcidAddPublishedName }}"
         />
-        <mat-hint class="mat-caption" i18n="@@topBar.youCanFormat">
-          You can format this name however you wish
-        </mat-hint>
       </mat-form-field>
     </div>
-    <div
-      id="visibility"
-      class="title"
-      [ngClass]="{
-        'orc-font-body': !platform.columns12,
-        'orc-font-body-large': platform.columns12
-      }"
-    >
+    <div id="visibility" class="title orc-font-body">
       <p>
-        <strong i18n="@@shared.visibility">Visibility</strong>
+        <strong i18n="@@topBar.whoCanSeeYourNames"
+          >Who can see your names</strong
+        >
       </p>
     </div>
-    <hr />
-    <p class="orc-font-body-small" i18n="@@shared.whoCanSeeName">
-      Who can see your name. The default visibility setting is Private.
+    <p class="orc-font-body-small" i18n="@@topBar.manageWhoCanSee">
+      Manage who can see your given, family and published names. By default your
+      names are set to Public and can be seen by everyone.
     </p>
     <div class="row">
       <div class="col no-wrap actions-wrapper no-gutters">
@@ -200,18 +182,13 @@
       </p>
     </div>
     <hr />
-    <p class="orc-font-body-small">
-      You can add variants of your name, such as an abbreviated first name,
+    <p class="orc-font-body-small" i18n="@@topBar.addOtherNames">
+      Add other names you may be known by. These can include abbreviated names,
       middle names, former names or names in a different character set or
       language. Adding other names can help people find your record when they
       search the ORCID registry.
     </p>
     <ng-container *ngIf="otherNames.length > 0">
-      <div class="row">
-        <label for="alternative-names-input" class="mat-caption">
-          <strong i18n="@@topBar.otherNames">Other names</strong>
-        </label>
-      </div>
       <div
         class="row"
         id="otherName-dropList"
diff --git a/src/app/record/components/top-bar/modals/modal-name/modal-name.component.scss b/src/app/record/components/top-bar/modals/modal-name/modal-name.component.scss
index d874c11c1b..a1169b7fbb 100644
--- a/src/app/record/components/top-bar/modals/modal-name/modal-name.component.scss
+++ b/src/app/record/components/top-bar/modals/modal-name/modal-name.component.scss
@@ -101,6 +101,10 @@ label {
   p {
     margin: 6px 0;
   }
+
+  .your-given-names {
+    margin-bottom: 10px;
+  }
 }
 
 .mat-form-field {
@@ -132,6 +136,10 @@ label {
   margin: 20px 0 30px 0;
 }
 
+.orcid-has-number {
+  margin-bottom: 0;
+}
+
 .add-more {
   margin-top: 16px;
 
diff --git a/src/locale/properties/top-bar/top-bar.en.properties b/src/locale/properties/top-bar/top-bar.en.properties
index cde1af6501..19d3a3449a 100644
--- a/src/locale/properties/top-bar/top-bar.en.properties
+++ b/src/locale/properties/top-bar/top-bar.en.properties
@@ -1,6 +1,7 @@
 topBar.names=Names
 topBar.biography=Biography
 topBar.publishedName=Published name
+topBar.yourPublishedName=Your published name
 topBar.alsoKnowAs=Also known as
 topBar.otherNames=Other names
 topBar.addYourBiography=Add you biography
@@ -9,14 +10,16 @@ topBar.addFamilyName=Add family name
 topBar.addPublishedName=Add a published or credit name
 topBar.addOtherName=Add other name
 topBar.information=Information about yourself, your research interests and other pertinent details that enhance your ORCID record.
-topBar.givenAndFamilyNames=Given and family names
-topBar.yourGivenAndFamilyNames=Your given and family names. These are used on your ORCID record by default.
+topBar.yourNames=Your names
+topBar.yourGivenAndFamilyNames=Your given and family names.
+topBar.orcidHasANumber=ORCID has a number of options for adding and managing your names.
+topBar.findOutMore=Find out more about managing names in your ORCID record
 topBar.givenNames=Given names
 topBar.firstNameError=Please enter your first/given name
 topBar.invalidName=Invalid name characters or format
 topBar.invalidBio=Invalid characters or format
 topBar.familyNames=Family names
-topBar.preferredNameFormat=Your preferred name format and structure. If added the published name will be used instead of your given and family names.
+topBar.howYouPreferYourName=How you prefer your name to appear when credited. Adding a published name lets you control how your name is displayed in your ORCID record.
 topBar.youCanFormat=You can format this name however you wish
 topBar.otherVariants=You can add variants of your name, such as an abbreviated first name, middle names, former names or names in a different character set or language. Adding other names can help people find your record when they search the ORCID registry.
 topBar.addAnotherName=Add another name
@@ -37,3 +40,6 @@ topBar.myKeywords=My keywords
 topBar.keywordsAre=Keywords are words or phrases which describe your research activities. Adding keywords can help people find you when searching the ORCID registry.
 topBar.addAnotherKeyword=Add another keyword
 topBar.addKeyword=Add a keyword
+topBar.whoCanSeeYourNames=Who can see your names
+topBar.manageWhoCanSee=Manage who can see your given, family and published names. By default your names are set to Public and can be seen by everyone.
+topBar.addOtherNames=Add other names you may be known by. These can include abbreviated names, middle names, former names or names in a different character set or language. Adding other names can help people find your record when they search the ORCID registry.
diff --git a/src/locale/properties/top-bar/top-bar.lr.properties b/src/locale/properties/top-bar/top-bar.lr.properties
index eae806e907..de18790fc2 100644
--- a/src/locale/properties/top-bar/top-bar.lr.properties
+++ b/src/locale/properties/top-bar/top-bar.lr.properties
@@ -37,3 +37,11 @@ topBar.addLinksDescription=LR
 topBar.keywordsAre=LR
 topBar.addLink=LR
 topBar.addKeyword=LR
+topBar.yourPublishedName=LR
+topBar.yourNames=LR
+topBar.orcidHasANumber=LR
+topBar.findOutMore=LR
+topBar.howYouPreferYourName=LR
+topBar.whoCanSeeYourNames=LR
+topBar.manageWhoCanSee=LR
+topBar.addOtherNames=LR
diff --git a/src/locale/properties/top-bar/top-bar.rl.properties b/src/locale/properties/top-bar/top-bar.rl.properties
index a5a90d81b8..3d022b2fbb 100644
--- a/src/locale/properties/top-bar/top-bar.rl.properties
+++ b/src/locale/properties/top-bar/top-bar.rl.properties
@@ -37,3 +37,11 @@ topBar.addLinksDescription=RL
 topBar.keywordsAre=RL
 topBar.addLink=RL
 topBar.addKeyword=RL
+topBar.yourPublishedName=RL
+topBar.yourNames=RL
+topBar.orcidHasANumber=RL
+topBar.findOutMore=RL
+topBar.howYouPreferYourName=RL
+topBar.whoCanSeeYourNames=RL
+topBar.manageWhoCanSee=RL
+topBar.addOtherNames=RL
diff --git a/src/locale/properties/top-bar/top-bar.xx.properties b/src/locale/properties/top-bar/top-bar.xx.properties
index 14bd491582..71209802fe 100644
--- a/src/locale/properties/top-bar/top-bar.xx.properties
+++ b/src/locale/properties/top-bar/top-bar.xx.properties
@@ -37,3 +37,11 @@ topBar.addLinksDescription=X
 topBar.keywordsAre=X
 topBar.addLink=X
 topBar.addKeyword=X
+topBar.yourPublishedName=X
+topBar.yourNames=X
+topBar.orcidHasANumber=X
+topBar.findOutMore=X
+topBar.howYouPreferYourName=X
+topBar.whoCanSeeYourNames=X
+topBar.manageWhoCanSee=X
+topBar.addOtherNames=X