add Terms form field

content/pages/publish.json

@@ -85,7 +85,7 @@
       {
         "name": "termsAndConditions",
         "label": "Terms & Conditions",
-        "type": "checkbox",
+        "type": "terms",
         "options": ["I agree to these Terms and Conditions"],
         "required": true
       }

src/components/atoms/Input/InputElement.tsx

@@ -2,7 +2,8 @@ import React, { ReactElement } from 'react'
 import slugify from '@sindresorhus/slugify'
 import styles from './InputElement.module.css'
 import { InputProps } from '.'
-import FilesInput from '../../molecules/FilesInput'
+import FilesInput from '../../molecules/FormFields/FilesInput'
+import Terms from '../../molecules/FormFields/Terms'
 
 export default function InputElement(props: InputProps): ReactElement {
   const { type, options, rows, name } = props
@@ -55,6 +56,8 @@ export default function InputElement(props: InputProps): ReactElement {
       )
     case 'files':
       return <FilesInput name={name} {...props} />
+    case 'terms':
+      return <Terms name={name} {...props} />
     default:
       return (
         <input

src/components/atoms/Input/index.tsx

@@ -29,8 +29,8 @@ export interface InputProps {
   pattern?: string
   min?: string
   disabled?: boolean
-  field?: FieldInputProps<any>
-  form?: FormikState<any>
+  field?: any
+  form?: any
 }
 
 export default function Input(props: Partial<InputProps>): ReactElement {

src/components/molecules/FilesInput/Input.module.css

@@ -1,3 +0,0 @@
-.input {
-  composes: input from '../../atoms/Input/InputElement.module.css';
-}

src/components/molecules/FormFields/FilesInput/Info.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
 import { File as FileMetadata } from '@oceanprotocol/lib/dist/node/ddo/interfaces/File'
-import { prettySize } from '../../../utils'
-import cleanupContentType from '../../../utils/cleanupContentType'
+import { prettySize } from '../../../../utils'
+import cleanupContentType from '../../../../utils/cleanupContentType'
 import styles from './Info.module.css'
 
 export default function FileInfo({

src/components/molecules/FormFields/FilesInput/Input.module.css

@@ -0,0 +1,3 @@
+.input {
+  composes: input from '../../../atoms/Input/InputElement.module.css';
+}

src/components/molecules/FormFields/FilesInput/Input.tsx

@@ -1,12 +1,11 @@
 import React, { ReactElement } from 'react'
 import isUrl from 'is-url-superb'
-import Button from '../../atoms/Button'
+import Button from '../../../atoms/Button'
 import { useField } from 'formik'
-import Loader from '../../atoms/Loader'
-import InputElement from '../../atoms/Input/InputElement'
-import { InputProps } from '../../atoms/Input'
+import Loader from '../../../atoms/Loader'
+import { InputProps } from '../../../atoms/Input'
 import styles from './Input.module.css'
-import InputGroup from '../../atoms/Input/InputGroup'
+import InputGroup from '../../../atoms/Input/InputGroup'
 
 export default function FileInput({
   handleButtonClick,

src/components/molecules/FormFields/FilesInput/index.tsx

@@ -3,8 +3,8 @@ import { useField } from 'formik'
 import { toast } from 'react-toastify'
 import FileInfo from './Info'
 import FileInput from './Input'
-import { getFileInfo } from '../../../utils'
-import { InputProps } from '../../atoms/Input'
+import { getFileInfo } from '../../../../utils'
+import { InputProps } from '../../../atoms/Input'
 
 interface Values {
   url: string

src/components/molecules/FormFields/Terms.module.css

@@ -0,0 +1,23 @@
+.terms {
+  padding: calc(var(--spacer) / 2);
+  border: 1px solid var(--brand-grey-lighter);
+  background-color: var(--brand-grey-dimmed);
+  border-radius: var(--border-radius);
+  margin-bottom: calc(var(--spacer) / 2);
+  font-size: var(--font-size-small);
+
+  max-height: 250px;
+  /* smooth overflow scrolling for pre-iOS 13 */
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.terms h1 {
+  font-size: var(--font-size-base);
+  margin-bottom: calc(var(--spacer) / 2);
+}
+
+.terms h2 {
+  font-size: var(--font-size-small);
+  margin-bottom: calc(var(--spacer) / 2);
+}

src/components/molecules/FormFields/Terms.tsx

@@ -0,0 +1,27 @@
+import React, { ReactElement } from 'react'
+import { InputProps } from '../../atoms/Input'
+import InputElement from '../../atoms/Input/InputElement'
+import styles from './Terms.module.css'
+import { graphql, useStaticQuery } from 'gatsby'
+
+const query = graphql`
+  query TermsQuery {
+    terms: markdownRemark(fields: { slug: { eq: "/terms" } }) {
+      html
+    }
+  }
+`
+
+export default function Terms(props: InputProps): ReactElement {
+  const data = useStaticQuery(query)
+
+  return (
+    <>
+      <div
+        className={styles.terms}
+        dangerouslySetInnerHTML={{ __html: data.terms.html }}
+      />
+      <InputElement {...props} type="checkbox" />
+    </>
+  )
+}