Asset selection form component (#441)

* prototype AssetSelection

* assetselection styling

* typing "fix"

src/components/atoms/Input/InputElement.tsx

@@ -6,6 +6,9 @@ import FilesInput from '../../molecules/FormFields/FilesInput'
 import Terms from '../../molecules/FormFields/Terms'
 import Datatoken from '../../molecules/FormFields/Datatoken'
 import classNames from 'classnames/bind'
+import AssetSelection, {
+  AssetSelectionAsset
+} from '../../molecules/FormFields/AssetSelection'
 
 const cx = classNames.bind(styles)
 
@@ -90,6 +93,23 @@ export default function InputElement({
             ))}
         </div>
       )
+    case 'assetSelection':
+      return (
+        <AssetSelection
+          assets={(options as unknown) as AssetSelectionAsset[]}
+          {...field}
+          {...props}
+        />
+      )
+    case 'assetSelectionMultiple':
+      return (
+        <AssetSelection
+          assets={(options as unknown) as AssetSelectionAsset[]}
+          multiple
+          {...field}
+          {...props}
+        />
+      )
     case 'files':
       return <FilesInput name={name} {...field} {...props} />
     case 'datatoken':

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

@@ -0,0 +1,57 @@
+.selection {
+  padding: calc(var(--spacer) / 4);
+  border: 1px solid var(--border-color);
+  background-color: var(--background-highlight);
+  border-radius: var(--border-radius);
+  margin-bottom: calc(var(--spacer) / 2);
+  font-size: var(--font-size-small);
+
+  max-height: 300px;
+  /* smooth overflow scrolling for pre-iOS 13 */
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.row {
+  display: flex;
+  align-items: flex-start;
+  border-bottom: 1px solid var(--border-color);
+  padding-top: calc(var(--spacer) / 4);
+  padding-bottom: calc(var(--spacer) / 4);
+}
+
+.row > div {
+  width: 100%;
+}
+
+.content {
+  display: flex;
+  align-items: baseline;
+  width: 100%;
+}
+
+.input {
+  margin-top: 0;
+  margin-left: 0;
+  margin-right: calc(var(--spacer) / 4);
+}
+
+.title {
+  font-size: var(--font-size-small);
+  margin: 0;
+}
+
+.link {
+  margin-left: calc(var(--spacer) / 4);
+}
+
+.link svg {
+  fill: var(--color-primary);
+  width: 0.7em;
+  height: 0.7em;
+}
+
+.price {
+  display: inline-block;
+  font-size: var(--font-size-small) !important;
+}

src/components/molecules/FormFields/AssetSelection.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import Dotdotdot from 'react-dotdotdot'
+import slugify from 'slugify'
+import PriceUnit from '../../atoms/Price/PriceUnit'
+import { ReactComponent as External } from '../../../images/external.svg'
+import styles from './AssetSelection.module.css'
+
+export interface AssetSelectionAsset {
+  did: string
+  name: string
+  price: string
+}
+
+export default function AssetSelection({
+  assets,
+  multiple,
+  ...props
+}: {
+  assets: AssetSelectionAsset[]
+  multiple?: boolean
+}): JSX.Element {
+  return (
+    <div className={styles.selection}>
+      {assets.map((asset: AssetSelectionAsset) => (
+        <div className={styles.row} key={asset.did}>
+          <input
+            id={slugify(asset.name)}
+            type={multiple ? 'checkbox' : 'radio'}
+            value={asset.did}
+            className={styles.input}
+            {...props}
+          />
+          <div className={styles.content}>
+            <label
+              className={styles.label}
+              htmlFor={slugify(asset.name)}
+              title={asset.name}
+            >
+              <Dotdotdot clamp={1} tagName="h3" className={styles.title}>
+                {asset.name}
+              </Dotdotdot>
+              <PriceUnit price={asset.price} small className={styles.price} />
+            </label>
+
+            <a
+              className={styles.link}
+              href={`/asset/${asset.did}`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <External />
+            </a>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}