@dnb/eufemia 9.17.1 → 9.20.0

package/es/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/es/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/es/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/es/components/icon-primary/IconPrimary.d.ts

@@ -53,9 +53,10 @@ export type IconPrimaryChildren =
  * 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 React.HTMLProps<HTMLElement> {
+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;
 
@@ -65,7 +66,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/es/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/es/components/index.js

@@ -1,5 +1,6 @@
 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';
@@ -15,6 +16,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';
@@ -30,7 +32,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';
-export { Accordion, Autocomplete, Breadcrumb, Button, Checkbox, DatePicker, Dropdown, FormLabel, FormRow, FormSet, FormStatus, GlobalError, GlobalStatus, Heading, HelpButton, Icon, IconPrimary, Input, InputMasked, Logo, Modal, NumberFormat, Pagination, ProgressIndicator, Radio, Section, Skeleton, Slider, Space, StepIndicator, Switch, Tabs, Textarea, ToggleButton, Tooltip };
+export { Accordion, Autocomplete, Avatar, Breadcrumb, Button, Checkbox, DatePicker, Dropdown, FormLabel, FormRow, FormSet, FormStatus, GlobalError, GlobalStatus, Heading, HelpButton, Icon, IconPrimary, InfoCard, Input, InputMasked, Logo, Modal, NumberFormat, Pagination, ProgressIndicator, Radio, Section, Skeleton, Slider, Space, StepIndicator, Switch, Tabs, Tag, Textarea, Timeline, ToggleButton, Tooltip };

package/es/components/info-card/InfoCard.js

@@ -0,0 +1,135 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["alt", "centered", "title", "skeleton", "className", "icon", "src", "imgProps", "text", "onClose", "onAccept", "closeButtonText", "acceptButtonText", "closeButtonAttributes", "acceptButtonAttributes"];
+
+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 Button from '../button/Button';
+import IconPrimary from '../icon-primary/IconPrimary';
+import Img from '../../elements/Img';
+import Div from '../../elements/Div';
+import H3 from '../../elements/H3';
+import P from '../../elements/P';
+import { lightbulb_medium as LightbulbIcon } from '../../icons';
+import { createSpacingClasses } from '../space/SpacingHelper';
+import { createSkeletonClass } from '../skeleton/SkeletonHelper';
+import Context from '../../shared/Context';
+import { usePropsWithContext } from '../../shared/hooks';
+export const defaultProps = {
+  alt: null,
+  centered: false,
+  className: null,
+  skeleton: false,
+  icon: LightbulbIcon,
+  imgProps: null,
+  src: null,
+  title: null,
+  onAccept: null,
+  onClose: null,
+  closeButtonText: null,
+  acceptButtonText: null,
+  closeButtonAttributes: null,
+  acceptButtonAttributes: null
+};
+
+const InfoCard = localProps => {
+  var _IconPrimary;
+
+  const context = React.useContext(Context);
+
+  const _usePropsWithContext = usePropsWithContext(_objectSpread(_objectSpread({}, defaultProps), localProps)),
+        {
+    alt,
+    centered,
+    title,
+    skeleton,
+    className,
+    icon,
+    src,
+    imgProps,
+    text,
+    onClose,
+    onAccept,
+    closeButtonText,
+    acceptButtonText,
+    closeButtonAttributes,
+    acceptButtonAttributes
+  } = _usePropsWithContext,
+        props = _objectWithoutProperties(_usePropsWithContext, _excluded);
+
+  const skeletonClasses = createSkeletonClass('shape', skeleton, context);
+  const spacingClasses = createSpacingClasses(props);
+  const closeButtonIsHidden = !onClose && !closeButtonText;
+  const acceptButtonIsHidden = !onAccept && !acceptButtonText;
+  return React.createElement(Div, _extends({
+    className: classnames('dnb-info-card', skeletonClasses, spacingClasses, className, centered && 'dnb-info-card--centered'),
+    "data-testid": "info-card"
+  }, props), React.createElement(Div, {
+    right: !centered && 'small',
+    bottom: centered && 'small'
+  }, getIllustration()), React.createElement("div", {
+    className: "dnb-info-card--content",
+    "data-testid": "info-card-content"
+  }, title && React.createElement(H3, {
+    size: "small",
+    "data-testid": "info-card-title",
+    bottom: "x-small",
+    top: "0"
+  }, title), React.createElement(P, {
+    size: "small",
+    "data-testid": "info-card-text",
+    bottom: "0"
+  }, text), getButtons()));
+
+  function getButtons() {
+    if (closeButtonIsHidden && acceptButtonIsHidden) return null;
+    return React.createElement(Div, {
+      top: centered ? 'medium' : 'small',
+      className: 'dnb-info-card--buttons' + (centered ? " dnb-info-card--buttons-centered" : "")
+    }, !acceptButtonIsHidden && React.createElement(Button, _extends({
+      type: "button",
+      "data-testid": "info-card-accept-button",
+      variant: "secondary",
+      right: !centered && 'small',
+      on_click: onAccept,
+      text: acceptButtonText
+    }, acceptButtonAttributes)), !closeButtonIsHidden && React.createElement(Button, _extends({
+      type: "button",
+      "data-testid": "info-card-close-button",
+      variant: "tertiary",
+      top: centered && 'small',
+      on_click: onClose,
+      icon: "close",
+      icon_position: "left",
+      text: closeButtonText
+    }, closeButtonAttributes)));
+  }
+
+  function getIllustration() {
+    if (src || imgProps) {
+      const imageProps = _objectSpread({
+        src,
+        alt
+      }, imgProps);
+
+      return React.createElement(Img, _extends({
+        "data-testid": "info-card-image",
+        className: "dnb-info-card--image"
+      }, imageProps));
+    }
+
+    return _IconPrimary || (_IconPrimary = React.createElement(IconPrimary, {
+      size: "medium",
+      className: "dnb-info-card--icon",
+      icon: icon,
+      "data-testid": "info-card-icon"
+    }));
+  }
+};
+
+export default InfoCard;

package/es/components/info-card/InfoCard.tsx

@@ -0,0 +1,250 @@
+import React from 'react'
+import classnames from 'classnames'
+
+// Components
+import Button, { ButtonProps } from '../button/Button'
+import IconPrimary, { IconPrimaryIcon } from '../icon-primary/IconPrimary'
+import Img, { ImgProps } from '../../elements/Img'
+import Div from '../../elements/Div'
+import H3 from '../../elements/H3'
+import P from '../../elements/P'
+
+// Icons
+import { lightbulb_medium as LightbulbIcon } from '../../icons'
+
+// Shared
+import { createSpacingClasses } from '../space/SpacingHelper'
+import { createSkeletonClass } from '../skeleton/SkeletonHelper'
+import { SkeletonShow } from '../skeleton/Skeleton'
+import Context from '../../shared/Context'
+import { ISpacingProps } from '../../shared/interfaces'
+import { usePropsWithContext } from '../../shared/hooks'
+
+export interface InfoCardProps {
+  /**
+   * Used in combination with `src` to provide an alt attribute for the `img` element.
+   * Default: null
+   */
+  alt?: React.ReactNode
+  /**
+   * Aligns the content to center, rather than left
+   * Default: false
+   */
+  centered?: boolean
+  /**
+   * Custom className on the component root
+   * Default: null
+   */
+  className?: string
+  /**
+   * Replace the default icon with custom icon.
+   * Default: Lightbulb (icon)
+   */
+  icon?: IconPrimaryIcon
+  /**
+   * Props applied to the `img` element if the component is used to display an image. Replace the 'icon'
+   * Default: null
+   */
+  imgProps?: ImgProps
+  /**
+   * Skeleton should be applied when loading content
+   * Default: null
+   */
+  skeleton?: SkeletonShow
+  /**
+   * Specifies the path to the image
+   * Default: null
+   */
+  src?: string
+  /**
+   * Image src, will replace the 'icon' with the image
+   * Default: null
+   */
+  text: React.ReactNode
+  /**
+   * Component title
+   * Default: null
+   */
+  title?: React.ReactNode
+  /**
+   * Is called when the close button is clicked
+   * Default: null
+   */
+  onClose?: React.MouseEventHandler<HTMLButtonElement>
+  /**
+   * The text of the close button.
+   * Default: null
+   */
+  closeButtonText?: React.ReactNode
+  /**
+   * Is called when the accept button is clicked
+   * Default: null
+   */
+  onAccept?: React.MouseEventHandler<HTMLButtonElement>
+  /**
+   * The text of the accept button.
+   * Default: null
+   */
+  acceptButtonText?: React.ReactNode
+  /**
+   * Additional attributes for the close button.
+   * Default: null
+   */
+  closeButtonAttributes?: ButtonProps
+  /**
+   * Additional attributes for the accept button
+   * Default: null
+   */
+  acceptButtonAttributes?: ButtonProps
+}
+
+export const defaultProps = {
+  alt: null,
+  centered: false,
+  className: null,
+  skeleton: false,
+  icon: LightbulbIcon,
+  imgProps: null,
+  src: null,
+  title: null,
+  onAccept: null,
+  onClose: null,
+  closeButtonText: null,
+  acceptButtonText: null,
+  closeButtonAttributes: null,
+  acceptButtonAttributes: null,
+}
+
+const InfoCard = (localProps: InfoCardProps & ISpacingProps) => {
+  // Every component should have a context
+  const context = React.useContext(Context)
+  // Extract additional props from global context
+  const {
+    alt,
+    centered,
+    title,
+    skeleton,
+    className,
+    icon,
+    src,
+    imgProps,
+    text,
+    onClose,
+    onAccept,
+    closeButtonText,
+    acceptButtonText,
+    closeButtonAttributes,
+    acceptButtonAttributes,
+    ...props
+  } = usePropsWithContext({
+    ...defaultProps,
+    ...localProps,
+  })
+
+  const skeletonClasses = createSkeletonClass('shape', skeleton, context)
+  const spacingClasses = createSpacingClasses(props)
+
+  const closeButtonIsHidden = !onClose && !closeButtonText
+  const acceptButtonIsHidden = !onAccept && !acceptButtonText
+
+  return (
+    <Div
+      className={classnames(
+        'dnb-info-card',
+        skeletonClasses,
+        spacingClasses,
+        centered && 'dnb-info-card--centered',
+        className
+      )}
+      data-testid="info-card"
+      {...props}
+    >
+      <Div right={!centered && 'small'} bottom={centered && 'small'}>
+        {getIllustration()}
+      </Div>
+
+      <div
+        className="dnb-info-card--content"
+        data-testid="info-card-content"
+      >
+        {title && (
+          <H3
+            size="small"
+            data-testid="info-card-title"
+            bottom="x-small"
+            top="0"
+          >
+            {title}
+          </H3>
+        )}
+        <P size="small" data-testid="info-card-text" bottom="0">
+          {text}
+        </P>
+
+        {getButtons()}
+      </div>
+    </Div>
+  )
+
+  function getButtons() {
+    if (closeButtonIsHidden && acceptButtonIsHidden) return null
+
+    return (
+      <Div
+        top={centered ? 'medium' : 'small'}
+        className={classnames(
+          'dnb-info-card--buttons',
+          centered && 'dnb-info-card--buttons-centered'
+        )}
+      >
+        {!acceptButtonIsHidden && (
+          <Button
+            type="button"
+            data-testid="info-card-accept-button"
+            variant="secondary"
+            right={!centered && 'small'}
+            on_click={onAccept}
+            text={acceptButtonText}
+            {...acceptButtonAttributes}
+          />
+        )}
+        {!closeButtonIsHidden && (
+          <Button
+            type="button"
+            data-testid="info-card-close-button"
+            variant="tertiary"
+            top={centered && 'small'}
+            on_click={onClose}
+            icon="close"
+            icon_position="left"
+            text={closeButtonText}
+            {...closeButtonAttributes}
+          />
+        )}
+      </Div>
+    )
+  }
+
+  function getIllustration() {
+    if (src || imgProps) {
+      const imageProps = { src, alt, ...imgProps }
+      return (
+        <Img
+          data-testid="info-card-image"
+          className="dnb-info-card--image"
+          {...imageProps}
+        />
+      )
+    }
+    return (
+      <IconPrimary
+        size="medium"
+        className="dnb-info-card--icon"
+        icon={icon}
+        data-testid="info-card-icon"
+      />
+    )
+  }
+}
+
+export default InfoCard

package/es/components/info-card/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Component Entry
+ *
+ */
+
+import InfoCard from './InfoCard';
+export default InfoCard;
+export * from './InfoCard';

package/es/components/info-card/index.js

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

package/es/components/info-card/style/_info-card.scss

@@ -0,0 +1,52 @@
+/*
+* InfoCard component
+*
+*/
+
+.dnb-info-card {
+  display: flex;
+  flex-direction: row;
+
+  background: white;
+
+  border: 1px solid var(--color-black-8);
+  border-radius: 0.25rem;
+  padding: 1rem;
+
+  @include defaultDropShadow();
+
+  &--centered {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  &--content {
+    flex-direction: column;
+    margin-top: 0.1875rem;
+  }
+
+  &--centered &--content {
+    flex-direction: column;
+    margin-top: 0;
+  }
+
+  &--icon {
+    color: var(--color-emerald-green);
+  }
+
+  &--image {
+    height: 4rem;
+    width: 4rem;
+  }
+
+  &--buttons {
+    display: flex;
+    flex-direction: row;
+    &-centered {
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+    }
+  }
+}