@dnb/eufemia 10.55.0 → 10.56.0

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

@@ -0,0 +1,184 @@
+"use strict";
+"use client";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HelpButtonInlineContent = HelpButtonInlineContent;
+exports.default = HelpButtonInline;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _HelpButtonInstance = _interopRequireDefault(require("./HelpButtonInstance"));
+var _HeightAnimation = _interopRequireDefault(require("../HeightAnimation"));
+var _useSharedState = require("../../shared/helpers/useSharedState");
+var _componentHelper = require("../../shared/component-helper");
+var _useId = _interopRequireDefault(require("../../shared/helpers/useId"));
+var _Section = _interopRequireDefault(require("../Section"));
+var _elements = require("../../elements");
+var _Flex = _interopRequireDefault(require("../Flex"));
+var _CardContext = _interopRequireDefault(require("../card/CardContext"));
+var _Dialog = _interopRequireDefault(require("../Dialog"));
+var _icons = require("../../icons");
+var _QuestionIcon, _CloseIcon;
+const _excluded = ["contentId", "size", "help", "className", "children"],
+  _excluded2 = ["contentId", "className", "children", "help", "breakout"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function HelpButtonInline(props) {
+  var _help$open;
+  const {
+      contentId,
+      size,
+      help,
+      className,
+      children
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
+  const controlId = (0, _useId.default)(contentId);
+  const {
+    data,
+    update
+  } = (0, _useSharedState.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 = (0, _react.useRef)(undefined);
+  const buttonRef = (0, _react.useRef)(null);
+  const onClickHandler = (0, _react.useCallback)(_ref => {
+    let {
+      event
+    } = _ref;
+    event.preventDefault();
+    update({
+      isOpen: !isOpen,
+      isUserIntent: !isOpen,
+      buttonRef
+    });
+    wasOpenRef.current = !isOpen;
+  }, [isOpen, update]);
+  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_HelpButtonInstance.default, _extends({
+    bounding: true,
+    size: size !== null && size !== void 0 ? size : 'small',
+    icon: HelpButtonIcon,
+    title: !isOpen && !wasOpenRef.current ? (0, _componentHelper.convertJsxToString)(help === null || help === void 0 ? void 0 : help.title) : undefined
+  }, rest, {
+    id: controlId,
+    className: (0, _classnames.default)('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.default.createElement(HelpButtonInlineContent, {
+    contentId: controlId,
+    help: help
+  }, children));
+}
+function HelpButtonInlineContent(props) {
+  var _ref2;
+  const {
+      contentId,
+      className,
+      children,
+      help: helpProp,
+      breakout = true
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded2);
+  const {
+    data,
+    update
+  } = (0, _useSharedState.useSharedState)(contentId);
+  const {
+    isOpen,
+    isUserIntent,
+    buttonRef
+  } = data || {};
+  const {
+    open,
+    title,
+    content,
+    renderAs,
+    breakout: breakoutProp = true
+  } = helpProp || {};
+  const innerRef = (0, _react.useRef)(null);
+  const cardContext = (0, _react.useContext)(_CardContext.default);
+  const breakoutFromLayout = Boolean(cardContext) && breakout && breakoutProp;
+  (0, _react.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 = (0, _react.useCallback)(() => {
+    update({
+      isOpen: false,
+      isUserIntent: false
+    });
+  }, [update]);
+  const onKeyDown = (0, _react.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.default.createElement(_Dialog.default, {
+      title: title,
+      omitTriggerButton: true,
+      openState: isOpen !== null && isOpen !== void 0 ? isOpen : open,
+      onClose: onClose
+    }, content, children);
+  }
+  return _react.default.createElement(_HeightAnimation.default, {
+    className: (0, _classnames.default)('dnb-help-button__content', className),
+    open: (_ref2 = isOpen !== null && isOpen !== void 0 ? isOpen : open) !== null && _ref2 !== void 0 ? _ref2 : false
+  }, _react.default.createElement(_Section.default, _extends({
+    id: `${contentId}-content`,
+    "aria-label": (0, _componentHelper.convertJsxToString)(title),
+    className: "dnb-no-focus",
+    tabIndex: -1,
+    innerRef: innerRef,
+    onKeyDown: onKeyDown,
+    breakout: breakoutFromLayout,
+    roundedCorner: !breakoutFromLayout,
+    innerSpace: breakoutFromLayout ? {
+      top: 'small',
+      bottom: 'medium'
+    } : {
+      top: 'small',
+      bottom: 'medium',
+      left: 'medium',
+      right: 'x-small'
+    },
+    backgroundColor: "lavender"
+  }, rest), _react.default.createElement(_Flex.default.Vertical, {
+    gap: "x-small"
+  }, title && _react.default.createElement(_elements.P, {
+    medium: true
+  }, title), content && _react.default.createElement(_elements.P, null, content)), children));
+}
+function HelpButtonIcon() {
+  return _react.default.createElement(_react.default.Fragment, null, _QuestionIcon || (_QuestionIcon = _react.default.createElement(_icons.question, null)), _CloseIcon || (_CloseIcon = _react.default.createElement(_icons.close, null)));
+}
+HelpButtonInline._supportsSpacingProps = true;
+HelpButtonInlineContent._supportsSpacingProps = true;
+//# sourceMappingURL=HelpButtonInline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HelpButtonInline.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_HelpButtonInstance","_HeightAnimation","_useSharedState","_componentHelper","_useId","_Section","_elements","_Flex","_CardContext","_Dialog","_icons","_QuestionIcon","_CloseIcon","_excluded","_excluded2","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","HelpButtonInline","props","_help$open","contentId","size","help","className","children","rest","controlId","useId","data","update","useSharedState","isOpen","open","isUserIntent","wasOpenRef","useRef","undefined","buttonRef","onClickHandler","useCallback","_ref","event","preventDefault","current","createElement","Fragment","bounding","icon","HelpButtonIcon","title","convertJsxToString","id","classnames","on_click","innerRef","HelpButtonInlineContent","_ref2","helpProp","breakout","content","renderAs","breakoutProp","cardContext","useContext","CardContext","breakoutFromLayout","Boolean","useEffect","window","requestAnimationFrame","_innerRef$current","focus","preventScroll","onClose","onKeyDown","currentTarget","trim","code","_buttonRef$current","omitTriggerButton","openState","tabIndex","roundedCorner","innerSpace","top","bottom","left","right","backgroundColor","Vertical","gap","P","medium","question","close","_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}\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}\n\nexport function HelpButtonInlineContent(\n  props: HelpButtonInlineContentProps\n) {\n  const {\n    contentId,\n    className,\n    children,\n    help: helpProp,\n    breakout = 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  } = helpProp || {}\n\n  const innerRef = useRef<HTMLDivElement>(null)\n  const cardContext = useContext(CardContext)\n  const breakoutFromLayout =\n    Boolean(cardContext) && breakout && breakoutProp\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        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 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/cjs/components/help-button/style/dnb-help-button-inline.css

@@ -0,0 +1,98 @@
+/*
+ * 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 {
+  margin-left: calc(var(--help-button-indent-width) * -1);
+  margin-right: calc(var(--help-button-indent-width) * -1);
+  border: var(--help-button-indent-width) solid var(--help-button-content-background);
+  border-top: none;
+  border-bottom: none;
+}
+.dnb-help-button__content.dnb-height-animation--parallax .dnb-section .dnb-p {
+  transform: translate3d(0, 0, 0);
+}

package/cjs/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{border:var(--help-button-indent-width) solid var(--help-button-content-background);border-bottom:none;border-top:none;margin-left:calc(var(--help-button-indent-width)*-1);margin-right:calc(var(--help-button-indent-width)*-1)}.dnb-help-button__content.dnb-height-animation--parallax .dnb-section .dnb-p{transform:translateZ(0)}

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

@@ -0,0 +1,128 @@
+/*
+ * 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 {
+    // Because no outline, we need to stretch the content to the left and right,
+    // so it is aligned on how the Card is displayed.
+    margin-left: calc(var(--help-button-indent-width) * -1);
+    margin-right: calc(var(--help-button-indent-width) * -1);
+
+    // Use a border instead of the original outline,
+    // because is has no animation artifacts.
+    border: var(--help-button-indent-width) solid
+      var(--help-button-content-background);
+    border-top: none;
+    border-bottom: none;
+  }
+
+  &.dnb-height-animation--parallax .dnb-section .dnb-p {
+    transform: translate3d(0, 0, 0);
+  }
+}

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

@@ -1,9 +1,112 @@
 /*
  * 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 {
+  margin-left: calc(var(--help-button-indent-width) * -1);
+  margin-right: calc(var(--help-button-indent-width) * -1);
+  border: var(--help-button-indent-width) solid var(--help-button-content-background);
+  border-top: none;
+  border-bottom: none;
+}
+.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/cjs/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{border:var(--help-button-indent-width) solid var(--help-button-content-background);border-bottom:none;border-top:none;margin-left:calc(var(--help-button-indent-width)*-1);margin-right:calc(var(--help-button-indent-width)*-1)}.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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/components/list-format/ListFormat.d.ts

@@ -1,13 +1,15 @@
 import React from 'react';
 import { InternalLocale } from '../../shared/Context';
+import { UlAllProps } from '../../elements/Ul';
+import { OlAllProps } from '../../elements/Ol';
 export type ListFormatProps = {
     /**
-     * Formatting options for the value.
+     * Formatting options for the value when variant is `text`.
      * See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat
      */
     format?: Intl.ListFormatOptions;
     /**
-     * Defines if the value should be displayed in list format or regular text format on one line.
+     * Defines if the value should be displayed in list format (`ol`, `ul`) or regular text format in one line.
      * Default: `text`
      */
     variant?: 'ol' | 'ul' | 'text';
@@ -29,12 +31,12 @@ export type ListFormatProps = {
      */
     children?: React.ReactNode;
 };
-declare function ListFormat(localProps: ListFormatProps): string | any[] | import("react/jsx-runtime").JSX.Element;
+declare function ListFormat(localProps: Omit<UlAllProps, 'value'> & Omit<OlAllProps, 'value'> & ListFormatProps): string | any[] | import("react/jsx-runtime").JSX.Element;
 declare namespace ListFormat {
     var _supportsSpacingProps: boolean;
 }
 export declare function listFormat(list: Array<React.ReactNode>, { locale, format, }?: {
     locale?: InternalLocale;
-    format?: Intl.ListFormatOptions;
+    format?: ListFormatProps['format'];
 }): string | any[];
 export default ListFormat;