@dnb/eufemia 10.0.0-beta.1 → 10.0.0-beta.2

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

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import type { SkeletonShow } from '../Skeleton';
+import type { SpacingProps } from '../space/types';
 export type IconPrimaryIcon =
   | string
   | React.ReactNode
@@ -9,52 +11,17 @@ export type IconPrimarySize =
   | 'default'
   | 'medium'
   | 'large';
-export type IconPrimarySpace =
-  | string
-  | number
-  | boolean
-  | {
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-       */
-      top?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-       */
-      right?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-       */
-      bottom?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-       */
-      left?: string | number | boolean;
-    };
-export type IconPrimaryTop = string | number | boolean;
-export type IconPrimaryRight = string | number | boolean;
-export type IconPrimaryBottom = string | number | boolean;
-export type IconPrimaryLeft = string | number | boolean;
 export type IconPrimaryWidth = string | number;
 export type IconPrimaryHeight = string | number;
-export type IconPrimaryBorder = string | boolean;
-export type IconPrimaryInheritColor = string | boolean;
-export type IconPrimarySkeleton = string | boolean;
 export type IconPrimaryAttributes =
   | string
   | React.AllHTMLAttributes<string>;
 export type IconPrimaryChildren =
   | React.ReactNode
   | ((...args: any[]) => any);
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface IconPrimaryProps
-  extends Omit<React.HTMLProps<HTMLElement>, 'size'> {
+  extends Omit<React.HTMLProps<HTMLElement>, 'size'>,
+    SpacingProps {
   /**
    * <em>(required)</em> a React SVG Component or the icon name (in case we use `IconPrimary` or `dnb-icon-primary`).
    */
@@ -69,38 +36,13 @@ export interface IconPrimaryProps
    * 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;
-
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: IconPrimarySpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: IconPrimaryTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: IconPrimaryRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: IconPrimaryBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: IconPrimaryLeft;
   width?: IconPrimaryWidth;
   height?: IconPrimaryHeight;
 
   /**
    * Use `true` to display a rounded border with an inherited color. Keep in mind that the icon will have a larger total width and height of `+0.5em`.
    */
-  border?: IconPrimaryBorder;
+  border?: boolean;
 
   /**
    * The color can be any valid color property, such as Hex, RGB or preferable – any CSS variable from the <a href="/uilib/usage/customisation/colors">colors table</a>, e.g. `var(--color-ocean-green)`. Default is no color, which means `--color-black-80`.
@@ -110,7 +52,7 @@ export interface IconPrimaryProps
   /**
    * Default to `true`. Set to `false` if you do not want to inherit the color by `currentColor`.
    */
-  inherit_color?: IconPrimaryInheritColor;
+  inherit_color?: boolean;
 
   /**
    * The alternative label (text version) of the icon. Defaults to the imported icon name.
@@ -125,7 +67,7 @@ export interface IconPrimaryProps
   /**
    * If set to `true`, an overlaying skeleton with animation will be shown.
    */
-  skeleton?: IconPrimarySkeleton;
+  skeleton?: SkeletonShow;
   attributes?: IconPrimaryAttributes;
   className?: string;
   children?: IconPrimaryChildren;

package/components/info-card/InfoCard.d.ts

@@ -2,8 +2,8 @@ import React from 'react';
 import { ButtonProps } from '../button/Button';
 import { IconPrimaryIcon } from '../icon-primary/IconPrimary';
 import { ImgProps } from '../../elements/Img';
-import { SkeletonShow } from '../skeleton/Skeleton';
-import { SpacingProps } from '../../shared/types';
+import type { SkeletonShow } from '../skeleton/Skeleton';
+import type { SpacingProps } from '../../shared/types';
 export interface InfoCardProps {
     /**
      * Used in combination with `src` to provide an alt attribute for the `img` element.

package/components/info-card/InfoCard.js

@@ -85,7 +85,7 @@ const InfoCard = localProps => {
       type: "button",
       className: "dnb-info-card__buttons__accept-button",
       variant: "secondary",
-      right: !centered && 'small',
+      right: centered ? 'zero' : 'small',
       on_click: onAccept,
       text: acceptButtonText
     }, acceptButtonAttributes)), !closeButtonIsHidden && React.createElement(Button, _extends({

package/components/input/Input.d.ts

@@ -1,91 +1,36 @@
 import * as React from 'react';
+import type { ButtonIconPosition, ButtonVariant } from '../button';
+import type {
+  FormStatusProps,
+  FormStatusState,
+  FormStatusText
+} from '../FormStatus';
+import type { FormLabelLabelDirection, FormLabelText } from '../FormLabel';
+import type { IconPrimaryIcon, IconPrimarySize } from '../IconPrimary';
+import type { SkeletonShow } from '../Skeleton';
+import type { SpacingProps } from '../space/types';
 export type InputSize = 'default' | 'small' | 'medium' | 'large' | number;
 export type InputValue = string | number;
-export type InputLabel =
-  | string
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type InputLabelDirection = 'horizontal' | 'vertical';
-export type InputLabelSrOnly = string | boolean;
-export type InputStatus =
-  | string
-  | boolean
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type InputStatusNoAnimation = string | boolean;
-export type InputClear = string | boolean;
-export type InputKeepPlaceholder = string | boolean;
 export type InputSuffix =
   | string
   | ((...args: any[]) => any)
   | React.ReactNode;
 export type InputAlign = 'left' | 'center' | 'right';
-export type InputSelectall = string | boolean;
-export type InputStretch = string | boolean;
-export type InputDisabled = string | boolean;
-export type InputSkeleton = string | boolean;
 export type InputInputAttributes = string | Record<string, unknown>;
 export type InputInputElement =
   | ((...args: any[]) => any)
   | React.ReactNode;
-export type InputIcon =
-  | string
-  | React.ReactNode
-  | ((...args: any[]) => any);
-export type InputIconSize = string | number;
-export type InputIconPosition = 'left' | 'right';
-export type InputInnerRef =
-  | ((...args: any[]) => any)
-  | Record<string, unknown>;
-export type InputReadOnly = string | boolean;
 export type InputSubmitElement =
   | ((...args: any[]) => any)
   | React.ReactNode;
-export type InputSubmitButtonVariant =
-  | 'primary'
-  | 'secondary'
-  | 'tertiary'
-  | 'signal'
-  | 'unstyled';
 export type InputSubmitButtonIcon =
   | string
   | React.ReactNode
   | ((...args: any[]) => any);
-export type InputSpace =
-  | string
-  | number
-  | boolean
-  | {
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-       */
-      top?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-       */
-      right?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-       */
-      bottom?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-       */
-      left?: string | number | boolean;
-    };
-export type InputTop = string | number | boolean;
-export type InputRight = string | number | boolean;
-export type InputBottom = string | number | boolean;
-export type InputLeft = string | number | boolean;
 export type InputChildren = React.ReactNode | ((...args: any[]) => any);
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
-export interface InputProps extends React.HTMLProps<HTMLElement> {
+export interface InputProps
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   /**
    * Choose between `text`, `number`, `email`, `password`, `url`, `tel` and `search`.
    */
@@ -105,33 +50,33 @@ export interface InputProps extends React.HTMLProps<HTMLElement> {
   /**
    * Prepends the Form Label component. If no ID is provided, a random ID is created.
    */
-  label?: InputLabel;
+  label?: FormLabelText;
 
   /**
    * Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`
    */
-  label_direction?: InputLabelDirection;
+  label_direction?: FormLabelLabelDirection;
 
   /**
    * Use `true` to make the label only readable by screen readers.
    */
-  label_sr_only?: InputLabelSrOnly;
+  label_sr_only?: boolean;
 
   /**
    * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.
    */
-  status?: InputStatus;
+  status?: FormStatusText;
 
   /**
    * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
-  status_state?: string;
+  status_state?: FormStatusState;
 
   /**
    * Use an object to define additional FormStatus properties.
    */
-  status_props?: Record<string, unknown>;
-  status_no_animation?: InputStatusNoAnimation;
+  status_props?: FormStatusProps;
+  status_no_animation?: boolean;
 
   /**
    * Defines a custom visual state of the input. Use it only if you have to simulate a custom state. Currently are three statuses `virgin` , `focus` and `dirty`. Defaults to `null`.
@@ -162,12 +107,12 @@ export interface InputProps extends React.HTMLProps<HTMLElement> {
   /**
    * If set to `true`, then a clear button will be shown which lets the user clear any given input value.
    */
-  clear?: InputClear;
+  clear?: boolean;
 
   /**
    * Set to `true` in case the `placeholder` has to be kept during focus. By default, the placeholder disappears on focus.
    */
-  keep_placeholder?: InputKeepPlaceholder;
+  keep_placeholder?: boolean;
 
   /**
    * Text describing the content of the input more than the label. You can also send in a React component, so it gets wrapped inside the Input component.
@@ -182,18 +127,18 @@ export interface InputProps extends React.HTMLProps<HTMLElement> {
   /**
    * If set to `true`, then the whole input value gets selected on the entry focus. A second click will place the cursor on the wanted position.
    */
-  selectall?: InputSelectall;
+  selectall?: boolean;
 
   /**
    * If set to `true`, then the input field will be 100% in `width`.
    */
-  stretch?: InputStretch;
-  disabled?: InputDisabled;
+  stretch?: boolean;
+  disabled?: boolean;
 
   /**
    * If set to `true`, an overlaying skeleton with animation will be shown.
    */
-  skeleton?: InputSkeleton;
+  skeleton?: SkeletonShow;
   class?: string;
 
   /**
@@ -214,23 +159,23 @@ export interface InputProps extends React.HTMLProps<HTMLElement> {
   /**
    * Icon to show before or after the input / placeholder. Can be either a string defining a primary icon or a Component using an SVG icon of either 16px or 24px.
    */
-  icon?: InputIcon;
+  icon?: IconPrimaryIcon;
 
   /**
    * The icon size of the icon shows. Defaults to `medium`.
    */
-  icon_size?: InputIconSize;
+  icon_size?: IconPrimarySize;
 
   /**
    * Defines the position of icon inside the input. Set to `left` or `right`. Defaults to `left` if not set.
    */
-  icon_position?: InputIconPosition;
+  icon_position?: ButtonIconPosition;
 
   /**
    * By providing a React.ref we can get the internally used input element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.
    */
-  inner_ref?: InputInnerRef;
-  readOnly?: InputReadOnly;
+  inner_ref?: any;
+  readOnly?: boolean;
 
   /**
    * <em>(internal)</em> by providing a new component to be rendered inside the "shell" – we can add a freely customizable internal element. Used by the Autocomplete component.
@@ -241,61 +186,94 @@ export interface InputProps extends React.HTMLProps<HTMLElement> {
    * Accepts a React element which will show up like the "submit button" would do on `type="search"`.
    */
   submit_element?: InputSubmitElement;
-  submit_button_variant?: InputSubmitButtonVariant;
+  submit_button_variant?: ButtonVariant;
   submit_button_icon?: InputSubmitButtonIcon;
   submit_button_status?: string;
+  className?: string;
+  children?: InputChildren;
 
   /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
+   * Will be called on value changes made by the user. Returns an object with the value as a string and the native event: `{ value, event }`.
    */
-  space?: InputSpace;
+  on_change?: (...args: any[]) => any;
 
   /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+   * Will be called on key down by the user. Returns `{ value, event }`.
    */
-  top?: InputTop;
+  on_key_down?: (...args: any[]) => any;
 
   /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+   * Will be called on submit button click. Returns `{ value, event }`.
    */
-  right?: InputRight;
+  on_submit?: (...args: any[]) => any;
 
   /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+   * Will be called on focus set by the user. Returns `{ value, event }`.
    */
-  bottom?: InputBottom;
+  on_focus?: (...args: any[]) => any;
 
   /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+   * Will be called on blur set by the user. Returns `{ value, event }`.
    */
-  left?: InputLeft;
-  className?: string;
-  children?: InputChildren;
+  on_blur?: (...args: any[]) => any;
+  on_submit_focus?: (...args: any[]) => any;
+  on_submit_blur?: (...args: any[]) => any;
+  on_state_update?: (...args: any[]) => any;
+}
+export default class Input extends React.Component<InputProps, any> {
+  static defaultProps: object;
+  render(): JSX.Element;
+}
+export interface SubmitButtonProps extends React.HTMLProps<HTMLElement> {
+  id?: string;
 
   /**
-   * Will be called on value changes made by the user. Returns an object with the value as a string and the native event: `{ value, event }`.
+   * The content value of the input.
    */
-  on_change?: (...args: any[]) => any;
+  value?: string;
+  title?: string;
+  variant?: ButtonVariant;
+  disabled?: boolean;
 
   /**
-   * Will be called on submit button click. Returns `{ value, event }`.
+   * If set to `true`, an overlaying skeleton with animation will be shown.
    */
-  on_submit?: (...args: any[]) => any;
+  skeleton?: SkeletonShow;
 
   /**
-   * Will be called on focus set by the user. Returns `{ value, event }`.
+   * Icon to show before or after the input / placeholder. Can be either a string defining a primary icon or a Component using an SVG icon of either 16px or 24px.
    */
-  on_focus?: (...args: any[]) => any;
+  icon?: IconPrimaryIcon;
 
   /**
-   * Will be called on blur set by the user. Returns `{ value, event }`.
+   * The icon size of the icon shows. Defaults to `medium`.
    */
-  on_blur?: (...args: any[]) => any;
+  icon_size?: IconPrimarySize;
+
+  /**
+   * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.
+   */
+  status?: FormStatusText;
+
+  /**
+   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
+   */
+  status_state?: FormStatusState;
+
+  /**
+   * Use an object to define additional FormStatus properties.
+   */
+  status_props?: FormStatusProps;
+  className?: string;
+
+  /**
+   * Will be called on submit button click. Returns `{ value, event }`.
+   */
+  on_submit?: (...args: any[]) => any;
   on_submit_focus?: (...args: any[]) => any;
   on_submit_blur?: (...args: any[]) => any;
-  on_state_update?: (...args: any[]) => any;
 }
-export default class Input extends React.Component<InputProps, any> {
+export class SubmitButton extends React.Component<SubmitButtonProps, any> {
   static defaultProps: object;
   render(): JSX.Element;
 }

package/components/input/Input.js

@@ -69,6 +69,7 @@ export const inputPropTypes = _objectSpread(_objectSpread({
   className: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   on_change: PropTypes.func,
+  on_key_down: PropTypes.func,
   on_submit: PropTypes.func,
   on_focus: PropTypes.func,
   on_blur: PropTypes.func,
@@ -474,6 +475,7 @@ _defineProperty(Input, "defaultProps", {
   className: null,
   children: null,
   on_change: null,
+  on_key_down: null,
   on_submit: null,
   on_focus: null,
   on_blur: null,

package/components/input/InputPassword.d.ts

@@ -1,9 +1,5 @@
 import * as React from 'react';
 import { InputProps } from './Input';
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface InputPasswordProps
   extends React.HTMLProps<HTMLElement>,
     InputProps {