@dnb/eufemia 9.22.0 → 9.23.0-beta.1

package/es/components/timeline/TimelineItem.tsx

@@ -1,191 +0,0 @@
-import React from 'react'
-import classnames from 'classnames'
-
-// Components
-import FormStatus from '../form-status/FormStatus'
-import Icon, { IconPrimaryIcon } from '../icon-primary/IconPrimary'
-import { createSkeletonClass } from '../skeleton/SkeletonHelper'
-
-// Icons
-import checkIcon from '../../icons/check'
-import calendarIcon from '../../icons/calendar'
-import pinIcon from '../../icons/pin'
-
-// Shared
-import Context from '../../shared/Context'
-import { SkeletonShow } from '../skeleton/Skeleton'
-import { usePropsWithContext } from '../../shared/hooks'
-
-export interface TimelineItemProps {
-  /**
-   * Icon displaying on the left side.
-   * Default: `check` for state `completed`, `pin` for state `current`, and `calendar` for state `upcoming` .
-   */
-  icon?: IconPrimaryIcon
-
-  /**
-   * Text displaying the title of the item's corresponding page.
-   * Default: translations based on the icon.
-   */
-  iconAlt?: string
-
-  /**
-   * Text displaying the name of the timeline item.
-   */
-  name: React.ReactNode & string
-
-  /**
-   * Text displaying the date of the timeline item.
-   */
-  date?: React.ReactNode
-
-  /**
-   * Text displaying info message of the timeline item.
-   */
-  infoMessage?: React.ReactNode
-
-  /**
-   * The component state. State 'completed' or 'current' or 'upcoming'.
-   * Default: null
-   */
-  state: 'completed' | 'current' | 'upcoming'
-
-  /**
-   * Skeleton should be applied when loading content
-   * Default: null
-   */
-  skeleton?: SkeletonShow
-}
-
-const defaultProps = {
-  icon: null,
-  iconAlt: null,
-  name: null,
-  date: null,
-  infoMessage: null,
-  state: null,
-  skeleton: false,
-}
-
-const TimelineItem = (localProps: TimelineItemProps) => {
-  // Every component should have a context
-  const context = React.useContext(Context)
-  const {
-    translation: {
-      TimelineItem: {
-        alt_label_completed,
-        alt_label_current,
-        alt_label_upcoming,
-      },
-    },
-  } = context
-
-  // Extract additional props from global context
-  const {
-    icon,
-    iconAlt,
-    name,
-    date,
-    infoMessage,
-    state,
-    skeleton,
-    ...props
-  } = usePropsWithContext(localProps, defaultProps, context?.TimelineItem)
-
-  const stateIsCompleted = state === 'completed'
-  const stateIsCurrent = state === 'current'
-  const stateIsUpcoming = state === 'upcoming'
-
-  const skeletonClasses = createSkeletonClass('font', skeleton, context)
-  const classes = classnames(
-    'dnb-timeline__item',
-    skeletonClasses,
-    `dnb-timeline__item--${state}`
-  )
-
-  const TimelineItemIcon = () => {
-    const currentIcon =
-      icon ||
-      (stateIsCompleted && checkIcon) ||
-      (stateIsCurrent && pinIcon) ||
-      (stateIsUpcoming && calendarIcon)
-
-    const currentAltLabel =
-      iconAlt ||
-      (stateIsCompleted && alt_label_completed) ||
-      (stateIsCurrent && alt_label_current) ||
-      (stateIsUpcoming && alt_label_upcoming)
-    return (
-      <span
-        className="dnb-timeline__item__label__icon"
-        data-testid="timeline-item-label-icon"
-      >
-        <span key="icon-alignment">&zwnj;</span>
-        {!skeleton && currentIcon && (
-          <Icon
-            icon={currentIcon}
-            alt={currentAltLabel}
-            size={stateIsCurrent ? undefined : 'small'}
-          />
-        )}
-      </span>
-    )
-  }
-
-  const TimelineItemName = () => {
-    return (
-      <span
-        className="dnb-timeline__item__label__name"
-        data-testid="timeline-item-label-name"
-      >
-        {name}
-      </span>
-    )
-  }
-
-  const TimelineItemLabel = () => {
-    return (
-      <span className="dnb-timeline__item__label">
-        <TimelineItemIcon />
-        <TimelineItemName />
-      </span>
-    )
-  }
-
-  const TimelineItemContent = () => {
-    return (
-      <div className="dnb-timeline__item__content">
-        {date && (
-          <span
-            className="dnb-timeline__item__content__date"
-            data-testid="timeline-item-content-date"
-          >
-            {date}
-          </span>
-        )}
-        {infoMessage && (
-          <FormStatus
-            text={infoMessage}
-            state="info"
-            className="dnb-timeline__item__content__info"
-            data-testid="timeline-item-content-info"
-          />
-        )}
-      </div>
-    )
-  }
-
-  return (
-    <div
-      className={classes}
-      data-testid="timeline-item"
-      aria-current={stateIsCurrent ? 'step' : undefined}
-      {...props}
-    >
-      <TimelineItemLabel />
-      <TimelineItemContent />
-    </div>
-  )
-}
-
-export default TimelineItem

