Merge pull request #677 from colonial-heritage/local-context-notices2

Updated local context notices based on new design

apps/researcher/src/app/[locale]/objects/[id]/local-contexts-notices/form.tsx

@@ -149,32 +149,32 @@ export function LocalContextsNoticeForm({
           {t('type')}
           <LocalContextsNoticeSelector name="type" />
         </div>
+
+        {watch('type') && (
+          <div className="w-full max-w-4xl pb-4">
+            <strong className="flex items-center gap-1">
+              <InformationCircleIcon className="w-4 h-4 stroke-neutral-900" />
+              {t('noticeInformationTitle')}
+            </strong>
+            <em>{t('noticeInformationSubTitle')}</em>
+            <p>
+              {tNotices(
+                localContextsNoticeEnrichmentTypeMapping[
+                  watch('type')! as LocalContextsNoticeEnrichmentType
+                ].labelTranslationKey
+              )}
+            </p>
+          </div>
+        )}
+
         <div className="flex flex-col md:flex-row gap-10">
-          <div className="w-full md:w-1/2 flex flex-col">
+          <div className="w-full md:w-1/2">
             <Field as={Fragment}>
               <InputLabel
                 title={t('description')}
                 description={t('descriptionSubTitle')}
-                required
               />
               <Textarea name="description" />
-              <FieldValidationMessage field="description" />
-            </Field>
-            <Field as={Fragment}>
-              <InputLabel
-                title={t('inLanguage')}
-                description={t('languageSubTitle')}
-              />
-              <LanguageSelector name="inLanguage" />
-            </Field>
-            <Field as={Fragment}>
-              <InputLabel
-                title={t('community')}
-                description={t('communityDescription')}
-                required
-              />
-              <CommunitySelector />
-              <FieldValidationMessage field="community.id" />
             </Field>
             <div className="mt-4">
               <CheckboxWithLabel
@@ -195,30 +195,24 @@ export function LocalContextsNoticeForm({
               <div className="text-sm mb-1">{licenceComponent}</div>
             </div>
           </div>
-          {watch('type') && (
-            <div className="w-full md:w-1/2 prose">
-              <strong className="flex items-center gap-1">
-                <InformationCircleIcon className="w-4 h-4 stroke-neutral-900" />
-                {t('noticeInformationTitle')}
-              </strong>
-              <p>
-                {tNotices(
-                  localContextsNoticeEnrichmentTypeMapping[
-                    watch('type')! as LocalContextsNoticeEnrichmentType
-                  ].informationTranslationKey
-                )}
-              </p>
-              <p>
-                <a
-                  href="https://localcontexts.org"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {t('noticeInformationLink')}
-                </a>
-              </p>
-            </div>
-          )}
+          <div className="w-full md:w-1/2">
+            <Field as={Fragment}>
+              <InputLabel
+                title={t('inLanguage')}
+                description={t('languageSubTitle')}
+              />
+              <LanguageSelector name="inLanguage" />
+            </Field>
+            <Field as={Fragment}>
+              <InputLabel
+                title={t('community')}
+                description={t('communityDescription')}
+                required
+              />
+              <CommunitySelector />
+              <FieldValidationMessage field="community.id" />
+            </Field>
+          </div>
         </div>
         <ButtonGroup>
           <PrimaryButton type="submit" disabled={isSubmitting}>

apps/researcher/src/app/[locale]/objects/[id]/local-contexts-notices/mapping.ts

@@ -9,50 +9,42 @@ export {LocalContextsNoticeEnrichmentType};
 export const localContextsNoticeEnrichmentTypeMapping = {
   [LocalContextsNoticeEnrichmentType.Authorization]: {
     titleTranslationKey: 'authorization',
-    descriptionTranslationKey: 'authorizationDescription',
-    informationTranslationKey: 'authorizationInformation',
+    labelTranslationKey: 'authorizationLabel',
     imageSrc: '/images/local-contexts-notices/authorization.png',
   },
   [LocalContextsNoticeEnrichmentType.Belonging]: {
     titleTranslationKey: 'belonging',
-    descriptionTranslationKey: 'belongingDescription',
-    informationTranslationKey: 'belongingInformation',
+    labelTranslationKey: 'belongingLabel',
     imageSrc: '/images/local-contexts-notices/belonging.png',
   },
   [LocalContextsNoticeEnrichmentType.Caring]: {
     titleTranslationKey: 'caring',
-    descriptionTranslationKey: 'caringDescription',
-    informationTranslationKey: 'caringInformation',
+    labelTranslationKey: 'caringLabel',
     imageSrc: '/images/local-contexts-notices/caring.png',
   },
   [LocalContextsNoticeEnrichmentType.Gender_Aware]: {
     titleTranslationKey: 'genderAware',
-    descriptionTranslationKey: 'genderAwareDescription',
-    informationTranslationKey: 'genderAwareInformation',
+    labelTranslationKey: 'genderAwareLabel',
     imageSrc: '/images/local-contexts-notices/gender-aware.png',
   },
   [LocalContextsNoticeEnrichmentType.Leave_Undisturbed]: {
     titleTranslationKey: 'leaveUndisturbed',
-    descriptionTranslationKey: 'leaveUndisturbedDescription',
-    informationTranslationKey: 'leaveUndisturbedInformation',
+    labelTranslationKey: 'leaveUndisturbedLabel',
     imageSrc: '/images/local-contexts-notices/leave-undisturbed.png',
   },
   [LocalContextsNoticeEnrichmentType.Safety]: {
     titleTranslationKey: 'safety',
-    descriptionTranslationKey: 'safetyDescription',
-    informationTranslationKey: 'safetyInformation',
+    labelTranslationKey: 'safetyLabel',
     imageSrc: '/images/local-contexts-notices/safety.png',
   },
   [LocalContextsNoticeEnrichmentType.Viewing]: {
     titleTranslationKey: 'viewing',
-    descriptionTranslationKey: 'viewingDescription',
-    informationTranslationKey: 'viewingInformation',
+    labelTranslationKey: 'viewingLabel',
     imageSrc: '/images/local-contexts-notices/viewing.png',
   },
   [LocalContextsNoticeEnrichmentType.Withholding]: {
     titleTranslationKey: 'withholding',
-    descriptionTranslationKey: 'withholdingDescription',
-    informationTranslationKey: 'withholdingInformation',
+    labelTranslationKey: 'withholdingLabel',
     imageSrc: '/images/local-contexts-notices/withholding.png',
   },
 } as const;

apps/researcher/src/app/[locale]/objects/[id]/local-contexts-notices/overview.tsx

@@ -1,7 +1,10 @@
 import {localContextsNoticesEnrichmentFetcher} from '@/lib/enricher-instances';
 import Image from 'next/image';
 import useObject from '../use-object';
-import {localContextsNoticeEnrichmentTypeMapping} from './mapping';
+import {
+  localContextsNoticeEnrichmentTypeMapping,
+  LocalContextsNoticeEnrichmentType,
+} from './mapping';
 import {
   LocalizedMarkdown,
   Notifications,
@@ -36,20 +39,26 @@ export default async function LocalContextsNotices() {
       isCurrentPublisher: false,
       dateCreated: notice.pubInfo.dateCreated,
       inLanguage: notice.inLanguage,
+      label: tNotices(
+        localContextsNoticeEnrichmentTypeMapping[
+          notice.type as LocalContextsNoticeEnrichmentType
+        ].labelTranslationKey
+      ),
     };
   }
 
   // Default notice when there are no localContextsNotices
   const defaultNotice = {
     id: 'attributionIncomplete',
     title: tNotices('attributionIncomplete'),
-    description: tNotices('attributionIncompleteDescription'),
+    description: undefined,
     imageSrc: '/images/local-contexts-notices/attribution-incomplete.png',
     creatorName: t('defaultProvider'),
     isCurrentPublisher: true,
     dateCreated: undefined,
     communityName: undefined,
     inLanguage: undefined,
+    label: tNotices('attributionIncompleteLabel'),
   };
 
   // Determine notices to display
@@ -100,12 +109,23 @@ export default async function LocalContextsNotices() {
               </div>
             </div>
             <div className="w-full xl:w-4/5 flex flex-col gap-2 border-t border-neutral-400 pb-12">
-              <div className="border-t first:border-0 border-neutral-200 flex flex-col lg:flex-row justify-between gap-2 ">
+              <div className="border-t first:border-0 border-neutral-200 flex flex-col lg:flex-row justify-between gap-2">
                 <div className="w-full lg:w-2/3 py-3">
+                  <div className="bg-neutral-50 p-4 rounded-sm italic text-neutral-600 text-sm">
+                    {notice.label}
+                    <div className="w-full flex justify-end pt-1">
+                      <Image
+                        height={26}
+                        width={80}
+                        src="/images/local-contexts-notices/logo-local-contexts.png"
+                        alt="Logo local context"
+                      />
+                    </div>
+                  </div>
+                  <div className="my-1">{notice.description}</div>
                   {notice.inLanguage && (
                     <Language languageCode={notice.inLanguage} />
                   )}
-                  <p>{notice.description}</p>
                 </div>
                 <div className="w-full lg:w-1/3">
                   <ProvidedBy

apps/researcher/src/components/form/local-contexts-notice-selector.tsx

@@ -2,42 +2,24 @@
 
 import {useController, useFormContext} from 'react-hook-form';
 import {useTranslations} from 'next-intl';
-import {
-  LocalContextsNoticeEnrichmentType,
-  localContextsNoticeEnrichmentTypeMapping,
-} from '@/app/[locale]/objects/[id]/local-contexts-notices/mapping';
+import {localContextsNoticeEnrichmentTypeMapping} from '@/app/[locale]/objects/[id]/local-contexts-notices/mapping';
 import Image from 'next/image';
 import {Field, Label, Radio, RadioGroup} from '@headlessui/react';
-import {Fragment, useCallback} from 'react';
+import {Fragment} from 'react';
 
 interface Props extends React.HTMLProps<HTMLInputElement> {
   name: string;
 }
 
 export function LocalContextsNoticeSelector({name}: Props) {
-  const {control, setValue} = useFormContext();
+  const {control} = useFormContext();
   const controller = useController({control, name});
 
   const t = useTranslations('LocalContextsNotices');
 
-  const onChange = useCallback(
-    (value: LocalContextsNoticeEnrichmentType) => {
-      setValue(
-        'description',
-        t(
-          localContextsNoticeEnrichmentTypeMapping[value]
-            .descriptionTranslationKey
-        )
-      );
-      controller.field.onChange(value);
-    },
-    [controller.field, setValue, t]
-  );
-
   return (
     <RadioGroup
-      value={controller.field.value}
-      onChange={onChange}
+      {...controller.field}
       name="localContextsNoticeEnrichmentType"
       className="w-full flex gap-2 overflow-x-scroll mt-4"
     >

apps/researcher/src/components/form/textarea.tsx

@@ -13,7 +13,7 @@ export function Textarea({name, cols = 30, rows = 3}: Props) {
       {...register(name)}
       cols={cols}
       rows={rows}
-      className="border border-green-grey-200 rounded p-2"
+      className="border border-neutral-400 rounded p-2 text-sm w-full whitespace-normal max-w-xl"
     />
   );
 }

apps/researcher/src/messages/en/messages.json

@@ -153,31 +153,23 @@
   },
   "LocalContextsNotices": {
     "attributionIncomplete": "Attribution Incomplete",
-    "attributionIncompleteDescription": "Collections and items in our institution have incomplete, inaccurate, and/or missing attribution. We are using this notice to clearly identify this material so that it can be updated, or corrected by communities of origin. Our institution is committed to collaboration and partnerships to address this problem of incorrect or missing attribution.",
+    "attributionIncompleteLabel": "Collections and items in our institution have incomplete, inaccurate, and/or missing attribution. We are using this notice to clearly identify this material so that it can be updated, or corrected by communities of origin. Our institution is committed to collaboration and partnerships to address this problem of incorrect or missing attribution.",
     "authorization": "Authorization",
-    "authorizationDescription": "The Authorization Notice is being used to indicate that distinct Tribal or community authorization through consultation needs to be obtained for any reproduction of this item, including for the use in exhibitions and publications in print or online.",
-    "authorizationInformation": "The Authorization Notice recognizes that specific Tribal or community authorization through consultation is necessary prior to use of specific items or collections in all forms of publication and exhibits.",
+    "authorizationLabel": "The Authorization Notice is being used to indicate that distinct Tribal or community authorization through consultation needs to be obtained for any reproduction of this item, including for the use in exhibitions and publications in print or online.",
     "belonging": "Belonging",
-    "belongingDescription": "The Belonging Notice is being used to indicate that only specific persons belonging to communities, Tribes, Clans, and societies have the right to access and handle these specific items or collections.",
-    "belongingInformation": "The Belonging Notice recognizes the exclusive right of Indigenous communities, Tribes, Clans, or societies to access and handle items or collections.",
+    "belongingLabel": "The Belonging Notice is being used to indicate that only specific persons belonging to communities, Tribes, Clans, and societies have the right to access and handle these specific items or collections.",
     "caring": "Caring",
-    "caringDescription": "The Caring Notice is being used to indicate that specialized cultural care is required. Care for items or collections will require specific community guidelines for storage and handling.",
-    "caringInformation": "The Caring Notice recognizes cultural ways of caring for materials including specific ways of handling, storing, or managing specific items or collections. In all cases, care will be defined through community consultations.",
+    "caringLabel": "The Caring Notice is being used to indicate that specialized cultural care is required. Care for items or collections will require specific community guidelines for storage and handling.",
     "genderAware": "Gender Aware",
-    "genderAwareDescription": "The Gender Aware Notice is being used to indicate there are specific gender responsibilities that affect who can access, view, and/or handle this item or collection.",
-    "genderAwareInformation": "The Gender Aware Notice recognizes that gender  influences access, handling, viewing, and interacting with items or collections. Specifically, this Notice calls attention to who should handle items or collections based on their self-identified gender.",
+    "genderAwareLabel": "The Gender Aware Notice is being used to indicate there are specific gender responsibilities that affect who can access, view, and/or handle this item or collection.",
     "leaveUndisturbed": "Leave Undisturbed",
-    "leaveUndisturbedDescription": "The Leave Undisturbed Notice is being used to indicate that items in a collection should not be disturbed. They should only be moved or disturbed under very limited circumstances according to community guidance.",
-    "leaveUndisturbedInformation": "The Leave Undisturbed Notice recognizes the cultural significance and necessity of not disturbing certain cultural materials.",
+    "leaveUndisturbedLabel": "The Leave Undisturbed Notice is being used to indicate that items in a collection should not be disturbed. They should only be moved or disturbed under very limited circumstances according to community guidance.",
     "safety": "Safety",
-    "safetyDescription": "The Safety Notice is being used to indicate that extreme caution and care needs to be taken in viewing and handling this item or collection for individual or community well-being and health.",
-    "safetyInformation": "The Safety Notice calls attention to the need for respectful safety precautions to avoid handling items in collections when one is menstruating and/or pregnant for the well-being and health of the individual and their family.",
+    "safetyLabel": "The Safety Notice is being used to indicate that extreme caution and care needs to be taken in viewing and handling this item or collection for individual or community well-being and health.",
     "viewing": "Viewing",
-    "viewingDescription": "The Viewing Notice is being used to indicate that there are limits to who, how, and when an item/collection can be viewed, distributed, and circulated. This includes existing images or representations of an existing or deaccessioned item(s) within a collection(s).",
-    "viewingInformation": "The Viewing Notice recognizes that there are limits to viewing or accessing current or deaccessioned items in a collection(s) or their representations.",
+    "viewingLabel": "The Viewing Notice is being used to indicate that there are limits to who, how, and when an item/collection can be viewed, distributed, and circulated. This includes existing images or representations of an existing or deaccessioned item(s) within a collection(s).",
     "withholding": "Withholding",
-    "withholdingDescription": "The Withholding Notice is being used to indicate that no reproductions of this item or collection should ever be made. If there are already existing photographs or reproductions, these should not be used in any exhibition or publication in print, online, or any other format.",
-    "withholdingInformation": "The Withholding Notice recognizes the need to completely withhold certain items or collections from photography, reproduction, publications, and any type of exhibit in future modalities."
+    "withholdingLabel": "The Withholding Notice is being used to indicate that no reproductions of this item or collection should ever be made. If there are already existing photographs or reproductions, these should not be used in any exhibition or publication in print, online, or any other format."
   },
   "LocalContextsNoticesOverview": {
     "title": "Local Context Notices",
@@ -191,7 +183,7 @@
   "LocalContextsNoticeForm": {
     "title": "Add a Local Context Notice",
     "type": "Select one of the Notices. Click on a label for more information.",
-    "description": "Label text",
+    "description": "Notice motivation",
     "descriptionSubTitle": "Here you can insert text about the use of this Notice.",
     "inLanguage": "Language",
     "languageSubTitle": "Select a language of the text. Start typing to select a language.",
@@ -204,12 +196,11 @@
     "serverError": "Something went wrong while creating the Local Context Notice. Please try again later.",
     "buttonSubmit": "Add Notice",
     "buttonCancel": "Cancel",
-    "descriptionRequired": "Label text is required",
     "agreedToLicenseUnchecked": "You need to agree to the license before you can add a narrative",
     "noCommunities": "You are not yet a member of a community that has permission to add a story. You can create a community or join an existing community.",
     "saving": "Saving...",
-    "noticeInformationTitle": "Notice information",
-    "noticeInformationLink": "More information on localcontexts.org"
+    "noticeInformationTitle": "Notice text",
+    "noticeInformationSubTitle": "This text will be placed as a label."
   },
   "Provenance": {
     "title": "Provenance",