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

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

@@ -1,32 +1,102 @@
-export default class HelpButtonInstance extends React.PureComponent<any, any, any> {
-    static contextType: React.Context<{
-        translation: any;
-        updateTranslation: (locale: any, translation: any) => void;
-        getTranslation: (props: any) => any;
-        locales: any;
-        Avatar: {};
-        AvatarGroup: {};
-        Breadcrumb: {};
-        BreadcrumbItem: {};
-        InfoCard: {};
-        Tag: {};
-        TagGroup: {};
-        Timeline: {};
-        TimelineItem: {};
-        VisuallyHidden: {};
-        Drawer: {};
-        Dialog: {};
-    }>;
-    static propTypes: any;
-    static defaultProps: {
-        id: any;
-        variant: string;
-        icon: any;
-        icon_position: string;
-        className: any;
-        class: any;
+import * as React from 'react';
+export type HelpButtonInstanceVariant =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'signal'
+  | 'unstyled';
+export type HelpButtonInstanceIcon =
+  | string
+  | React.ReactNode
+  | ((...args: any[]) => any);
+export type HelpButtonInstanceIconPosition = 'left' | 'right';
+export type HelpButtonInstanceSpace =
+  | 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;
     };
-    constructor(props: any);
-    constructor(props: any, context: any);
+export type HelpButtonInstanceTop = string | number | boolean;
+export type HelpButtonInstanceRight = string | number | boolean;
+export type HelpButtonInstanceBottom = string | number | boolean;
+export type HelpButtonInstanceLeft = string | number | boolean;
+
+/**
+ * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
+ */
+export interface HelpButtonInstanceProps
+  extends React.HTMLProps<HTMLElement> {
+  id?: string;
+
+  /**
+   * Defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `primary`.
+   */
+  variant?: HelpButtonInstanceVariant;
+
+  /**
+   * 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?: HelpButtonInstanceIcon;
+
+  /**
+   * 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?: HelpButtonInstanceIconPosition;
+
+  /**
+   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
+   */
+  space?: HelpButtonInstanceSpace;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+   */
+  top?: HelpButtonInstanceTop;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+   */
+  right?: HelpButtonInstanceRight;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+   */
+  bottom?: HelpButtonInstanceBottom;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+   */
+  left?: HelpButtonInstanceLeft;
+  className?: string;
+
+  /**
+   * Any extra modifying class.
+   */
+  class?: string;
+}
+export default class HelpButtonInstance extends React.Component<
+  HelpButtonInstanceProps,
+  any
+> {
+  static defaultProps: object;
+  render(): JSX.Element;
 }
-import React from "react";

package/components/icon/Icon.d.ts

@@ -1,138 +1,126 @@
-export const DefaultIconSize: 16;
-export namespace DefaultIconSizes {
-    const _default: number;
-    export { _default as default };
-    export const medium: number;
-}
-export const ListDefaultIconSizes: (string | number)[][];
-export const ValidIconSizes: string[];
-export const iconPropTypes: {
-    width: PropTypes.Requireable<string | number>;
-    height: PropTypes.Requireable<string | number>;
-    border: PropTypes.Requireable<string | boolean>;
-    color: PropTypes.Requireable<string>;
-    inherit_color: PropTypes.Requireable<string | boolean>;
-    alt: PropTypes.Requireable<string>;
-    title: PropTypes.Requireable<string>;
-    skeleton: PropTypes.Requireable<string | boolean>;
-    attributes: PropTypes.Requireable<string | object>;
-    className: PropTypes.Requireable<string>;
-    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    space: PropTypes.Requireable<string | number | boolean | PropTypes.InferProps<{
-        top: PropTypes.Requireable<string | number | boolean>;
-        right: PropTypes.Requireable<string | number | boolean>;
-        bottom: PropTypes.Requireable<string | number | boolean>;
-        left: PropTypes.Requireable<string | number | boolean>;
-    }>>;
-    top: PropTypes.Requireable<string | number | boolean>;
-    right: PropTypes.Requireable<string | number | boolean>;
-    bottom: PropTypes.Requireable<string | number | boolean>;
-    left: PropTypes.Requireable<string | number | boolean>;
-    icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    modifier: PropTypes.Requireable<string>;
-    size: PropTypes.Requireable<string | number>;
-};
+import * as React from 'react';
+export type IconIcon =
+  | string
+  | React.ReactNode
+  | ((...args: any[]) => any);
+export type IconSize = number | string | 'default' | 'medium' | 'large';
+export type IconSpace =
+  | 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 IconTop = string | number | boolean;
+export type IconRight = string | number | boolean;
+export type IconBottom = string | number | boolean;
+export type IconLeft = string | number | boolean;
+export type IconWidth = string | number;
+export type IconHeight = string | number;
+export type IconBorder = string | boolean;
+export type IconInheritColor = string | boolean;
+export type IconSkeleton = string | boolean;
+export type IconAttributes = string | Object;
+export type IconChildren = React.ReactNode | ((...args: any[]) => any);
+
 /**
- * The icon component is a span wrapping an inline svg. When using this component in your preferred framework. To load an svg file dynamically, you may need a "svg-loader". Feel free to use whatever tool you want (regarding the setup/tooling), as long as the output is the same markup as shown below.
+ * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
  */
-export default class Icon extends React.PureComponent<any, any, any> {
-    static tagName: string;
-    static contextType: React.Context<{
-        translation: any;
-        updateTranslation: (locale: any, translation: any) => void;
-        getTranslation: (props: any) => any;
-        locales: any;
-        Avatar: {};
-        AvatarGroup: {};
-        Breadcrumb: {};
-        BreadcrumbItem: {};
-        InfoCard: {};
-        Tag: {};
-        TagGroup: {};
-        Timeline: {};
-        TimelineItem: {};
-        VisuallyHidden: {};
-        Drawer: {};
-        Dialog: {};
-    }>;
-    static propTypes: {
-        width: PropTypes.Requireable<string | number>;
-        height: PropTypes.Requireable<string | number>;
-        border: PropTypes.Requireable<string | boolean>;
-        color: PropTypes.Requireable<string>;
-        inherit_color: PropTypes.Requireable<string | boolean>;
-        alt: PropTypes.Requireable<string>;
-        title: PropTypes.Requireable<string>;
-        skeleton: PropTypes.Requireable<string | boolean>;
-        attributes: PropTypes.Requireable<string | object>;
-        className: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        space: PropTypes.Requireable<string | number | boolean | PropTypes.InferProps<{
-            top: PropTypes.Requireable<string | number | boolean>;
-            right: PropTypes.Requireable<string | number | boolean>;
-            bottom: PropTypes.Requireable<string | number | boolean>;
-            left: PropTypes.Requireable<string | number | boolean>;
-        }>>;
-        top: PropTypes.Requireable<string | number | boolean>;
-        right: PropTypes.Requireable<string | number | boolean>;
-        bottom: PropTypes.Requireable<string | number | boolean>;
-        left: PropTypes.Requireable<string | number | boolean>;
-        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        modifier: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<string | number>;
-    };
-    static defaultProps: {
-        icon: any;
-        modifier: any;
-        size: any;
-        width: any;
-        height: any;
-        border: any;
-        color: any;
-        inherit_color: boolean;
-        alt: any;
-        title: any;
-        skeleton: any;
-        attributes: any;
-        className: any;
-        children: any;
-    };
-    static enableWebComponent(tag?: string, inst?: typeof Icon, props?: {
-        icon: any;
-        modifier: any;
-        size: any;
-        width: any;
-        height: any;
-        border: any;
-        color: any;
-        inherit_color: boolean;
-        alt: any;
-        title: any;
-        skeleton: any;
-        attributes: any;
-        className: any;
-        children: any;
-    }): void;
-    static getIcon(props: any): any;
-    constructor(props: any);
-    constructor(props: any, context: any);
+export interface IconProps extends React.HTMLProps<HTMLElement> {
+  /**
+   * <em>(required)</em> a React SVG Component or the icon name (in case we use `IconPrimary` or `dnb-icon-primary`).
+   */
+  icon?: IconIcon;
+
+  /**
+   * Modifier class to define. Will result in: `dnb-icon--${modifier}`.
+   */
+  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 parent HTML element if it provides a `font-size`.
+   */
+  size?: IconSize;
+
+  /**
+   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
+   */
+  space?: IconSpace;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+   */
+  top?: IconTop;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+   */
+  right?: IconRight;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+   */
+  bottom?: IconBottom;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+   */
+  left?: IconLeft;
+  width?: IconWidth;
+  height?: IconHeight;
+
+  /**
+   * 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?: IconBorder;
+
+  /**
+   * Sets a color property to the `svg` markup. Default is no color, which means <em>black</em>
+   */
+  color?: string;
+
+  /**
+   * Default to `true`. Set to `false` if you do not want to inherit the color by `currentColor`.
+   */
+  inherit_color?: IconInheritColor;
+
+  /**
+   * The alternative label (text version) of the icon. Defaults to the imported icon name.
+   */
+  alt?: string;
+
+  /**
+   * Use a title to provide extra information about the icon used.
+   */
+  title?: string;
+
+  /**
+   * If set to `true`, an overlaying skeleton with animation will be shown.
+   */
+  skeleton?: IconSkeleton;
+  attributes?: IconAttributes;
+  className?: string;
+  children?: IconChildren;
+}
+export default class Icon extends React.Component<IconProps, any> {
+  static defaultProps: object;
+  render(): JSX.Element;
 }
-export function getIconNameFromComponent(icon: any): any;
-export function calcSize(props: any): {
-    iconParams: {
-        width: number;
-        height: number;
-    };
-    sizeAsInt: number;
-    sizeAsString: any;
-};
-export function prepareIcon(props: any, context: any): any;
-export function prerenderIcon({ icon, size, listOfIcons, alt, }?: {
-    icon: any;
-    size?: any;
-    listOfIcons?: any;
-    alt?: any;
-}): any;
-export function iconCase(name: any): any;
-import PropTypes from "prop-types";
-import React from "react";

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

@@ -49,14 +49,14 @@ export type IconPrimaryAttributes =
 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'> {
   /**
-   * 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;
 
@@ -66,7 +66,7 @@ export interface IconPrimaryProps
   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;