diff --git a/website/src/components/info-tooltip.css.ts b/website/src/components/info-tooltip.css.ts new file mode 100644 index 000000000..29aa27dd8 --- /dev/null +++ b/website/src/components/info-tooltip.css.ts @@ -0,0 +1,61 @@ +import { style } from "@vanilla-extract/css" +import { colors } from "src/style/constants" + +export const container = style({ + position: "relative", + display: "inline-flex", + alignItems: "center", + marginLeft: "0.375rem", + verticalAlign: "middle", +}) + +export const icon = style({ + color: colors.primary, + fontSize: "0.875rem", + transition: "color 0.2s ease", + cursor: "pointer", + selectors: { + [`${container}:hover &`]: { + color: "#333", + }, + }, +}) + +export const tooltip = style({ + position: "absolute", + bottom: "120%", + left: "50%", + transform: "translateX(-50%)", + width: "240px", + padding: "0.625rem 0.875rem", + backgroundColor: "white", + color: "black", + borderRadius: "0.375rem", + fontSize: "0.75rem", + lineHeight: "1.5", + zIndex: 1000, + boxShadow: "0 0.25rem 0.75rem rgba(61, 61, 61, 0.15)", + visibility: "hidden", + opacity: 0, + pointerEvents: "none", + textAlign: "left", + + // CSS of the little triangle arrow at the bottom + ":after": { + content: '""', + position: "absolute", + top: "100%", + left: "50%", + marginLeft: "-0.3125rem", + borderWidth: "0.3125rem", + borderStyle: "solid", + borderColor: "white transparent transparent transparent", + }, + + selectors: { + [`${container}:hover &`]: { + visibility: "visible", + opacity: 1, + }, + }, +}) diff --git a/website/src/components/info-tooltip.tsx b/website/src/components/info-tooltip.tsx new file mode 100644 index 000000000..82d3f48bd --- /dev/null +++ b/website/src/components/info-tooltip.tsx @@ -0,0 +1,16 @@ +import React from "react" +import { FiInfo } from "react-icons/fi/index" +import * as css from "./info-tooltip.css" + +interface InfoTooltipProps { + content: string +} + +export const InfoTooltip: React.FC = ({ content }) => { + return ( +
+ +
{content}
+
+ ) +} diff --git a/website/src/pages/documents/edit-document-modal.tsx b/website/src/pages/documents/edit-document-modal.tsx index e4ccdb257..098079c4e 100644 --- a/website/src/pages/documents/edit-document-modal.tsx +++ b/website/src/pages/documents/edit-document-modal.tsx @@ -2,8 +2,10 @@ import { plugins } from "@citation-js/core" import type React from "react" import { useEffect, useMemo, useState } from "react" import DatePicker from "react-date-picker" +import { FiInfo } from "react-icons/fi/index" import TextareaAutosize from "react-textarea-autosize" import { v4 as uuidv4 } from "uuid" +import { InfoTooltip } from "src/components/info-tooltip" import { form } from "src/edit-word-feature.css" import * as Dailp from "src/graphql/dailp" import { UserRole, useUserRole } from "../../auth" @@ -52,6 +54,22 @@ function getDisplayName(code: string) { return Object.keys(formatMap).find((key) => formatMap[key] === code) ?? code } +// Tool tips for metadata types +const TOOLTIP_TEXT = { + date: "Date that the physical resource we are translated here was created.", + docType: + "Distinguishes resources by describing the nature of this resource's content. Please use format and genre for more information.", + format: "File type for this digital version of the resource.", + contributors: + "People who work to create the resources on the site, labelled by the types of contributions they made.", + keywords: + "Main words that represent this resource’s content. This helps to improve searching on our site, but can also be a good place to gain context for the resource.", + subjectHeadings: + "Topic or main concept of this resource’s content, including Indigenous knowledge practices.", + spatialCoverage: + "Locations, dates, and/or time periods that appear throughout this resource.", +} + // Reusable approved tags lists const approvedKeywords = [ "Colonialism", @@ -611,7 +629,9 @@ export const EditDocumentModal: React.FC = ({
- + setDate(newDate)} value={date} @@ -639,7 +659,9 @@ export const EditDocumentModal: React.FC = ({
- + = ({
- + = ({
) : null } + tooltipInfo={TOOLTIP_TEXT.contributors} /> {/*
@@ -793,6 +818,7 @@ export const EditDocumentModal: React.FC = ({ onAdd={(tagName) => addKeyword(tagName)} onRemove={removeKeyword} addButtonLabel="Add Keyword" + tooltipInfo={TOOLTIP_TEXT.keywords} /> = ({ onAdd={isEditing ? addHeading : undefined} onRemove={isEditing ? removeHeading : undefined} addButtonLabel="Add Subject Heading" + tooltipInfo={TOOLTIP_TEXT.subjectHeadings} /> = ({ onAdd={isEditing ? addCoverage : undefined} onRemove={isEditing ? removeCoverage : undefined} addButtonLabel="Add Spatial Coverage" + tooltipInfo={TOOLTIP_TEXT.spatialCoverage} /> {/* Might need to pull the creator(s) from creator or contributors w/ author role */} diff --git a/website/src/pages/documents/tag-selector.tsx b/website/src/pages/documents/tag-selector.tsx index 46032fe5a..e52828e20 100644 --- a/website/src/pages/documents/tag-selector.tsx +++ b/website/src/pages/documents/tag-selector.tsx @@ -1,4 +1,5 @@ import React, { useState } from "react" +import { InfoTooltip } from "src/components/info-tooltip" import * as styles from "./tag-selector.css" interface TagSelectorProps { @@ -10,6 +11,7 @@ interface TagSelectorProps { onRemove?: (index: number) => void addButtonLabel: string customForm?: React.ReactNode + tooltipInfo?: string } export const TagSelector: React.FC = ({ @@ -21,12 +23,15 @@ export const TagSelector: React.FC = ({ onRemove, addButtonLabel, customForm, + tooltipInfo, }) => { const [showDropdown, setShowDropdown] = useState(false) return (
- +
{selectedTags.map((tag, index) => (