Add evidence form (#89)

* Add evidence JSON property to issuing a credential

* Add evidence form and radio card set

* Fix evidence

* Fix radio card set active selection

* Add hover to details summary

src/App.scss

@@ -351,32 +351,62 @@ fieldset {
     padding: 0;
     margin: 0.5rem 0 1.5rem;
     display: inline-flex;
+    width: 100%;
 }
 
 legend {
     margin-bottom: 0.5rem;
 }
 
-input[type="radio"] {
-    display: none;
-}
+.radio-container {
+    position: relative;
 
-input[type="radio"] ~ label {
-    padding: 2px 10px;
-    border-radius: var(--radius-round);
-    font-size: var(--font-sm);
-    margin-right: 0.5rem;
-    background-color: var(--grey-10);
-    border: 2px solid var(--grey-30);
-    color: var(--grey-50);
-}
+    input[type="radio"] {
+        appearance: none;
+        position: absolute;
 
-input[type="radio"]:checked ~ label {
-    background-color: var(--grey-30);
-    border: 1px solid var(--color-white);
-    color: var(--color-white);
+        &:focus-visible ~ label {
+            outline-offset: 2px;
+            outline: -webkit-focus-ring-color auto 1px;
+        }
+    }
+
+    input[type="radio"] ~ label {
+        padding: 2px 10px;
+        border-radius: var(--radius-sm);
+        font-size: var(--font-sm);
+        background-color: var(--grey-10);
+        border: 1px solid var(--grey-30);
+        color: var(--grey-50);
+        text-align: center;
+        padding-inline: 1rem;
+        margin-right: 0.5rem;
+
+        .radio-control-content {
+            .radio-control-heading {
+                font-size: var(--font-sm);
+                margin: 0.25rem;
+            }
+
+            .radio-control-description {
+                font-size: var(--font-xs);
+                margin: 0;
+            }
+        }
+    }
+
+    input[type="radio"]:checked ~ label {
+        background-color: var(--grey-30);
+        border: 1px solid var(--color-white);
+        color: var(--color-white);
+
+        p {
+            color: var(--color-white);
+        }
+    }
 }
 
+
 #output-container {
     padding: 1rem;
     border: 1px solid var(--grey-50);

src/components/RadioCardSet/RadioCardSet.tsx

@@ -0,0 +1,48 @@
+import { Component, For, JSX } from "solid-js";
+
+ const RadioCardSet: Component<{
+    handleEvent?,
+    name: string, 
+    legend: string,  
+    options: {
+        value: string, 
+        label: string, 
+        description?: string, 
+        imageSrc?: string, 
+        disabled?: boolean, 
+        footerLabel?: string, 
+        selected?: boolean
+    }[], 
+    description?: string, 
+    optional?: boolean,
+    activeSelection?
+    }> = (props) => {
+    return (
+        <fieldset class="radio-card-set field-container">
+            <legend class="field-heading">
+                <label>{props.legend} {props.optional && "(Optional)"}</label>
+            </legend>
+            {props.description && <p class="modal-input-note">{props.description}</p>}
+            <For each={props.options}>
+                {(option) => 
+                    <div class="radio-container">
+                        <input required={!props.optional} checked={option.value === props.activeSelection} oninput={props.handleEvent} type="radio" name={props.name} id={option.value} value={option.value} disabled={option.disabled}/>
+                        <label for={option.value} class="radio-control">
+                            <div class="radio-control-content">
+                                {option.imageSrc && <img class="radio-card-image" src={option.imageSrc} alt="" />}
+                                <div class="radio-control-body">
+                                    <p class="radio-control-heading">{option.label}</p>
+                                    {option.description && <p class="radio-card-description">{option.description}</p>}
+                                    {option.footerLabel && <p class="radio-control-footer-label">{option.footerLabel}</p>}
+                                </div>
+                            </div>
+                        </label>
+                    </div>
+                }
+            </For>
+        </fieldset>
+
+    )
+}
+
+export default RadioCardSet;

src/pages/Admin/Credentials/views/CredentialManifests/CredentialManifests.tsx

@@ -3,7 +3,7 @@ import "./CredentialManifests.scss";
 import Icon, { ExternalArrow, Plus } from "@/icons/Icon";
 import Modal from "./Modal/Modal";
 import { useNavigate } from "@solidjs/router";
-import IssueModal from "./Details/IssueModal/IssueModal";
+import IssueModal from "../IssuedCredentials/Modal/Modal";
 import { store } from "@/utils/store";
 
 const CredentialManifests: Component = () => {

src/pages/Admin/Credentials/views/CredentialManifests/Details/Details.scss

@@ -49,7 +49,7 @@
                     max-width: 100%;
                     box-shadow: 0px 4px 8px rgba(6, 6, 6, 0.5);
                     background: var(--grey-50);
-                    background-image: url(https://www.toptal.com/designers/subtlepatterns/uploads/swirl.png);
+                    background-image: url('/src/assets/swirl.png');
                     color: var(--color-black);
                     overflow: hidden;
                     padding-block-end: 1.5rem;

src/pages/Admin/Credentials/views/CredentialManifests/Details/Details.tsx

@@ -1,7 +1,7 @@
 import { Component } from "solid-js";
 import "./Details.scss";
 import "@/components/Panel/Panel.scss";
-import IssueModal, { getSchemaForSubject } from "./IssueModal/IssueModal";
+import IssueModal, { getSchemaForSubject } from "../../IssuedCredentials/Modal/Modal";
 import { useNavigate, useParams, useSearchParams } from "@solidjs/router";
 import { store } from "@/utils/store";
 import Icon, { ExternalArrow } from "@/icons/Icon";