feat: locales

public/locales/en/collectionFeaturedItems.json

@@ -1,8 +1,12 @@
 {
   "pageTitle": "Featured Items",
   "infoMessage": "Add Featured Items to showcase key content in your collection. These items will appear as cards in a carousel, each including a title and either text or text with an image. If your collection has a description, it will be the first carousel item by default.",
-  "som": "Select or upload an image",
+  "previewCarouselHeader": "Live preview of your featured items",
   "form": {
+    "title": {
+      "label": "Title",
+      "required": "Title is required"
+    },
     "image": {
       "label": "Image",
       "description": "Upload an image to display with the item, accepted extensions are png, jpg, jpeg and webp, and the maximum file size is {{maxImageSize}}.",
@@ -12,6 +16,10 @@
       "restoreInitial": "Restore initial image",
       "changeImage": "Change image",
       "removeImage": "Remove image"
+    },
+    "content": {
+      "label": "Content",
+      "required": "Content is required"
     }
   }
 }

public/locales/en/shared.json

@@ -4,6 +4,8 @@
   "add": "Add",
   "cancel": "Cancel",
   "continue": "Continue",
+  "saveChanges": "Save Changes",
+  "dragHandleLabel": "press space to select and keys to drag",
   "pageNumberNotFound": {
     "heading": "Page Number Not Found",
     "message": "The page number you requested does not exist. Please try a different page number."
@@ -56,11 +58,7 @@
       "submitting": "Form Submitting",
       "submissionSuccess": "Form submission successful"
     },
-    "saveButton": {
-      "createMode": "Save Dataset",
-      "editMode": "Save Changes"
-    },
-    "cancelButton": "Cancel"
+    "saveDataset": "Save Dataset"
   },
   "collectionForm": {
     "fields": {
@@ -142,10 +140,6 @@
       "createSuccess": "Collection created successfully.",
       "editSuccess": "Collection updated successfully."
     },
-    "saveButton": {
-      "createMode": "Create Collection",
-      "editMode": "Save Changes"
-    },
-    "cancelButton": "Cancel"
+    "createCollection": "Create Collection"
   }
 }

src/sections/collection-featured-items/featured-items-form/FeaturedItemsForm.module.scss

@@ -5,6 +5,11 @@
   padding-top: 2rem;
 }
 
