@dnb/eufemia 9.17.0 → 9.19.0

package/cjs/components/date-picker/DatePickerFooter.js

@@ -138,20 +138,22 @@ var DatePickerFooter = function (_React$PureComponent) {
   _createClass(DatePickerFooter, [{
     key: "render",
     value: function render() {
-      var isRange = this.props.isRange;
+      var _this$props = this.props,
+          isRange = _this$props.isRange,
+          resetButtonText = _this$props.resetButtonText;
       var _this$context$props = this.context.props,
           show_reset_button = _this$context$props.show_reset_button,
           show_cancel_button = _this$context$props.show_cancel_button,
           show_submit_button = _this$context$props.show_submit_button;
 
-      if (!isRange && !(0, _componentHelper.isTrue)(show_submit_button) && !(0, _componentHelper.isTrue)(show_cancel_button)) {
+      if (!isRange && !(0, _componentHelper.isTrue)(show_submit_button) && !(0, _componentHelper.isTrue)(show_cancel_button) && !(0, _componentHelper.isTrue)(show_reset_button)) {
         return _react.default.createElement(_react.default.Fragment, null);
       }
 
       var _this$context$transla = this.context.translation.DatePicker,
           submit_button_text = _this$context$transla.submit_button_text,
           cancel_button_text = _this$context$transla.cancel_button_text,
-          reset_button_text = _this$context$transla.reset_button_text;
+          reset_button_text_translation = _this$context$transla.reset_button_text;
       return _react.default.createElement("div", {
         className: "dnb-date-picker__footer"
       }, (isRange || (0, _componentHelper.isTrue)(show_submit_button)) && _react.default.createElement(_Button.default, {
@@ -159,7 +161,7 @@ var DatePickerFooter = function (_React$PureComponent) {
         onClick: this.onSubmitHandler,
         "data-visual-test": "submit"
       }) || _span || (_span = _react.default.createElement("span", null)), _react.default.createElement("span", null, (0, _componentHelper.isTrue)(show_reset_button) && _react.default.createElement(_Button.default, {
-        text: reset_button_text,
+        text: resetButtonText || reset_button_text_translation,
         icon: "reset",
         icon_position: "left",
         variant: "tertiary",
@@ -186,12 +188,14 @@ _defineProperty(DatePickerFooter, "contextType", _DatePickerContext.default);
 _defineProperty(DatePickerFooter, "defaultProps", {
   onSubmit: null,
   onCancel: null,
-  onReset: null
+  onReset: null,
+  resetButtonText: null
 });
 
 process.env.NODE_ENV !== "production" ? DatePickerFooter.propTypes = {
   isRange: _propTypes.default.bool.isRequired,
   onSubmit: _propTypes.default.func,
   onCancel: _propTypes.default.func,
-  onReset: _propTypes.default.func
+  onReset: _propTypes.default.func,
+  resetButtonText: _propTypes.default.string
 } : void 0;

package/cjs/components/date-picker/DatePickerInput.d.ts

@@ -29,7 +29,7 @@ export interface DatePickerInputProps
   status?: DatePickerInputStatus;
 
   /**
-   * 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;
 

package/cjs/components/dropdown/Dropdown.d.ts

@@ -51,7 +51,8 @@ export type DropdownVariant =
   | 'primary'
   | 'secondary'
   | 'tertiary'
-  | 'signal';
+  | 'signal'
+  | 'unstyled';
 export type DropdownIcon =
   | string
   | React.ReactNode
@@ -200,12 +201,12 @@ export interface DropdownProps extends React.HTMLProps<HTMLElement> {
   id?: string;
 
   /**
-   * Give a title to let the user know what they has to do. Defaults to `Valgmeny` .
+   * Give a title to let the users know what they have to do. Defaults to `Valgmeny`.
    */
   title?: DropdownTitle;
 
   /**
-   * Defines the kind of dropdown. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `secondary` .
+   * Defines the kind of dropdown. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `secondary`.
    */
   variant?: DropdownVariant;
 
@@ -220,7 +221,7 @@ export interface DropdownProps extends React.HTMLProps<HTMLElement> {
   icon_size?: string;
 
   /**
-   * Position of icon inside the dropdown. Set to `left` or `right`. Defaults to `right`.
+   * Position of the icon inside the dropdown. Set to `left` or `right`. Defaults to `right`.
    */
   icon_position?: DropdownIconPosition;
 
@@ -250,7 +251,7 @@ export interface DropdownProps extends React.HTMLProps<HTMLElement> {
   status?: DropdownStatus;
 
   /**
-   * 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;
 
@@ -346,12 +347,12 @@ export interface DropdownProps extends React.HTMLProps<HTMLElement> {
   trigger_element?: DropdownTriggerElement;
 
   /**
-   * 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?: DropdownData;
 
   /**
-   * 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?: DropdownDefaultValue;
 
@@ -361,7 +362,7 @@ export interface DropdownProps extends React.HTMLProps<HTMLElement> {
   value?: DropdownValue;
 
   /**
-   * If set to `true`, the Dropdown will be opened when the users enters the trigger button with a focus action.
+   * If set to `true`, the Dropdown will be opened when the users enter the trigger button with a focus action.
    */
   open_on_focus?: DropdownOpenOnFocus;
 
@@ -394,7 +395,7 @@ export interface DropdownProps 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?: DropdownChildren;
   custom_element?: Object;
@@ -416,7 +417,7 @@ export interface DropdownProps extends React.HTMLProps<HTMLElement> {
   on_change?: (...args: any[]) => any;
 
   /**
-   * Will be called once the users selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, selected_key, value, active_item }`. The "active_item" property is the currently selected item by keyboard navigation
+   * Will be called once the user selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, selected_key, value, active_item }`. The "active_item" property is the currently selected item by keyboard navigation
    */
   on_select?: (...args: any[]) => any;
   on_state_update?: (...args: any[]) => any;

package/cjs/components/form-label/FormLabel.d.ts

@@ -47,7 +47,7 @@ export type FormLabelChildren =
  */
 export interface FormLabelProps extends React.HTMLProps<HTMLElement> {
   /**
-   * The `id` of the input.
+   * <em>(required)</em> the `id` of the input.
    */
   for_id?: string;
 

package/cjs/components/form-row/FormRow.d.ts

@@ -57,7 +57,7 @@ export interface FormRowProps extends React.HTMLProps<HTMLElement> {
   id?: string;
 
   /**
-   * Use either the `label` property or provide custom one.
+   * Use either the `label` property or provide a custom one.
    */
   label?: FormRowLabel;
 
@@ -73,7 +73,7 @@ export interface FormRowProps extends React.HTMLProps<HTMLElement> {
   label_id?: string;
 
   /**
-   * If You need to style the "legend", then You can either send in a custom Component, like `label={ <H2> }`, or define Your styling class with the `label_class` property.
+   * If you need to style the "legend", then you can either send in a custom Component, like `label={ <H2> }`, or define Your styling class with the `label_class` property.
    */
   label_class?: string;
   no_label?: FormRowNoLabel;
@@ -94,7 +94,7 @@ export interface FormRowProps extends React.HTMLProps<HTMLElement> {
   indent?: FormRowIndent;
 
   /**
-   * Forces the content of a FormRow to wrap. Make sure You always define spacing as `right="..."` and not `left`, this way components will align left once they wrap. Defaults to `false`.
+   * Forces the content of a FormRow to wrap. Make sure you always define spacing as `right="..."` and not `left`, this way components will align left once they wrap. Defaults to `false`.
    */
   wrap?: FormRowWrap;
 
@@ -109,7 +109,7 @@ export interface FormRowProps extends React.HTMLProps<HTMLElement> {
   vertical?: FormRowVertical;
 
   /**
-   * Will center all children vertically as long as the screen not hits a mobile width.
+   * Will center all children vertically as long as the screen does not hit a mobile width.
    */
   centered?: FormRowCentered;
 

package/cjs/components/form-set/FormSet.d.ts

@@ -83,7 +83,7 @@ export interface FormSetProps extends React.HTMLProps<HTMLElement> {
   id?: string;
 
   /**
-   * Use either the `label` property or provide custom one.
+   * Use either the `label` property or provide a custom one.
    */
   label?: FormSetLabel;
 
@@ -99,7 +99,7 @@ export interface FormSetProps extends React.HTMLProps<HTMLElement> {
   label_id?: string;
 
   /**
-   * If You need to style the "legend", then You can either send in a custom Component, like `label={ <H2> }`, or define Your styling class with the `label_class` property.
+   * If you need to style the "legend", then you can either send in a custom Component, like `label={ <H2> }`, or define Your styling class with the `label_class` property.
    */
   label_class?: string;
   no_label?: FormSetNoLabel;
@@ -120,7 +120,7 @@ export interface FormSetProps extends React.HTMLProps<HTMLElement> {
   indent?: FormSetIndent;
 
   /**
-   * Forces the content of a FormRow to wrap. Make sure You always define spacing as `right="..."` and not `left`, this way components will align left once they wrap. Defaults to `false`.
+   * Forces the content of a FormRow to wrap. Make sure you always define spacing as `right="..."` and not `left`, this way components will align left once they wrap. Defaults to `false`.
    */
   wrap?: FormSetWrap;
 
@@ -135,7 +135,7 @@ export interface FormSetProps extends React.HTMLProps<HTMLElement> {
   vertical?: FormSetVertical;
 
   /**
-   * Will center all children vertically as long as the screen not hits a mobile width.
+   * Will center all children vertically as long as the screen does not hit a mobile width.
    */
   centered?: FormSetCentered;
 
@@ -190,7 +190,7 @@ export interface FormSetProps extends React.HTMLProps<HTMLElement> {
   children?: FormSetChildren;
 
   /**
-   * Will be called on submit. Returns an object with the a native event: `{ event }`
+   * Will be called on submit. Returns an object with a native event: `{ event }`
    */
   on_submit?: (...args: any[]) => any;
   custom_element?: Object;

package/cjs/components/global-error/GlobalError.d.ts

@@ -27,7 +27,7 @@ export type GlobalErrorChildren =
  */
 export interface GlobalErrorProps extends React.HTMLProps<HTMLElement> {
   /**
-   * Status code define the view showing up.
+   * Status code defines the view showing up.
    */
   status?: string;
 

package/cjs/components/global-status/GlobalStatus.d.ts

@@ -70,17 +70,17 @@ export interface GlobalStatusProps extends React.HTMLProps<HTMLElement> {
   default_title?: string;
 
   /**
-   * The text appears as the status content. Beside plain text, You can send in a React component as well. Defaults to `null`.
+   * The text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`.
    */
   text?: GlobalStatusText;
 
   /**
-   * The items (list items) appears as a part of the status content. You can both use an JSON array, or a vanilla array with a string or an object content. Se "Item Object" example below.
+   * The items (list items) appear as a part of the status content. you can both use an JSON array, or a vanilla array with a string or an object content. Se "Item Object" example below.
    */
   items?: GlobalStatusItems;
 
   /**
-   * The icon show before the status title. Defaults to `exclamation`.
+   * The icon shown before the status title. Defaults to `exclamation`.
    */
   icon?: GlobalStatusIcon;
 
@@ -115,7 +115,7 @@ export interface GlobalStatusProps extends React.HTMLProps<HTMLElement> {
   no_animation?: GlobalStatusNoAnimation;
 
   /**
-   * Defines the delay on how long the automated visibility should wait, before it appears to the user. Defaults to `200ms`.
+   * Defines the delay on how long the automated visibility should wait before it appears to the user. Defaults to `200ms`.
    */
   delay?: GlobalStatusDelay;
 
@@ -169,7 +169,7 @@ export interface GlobalStatusProps extends React.HTMLProps<HTMLElement> {
   className?: string;
 
   /**
-   * The text appears as the status content. Beside plain text, You can send in a React component as well. Defaults to `null`.
+   * The text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`.
    */
   children?: GlobalStatusChildren;
 

package/cjs/components/heading/Heading.d.ts

@@ -58,7 +58,7 @@ export interface HeadingProps extends React.HTMLProps<HTMLElement> {
   group?: string;
 
   /**
-   * A heading, can be text or a another component.
+   * <em>(required)</em> a heading, can be text or React.Node.
    */
   text?: HeadingText;
 
@@ -144,7 +144,7 @@ export interface HeadingProps extends React.HTMLProps<HTMLElement> {
   className?: string;
 
   /**
-   * A heading, can be text or a another component.
+   * <em>(required)</em> a heading, can be text or React.Node.
    */
   children?: HeadingChildren;
 }

package/cjs/components/heading/HeadingProvider.d.ts

@@ -40,12 +40,12 @@ export interface HeadingProviderProps
   reset?: HeadingProviderReset;
 
   /**
-   * A heading, can be text or a another component.
+   * <em>(required)</em> a heading, can be text or React.Node.
    */
   text?: any;
 
   /**
-   * A heading, can be text or a another component.
+   * <em>(required)</em> a heading, can be text or React.Node.
    */
   children?: any;
 }

package/cjs/components/help-button/HelpButton.d.ts

@@ -82,7 +82,7 @@ export interface HelpButtonProps extends React.HTMLProps<HTMLElement> {
   title?: React.ReactNode;
 
   /**
-   * Defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`.
+   * Defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `primary`.
    */
   variant?: any;
 

package/cjs/components/help-button/HelpButtonInstance.d.ts

@@ -3,7 +3,8 @@ export type HelpButtonInstanceVariant =
   | 'primary'
   | 'secondary'
   | 'tertiary'
-  | 'signal';
+  | 'signal'
+  | 'unstyled';
 export type HelpButtonInstanceIcon =
   | string
   | React.ReactNode
@@ -47,7 +48,7 @@ export interface HelpButtonInstanceProps
   id?: string;
 
   /**
-   * Defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`.
+   * Defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `primary`.
    */
   variant?: HelpButtonInstanceVariant;
 

package/cjs/components/icon/Icon.d.ts

@@ -46,7 +46,7 @@ export type IconChildren = React.ReactNode | ((...args: any[]) => any);
  */
 export interface IconProps extends React.HTMLProps<HTMLElement> {
   /**
-   * A React SVG Component or the icon name (in case we use `IconPrimary` or `dnb-icon-primary`).
+   * <em>(required)</em> a React SVG Component or the icon name (in case we use `IconPrimary` or `dnb-icon-primary`).
    */
   icon?: IconIcon;
 
@@ -56,7 +56,7 @@ export interface IconProps extends React.HTMLProps<HTMLElement> {
   modifier?: string;
 
   /**
-   * The dimension of the icon. This will be the `viewBox` and represent `width` and `height`. Defaults to `16`. You can use `small`,`medium`, `large` or `auto`. Auto will enable that the icon size gets inherited by the mother HTML element, if it provides a `font-size`.
+   * The dimension of the icon. This will be the `viewBox` and represent `width` and `height`. Defaults to `16`. You can use `small`,`medium`, `large` or `auto`. Auto will enable that the icon size gets inherited by the parent HTML element if it provides a `font-size`.
    */
   size?: IconSize;
 

package/cjs/components/icon-primary/IconPrimary.d.ts

@@ -55,7 +55,7 @@ export type IconPrimaryChildren =
 
 export interface IconPrimaryProps extends React.HTMLProps<HTMLElement> {
   /**
-   * A React SVG Component or the icon name (in case we use `IconPrimary` or `dnb-icon-primary`).
+   * <em>(required)</em> a React SVG Component or the icon name (in case we use `IconPrimary` or `dnb-icon-primary`).
    */
   icon?: IconPrimaryIcon;
 
@@ -65,7 +65,7 @@ export interface IconPrimaryProps extends React.HTMLProps<HTMLElement> {
   modifier?: string;
 
   /**
-   * The dimension of the icon. This will be the `viewBox` and represent `width` and `height`. Defaults to `16`. You can use `small`,`medium`, `large` or `auto`. Auto will enable that the icon size gets inherited by the mother HTML element, if it provides a `font-size`.
+   * The dimension of the icon. This will be the `viewBox` and represent `width` and `height`. Defaults to `16`. You can use `small`,`medium`, `large` or `auto`. Auto will enable that the icon size gets inherited by the parent HTML element if it provides a `font-size`.
    */
   size?: IconPrimarySize;
 

package/cjs/components/index.d.ts

@@ -12,6 +12,7 @@
 // import all the available components
 import Accordion from './accordion/Accordion'
 import Autocomplete from './autocomplete/Autocomplete'
+import Avatar from './avatar/Avatar'
 import Breadcrumb from './breadcrumb/Breadcrumb'
 import Button from './button/Button'
 import Checkbox from './checkbox/Checkbox'
@@ -27,6 +28,7 @@ import Heading from './heading/Heading'
 import HelpButton from './help-button/HelpButton'
 import Icon from './icon/Icon'
 import IconPrimary from './icon-primary/IconPrimary'
+import InfoCard from './info-card/InfoCard'
 import Input from './input/Input'
 import InputMasked from './input-masked/InputMasked'
 import Logo from './logo/Logo'
@@ -42,7 +44,9 @@ import Space from './space/Space'
 import StepIndicator from './step-indicator/StepIndicator'
 import Switch from './switch/Switch'
 import Tabs from './tabs/Tabs'
+import Tag from './tag/Tag'
 import Textarea from './textarea/Textarea'
+import Timeline from './timeline/Timeline'
 import ToggleButton from './toggle-button/ToggleButton'
 import Tooltip from './tooltip/Tooltip'
 
@@ -50,6 +54,7 @@ import Tooltip from './tooltip/Tooltip'
 export {
   Accordion,
   Autocomplete,
+  Avatar,
   Breadcrumb,
   Button,
   Checkbox,
@@ -65,6 +70,7 @@ export {
   HelpButton,
   Icon,
   IconPrimary,
+  InfoCard,
   Input,
   InputMasked,
   Logo,
@@ -80,7 +86,9 @@ export {
   StepIndicator,
   Switch,
   Tabs,
+  Tag,
   Textarea,
+  Timeline,
   ToggleButton,
   Tooltip,
 }

package/cjs/components/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "Autocomplete", {
     return _Autocomplete.default;
   }
 });
+Object.defineProperty(exports, "Avatar", {
+  enumerable: true,
+  get: function get() {
+    return _Avatar.default;
+  }
+});
 Object.defineProperty(exports, "Breadcrumb", {
   enumerable: true,
   get: function get() {
@@ -105,6 +111,12 @@ Object.defineProperty(exports, "IconPrimary", {
     return _IconPrimary.default;
   }
 });
+Object.defineProperty(exports, "InfoCard", {
+  enumerable: true,
+  get: function get() {
+    return _InfoCard.default;
+  }
+});
 Object.defineProperty(exports, "Input", {
   enumerable: true,
   get: function get() {
@@ -195,12 +207,24 @@ Object.defineProperty(exports, "Tabs", {
     return _Tabs.default;
   }
 });
+Object.defineProperty(exports, "Tag", {
+  enumerable: true,
+  get: function get() {
+    return _Tag.default;
+  }
+});
 Object.defineProperty(exports, "Textarea", {
   enumerable: true,
   get: function get() {
     return _Textarea.default;
   }
 });
+Object.defineProperty(exports, "Timeline", {
+  enumerable: true,
+  get: function get() {
+    return _Timeline.default;
+  }
+});
 Object.defineProperty(exports, "ToggleButton", {
   enumerable: true,
   get: function get() {
@@ -218,6 +242,8 @@ var _Accordion = _interopRequireDefault(require("./accordion/Accordion"));
 
 var _Autocomplete = _interopRequireDefault(require("./autocomplete/Autocomplete"));
 
+var _Avatar = _interopRequireDefault(require("./avatar/Avatar"));
+
 var _Breadcrumb = _interopRequireDefault(require("./breadcrumb/Breadcrumb"));
 
 var _Button = _interopRequireDefault(require("./button/Button"));
@@ -248,6 +274,8 @@ var _Icon = _interopRequireDefault(require("./icon/Icon"));
 
 var _IconPrimary = _interopRequireDefault(require("./icon-primary/IconPrimary"));
 
+var _InfoCard = _interopRequireDefault(require("./info-card/InfoCard"));
+
 var _Input = _interopRequireDefault(require("./input/Input"));
 
 var _InputMasked = _interopRequireDefault(require("./input-masked/InputMasked"));
@@ -278,8 +306,12 @@ var _Switch = _interopRequireDefault(require("./switch/Switch"));
 
 var _Tabs = _interopRequireDefault(require("./tabs/Tabs"));
 
+var _Tag = _interopRequireDefault(require("./tag/Tag"));
+
 var _Textarea = _interopRequireDefault(require("./textarea/Textarea"));
 
+var _Timeline = _interopRequireDefault(require("./timeline/Timeline"));
+
 var _ToggleButton = _interopRequireDefault(require("./toggle-button/ToggleButton"));
 
 var _Tooltip = _interopRequireDefault(require("./tooltip/Tooltip"));