@dnb/eufemia 9.17.2 → 9.21.0

package/esm/components/InfoCard.js

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

package/esm/components/Tag.d.ts

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

package/esm/components/Tag.js

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

package/esm/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/esm/components/Timeline.js

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

package/esm/components/accordion/Accordion.d.ts

@@ -59,7 +59,7 @@ export interface AccordionProps extends React.HTMLProps<HTMLElement> {
   title?: React.ReactNode;
 
   /**
-   * If set to `true` the accordion will be expanded as it&#39;s initial state.
+   * If set to `true` the accordion will be expanded as its initial state.
    */
   expanded?: AccordionExpanded;
 
@@ -69,7 +69,7 @@ export interface AccordionProps extends React.HTMLProps<HTMLElement> {
   no_animation?: AccordionNoAnimation;
 
   /**
-   * If set to `true` the accordion will be expanded during SSR. Can be potentially useful for SEO, although it will disturb client hydration, where React expects the same state. But thats mainly an technical aspect to consider.
+   * If set to `true` the accordion will be expanded during SSR. Can be potentially useful for SEO, although it will disturb client hydration, where React expects the same state. But that&#39;s mainly a technical aspect to consider.
    */
   expanded_ssr?: AccordionExpandedSsr;
 
@@ -79,7 +79,7 @@ export interface AccordionProps extends React.HTMLProps<HTMLElement> {
   prerender?: AccordionPrerender;
 
   /**
-   * If set to `true` the accordion component will not re-render it&#39;s content – can be useful for widgets you don&#39;t have control of storing the temporary state during interaction.
+   * If set to `true` the accordion component will not re-render its content – can be useful for widgets you don&#39;t have control of storing the temporary state during an interaction.
    */
   prevent_rerender?: AccordionPreventRerender;
 
@@ -89,7 +89,7 @@ export interface AccordionProps extends React.HTMLProps<HTMLElement> {
   prevent_rerender_conditional?: AccordionPreventRerenderConditional;
 
   /**
-   * If set to `true`, it will remember a changed state initiated by the user. It requires an unique `id`. It will store the sate in the local storage.
+   * If set to `true`, it will remember a changed state initiated by the user. It requires a unique `id`. It will store the sate in the local storage.
    */
   remember_state?: AccordionRememberState;
 
@@ -125,7 +125,7 @@ export interface AccordionProps extends React.HTMLProps<HTMLElement> {
   skeleton?: AccordionSkeleton;
 
   /**
-   * An unique `id` that will be used on the button element. If you use `remember_state`, an id is required.
+   * A unique `id` that will be used on the button element. If you use `remember_state`, an id is required.
    */
   id?: string;
   group?: string;
@@ -214,13 +214,13 @@ export type GroupRememberState = string | boolean;
  */
 export interface GroupProps {
   /**
-   * An unique `id` that will be used on the button element. If you use `remember_state`, an id is required.
+   * A unique `id` that will be used on the button element. If you use `remember_state`, an id is required.
    */
   id?: string;
   group?: string;
 
   /**
-   * If set to `true`, it will remember a changed state initiated by the user. It requires an unique `id`. It will store the sate in the local storage.
+   * If set to `true`, it will remember a changed state initiated by the user. It requires a unique `id`. It will store the sate in the local storage.
    */
   remember_state?: GroupRememberState;
 }

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

@@ -224,12 +224,12 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   mode?: AutocompleteMode;
 
   /**
-   * Give a title to let the user know what they has to do. Defaults to `Skriv og få alternativer&#39;` .
+   * Give a title to let the user know what theyhaves to do. Defaults to `Skriv og få alternativer&#39;` .
    */
   title?: AutocompleteTitle;
 
   /**
-   * Use this to define the pre filled placeholder text in the input. Defaults to `title="Skriv og velg"`.
+   * Use this to define the pre-filled placeholder text in the input. Defaults to `title="Skriv og velg"`.
    */
   placeholder?: AutocompletePlaceholder;
 
@@ -254,7 +254,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   indicator_label?: AutocompleteIndicatorLabel;
 
   /**
-   * Only for screen readers. Title of the button in order to show the suggestions / options. It is always present and when activating, it opens the DrawerList and sets the focus on it. Defaults to `Bla gjennom alternativer`.
+   * Only for screen readers. Title of the button to show the suggestions / options. It is always present and when activating, it opens the DrawerList and sets the focus on it. Defaults to `Bla gjennom alternativer`.
    */
   show_options_sr?: string;
 
@@ -284,7 +284,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   icon_size?: string;
 
   /**
-   * Position of icon inside the autocomplete. Set to `left` or `right`. Defaults to `left`.
+   * Position of the icon inside the autocomplete. Set to `left` or `right`. Defaults to `left`.
    */
   icon_position?: AutocompleteIconPosition;
 
@@ -314,7 +314,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   label_sr_only?: AutocompleteLabelSrOnly;
 
   /**
-   * Use `true` to not remove the typed value on input blur, if it is invalid. By default the typed value will disappear / replaced by a selected value from the data list during the input field blur.
+   * Use `true` to not remove the typed value on input blur, if it is invalid. By default, the typed value will disappear / replaced by a selected value from the data list during the input field blur.
    */
   keep_value?: AutocompleteKeepValue;
 
@@ -324,7 +324,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   keep_value_and_selection?: AutocompleteKeepValueAndSelection;
 
   /**
-   * If set to `true`, a clear button is showed inside the input field. Defaults to `false`.
+   * If set to `true`, a clear button is shown inside the input field. Defaults to `false`.
    */
   show_clear_button?: AutocompleteShowClearButton;
 
@@ -334,7 +334,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   status?: AutocompleteStatus;
 
   /**
-   * Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.
+   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
   status_state?: string;
 
@@ -375,7 +375,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   focusable?: AutocompleteFocusable;
 
   /**
-   * If set to `true`, word highlighting will disabled, but the options will still get filtered. Defaults to `false`.
+   * If set to `true`, word highlighting will be disabled, but the options will still get filtered. Defaults to `false`.
    */
   disable_highlighting?: AutocompleteDisableHighlighting;
 
@@ -410,7 +410,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   show_submit_button?: AutocompleteShowSubmitButton;
 
   /**
-   * Replace the drop down / submit button with a custom React element. Defaults to the input SubmitButton `import { SubmitButton } from &#39;@dnb/eufemia/components/input/Input&#39;`.
+   * Replace the dropdown / submit button with a custom React element. Defaults to the input SubmitButton `import { SubmitButton } from &#39;@dnb/eufemia/components/input/Input&#39;`.
    */
   submit_element?: React.ReactNode;
 
@@ -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;
 
@@ -455,7 +455,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   search_numbers?: AutocompleteSearchNumbers;
 
   /**
-   * If you want to define only a startup value (integer) or have to handle a re-render without handling the state during the re-render by yourself, then using `default_value` is a good choice . Defaults to `null`.
+   * If you want to define only a startup value (integer) or have to handle a re-render without handling the state during the re-render by yourself, then using `default_value` is a good choice. Defaults to `null`.
    */
   default_value?: AutocompleteDefaultValue;
 
@@ -470,7 +470,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   input_value?: string;
 
   /**
-   * Use `true` to auto open the list once the users is entering the input field with the keyboard.
+   * Use `true` to auto open the list once the user is entering the input field with the keyboard.
    */
   open_on_focus?: AutocompleteOpenOnFocus;
 
@@ -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/esm/components/avatar/Avatar.js

@@ -0,0 +1,90 @@
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["alt", "className", "children", "size", "skeleton", "variant", "src", "imgProps"];
+import "core-js/modules/es.array.concat.js";
+
+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 { warn } from '../../shared/component-helper';
+import { usePropsWithContext } from '../../shared/hooks';
+import AvatarGroup, { AvatarGroupContext } from './AvatarGroup';
+export var defaultProps = {
+  alt: null,
+  className: null,
+  size: 'medium',
+  src: null,
+  imgProps: null,
+  variant: 'primary',
+  skeleton: false,
+  children: null
+};
+
+var Avatar = function Avatar(localProps) {
+  var context = React.useContext(Context);
+  var avatarGroupContext = React.useContext(AvatarGroupContext);
+
+  var _usePropsWithContext = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.Avatar, avatarGroupContext),
+      alt = _usePropsWithContext.alt,
+      className = _usePropsWithContext.className,
+      childrenProp = _usePropsWithContext.children,
+      size = _usePropsWithContext.size,
+      skeleton = _usePropsWithContext.skeleton,
+      variant = _usePropsWithContext.variant,
+      src = _usePropsWithContext.src,
+      imgProps = _usePropsWithContext.imgProps,
+      props = _objectWithoutProperties(_usePropsWithContext, _excluded);
+
+  var children = null;
+  var skeletonClasses = createSkeletonClass('shape', skeleton, context);
+  var spacingClasses = createSpacingClasses(props);
+  var childrenIsString = typeof childrenProp === 'string';
+
+  if (src || imgProps) {
+    var imageProps = _objectSpread({
+      src: src,
+      alt: alt
+    }, imgProps);
+
+    children = React.createElement(Img, imageProps);
+  } else if (childrenIsString) {
+    var 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--".concat(variant || 'primary', " dnb-avatar--size-").concat(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/esm/components/avatar/Avatar.tsx

@@ -0,0 +1,162 @@
+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

package/esm/components/avatar/AvatarGroup.js

@@ -0,0 +1,94 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _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 "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import React from 'react';
+import classnames from 'classnames';
+import { createSpacingClasses } from '../space/SpacingHelper';
+import Context from '../../shared/Context';
+import { usePropsWithContext } from '../../shared/hooks';
+export var defaultProps = {
+  label: null,
+  className: null,
+  maxElements: 4,
+  size: 'medium',
+  children: null,
+  variant: 'primary'
+};
+export var AvatarGroupContext = React.createContext(null);
+
+var AvatarGroup = function AvatarGroup(localProps) {
+  var context = React.useContext(Context);
+
+  var _usePropsWithContext = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.AvatarGroup),
+      label = _usePropsWithContext.label,
+      className = _usePropsWithContext.className,
+      childrenProp = _usePropsWithContext.children,
+      size = _usePropsWithContext.size,
+      maxElementsProp = _usePropsWithContext.maxElements,
+      variant = _usePropsWithContext.variant,
+      props = _objectWithoutProperties(_usePropsWithContext, _excluded);
+
+  var maxElements = maxElementsProp && maxElementsProp > 0 ? maxElementsProp : 4;
+  var children = childrenProp;
+  var numOfHiddenAvatars = 0;
+
+  if (Array.isArray(childrenProp)) {
+    var total = childrenProp.length;
+
+    if (total > maxElements) {
+      numOfHiddenAvatars = total - maxElements + 1;
+    }
+
+    children = childrenProp.slice(0, total - numOfHiddenAvatars).map(function (child, i) {
+      var appliedSize = child.props.size ? child.props.size : size;
+      var 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
+      });
+    });
+  }
+
+  var 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) {
+  var size = props.size,
+      children = props.children;
+  return React.createElement("span", {
+    className: "dnb-avatar__group--elements-left dnb-avatar__group--elements-left--size-".concat(size || 'medium'),
+    "data-testid": "elements-left"
+  }, children);
+}
+
+export default AvatarGroup;