resolve merge conflicts

README.md

@@ -178,6 +178,8 @@ The environment is accessible through the following URLs:
 > did not reflect the user's current location within the site, our new SPA design now includes this feature in the breadcrumbs.
 > Additionally, we have aligned with best practices by positioning all breadcrumbs at the top, before anything else in the UI.
 >
+> We have also introduced action items as the last item of the breadcrumb, eg: Collection > Dataset Name > Edit Dataset Metadata
+>
 > This update gives users a clear indication of their current position within the application's hierarchy.
 >
 > ### Changes in Functionality & Behavior
@@ -200,11 +202,17 @@ The environment is accessible through the following URLs:
 > search, whose search facets are reduced compared to other in-application searches. Therefore, if we find evidence that
 > the assumption is incorrect, we will work on extending the search capabilities to support Solr.
 >
+> We have also introduced infinite scroll pagination here.
+>
 > #### Dataverses/Datasets list
 >
 > The original JSF Dataverses/Datasets list on the home page uses normal paging buttons at the bottom of the list.
 > We have implemented infinite scrolling in this list, replacing the normal paging buttons, but the goal would be to be
 > able to toggle between normal paging and infinite scrolling via a toggle setting or button.
+>
+> #### Create/Edit Collection Page Identifier Field
+>
+> A feature has been added to suggest an identifier to the user based on the collection name entered.
 
 </details>
 

packages/design-system/CHANGELOG.md

@@ -14,8 +14,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 - **FormGroup:** ability to clone children wrapped by react fragments.
 - **FormCheckbox:** ability to forward react ref to input and export FormCheckboxProps interface.
 - **FormInput:** ability to forward react ref to input and export FormInputProps interface.
-- **FormSelect:** ability to forward react ref to input, add `isInvalid` `isValid` & `disabled` props and export
-  FormSelectProps interface.
+- **FormSelect:** ability to forward react ref to input, add `isInvalid` `isValid` & `disabled` props and export FormSelectProps interface.
 - **FormTextArea:** ability to forward react ref to input and export FormTextAreaProps interface.
 - **FormFeedback:** remove `span: 9` from styles.
 - **FormGroup:** controlId is now optional.
@@ -27,8 +26,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 - **Accordion:** ability to forward react ref.
 - **DynamicFieldsButtons:** Removed from design system.
 - **FormGroupWithMultipleFields:** remove withDynamicFields prop and remove logic to handle adding or removing fields.
-- **FormGroup:** remove the required and fieldIndex props, remove the cloning of child elements to pass them the
-  withinMultipleFieldsGroup and required props.
+- **FormGroup:** remove the required and fieldIndex props, remove the cloning of child elements to pass them the withinMultipleFieldsGroup and required props.
 - **FormFeedback:** remove withinMultipleFieldsGroup prop.
 - **FormInput:** remove withinMultipleFieldsGroup prop.
 - **FormLabel:** remove withinMultipleFieldsGroup prop extend interface to accept ColProps.
@@ -43,56 +41,42 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 - **ProgressBar:** NEW progress bar element to show progress.
 - **FormRadioGroup:** NEW radio group element to show radio buttons.
 - **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.
+- **FormInput:** extend Props Interface to accept `autoFocus` prop.
+- **FormTextArea:** extend Props Interface to accept `autoFocus` prop.
+- **FormSelect:** extend Props Interface to accept `autoFocus` prop.
+- **Stack:** NEW Stack element to manage layouts.
 
 # [1.1.0](https://github.com/IQSS/dataverse-frontend/compare/@iqss/[email protected]...@iqss/[email protected]) (2024-03-12)
 
 ### Bug Fixes
 
