price field component splitup

src/components/molecules/FormFields/Price/Advanced.module.css

@@ -0,0 +1,9 @@
+.advancedInput {
+  display: flex;
+  gap: calc(var(--spacer) / 2);
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.advancedInput label {
+}

src/components/molecules/FormFields/Price/Advanced.tsx

@@ -0,0 +1,27 @@
+import React, { ReactElement } from 'react'
+import { InputProps } from '../../../atoms/Input'
+import InputElement from '../../../atoms/Input/InputElement'
+import stylesIndex from './index.module.css'
+import styles from './Advanced.module.css'
+import Label from '../../../atoms/Input/Label'
+import { MetadataPublishForm } from '../../../../@types/MetaData'
+import Cost from './Cost'
+
+export default function Advanced(props: InputProps): ReactElement {
+  const { price } = props.form.values as MetadataPublishForm
+
+  return (
+    <div className={`${stylesIndex.content} ${styles.advancedInput}`}>
+      <Cost {...props} />
+      <div>
+        <Label htmlFor="price.tokensToMint">Tokens to Mint</Label>
+        <InputElement
+          {...props.field}
+          value={(price && price.tokensToMint) || 1}
+          name="price.tokensToMint"
+          type="number"
+        />
+      </div>
+    </div>
+  )
+}

src/components/molecules/FormFields/Price/Cost.module.css

@@ -0,0 +1,28 @@
+.cost {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.cost label {
+  width: 100%;
+}
+
+.cost input {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.prefix {
+  border: 1px solid var(--brand-grey-lighter);
+  min-height: 43px;
+  display: flex;
+  align-items: center;
+  padding-left: calc(var(--spacer) / 2);
+  padding-right: calc(var(--spacer) / 2);
+  color: var(--color-secondary);
+  font-size: var(--font-size-small);
+  margin-right: -2px;
+  border-top-left-radius: var(--border-radius);
+  border-bottom-left-radius: var(--border-radius);
+}

src/components/molecules/FormFields/Price/Cost.tsx

@@ -0,0 +1,26 @@
+import React, { ReactElement } from 'react'
+import InputElement from '../../../atoms/Input/InputElement'
+import styles from './Cost.module.css'
+import { MetadataPublishForm } from '../../../../@types/MetaData'
+import Conversion from '../../../atoms/Price/Conversion'
+import { InputProps } from '../../../atoms/Input'
+import Label from '../../../atoms/Input/Label'
+
+export default function Cost(props: InputProps): ReactElement {
+  const { price } = props.form.values as MetadataPublishForm
+
+  return (
+    <div className={styles.cost}>
+      <Label htmlFor="price.cost">Cost</Label>
+
+      <div className={styles.prefix}>OCEAN</div>
+      <InputElement
+        {...props.field}
+        value={(price && price.cost) || 0}
+        name="price.cost"
+        type="number"
+      />
+      <Conversion price={price.cost.toString()} />
+    </div>
+  )
+}

src/components/molecules/FormFields/Price/Simple.module.css

@@ -0,0 +1,12 @@
+.simple {
+  margin-bottom: calc(var(--spacer) / 2);
+  text-align: center;
+}
+
+.simple > div {
+  justify-content: center;
+}
+
+.simple label {
+  display: none;
+}

src/components/molecules/FormFields/Price/Simple.tsx

@@ -0,0 +1,17 @@
+import React, { ReactElement } from 'react'
+import stylesIndex from './index.module.css'
+import styles from './Simple.module.css'
+import FormHelp from '../../../atoms/Input/Help'
+import { InputProps } from '../../../atoms/Input'
+import Cost from './Cost'
+
+export default function Simple(props: InputProps): ReactElement {
+  return (
+    <div className={stylesIndex.content}>
+      <div className={styles.simple}>
+        <Cost {...props} />
+      </div>
+      {props.help && <FormHelp>{props.help}</FormHelp>}
+    </div>
+  )
+}

src/components/molecules/FormFields/Price/index.module.css

@@ -6,7 +6,6 @@
 
 .content {
   padding: 0 calc(var(--spacer) / 2);
-  text-align: center;
 }
 
 .content label {
@@ -21,35 +20,3 @@
 .content p {
   margin-bottom: 0;
 }
-
-.simpleInput {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: calc(var(--spacer) / 2);
-}
-
-.simpleInput input {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.prefix {
-  border: 1px solid var(--brand-grey-lighter);
-  min-height: 43px;
-  display: flex;
-  align-items: center;
-  padding-left: calc(var(--spacer) / 2);
-  padding-right: calc(var(--spacer) / 2);
-  color: var(--color-secondary);
-  font-size: var(--font-size-small);
-  margin-right: -2px;
-  border-top-left-radius: var(--border-radius);
-  border-bottom-left-radius: var(--border-radius);
-}
-
-.advancedInput {
-  display: flex;
-  gap: calc(var(--spacer) / 2);
-  justify-content: center;
-}

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

@@ -1,78 +1,14 @@
 import React, { ReactElement } from 'react'
 import { InputProps } from '../../../atoms/Input'
-import InputElement from '../../../atoms/Input/InputElement'
 import styles from './index.module.css'
-import Label from '../../../atoms/Input/Label'
-import { useFormikContext } from 'formik'
-import { MetadataPublishForm } from '../../../../@types/MetaData'
 import Tabs from '../../../atoms/Tabs'
-import FormHelp from '../../../atoms/Input/Help'
-import Conversion from '../../../atoms/Price/Conversion'
+import Simple from './Simple'
+import Advanced from './Advanced'
 
 export default function Price(props: InputProps): ReactElement {
-  const { values } = useFormikContext()
-
-  const Simple = (
-    <div className={styles.content}>
-      <div className={styles.simpleInput}>
-        {/* <Label htmlFor="price.cost">Cost</Label> */}
-        <div className={styles.prefix}>OCEAN</div>
-        <InputElement
-          {...props.field}
-          value={
-            ((values as MetadataPublishForm).price &&
-              (values as MetadataPublishForm).price.cost) ||
-            0
-          }
-          name="price.cost"
-          type="number"
-        />
-        <Conversion
-          price={(values as MetadataPublishForm).price.cost.toString()}
-        />
-      </div>
-      <FormHelp>{props.help}</FormHelp>
-    </div>
-  )
-
-  const Advanced = (
-    <div className={`${styles.content} ${styles.advancedInput}`}>
-      <div>
-        <Label htmlFor="price.cost">Cost</Label>
-        <InputElement
-          {...props.field}
-          value={
-            (values as MetadataPublishForm).price &&
-            ((values as MetadataPublishForm).price.cost || 1)
-          }
-          name="price.cost"
-          type="number"
-        />
-      </div>
-      <div>
-        <Label htmlFor="price.tokensToMint">Tokens to Mint</Label>
-        <InputElement
-          {...props.field}
-          value={
-            (values as MetadataPublishForm).price &&
-            ((values as MetadataPublishForm).price.tokensToMint || 1)
-          }
-          name="price.tokensToMint"
-          type="number"
-        />
-      </div>
-    </div>
-  )
-
   const tabs = [
-    {
-      title: 'Simple',
-      content: Simple
-    },
-    {
-      title: 'Advanced',
-      content: Advanced
-    }
+    { title: 'Simple', content: <Simple {...props} /> },
+    { title: 'Advanced', content: <Advanced {...props} /> }
   ]
 
   return (