+.save-changes-wrapper {
+  display: flex;
+  justify-content: flex-end;
+}
+
 .show-data-checkbox-wrapper {
   display: flex;
   gap: 0.5rem;

src/sections/collection-featured-items/featured-items-form/FeaturedItemsForm.tsx

@@ -2,11 +2,8 @@ import { FormProvider, useFieldArray, useForm } from 'react-hook-form'
 import { DndContext, DragEndEvent } from '@dnd-kit/core'
 import { restrictToVerticalAxis } from '@dnd-kit/modifiers'
 import { SortableContext } from '@dnd-kit/sortable'
-import {
-  Button
-  // Form,
-  // QuestionMarkTooltip
-} from '@iqss/dataverse-design-system'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@iqss/dataverse-design-system'
 import { CollectionFeaturedItem } from '@/collection/domain/models/CollectionFeaturedItem'
 import { FeaturedItemField } from './featured-item-field/FeaturedItemField'
 import { PreviewCarousel } from './PreviewCarousel'
@@ -22,6 +19,7 @@ export const FeaturedItemsForm = ({
   defaultValues,
   collectionFeaturedItems
 }: FeaturedItemsFormProps) => {
+  const { t: tShared } = useTranslation('shared')
   const form = useForm<FeaturedItemsFormData>({
     mode: 'onChange',
     defaultValues
@@ -94,31 +92,11 @@ export const FeaturedItemsForm = ({
         className={styles.form}
         data-testid="collection-form">
         {fieldsArray.length > 3 && (
-          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-            <Button disabled={!form.formState.isDirty}>Save Changes</Button>
+          <div className={styles['save-changes-wrapper']}>
+            <Button disabled={!form.formState.isDirty}>{tShared('saveChanges')}</Button>
           </div>
         )}
 
-        {/* <Controller
-          name="withShowDataButton"
-          control={form.control}
-          render={({ field: { onChange, ref, value } }) => (
-            <div className={styles['show-data-checkbox-wrapper']}>
-              <Form.Group.Checkbox
-                id="withShowDataButton"
-                onChange={onChange}
-                label="Show data by default"
-                checked={value}
-                ref={ref}
-              />
-              <QuestionMarkTooltip
-                placement="right"
-                message="If this option is unchecked, the collections, datasets, and files list will not appear by default. To display them, the user will need to click a button located below the carousel."
-              />
-            </div>
-          )}
-        /> */}
-
         <DndContext onDragEnd={handleDragEnd} modifiers={[restrictToVerticalAxis]}>
           <SortableContext items={fieldsArray}>
             {(fieldsArray as FeaturedItemFieldWithSortId[]).map((field, index) => (
@@ -136,8 +114,8 @@ export const FeaturedItemsForm = ({
             ))}
           </SortableContext>
         </DndContext>
-        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-          <Button disabled={!form.formState.isDirty}>Save Changes</Button>
+        <div className={styles['save-changes-wrapper']}>
+          <Button disabled={!form.formState.isDirty}>{tShared('saveChanges')}</Button>
         </div>
       </form>
     </FormProvider>

src/sections/collection-featured-items/featured-items-form/PreviewCarousel.tsx

@@ -1,10 +1,12 @@
 import { useWatch } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
 import { Accordion } from '@iqss/dataverse-design-system'
 import { CollectionFeaturedItem } from '@/collection/domain/models/CollectionFeaturedItem'
 import { FeaturedItems } from '@/sections/collection/featured-items/FeaturedItems'
 import { FeaturedItemField } from '../types'
 
 export const PreviewCarousel = () => {
+  const { t } = useTranslation('collectionFeaturedItems')
   const featuredItemsFieldValue = useWatch({ name: 'featuredItems' }) as FeaturedItemField[]
 
   const formFieldsToFeaturedItems: CollectionFeaturedItem[] = featuredItemsFieldValue.map(
@@ -35,7 +37,7 @@ export const PreviewCarousel = () => {
   return (
     <Accordion>
       <Accordion.Item eventKey="0" style={{ overflow: 'hidden' }}>
-        <Accordion.Header>Preview of the featured items carousel</Accordion.Header>
+        <Accordion.Header>{t('previewCarouselHeader')}</Accordion.Header>
         <Accordion.Body style={{ padding: 0 }}>
           <FeaturedItems featuredItems={formFieldsToFeaturedItems} />
         </Accordion.Body>

src/sections/collection-featured-items/featured-items-form/featured-item-field/FeaturedItemField.tsx

@@ -6,6 +6,7 @@ import { Col, Form, RichTextEditor, Row } from '@iqss/dataverse-design-system'
 import { DynamicFieldsButtons } from '@/sections/shared/form/DynamicFieldsButtons/DynamicFieldsButtons'
 import { ImageField } from './ImageField'
 import styles from './FeaturedItemField.module.scss'
+import { useTranslation } from 'react-i18next'
 
 interface FeaturedItemFieldProps {
   id: string
@@ -24,6 +25,9 @@ export const FeaturedItemField = ({
   disableDragWhenOnlyOneItem,
   initialImageUrl
 }: FeaturedItemFieldProps) => {
+  const { t } = useTranslation('collectionFeaturedItems')
+  const { t: tShared } = useTranslation('shared')
+
   const { control } = useFormContext()
   const {
     attributes,
@@ -64,7 +68,7 @@ export const FeaturedItemField = ({
             className={cn(styles['drag-handle'], {
               [styles['disabled']]: disableDragWhenOnlyOneItem
             })}
-            aria-label="press space to select and keys to drag"
+            aria-label={tShared('dragHandleLabel')}
             disabled={disableDragWhenOnlyOneItem}>
             <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
               <circle cx="9" cy="6" r="1.5" fill="#777" />
@@ -80,12 +84,12 @@ export const FeaturedItemField = ({
           <Row>
             {/* TITLE FIELD */}
             <Form.Group controlId={`featuredItems.${itemIndex}.title`} as={Col} md={6}>
-              <Form.Group.Label required={true}>Title</Form.Group.Label>
+              <Form.Group.Label required={true}>{t('form.title.label')}</Form.Group.Label>
 
               <Controller
                 name={`featuredItems.${itemIndex}.title`}
                 control={control}
-                rules={{ required: 'Title is required' }}
+                rules={{ required: t('form.title.required') }}
                 render={({ field: { onChange, ref, value }, fieldState: { invalid, error } }) => (
                   <Col>
                     <Form.Group.Input
@@ -110,17 +114,17 @@ export const FeaturedItemField = ({
           <Row>
             <Form.Group as={Col} className={styles['form-group-content']}>
               <Form.Group.Label required={true} id={`featuredItems.${itemIndex}.content`}>
-                Content
+                {t('form.content.label')}
               </Form.Group.Label>
 
               <Controller
                 name={`featuredItems.${itemIndex}.content`}
                 control={control}
                 rules={{
-                  required: 'Content is required',
+                  required: t('form.content.required'),
                   validate: (value: string) => {
                     if (value === '<p></p>' || value === '') {
-                      return 'Content is required'
+                      return t('form.content.required')
                     }
                     return true
                   }

src/sections/collection-featured-items/featured-items-form/featured-item-field/ImageField.tsx

@@ -74,7 +74,11 @@ export const ImageField = ({ itemIndex, initialImageUrl }: ImageFieldProps) => {
       controlId={`featuredItems.${itemIndex}.image`}
       as={Col}
       md={6}>
-      <Form.Group.Label required={false} message={t('form.image.description')}>
+      <Form.Group.Label
+        required={false}
+        message={t('form.image.description', {
+          maxImageSize: formatBytes(IMAGE_MAX_SIZE_ACCEPTED)
+        })}>
         {t('form.image.label')}
       </Form.Group.Label>
 

src/sections/collection/featured-items/FeaturedItem.tsx

@@ -24,6 +24,7 @@ export const FeaturedItem = ({ featuredItem }: FeaturedItemProps) => {
       setCardScrolled(scrollTop > 50)
     }
   }
+
   return (
     <div className={styles['featured-item-card']} onScroll={handleScroll} ref={cardRef}>
       <h2

src/sections/collection/featured-items/FeaturedItems.module.scss

@@ -95,7 +95,14 @@
   @media (min-width: 1024px) {
     max-height: 80dvh;
 
+    .title {
+      padding-inline: 2rem;
+    }
+
     .inner-content {
+      padding-inline: 2rem;
+      padding-bottom: 2rem;
+
       &:has(.image) {
         .content {
           max-width: calc(60% - var(--inner-content-gap));

src/sections/shared/form/DatasetMetadataForm/MetadataForm/index.tsx

@@ -36,7 +36,7 @@ export const MetadataForm = ({
 }: FormProps) => {
   const { user } = useSession()
   const navigate = useNavigate()
-  const { t } = useTranslation('shared', { keyPrefix: 'datasetMetadataForm' })
+  const { t } = useTranslation('shared')
 
   const accordionRef = useRef<HTMLDivElement>(null)
   const formContainerRef = useRef<HTMLDivElement>(null)
@@ -150,15 +150,15 @@ export const MetadataForm = ({
             {onEditMode && (
               <div>
                 <Button type="submit" disabled={disableSubmitButton}>
-                  {t('saveButton.editMode')}
+                  {t('saveChanges')}
                 </Button>
                 <Button
                   withSpacing
                   variant="secondary"
                   type="button"
                   onClick={handleCancel}
                   disabled={submissionStatus === SubmissionStatus.IsSubmitting}>
-                  {t('cancelButton')}
+                  {t('cancel')}
                 </Button>
               </div>
             )}
@@ -167,15 +167,15 @@ export const MetadataForm = ({
           {submissionStatus === SubmissionStatus.Errored && (
             <Alert
               variant={'danger'}
-              customHeading={t('validationAlert.title')}
+              customHeading={t('datasetMetadataForm.validationAlert.title')}
               dismissible={false}>
               {submitError}
             </Alert>
           )}
 
           {submissionStatus === SubmissionStatus.SubmitComplete && (
             <Alert variant="success" dismissible={false}>
-              {t('status.success')}
+              {t('datasetMetadataForm.status.success')}
             </Alert>
           )}
 
@@ -198,21 +198,24 @@ export const MetadataForm = ({
           <SeparationLine />
 
           {onCreateMode && (
-            <Alert variant={'info'} customHeading={t('metadataTip.title')} dismissible={false}>
-              {t('metadataTip.content')}
+            <Alert
+              variant={'info'}
+              customHeading={t('datasetMetadataForm.metadataTip.title')}
+              dismissible={false}>
+              {t('datasetMetadataForm.metadataTip.content')}
             </Alert>
           )}
           <div className={styles['bottom-buttons-container']}>
             <Button type="submit" disabled={disableSubmitButton}>
-              {onCreateMode ? t('saveButton.createMode') : t('saveButton.editMode')}
+              {onCreateMode ? t('datasetMetadataForm.saveDataset') : t('saveChanges')}
             </Button>
             <Button
               withSpacing
               variant="secondary"
               type="button"
               onClick={handleCancel}
               disabled={submissionStatus === SubmissionStatus.IsSubmitting}>
-              {t('cancelButton')}
+              {t('cancel')}
             </Button>
           </div>
         </form>

src/sections/shared/form/EditCreateCollectionForm/collection-form/CollectionForm.tsx

@@ -40,7 +40,7 @@ export const CollectionForm = ({
   isEditingRootCollection
 }: CollectionFormProps) => {
   const formContainerRef = useRef<HTMLDivElement>(null)
-  const { t } = useTranslation('shared', { keyPrefix: 'collectionForm' })
+  const { t } = useTranslation('shared')
   const navigate = useNavigate()
   const onCreateMode = mode === 'create'
 
@@ -86,7 +86,9 @@ export const CollectionForm = ({
       )}
       {submissionStatus === SubmissionStatus.SubmitComplete && (
         <Alert variant="success" dismissible={false}>
-          {onCreateMode ? t('submitStatus.createSuccess') : t('submitStatus.editSuccess')}
+          {onCreateMode
+            ? t('collectionForm.submitStatus.createSuccess')
+            : t('collectionForm.submitStatus.editSuccess')}
         </Alert>
       )}
       <FormProvider {...form}>
@@ -123,14 +125,14 @@ export const CollectionForm = ({
 
           <Stack direction="horizontal" className="pt-3">
             <Button type="submit" disabled={disableSubmitButton}>
-              {onCreateMode ? t('saveButton.createMode') : t('saveButton.editMode')}
+              {onCreateMode ? t('collectionForm.createCollection') : t('saveChanges')}
             </Button>
             <Button
               variant="secondary"
               type="button"
               onClick={handleCancel}
               disabled={submissionStatus === SubmissionStatus.IsSubmitting}>
-              {t('cancelButton')}
+              {t('cancel')}
             </Button>
           </Stack>
         </form>