@dnb/eufemia 9.18.0 → 9.19.0

package/elements/Img.d.ts

@@ -14,7 +14,7 @@ export type ImgRight = string | number | boolean;
 export type ImgBottom = string | number | boolean;
 export type ImgLeft = string | number | boolean;
 export type ImgSkeleton = string | boolean;
-export type ImgClassName = string | Object | any[];
+export type ImgClassName = string | any | any[];
 
 /**
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".

package/es/components/Avatar.d.ts

@@ -0,0 +1,14 @@
+/**
+ * ATTENTION: This file is auto generated by using "prepareTemplates".
+ * Do not change the content!
+ *
+ */
+
+/**
+ * Library Index avatar to autogenerate all the components and extensions
+ * Used by "prepareAvatars"
+ */
+
+import Avatar from './avatar/Avatar'
+export * from './avatar/Avatar'
+export default Avatar

package/es/components/Avatar.js

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

package/es/components/InfoCard.d.ts

@@ -0,0 +1,14 @@
+/**
+ * ATTENTION: This file is auto generated by using "prepareTemplates".
+ * Do not change the content!
+ *
+ */
+
+/**
+ * Library Index info-card to autogenerate all the components and extensions
+ * Used by "prepareInfoCards"
+ */
+
+import InfoCard from './info-card/InfoCard'
+export * from './info-card/InfoCard'
+export default InfoCard

package/es/components/InfoCard.js

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

package/es/components/Timeline.d.ts

@@ -0,0 +1,14 @@
+/**
+ * ATTENTION: This file is auto generated by using "prepareTemplates".
+ * Do not change the content!
+ *
+ */
+
+/**
+ * Library Index timeline to autogenerate all the components and extensions
+ * Used by "prepareTimelines"
+ */
+
+import Timeline from './timeline/Timeline'
+export * from './timeline/Timeline'
+export default Timeline

package/es/components/Timeline.js

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

package/es/components/autocomplete/Autocomplete.d.ts

@@ -440,7 +440,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   input_element?: AutocompleteInputElement;
 
   /**
-   * The data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these <a href="/uilib/components/fragments/drawer-list/info#data-structure">data structure</a>. <br /> If you don&#39;t have to define a `value`, you can also send in a `function` which will be called once the user opens the DrawerList.
+   * <em>(required)</em> the data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these <a href="/uilib/components/fragments/drawer-list/info#data-structure">data structure</a>. <br /> If you don&#39;t have to define a `value`, you can also send in a `function` which will be called once the user opens the DrawerList.
    */
   data?: AutocompleteData;
 
@@ -513,7 +513,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   className?: string;
 
   /**
-   * The data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these <a href="/uilib/components/fragments/drawer-list/info#data-structure">data structure</a>. <br /> If you don&#39;t have to define a `value`, you can also send in a `function` which will be called once the user opens the DrawerList.
+   * <em>(required)</em> the data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these <a href="/uilib/components/fragments/drawer-list/info#data-structure">data structure</a>. <br /> If you don&#39;t have to define a `value`, you can also send in a `function` which will be called once the user opens the DrawerList.
    */
   children?: AutocompleteChildren;
   custom_element?: Object;

package/es/components/avatar/Avatar.js

