release of v10.101.1 (#7097)

Author: langz

packages/dnb-design-system-portal/src/docs/uilib/components/stat/Examples.tsx

@@ -1,6 +1,4 @@
-import React from 'react'
-import ComponentBox from '../../../../shared/tags/ComponentBox'
-import Stat from '@dnb/eufemia/src/components/Stat'
+import { useTranslation } from '@dnb/eufemia/shared'
 import {
   Card,
   Code,
@@ -10,8 +8,9 @@ import {
   Icon,
   IconPrimary,
 } from '@dnb/eufemia/src'
-import { useTranslation } from '@dnb/eufemia/shared'
+import Stat from '@dnb/eufemia/src/components/Stat'
 import { globe_medium } from '@dnb/eufemia/src/icons'
+import ComponentBox from '../../../../shared/tags/ComponentBox'
 
 export const BasicUsage = () => (
   <ComponentBox data-visual-test="stat-amount-default">
@@ -199,6 +198,27 @@ export const PercentDefault = () => (
   </ComponentBox>
 )
 
+export const PercentColorizeBySign = () => (
+  <ComponentBox data-visual-test="stat-percent-colorize-by-sign">
+    <Stat.Root>
+      <Stat.Label>Positive without signDisplay</Stat.Label>
+      <Stat.Content>
+        <Stat.Percent value={12.3} fontSize="medium" colorizeBySign />
+      </Stat.Content>
+
+      <Stat.Label top>Negative without signDisplay</Stat.Label>
+      <Stat.Content>
+        <Stat.Percent value={-12.3} fontSize="medium" colorizeBySign />
+      </Stat.Content>
+
+      <Stat.Label top>Zero without signDisplay</Stat.Label>
+      <Stat.Content>
+        <Stat.Percent value={0} fontSize="medium" colorizeBySign />
+      </Stat.Content>
+    </Stat.Root>
+  </ComponentBox>
+)
+
 export const RatingDefault = () => (
   <ComponentBox data-visual-test="stat-rating-default">
     <Stat.Root>

packages/dnb-design-system-portal/src/docs/uilib/components/stat/demos.mdx

@@ -40,6 +40,10 @@ You can use `mainSize` and `auxiliarySize` to adjust the relative size of the cu
 
 <Examples.PercentDefault />
 
+### Percent colorized by sign
+
+<Examples.PercentColorizeBySign />
+
 ### Rating
 
 <Examples.RatingDefault />

packages/dnb-design-system-portal/src/docs/uilib/components/stat/info.mdx

@@ -32,6 +32,12 @@ import { Stat } from '@dnb/eufemia'
 
 - `Stat.Info` renders supporting text with a smaller, muted style.
 
+- `Stat.Inline` is a horizontal layout container for grouping content elements like `Stat.Trend` and `Stat.Info` side by side with consistent spacing and alignment.
+
+### Deprecated
+
+- `Stat.Amount` is deprecated and will be removed in a future version. Use `Stat.Number` instead.
+
 ## Accessibility
 
 - `Stat.Root` provides semantic definition-list markup (`dl`), where `Stat.Label` is rendered as `dt` and `Stat.Content` as `dd`.

packages/dnb-eufemia/src/components/list/Container.tsx

@@ -1,26 +1,44 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import classnames from 'classnames'
 import { ListVariant, ListContext } from './ListContext'
 import FlexContainer, { Props as FlexProps } from '../flex/Stack'
+import type { SkeletonShow } from '../Skeleton'
+import SharedContext from '../../shared/Context'
 
 export type ListContainerProps = {
   variant?: ListVariant
   separated?: boolean
-} & React.HTMLAttributes<HTMLDivElement> &
-  FlexProps
+  skeleton?: SkeletonShow
+  disabled?: boolean
+} & FlexProps
 
 function ListContainer(props: ListContainerProps) {
   const {
     className,
     children,
     variant = 'basic',
-    separated,
+    separated = false,
+    skeleton,
+    disabled,
     wrapChildrenInSpace = false,
     ...rest
   } = props
 
+  const parentContext = useContext(ListContext)
+  const globalContext = useContext(SharedContext)
+  const appliedSkeleton =
+    skeleton ?? parentContext?.skeleton ?? globalContext?.skeleton
+  const appliedDisabled = disabled ?? parentContext?.disabled
+
   return (
-    <ListContext.Provider value={{ variant, separated }}>
+    <ListContext.Provider
+      value={{
+        variant,
+        separated,
+        skeleton: appliedSkeleton,
+        disabled: appliedDisabled,
+      }}
+    >
       <FlexContainer
         element="ul"
         rowGap={separated ? 'small' : false}

packages/dnb-eufemia/src/components/list/ItemAccordion.tsx

@@ -7,7 +7,7 @@ import React, {
 } from 'react'
 import classnames from 'classnames'
 import useId from '../../shared/helpers/useId'
-import { ListVariant } from './ListContext'
+import { ListVariant, ListContext } from './ListContext'
 import ItemContent, { ItemContentProps } from './ItemContent'
 import FlexItem from '../flex/Item'
 import type { IconIcon } from '../icon/Icon'
@@ -18,6 +18,8 @@ import Space from '../space/Space'
 import { omitSpacingProps, pickSpacingProps } from '../flex/utils'
 import ItemIcon from './ItemIcon'
 import ItemTitle from './ItemTitle'
+import { createSkeletonClass } from '../skeleton/SkeletonHelper'
+import Context from '../../shared/Context'
 
 export type ItemAccordionIconPosition = 'left' | 'right'
 
@@ -28,6 +30,10 @@ export type ItemAccordionProps = {
    * When true, keeps the accordion content in the DOM when closed. Defaults to false.
    */
   keepInDOM?: boolean
+  /**
+   * When true, the accordion is visually dimmed and interaction is prevented.
+   */
+  disabled?: boolean
   chevronPosition?: ItemAccordionIconPosition
   icon?: IconIcon
   title?: React.ReactNode
@@ -38,6 +44,7 @@ const ItemAccordionContext = createContext<{
   open?: boolean
   openState: boolean
   pending?: boolean
+  disabled?: boolean
   keepInDOM?: boolean
   chevronPosition?: ItemAccordionIconPosition
   accordionId: string
@@ -54,6 +61,8 @@ function ItemAccordion(props: ItemAccordionProps) {
     children,
     variant,
     pending,
+    disabled,
+    skeleton,
     open = false,
     keepInDOM = false,
     chevronPosition = 'right',
@@ -65,6 +74,8 @@ function ItemAccordion(props: ItemAccordionProps) {
 
   const [openState, setOpen] = useState(open)
   const accordionId = useId(idProp)
+  const inheritedDisabled = useContext(ListContext)?.disabled
+  const appliedDisabled = disabled ?? inheritedDisabled
   const childArray = React.Children.toArray(children)
   const hasExplicitHeader = childArray.some(
     (child) =>
@@ -81,6 +92,7 @@ function ItemAccordion(props: ItemAccordionProps) {
         open,
         openState,
         pending,
+        disabled: appliedDisabled,
         keepInDOM,
         chevronPosition,
         accordionId,
@@ -98,6 +110,8 @@ function ItemAccordion(props: ItemAccordionProps) {
         )}
         direction="vertical"
         pending={pending}
+        disabled={appliedDisabled}
+        skeleton={skeleton}
         variant={variant}
         {...rest}
       >
@@ -120,21 +134,26 @@ function AccordionHeader(props: AccordionHeaderProps) {
     setOpen,
     onClick,
     pending,
+    disabled,
     chevronPosition,
     accordionId,
     openState,
     icon,
     title,
   } = useContext(ItemAccordionContext)
 
+  const context = useContext(Context)
+  const inheritedSkeleton = useContext(ListContext)?.skeleton
+  const isInactive = pending || disabled
+
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-      if (!pending) {
+      if (!isInactive) {
         setOpen((prev) => !prev)
         onClick && onClick(event)
       }
     },
-    [onClick, pending, setOpen]
+    [onClick, isInactive, setOpen]
   )
 
   const handleKeyDown = useCallback(
@@ -149,19 +168,20 @@ function AccordionHeader(props: AccordionHeaderProps) {
     [handleClick]
   )
 
-  return (
+  const content = (
     <FlexItem
       className={classnames(
         'dnb-list__item__accordion__header',
         chevronPosition === 'left' && 'dnb-list__item--chevron-left',
+        inheritedSkeleton && createSkeletonClass('font', true),
         className
       )}
       id={`${accordionId}-header`}
       role="button"
       aria-controls={`${accordionId}-content`}
       aria-expanded={openState}
-      aria-disabled={pending ? true : undefined}
-      tabIndex={pending ? -1 : 0}
+      aria-disabled={isInactive ? true : undefined}
+      tabIndex={isInactive ? -1 : 0}
       onClick={handleClick}
       onKeyDown={handleKeyDown}
       {...rest}
@@ -173,22 +193,37 @@ function AccordionHeader(props: AccordionHeaderProps) {
       {chevronPosition === 'right' && <ChevronIcon />}
     </FlexItem>
   )
+
+  if (inheritedSkeleton) {
+    return (
+      <Context.Provider
+        value={{ ...context, skeleton: inheritedSkeleton }}
+      >
+        {content}
+      </Context.Provider>
+    )
+  }
+
+  return content
 }
 ItemAccordion.Header = AccordionHeader
 AccordionHeader._supportsSpacingProps = true
 
 function AccordionContent(props: ItemContentProps) {
   const { className, children, ...rest } = props
+  const context = useContext(Context)
   const { openState, accordionId, keepInDOM } = useContext(
     ItemAccordionContext
   )
+  const inheritedSkeleton = useContext(ListContext)?.skeleton
 
   const spacingProps = pickSpacingProps(rest)
 
-  return (
+  const content = (
     <FlexItem
       className={classnames(
         'dnb-list__item__accordion__content',
+        inheritedSkeleton && createSkeletonClass('font', true),
         className
       )}
       id={`${accordionId}-content`}
@@ -203,6 +238,18 @@ function AccordionContent(props: ItemContentProps) {
       </HeightAnimation>
     </FlexItem>
   )
+
+  if (inheritedSkeleton) {
+    return (
+      <Context.Provider
+        value={{ ...context, skeleton: inheritedSkeleton }}
+      >
+        {content}
+      </Context.Provider>
+    )
+  }
+
+  return content
 }
 ItemAccordion.Content = AccordionContent
 AccordionContent._supportsSpacingProps = true