@dnb/eufemia 10.55.1 → 10.57.0

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { HelpButtonProps } from './HelpButton';
+import { SpacingProps } from '../space/types';
+export type HelpProps = {
+    title?: React.ReactNode;
+    content?: React.ReactNode;
+    renderAs?: 'inline' | 'dialog';
+    /** Only for the "inline" variant */
+    open?: boolean;
+    /** Only for the "inline" variant */
+    breakout?: boolean;
+    /** Only for the "inline" variant */
+    outset?: boolean;
+};
+export type HelpButtonInlineProps = HelpButtonProps & {
+    contentId?: string;
+    help?: HelpProps;
+};
+export type HelpButtonInlineSharedStateDataProps = {
+    isOpen: boolean;
+    isUserIntent?: boolean;
+    buttonRef?: React.RefObject<HTMLButtonElement>;
+};
+declare function HelpButtonInline(props: HelpButtonInlineProps): import("react/jsx-runtime").JSX.Element;
+declare namespace HelpButtonInline {
+    var _supportsSpacingProps: boolean;
+}
+export default HelpButtonInline;
+export type HelpButtonInlineContentProps = SpacingProps & {
+    contentId: string;
+    className?: string;
+    children?: React.ReactNode;
+    help?: HelpProps;
+    breakout?: boolean;
+    outset?: boolean;
+};
+export declare function HelpButtonInlineContent(props: HelpButtonInlineContentProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace HelpButtonInlineContent {
+    var _supportsSpacingProps: boolean;
+}

package/components/help-button/HelpButtonInline.js

@@ -0,0 +1,178 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _QuestionIcon, _CloseIcon;
+const _excluded = ["contentId", "size", "help", "className", "children"],
+  _excluded2 = ["contentId", "className", "children", "help", "breakout", "outset"];
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import classnames from 'classnames';
+import HelpButtonInstance from './HelpButtonInstance';
+import HeightAnimation from '../HeightAnimation';
+import { useSharedState } from '../../shared/helpers/useSharedState';
+import { convertJsxToString } from '../../shared/component-helper';
+import useId from '../../shared/helpers/useId';
+import Section from '../Section';
+import { P } from '../../elements';
+import Flex from '../Flex';
+import CardContext from '../card/CardContext';
+import Dialog from '../Dialog';
+import { question as QuestionIcon, close as CloseIcon } from '../../icons';
+export default function HelpButtonInline(props) {
+  var _help$open;
+  const {
+      contentId,
+      size,
+      help,
+      className,
+      children
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
+  const controlId = useId(contentId);
+  const {
+    data,
+    update
+  } = useSharedState(controlId, {
+    isOpen: (_help$open = help === null || help === void 0 ? void 0 : help.open) !== null && _help$open !== void 0 ? _help$open : false
+  });
+  const {
+    isOpen,
+    isUserIntent
+  } = data || {};
+  const wasOpenRef = useRef(undefined);
+  const buttonRef = useRef(null);
+  const onClickHandler = useCallback(_ref => {
+    let {
+      event
+    } = _ref;
+    event.preventDefault();
+    update({
+      isOpen: !isOpen,
+      isUserIntent: !isOpen,
+      buttonRef
+    });
+    wasOpenRef.current = !isOpen;
+  }, [isOpen, update]);
+  return React.createElement(React.Fragment, null, React.createElement(HelpButtonInstance, _extends({
+    bounding: true,
+    size: size !== null && size !== void 0 ? size : 'small',
+    icon: HelpButtonIcon,
+    title: !isOpen && !wasOpenRef.current ? convertJsxToString(help === null || help === void 0 ? void 0 : help.title) : undefined
+  }, rest, {
+    id: controlId,
+    className: classnames('dnb-help-button__inline', className, isOpen && 'dnb-help-button__inline--open', isUserIntent && 'dnb-help-button__inline--user-intent', typeof wasOpenRef.current === 'boolean' && 'dnb-help-button__inline--was-open'),
+    "aria-controls": `${controlId}-content`,
+    on_click: onClickHandler,
+    innerRef: buttonRef
+  })), !contentId && React.createElement(HelpButtonInlineContent, {
+    contentId: controlId,
+    help: help
+  }, children));
+}
+export function HelpButtonInlineContent(props) {
+  var _ref2;
+  const {
+      contentId,
+      className,
+      children,
+      help: helpProp,
+      breakout = true,
+      outset = true
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded2);
+  const {
+    data,
+    update
+  } = useSharedState(contentId);
+  const {
+    isOpen,
+    isUserIntent,
+    buttonRef
+  } = data || {};
+  const {
+    open,
+    title,
+    content,
+    renderAs,
+    breakout: breakoutProp = true,
+    outset: outsetProp = true
+  } = helpProp || {};
+  const innerRef = useRef(null);
+  const cardContext = useContext(CardContext);
+  const breakoutFromLayout = Boolean(cardContext) && breakout && breakoutProp;
+  const outsetFromLayout = outset && outsetProp;
+  useEffect(() => {
+    if (isOpen && isUserIntent) {
+      window.requestAnimationFrame(() => {
+        var _innerRef$current;
+        (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus({
+          preventScroll: true
+        });
+      });
+    }
+  }, [isOpen, isUserIntent]);
+  const onClose = useCallback(() => {
+    update({
+      isOpen: false,
+      isUserIntent: false
+    });
+  }, [update]);
+  const onKeyDown = useCallback(event => {
+    if (event.currentTarget === event.target) {
+      switch (event.key.trim() || event.code) {
+        case 'Enter':
+        case 'Space':
+        case 'Escape':
+          event.preventDefault();
+          window.requestAnimationFrame(() => {
+            var _buttonRef$current;
+            onClose();
+            (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
+          });
+          break;
+      }
+    }
+  }, [buttonRef, onClose]);
+  if (renderAs === 'dialog') {
+    return React.createElement(Dialog, {
+      title: title,
+      omitTriggerButton: true,
+      openState: isOpen !== null && isOpen !== void 0 ? isOpen : open,
+      onClose: onClose
+    }, content, children);
+  }
+  return React.createElement(HeightAnimation, {
+    className: classnames('dnb-help-button__content', className),
+    open: (_ref2 = isOpen !== null && isOpen !== void 0 ? isOpen : open) !== null && _ref2 !== void 0 ? _ref2 : false
+  }, React.createElement(Section, _extends({
+    id: `${contentId}-content`,
+    "aria-label": convertJsxToString(title),
+    className: "dnb-no-focus",
+    tabIndex: -1,
+    innerRef: innerRef,
+    onKeyDown: onKeyDown,
+    outset: outsetFromLayout,
+    breakout: breakoutFromLayout,
+    roundedCorner: !breakoutFromLayout,
+    innerSpace: breakoutFromLayout ? {
+      top: 'small',
+      bottom: 'medium'
+    } : {
+      top: 'small',
+      bottom: 'medium',
+      left: 'medium',
+      right: 'x-small'
+    },
+    backgroundColor: "lavender"
+  }, rest), React.createElement(Flex.Vertical, {
+    gap: "x-small"
+  }, title && React.createElement(P, {
+    weight: "medium"
+  }, title), content && React.createElement(P, null, content)), children));
+}
+function HelpButtonIcon() {
+  return React.createElement(React.Fragment, null, _QuestionIcon || (_QuestionIcon = React.createElement(QuestionIcon, null)), _CloseIcon || (_CloseIcon = React.createElement(CloseIcon, null)));
+}
+HelpButtonInline._supportsSpacingProps = true;
+HelpButtonInlineContent._supportsSpacingProps = true;
+//# sourceMappingURL=HelpButtonInline.js.map

package/components/help-button/HelpButtonInline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpButtonInline.js","names":["React","useCallback","useContext","useEffect","useRef","classnames","HelpButtonInstance","HeightAnimation","useSharedState","convertJsxToString","useId","Section","P","Flex","CardContext","Dialog","question","QuestionIcon","close","CloseIcon","HelpButtonInline","props","_help$open","contentId","size","help","className","children","rest","_objectWithoutProperties","_excluded","controlId","data","update","isOpen","open","isUserIntent","wasOpenRef","undefined","buttonRef","onClickHandler","_ref","event","preventDefault","current","createElement","Fragment","_extends","bounding","icon","HelpButtonIcon","title","id","on_click","innerRef","HelpButtonInlineContent","_ref2","helpProp","breakout","outset","_excluded2","content","renderAs","breakoutProp","outsetProp","cardContext","breakoutFromLayout","Boolean","outsetFromLayout","window","requestAnimationFrame","_innerRef$current","focus","preventScroll","onClose","onKeyDown","currentTarget","target","key","trim","code","_buttonRef$current","omitTriggerButton","openState","tabIndex","roundedCorner","innerSpace","top","bottom","left","right","backgroundColor","Vertical","gap","weight","_QuestionIcon","_CloseIcon","_supportsSpacingProps"],"sources":["../../../../src/components/help-button/HelpButtonInline.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useRef } from 'react'\nimport classnames from 'classnames'\nimport { HelpButtonProps } from './HelpButton'\nimport HelpButtonInstance from './HelpButtonInstance'\nimport HeightAnimation from '../HeightAnimation'\nimport { useSharedState } from '../../shared/helpers/useSharedState'\nimport { convertJsxToString } from '../../shared/component-helper'\nimport useId from '../../shared/helpers/useId'\nimport Section from '../Section'\nimport { P } from '../../elements'\nimport Flex from '../Flex'\nimport CardContext from '../card/CardContext'\nimport { SpacingProps } from '../space/types'\nimport Dialog from '../Dialog'\nimport { question as QuestionIcon, close as CloseIcon } from '../../icons'\n\nexport type HelpProps = {\n  title?: React.ReactNode\n  content?: React.ReactNode\n  renderAs?: 'inline' | 'dialog'\n  /** Only for the \"inline\" variant */\n  open?: boolean\n  /** Only for the \"inline\" variant */\n  breakout?: boolean\n  /** Only for the \"inline\" variant */\n  outset?: boolean\n}\n\nexport type HelpButtonInlineProps = HelpButtonProps & {\n  contentId?: string\n  help?: HelpProps\n}\n\nexport type HelpButtonInlineSharedStateDataProps = {\n  isOpen: boolean\n  isUserIntent?: boolean\n  buttonRef?: React.RefObject<HTMLButtonElement>\n}\n\nexport default function HelpButtonInline(props: HelpButtonInlineProps) {\n  const { contentId, size, help, className, children, ...rest } = props\n  const controlId = useId(contentId)\n\n  const { data, update } =\n    useSharedState<HelpButtonInlineSharedStateDataProps>(controlId, {\n      isOpen: help?.open ?? false,\n    })\n  const { isOpen, isUserIntent } = data || {}\n  const wasOpenRef = useRef(undefined)\n  const buttonRef = useRef<HTMLButtonElement>(null)\n\n  const onClickHandler = useCallback(\n    ({ event }: { event: React.MouseEvent<HTMLButtonElement> }) => {\n      event.preventDefault() // Because when used inside a FormLabel\n      update({ isOpen: !isOpen, isUserIntent: !isOpen, buttonRef })\n      wasOpenRef.current = !isOpen\n    },\n    [isOpen, update]\n  )\n\n  return (\n    <>\n      <HelpButtonInstance\n        bounding\n        size={size ?? 'small'}\n        icon={HelpButtonIcon}\n        title={\n          !isOpen && !wasOpenRef.current\n            ? convertJsxToString(help?.title)\n            : undefined\n        }\n        {...rest}\n        id={controlId}\n        className={classnames(\n          'dnb-help-button__inline',\n          isOpen && 'dnb-help-button__inline--open',\n          isUserIntent && 'dnb-help-button__inline--user-intent',\n          typeof wasOpenRef.current === 'boolean' &&\n            'dnb-help-button__inline--was-open',\n          className\n        )}\n        aria-controls={`${controlId}-content`}\n        on_click={onClickHandler}\n        innerRef={buttonRef}\n      />\n\n      {!contentId && (\n        <HelpButtonInlineContent contentId={controlId} help={help}>\n          {children}\n        </HelpButtonInlineContent>\n      )}\n    </>\n  )\n}\n\nexport type HelpButtonInlineContentProps = SpacingProps & {\n  contentId: string\n  className?: string\n  children?: React.ReactNode\n  help?: HelpProps\n  breakout?: boolean\n  outset?: boolean\n}\n\nexport function HelpButtonInlineContent(\n  props: HelpButtonInlineContentProps\n) {\n  const {\n    contentId,\n    className,\n    children,\n    help: helpProp,\n    breakout = true,\n    outset = true,\n    ...rest\n  } = props\n  const { data, update } =\n    useSharedState<HelpButtonInlineSharedStateDataProps>(contentId)\n  const { isOpen, isUserIntent, buttonRef } = data || {}\n  const {\n    open,\n    title,\n    content,\n    renderAs,\n    breakout: breakoutProp = true,\n    outset: outsetProp = true,\n  } = helpProp || {}\n\n  const innerRef = useRef<HTMLDivElement>(null)\n  const cardContext = useContext(CardContext)\n  const breakoutFromLayout =\n    Boolean(cardContext) && breakout && breakoutProp\n  const outsetFromLayout = outset && outsetProp\n\n  useEffect(() => {\n    if (isOpen && isUserIntent) {\n      window.requestAnimationFrame(() => {\n        innerRef.current?.focus({ preventScroll: true })\n      })\n    }\n  }, [isOpen, isUserIntent])\n\n  const onClose = useCallback(() => {\n    update({ isOpen: false, isUserIntent: false })\n  }, [update])\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLButtonElement>) => {\n      if (event.currentTarget === event.target) {\n        // Firefox returns a whitespace (\" \") on event.key when pressing space,\n        // therefore using .trim() can help normalize this.\n        // While userEvent.keyboard('{Space}') might return 'Unknown' on event.code,\n        // making a direct comparison less reliable across all platforms.\n        switch (event.key.trim() || event.code) {\n          case 'Enter':\n          case 'Space':\n          case 'Escape':\n            event.preventDefault()\n            window.requestAnimationFrame(() => {\n              onClose()\n              buttonRef.current?.focus()\n            })\n            break\n        }\n      }\n    },\n    [buttonRef, onClose]\n  )\n\n  if (renderAs === 'dialog') {\n    return (\n      <Dialog\n        title={title}\n        omitTriggerButton\n        openState={isOpen ?? open}\n        onClose={onClose}\n      >\n        {content}\n        {children}\n      </Dialog>\n    )\n  }\n\n  return (\n    <HeightAnimation\n      className={classnames('dnb-help-button__content', className)}\n      open={isOpen ?? open ?? false}\n    >\n      <Section\n        id={`${contentId}-content`}\n        aria-label={convertJsxToString(title)}\n        className=\"dnb-no-focus\"\n        tabIndex={-1}\n        innerRef={innerRef}\n        onKeyDown={onKeyDown}\n        outset={outsetFromLayout}\n        breakout={breakoutFromLayout}\n        roundedCorner={!breakoutFromLayout}\n        innerSpace={\n          breakoutFromLayout\n            ? { top: 'small', bottom: 'medium' }\n            : {\n                top: 'small',\n                bottom: 'medium',\n                left: 'medium',\n                right: 'x-small',\n              }\n        }\n        backgroundColor=\"lavender\"\n        {...rest}\n      >\n        <Flex.Vertical gap=\"x-small\">\n          {title && <P weight=\"medium\">{title}</P>}\n          {content && <P>{content}</P>}\n        </Flex.Vertical>\n        {children}\n      </Section>\n    </HeightAnimation>\n  )\n}\n\nfunction HelpButtonIcon() {\n  return (\n    <>\n      <QuestionIcon />\n      <CloseIcon />\n    </>\n  )\n}\n\nHelpButtonInline._supportsSpacingProps = true\nHelpButtonInlineContent._supportsSpacingProps = true\n"],"mappings":"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"}

package/components/help-button/style/dnb-help-button-inline.css

@@ -0,0 +1,99 @@
+/*
+ * HelpButton component
+ *
+ */
+/*
+ * Utilities
+ */ /*
+* Button mixins
+*
+*/
+.dnb-help-button.dnb-help-button__inline--open {
+  --border-color: var(--color-emerald-green);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+
+.dnb-help-button__inline svg {
+  will-change: transform;
+}
+.dnb-help-button__inline svg:nth-of-type(2) {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  opacity: 0;
+}
+.dnb-help-button__inline--open svg:nth-of-type(1) {
+  opacity: 0;
+}
+.dnb-help-button__inline--open svg:nth-of-type(2) {
+  animation: rotate-icon-in 400ms var(--easing-default) forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(1) {
+  opacity: 0;
+  animation: animate-question 400ms var(--easing-default) 200ms forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(2) {
+  animation: rotate-icon-out 400ms var(--easing-default) forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--user-intent) svg, html[data-visual-test] .dnb-help-button__inline svg {
+  animation-duration: 0ms;
+}
+@keyframes rotate-icon-in {
+  from {
+    opacity: 0;
+    transform: rotate(0deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(90deg);
+  }
+}
+@keyframes rotate-icon-out {
+  0% {
+    opacity: 1;
+    transform: rotate(90deg);
+  }
+  30% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: rotate(0deg);
+  }
+}
+@keyframes animate-question {
+  from {
+    opacity: 0;
+    transform: rotate(10deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(0deg);
+  }
+}
+
+.dnb-help-button__content {
+  --help-button-indent-width: var(--card-outline-width);
+}
+.dnb-help-button__content .dnb-section {
+  --background-color: var(--help-button-content-background);
+  --rounded-corner--value: calc(var(--card-outline-width) + 0.5rem);
+}
+.dnb-help-button__content .dnb-section .dnb-p {
+  max-width: 60ch;
+  transition: transform 400ms var(--easing-default) 40ms;
+  transform: translate3d(0, -0.5rem, 0);
+}
+:not(.dnb-card) .dnb-help-button__content .dnb-section {
+  --outset-left: calc(
+    var(--spacing-medium) + var(--help-button-indent-width)
+  );
+  --outset-right: calc(
+    var(--spacing-medium) + var(--help-button-indent-width)
+  );
+}
+.dnb-help-button__content.dnb-height-animation--parallax .dnb-section .dnb-p {
+  transform: translate3d(0, 0, 0);
+}

package/components/help-button/style/dnb-help-button-inline.min.css

@@ -0,0 +1 @@
+.dnb-help-button.dnb-help-button__inline--open{--border-color:var(--color-emerald-green);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-help-button__inline svg{will-change:transform}.dnb-help-button__inline svg:nth-of-type(2){inset:0;margin:auto;opacity:0;position:absolute}.dnb-help-button__inline--open svg:first-of-type{opacity:0}.dnb-help-button__inline--open svg:nth-of-type(2){animation:rotate-icon-in .4s var(--easing-default) forwards}.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:first-of-type{animation:animate-question .4s var(--easing-default) .2s forwards;opacity:0}.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(2){animation:rotate-icon-out .4s var(--easing-default) forwards}.dnb-help-button__inline:not(.dnb-help-button__inline--user-intent) svg,html[data-visual-test] .dnb-help-button__inline svg{animation-duration:0ms}@keyframes rotate-icon-in{0%{opacity:0;transform:rotate(0deg)}to{opacity:1;transform:rotate(90deg)}}@keyframes rotate-icon-out{0%{opacity:1;transform:rotate(90deg)}30%{opacity:1}to{opacity:0;transform:rotate(0deg)}}@keyframes animate-question{0%{opacity:0;transform:rotate(10deg)}to{opacity:1;transform:rotate(0deg)}}.dnb-help-button__content{--help-button-indent-width:var(--card-outline-width)}.dnb-help-button__content .dnb-section{--background-color:var(--help-button-content-background);--rounded-corner--value:calc(var(--card-outline-width) + 0.5rem)}.dnb-help-button__content .dnb-section .dnb-p{max-width:60ch;transform:translate3d(0,-.5rem,0);transition:transform .4s var(--easing-default) 40ms}:not(.dnb-card) .dnb-help-button__content .dnb-section{--outset-left:calc(var(--spacing-medium) + var(--help-button-indent-width));--outset-right:calc(var(--spacing-medium) + var(--help-button-indent-width))}.dnb-help-button__content.dnb-height-animation--parallax .dnb-section .dnb-p{transform:translateZ(0)}

package/components/help-button/style/dnb-help-button-inline.scss

@@ -0,0 +1,123 @@
+/*
+ * HelpButton component
+ *
+ */
+
+@import '../../button/style/themes/button-mixins.scss';
+
+.dnb-help-button {
+  &.dnb-help-button__inline {
+    &--open {
+      @include buttonHoverStyle(null, null, var(--color-emerald-green));
+    }
+  }
+}
+
+.dnb-help-button__inline {
+  svg {
+    // To avoid the animations from jumping in Safari
+    will-change: transform;
+  }
+
+  svg:nth-of-type(2) {
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    opacity: 0;
+  }
+
+  &--open {
+    svg:nth-of-type(1) {
+      opacity: 0;
+    }
+    svg:nth-of-type(2) {
+      animation: rotate-icon-in 400ms var(--easing-default) forwards;
+    }
+  }
+
+  &:not(#{&}--open)#{&}--was-open {
+    svg:nth-of-type(1) {
+      opacity: 0;
+      animation: animate-question 400ms var(--easing-default) 200ms
+        forwards;
+    }
+    svg:nth-of-type(2) {
+      animation: rotate-icon-out 400ms var(--easing-default) forwards;
+    }
+  }
+
+  &:not(#{&}--user-intent),
+  html[data-visual-test] & {
+    svg {
+      animation-duration: 0ms;
+    }
+  }
+
+  @keyframes rotate-icon-in {
+    from {
+      opacity: 0;
+      transform: rotate(0deg);
+    }
+    to {
+      opacity: 1;
+      transform: rotate(90deg);
+    }
+  }
+
+  @keyframes rotate-icon-out {
+    0% {
+      opacity: 1;
+      transform: rotate(90deg);
+    }
+    30% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+      transform: rotate(0deg);
+    }
+  }
+
+  @keyframes animate-question {
+    from {
+      opacity: 0;
+      transform: rotate(10deg);
+    }
+    to {
+      opacity: 1;
+      transform: rotate(0deg);
+    }
+  }
+}
+
+.dnb-help-button__content {
+  .dnb-section {
+    --background-color: var(--help-button-content-background);
+
+    // Because we don't use/need an outline, we need to add to get a wider corner radius.
+    --rounded-corner--value: calc(var(--card-outline-width) + 0.5rem);
+
+    .dnb-p {
+      max-width: 60ch; // to enhance readability;
+
+      transition: transform 400ms var(--easing-default) 40ms;
+      transform: translate3d(0, -0.5rem, 0);
+    }
+  }
+
+  // Defines the negative margin (extra border) to align on UX design.
+  --help-button-indent-width: var(--card-outline-width);
+
+  :not(.dnb-card) & .dnb-section {
+    --outset-left: calc(
+      var(--spacing-medium) + var(--help-button-indent-width)
+    );
+    --outset-right: calc(
+      var(--spacing-medium) + var(--help-button-indent-width)
+    );
+  }
+
+  &.dnb-height-animation--parallax .dnb-section .dnb-p {
+    transform: translate3d(0, 0, 0);
+  }
+}

package/components/help-button/style/dnb-help-button.css

@@ -1,9 +1,113 @@
 /*
  * HelpButton component
  *
- * TODO: Set spacing in the theme file, as theme comes later in the stack
+ */
+/*
+ * Utilities
+ */ /*
+* Button mixins
+*
+*/
+/*
+ * HelpButton component
  *
  */
+/*
+ * Utilities
+ */ /*
+* Button mixins
+*
+*/
+.dnb-help-button.dnb-help-button__inline--open {
+  --border-color: var(--color-emerald-green);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+
+.dnb-help-button__inline svg {
+  will-change: transform;
+}
+.dnb-help-button__inline svg:nth-of-type(2) {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  opacity: 0;
+}
+.dnb-help-button__inline--open svg:nth-of-type(1) {
+  opacity: 0;
+}
+.dnb-help-button__inline--open svg:nth-of-type(2) {
+  animation: rotate-icon-in 400ms var(--easing-default) forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(1) {
+  opacity: 0;
+  animation: animate-question 400ms var(--easing-default) 200ms forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(2) {
+  animation: rotate-icon-out 400ms var(--easing-default) forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--user-intent) svg, html[data-visual-test] .dnb-help-button__inline svg {
+  animation-duration: 0ms;
+}
+@keyframes rotate-icon-in {
+  from {
+    opacity: 0;
+    transform: rotate(0deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(90deg);
+  }
+}
+@keyframes rotate-icon-out {
+  0% {
+    opacity: 1;
+    transform: rotate(90deg);
+  }
+  30% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: rotate(0deg);
+  }
+}
+@keyframes animate-question {
+  from {
+    opacity: 0;
+    transform: rotate(10deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(0deg);
+  }
+}
+
+.dnb-help-button__content {
+  --help-button-indent-width: var(--card-outline-width);
+}
+.dnb-help-button__content .dnb-section {
+  --background-color: var(--help-button-content-background);
+  --rounded-corner--value: calc(var(--card-outline-width) + 0.5rem);
+}
+.dnb-help-button__content .dnb-section .dnb-p {
+  max-width: 60ch;
+  transition: transform 400ms var(--easing-default) 40ms;
+  transform: translate3d(0, -0.5rem, 0);
+}
+:not(.dnb-card) .dnb-help-button__content .dnb-section {
+  --outset-left: calc(
+    var(--spacing-medium) + var(--help-button-indent-width)
+  );
+  --outset-right: calc(
+    var(--spacing-medium) + var(--help-button-indent-width)
+  );
+}
+.dnb-help-button__content.dnb-height-animation--parallax .dnb-section .dnb-p {
+  transform: translate3d(0, 0, 0);
+}
+
 .dnb-help-button .dnb-button__bounding {
   transform: scale(1.5);
 }

package/components/help-button/style/dnb-help-button.min.css

@@ -1 +1 @@
-.dnb-help-button .dnb-button__bounding{transform:scale(1.5)}
+.dnb-help-button.dnb-help-button__inline--open{--border-color:var(--color-emerald-green);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-help-button__inline svg{will-change:transform}.dnb-help-button__inline svg:nth-of-type(2){inset:0;margin:auto;opacity:0;position:absolute}.dnb-help-button__inline--open svg:first-of-type{opacity:0}.dnb-help-button__inline--open svg:nth-of-type(2){animation:rotate-icon-in .4s var(--easing-default) forwards}.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:first-of-type{animation:animate-question .4s var(--easing-default) .2s forwards;opacity:0}.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(2){animation:rotate-icon-out .4s var(--easing-default) forwards}.dnb-help-button__inline:not(.dnb-help-button__inline--user-intent) svg,html[data-visual-test] .dnb-help-button__inline svg{animation-duration:0ms}@keyframes rotate-icon-in{0%{opacity:0;transform:rotate(0deg)}to{opacity:1;transform:rotate(90deg)}}@keyframes rotate-icon-out{0%{opacity:1;transform:rotate(90deg)}30%{opacity:1}to{opacity:0;transform:rotate(0deg)}}@keyframes animate-question{0%{opacity:0;transform:rotate(10deg)}to{opacity:1;transform:rotate(0deg)}}.dnb-help-button__content{--help-button-indent-width:var(--card-outline-width)}.dnb-help-button__content .dnb-section{--background-color:var(--help-button-content-background);--rounded-corner--value:calc(var(--card-outline-width) + 0.5rem)}.dnb-help-button__content .dnb-section .dnb-p{max-width:60ch;transform:translate3d(0,-.5rem,0);transition:transform .4s var(--easing-default) 40ms}:not(.dnb-card) .dnb-help-button__content .dnb-section{--outset-left:calc(var(--spacing-medium) + var(--help-button-indent-width));--outset-right:calc(var(--spacing-medium) + var(--help-button-indent-width))}.dnb-help-button__content.dnb-height-animation--parallax .dnb-section .dnb-p{transform:translateZ(0)}.dnb-help-button .dnb-button__bounding{transform:scale(1.5)}

package/components/help-button/style/dnb-help-button.scss

@@ -1,10 +1,11 @@
 /*
  * HelpButton component
  *
- * TODO: Set spacing in the theme file, as theme comes later in the stack
- *
  */
 
+@import '../../button/style/themes/button-mixins.scss';
+@import './dnb-help-button-inline.scss';
+
 .dnb-help-button {
   & .dnb-button__bounding {
     transform: scale(1.5);

package/components/help-button/style/themes/dnb-help-button-theme-sbanken.css

@@ -0,0 +1,7 @@
+/*
+ * Help button theme for Sbanken
+ *
+ */
+.dnb-help-button__content {
+  --help-button-content-background: var(--sb-color-green);
+}

package/components/help-button/style/themes/dnb-help-button-theme-sbanken.min.css

@@ -0,0 +1 @@
+.dnb-help-button__content{--help-button-content-background:var(--sb-color-green)}

package/components/help-button/style/themes/dnb-help-button-theme-sbanken.scss

@@ -0,0 +1,10 @@
+/*
+ * Help button theme for Sbanken
+ *
+ */
+
+.dnb-help-button {
+  &__content {
+    --help-button-content-background: var(--sb-color-green);
+  }
+}

package/components/help-button/style/themes/dnb-help-button-theme-ui.css

@@ -1,4 +1,7 @@
 /*
- * Np theme is provided
+ * Help button theme for UI
  *
- */
+ */
+.dnb-help-button__content {
+  --help-button-content-background: var(--color-lavender);
+}

package/components/help-button/style/themes/dnb-help-button-theme-ui.min.css

@@ -0,0 +1 @@
+.dnb-help-button__content{--help-button-content-background:var(--color-lavender)}

package/components/help-button/style/themes/dnb-help-button-theme-ui.scss

@@ -1,4 +1,10 @@
 /*
- * Np theme is provided
+ * Help button theme for UI
  *
  */
+
+.dnb-help-button {
+  &__content {
+    --help-button-content-background: var(--color-lavender);
+  }
+}

package/components/icon/Icon.js

@@ -49,6 +49,11 @@ export default function Icon(localProps) {
   return React.createElement("span", wrapperParams, React.createElement(IconContainer, iconParams));
 }
 export function getIconNameFromComponent(icon) {
+  var _icon;
+  if (React.isValidElement(icon) && (_icon = icon) !== null && _icon !== void 0 && _icon.type) {
+    var _icon2;
+    icon = (_icon2 = icon) === null || _icon2 === void 0 ? void 0 : _icon2.type;
+  }
   const name = typeof icon === 'function' ? icon.name : String(icon);
   if (/^data:image\//.test(name)) {
     return null;