@@ -0,0 +1,83 @@
+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 = ["alt", "className", "children", "size", "skeleton", "variant", "src", "imgProps"];
+
+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 classnames from 'classnames';
+import { createSpacingClasses } from '../space/SpacingHelper';
+import { createSkeletonClass } from '../skeleton/SkeletonHelper';
+import Img from '../../elements/Img';
+import Context from '../../shared/Context';
+import { extendPropsWithContext, warn } from '../../shared/component-helper';
+import AvatarGroup, { AvatarGroupContext } from './AvatarGroup';
+export const defaultProps = {
+  alt: null,
+  className: null,
+  size: 'medium',
+  src: null,
+  imgProps: null,
+  variant: 'primary',
+  skeleton: false,
+  children: null
+};
+
+function Avatar(localProps) {
+  const context = React.useContext(Context);
+  const avatarGroupContext = React.useContext(AvatarGroupContext);
+
+  const _extendPropsWithConte = extendPropsWithContext(_objectSpread(_objectSpread({}, defaultProps), localProps), defaultProps, context === null || context === void 0 ? void 0 : context.Avatar, avatarGroupContext),
+        {
+    alt,
+    className,
+    children: childrenProp,
+    size,
+    skeleton,
+    variant,
+    src,
+    imgProps
+  } = _extendPropsWithConte,
+        props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
+
+  let children = null;
+  const skeletonClasses = createSkeletonClass('shape', skeleton, context);
+  const spacingClasses = createSpacingClasses(props);
+  const childrenIsString = typeof childrenProp === 'string';
+
+  if (src || imgProps) {
+    const imageProps = _objectSpread({
+      src,
+      alt
+    }, imgProps);
+
+    children = React.createElement(Img, imageProps);
+  } else if (childrenIsString) {
+    const firstLetterUpperCase = childrenProp.charAt(0).toUpperCase();
+    children = React.createElement("span", {
+      "data-testid": "avatar-text",
+      "aria-hidden": true
+    }, firstLetterUpperCase);
+  } 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 React.createElement("span", _extends({
+    className: classnames(`dnb-avatar dnb-avatar--${variant || 'primary'} dnb-avatar--size-${size || 'medium'}`, skeletonClasses, spacingClasses, className),
+    "data-testid": "avatar"
+  }, props), childrenIsString && React.createElement("span", {
+    "data-testid": "avatar-label",
+    className: "dnb-sr-only"
+  }, childrenProp), children);
+}
+
+Avatar.Group = AvatarGroup;
+export { AvatarGroup };
+export default Avatar;

package/es/components/avatar/Avatar.tsx

