refactor(modal): #92 Add different form values for projects and scrip…

…ts (#95)

* refactor(modal): #92 Add different form values for projects and scripts

* refactor(form): #92 Add form group ids

* refactor(form): #92 Removes useEffect import

* chore(merge): #92 Complete merge and remove console errors

* chore(transcripts): Remove cancelUpload button that is not working

* chore(semver): #92 Update changelog and version number

CHANGELOG.md

@@ -26,4 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - I222 Updated design of the workspace: List, ProjectRow and TranscriptRow components
 
 ## [ 1.25.0 ]
-- I230 Updated design of the workspace: TranscriptRow component
+- I230 Updated design of the workspace: TranscriptRow component
+
+## 1.26.0
+- I92 Updates placeholder text and titles of project, transcript and programme script modals

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/digital-paper-edit-storybook",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "description": "",
   "main": "index.js",
   "scripts": {

src/FormModal/stories/index.stories.js

@@ -18,7 +18,7 @@ storiesOf('Form Modal', module)
       </section>
     );
   })
-  .add('New project', () => {
+  .add('New programme script', () => {
     return (
       <section style={ { height: '90vh', overflow: 'scroll' } }>
         <FormModal

src/ItemForm/index.js

@@ -1,20 +1,21 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import Form from 'react-bootstrap/Form';
 import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
 
 const ItemForm = (props) => {
-
+  const type = props.type.toLowerCase();
   const [ description, setDescription ] = useState('');
   const [ isValidated, setIsValidated ] = useState(false);
   const [ title, setTitle ] = useState('');
 
-  useEffect (() => {
+  useEffect(() => {
     setDescription(props.description);
     setTitle(props.title);
 
     return () => {
+
     };
   }, [ props.description, props.title ]);
 
@@ -37,36 +38,54 @@ const ItemForm = (props) => {
     }
   };
 
+  const formValues = {
+    'project': {
+      title: 'Project title',
+      titlePlaceholder: 'Enter a project title',
+      titleFeedback: 'Please choose a project title',
+      descriptionPlaceholder: 'Enter a project description (optional)'
+    },
+    'programme-script': {
+      title: 'Programme script title',
+      titlePlaceholder: 'Enter a programme script title',
+      titleFeedback: 'Please choose a programme script title',
+      descriptionPlaceholder: 'Enter a programme script description (optional)'
+    },
+    'transcript': {
+      title: 'Transcript title',
+      titlePlaceholder: 'Enter a transcript title',
+      titleFeedback: 'Please choose a transcript title',
+      descriptionPlaceholder: 'Enter a transcript description (optional)'
+    }
+  };
+
   return (
 
     <Form noValidate
       validated={ isValidated }
       onSubmit={ handleSubmit }
     >
-      <Form.Group controlId="formBasicEmail">
-        <Form.Label>Title</Form.Label>
+      <Form.Group controlId={ `form.${ type }-title` }>
+        <Form.Label>{formValues[type].title}</Form.Label>
         <Form.Control
           required
           type="text"
           name="title"
-          placeholder="Enter a project title"
+          placeholder={ formValues[type].titlePlaceholder }
           value={ title }
           onChange={ (e) => setTitle(e.target.value) }
         />
-        <Form.Text className="text-muted">
-          Choose a title
-        </Form.Text>
         <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
         <Form.Control.Feedback type="invalid">
-          Please choose a title
+          {formValues[type].titleFeedback}
         </Form.Control.Feedback>
       </Form.Group>
 
-      <Form.Group controlId="formBasicEmail">
+      <Form.Group controlId={ `form.${ type }-description` }>
         <Form.Label>Description</Form.Label>
         <Form.Control
           type="text"
-          placeholder="Enter a project description"
+          placeholder={ formValues[type].descriptionPlaceholder }
           value={ description }
           name="description"
           onChange={ (e) => setDescription(e.target.value) }
@@ -89,13 +108,14 @@ ItemForm.propTypes = {
   id: PropTypes.string,
   title: PropTypes.string,
   description: PropTypes.string,
+  type: PropTypes.string,
   showModal: PropTypes.bool,
   modalTitle: PropTypes.string,
   handleSaveForm: PropTypes.func.isRequired,
 };
 
 ItemForm.defaultProps = {
-  showModal: false
+  showModal: false,
 };
 
 export default ItemForm;

src/PreviewCanvas/Controls.js

@@ -4,7 +4,6 @@ import Col from 'react-bootstrap/Col';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPlay, faPause, faStop } from '@fortawesome/free-solid-svg-icons';
 import PropTypes from 'prop-types';
-import VideoContext from 'videocontext';
 
 const playIcon = <FontAwesomeIcon icon={ faPlay } />;
 const pauseIcon = <FontAwesomeIcon icon={ faPause } />;
@@ -13,7 +12,8 @@ const stopIcon = <FontAwesomeIcon icon={ faStop } />;
 const Controls = (props) => {
 
   const [ isPlaying, setIsPlaying ] = useState(false);
-  const [ videoContext, setVideoContext ] = useState(props.videoContext);
+
+  const [ videoContext ] = useState(props.videoContext);
 
   const handlePlay = () => {
     props.handlePlay();
@@ -76,5 +76,6 @@ export default Controls;
 Controls.propTypes = {
   handleStop: PropTypes.any,
   handlePlay: PropTypes.any,
-  handlePause: PropTypes.any
+  handlePause: PropTypes.any,
+  videoContext: PropTypes.any
 };

src/TranscriptRow/index.js

@@ -15,7 +15,6 @@ import {
   faEllipsisV,
   faCheckCircle,
   faHourglassEnd,
-  faTimes
 } from '@fortawesome/free-solid-svg-icons';
 
 const TranscriptRow = (props) => {
@@ -33,10 +32,6 @@ const TranscriptRow = (props) => {
     props.handleEditItem(props.id);
   };
 
-  const handleCancelUpload = () => {
-    props.handleCancelItemUpload(props.id);
-  };
-
   const HeaderRow = ({ children }) => {
     return (
       <Row style={ { lineHeight: '100%', marginTop: '0.5rem' } }>
@@ -142,14 +137,6 @@ const TranscriptRow = (props) => {
                   />
                 </div>
               </Col>
-              <Col xs={ 2 } sm={ 1 }>
-                <FontAwesomeIcon
-                  icon={ faTimes }
-                  onClick={ handleCancelUpload }
-                  style={ {
-                    marginLeft: '0.4rem'
-                  } }/>
-              </Col>
             </Row>
           ) : null}
         </MessageRow>
@@ -235,11 +222,10 @@ const TranscriptRow = (props) => {
 TranscriptRow.propTypes = {
   description: PropTypes.string,
   message: PropTypes.string,
-  mediaDuration: PropTypes.string,
+  mediaDuration: PropTypes.any,
   transcriptionDuration: PropTypes.number,
   handleDeleteItem: PropTypes.func.isRequired,
   handleEditItem: PropTypes.func.isRequired,
-  handleCancelItemUpload: PropTypes.func.isRequired,
   icon: PropTypes.any,
   id: PropTypes.string.isRequired,
   status: PropTypes.string,
@@ -255,4 +241,4 @@ TranscriptRow.defaultProps = {
   description: '',
 };
 
-export default React.memo(TranscriptRow);
+export default React.memo(TranscriptRow);

src/dummy.js

@@ -85,7 +85,7 @@ const transcriptItems = [
 const modalItems = [
   {
     id: '1',
-    type: 'Project',
+    type: 'project',
     showModal: true,
     title: 'Example Project Title',
     description: 'This is a sample card description. This is fun!',
@@ -94,9 +94,9 @@ const modalItems = [
   },
   {
     showModal: true,
-    modalTitle: 'New Project',
+    modalTitle: 'New programme script',
     id: '2',
-    type: 'Project'
+    type: 'programme-script'
   },
   {
     projectId: '123',
@@ -106,7 +106,7 @@ const modalItems = [
     showModal: true,
     modalTitle: 'New Transcript',
     id: '3',
-    type: 'Transcript'
+    type: 'transcript'
   },
   {
     projectId: '1234',
@@ -116,7 +116,7 @@ const modalItems = [
     showModal: false,
     modalTitle: 'New Transcript',
     id: '4',
-    type: 'Transcript'
+    type: 'transcript'
   }
 ];