replace default input with url adding UI

src/data/form-publish.json

@@ -16,18 +16,6 @@
       "required": true,
       "rows": 5
     },
-    "price": {
-      "label": "Price",
-      "placeholder": "i.e. 1000",
-      "type": "number",
-      "required": true
-    },
-    "author": {
-      "label": "Author",
-      "placeholder": "i.e. Jelly McJellyfish",
-      "type": "text",
-      "required": true
-    },
     "files": {
       "label": "Files",
       "placeholder": "i.e. https://file.com/file.json",
@@ -41,6 +29,12 @@
       "required": true,
       "options": ["Data set", "Algorithm", "Container", "Workflow", "Other"]
     },
+    "author": {
+      "label": "Author",
+      "placeholder": "i.e. Jelly McJellyfish",
+      "type": "text",
+      "required": true
+    },
     "license": {
       "label": "License",
       "type": "select",

src/routes/Publish/Files/Item.module.scss

@@ -1,10 +1,5 @@
 @import '../../../styles/variables';
 
-.linkType {
-    margin-left: $spacer / 4;
-    font-size: $font-size-small;
-}
-
 .linkUrl {
     font-size: $font-size-mini;
     display: block;

src/routes/Publish/Files/ItemForm.module.scss

@@ -5,25 +5,6 @@
     margin-bottom: $spacer / 1.5;
     padding-left: $spacer / 2;
 
-    > div {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-    }
-
-    :global(.input-wrap) {
-        flex: 1 1 100%;
-    }
-
-    :global(.form__group) {
-        margin-bottom: $spacer / 2;
-        flex: 1 1 100%;
-
-        @media (min-width: $break-point--small) {
-            flex: 0 0 48%;
-        }
-    }
-
     label,
     input,
     select,

src/routes/Publish/Files/ItemForm.tsx

@@ -6,6 +6,7 @@ import styles from './ItemForm.module.scss'
 
 interface ItemFormProps {
     addItem: any
+    placeholder: string
 }
 
 interface ItemFormStates {
@@ -44,8 +45,8 @@ export default class ItemForm extends PureComponent<
         this.props.addItem(url)
     }
 
-    public onChangeUrl = (e: Event) => {
+    public onChangeUrl = (e: React.FormEvent<HTMLInputElement>) => {
-        // this.setState({ url: e.target.value })
+        this.setState({ url: e.currentTarget.value })
         this.clearErrors()
     }
 
@@ -64,13 +65,13 @@ export default class ItemForm extends PureComponent<
                     name="url"
                     required
                     type="url"
-                    placeholder="e.g. https://url.com/info"
+                    placeholder={this.props.placeholder}
                     value={url}
                     onChange={this.onChangeUrl}
                 />
 
                 <Button onClick={(e: Event) => this.handleSubmit(e)}>
-                    Add Link
+                    Add File
                 </Button>
 
                 {hasError && (

src/routes/Publish/Files/index.module.scss

@@ -2,7 +2,6 @@
 
 .newItems {
     margin-top: $spacer / 2;
-    border-top: 1px solid $brand-grey-lighter;
 }
 
 .itemsList {

src/routes/Publish/Files/index.tsx

@@ -1,12 +1,15 @@
 import React, { PureComponent } from 'react'
 import { CSSTransition, TransitionGroup } from 'react-transition-group'
 import Button from '../../../components/atoms/Button'
+import Help from '../../../components/atoms/Form/Help'
 import ItemForm from './ItemForm'
 import Item from './Item'
 import styles from './index.module.scss'
 
 interface FilesProps {
     files: any
+    placeholder: string
+    help: string
     // resetForm: any
 }
 
@@ -37,41 +40,51 @@ export default class Files extends PureComponent<FilesProps, FilesStates> {
         const { isFormShown } = this.state
 
         return (
-            <div className={styles.newItems}>
+            <>
-                {this.props.files && (
+                <Help>{this.props.help}</Help>
-                    <TransitionGroup
+                <div className={styles.newItems}>
-                        component="ul"
+                    {this.props.files.length > 1 && (
-                        className={styles.itemsList}
+                        <TransitionGroup
+                            component="ul"
+                            className={styles.itemsList}
+                        >
+                            {this.props.files.map(
+                                (item: string, index: number) => (
+                                    <CSSTransition
+                                        key={index}
+                                        timeout={400}
+                                        classNames="fade"
+                                    >
+                                        <Item
+                                            item={item}
+                                            removeItem={() =>
+                                                this.removeItem(index)
+                                            }
+                                        />
+                                    </CSSTransition>
+                                )
+                            )}
+                        </TransitionGroup>
+                    )}
+
+                    <Button link onClick={this.toggleForm}>
+                        {isFormShown ? '- Cancel' : '+ Add a file'}
+                    </Button>
+
+                    <CSSTransition
+                        classNames="grow"
+                        in={isFormShown}
+                        timeout={200}
+                        unmountOnExit
+                        onExit={() => this.setState({ isFormShown: false })}
                     >
-                        {this.props.files.map((item: string, index: number) => (
+                        <ItemForm
-                            <CSSTransition
+                            placeholder={this.props.placeholder}
-                                key={index}
+                            addItem={this.addItem}
-                                timeout={400}
+                        />
-                                classNames="fade"
+                    </CSSTransition>
-                            >
+                </div>
-                                <Item
+            </>
-                                    item={item}
-                                    removeItem={() => this.removeItem(index)}
-                                />
-                            </CSSTransition>
-                        ))}
-                    </TransitionGroup>
-                )}
-
-                <Button link onClick={this.toggleForm}>
-                    {isFormShown ? '- Cancel' : '+ Add a file'}
-                </Button>
-
-                <CSSTransition
-                    classNames="grow"
-                    in={isFormShown}
-                    timeout={200}
-                    unmountOnExit
-                    onExit={() => this.setState({ isFormShown: false })}
-                >
-                    <ItemForm addItem={this.addItem} />
-                </CSSTransition>
-            </div>
         )
     }
 }

src/routes/Publish/index.tsx

@@ -4,6 +4,8 @@ import Route from '../../components/templates/Route'
 import Button from '../../components/atoms/Button'
 import Form from '../../components/atoms/Form/Form'
 import Input from '../../components/atoms/Form/Input'
+import Label from '../../components/atoms/Form/Label'
+import Row from '../../components/atoms/Form/Row'
 import { User } from '../../context/User'
 import AssetModel from '../../models/AssetModel'
 import Web3message from '../../components/Web3message'
@@ -57,6 +59,21 @@ class Publish extends Component<{}, PublishState> {
                 onChange = this.inputToArrayChange
             }
 
+            if (key === 'files') {
+                return (
+                    <Row key={key}>
+                        <Label htmlFor={key} required>
+                            {value.label}
+                        </Label>
+                        <Files
+                            placeholder={value.placeholder}
+                            help={value.help}
+                            files={this.state.files}
+                        />
+                    </Row>
+                )
+            }
+
             return (
                 <Input
                     key={key}
@@ -70,9 +87,6 @@ class Publish extends Component<{}, PublishState> {
                     onChange={onChange}
                     rows={value.rows}
                     value={(this.state as any)[key]}
-                    additionalComponent={
-                        key === 'files' && <Files files={this.state.files} />
-                    }
                 />
             )
         })