@dnb/eufemia 9.16.0 → 9.17.0

package/cjs/components/breadcrumb/Breadcrumb.tsx

@@ -1,244 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import BreadcrumbItem, { BreadcrumbItemProps } from './BreadcrumbItem'
-import Context from '../../shared/Context'
-import { ISpacingProps, SkeletonTypes } from '../../shared/interfaces'
-import classnames from 'classnames'
-import { createSkeletonClass } from '../skeleton/SkeletonHelper'
-import Section from '../section/Section'
-import { createSpacingClasses } from '../space/SpacingHelper'
-import { useMediaQuery } from '../../shared'
-import { extendPropsWithContext } from '../../shared/component-helper'
-import { Button } from '..'
-
-export * from './BreadcrumbItem'
-
-export interface BreadcrumbProps {
-  /**
-   * Custom className on the component root
-   * Default: null
-   */
-  className?: string
-
-  /**
-   * Skeleton should be applied when loading content
-   * Default: null
-   */
-  skeleton?: SkeletonTypes
-
-  /**
-   * Pass in a list of your pages as objects of breadcrumbitem to render them as breadcrumbitems.
-   * Default: null
-   */
-  data?: BreadcrumbItemProps[]
-
-  /**
-   * The content of the component. Can be used instead of prop "data".
-   * Default: null
-   */
-  children?: React.ReactNode // ReactNode allows multiple elements, strings, numbers, fragments, portals...
-
-  /**
-   * The variant of the component.
-   * Default: When children and data is not defined, it defaults to "single". If they are defined, the variant depends on the viewport.
-   */
-  variant?: 'single' | 'multiple' | 'collapse'
-
-  /**
-   * Handle the click event on 'single'/'collapse'
-   * Default: null
-   */
-  onClick?: React.MouseEventHandler<HTMLButtonElement>
-
-  /**
-   * For variant 'single', use href (or onClick) to set href when clicking "Back"
-   * Default: null
-   */
-  href?: string
-
-  /**
-   * Every <nav> on a page needs an unique aria-label text
-   * Default: Page hierarchy
-   */
-  navText?: React.ReactNode
-
-  /**
-   * Add custom 'Back' text for variant 'single'
-   * Default: 'Back' or defined by Context translation
-   */
-  goBackText?: React.ReactNode
-
-  /**
-   * Add custom 'Home' text
-   * Default: 'Home' or defined by Context translation
-   */
-  homeText?: React.ReactNode
-
-  /**
-   * Add custom 'Back to...' text, for variant collapse
-   * Default 'Back to...' or defined by Context translation
-   */
-  backToText?: React.ReactNode
-
-  /**
-   * If variant='collapse', you can override isCollapsed for the collapsed content by updating this value.
-   * Default: null
-   */
-  isCollapsed?: boolean | string
-
-  /**
-   * Use one of the Section component style types (style_type)
-   * Default: transparent
-   */
-  styleType?: string
-
-  /**
-   * Use one of the Section component style types (style_type)
-   * Default: pistachio
-   */
-  collapsedStyleType?: string
-}
-
-export const defaultProps = {
-  className: null,
-  skeleton: false,
-  children: null,
-  variant: null,
-  onClick: null,
-  href: null,
-  navText: 'Back',
-  goBackText: 'Back',
-  homeText: 'Home',
-  backToText: 'Back to...',
-  isCollapsed: true,
-  styleType: 'transparent',
-  collapsedStyleType: 'pistachio',
-  data: null,
-}
-
-function Breadcrumb(localProps: BreadcrumbProps & ISpacingProps) {
-  // Every component should have a context
-  const context = React.useContext(Context)
-  // Extract additional props from global context
-  const {
-    className,
-    skeleton,
-    children: childrenItems,
-    variant,
-    onClick,
-    navText, // has a translation in context
-    goBackText, // has a translation in context
-    homeText, // eslint-disable-line
-    backToText, // has a translation in context
-    styleType,
-    collapsedStyleType,
-    isCollapsed: overrideIsCollapsed,
-    data,
-    href,
-    ...props
-  } = extendPropsWithContext(
-    { ...defaultProps, ...localProps },
-    defaultProps,
-    context?.translation?.Breadcrumb,
-    context?.Breadcrumb
-  )
-  const skeletonClasses = createSkeletonClass('font', skeleton, context)
-  const spacingClasses = createSpacingClasses(props)
-
-  const [isCollapsed, setCollapse] = useState(true)
-  const isSmallScreen = useMediaQuery({
-    matchOnSSR: true,
-    when: { max: 'medium' },
-  })
-
-  let currentVariant = variant
-  if (variant === null) {
-    if (childrenItems || data) {
-      currentVariant = isSmallScreen ? 'collapse' : 'multiple'
-    } else {
-      currentVariant = 'single'
-    }
-  }
-
-  useEffect(() => {
-    setCollapse(overrideIsCollapsed)
-  }, [overrideIsCollapsed])
-
-  const MultipleCrumbs = () => (
-    <ol className="dnb-breadcrumb__list">
-      {data?.map((breadcrumbItem, i) => (
-        <BreadcrumbItem
-          key={`${breadcrumbItem.text}`}
-          variant={
-            (i == 0 && 'home') ||
-            (i == data.length - 1 && 'current') ||
-            null
-          }
-          {...breadcrumbItem}
-        />
-      ))}
-
-      {childrenItems}
-    </ol>
-  )
-
-  return (
-    <nav
-      aria-label={navText}
-      className={classnames(
-        'dnb-breadcrumb',
-        skeletonClasses,
-        spacingClasses,
-        className
-      )}
-      data-testid="breadcrumb-nav"
-      {...props}
-    >
-      <Section style_type={styleType} className="dnb-breadcrumb__bar">
-        {currentVariant === 'collapse' && (
-          <Button
-            text={backToText}
-            variant="tertiary"
-            icon="chevron_left"
-            icon_position="left"
-            onClick={
-              onClick ||
-              (() => {
-                setCollapse(!isCollapsed)
-              })
-            }
-            aria-expanded={!isCollapsed}
-          />
-        )}
-
-        {currentVariant === 'single' && (
-          <Button
-            text={goBackText}
-            variant="tertiary"
-            icon="chevron_left"
-            icon_position="left"
-            onClick={onClick}
-            href={href}
-          />
-        )}
-
-        {currentVariant === 'multiple' && <MultipleCrumbs />}
-      </Section>
-
-      {currentVariant === 'collapse' && !isCollapsed && (
-        <Section
-          style_type={collapsedStyleType}
-          className="dnb-breadcrumb__collapse"
-          data-testid="breadcrumb-collapse"
-        >
-          <MultipleCrumbs />
-        </Section>
-      )}
-    </nav>
-  )
-}
-
-Breadcrumb.Item = BreadcrumbItem
-
-export { BreadcrumbItem }
-
-export default Breadcrumb