package/es/components/visually-hidden/VisuallyHidden.tsx

@@ -1,74 +0,0 @@
-import React from 'react'
-import classnames from 'classnames'
-
-// Shared
-import Context from '../../shared/Context'
-import { extendPropsWithContext } from '../../shared/component-helper'
-
-export interface VisuallyHiddenProps {
-  /**
-   * The content of the visually hidden element, can be a string or a React Element
-   * Default: null
-   */
-  children?: string | React.ReactNode // ReactNode allows multiple elements, strings, numbers, fragments, portals...
-
-  /**
-   * Custom className on the component root
-   * Default: null
-   */
-  className?: string
-
-  /**
-   * Hide an element by default, but to display it when it’s focused (e.g. by a keyboard-only user)
-   * Default: false
-   */
-  focusable?: boolean
-
-  /**
-   * Root element of the component
-   * Default: div
-   */
-  element?: string | React.ReactNode
-}
-
-export const defaultProps = {
-  className: null,
-  children: null,
-  focusable: false,
-  element: 'div',
-}
-
-const VisuallyHidden = (localProps: VisuallyHiddenProps) => {
-  // Every component should have a context
-  const context = React.useContext(Context)
-
-  // Extract additional props from global context
-  const { element, children, className, focusable, ...props } =
-    extendPropsWithContext(
-      { ...defaultProps, ...localProps },
-      defaultProps,
-      context?.translation?.VisuallyHidden,
-      context?.VisuallyHidden
-    )
-
-  const visuallyHiddenClassNames = classnames(
-    'dnb-visually-hidden',
-    focusable
-      ? 'dnb-visually-hidden--focusable'
-      : 'dnb-visually-hidden--default',
-    className
-  )
-  const Element = element
-
-  return (
-    <Element
-      data-testid="visually-hidden"
-      className={visuallyHiddenClassNames}
-      {...props}
-    >
-      {children}
-    </Element>
-  )
-}
-
-export default VisuallyHidden

package/es/core/jest/enzyme/index.d.ts

@@ -1,13 +0,0 @@
-/**
- * Default Component Test Setup
- *
- */
-
-// enzyme setup
-const enzyme = require('enzyme')
-
-// TODO: This may not be needed in future
-const Adapter = require('@wojtekmaj/enzyme-adapter-react-17')
-enzyme.configure({ adapter: new Adapter() })
-
-module.exports = enzyme

package/es/fragments/scroll-view/ScrollView.tsx

@@ -1,92 +0,0 @@
-/**
- * Web ScrollView Component
- *
- */
-
-import React from 'react'
-import classnames from 'classnames'
-import {
-  validateDOMAttributes,
-  processChildren,
-  extendPropsWithContext,
-} from '../../shared/component-helper'
-import Context from '../../shared/Context'
-import { createSpacingClasses } from '../../components/space/SpacingHelper'
-import { ISpacingProps } from '../../shared/interfaces'
-
-interface ScrollViewProps extends ISpacingProps {
-  className: string
-  children: string | React.ReactNode | ((...args: any[]) => any)
-  innerRef: any
-  class: string
-  // All other props
-  [x: string]: any
-}
-
-class ScrollView extends React.PureComponent<ScrollViewProps> {
-  static tagName = 'dnb-scroll-view'
-  static contextType = Context
-  ref: any
-
-  static getContent(props) {
-    if (props.text) return props.text
-    return processChildren(props)
-  }
-
-  static defaultProps = {
-    className: null,
-    children: null,
-    innerRef: null,
-
-    class: null,
-  }
-
-  constructor(props) {
-    super(props)
-    this.ref = props.innerRef || React.createRef()
-  }
-
-  render() {
-    // use only the props from context, who are available here anyway
-    const props = extendPropsWithContext(
-      this.props,
-      ScrollView.defaultProps,
-      this.context.FormRow,
-      this.context.ScrollView
-    )
-
-    const {
-      className = null,
-      class: _className,
-      innerRef = null, // eslint-disable-line
-      ...attributes
-    } = props
-
-    const contentToRender = ScrollView.getContent(props)
-
-    const mainParams = {
-      className: classnames(
-        'dnb-scroll-view',
-        createSpacingClasses(props),
-        _className,
-        className
-      ),
-      ...attributes,
-    }
-
-    validateDOMAttributes(this.props, mainParams)
-
-    return (
-      <div {...mainParams} ref={this.ref}>
-        {contentToRender}
-      </div>
-    )
-  }
-}
-
-export default React.forwardRef(function ScrollViewRef(
-  props: ScrollViewProps,
-  ref
-) {
-  return <ScrollView innerRef={ref} {...props} />
-})

