add contextual help

CHANGELOG.md

@@ -1,5 +1,11 @@
 # verifier-plus Changelog
 
+## 2.0.2
+### Added
+- Contextual Help
+### Fixed
+- browser title
+
 ## 2.0.1 
 ### Added
 - Add Alignments to Open Badges 3.0 Display

app/components/Alignment/Alignment.tsx

@@ -4,6 +4,8 @@ import type { Alignment as AlignmentType } from '@/types/credential.d'
 import { isValidHttpUrl } from '@/lib/url'
 import type { AlignmentProps } from './Alignment.d'
 import { TestId } from '@/lib/testIds'
+import { alignmentHelpDescription, alignmentHelpSections } from '../Help'
+import { ContextualHelp } from '../ContextualHelp/ContextualHelp'
 
 export const Alignment = ({ alignment, headerClassName }: AlignmentProps) => {
   const alignmentsArray: AlignmentType[] = Array.isArray(alignment) ? alignment : (alignment ? [alignment] : [])
@@ -18,7 +20,7 @@ export const Alignment = ({ alignment, headerClassName }: AlignmentProps) => {
 
   return (
     <section className={styles.container} data-testid={TestId.Alignment}>
-      <h3 className={headerClassName ?? styles.header}>Alignments</h3>
+      <h3 className={headerClassName ?? styles.header}>Alignments <ContextualHelp title='Alignments' sections={alignmentHelpSections} description={alignmentHelpDescription}/></h3>
       <ul className={styles.list}>
         {items.map((a, idx) => (
           <li key={`${a.targetUrl || a.targetName}-${idx}`} className={styles.item}>
@@ -38,6 +40,7 @@ export const Alignment = ({ alignment, headerClassName }: AlignmentProps) => {
           </li>
         ))}
       </ul>
+
     </section>
   )
 }

app/components/Button/Button.d.ts

@@ -6,4 +6,5 @@ export type ButtonProps = {
   icon?: ReactElement | null;
   onClick?: (e: React.SyntheticEvent) => void;
   className?: string;
+  children?: ReactElement;
 }

app/components/Button/Button.tsx

@@ -1,9 +1,9 @@
 import type { ButtonProps } from './Button.d';
 import styles from './Button.module.css';
-export const Button = ({secondary = false, onClick = () => {}, text, icon = null, className = ''}: ButtonProps) => {
+export const Button = ({secondary = false, onClick = () => {}, text, icon = null, className = '', children}: ButtonProps) => {
   return (
     <button className={`${styles.button} ${secondary ? styles.secondaryButton : ''} ${className}`} onClick={onClick}>
-      {icon} {text}
+      {icon} {text} {children}
     </button>
   )
 }

app/components/ContextualHelp/ContextualHelp.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactElement, ReactNode } from "react"
+
+export type ContextualHelpProps = {
+  title?: string;
+  description?: ReactNode;
+  children?: ReactNode;
+  iconSize?: string;
+  iconColor?: string;
+  style?: string;
+  sections?: CollapsibleSectionProps[]
+}
+
+export type CollapsibleSectionProps = {
+  sectionTitle: string;
+  content: ReactNode;
+}

app/components/ContextualHelp/ContextualHelp.module.css

@@ -0,0 +1,20 @@
+.icon {
+  margin-left: .5em;
+  font-size: .9em;
+  vertical-align: top;
+}
+
+
+.help-icon-container {
+  /* Ensures the cursor changes to a hand icon on hover */
+  cursor: pointer; 
+  /* Optional: Add a smooth transition for visual effects */
+  transition: color 0.3s ease; 
+}
+
+.help-icon-container:hover {
+  /* Optional: Change the color on hover */
+  color: #007bff; 
+  /* Optional: Add a slight scale effect */
+  transform: scale(1.1); 
+}

app/components/ContextualHelp/ContextualHelp.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import type { CollapsibleSectionProps, ContextualHelpProps } from './ContextualHelp.d';
+import HelpIcon from '@mui/icons-material/HelpOutlined';
+import { Dialog } from '@base-ui-components/react/dialog';
+import { ScrollArea } from '@base-ui-components/react/scroll-area';
+import { Collapsible } from '@base-ui-components/react/collapsible';
+import { useHelpContext } from '@/lib/HelpContext';
+
+function ChevronIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
+      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentcolor" />
+    </svg>
+  );
+}
+
+const CollapsibleSection = ({ sectionTitle, content }: CollapsibleSectionProps) => {
+   return (
+   <Collapsible.Root className="flex flex-col justify-center text-gray-900">
+      <Collapsible.Trigger className="group flex items-center gap-2 rounded-sm bg-gray-100 px-2 py-1 text-sm font-medium hover:bg-gray-200 focus-visible:outline focus-visible:outline-blue-800 active:bg-gray-200">
+        <ChevronIcon className="size-3 transition-all ease-out group-data-[panel-open]:rotate-90" />
+        {sectionTitle}
+      </Collapsible.Trigger>
+      <Collapsible.Panel className="flex h-[var(--collapsible-panel-height)] flex-col justify-end overflow-hidden text-sm transition-all ease-out data-[ending-style]:h-0 data-[starting-style]:h-0">
+        <div className="mt-1 flex cursor-text flex-col gap-2 rounded-sm bg-gray-100 py-2 pl-7">
+          {content}
+        </div>
+      </Collapsible.Panel>
+    </Collapsible.Root>)
+}
+
+export const ContextualHelp = ({ title, description, iconSize = '12px', children, sections, iconColor = 'info', style = "align-top mx-1 inline m-h-1" }: ContextualHelpProps) => {
+  let {isHelpEnabled} = useHelpContext();
+  if (isHelpEnabled) {
+    return (
+
+      <Dialog.Root>
+        <Dialog.Trigger onClick={(e) => e.stopPropagation()} nativeButton={false} render={<span className={`${style} hover:cursor-pointer`}><HelpIcon sx={{ fontSize: iconSize, verticalAlign: 'top' }} htmlColor={iconColor} /></span>}>
+        </Dialog.Trigger>
+        <Dialog.Portal>
+          <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
+          <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-200 max-w-[calc(100vw)] md:max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 rounded-lg bg-gray-50 p-2 md:p-6 text-gray-900 outline outline-gray-200 transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:outline-gray-300">
+            <Dialog.Title className="-mt-1.5 mb-1 text-lg text-center md:text-left font-medium">{title}</Dialog.Title>
+
+            <ScrollArea.Root className="w-full">
+              <ScrollArea.Viewport className="max-h-[75dvh] overscroll-contain rounded-md outline -outline-offset-1 outline-gray-200 focus-visible:outline focus-visible:outline-blue-800">
+                <div className="flex flex-col gap-4 py-5 pr-1 pl-1 md:pr-5 md:pl-5 text-sm leading-[1.375rem] text-gray-900">
+                  {description}
+                  {children}
+                  {
+                    sections && sections.map((section : CollapsibleSectionProps) => (
+                      <CollapsibleSection key={crypto.randomUUID()} content={section.content} sectionTitle={section.sectionTitle} />
+                    ))
+                  }
+                </div>
+              </ScrollArea.Viewport>
+              <ScrollArea.Scrollbar className="m-2 flex w-1 justify-center rounded bg-gray-200 opacity-0 transition-opacity delay-300 pointer-events-none data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[hovering]:duration-75 data-[hovering]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:delay-0 data-[scrolling]:duration-75 data-[scrolling]:pointer-events-auto">
+                <ScrollArea.Thumb className="w-full rounded bg-gray-500" />
+              </ScrollArea.Scrollbar>
+            </ScrollArea.Root>
+
+            <div className="flex justify-end gap-4 mt-5">
+              <Dialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100">
+                Close
+              </Dialog.Close>
+            </div>
+          </Dialog.Popup>
+        </Dialog.Portal>
+      </Dialog.Root>
+    );
+  } else {
+    return null
+  }
+}
+
+
+
+
+
+

