Merge pull request #575 from IQSS/feat/568-featured-items

Featured Items - Collection Page
IQSS · Feb 4, 2025 · 692283b · 692283b
2 parents dcdb033 + 5e83f2a
commit 692283b
Show file tree

Hide file tree

Showing 77 changed files with 4,076 additions and 196 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,8 +12,12 @@
     ]
   },
   "dependencies": {
+    "@dnd-kit/core": "6.1.0",
+    "@dnd-kit/modifiers": "7.0.0",
+    "@dnd-kit/sortable": "8.0.0",
+    "@dnd-kit/utilities": "3.2.2",
     "@faker-js/faker": "7.6.0",
-    "@iqss/dataverse-client-javascript": "2.0.0-alpha.13",
+    "@iqss/dataverse-client-javascript": "2.0.0-alpha.16",
     "@iqss/dataverse-design-system": "*",
     "@istanbuljs/nyc-config-typescript": "1.0.2",
     "@tanstack/react-table": "8.9.2",
@@ -26,6 +30,7 @@
     "async-mutex": "0.5.0",
     "bootstrap": "5.2.3",
     "classnames": "2.5.1",
+    "dompurify": "3.2.3",
     "html-react-parser": "3.0.16",
     "i18next": "22.4.9",
     "i18next-browser-languagedetector": "7.0.1",
@@ -41,6 +46,7 @@
     "react-loader-spinner": "5.3.4",
     "react-markdown": "8.0.7",
     "react-router-dom": "6.23.1",
+    "react-toastify": "11.0.2",
     "react-topbar-progress-indicator": "4.1.1",
     "sass": "1.58.1",
     "typescript": "5.7.2",

diff --git a/packages/design-system/CHANGELOG.md b/packages/design-system/CHANGELOG.md
@@ -41,7 +41,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 - **FormRadio:** NEW radio element to show radio button.
 - **NavbarDropdownItem:** Now accepts `as` prop and takes `as` Element props.
 - **FormInputGroup:** extend Props Interface to accept `hasValidation` prop to properly show rounded corners in an <InputGroup> with validation
-- **Button:** extend Props Interface to accept `size` prop.
+- **Button:** extend Props Interface to accept `size` prop and variant `danger`.
 - **FormInput:** extend Props Interface to accept `autoFocus` and `type: 'search'` prop.
 - **FormTextArea:** extend Props Interface to accept `autoFocus` prop.
 - **FormSelect:** extend Props Interface to accept `autoFocus` prop.

diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -35,13 +35,7 @@
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "8.0.0",
     "@dnd-kit/utilities": "3.2.2",
-    "@tiptap/extension-blockquote": "2.9.0",
-    "@tiptap/extension-bullet-list": "2.9.0",
-    "@tiptap/extension-code-block": "2.9.0",
-    "@tiptap/extension-heading": "2.9.0",
     "@tiptap/extension-link": "2.9.0",
-    "@tiptap/extension-list-item": "2.9.0",
-    "@tiptap/extension-ordered-list": "2.9.0",
     "@tiptap/extension-placeholder": "2.9.0",
     "@tiptap/extension-underline": "2.9.0",
     "@tiptap/pm": "2.9.0",

diff --git a/packages/design-system/src/lib/assets/styles/index.scss b/packages/design-system/src/lib/assets/styles/index.scss
@@ -1,2 +1,3 @@
 @import 'fontcustom';
 @import 'bootstrap-customized';
+@import 'rich-text-editor-content';
diff --git a/packages/design-system/src/lib/assets/styles/rich-text-editor-content.scss b/packages/design-system/src/lib/assets/styles/rich-text-editor-content.scss
@@ -0,0 +1,49 @@
+/*
+  This file is used to style the content generated by the Rich Text Editor.
+  It is used in the RichTextEditor component and should be used when rendering html content generated by the Rich Text Editor to keep the styling consistent.
+*/
+
+.rte-blockquote {
+  padding: 6px 10px;
+  background-color: rgba(0 0 0 / 15%);
+  border-left: solid 5px gray;
+  border-radius: 4px;
+
+  p {
+    margin-bottom: 0.5rem;
+  }
+}
+
+.rte-code-block {
+  padding: 1rem;
+  overflow: auto;
+  font-size: 85%;
+  line-height: 1.45;
+  word-wrap: normal;
+  background-color: rgba(0 0 0 / 10%);
+  border-radius: 6px;
+}
+
+.rte-code {
+  margin: 0;
+  padding: 0.2em 0.4em;
+  font-size: 85%;
+  white-space: break-spaces;
+  background-color: rgba(0 0 0 / 10%);
+  border-radius: 0.375rem;
+}
+
+.rte-code-block code {
+  display: inline;
+  max-width: auto;
+  margin: 0;
+  padding: 0;
+  overflow: visible;
+  font-size: 100%;
+  line-height: inherit;
+  white-space: pre;
+  word-wrap: normal;
+  word-break: normal;
+  background-color: transparent;
+  border: 0;
+}
diff --git a/packages/design-system/src/lib/components/button/Button.tsx b/packages/design-system/src/lib/components/button/Button.tsx
@@ -5,7 +5,7 @@ import { IconName } from '../icon/IconName'
 import { Icon } from '../icon/Icon'
 
 type ButtonSize = 'sm' | 'lg'
-type ButtonVariant = 'primary' | 'secondary' | 'link'
+type ButtonVariant = 'primary' | 'secondary' | 'link' | 'danger'
 type ButtonType = 'button' | 'reset' | 'submit'
 
 interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {

diff --git a/packages/design-system/src/lib/components/form/form-group/form-element/FormInput.tsx b/packages/design-system/src/lib/components/form/form-group/form-element/FormInput.tsx
@@ -3,8 +3,8 @@ import * as React from 'react'
 
 export type FormInputElement = HTMLInputElement | HTMLTextAreaElement
 
-export interface FormInputProps extends React.HTMLAttributes<FormInputElement> {
-  type?: 'text' | 'email' | 'password' | 'search'
+export interface FormInputProps extends Omit<React.InputHTMLAttributes<FormInputElement>, 'size'> {
+  type?: 'text' | 'email' | 'password' | 'search' | 'file'
   readOnly?: boolean
   name?: string
   isValid?: boolean

diff --git a/packages/design-system/src/lib/components/rich-text-editor/EditorActions.tsx b/packages/design-system/src/lib/components/rich-text-editor/EditorActions.tsx
@@ -114,6 +114,7 @@ export const EditorActions = ({ editor, disabled, locales }: EditorActionsProps)
             aria-label="Heading 1"
             disabled={disabled}
             title="Heading 1"
+            type="button"
             variant="secondary"
             size="sm"
             icon={<TypeH1 size={18} />}
@@ -125,6 +126,7 @@ export const EditorActions = ({ editor, disabled, locales }: EditorActionsProps)
             aria-label="Heading 2"
             disabled={disabled}
             title="Heading 2"
+            type="button"
             variant="secondary"
             size="sm"
             icon={<TypeH2 size={18} />}
@@ -136,6 +138,7 @@ export const EditorActions = ({ editor, disabled, locales }: EditorActionsProps)
             aria-label="Heading 3"
             disabled={disabled}
             title="Heading 3"
+            type="button"
             variant="secondary"
             size="sm"
             icon={<TypeH3 size={18} />}
@@ -151,6 +154,7 @@ export const EditorActions = ({ editor, disabled, locales }: EditorActionsProps)
             aria-label="Bold"
             disabled={disabled}
             title="Bold"
+            type="button"
             variant="secondary"
             size="sm"
             icon={<TypeBold size={18} />}
@@ -164,6 +168,7 @@ export const EditorActions = ({ editor, disabled, locales }: EditorActionsProps)
             aria-label="Italic"
             disabled={disabled}
             title="Italic"
+            type="button"
             variant="secondary"
             size="sm"
             icon={<TypeItalic size={18} />}
@@ -178,6 +183,7 @@ export const EditorActions = ({ editor, disabled, locales }: EditorActionsProps)
             aria-label="Underline"
             disabled={disabled}
             title="Underline"
+            type="button"
             variant="secondary"
             size="sm"
             icon={<TypeUnderline size={18} />}
@@ -191,6 +197,7 @@ export const EditorActions = ({ editor, disabled, locales }: EditorActionsProps)
             aria-label="Strikethrough"
             disabled={disabled}
             title="Strikethrough"
+            type="button"
             variant="secondary"
             size="sm"
             icon={<TypeStrikethrough size={18} />}
@@ -208,6 +215,7 @@ export const EditorActions = ({ editor, disabled, locales }: EditorActionsProps)
             aria-label="Unordered list"
             disabled={disabled}
             title="Unordered list"
+            type="button"
             variant="secondary"
             size="sm"
             icon={<ListUl size={18} />}
@@ -221,6 +229,7 @@ export const EditorActions = ({ editor, disabled, locales }: EditorActionsProps)
             aria-label="Ordered list"
             disabled={disabled}
             title="Ordered list"
+            type="button"
             variant="secondary"
             size="sm"
             icon={<ListOl size={18} />}
@@ -235,6 +244,7 @@ export const EditorActions = ({ editor, disabled, locales }: EditorActionsProps)
             aria-label="Add link"
             disabled={disabled}
             title="Add link"
+            type="button"
             variant="secondary"
             size="sm"
             icon={<Link size={18} />}
@@ -246,6 +256,7 @@ export const EditorActions = ({ editor, disabled, locales }: EditorActionsProps)
             aria-label="Code"
             disabled={disabled}
             title="Code"
+            type="button"
             variant="secondary"
             size="sm"
             icon={<Code size={18} />}
@@ -259,6 +270,7 @@ export const EditorActions = ({ editor, disabled, locales }: EditorActionsProps)
             aria-label="Code block"
             disabled={disabled}
             title="Code block"
+            type="button"
             variant="secondary"
             size="sm"
             icon={<CodeSquare size={18} />}
@@ -271,6 +283,7 @@ export const EditorActions = ({ editor, disabled, locales }: EditorActionsProps)
             aria-pressed={isActiveBlockquote}
             aria-label="Blockquote"
             title="Blockquote"
+            type="button"
             disabled={disabled}
             variant="secondary"
             size="sm"
@@ -286,6 +299,7 @@ export const EditorActions = ({ editor, disabled, locales }: EditorActionsProps)
             aria-label="Undo"
             disabled={disabled || !editor?.can().undo()}
             title="Undo"
+            type="button"
             variant="secondary"
             size="sm"
             icon={<ArrowLeft size={18} />}
@@ -296,6 +310,7 @@ export const EditorActions = ({ editor, disabled, locales }: EditorActionsProps)
             aria-label="Redo"
             disabled={disabled || !editor?.can().redo()}
             title="Redo"
+            type="button"
             variant="secondary"
             size="sm"
             icon={<ArrowRight size={18} />}
@@ -321,10 +336,10 @@ export const EditorActions = ({ editor, disabled, locales }: EditorActionsProps)
           </Form.Group>
         </Modal.Body>
         <Modal.Footer>
-          <Button onClick={handleOKLinkDialog} variant="primary">
+          <Button onClick={handleOKLinkDialog} variant="primary" type="button">
             {locales?.linkDialog?.ok ?? richTextEditorDefaultLocales.linkDialog?.ok}
           </Button>
-          <Button onClick={handleCloseLinkDialog} variant="secondary">
+          <Button onClick={handleCloseLinkDialog} variant="secondary" type="button">
             {locales?.linkDialog?.cancel ?? richTextEditorDefaultLocales.linkDialog?.cancel}
           </Button>
         </Modal.Footer>