@dnb/eufemia 9.15.2 → 9.16.3

package/es/components/breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,250 @@
+import React, { useEffect, useState } from 'react'
+import classnames from 'classnames'
+
+// Components
+import { createSkeletonClass } from '../skeleton/SkeletonHelper'
+import { createSpacingClasses } from '../space/SpacingHelper'
+import Section from '../section/Section'
+import Button from '../button/Button'
+
+// Shared
+import { useMediaQuery } from '../../shared'
+import Context from '../../shared/Context'
+import { ISpacingProps, SkeletonTypes } from '../../shared/interfaces'
+import { extendPropsWithContext } from '../../shared/component-helper'
+
+// Internal
+import BreadcrumbItem, { BreadcrumbItemProps } from './BreadcrumbItem'
+
+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/es/components/breadcrumb/BreadcrumbItem.js

@@ -0,0 +1,71 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["text", "href", "icon", "onClick", "variant", "skeleton"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React from 'react';
+import Button from '../button/Button';
+import IconPrimary from '../icon-primary/IconPrimary';
+import P from '../../elements/P';
+import homeIcon from '../../icons/home';
+import Context from '../../shared/Context';
+import { extendPropsWithContext } from '../../shared/component-helper';
+const defaultProps = {
+  text: null,
+  href: null,
+  icon: null,
+  onClick: null,
+  variant: null,
+  skeleton: null
+};
+export default function BreadcrumbItem(localProps) {
+  const context = React.useContext(Context);
+  const {
+    translation: {
+      Breadcrumb: {
+        homeText
+      }
+    }
+  } = context;
+
+  const _extendPropsWithConte = extendPropsWithContext(_objectSpread(_objectSpread({}, defaultProps), localProps), defaultProps, context === null || context === void 0 ? void 0 : context.BreadcrumbItem),
+        {
+    text,
+    href,
+    icon,
+    onClick,
+    variant,
+    skeleton
+  } = _extendPropsWithConte,
+        props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
+
+  const currentIcon = icon || variant === 'home' && homeIcon || 'chevron_left';
+  const currentText = text || variant === 'home' && homeText || '';
+  const isInteractive = (href || onClick) && variant !== 'current';
+  return React.createElement("li", {
+    className: "dnb-breadcrumb__item",
+    "data-testid": "breadcrumb-item",
+    "aria-current": variant === 'current' ? true : undefined
+  }, isInteractive ? React.createElement(Button, _extends({
+    variant: "tertiary",
+    href: href,
+    icon: currentIcon,
+    icon_position: "left",
+    icon_: currentIcon,
+    on_click: onClick,
+    text: currentText,
+    skeleton: skeleton
+  }, props)) : React.createElement("span", {
+    className: "dnb-breadcrumb__item__span"
+  }, React.createElement(IconPrimary, {
+    icon: currentIcon,
+    className: "dnb-breadcrumb__item__span__icon"
+  }), React.createElement(P, {
+    left: "0",
+    "data-testid": "breadcrumb-item-text"
+  }, currentText)));
+}

package/es/components/breadcrumb/BreadcrumbItem.tsx

@@ -0,0 +1,118 @@
+import React from 'react'
+
+// Components
+import Button from '../button/Button'
+import IconPrimary, { IconPrimaryIcon } from '../icon-primary/IconPrimary'
+
+// Elements
+import P from '../../elements/P'
+
+// Icons
+import homeIcon from '../../icons/home'
+
+// Shared
+import Context from '../../shared/Context'
+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/es/components/breadcrumb/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Component Entry
+ *
+ */
+
+import Breadcrumb from './Breadcrumb'
+export default Breadcrumb
+export * from './Breadcrumb'

package/es/components/breadcrumb/index.js

@@ -0,0 +1,3 @@
+import Breadcrumb from './Breadcrumb';
+export default Breadcrumb;
+export * from './Breadcrumb';

package/es/components/breadcrumb/style/_breadcrumb.scss

@@ -0,0 +1,54 @@
+/*
+* Breadcrumb component
+*
+*/
+
+.dnb-breadcrumb {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+
+  &__bar.dnb-section {
+    display: flex;
+    padding: var(--spacing-small) 0 var(--spacing-x-small) 0;
+  }
+
+  &__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  &__item {
+    &__span {
+      display: flex;
+      align-items: center;
+      line-height: normal;
+      padding: var(--spacing-x-small) 0;
+
+      // To match the other tertiary buttons
+      &__icon {
+        margin-left: calc(var(--button-icon-size) / 2);
+        margin-right: 0.5rem;
+      }
+
+      color: var(--color-black-80);
+    }
+  }
+
+  &__collapse {
+    display: flex;
+    flex-direction: column;
+    padding: var(--spacing-x-small) var(--spacing-large);
+  }
+  &__collapse &__list {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}

package/es/components/breadcrumb/style/dnb-breadcrumb.css

@@ -0,0 +1,142 @@
+/*
+* DNB Breadcrumb
+*
+*/
+/**
+ * This file is only used to make components independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+ * Scopes
+ *
+ */
+/*
+ * Document Reset
+ *
+ */
+.dnb-breadcrumb {
+  font-family: 'DNB', sans-serif;
+  font-family: var(--font-family-default);
+  font-weight: normal;
+  font-weight: var(--font-weight-basis);
+  font-size: 1rem;
+  font-size: var(--font-size-small);
+  font-style: normal;
+  line-height: 1.5rem;
+  line-height: var(--line-height-basis);
+  color: #333;
+  color: var(--color-black-80, #333);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  /**
+  * Ensure consistency and use the same as HTML reset -> html {...}
+  * between base and code package
+  */
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+     tab-size: 4;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  word-break: break-word;
+  /**
+  * 1. Remove repeating backgrounds in all browsers (opinionated).
+  * 2. Add border box sizing in all browsers (opinionated).
+  */
+  /**
+  * 1. Add text decoration inheritance in all browsers (opinionated).
+  * 2. Add vertical alignment inheritance in all browsers (opinionated).
+  */
+  margin: 0;
+  padding: 0; }
+  .dnb-breadcrumb *,
+  .dnb-breadcrumb ::before,
+  .dnb-breadcrumb ::after {
+    background-repeat: no-repeat;
+    /* 1 */
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    /* 2 */ }
+  .dnb-breadcrumb ::before,
+  .dnb-breadcrumb ::after {
+    text-decoration: inherit;
+    /* 1 */
+    vertical-align: inherit;
+    /* 2 */ }
+
+/*
+* Breadcrumb component
+*
+*/
+.dnb-breadcrumb {
+  margin: 0;
+  padding: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column; }
+  .dnb-breadcrumb__bar.dnb-section {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    padding: 1rem 0 0.5rem 0;
+    padding: var(--spacing-small) 0 var(--spacing-x-small) 0; }
+  .dnb-breadcrumb__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center; }
+  .dnb-breadcrumb__item__span {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    line-height: normal;
+    padding: 0.5rem 0;
+    padding: var(--spacing-x-small) 0;
+    color: #333;
+    color: var(--color-black-80); }
+    .dnb-breadcrumb__item__span__icon {
+      margin-left: 0.5rem;
+      margin-left: calc(1rem / 2);
+      margin-left: calc(var(--button-icon-size)/2);
+      margin-left: calc(var(--button-icon-size) / 2);
+      margin-right: 0.5rem; }
+  .dnb-breadcrumb__collapse {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    padding: 0.5rem 2rem;
+    padding: var(--spacing-x-small) var(--spacing-large); }
+  .dnb-breadcrumb__collapse .dnb-breadcrumb__list {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-align: start;
+        -ms-flex-align: start;
+            align-items: flex-start; }

package/es/components/breadcrumb/style/dnb-breadcrumb.min.css

@@ -0,0 +1 @@
+.dnb-breadcrumb{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-breadcrumb *,.dnb-breadcrumb :after,.dnb-breadcrumb :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-breadcrumb :after,.dnb-breadcrumb :before{text-decoration:inherit;vertical-align:inherit}.dnb-breadcrumb{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:0;padding:0}.dnb-breadcrumb,.dnb-breadcrumb__bar.dnb-section{display:-webkit-box;display:-ms-flexbox;display:flex}.dnb-breadcrumb__bar.dnb-section{padding:1rem 0 .5rem;padding:var(--spacing-small) 0 var(--spacing-x-small) 0}.dnb-breadcrumb__list{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:0;padding:0}.dnb-breadcrumb__item__span,.dnb-breadcrumb__list{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.dnb-breadcrumb__item__span{color:#333;color:var(--color-black-80);line-height:normal;padding:.5rem 0;padding:var(--spacing-x-small) 0}.dnb-breadcrumb__item__span__icon{margin-left:.5rem;margin-left:calc(var(--button-icon-size)/2);margin-right:.5rem}.dnb-breadcrumb__collapse{display:-webkit-box;display:-ms-flexbox;display:flex;padding:.5rem 2rem;padding:var(--spacing-x-small) var(--spacing-large)}.dnb-breadcrumb__collapse,.dnb-breadcrumb__collapse .dnb-breadcrumb__list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.dnb-breadcrumb__collapse .dnb-breadcrumb__list{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}

package/es/components/breadcrumb/style/dnb-breadcrumb.scss

@@ -0,0 +1,12 @@
+/*
+* DNB Breadcrumb
+*
+*/
+
+@import '../../../style/components/imports.scss';
+
+.dnb-breadcrumb {
+  @include componentReset();
+}
+
+@import './_breadcrumb.scss';

package/es/components/breadcrumb/style/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Web Style Import
+ *
+ */
+
+import './dnb-breadcrumb.scss'

package/es/components/breadcrumb/style/index.js

@@ -0,0 +1 @@
+import "./dnb-breadcrumb.min.css";

package/es/components/breadcrumb/style.js

@@ -0,0 +1 @@
+import "./style/dnb-breadcrumb.min.css";

package/es/components/button/Button.d.ts

@@ -225,6 +225,5 @@ export interface ButtonProps extends React.HTMLProps<HTMLElement> {
   on_click?: ButtonOnClick;
 }
 export default class Button extends React.Component<ButtonProps, any> {
-  static defaultProps: object;
   render(): JSX.Element;
 }