package/es/shared/helpers/withCamelCaseProps.tsx

@@ -1,108 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import React from 'react'
-import { toSnakeCase } from '../component-helper'
-
-/**
- * withCamelCaseProps is a HOC for function components
- * it will return a React Component where all snake_case props gets converted to camelCase
- *
- * Use the same for TypeScript types by using: ToCamelCase
- *
- * @param Base the original function or class
- * @returns extended function or class
- */
-export function withCamelCaseProps<TBase, P>(
-  Base: React.FunctionComponent<P> & TBase
-): typeof Base {
-  const Component: React.ComponentType = Base
-
-  const Derived = (props: P) => {
-    return <Component {...Object.freeze(convertCamelCaseProps(props))} />
-  }
-
-  Object.defineProperty(Derived, 'name', {
-    value: Base.name,
-  })
-
-  for (const name in Base) {
-    Object.defineProperty(Derived, name, {
-      value: Base[name],
-    })
-  }
-
-  // @ts-ignore
-  return Derived
-}
-
-/**
- * withCamelCaseProps is a HOC for classes
- * it will return a React Component where all snake_case props gets converted to camelCase
- *
- * Use the same for TypeScript types by using: ToCamelCase
- *
- * @param Base the original function or class
- * @returns extended function or class
- */
-export function classWithCamelCaseProps<
-  TBase extends React.ComponentClass
->(Base: TBase): typeof Base {
-  const Component: React.ComponentClass = Base
-
-  // Bug? https://github.com/microsoft/TypeScript/issues/37142
-  // @ts-ignore
-  class Derived extends Base {
-    render() {
-      return (
-        <Component {...Object.freeze(convertCamelCaseProps(this.props))} />
-      )
-    }
-  }
-
-  Object.defineProperty(Derived, 'name', {
-    value: Base.name,
-  })
-
-  Object.defineProperty(Derived, 'displayName', {
-    value: Base.displayName || Base.name,
-  })
-
-  return Derived
-}
-
-function convertCamelCaseProps<P>(props: P) {
-  const newProps = { ...props }
-
-  for (const key in props) {
-    if (/^[a-z]+[A-Z]/.test(key)) {
-      newProps[toSnakeCase(key)] = props[key]
-      delete newProps[key]
-    }
-  }
-
-  return newProps
-}
-
-/**
- * Convert recursively Types from snake_case to camelCase
- *
- * Use it like so:
- * OriginalProps & ToCamelCase<OriginalProps>
- *
- * Disclaimer: Be careful using these with required props
- * - ToCamelCase makes the required snake_case props also required in camelCase
- * - ToCamelCasePartial removes required for the camelCase props
- *
- */
-export type ToCamelCasePartial<T> = Partial<ToCamelCase<T>>
-export type ToCamelCase<T> = T extends object
-  ? {
-      [K in keyof T as ConvertSnakeToCamelCase<K & string>]: ToCamelCase<
-        T[K]
-      >
-    }
-  : T
-export type IncludeCamelCase<T> = Partial<T> & ToCamelCasePartial<T>
-type ConvertSnakeToCamelCase<S extends string> =
-  S extends `${infer T}_${infer U}`
-    ? `${T}${Capitalize<ConvertSnakeToCamelCase<U>>}`
-    : S

package/es/shared/hooks/index.ts

@@ -1 +0,0 @@
-export { usePropsWithContext } from './usePropsWithContext'

package/es/shared/hooks/usePropsWithContext.ts

@@ -1,45 +0,0 @@
-export type DefaultsProps = Record<string, unknown>
-export type Contexts = Array<Record<string, unknown>>
-
-/**
- * Extends props from a given context
- * but give the context second priority only
- *
- * @param props object of component properties
- * @param defaults object of potential default values
- * @param contexts the rest of all context to merge
- * @returns merged properties
- */
-function usePropsWithContext<Props>(
-  props: Props,
-  defaults: DefaultsProps = {},
-  ...contexts: Contexts
-) {
-  const context = contexts.reduce((acc, cur) => {
-    if (cur) {
-      acc = { ...acc, ...cur }
-    }
-    return acc
-  }, {})
-
-  props = { ...defaults, ...props }
-
-  return {
-    ...props,
-    ...Object.entries(context).reduce((acc, [key, value]) => {
-      if (
-        // check if a prop of the same name exists
-        typeof props[key] !== 'undefined' &&
-        // and if it was NOT defined as a component prop, because its still the same as the defaults
-        props[key] === defaults[key]
-      ) {
-        // then we use the context value
-        acc[key] = value
-      }
-      return acc
-    }, {}),
-  }
-}
-
-export { usePropsWithContext }
-export default usePropsWithContext

