Merge pull request #25 from bbc/adds-transcript-form

Adds transcript form

.storybook/addons.js

@@ -1,5 +1,5 @@
-import '@storybook/addon-knobs/register';
 import '@storybook/addon-viewport/register';
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
 import '@storybook/addon-a11y/register';
+

.storybook/config.js

@@ -2,8 +2,6 @@
 import { configure, addDecorator, addParameters } from '@storybook/react';
 import { withA11y } from '@storybook/addon-a11y';
 
-// automatically import all files ending in *.stories.js
-// https://webpack.js.org/guides/dependency-management/
 const components = require.context('../packages/components/', true, /.stories.js$/);
 // const demo = require.context('../demo/', true, /.stories.js$/);
 const styles = require.context('./styles', true, /\.scss$/);

package.json

@@ -58,7 +58,6 @@
     "@babel/core": "^7.5.5",
     "@storybook/addon-a11y": "^5.0.8",
     "@storybook/addon-actions": "^5.1.9",
-    "@storybook/addon-knobs": "^5.0.8",
     "@storybook/addon-links": "^5.1.9",
     "@storybook/addon-viewport": "^5.0.8",
     "@storybook/addons": "^5.1.9",

packages/components/Breadcrumb/index.js

@@ -31,7 +31,7 @@ const CustomBreadcrumb = (props) => {
 };
 
 CustomBreadcrumb.propTypes = {
-  items: PropTypes.list,
+  items: PropTypes.array,
 };
 
 CustomBreadcrumb.defaultProps = {

packages/components/CustomAlert/index.js

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Alert from 'react-bootstrap/Alert';
+
+const CustomAlert = ({ ...props } ) => {
+
+  const [ showAlert, toggleShowAlert ] = useState(props.show);
+
+  const handleDismiss = () => {
+    toggleShowAlert(false);
+  };
+
+  const setAlertHeading = () => {
+    return props.heading ? <Alert.Heading>{props.heading}</Alert.Heading> : null;
+  };
+
+  const setAlert = () => {
+    if (showAlert) {
+      return (
+        <Alert
+          variant={ props.variant }
+          onClose={ handleDismiss }
+          dismissible
+        >
+          {setAlertHeading()}
+          {props.message}
+        </Alert>
+      );
+    } else {
+      return null;
+    }
+  };
+
+  return setAlert();
+};
+
+CustomAlert.propTypes = {
+  show: PropTypes.bool.isRequired,
+  heading: PropTypes.string,
+  message: PropTypes.string,
+  vatiant: PropTypes.string,
+};
+
+CustomAlert.defaultProps = {
+  show: true,
+};
+
+export default CustomAlert;

packages/components/CustomAlert/stories/index.stories.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import CustomAlert from '../index.js';
+
+export const alertProps = {
+  variant: 'danger',
+  heading: 'Error could not contact the server',
+  message: 'There was an error trying to create this transcript on the server',
+  show: true
+};
+
+storiesOf('Custom Alert', module)
+  .add('Default', () => {
+    return (
+      <section style={ { height: '90vh', overflow: 'scroll' } }>
+        <CustomAlert
+          { ...alertProps }
+        />
+      </section>
+    );
+  });

packages/components/FormModal/index.js

@@ -1,22 +1,23 @@
 import React, { useState } from 'react';
+import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
 import PropTypes from 'prop-types';
 import Modal from 'react-bootstrap/Modal';
-import ItemForm from './ItemForm/index.js';
+import ItemForm from '../ItemForm/index.js';
+import TranscriptForm from '../TranscriptForm/index.js';
 
 const ItemFormModal = (props) => {
 
-
   const [ showModal, toggleShowModal ] = useState(props.showModal);
 
+  const form = (props.type === 'transcript') ? <TranscriptForm { ...props }/> : <ItemForm { ...props }/>;
+
   return (
     <Modal show={ showModal } onHide={ () => toggleShowModal(!showModal) }>
       <Modal.Header closeButton>
         <Modal.Title>{props.modalTitle}</Modal.Title>
       </Modal.Header>
       <Modal.Body>
-        <ItemForm
-          { ...props }
-        />
+        {form}
       </Modal.Body>
     </Modal>
   );

packages/components/FormModal/stories/index.stories.js

@@ -1,22 +1,30 @@
 import React from 'react';
-
 import { storiesOf } from '@storybook/react';
 import { actions } from '@storybook/addon-actions';
 import StoryRouter from 'storybook-react-router';
 import FormModal from '../index.js';
-import ItemForm from '../ItemForm';
 
 export const modalItems = [ {
   id: 1,
+  itemType: 'project',
   showModal: true,
-  title: 'Example Transcript Title',
+  title: 'Example Project Title',
   description: 'This is a sample card description. This is fun!',
   url: '/projects/1/transcripts/1234',
   modalTitle: 'Edit Project',
 }, {
   showModal: true,
   modalTitle: 'New Project',
   id: 2
+}, {
+  projectId: 123,
+  title: '',
+  description: '',
+  uploadCompleted: true,
+  showModal: true,
+  modalTitle: 'New Transcript',
+  id: 3,
+  type: 'transcript'
 } ];
 
 export const modalActions = actions({ handleSaveForm: 'Form saved' });
@@ -42,16 +50,13 @@ storiesOf('Form Modal', module)
         />
       </section>
     );
-  });
-
-storiesOf('Form Modal / Item Form', module)
-  .addDecorator(StoryRouter())
-  .add('Edit Project', () => {
+  })
+  .add('New Transcript', () => {
     return (
       <section style={ { height: '90vh', overflow: 'scroll' } }>
-        <ItemForm
+        <FormModal
           { ...modalActions }
-          { ...modalItems[0] }
+          { ...modalItems[2] }
         />
       </section>
     );

packages/components/ItemForm/stories/index.stories.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import StoryRouter from 'storybook-react-router';
+import ItemForm from '../index.js';
+import { modalActions, modalItems } from '../../FormModal/stories/index.stories.js';
+
+storiesOf('Item Form', module)
+  .addDecorator(StoryRouter())
+  .add('Edit Project', () => {
+    return (
+      <section style={ { height: '90vh', overflow: 'scroll' } }>
+        <ItemForm
+          { ...modalActions }
+          { ...modalItems[0] }
+        />
+      </section>
+    );
+  });