app/components/CopyToClipboard/CopyToClipboard.d.ts

@@ -0,0 +1,9 @@
+export type CopyToClipboardProps = {
+  text: string;
+  buttonText: string;
+}
+
+export type CopyButtonProps = {
+  buttonText: string;
+  handleClick: function;
+}

app/components/CopyToClipboard/CopyToClipboard.tsx

@@ -0,0 +1,35 @@
+import type { CopyButtonProps, CopyToClipboardProps } from './CopyToClipboard.d';
+
+
+import { IconButton, Button, Snackbar } from '@mui/material'
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import { useState } from 'react'
+
+const CopyButton = ({buttonText, handleClick} : CopyButtonProps) => {
+  return buttonText?
+  <Button onClick={handleClick} style={{fontSize:'.7em', fontWeight:'bold'}} color="inherit" size="small" variant="outlined" endIcon={<ContentCopyIcon />} > {buttonText} </Button>
+  :
+    <IconButton onClick={handleClick}><ContentCopyIcon/></IconButton>
+}
+
+export const CopyToClipboard = ({text, buttonText}: CopyToClipboardProps) => {
+    const [open, setOpen] = useState(false)
+
+    const handleClick = () => {
+      setOpen(true)
+      navigator.clipboard.writeText(text)
+    }
+
+    return (
+        <>
+          <CopyButton buttonText={buttonText} handleClick={handleClick}/>
+          <Snackbar
+            open={open}
+            onClose={() => setOpen(false)}
+            autoHideDuration={2500}
+            message="Copied to clipboard!"
+          />
+        </>
+    )
+}
+