package/es/shared/interfaces.tsx

@@ -1,12 +0,0 @@
-export interface ISpacingProps extends ISpacingElementProps {
-  space?: SpaceTypes | ISpacingElementProps
-}
-
-export interface ISpacingElementProps {
-  top?: SpaceTypes
-  right?: SpaceTypes
-  bottom?: SpaceTypes
-  left?: SpaceTypes
-}
-
-export type SpaceTypes = string | boolean | number

package/esm/components/avatar/Avatar.tsx

@@ -1,162 +0,0 @@
-import React from 'react'
-import classnames from 'classnames'
-
-// Components
-import { createSpacingClasses } from '../space/SpacingHelper'
-import { createSkeletonClass } from '../skeleton/SkeletonHelper'
-
-// Elements
-import Img, { ImgProps } from '../../elements/Img'
-
-// Shared
-import Context from '../../shared/Context'
-import { ISpacingProps } from '../../shared/interfaces'
-import { SkeletonShow } from '../skeleton/Skeleton'
-import { warn } from '../../shared/component-helper'
-import { usePropsWithContext } from '../../shared/hooks'
-
-// Internal
-import AvatarGroup, { AvatarGroupContext } from './AvatarGroup'
-
-export type AvatarSizes = 'small' | 'medium' | 'large' | 'x-large'
-export type AvatarVariants = 'primary' | 'secondary' | 'tertiary'
-
-export interface AvatarProps {
-  /**
-   * Used in combination with `src` to provide an alt attribute for the `img` element.
-   * Default: null
-   */
-  alt?: string
-
-  /**
-   * Custom className on the component root
-   * Default: null
-   */
-  className?: string
-
-  /**
-   * Skeleton should be applied when loading content
-   * Default: null
-   */
-  skeleton?: SkeletonShow
-
-  /**
-   * The content of the component. Can be used instead of prop "data".
-   * Default: null
-   */
-  children?: React.ReactNode
-
-  /**
-   * The size of the component.
-   * Default: medium.
-   */
-  size?: AvatarSizes
-
-  /**
-   * Specifies the path to the image
-   * Default: null
-   */
-  src?: string
-
-  /**
-   * Props applied to the `img` element if the component is used to display an image.
-   * Default: null
-   */
-  imgProps?: ImgProps
-
-  /**
-   * The variant of the component.
-   * Default: primary.
-   */
-  variant?: AvatarVariants
-}
-
-export const defaultProps = {
-  alt: null,
-  className: null,
-  size: 'medium',
-  src: null,
-  imgProps: null,
-  variant: 'primary',
-  skeleton: false,
-  children: null,
-}
-
-const Avatar = (localProps: AvatarProps & ISpacingProps) => {
-  // Every component should have a context
-  const context = React.useContext(Context)
-  const avatarGroupContext = React.useContext(AvatarGroupContext)
-
-  // Extract additional props from global context
-  const {
-    alt,
-    className,
-    children: childrenProp,
-    size,
-    skeleton,
-    variant,
-    src,
-    imgProps,
-    ...props
-  } = usePropsWithContext(
-    localProps,
-    defaultProps,
-    context?.Avatar,
-    avatarGroupContext
-  )
-
-  let children = null
-
-  const skeletonClasses = createSkeletonClass('shape', skeleton, context)
-  const spacingClasses = createSpacingClasses(props)
-
-  const childrenIsString = typeof childrenProp === 'string'
-
-  if (src || imgProps) {
-    const imageProps = { src, alt, ...imgProps }
-    children = <Img {...imageProps} />
-  } else if (childrenIsString) {
-    const firstLetterUpperCase = childrenProp.charAt(0).toUpperCase()
-    children = (
-      <span data-testid="avatar-text" aria-hidden>
-        {firstLetterUpperCase}
-      </span>
-    )
-  } else {
-    children = childrenProp
-  }
-
-  if (!avatarGroupContext) {
-    warn(
-      `Avatar group required: An Avatar requires an Avatar.Group with label description as a parent component. This is to ensure correct semantic and accessibility.`
-    )
-  }
-
-  return (
-    <span
-      className={classnames(
-        'dnb-avatar',
-        `dnb-avatar--${variant || 'primary'}`,
-        `dnb-avatar--size-${size || 'medium'}`,
-        skeletonClasses,
-        spacingClasses,
-        className
-      )}
-      data-testid="avatar"
-      {...props}
-    >
-      {childrenIsString && (
-        <span data-testid="avatar-label" className="dnb-sr-only">
-          {childrenProp}
-        </span>
-      )}
-      {children}
-    </span>
-  )
-}
-
-Avatar.Group = AvatarGroup
-
-export { AvatarGroup }
-
-export default Avatar