Fw 5019 form fields clarification (#186)

* fixed casing and wording

* fixed casing and wording for songs and stories forms

* completed casing, wrding and spacing issues for stories CRUD

* updated casing and wording for widget CRUD

* casing and wording for custom page CRUD

* fixed casing and wording in home Crud and widget.cy.js

* fixed casing in character edit

* fixed casing and wording for dashboard media

* created FieldButton component to reduce duplication

* manage props for FieldButton.js

* changed div to ul for accessibility issue

* changed ul back to div after more thought on it, its not a list

* resolve comments

cypress/e2e/login/widgets.cy.js

@@ -2,9 +2,9 @@
 
 function checkValidation(widgetName) {
   cy.contains(widgetName).click()
-  cy.contains('Create Widget').click()
+  cy.contains('Create widget').click()
   cy.get('.text-red-500').should('exist')
-  cy.contains('Go Back').click()
+  cy.contains('Go back').click()
 }
 
 function createwidget(name) {
@@ -14,11 +14,11 @@ function createwidget(name) {
 }
 
 function throughme(name) {
-  cy.contains('Create Widget').click()
+  cy.contains('Create widget').click()
   cy.wait(1000)
   cy.get('[href="/lilwat/dashboard/edit"]').click()
   cy.wait(1000)
-  cy.contains('Edit Widgets').click()
+  cy.contains('Edit widgets').click()
 
   cy.contains(name)
     .scrollIntoView()
@@ -30,7 +30,7 @@ function throughme(name) {
 
   cy.get('#widgetName').should('contain.value', name)
   cy.wait(1500)
-  cy.contains('Delete Widget').click()
+  cy.contains('Delete widget').click()
   cy.get('#RemoveWidgetModalContent').contains('Delete').click()
 }
 

src/common/dataHooks/useSearchLoader.js

@@ -51,7 +51,7 @@ function useSearchLoader({ searchParams }) {
       sitename: result?.entry?.site?.slug,
       siteTitle: result?.entry?.site?.title,
       visibility: result?.entry?.visibility,
-      siteVisibility: result?.entry?.site.visibility,
+      siteVisibility: result?.entry?.site?.visibility,
     }
     switch (result?.type) {
       case TYPE_WORD:

src/components/CategoryCrud/CategoryCrudPresentation.js

@@ -86,10 +86,10 @@ function CategoryCrudPresentation({
           </div>
           <div className="col-span-12 flex justify-end mt-6 px-6">
             <Form.SubmitButtons
-              submitLabel={isCreateMode ? 'Create Category' : 'Save Changes'}
+              submitLabel={isCreateMode ? 'Create category' : 'Save changes'}
               submitIcon={isCreateMode ? 'Add' : 'Save'}
               cancelIcon={isCreateMode ? 'BackArrow' : 'Close'}
-              cancelLabel={isCreateMode ? 'Go Back' : 'Cancel'}
+              cancelLabel={isCreateMode ? 'Go back' : 'Cancel'}
               onCancelClick={backHandler}
               onSubmitClick={handleSubmit(submitHandler)}
             />

src/components/CharacterCrud/CharacterCrudPresentation.js

@@ -41,7 +41,7 @@ function CharacterCrudPresentation({ backHandler, dataToEdit, submitHandler }) {
         <div className="mt-6 grid grid-cols-12 gap-6">
           <div className="col-span-12">
             <Form.EntryArrayField
-              label="Related Content"
+              label="Related content"
               nameId="relatedDictionaryEntries"
               control={control}
               register={register}
@@ -107,7 +107,7 @@ function CharacterCrudPresentation({ backHandler, dataToEdit, submitHandler }) {
           </div>
           <div className="col-span-12 flex justify-end mt-6 px-6">
             <Form.SubmitButtons
-              submitLabel="Save Changes"
+              submitLabel="Save changes"
               submitIcon="Save"
               cancelIcon="Close"
               cancelLabel="Cancel"

src/components/DashboardCreate/DashboardCreateData.js

@@ -65,7 +65,7 @@ function DashboardCreateData({ urlPrefix = '' }) {
     WIDGET: {
       icon: 'Widget',
       name: 'Create a Widget',
-      description: "Add a new Widget to your site's collection",
+      description: "Add a new widget to your site's collection",
       href: addUrlPrefix('widget'),
       iconColor: 'songText',
       auth: LANGUAGE_ADMIN,

src/components/DashboardEdit/DashboardEditData.js

@@ -73,7 +73,7 @@ function DashboardEditData({ urlPrefix = '' }) {
     WIDGETS: {
       icon: 'Widget',
       name: 'Edit Widgets',
-      description: 'Manage and edit the Widgets on your site',
+      description: 'Manage and edit the widgets on your site',
       href: addUrlPrefix('widgets'),
       iconColor: 'songText',
       auth: LANGUAGE_ADMIN,

src/components/DictionaryCrud/DictionaryCrudPresentation.js

@@ -114,15 +114,21 @@ function DictionaryCrudPresentation({
           <Fragment key={step}>
             <div className="col-span-12">
               <Form.TextField
-                label={getFriendlyDocType({ docType: type, titleCase: true })}
+                label={`${getFriendlyDocType({
+                  docType: type,
+                  titleCase: true,
+                })} in your language`}
                 nameId="title"
                 register={register}
                 errors={errors}
               />
             </div>
             <div className="col-span-12">
               <Form.TextArrayField
-                label="Translations"
+                label={`${getFriendlyDocType({
+                  docType: type,
+                  titleCase: true,
+                })} translations`}
                 nameId="translations"
                 register={register}
                 control={control}
@@ -161,7 +167,7 @@ function DictionaryCrudPresentation({
             </div>
             <div className="col-span-12">
               <Form.EntryArrayField
-                label="Related Content"
+                label="Related content"
                 nameId="relatedEntries"
                 control={control}
                 register={register}
@@ -332,7 +338,7 @@ function DictionaryCrudPresentation({
                 activeStepNumber < 1 ? 'Close' : 'Previous',
                 'fill-current -ml-1 mr-2 h-5 w-5',
               )}
-              <span>{activeStep < 1 ? 'Cancel' : 'Previous Step'}</span>
+              <span>{activeStep < 1 ? 'Cancel' : 'Previous step'}</span>
             </button>
             <button
               type="button"
@@ -353,7 +359,7 @@ function DictionaryCrudPresentation({
                 activeStepNumber === lastStep ? 'opacity-0 cursor-default' : ''
               } bg-white h-full border border-gray-300 rounded-lg shadow-sm py-2 px-4 inline-flex items-center justify-center text-sm font-medium text-fv-charcoal hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary-light`}
             >
-              <span>Next Step</span>
+              <span>Next step</span>
               {getIcon('Next', 'fill-current ml-2 -mr-1 h-5 w-5')}
             </button>
           </div>
@@ -403,11 +409,11 @@ function DictionaryCrudPresentation({
               submitLabel={
                 isCreate
                   ? `Add ${getFriendlyDocType({ docType: type })}`
-                  : 'Save Changes'
+                  : 'Save changes'
               }
               submitIcon={isCreate ? 'Add' : 'Save'}
               cancelIcon={isCreate ? 'BackArrow' : 'Close'}
-              cancelLabel={isCreate ? 'Go Back' : 'Cancel'}
+              cancelLabel={isCreate ? 'Go back' : 'Cancel'}
               onCancelClick={backHandler}
               onSubmitClick={handleSubmit(submitHandler)}
             />

src/components/ErrorHandler/ErrorHandlerPresentation.js

@@ -30,7 +30,7 @@ function ErrorHandlerPresentation({ backHandler, status, heading, content }) {
               'BackArrow',
               'inline-flex pb-2 h-7 fill-current mr-2 h-10',
             )}
-            Go Back
+            Go back
           </button>
         </div>
         <a
@@ -39,7 +39,7 @@ function ErrorHandlerPresentation({ backHandler, status, heading, content }) {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Report Problem
+          Report problem
         </a>
       </div>
     </div>

src/components/Form/CategoryArrayField.js

@@ -7,7 +7,7 @@ import getIcon from 'common/utils/getIcon'
 import { useModalSelector } from 'common/hooks/useModalController'
 import Modal from 'components/Modal'
 import CategoriesBrowser from 'components/CategoriesBrowser'
-
+import FieldButton from 'components/Form/FieldButton'
 function CategoryArrayField({
   label,
   nameId,
@@ -56,16 +56,8 @@ function CategoryArrayField({
             </li>
           ))}
         </ul>
-
         {fields?.length < maxItems && (
-          <button
-            type="button"
-            onClick={() => openModal()}
-            className="bg-white border-2 border-primary text-primary hover:bg-gray-50 rounded-lg shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium  focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary-light"
-          >
-            {getIcon('Add', 'fill-current -ml-1 mr-2 h-5 w-5')}
-            <span>Add {label}</span>
-          </button>
+          <FieldButton label={label} openModal={openModal} />
         )}
       </div>
       {helpText && (

src/components/Form/EntryArrayField.js

@@ -8,6 +8,7 @@ import { useModalSelector } from 'common/hooks/useModalController'
 import Modal from 'components/Modal'
 import EntrySelector from 'components/EntrySelector'
 import { TYPE_WORD, TYPE_PHRASE } from 'common/constants'
+import FieldButton from 'components/Form/FieldButton'
 
 function EntryArrayField({
   label,
@@ -56,16 +57,8 @@ function EntryArrayField({
             </li>
           ))}
         </ul>
-
         {fields?.length < maxItems && (
-          <button
-            type="button"
-            onClick={() => openModal()}
-            className="bg-white border-2 border-primary text-primary hover:bg-gray-50 rounded-lg shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium  focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary-light"
-          >
-            {getIcon('Add', 'fill-current -ml-1 mr-2 h-5 w-5')}
-            <span>Add {label}</span>
-          </button>
+          <FieldButton label={label} openModal={openModal} />
         )}
       </div>
       {helpText && (

src/components/Form/FieldButton.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+// FPCC
+import getIcon from 'common/utils/getIcon'
+
+function FieldButton({ label, openModal, append }) {
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={openModal ? () => openModal() : () => append({ text: '' })}
+        className="bg-white border-2 border-primary text-primary hover:bg-gray-50 rounded-lg shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium  focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary-light"
+      >
+        {getIcon('Add', 'fill-current -ml-1 mr-2 h-5 w-5')}
+        <span>Add {label.toLowerCase()}</span>
+      </button>
+    </div>
+  )
+}
+
+// Proptypes
+const { func, string } = PropTypes
+FieldButton.propTypes = {
+  label: string,
+  openModal: func,
+  append: func,
+}
+
+export default FieldButton

src/components/Form/NextPrevious.js

@@ -1,11 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { Link } from 'react-router-dom'
 
 // FPCC
 import getIcon from 'common/utils/getIcon'
 import useSearchParamsState from 'common/hooks/useSearchParamsState'
 
-function NextPrevious({ numberOfSteps, onClickCallback }) {
+function NextPrevious({ numberOfSteps, onClickCallback, sitename }) {
   const [activeStep, setActiveStep] = useSearchParamsState({
     searchParamName: 'step',
     defaultValue: '0',
@@ -20,39 +21,47 @@ function NextPrevious({ numberOfSteps, onClickCallback }) {
   }
 
   return (
-    <div role="list" className="flex w-full justify-between p-2">
+    <div className="flex w-full justify-between p-2">
       {activeStepNumber > 0 ? (
         <button
           type="button"
-          className="inline-flex items-center text-xl text-fv-charcoal"
+          className="bg-white border border-gray-300 rounded-lg shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-fv-charcoal hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary-light"
           onClick={() => onStepClick({ forward: false })}
         >
           {getIcon('Next', 'fill-current rotate-180 h-5 mr-2')}{' '}
-          <span>PREVIOUS</span>
+          <span>Previous</span>
         </button>
       ) : (
         <div></div>
       )}
       {activeStepNumber !== numberOfSteps - 1 ? (
         <button
           type="button"
-          className="inline-flex items-center text-xl text-fv-charcoal"
+          className="ml-5 bg-secondary border border-transparent rounded-lg shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-secondary-light focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary-light"
           onClick={() => onStepClick({ forward: true })}
         >
-          <span>NEXT STEP</span> {getIcon('Next', 'fill-current h-5 ml-2')}
+          <span>Next step</span> {getIcon('Next', 'fill-current h-5 ml-2')}
         </button>
       ) : (
-        <div></div>
+        <div className="flex w-full justify-end">
+          <Link
+            to={`/${sitename}/dashboard/edit/entries?types=story`}
+            className="bg-secondary hover:bg-secondary-light text-white border border-transparent rounded-lg shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary-light"
+          >
+            <span>Finish</span>
+          </Link>
+        </div>
       )}
     </div>
   )
 }
 
 // PROPTYPES
-const { number, func } = PropTypes
+const { number, func, string } = PropTypes
 NextPrevious.propTypes = {
   numberOfSteps: number,
   onClickCallback: func,
+  sitename: string,
 }
 
 export default NextPrevious

src/components/Form/TextArrayField.js

@@ -5,7 +5,7 @@ import { useFieldArray } from 'react-hook-form'
 // FPCC
 import getIcon from 'common/utils/getIcon'
 import { convertJsonToReadableString } from 'common/utils/stringHelpers'
-
+import FieldButton from 'components/Form/FieldButton'
 function TextArrayField({
   label,
   nameId,
@@ -67,14 +67,7 @@ function TextArrayField({
           ))}
         </ul>
         {fields?.length < maxItems && (
-          <button
-            type="button"
-            onClick={() => append({ text: '' })}
-            className="bg-white border-2 border-primary text-primary hover:bg-gray-50 rounded-lg shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium  focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary-light"
-          >
-            {getIcon('Add', 'fill-current -ml-1 mr-2 h-5 w-5')}
-            <span>Add {label.slice(0, -1)}</span>
-          </button>
+          <FieldButton label={label} append={append} />
         )}
       </div>
       {helpText && (

src/components/Form/TextTranslationArrayField.js

@@ -21,7 +21,9 @@ function TextTranslationArrayField({
 
   return (
     <Fragment key={`${nameId}_TextTranslationArrayField`}>
-      <label className="block font-medium text-fv-charcoal">{label}</label>
+      <label className="block text-sm font-medium text-fv-charcoal">
+        {label}
+      </label>
       <div className="space-y-2 mt-2">
         <ul className="space-y-4">
           {fields.map((item, index) => (
@@ -91,7 +93,7 @@ function TextTranslationArrayField({
             className="bg-white border-2 border-primary text-primary hover:bg-gray-50 rounded-lg shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium  focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary-light"
           >
             {getIcon('Add', 'fill-current -ml-1 mr-2 h-5 w-5')}
-            <span>Add {label.slice(0, -1)}</span>
+            <span>Add {label.slice(0, -1).toLowerCase()}</span>
           </button>
         )}
       </div>

src/components/Form/index.js

@@ -3,6 +3,7 @@ import Autocomplete from 'components/Form/Autocomplete'
 import AutocompleteMultiple from 'components/Form/AutocompleteMultiple'
 import CategoryArrayField from 'components/Form/CategoryArrayField'
 import EntryArrayField from 'components/Form/EntryArrayField'
+import FieldButton from 'components/Form/FieldButton'
 import FileUploadField from 'components/Form/FileUploadField'
 import Header from 'components/Form/Header'
 import MediaArrayField from 'components/Form/MediaArrayField'
@@ -26,6 +27,7 @@ export default {
   AutocompleteMultiple,
   CategoryArrayField,
   EntryArrayField,
+  FieldButton,
   FileUploadField,
   Header,
   MediaArrayField,

src/components/HomeCrud/HomeCrudPresentation.js

@@ -26,7 +26,7 @@ function HomeCrudPresentation({ site }) {
               className="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg shadow-sm text-white bg-primary hover:bg-primary-light"
             >
               {getIcon('Pencil', 'fill-current -ml-1 mr-2 h-5 w-5')}
-              <span>Edit Banner and Logo</span>
+              <span>Edit banner and logo</span>
             </Link>
           </div>
         </div>