app/components/CredentialCard/CredentialCard.tsx

@@ -15,6 +15,10 @@ import { extractNameFromOBV3Identifier } from '@/lib/extractNameFromOBV3Identifi
 import { TestId } from '@/lib/testIds';
 import { Alignment } from '@/components/Alignment/Alignment';
 
+import { ContextualHelp } from '@/components/ContextualHelp/ContextualHelp'
+import { holderHelpDescription, holderHelpSections, titleHelpDescription, titleHelpSections, achievementTypeHelpDescription, achievementTypeHelpSections, validUntilHelpSections, validUntilHelpDescription, validFromHelpDescription, validFromHelpSections, descriptionHelpDescription, descriptionHelpSections, criteriaHelpDescription, criteriaHelpSections } from '@/components/Help';
+
+
 
 export const CredentialCard = ({ credential, wasMulti = false }: CredentialCardProps) => {
   // TODO: add back IssuerInfoModal
@@ -64,8 +68,8 @@ export const CredentialCard = ({ credential, wasMulti = false }: CredentialCardP
           <div className={styles.achivementInfo}>
             {displayValues.achievementImage ? <img className={styles.achievementImage} src={displayValues.achievementImage} alt="achievement image" data-testid={TestId.AchievementImage}/> : null}
             <div>
-              <h1 id='title' className={styles.credentialName} data-testid={TestId.CredentialName}>{displayValues.credentialName}</h1>
-              {displayValues.achievementType ? <p className={styles.achievementType} data-testid={TestId.AchievementType}>Achievement Type : {displayValues.achievementType}</p> : null}
+              <h1 id='title' className={styles.credentialName} data-testid={TestId.CredentialName}>{displayValues.credentialName}<ContextualHelp description={titleHelpDescription} sections={titleHelpSections} title="Credential Name and Image"/></h1>
+              {displayValues.achievementType ? <p className={styles.achievementType} data-testid={TestId.AchievementType}>Achievement Type : {displayValues.achievementType} <ContextualHelp title="Achievement Type" sections={achievementTypeHelpSections} description={achievementTypeHelpDescription}/></p> : null}
             </div>
           </div>
         </div>
@@ -75,11 +79,20 @@ export const CredentialCard = ({ credential, wasMulti = false }: CredentialCardP
               <Issuer issuer={issuer} infoButtonPushed={infoButtonPushed} header='Issuer' />
               <div className={styles.headerRow}>
                 {displayValues.issuanceDate && (
-                  <InfoBlock header="Issuance Date" contents={DateTime.fromISO(displayValues.issuanceDate).toLocaleString(DateTime.DATE_MED)} testId={TestId.IssuanceDate} />
+                  <InfoBlock 
+                    header="Valid From" 
+                    helpDescription={validFromHelpDescription}
+                    helpSections={validFromHelpSections}
+                    helpTitle="ValidFrom"
+                    contents={DateTime.fromISO(displayValues.issuanceDate).toLocaleString(DateTime.DATE_MED)} 
+                    testId={TestId.IssuanceDate} />
                 )}
 
                 <InfoBlock
-                  header="Expiration Date"
+                  header="Valid Until"
+                  helpDescription={validUntilHelpDescription}
+                  helpSections={validUntilHelpSections}
+                  helpTitle="Valid Until"
                   contents={
                     displayValues.expirationDate
                       ? DateTime.fromISO(displayValues.expirationDate).toLocaleString(DateTime.DATE_MED)
@@ -99,19 +112,30 @@ export const CredentialCard = ({ credential, wasMulti = false }: CredentialCardP
 
           <div className={styles.primaryColumn}>
             {displayValues.issuedTo ?
-              <InfoBlock header="Issued To" contents={displayValues.issuedTo} testId={TestId.IssuedTo}/>
+              <InfoBlock 
+              header="Issued To" 
+              helpDescription={holderHelpDescription}
+              helpSections={holderHelpSections}
+              helpTitle="Issued To"
+              contents={displayValues.issuedTo} 
+              testId={TestId.IssuedTo}/>
               :
               null
             }
             {displayValues.credentialDescription ?
-              <InfoBlock header="Description" contents={displayValues.credentialDescription} testId={TestId.CredentialDescription}/>
+              <InfoBlock 
+              header="Description" 
+              helpDescription={descriptionHelpDescription}
+              helpSections={descriptionHelpSections}
+              helpTitle="Credential Description"
+              contents={displayValues.credentialDescription} 
+              testId={TestId.CredentialDescription}/>
               :
               null
             }
             {displayValues.criteria && (
               <div>
-                <h3 className={styles.smallHeader}>Criteria</h3>
-                {/* <div className={styles.credentialCriteria}>{displayValues.criteria}</div> */}
+                <h3 className={styles.smallHeader}>Criteria<ContextualHelp title="Criteria" description={criteriaHelpDescription} sections={criteriaHelpSections}/></h3>
                 <div className={styles.markdownContainer} data-testid={TestId.CredentialCriteria}>
                   <ReactMarkdown >{displayValues.criteria}</ReactMarkdown>
                 </div>

app/components/Help/AchievementTypeHelp/AchievementTypeHelp.tsx

@@ -0,0 +1,58 @@
+import styles from '../Help.module.css';
+import { VcDisplay } from '@/components/VcDisplay/VcDisplay';
+
+const ExampleV2Section = () => {
+  return <VcDisplay link='https://digitalcredentials.github.io/vc-test-fixtures/verifiableCredentials/v2/dataIntegrityProof/didKey/legacyRegistry-noStatus-noExpiry-achievementTypeExample.json' nodesToExpand={['credentialSubject', 'credentialSubject.achievement', 'credentialSubject.achievement.achievementType']}/>
+}
+
+const DeterminationSection = () => {
+  return (
+    <div>
+      <div className={styles.preference}>achievementType is a property of an Open Badges version 3 Verifiable Credential:</div>
+      <ul className={styles.list}>
+        <li>credential.credentialSubject.achievement.achievementType</li>
+      </ul>
+      <div className={styles.preference}>See the example section for a working example.</div>
+    </div>)
+}
+
+const DetailsSection = () => {
+  return (
+    <ul className={styles.list}>
+      <li>Examples include 'Award', 'Certification', 'DoctoralDegree'.</li>
+      <li>A full list of pre-defined Open Badge achievement types is defined in the <a target="_blank" className={styles.externalLink} href="https://www.imsglobal.org/spec/ob/v3p0#context">Open Badges Specification</a>. </li>
+      <li>New OBv3 achievement types can be added by extending the OBv3 context.</li>
+      <li>If no achievementType is available, nothing is shown, nor the label.</li>
+    </ul>
+  )
+}
+
+const NotesSection = () => {
+  return (
+    <>  
+<div className={styles.note}><img className={styles.infoIcon} src="./icons/info_24_lime.svg"></img>The goal of the achievementType field is interoperability. 
+    If different credential issuers use the same achievementType for similar credentials then hopefully consumers of the 
+    credential can treat the credentials as equivalent to some degree. It might of course be less useful to treat
+    two credentials with a very general achievementType like 'Award' as equivalent, but hopefully moreso for two credential of type 'DoctoralDegree'. Over time 
+    we expect that issuers will converge on common definitions.
+    </div>
+    </>
+  )
+}
+
+const DescriptionSection = () => {
+  return (
+    <div className={styles.note}>The type of Open Badge v3 achievement.</div>
+  )
+}
+
+export const achievementTypeHelpDescription = DescriptionSection()
+
+export const achievementTypeHelpSections  = [
+  { sectionTitle: 'Details', content: DetailsSection() },
+  { sectionTitle: 'How We Determine the AchievementType', content: DeterminationSection() },
+  { sectionTitle: 'Example - Open Badge version 3', content: ExampleV2Section() },
+  { sectionTitle: 'Notes', content: NotesSection( )}
+]
+
+