package/cjs/components/breadcrumb/BreadcrumbItem.tsx

@@ -1,111 +0,0 @@
-import React from 'react'
-import Context from '../../shared/Context'
-import Button from '../Button'
-import homeIcon from '../../icons/home'
-import P from '../../elements/P'
-import { IconPrimary } from '..'
-import { IconPrimaryIcon } from '../icon-primary/IconPrimary'
-import { SkeletonTypes } from '../../shared/interfaces'
-import { extendPropsWithContext } from '../../shared/component-helper'
-
-export interface BreadcrumbItemProps {
-  /**
-   * Text displaying the title of the item's corresponding page
-   * Default: If variant='home', default is "Home". Otherwise it is required.
-   */
-  text?: React.ReactNode
-
-  /**
-   * Icon displaying on the left side
-   * Default: HomeIcon / chevron_left
-   */
-  icon?: IconPrimaryIcon
-
-  /**
-   * Href should be the link to the item's corresponding page.
-   * Default: null
-   */
-  href?: string
-
-  /**
-   * Set a custom click event. In this case, you should not define the prop href.
-   * Default: null
-   */
-  onClick?: React.MouseEventHandler<HTMLButtonElement>
-
-  /**
-   * The component variant. Variant 'current' should correspond to the current page and 'home' to the root page.
-   * Default: null
-   */
-  variant?: 'home' | 'previous' | 'current'
-
-  /**
-   * Skeleton should be applied when loading content
-   * Default: null
-   */
-  skeleton?: SkeletonTypes
-}
-
-const defaultProps = {
-  text: null,
-  href: null,
-  icon: null,
-  onClick: null,
-  variant: null,
-  skeleton: null,
-}
-
-export default function BreadcrumbItem(localProps: BreadcrumbItemProps) {
-  // Every component should have a context
-  const context = React.useContext(Context)
-  const {
-    translation: {
-      Breadcrumb: { homeText },
-    },
-  } = context
-
-  // Extract additional props from global context
-  const { text, href, icon, onClick, variant, skeleton, ...props } =
-    extendPropsWithContext(
-      { ...defaultProps, ...localProps },
-      defaultProps,
-      context?.BreadcrumbItem
-    )
-
-  const currentIcon =
-    icon || (variant === 'home' && homeIcon) || 'chevron_left'
-  const currentText = text || (variant === 'home' && homeText) || ''
-  const isInteractive = (href || onClick) && variant !== 'current'
-
-  return (
-    <li
-      className="dnb-breadcrumb__item"
-      data-testid="breadcrumb-item"
-      aria-current={variant === 'current' ? true : undefined}
-    >
-      {isInteractive ? (
-        <Button
-          variant="tertiary"
-          href={href}
-          icon={currentIcon}
-          icon_position="left"
-          icon_={currentIcon} // what does this do?
-          on_click={onClick}
-          text={currentText}
-          skeleton={skeleton}
-          {...props}
-        />
-      ) : (
-        <span className="dnb-breadcrumb__item__span">
-          <IconPrimary
-            icon={currentIcon}
-            className="dnb-breadcrumb__item__span__icon"
-          />
-          <P left="0" data-testid="breadcrumb-item-text">
-            {currentText}
-          </P>
-        </span>
-      )}
-    </li>
-  )
-}

package/cjs/shared/interfaces.tsx

@@ -1,14 +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
-
-export type SkeletonTypes = string | boolean