files UI fixes

src/data/form-publish.json

@@ -7,7 +7,14 @@
       "placeholder": "i.e. My cool data set",
       "type": "text",
       "required": true,
-      "help": "Help me"
+      "help": "Help me Obiwan"
+    },
+    "files": {
+      "label": "Files",
+      "placeholder": "i.e. https://file.com/file.json",
+      "type": "text",
+      "required": true,
+      "help": "Provide one or multiple links to your data files."
     },
     "description": {
       "label": "Description",
@@ -16,13 +23,6 @@
       "required": true,
       "rows": 5
     },
-    "files": {
-      "label": "Files",
-      "placeholder": "i.e. https://file.com/file.json",
-      "type": "text",
-      "required": true,
-      "help": "Provide one or multiple links to your data asset(s)."
-    },
     "type": {
       "label": "Type",
       "type": "select",

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

@@ -2,32 +2,10 @@
 
 .itemForm {
     margin-top: $spacer / 2;
-    margin-bottom: $spacer / 1.5;
     padding-left: $spacer / 2;
 
-    label,
-    input,
-    select,
-    textarea,
-    input::placeholder,
     button {
-        font-size: $font-size-small;
+        margin-top: -($spacer * 2);
-    }
-
-    label {
-        margin-bottom: $spacer / 8;
-    }
-
-    input,
-    select,
-    button {
-        height: 37px;
-        min-height: 37px;
-    }
-
-    button {
-        padding: 0 $spacer / 2;
-        margin-top: $spacer / 8;
     }
 }
 

src/routes/Publish/Files/ItemForm.tsx

@@ -59,7 +59,7 @@ export default class ItemForm extends PureComponent<
         const { url, hasError, noUrl } = this.state
 
         return (
-            <fieldset className={styles.itemForm}>
+            <div className={styles.itemForm}>
                 <Input
                     label="Url"
                     name="url"
@@ -84,7 +84,7 @@ export default class ItemForm extends PureComponent<
                         Please enter a valid URL.
                     </span>
                 )}
-            </fieldset>
+            </div>
         )
     }
 }

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

@@ -11,12 +11,18 @@
     margin-bottom: $spacer / 2;
     font-family: $font-family-button;
     color: $brand-grey-light;
+    border-bottom: 1px solid $brand-grey-lighter;
 
     li {
-        border-bottom: 1px solid $brand-grey-lighter;
+        border-top: 1px solid $brand-grey-lighter;
         padding: $spacer / 3 $spacer / 2 $spacer / 3 $spacer / 2;
         position: relative;
         display: block;
+        margin: 0;
+
+        &:before {
+            display: none;
+        }
     }
 
     a {

src/routes/Publish/Files/index.tsx

@@ -7,7 +7,7 @@ import Item from './Item'
 import styles from './index.module.scss'
 
 interface FilesProps {
-    files: any
+    files: string[]
     placeholder: string
     help: string
     // resetForm: any
@@ -18,7 +18,9 @@ interface FilesStates {
 }
 
 export default class Files extends PureComponent<FilesProps, FilesStates> {
-    public state: FilesStates = { isFormShown: false }
+    public state: FilesStates = {
+        isFormShown: false
+    }
 
     public toggleForm = (e: Event) => {
         e.preventDefault()
@@ -33,37 +35,36 @@ export default class Files extends PureComponent<FilesProps, FilesStates> {
     }
 
     public removeItem = (index: number) => {
-        this.props.files.remove(index)
+        this.props.files.splice(index, 1)
     }
 
     public render() {
         const { isFormShown } = this.state
+        const { files, help, placeholder } = this.props
 
         return (
             <>
-                <Help>{this.props.help}</Help>
+                <Help>{help}</Help>
                 <div className={styles.newItems}>
-                    {this.props.files.length > 1 && (
+                    {files.length > 0 && (
                         <TransitionGroup
                             component="ul"
                             className={styles.itemsList}
                         >
-                            {this.props.files.map(
+                            {files.map((item: string, index: number) => (
-                                (item: string, index: number) => (
+                                <CSSTransition
-                                    <CSSTransition
+                                    key={index}
-                                        key={index}
+                                    timeout={400}
-                                        timeout={400}
+                                    classNames="fade"
-                                        classNames="fade"
+                                >
-                                    >
+                                    <Item
-                                        <Item
+                                        item={item}
-                                            item={item}
+                                        removeItem={() =>
-                                            removeItem={() =>
+                                            this.removeItem(index)
-                                                this.removeItem(index)
+                                        }
-                                            }
+                                    />
-                                        />
+                                </CSSTransition>
-                                    </CSSTransition>
+                            ))}
-                                )
-                            )}
                         </TransitionGroup>
                     )}
 
@@ -79,7 +80,7 @@ export default class Files extends PureComponent<FilesProps, FilesStates> {
                         onExit={() => this.setState({ isFormShown: false })}
                     >
                         <ItemForm
-                            placeholder={this.props.placeholder}
+                            placeholder={placeholder}
                             addItem={this.addItem}
                         />
                     </CSSTransition>

src/routes/Publish/index.tsx

@@ -60,6 +60,11 @@ class Publish extends Component<{}, PublishState> {
             }
 
             if (key === 'files') {
+                const filesArray =
+                    this.state.files[0] === ''
+                        ? this.state.files.splice(1, 1)
+                        : this.state.files
+
                 return (
                     <Row key={key}>
                         <Label htmlFor={key} required>
@@ -68,7 +73,7 @@ class Publish extends Component<{}, PublishState> {
                         <Files
                             placeholder={value.placeholder}
                             help={value.help}
-                            files={this.state.files}
+                            files={filesArray}
                         />
                     </Row>
                 )

src/styles/_animations.scss

@@ -0,0 +1,43 @@
+.fade {
+    &-enter {
+        opacity: .01;
+    }
+
+    &-enter-active {
+        opacity: 1;
+        transition: opacity 400ms ease-out;
+    }
+
+    &-exit {
+        opacity: 1;
+    }
+
+    &-exit-active {
+        opacity: .01;
+        transition: opacity 400ms ease-in;
+    }
+}
+
+.grow {
+    &-enter {
+        opacity: .01;
+        max-height: 0;
+    }
+
+    &-enter-active {
+        opacity: 1;
+        max-height: 500px;
+        transition: 200ms ease-out;
+    }
+
+    &-exit {
+        opacity: 1;
+        max-height: 500px;
+    }
+
+    &-exit-active {
+        opacity: .01;
+        max-height: 0;
+        transition: 200ms ease-in;
+    }
+}

src/styles/global.scss

@@ -1,6 +1,7 @@
 // stylelint-disable selector-no-qualifying-type, declaration-no-important, selector-no-vendor-prefix
 
 @import 'variables';
+@import 'animations';
 
 *,
 *:before,