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

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

@@ -1,7 +1,15 @@
 import * as React from 'react';
-import { SkeletonShow } from '../skeleton/Skeleton';
-import { IconPrimaryIcon } from '../icon-primary/IconPrimary';
-import { DataAttributeTypes } from '../../shared/types';
+import type { SkeletonShow } from '../skeleton/Skeleton';
+import type {
+  IconPrimaryIcon,
+  IconPrimarySize
+} from '../icon-primary/IconPrimary';
+import type { DataAttributeTypes, SpacingProps } from '../../shared/types';
+import {
+  FormStatusProps,
+  FormStatusState,
+  FormStatusText
+} from '../FormStatus';
 export type ButtonText = string | React.ReactNode;
 export type ButtonVariant =
   | 'primary'
@@ -10,25 +18,18 @@ export type ButtonVariant =
   | 'signal'
   | 'unstyled';
 export type ButtonSize = 'default' | 'small' | 'medium' | 'large';
-export type ButtonIcon = IconPrimaryIcon;
-export type ButtonIconPosition = 'left' | 'right' | 'top';
-export type ButtonIconSize = string | number;
+export type ButtonIconPositionTertiary = 'top';
+export type ButtonIconPosition = 'left' | 'right';
+export type ButtonIconPositionAll =
+  | 'left'
+  | 'right'
+  | ButtonIconPositionTertiary;
 export type ButtonTooltip =
   | string
   | ((...args: any[]) => any)
   | React.ReactNode;
-export type ButtonStatus =
-  | string
-  | boolean
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type ButtonStatusNoAnimation = string | boolean;
 export type ButtonTo = string | any | ((...args: any[]) => any);
-export type ButtonWrap = string | boolean;
-export type ButtonBounding = string | boolean;
-export type ButtonStretch = string | boolean;
 export type ButtonSkeleton = SkeletonShow;
-export type ButtonDisabled = string | boolean;
 export type ButtonChildren =
   | string
   | ((...args: any[]) => any)
@@ -37,40 +38,7 @@ export type ButtonElement =
   | ((...args: any[]) => any)
   | any
   | React.ReactNode;
-export type ButtonSpace =
-  | 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 ButtonTop = string | number | boolean;
-export type ButtonRight = string | number | boolean;
-export type ButtonBottom = string | number | boolean;
-export type ButtonLeft = string | number | boolean;
 export type ButtonOnClick = string | ((...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 type ButtonProps = {
   /**
    * The content of the button can be a string or a React Element.
@@ -100,17 +68,17 @@ export type ButtonProps = {
   /**
    * To be included in the button. <a href="/icons/primary">Primary Icons</a> can be set as a string (e.g. `icon="chevron_right"`), other icons should be set as React elements.
    */
-  icon?: ButtonIcon;
+  icon?: IconPrimaryIcon;
 
   /**
    * Position of icon inside the button. Set to `left` or `right`. Tertiary button variant also supports `top`. Defaults to `right` if not set.
    */
-  icon_position?: ButtonIconPosition;
+  icon_position?: ButtonIconPositionAll;
 
   /**
    * Define icon width and height. Defaults to 16px
    */
-  icon_size?: ButtonIconSize;
+  icon_size?: IconPrimarySize;
 
   /**
    * Provide a string or a React Element to be shown as the tooltip content.
@@ -120,18 +88,18 @@ export type ButtonProps = {
   /**
    * Set it to either `status="error"` or a 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?: ButtonStatus;
+  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?: any;
-  status_no_animation?: ButtonStatusNoAnimation;
+  status_props?: FormStatusProps;
+  status_no_animation?: boolean;
 
   /**
    * The `status_id` used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
@@ -172,23 +140,23 @@ export type ButtonProps = {
   /**
    * If set to `true` the button text will wrap in to new lines if the overflow point is reached. Defaults to `false`.
    */
-  wrap?: ButtonWrap;
+  wrap?: boolean;
 
   /**
    * Set it to `true` in order to extend the bounding box (above the visual button background). You may also look into the HTML class `dnb-button__bounding` if it needs some CSS customization in order to get the particular button right for your use-case.
    */
-  bounding?: ButtonBounding;
+  bounding?: boolean;
 
   /**
    * Set it to `true` in order to stretch the button to the available space. Defaults to false.
    */
-  stretch?: ButtonStretch;
+  stretch?: boolean;
 
   /**
    * If set to `true`, an overlaying skeleton with animation will be shown.
    */
   skeleton?: ButtonSkeleton;
-  disabled?: ButtonDisabled;
+  disabled?: boolean;
   inner_ref?: any;
   className?: string;
   innerRef?: any;
@@ -203,31 +171,6 @@ export type ButtonProps = {
    */
   element?: ButtonElement;
 
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: ButtonSpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: ButtonTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: ButtonRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: ButtonBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: ButtonLeft;
-
   /**
    * Will be called on a click event. Returns an object with the native event: `{ event }`.
    */
@@ -235,7 +178,8 @@ export type ButtonProps = {
 } & Partial<
   DataAttributeTypes &
     Partial<React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>>
->;
+> &
+  SpacingProps;
 export default class Button extends React.Component<ButtonProps, any> {
   render(): JSX.Element;
 }