-- **Icon-only Button:** add
-  aria-label ([1f17e84](https://github.com/IQSS/dataverse-frontend/commit/1f17e84edf50c6780f8854f28e214386d9b5dc05))
-- **ButtonGroup:** add
-  className ([c295c7b](https://github.com/IQSS/dataverse-frontend/commit/c295c7b914759c37f705b511381dc3e878f55684))
-- **ButtonGroup:** fix styles when using
-  tooltips ([3edfaef](https://github.com/IQSS/dataverse-frontend/commit/3edfaef4f931a6a0b511b09d2a3326371c867f6d))
-- **Tooltip:** avoid layout shift on
-  hover ([a52c3dc](https://github.com/IQSS/dataverse-frontend/commit/a52c3dc972642f6b4e39ef1ed795300a8c5e6528))
-- **Table:** vertically align cells content to the
-  middle ([0f3a335](https://github.com/IQSS/dataverse-frontend/commit/0f3a3352afb3de77d34c634473c46502a415a20b))
-- **Table:** change alignment
-  cells ([fcf89a0](https://github.com/IQSS/dataverse-frontend/commit/fcf89a078ed2d09eac0f3d6673e45efc3445fabe))
-- **styles:** remove absolute path from design system bootstrap
-  imports ([2dddb07](https://github.com/IQSS/dataverse-frontend/commit/2dddb07e11b6d0abf8ac70c70d991173463cc5eb))
-- **Storybook:** set fixed package.json
-  dependencies ([c58dfd1](https://github.com/IQSS/dataverse-frontend/commit/c58dfd143e4ac46dc3507ffe737b663530fd3f35))
-- **Storybook:** accessibility violation
-  fixed ([1aa62b0](https://github.com/IQSS/dataverse-frontend/commit/1aa62b0e7f9108f132995c501836baae0811870a))
-- **Icons:** fix icons not
-  appearing ([72d6bb5](https://github.com/IQSS/dataverse-frontend/commit/72d6bb5fcc518f50fbf2543f0a33a5d0561dbbc5))
-- **DropdownButton:** refactor to also work as a
-  select ([c1171c1](https://github.com/IQSS/dataverse-frontend/commit/c1171c1c0e149fc81811d3469ec046f6b6c3f928))
-- **Dropdown:** add disabled
-  property ([d4a32f1](https://github.com/IQSS/dataverse-frontend/commit/d4a32f10ea6d9e94f7e149886f1044e68afc53dd))
-- **DropdownButtonItem:** add disabled
-  property ([0f2a626](https://github.com/IQSS/dataverse-frontend/commit/0f2a626c7201c90b35ec05823e56efc21be82bcd))
-- **ButtonGroup:** add
-  HTMLAttributes ([821d38f](https://github.com/IQSS/dataverse-frontend/commit/821d38ff53a73dc4f478854e275781d933d920b5))
-- **Button:** add type
-  attribute ([b2c31a7](https://github.com/IQSS/dataverse-frontend/commit/b2c31a7c230c07522d8fce539fa28fafaf26dc95))
-- **Form Inputs:** allow buttons inside form
-  inputs ([0000a4a](https://github.com/IQSS/dataverse-frontend/commit/0000a4a8fd75d63d8b49e0963698d387e081f5de))
+- **Icon-only Button:** add aria-label ([1f17e84](https://github.com/IQSS/dataverse-frontend/commit/1f17e84edf50c6780f8854f28e214386d9b5dc05))
+- **ButtonGroup:** add className ([c295c7b](https://github.com/IQSS/dataverse-frontend/commit/c295c7b914759c37f705b511381dc3e878f55684))
+- **ButtonGroup:** fix styles when using tooltips ([3edfaef](https://github.com/IQSS/dataverse-frontend/commit/3edfaef4f931a6a0b511b09d2a3326371c867f6d))
+- **Tooltip:** avoid layout shift on hover ([a52c3dc](https://github.com/IQSS/dataverse-frontend/commit/a52c3dc972642f6b4e39ef1ed795300a8c5e6528))
+- **Table:** vertically align cells content to the middle ([0f3a335](https://github.com/IQSS/dataverse-frontend/commit/0f3a3352afb3de77d34c634473c46502a415a20b))
+- **Table:** change alignment cells ([fcf89a0](https://github.com/IQSS/dataverse-frontend/commit/fcf89a078ed2d09eac0f3d6673e45efc3445fabe))
+- **styles:** remove absolute path from design system bootstrap imports ([2dddb07](https://github.com/IQSS/dataverse-frontend/commit/2dddb07e11b6d0abf8ac70c70d991173463cc5eb))
+- **Storybook:** set fixed package.json dependencies ([c58dfd1](https://github.com/IQSS/dataverse-frontend/commit/c58dfd143e4ac46dc3507ffe737b663530fd3f35))
+- **Storybook:** accessibility violation fixed ([1aa62b0](https://github.com/IQSS/dataverse-frontend/commit/1aa62b0e7f9108f132995c501836baae0811870a))
+- **Icons:** fix icons not appearing ([72d6bb5](https://github.com/IQSS/dataverse-frontend/commit/72d6bb5fcc518f50fbf2543f0a33a5d0561dbbc5))
+- **DropdownButton:** refactor to also work as a select ([c1171c1](https://github.com/IQSS/dataverse-frontend/commit/c1171c1c0e149fc81811d3469ec046f6b6c3f928))
+- **Dropdown:** add disabled property ([d4a32f1](https://github.com/IQSS/dataverse-frontend/commit/d4a32f10ea6d9e94f7e149886f1044e68afc53dd))
+- **DropdownButtonItem:** add disabled property ([0f2a626](https://github.com/IQSS/dataverse-frontend/commit/0f2a626c7201c90b35ec05823e56efc21be82bcd))
+- **ButtonGroup:** add HTMLAttributes ([821d38f](https://github.com/IQSS/dataverse-frontend/commit/821d38ff53a73dc4f478854e275781d933d920b5))
+- **Button:** add type attribute ([b2c31a7](https://github.com/IQSS/dataverse-frontend/commit/b2c31a7c230c07522d8fce539fa28fafaf26dc95))
+- **Form Inputs:** allow buttons inside form inputs ([0000a4a](https://github.com/IQSS/dataverse-frontend/commit/0000a4a8fd75d63d8b49e0963698d387e081f5de))
 
 ### Features
 
-- **Breadcrumb:** add linkAs
-  prop ([f9c5f8a](https://github.com/IQSS/dataverse-frontend/commit/f9c5f8a896b2fb67c025cb90b6f971b529e2a3ef))
-- **Pagination:** add Pagination component to the design
-  system ([0274ca4](https://github.com/IQSS/dataverse-frontend/commit/0274ca4581eb6d3d4e11880af1a6eee390e1a7b8))
-- **OverlayTrigger:** add OverlayTrigger to the Design
-  System ([203c1ec](https://github.com/IQSS/dataverse-frontend/commit/203c1ecbf195379363559ab4e5c3d93f3710aa82))
-- **DropdownHeader:** add DropdownHeader to the Design
-  System ([1ed14be](https://github.com/IQSS/dataverse-frontend/commit/1ed14bebb021363e6490812eb05c834926ffb2d9))
-- **DropdownSeparator:** add DropdownSeparator to the design
-  system ([b4ce154](https://github.com/IQSS/dataverse-frontend/commit/b4ce154a9df880b6b5dfa993bf86c12ffbc926d2))
+- **Breadcrumb:** add linkAs prop ([f9c5f8a](https://github.com/IQSS/dataverse-frontend/commit/f9c5f8a896b2fb67c025cb90b6f971b529e2a3ef))
+- **Pagination:** add Pagination component to the design system ([0274ca4](https://github.com/IQSS/dataverse-frontend/commit/0274ca4581eb6d3d4e11880af1a6eee390e1a7b8))
+- **OverlayTrigger:** add OverlayTrigger to the Design System ([203c1ec](https://github.com/IQSS/dataverse-frontend/commit/203c1ecbf195379363559ab4e5c3d93f3710aa82))
+- **DropdownHeader:** add DropdownHeader to the Design System ([1ed14be](https://github.com/IQSS/dataverse-frontend/commit/1ed14bebb021363e6490812eb05c834926ffb2d9))
+- **DropdownSeparator:** add DropdownSeparator to the design system ([b4ce154](https://github.com/IQSS/dataverse-frontend/commit/b4ce154a9df880b6b5dfa993bf86c12ffbc926d2))
 
 # [1.0.1](https://github.com/IQSS/dataverse-frontend/compare/@iqss/[email protected]...@iqss/[email protected]) (2023-07-06)
 

packages/design-system/src/lib/components/button/Button.tsx

@@ -4,10 +4,12 @@ import { Button as ButtonBS } from 'react-bootstrap'
 import { IconName } from '../icon/IconName'
 import { Icon } from '../icon/Icon'
 
+type ButtonSize = 'sm' | 'lg'
 type ButtonVariant = 'primary' | 'secondary' | 'link'
 type ButtonType = 'button' | 'reset' | 'submit'
 
 interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
+  size?: ButtonSize
   variant?: ButtonVariant
   disabled?: boolean
   onClick?: (event: MouseEvent<HTMLButtonElement>) => void
@@ -18,6 +20,7 @@ interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
 }
 
 export function Button({
+  size,
   variant = 'primary',
   disabled = false,
   onClick,
@@ -29,6 +32,7 @@ export function Button({
 }: ButtonProps) {
   return (
     <ButtonBS
+      size={size}
       className={withSpacing ? styles.spacing : ''}
       variant={variant}
       onClick={disabled ? undefined : onClick}

packages/design-system/src/lib/components/form/form-group/form-element/FormInput.tsx

@@ -12,6 +12,7 @@ export interface FormInputProps extends React.HTMLAttributes<FormInputElement> {
   disabled?: boolean
   value?: string | number
   required?: boolean
+  autoFocus?: boolean
 }
 
 export const FormInput = React.forwardRef(function FormInput(
@@ -24,6 +25,7 @@ export const FormInput = React.forwardRef(function FormInput(
     disabled,
     value,
     required,
+    autoFocus,
     ...props
   }: FormInputProps,
   ref
@@ -39,6 +41,7 @@ export const FormInput = React.forwardRef(function FormInput(
       disabled={disabled}
       value={value}
       required={required}
+      autoFocus={autoFocus}
       ref={ref as React.ForwardedRef<HTMLInputElement>}
       {...props}
     />

packages/design-system/src/lib/components/form/form-group/form-element/FormSelect.tsx

@@ -9,10 +9,19 @@ export interface FormSelectProps
   isInvalid?: boolean
   isValid?: boolean
   disabled?: boolean
+  autoFocus?: boolean
 }
 
 export const FormSelect = React.forwardRef(function FormSelect(
-  { value, isInvalid, isValid, disabled, children, ...props }: PropsWithChildren<FormSelectProps>,
+  {
+    value,
+    isInvalid,
+    isValid,
+    disabled,
+    autoFocus,
+    children,
+    ...props
+  }: PropsWithChildren<FormSelectProps>,
   ref
 ) {
   return (
@@ -21,6 +30,7 @@ export const FormSelect = React.forwardRef(function FormSelect(
       isInvalid={isInvalid}
       isValid={isValid}
       disabled={disabled}
+      autoFocus={autoFocus}
       ref={ref as React.ForwardedRef<HTMLSelectElement>}
       {...props}>
       {children}

packages/design-system/src/lib/components/form/form-group/form-element/FormTextArea.tsx

@@ -8,10 +8,11 @@ export interface FormTextAreaProps extends Omit<React.HTMLAttributes<FormInputEl
   isValid?: boolean
   isInvalid?: boolean
   value?: string
+  autoFocus?: boolean
 }
 
 export const FormTextArea = React.forwardRef(function FormTextArea(
-  { name, disabled, isValid, isInvalid, value, ...props }: FormTextAreaProps,
+  { name, disabled, isValid, isInvalid, value, autoFocus, ...props }: FormTextAreaProps,
   ref
 ) {
   return (
@@ -23,6 +24,7 @@ export const FormTextArea = React.forwardRef(function FormTextArea(
       isValid={isValid}
       isInvalid={isInvalid}
       value={value}
+      autoFocus={autoFocus}
       ref={ref as React.ForwardedRef<HTMLTextAreaElement>}
       {...props}
     />

packages/design-system/src/lib/components/form/form-group/form-input-group/FormInputGroup.tsx

@@ -2,8 +2,17 @@ import { ReactNode } from 'react'
 import { InputGroup } from 'react-bootstrap'
 import { FormInputGroupText } from './FormInputGroupText'
 
-function FormInputGroup({ children }: { children: ReactNode }) {
-  return <InputGroup className="mb-3">{children}</InputGroup>
+interface FormInputGroupProps {
+  children: ReactNode
+  hasValidation?: boolean
+}
+
+function FormInputGroup({ children, hasValidation }: FormInputGroupProps) {
+  return (
+    <InputGroup className="mb-3" hasValidation={hasValidation}>
+      {children}
+    </InputGroup>
+  )
 }
 
 FormInputGroup.Text = FormInputGroupText

packages/design-system/src/lib/components/navbar/navbar-dropdown/NavbarDropdownItem.tsx

@@ -1,20 +1,26 @@
 import { NavDropdown } from 'react-bootstrap'
-import { PropsWithChildren } from 'react'
+import { ComponentPropsWithoutRef, ElementType, PropsWithChildren } from 'react'
 
-interface NavbarDropdownItemProps {
-  href: string
+type NavbarDropdownItemProps<T extends ElementType> = {
+  href?: string
   onClick?: () => void
   disabled?: boolean
-}
+  as?: T
+} & (T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T] : ComponentPropsWithoutRef<T>)
 
-export function NavbarDropdownItem({
+export function NavbarDropdownItem<T extends ElementType = 'a'>({
   href,
   onClick,
   disabled,
-  children
-}: PropsWithChildren<NavbarDropdownItemProps>) {
+  children,
+  as,
+  ...props
+}: PropsWithChildren<NavbarDropdownItemProps<T>>) {
+  /* eslint-disable  @typescript-eslint/no-explicit-any */
+  const Component: ElementType<any> | undefined = as
+
   return (
-    <NavDropdown.Item href={href} onClick={onClick} disabled={disabled}>
+    <NavDropdown.Item href={href} onClick={onClick} disabled={disabled} as={Component} {...props}>
       {children}
     </NavDropdown.Item>
   )

packages/design-system/src/lib/components/stack/Stack.tsx

@@ -0,0 +1,26 @@
+import { ComponentPropsWithoutRef, ElementType } from 'react'
+import { Stack as StackBS } from 'react-bootstrap'
+
+type StackProps<T extends ElementType> = {
+  direction?: 'horizontal' | 'vertical'
+  gap?: 0 | 1 | 2 | 3 | 4 | 5
+  as?: T
+  children: React.ReactNode
+} & (T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T] : ComponentPropsWithoutRef<T>)
+
+export function Stack<T extends ElementType = 'div'>({
+  direction = 'vertical',
+  gap = 3,
+  as,
+  children,
+  ...rest
+}: StackProps<T>) {
+  /* eslint-disable  @typescript-eslint/no-explicit-any */
+  const Component: ElementType<any> = as || 'div'
+
+  return (
+    <StackBS direction={direction} gap={gap} as={Component} {...rest}>
+      {children}
+    </StackBS>
+  )
+}

packages/design-system/src/lib/index.ts

@@ -27,3 +27,4 @@ export { RequiredInputSymbol } from './components/form/required-input-symbol/Req
 export { SelectMultiple } from './components/select-multiple/SelectMultiple'
 export { Card } from './components/card/Card'
 export { ProgressBar } from './components/progress-bar/ProgressBar'
+export { Stack } from './components/stack/Stack'

packages/design-system/src/lib/stories/button/Button.stories.tsx

@@ -94,6 +94,20 @@ export const AllVariantsAtAGlance: Story = {
   )
 }
 
+export const AllSizesAtAGlance: Story = {
+  render: () => (
+    <>
+      <Button withSpacing size="sm">
+        Small
+      </Button>
+      <Button withSpacing>Default size</Button>
+      <Button withSpacing size="lg">
+        Large size
+      </Button>
+    </>
+  )
+}
+
 export const Disabled: Story = {
   render: () => (
     <>