@@ -0,0 +1,163 @@
+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, SkeletonTypes } from '../../shared/interfaces'
+import {
+  extendPropsWithContext,
+  warn,
+} from '../../shared/component-helper'
+
+// 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?: SkeletonTypes
+
+  /**
+   * 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,
+}
+
+function 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
+  } = extendPropsWithContext(
+    { ...defaultProps, ...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

package/es/components/avatar/AvatarGroup.js

@@ -0,0 +1,89 @@
+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 = ["label", "className", "children", "size", "maxElements", "variant"];
+
+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 classnames from 'classnames';
+import { createSpacingClasses } from '../space/SpacingHelper';
+import Context from '../../shared/Context';
+import { extendPropsWithContext } from '../../shared/component-helper';
+export const defaultProps = {
+  label: null,
+  className: null,
+  maxElements: 4,
+  size: 'medium',
+  children: null,
+  variant: 'primary'
+};
+export const AvatarGroupContext = React.createContext(null);
+
+function AvatarGroup(localProps) {
+  const context = React.useContext(Context);
+
+  const _extendPropsWithConte = extendPropsWithContext(_objectSpread(_objectSpread({}, defaultProps), localProps), defaultProps, context === null || context === void 0 ? void 0 : context.AvatarGroup),
+        {
+    label,
+    className,
+    children: childrenProp,
+    size,
+    maxElements: maxElementsProp,
+    variant
+  } = _extendPropsWithConte,
+        props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
+
+  const maxElements = maxElementsProp && maxElementsProp > 0 ? maxElementsProp : 4;
+  let children = childrenProp;
+  let numOfHiddenAvatars = 0;
+
+  if (Array.isArray(childrenProp)) {
+    const total = childrenProp.length;
+
+    if (total > maxElements) {
+      numOfHiddenAvatars = total - maxElements + 1;
+    }
+
+    children = childrenProp.slice(0, total - numOfHiddenAvatars).map((child, i) => {
+      const appliedSize = child.props.size ? child.props.size : size;
+      const appliedVariant = child.props.variant ? child.props.variant : variant;
+      return React.cloneElement(child, {
+        size: appliedSize,
+        variant: appliedVariant,
+        style: _objectSpread(_objectSpread({}, child.props.style), {}, {
+          zIndex: total - i
+        }),
+        key: i
+      });
+    });
+  }
+
+  const spacingClasses = createSpacingClasses(props);
+  return React.createElement(AvatarGroupContext.Provider, {
+    value: props
+  }, React.createElement("span", _extends({
+    className: classnames('dnb-avatar__group', spacingClasses, className),
+    "data-testid": "avatar-group"
+  }, props), React.createElement("span", {
+    "data-testid": "avatar-group-label",
+    className: "dnb-sr-only"
+  }, label), children, numOfHiddenAvatars ? React.createElement(ElementsHidden, {
+    size: size
+  }, "+", numOfHiddenAvatars) : null));
+}
+
+function ElementsHidden(props) {
+  const {
+    size,
+    children
+  } = props;
+  return React.createElement("span", {
+    className: `dnb-avatar__group--elements-left dnb-avatar__group--elements-left--size-${size || 'medium'}`,
+    "data-testid": "elements-left"
+  }, children);
+}
+
+export default AvatarGroup;

package/es/components/avatar/AvatarGroup.tsx

@@ -0,0 +1,167 @@
+import React from 'react'
+import classnames from 'classnames'
+
+// Components
+import { createSpacingClasses } from '../space/SpacingHelper'
+import { AvatarSizes, AvatarVariants } from './Avatar'
+
+// Shared
+import Context from '../../shared/Context'
+import { ISpacingProps } from '../../shared/interfaces'
+import { extendPropsWithContext } from '../../shared/component-helper'
+
+export interface AvatarGroupProps {
+  /**
+   * Label to describe the avatar group
+   * Default: null
+   */
+  label: string
+
+  /**
+   * Custom className on the component root
+   * Default: null
+   */
+  className?: string
+
+  /**
+   * Number of max displayed elements, including the "elements hidden text (+x)".
+   * Default: 4
+   */
+  maxElements?: number
+
+  /**
+   * The avatars to group.
+   * Default: null
+   */
+  children?: React.ReactNode
+
+  /**
+   * The size of the Avatars, and "elements hidden text (+x)".
+   * Default: medium.
+   */
+  size?: AvatarSizes
+
+  /**
+   * The variant of the Avatars.
+   * Default: primary.
+   */
+  variant?: AvatarVariants
+}
+
+export const defaultProps = {
+  label: null,
+  className: null,
+  maxElements: 4,
+  size: 'medium',
+  children: null,
+  variant: 'primary',
+}
+
+export const AvatarGroupContext = React.createContext(null)
+
+function AvatarGroup(localProps: AvatarGroupProps & ISpacingProps) {
+  // Every component should have a context
+  const context = React.useContext(Context)
+  // Extract additional props from global context
+  const {
+    label,
+    className,
+    children: childrenProp,
+    size,
+    maxElements: maxElementsProp,
+    variant,
+    ...props
+  } = extendPropsWithContext(
+    { ...defaultProps, ...localProps },
+    defaultProps,
+    context?.AvatarGroup
+  )
+
+  const maxElements =
+    maxElementsProp && maxElementsProp > 0 ? maxElementsProp : 4
+
+  let children = childrenProp
+  let numOfHiddenAvatars = 0
+
+  if (Array.isArray(childrenProp)) {
+    const total = childrenProp.length
+
+    if (total > maxElements) {
+      numOfHiddenAvatars = total - maxElements + 1
+    }
+
+    children = childrenProp
+      .slice(0, total - numOfHiddenAvatars)
+      .map((child, i) => {
+        const appliedSize = child.props.size ? child.props.size : size
+        const appliedVariant = child.props.variant
+          ? child.props.variant
+          : variant
+        return React.cloneElement(child, {
+          size: appliedSize,
+          variant: appliedVariant,
+          style: { ...child.props.style, zIndex: total - i },
+          key: i,
+        })
+      })
+  }
+
+  const spacingClasses = createSpacingClasses(props)
+
+  return (
+    <AvatarGroupContext.Provider value={props}>
+      <span
+        className={classnames(
+          'dnb-avatar__group',
+          spacingClasses,
+          className
+        )}
+        data-testid="avatar-group"
+        {...props}
+      >
+        <span data-testid="avatar-group-label" className="dnb-sr-only">
+          {label}
+        </span>
+
+        {children}
+
+        {numOfHiddenAvatars ? (
+          <ElementsHidden size={size}>
+            +{numOfHiddenAvatars}
+          </ElementsHidden>
+        ) : null}
+      </span>
+    </AvatarGroupContext.Provider>
+  )
+}
+
+export interface ElementsHiddenProps {
+  /**
+   * The avatars to group.
+   * Default: null
+   */
+  children?: React.ReactNode
+
+  /**
+   * The size of the "elements hidden text (+x)".
+   * Default: medium.
+   */
+  size?: AvatarSizes
+}
+
+function ElementsHidden(props: ElementsHiddenProps) {
+  const { size, children } = props
+  return (
+    <span
+      className={classnames(
+        'dnb-avatar__group--elements-left',
+        `dnb-avatar__group--elements-left--size-${size || 'medium'}`
+      )}
+      data-testid="elements-left"
+    >
+      {children}
+    </span>
+  )
+}
+
+export default AvatarGroup

package/es/components/avatar/index.d.ts

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

package/es/components/avatar/index.js

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