diff --git a/CHANGELOG.md b/CHANGELOG.md index 35c2694..e6d5342 100644 --- a/CHANGELOG.md +++ b/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 \ No newline at end of file +- I230 Updated design of the workspace: TranscriptRow component + +## 1.26.0 +- I92 Updates placeholder text and titles of project, transcript and programme script modals \ No newline at end of file diff --git a/package.json b/package.json index 12c2543..b72e8d2 100644 --- a/package.json +++ b/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": { diff --git a/src/FormModal/stories/index.stories.js b/src/FormModal/stories/index.stories.js index d17ad58..3f80b5f 100644 --- a/src/FormModal/stories/index.stories.js +++ b/src/FormModal/stories/index.stories.js @@ -18,7 +18,7 @@ storiesOf('Form Modal', module) ); }) - .add('New project', () => { + .add('New programme script', () => { return (
{ - + 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 (
- - Title + + {formValues[type].title} setTitle(e.target.value) } /> - - Choose a title - Looks good! - Please choose a title + {formValues[type].titleFeedback} - + Description 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; diff --git a/src/PreviewCanvas/Controls.js b/src/PreviewCanvas/Controls.js index 3becc69..cb2cc2c 100644 --- a/src/PreviewCanvas/Controls.js +++ b/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 = ; const pauseIcon = ; @@ -13,7 +12,8 @@ const stopIcon = ; 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 }; diff --git a/src/TranscriptRow/index.js b/src/TranscriptRow/index.js index 3404019..ec8ed86 100644 --- a/src/TranscriptRow/index.js +++ b/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 ( @@ -142,14 +137,6 @@ const TranscriptRow = (props) => { /> - - - ) : null} @@ -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); \ No newline at end of file diff --git a/src/dummy.js b/src/dummy.js index eec4411..b70edc6 100644 --- a/src/dummy.js +++ b/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' } ];