@dnb/eufemia 10.37.0 → 10.39.0

package/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["React","PropTypes","classnames","Context","warn","makeUniqueId","isTrue","extendPropsWithContextInClassComponent","validateDOMAttributes","processChildren","getStatusState","dispatchCustomElementEvent","spacingPropTypes","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","pickFormElementProps","IconPrimary","FormStatus","Anchor","pickIcon","opensNewTab","launch","Tooltip","buttonVariantPropType","variant","oneOf","Button","PureComponent","getContent","props","constructor","_defineProperty","event","afterContent","isValidElement","setState","_id","id","status","tooltip","_ref","createRef","state","componentDidMount","innerRef","current","inner_ref","render","_this$context","_this$context2","_this$context3","_this$context4","_this$context4$theme","defaultProps","skeleton","context","FormRow","formElement","className","size","title","custom_content","status_state","status_props","status_no_animation","globalStatus","disabled","text","_text","icon","_icon","icon_position","icon_size","wrap","bounding","stretch","element","attributes","_objectWithoutProperties","_excluded","showStatus","usedVariant","usedSize","iconSize","content","isIconOnly","Boolean","Element","href","to","omitClass","target","classes","theme","darkBackground","params","_objectSpread","on_click","onClick","onClickHandler","type","undefined","createElement","Fragment","_extends","ref","Content","show","label","text_id","no_animation","targetElement","process","env","NODE_ENV","propTypes","oneOfType","string","node","func","number","bool","object","shape","message","rel","children","_span","key","_span2","_span3","array","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/button/Button.js"],"sourcesContent":["/**\n * Web Button Component\n *\n * This is a legacy component.\n * For referencing while developing new features, please use a Functional component.\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  warn,\n  makeUniqueId,\n  isTrue,\n  extendPropsWithContextInClassComponent,\n  validateDOMAttributes,\n  processChildren,\n  getStatusState,\n  dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport {\n  spacingPropTypes,\n  createSpacingClasses,\n} from '../space/SpacingHelper'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport FormStatus from '../form-status/FormStatus'\nimport Anchor, { pickIcon, opensNewTab } from '../anchor/Anchor'\nimport { launch } from '../../icons'\nimport Tooltip from '../tooltip/Tooltip'\n\nexport const buttonVariantPropType = {\n  variant: PropTypes.oneOf([\n    'primary',\n    'secondary',\n    'tertiary',\n    'signal',\n\n    /**\n     * For internal use only (as of now)\n     */\n    'unstyled',\n  ]),\n}\n\n/**\n * The button component should be used as the call-to-action in a form, or as a user interaction mechanism. Generally speaking, a button should not be used when a link would do the trick. Exceptions are made at times when it is used as a navigation element in the action-nav element.\n */\nexport default class Button extends React.PureComponent {\n  static contextType = Context\n\n  static getContent(props) {\n    return processChildren(props)\n  }\n\n  constructor(props) {\n    super(props)\n\n    this._id =\n      props.id || ((props.status || props.tooltip) && makeUniqueId()) // cause we need an id anyway\n    this._ref = React.createRef()\n\n    this.state = { afterContent: null }\n  }\n\n  componentDidMount() {\n    if (this.props.innerRef) {\n      typeof this.props.innerRef === 'function'\n        ? this.props.innerRef(this._ref.current)\n        : (this.props.innerRef.current = this._ref.current)\n    }\n    if (this.props.inner_ref) {\n      typeof this.props.innerRef === 'function'\n        ? this.props.inner_ref(this._ref.current)\n        : (this.props.inner_ref.current = this._ref.current)\n    }\n  }\n\n  onClickHandler = (event) => {\n    const afterContent = dispatchCustomElementEvent(this, 'on_click', {\n      event,\n    })\n    if (afterContent && React.isValidElement(afterContent)) {\n      this.setState({\n        afterContent,\n      })\n    }\n  }\n\n  render() {\n    // use only the props from context, who are available here anyway\n    const props = extendPropsWithContextInClassComponent(\n      this.props,\n      Button.defaultProps,\n      { skeleton: this.context?.skeleton },\n      // Deprecated – can be removed in v11\n      pickFormElementProps(this.context?.FormRow),\n      pickFormElementProps(this.context?.formElement),\n      this.context.Button\n    )\n\n    const {\n      className,\n      variant,\n      size,\n      title,\n      custom_content,\n      tooltip,\n      status,\n      status_state,\n      status_props,\n      status_no_animation,\n      globalStatus,\n      id, // eslint-disable-line\n      disabled,\n      text: _text, // eslint-disable-line\n      icon: _icon, // eslint-disable-line\n      icon_position,\n      icon_size,\n      wrap,\n      bounding, // eslint-disable-line\n      stretch,\n      skeleton,\n      element,\n      inner_ref, // eslint-disable-line\n      innerRef, // eslint-disable-line\n      ...attributes\n    } = props\n\n    const showStatus = getStatusState(status)\n\n    let { text, icon } = props\n    let usedVariant = variant\n    let usedSize = size\n    let iconSize = icon_size\n    const content = Button.getContent(this.props)\n\n    if (\n      variant === 'tertiary' &&\n      (text || content) &&\n      !icon &&\n      icon !== false\n    ) {\n      warn(\n        `Icon required: A Tertiary Button requires an icon to be WCAG compliant in most cases, because variant tertiary has no underline.\n(Override this warning using icon={false}, or consider using one of the other variants)`\n      )\n    }\n\n    // if only has Icon, then resize it and define it as secondary\n    const isIconOnly = Boolean(!text && !content && icon)\n    if (isIconOnly) {\n      if (!usedVariant) {\n        usedVariant = 'secondary'\n      }\n      if (!iconSize && (usedSize === 'default' || usedSize === 'large')) {\n        iconSize = 'medium'\n      }\n      if (!usedSize) {\n        usedSize = 'medium'\n      }\n    } else if (content) {\n      if (!usedVariant) {\n        usedVariant = 'primary'\n      }\n      if (!usedSize) {\n        usedSize = 'default'\n      }\n    }\n    if (!iconSize && variant === 'tertiary' && icon_position === 'top') {\n      iconSize = 'medium'\n    }\n\n    const Element = element\n      ? element\n      : props.href || props.to\n      ? Anchor\n      : 'button'\n    if (Element === Anchor) {\n      attributes.omitClass = true\n      if (opensNewTab(props.target, props.href) && !icon) {\n        icon = launch\n      }\n    }\n\n    const classes = classnames(\n      'dnb-button',\n      `dnb-button--${usedVariant || 'primary'}`,\n      usedSize && usedSize !== 'default' && `dnb-button--size-${usedSize}`,\n      this.context?.theme?.darkBackground &&\n        `dnb-button--on-dark-background`,\n      icon && `dnb-button--icon-position-${icon_position}`,\n      isTrue(stretch) && 'dnb-button--stretch',\n      icon && iconSize && `dnb-button--icon-size-${iconSize}`,\n      (text || content || custom_content) && 'dnb-button--has-text',\n      icon && 'dnb-button--has-icon',\n      wrap && 'dnb-button--wrap',\n      status && `dnb-button__status--${status_state}`,\n      createSkeletonClass(\n        variant === 'tertiary' ? 'font' : 'shape',\n        skeleton,\n        this.context\n      ),\n      createSpacingClasses(props),\n      className,\n      props.href || props.to ? '' : null, // dnb-anchor--no-underline dnb-anchor--no-hover\n      Element === Anchor && 'dnb-anchor--no-style'\n    )\n\n    const params = {\n      className: classes,\n      title,\n      id: this._id,\n      disabled: isTrue(disabled),\n      ...attributes,\n    }\n\n    if (this.props.on_click || this.props.onClick) {\n      params.onClick = this.onClickHandler\n    }\n\n    if (Element !== Anchor && !params.type) {\n      params.type = params.type === '' ? undefined : 'button'\n    }\n\n    skeletonDOMAttributes(params, skeleton, this.context)\n\n    // also used for code markup simulation\n    validateDOMAttributes(this.props, params)\n\n    return (\n      <>\n        <Element ref={this._ref} {...params}>\n          <Content\n            {...this.props}\n            icon={icon}\n            icon_size={iconSize}\n            content={text || content}\n            custom_content={custom_content}\n            isIconOnly={isIconOnly}\n            skeleton={isTrue(skeleton)}\n          />\n        </Element>\n\n        {this.state.afterContent}\n\n        <FormStatus\n          show={showStatus}\n          id={this._id + '-form-status'}\n          globalStatus={globalStatus}\n          label={text}\n          text={status}\n          state={status_state}\n          text_id={this._id + '-status'} // used for \"aria-describedby\"\n          no_animation={status_no_animation}\n          skeleton={skeleton}\n          {...status_props}\n        />\n\n        {tooltip && this._ref && (\n          <Tooltip\n            id={this._id + '-tooltip'}\n            targetElement={this._ref}\n            tooltip={tooltip}\n          />\n        )}\n      </>\n    )\n  }\n}\n\nButton.propTypes = {\n  text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  type: PropTypes.string,\n  title: PropTypes.node,\n  variant: buttonVariantPropType.variant,\n  size: PropTypes.oneOf(['default', 'small', 'medium', 'large']),\n  icon: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.node,\n    PropTypes.func,\n  ]),\n  icon_position: PropTypes.oneOf(['left', 'right', 'top']),\n  icon_size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  tooltip: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.func,\n    PropTypes.node,\n  ]),\n  status: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n    PropTypes.func,\n    PropTypes.node,\n  ]),\n  status_state: PropTypes.string,\n  status_props: PropTypes.object,\n  status_no_animation: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n  ]),\n  globalStatus: PropTypes.shape({\n    id: PropTypes.string,\n    message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  }),\n  id: PropTypes.string,\n  href: PropTypes.string,\n  target: PropTypes.string,\n  rel: PropTypes.string,\n  to: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.object,\n    PropTypes.func,\n  ]),\n  custom_content: PropTypes.node,\n  wrap: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  bounding: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  stretch: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  inner_ref: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),\n\n  className: PropTypes.string,\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),\n  children: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.func,\n    PropTypes.node,\n  ]),\n  element: PropTypes.oneOfType([\n    PropTypes.func,\n    PropTypes.object,\n    PropTypes.node,\n  ]),\n\n  ...spacingPropTypes,\n\n  on_click: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),\n}\n\nButton.defaultProps = {\n  type: null, // set the type because of the anchor/href situation – can be made more smart in future\n  text: null,\n  variant: null,\n  size: null,\n  title: null,\n  icon: null,\n  icon_position: 'right',\n  icon_size: null,\n  href: null,\n  target: null,\n  rel: null,\n  to: null,\n  id: null,\n  custom_content: null,\n  wrap: null,\n  bounding: null,\n  stretch: null,\n  skeleton: null,\n  disabled: null,\n  tooltip: null,\n  status: null,\n  status_state: 'error',\n  status_props: null,\n  status_no_animation: null,\n  globalStatus: null,\n  inner_ref: null,\n\n  className: null,\n  innerRef: null,\n  children: null,\n  element: null,\n\n  on_click: null,\n}\n\nfunction Content({\n  title,\n  content,\n  custom_content,\n  icon,\n  icon_size,\n  bounding,\n  skeleton,\n  isIconOnly,\n}) {\n  return (\n    <>\n      {isTrue(bounding) && (\n        <span key=\"button-bounding\" className=\"dnb-button__bounding\" />\n      )}\n\n      {custom_content && (\n        <React.Fragment key=\"button-custom-content\">\n          {custom_content}\n        </React.Fragment>\n      )}\n\n      {content && (\n        <>\n          <span\n            key=\"button-alignment\"\n            className=\"dnb-button__alignment\"\n            aria-hidden\n          >\n            &zwnj;\n          </span>\n          <span\n            key=\"button-text\"\n            className=\"dnb-button__text dnb-skeleton--show-font\"\n          >\n            {content}\n          </span>\n        </>\n      )}\n\n      {\n        // on empty text, use a zero-width non-joiner\n        // so the icon button gets vertical aligned\n        // we need the dnb-button__text for alignment\n        !content && icon && (\n          <span\n            key=\"button-alignment\"\n            className=\"dnb-button__alignment\"\n            aria-hidden\n          >\n            &zwnj;\n          </span>\n        )\n      }\n\n      {icon &&\n        (pickIcon(icon, 'dnb-button__icon') || (\n          <IconPrimary\n            key=\"button-icon\"\n            className=\"dnb-button__icon\"\n            icon={icon}\n            size={icon_size}\n            aria-hidden={isIconOnly && !title ? null : true}\n            skeleton={skeleton}\n          />\n        ))}\n    </>\n  )\n}\n\nContent.propTypes = {\n  title: PropTypes.node,\n  custom_content: PropTypes.node,\n  content: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.array,\n    PropTypes.node,\n  ]),\n  icon: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.node,\n    PropTypes.func,\n  ]),\n  icon_size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  bounding: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  skeleton: PropTypes.bool,\n  isIconOnly: PropTypes.bool,\n}\n\nContent.defaultProps = {\n  custom_content: null,\n  title: null,\n  content: null,\n  icon: null,\n  icon_size: 'default',\n  bounding: null,\n  skeleton: null,\n  isIconOnly: null,\n}\n\nButton._formElement = true\nButton._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"Button.js","names":["React","PropTypes","classnames","Context","warn","makeUniqueId","isTrue","extendPropsWithContextInClassComponent","validateDOMAttributes","processChildren","getStatusState","dispatchCustomElementEvent","spacingPropTypes","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","pickFormElementProps","IconPrimary","FormStatus","Anchor","pickIcon","opensNewTab","launch","Tooltip","buttonVariantPropType","variant","oneOf","Button","PureComponent","getContent","props","constructor","_defineProperty","event","afterContent","isValidElement","setState","_id","id","status","tooltip","_ref","createRef","state","componentDidMount","innerRef","current","inner_ref","render","_this$context","_this$context2","_this$context3","_this$context4","_this$context4$theme","defaultProps","skeleton","context","FormRow","formElement","class","classProp","className","size","title","custom_content","status_state","status_props","status_no_animation","globalStatus","disabled","text","_text","icon","_icon","icon_position","icon_size","wrap","bounding","stretch","element","attributes","_objectWithoutProperties","_excluded","showStatus","usedVariant","usedSize","iconSize","content","isIconOnly","Boolean","Element","href","to","omitClass","target","classes","theme","darkBackground","params","_objectSpread","on_click","onClick","onClickHandler","type","undefined","createElement","Fragment","_extends","ref","Content","show","label","text_id","no_animation","targetElement","process","env","NODE_ENV","propTypes","oneOfType","string","node","func","number","bool","object","shape","message","rel","children","_span","key","_span2","_span3","array","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/button/Button.js"],"sourcesContent":["/**\n * Web Button Component\n *\n * This is a legacy component.\n * For referencing while developing new features, please use a Functional component.\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  warn,\n  makeUniqueId,\n  isTrue,\n  extendPropsWithContextInClassComponent,\n  validateDOMAttributes,\n  processChildren,\n  getStatusState,\n  dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport {\n  spacingPropTypes,\n  createSpacingClasses,\n} from '../space/SpacingHelper'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport FormStatus from '../form-status/FormStatus'\nimport Anchor, { pickIcon, opensNewTab } from '../anchor/Anchor'\nimport { launch } from '../../icons'\nimport Tooltip from '../tooltip/Tooltip'\n\nexport const buttonVariantPropType = {\n  variant: PropTypes.oneOf([\n    'primary',\n    'secondary',\n    'tertiary',\n    'signal',\n\n    /**\n     * For internal use only (as of now)\n     */\n    'unstyled',\n  ]),\n}\n\n/**\n * The button component should be used as the call-to-action in a form, or as a user interaction mechanism. Generally speaking, a button should not be used when a link would do the trick. Exceptions are made at times when it is used as a navigation element in the action-nav element.\n */\nexport default class Button extends React.PureComponent {\n  static contextType = Context\n\n  static getContent(props) {\n    return processChildren(props)\n  }\n\n  constructor(props) {\n    super(props)\n\n    this._id =\n      props.id || ((props.status || props.tooltip) && makeUniqueId()) // cause we need an id anyway\n    this._ref = React.createRef()\n\n    this.state = { afterContent: null }\n  }\n\n  componentDidMount() {\n    if (this.props.innerRef) {\n      typeof this.props.innerRef === 'function'\n        ? this.props.innerRef(this._ref.current)\n        : (this.props.innerRef.current = this._ref.current)\n    }\n    if (this.props.inner_ref) {\n      typeof this.props.innerRef === 'function'\n        ? this.props.inner_ref(this._ref.current)\n        : (this.props.inner_ref.current = this._ref.current)\n    }\n  }\n\n  onClickHandler = (event) => {\n    const afterContent = dispatchCustomElementEvent(this, 'on_click', {\n      event,\n    })\n    if (afterContent && React.isValidElement(afterContent)) {\n      this.setState({\n        afterContent,\n      })\n    }\n  }\n\n  render() {\n    // use only the props from context, who are available here anyway\n    const props = extendPropsWithContextInClassComponent(\n      this.props,\n      Button.defaultProps,\n      { skeleton: this.context?.skeleton },\n      // Deprecated – can be removed in v11\n      pickFormElementProps(this.context?.FormRow),\n      pickFormElementProps(this.context?.formElement),\n      this.context.Button\n    )\n\n    const {\n      class: classProp, // @deprecated – can be removed in v11\n      className,\n      variant,\n      size,\n      title,\n      custom_content,\n      tooltip,\n      status,\n      status_state,\n      status_props,\n      status_no_animation,\n      globalStatus,\n      id, // eslint-disable-line\n      disabled,\n      text: _text, // eslint-disable-line\n      icon: _icon, // eslint-disable-line\n      icon_position,\n      icon_size,\n      wrap,\n      bounding, // eslint-disable-line\n      stretch,\n      skeleton,\n      element,\n      inner_ref, // eslint-disable-line\n      innerRef, // eslint-disable-line\n      ...attributes\n    } = props\n\n    const showStatus = getStatusState(status)\n\n    let { text, icon } = props\n    let usedVariant = variant\n    let usedSize = size\n    let iconSize = icon_size\n    const content = Button.getContent(this.props)\n\n    if (\n      variant === 'tertiary' &&\n      (text || content) &&\n      !icon &&\n      icon !== false\n    ) {\n      warn(\n        `Icon required: A Tertiary Button requires an icon to be WCAG compliant in most cases, because variant tertiary has no underline.\n(Override this warning using icon={false}, or consider using one of the other variants)`\n      )\n    }\n\n    // if only has Icon, then resize it and define it as secondary\n    const isIconOnly = Boolean(!text && !content && icon)\n    if (isIconOnly) {\n      if (!usedVariant) {\n        usedVariant = 'secondary'\n      }\n      if (!iconSize && (usedSize === 'default' || usedSize === 'large')) {\n        iconSize = 'medium'\n      }\n      if (!usedSize) {\n        usedSize = 'medium'\n      }\n    } else if (content) {\n      if (!usedVariant) {\n        usedVariant = 'primary'\n      }\n      if (!usedSize) {\n        usedSize = 'default'\n      }\n    }\n    if (!iconSize && variant === 'tertiary' && icon_position === 'top') {\n      iconSize = 'medium'\n    }\n\n    const Element = element\n      ? element\n      : props.href || props.to\n      ? Anchor\n      : 'button'\n    if (Element === Anchor) {\n      attributes.omitClass = true\n      if (opensNewTab(props.target, props.href) && !icon) {\n        icon = launch\n      }\n    }\n\n    const classes = classnames(\n      'dnb-button',\n      `dnb-button--${usedVariant || 'primary'}`,\n      usedSize && usedSize !== 'default' && `dnb-button--size-${usedSize}`,\n      this.context?.theme?.darkBackground &&\n        `dnb-button--on-dark-background`,\n      icon && `dnb-button--icon-position-${icon_position}`,\n      isTrue(stretch) && 'dnb-button--stretch',\n      icon && iconSize && `dnb-button--icon-size-${iconSize}`,\n      (text || content || custom_content) && 'dnb-button--has-text',\n      icon && 'dnb-button--has-icon',\n      wrap && 'dnb-button--wrap',\n      status && `dnb-button__status--${status_state}`,\n      createSkeletonClass(\n        variant === 'tertiary' ? 'font' : 'shape',\n        skeleton,\n        this.context\n      ),\n      createSpacingClasses(props),\n      classProp, // @deprecated – can be removed in v11\n      className,\n      props.href || props.to ? '' : null, // dnb-anchor--no-underline dnb-anchor--no-hover\n      Element === Anchor && 'dnb-anchor--no-style'\n    )\n\n    const params = {\n      className: classes,\n      title,\n      id: this._id,\n      disabled: isTrue(disabled),\n      ...attributes,\n    }\n\n    if (this.props.on_click || this.props.onClick) {\n      params.onClick = this.onClickHandler\n    }\n\n    if (Element !== Anchor && !params.type) {\n      params.type = params.type === '' ? undefined : 'button'\n    }\n\n    skeletonDOMAttributes(params, skeleton, this.context)\n\n    // also used for code markup simulation\n    validateDOMAttributes(this.props, params)\n\n    return (\n      <>\n        <Element ref={this._ref} {...params}>\n          <Content\n            {...this.props}\n            icon={icon}\n            icon_size={iconSize}\n            content={text || content}\n            custom_content={custom_content}\n            isIconOnly={isIconOnly}\n            skeleton={isTrue(skeleton)}\n          />\n        </Element>\n\n        {this.state.afterContent}\n\n        <FormStatus\n          show={showStatus}\n          id={this._id + '-form-status'}\n          globalStatus={globalStatus}\n          label={text}\n          text={status}\n          state={status_state}\n          text_id={this._id + '-status'} // used for \"aria-describedby\"\n          no_animation={status_no_animation}\n          skeleton={skeleton}\n          {...status_props}\n        />\n\n        {tooltip && this._ref && (\n          <Tooltip\n            id={this._id + '-tooltip'}\n            targetElement={this._ref}\n            tooltip={tooltip}\n          />\n        )}\n      </>\n    )\n  }\n}\n\nButton.propTypes = {\n  text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  type: PropTypes.string,\n  title: PropTypes.node,\n  variant: buttonVariantPropType.variant,\n  size: PropTypes.oneOf(['default', 'small', 'medium', 'large']),\n  icon: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.node,\n    PropTypes.func,\n  ]),\n  icon_position: PropTypes.oneOf(['left', 'right', 'top']),\n  icon_size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  tooltip: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.func,\n    PropTypes.node,\n  ]),\n  status: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n    PropTypes.func,\n    PropTypes.node,\n  ]),\n  status_state: PropTypes.string,\n  status_props: PropTypes.object,\n  status_no_animation: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n  ]),\n  globalStatus: PropTypes.shape({\n    id: PropTypes.string,\n    message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  }),\n  id: PropTypes.string,\n  href: PropTypes.string,\n  target: PropTypes.string,\n  rel: PropTypes.string,\n  to: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.object,\n    PropTypes.func,\n  ]),\n  custom_content: PropTypes.node,\n  wrap: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  bounding: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  stretch: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  inner_ref: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),\n  className: PropTypes.string,\n  /**\n   * @deprecated – use className instead. Will be removed in v11.\n   */\n  class: PropTypes.string,\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),\n  children: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.func,\n    PropTypes.node,\n  ]),\n  element: PropTypes.oneOfType([\n    PropTypes.func,\n    PropTypes.object,\n    PropTypes.node,\n  ]),\n\n  ...spacingPropTypes,\n\n  on_click: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),\n}\n\nButton.defaultProps = {\n  type: null, // set the type because of the anchor/href situation – can be made more smart in future\n  text: null,\n  variant: null,\n  size: null,\n  title: null,\n  icon: null,\n  icon_position: 'right',\n  icon_size: null,\n  href: null,\n  target: null,\n  rel: null,\n  to: null,\n  id: null,\n  custom_content: null,\n  wrap: null,\n  bounding: null,\n  stretch: null,\n  skeleton: null,\n  disabled: null,\n  tooltip: null,\n  status: null,\n  status_state: 'error',\n  status_props: null,\n  status_no_animation: null,\n  globalStatus: null,\n  inner_ref: null,\n\n  className: null,\n  /**\n   * @deprecated – use className instead. Will be removed in v11.\n   */\n  class: null,\n  innerRef: null,\n  children: null,\n  element: null,\n\n  on_click: null,\n}\n\nfunction Content({\n  title,\n  content,\n  custom_content,\n  icon,\n  icon_size,\n  bounding,\n  skeleton,\n  isIconOnly,\n}) {\n  return (\n    <>\n      {isTrue(bounding) && (\n        <span key=\"button-bounding\" className=\"dnb-button__bounding\" />\n      )}\n\n      {custom_content && (\n        <React.Fragment key=\"button-custom-content\">\n          {custom_content}\n        </React.Fragment>\n      )}\n\n      {content && (\n        <>\n          <span\n            key=\"button-alignment\"\n            className=\"dnb-button__alignment\"\n            aria-hidden\n          >\n            &zwnj;\n          </span>\n          <span\n            key=\"button-text\"\n            className=\"dnb-button__text dnb-skeleton--show-font\"\n          >\n            {content}\n          </span>\n        </>\n      )}\n\n      {\n        // on empty text, use a zero-width non-joiner\n        // so the icon button gets vertical aligned\n        // we need the dnb-button__text for alignment\n        !content && icon && (\n          <span\n            key=\"button-alignment\"\n            className=\"dnb-button__alignment\"\n            aria-hidden\n          >\n            &zwnj;\n          </span>\n        )\n      }\n\n      {icon &&\n        (pickIcon(icon, 'dnb-button__icon') || (\n          <IconPrimary\n            key=\"button-icon\"\n            className=\"dnb-button__icon\"\n            icon={icon}\n            size={icon_size}\n            aria-hidden={isIconOnly && !title ? null : true}\n            skeleton={skeleton}\n          />\n        ))}\n    </>\n  )\n}\n\nContent.propTypes = {\n  title: PropTypes.node,\n  custom_content: PropTypes.node,\n  content: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.array,\n    PropTypes.node,\n  ]),\n  icon: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.node,\n    PropTypes.func,\n  ]),\n  icon_size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  bounding: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  skeleton: PropTypes.bool,\n  isIconOnly: PropTypes.bool,\n}\n\nContent.defaultProps = {\n  custom_content: null,\n  title: null,\n  content: null,\n  icon: null,\n  icon_size: 'default',\n  bounding: null,\n  skeleton: null,\n  isIconOnly: null,\n}\n\nButton._formElement = true\nButton._supportsSpacingProps = true\n"],"mappings":"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"}

package/components/card/Card.js

@@ -1,7 +1,7 @@
 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 = ["className", "stack", "direction", "gap", "spacing", "innerSpace", "alignSelf", "divider", "rowGap", "responsive", "filled", "title", "children"];
+const _excluded = ["className", "stack", "direction", "gap", "spacing", "innerSpace", "alignSelf", "align", "divider", "rowGap", "responsive", "filled", "title", "children"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React from 'react';
@@ -20,6 +20,7 @@ function Card(props) {
       spacing,
       innerSpace,
       alignSelf = 'stretch',
+      align,
       divider = 'space',
       rowGap,
       responsive = true,
@@ -53,7 +54,7 @@ function Card(props) {
     className: classnames('dnb-card', className, responsive && 'dnb-card--responsive', filled && 'dnb-card--filled'),
     breakout: responsive ? trueWhenSmall : false,
     roundedCorner: responsive ? falseWhenSmall : true,
-    outline: true,
+    outline: '--outline-card-color',
     innerSpace: innerSpace !== null && innerSpace !== void 0 ? innerSpace : {
       small: smallSpace,
       medium: basisSpace,
@@ -69,7 +70,7 @@ function Card(props) {
     direction: direction !== null && direction !== void 0 ? direction : 'vertical',
     divider: divider,
     alignSelf: alignSelf,
-    align: stack ? 'stretch' : undefined,
+    align: stack ? 'stretch' : align,
     wrap: !stack,
     gap: stack ? 'medium' : (gap !== null && gap !== void 0 ? gap : spacing) || false,
     rowGap: rowGap || false

package/components/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":["React","classnames","Flex","SectionParams","combineLabelledBy","useId","Space","Card","props","className","stack","direction","gap","spacing","innerSpace","alignSelf","divider","rowGap","responsive","filled","title","children","rest","_objectWithoutProperties","_excluded","titleId","falseWhenSmall","small","medium","large","trueWhenSmall","basisSpace","top","right","bottom","left","smallSpace","_objectSpread","params","breakout","roundedCorner","outline","createElement","Item","_extends","element","Container","align","undefined","wrap","id","_supportsSpacingProps"],"sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport Flex from '../flex/Flex'\nimport { SectionParams, SectionProps } from '../section/Section'\nimport { combineLabelledBy } from '../../shared/component-helper'\nimport useId from '../../shared/helpers/useId'\n\nimport type { BasicProps as FlexContainerProps } from '../flex/Container'\nimport type { BasicProps as FlexItemProps } from '../flex/Item'\nimport type { SpaceTypeMedia } from '../../shared/types'\nimport type { SpaceProps } from '../Space'\nimport Space from '../Space'\n\nexport type Props = {\n  /**\n   * Define a title that appears on top of the Card\n   */\n  title?: React.ReactNode\n\n  /**\n   * Define if the Card should behave responsive. Defaults to `true`\n   */\n  responsive?: boolean\n\n  /**\n   * Define if the Card should get the same background color as the outline border\n   */\n  filled?: boolean\n} & FlexContainerProps &\n  FlexItemProps & {\n    stack?: boolean\n  } & SpaceProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref' | 'wrap' | 'size'>\n\nfunction Card(props: Props) {\n  const {\n    className,\n    stack,\n    direction,\n    gap,\n    spacing,\n    innerSpace,\n    alignSelf = 'stretch',\n    divider = 'space',\n    rowGap,\n    responsive = true,\n    filled,\n    title,\n    children,\n    ...rest\n  } = props\n\n  const titleId = useId()\n  const falseWhenSmall = { small: false, medium: true, large: true }\n  const trueWhenSmall = { small: true, medium: false, large: false }\n  const basisSpace = {\n    top: 'medium',\n    right: 'medium',\n    bottom: 'large',\n    left: 'medium',\n  }\n  const smallSpace = responsive\n    ? {\n        ...basisSpace,\n        right: 0,\n        left: 0,\n      }\n    : basisSpace\n\n  const params = SectionParams({\n    className: classnames(\n      'dnb-card',\n      className,\n      responsive && 'dnb-card--responsive',\n      filled && 'dnb-card--filled'\n    ),\n    breakout: responsive ? trueWhenSmall : false,\n    roundedCorner: responsive ? falseWhenSmall : true,\n    outline: true,\n    innerSpace:\n      innerSpace ??\n      ({\n        small: smallSpace,\n        medium: basisSpace,\n        large: basisSpace,\n      } as SpaceTypeMedia),\n    ...(rest as SectionProps),\n    'aria-labelledby': combineLabelledBy(rest, title && titleId),\n  })\n\n  return (\n    <Flex.Item alignSelf={alignSelf} element=\"section\" {...params}>\n      <Flex.Container\n        direction={direction ?? 'vertical'}\n        divider={divider}\n        alignSelf={alignSelf}\n        align={stack ? 'stretch' : undefined}\n        wrap={!stack}\n        gap={stack ? 'medium' : (gap ?? spacing) || false}\n        rowGap={rowGap || false}\n      >\n        {title && (\n          <Space id={titleId} className=\"dnb-card__title\">\n            {title}\n          </Space>\n        )}\n        {children}\n      </Flex.Container>\n    </Flex.Item>\n  )\n}\n\nCard._supportsSpacingProps = true\n\nexport default Card\n"],"mappings":"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"}
+{"version":3,"file":"Card.js","names":["React","classnames","Flex","SectionParams","combineLabelledBy","useId","Space","Card","props","className","stack","direction","gap","spacing","innerSpace","alignSelf","align","divider","rowGap","responsive","filled","title","children","rest","_objectWithoutProperties","_excluded","titleId","falseWhenSmall","small","medium","large","trueWhenSmall","basisSpace","top","right","bottom","left","smallSpace","_objectSpread","params","breakout","roundedCorner","outline","createElement","Item","_extends","element","Container","wrap","id","_supportsSpacingProps"],"sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport Flex from '../flex/Flex'\nimport { SectionParams, SectionProps } from '../section/Section'\nimport { combineLabelledBy } from '../../shared/component-helper'\nimport useId from '../../shared/helpers/useId'\n\nimport type { BasicProps as FlexContainerProps } from '../flex/Container'\nimport type { BasicProps as FlexItemProps } from '../flex/Item'\nimport type { SpaceTypeMedia } from '../../shared/types'\nimport type { SpaceProps } from '../Space'\nimport Space from '../Space'\n\nexport type Props = {\n  /**\n   * Define a title that appears on top of the Card\n   */\n  title?: React.ReactNode\n\n  /**\n   * Define if the Card should behave responsive. Defaults to `true`\n   */\n  responsive?: boolean\n\n  /**\n   * Define if the Card should get the same background color as the outline border\n   */\n  filled?: boolean\n} & FlexContainerProps &\n  FlexItemProps & {\n    stack?: boolean\n  } & SpaceProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref' | 'wrap' | 'size'>\n\nfunction Card(props: Props) {\n  const {\n    className,\n    stack,\n    direction,\n    gap,\n    spacing,\n    innerSpace,\n    alignSelf = 'stretch',\n    align,\n    divider = 'space',\n    rowGap,\n    responsive = true,\n    filled,\n    title,\n    children,\n    ...rest\n  } = props\n\n  const titleId = useId()\n  const falseWhenSmall = { small: false, medium: true, large: true }\n  const trueWhenSmall = { small: true, medium: false, large: false }\n  const basisSpace = {\n    top: 'medium',\n    right: 'medium',\n    bottom: 'large',\n    left: 'medium',\n  }\n  const smallSpace = responsive\n    ? {\n        ...basisSpace,\n        right: 0,\n        left: 0,\n      }\n    : basisSpace\n\n  const params = SectionParams({\n    className: classnames(\n      'dnb-card',\n      className,\n      responsive && 'dnb-card--responsive',\n      filled && 'dnb-card--filled'\n    ),\n    breakout: responsive ? trueWhenSmall : false,\n    roundedCorner: responsive ? falseWhenSmall : true,\n    outline: '--outline-card-color',\n    innerSpace:\n      innerSpace ??\n      ({\n        small: smallSpace,\n        medium: basisSpace,\n        large: basisSpace,\n      } as SpaceTypeMedia),\n    ...(rest as SectionProps),\n    'aria-labelledby': combineLabelledBy(rest, title && titleId),\n  })\n\n  return (\n    <Flex.Item alignSelf={alignSelf} element=\"section\" {...params}>\n      <Flex.Container\n        direction={direction ?? 'vertical'}\n        divider={divider}\n        alignSelf={alignSelf}\n        align={stack ? 'stretch' : align}\n        wrap={!stack}\n        gap={stack ? 'medium' : (gap ?? spacing) || false}\n        rowGap={rowGap || false}\n      >\n        {title && (\n          <Space id={titleId} className=\"dnb-card__title\">\n            {title}\n          </Space>\n        )}\n        {children}\n      </Flex.Container>\n    </Flex.Item>\n  )\n}\n\nCard._supportsSpacingProps = true\n\nexport default Card\n"],"mappings":"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"}

package/components/card/style/dnb-card.css

@@ -17,8 +17,24 @@
   padding: 1rem;
 }
 .dnb-card.dnb-section {
+  --outline-color: var(--card-outline-color);
+  --outline-width: var(--card-outline-width);
+  --background-color: var(--card-background-color);
   background-color: var(--background-color);
 }
+.dnb-card .dnb-section {
+  z-index: 1;
+}
+@media screen and (min-width: 40em) {
+  .dnb-card {
+    --nested-space-l: calc(var(--padding-left, 0px) * -1);
+    --nested-space-r: calc(var(--padding-right, 0px) * -1);
+  }
+  .dnb-card .dnb-section::after {
+    --left: var(--nested-space-l);
+    --width: calc(100% - var(--nested-space-r) * 2);
+  }
+}
 .dnb-card--filled.dnb-card.dnb-section {
   --background-color: var(--outline-color);
 }

package/components/card/style/dnb-card.min.css

@@ -1 +1 @@
-.dnb-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-card+.dnb-card__heading{margin-top:var(--spacing-small)}.dnb-card__title{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);padding-bottom:1rem}.dnb-card:not([style*="--space-"]) .dnb-card__title{padding:1rem}.dnb-card.dnb-section{background-color:var(--background-color)}.dnb-card--filled.dnb-card.dnb-section{--background-color:var(--outline-color)}@media screen and (max-width:40em){.dnb-card--responsive.dnb-section:before{--outline:99vw 0 0 0 var(--background-color),198vw 0 0 0 var(--background-color),297vw 0 0 0 var(--background-color),396vw 0 0 0 var(--background-color),0 var(--outline-width) 0 0 var(--outline-color),99vw var(--outline-width) 0 0 var(--outline-color),0 calc(var(--outline-width)*-1) 0 0 var(--outline-color),99vw calc(var(--outline-width)*-1) 0 0 var(--outline-color),198vw var(--outline-width) 0 0 var(--outline-color),198vw calc(var(--outline-width)*-1) 0 0 var(--outline-color);left:var(--left)}.dnb-card+.dnb-card--responsive:not([class*=space__top]){background:linear-gradient(to left,var(--background-color),var(--background-color)) no-repeat 0 var(--outline-width)}.dnb-card+.dnb-card--responsive:not([class*=space__top]):before{top:var(--outline-width)}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card--responsive{margin-top:0}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card--responsive:before{top:var(--outline-width);z-index:0}}.dnb-card .dnb-flex-container:has(>.dnb-card__title+.dnb-scroll-view){align-items:stretch;flex-wrap:nowrap}.dnb-card--filled .dnb-scroll-view{clip-path:inset(0 0 0 0 round var(--rounded-corner) var(--rounded-corner) var(--rounded-corner) var(--rounded-corner))}.dnb-card>.dnb-flex-container>.dnb-space:has(>.dnb-scroll-view){width:100%}.dnb-card>.dnb-flex-container--align-stretch>.dnb-button{align-self:flex-start}
+.dnb-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-card+.dnb-card__heading{margin-top:var(--spacing-small)}.dnb-card__title{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);padding-bottom:1rem}.dnb-card:not([style*="--space-"]) .dnb-card__title{padding:1rem}.dnb-card.dnb-section{--outline-color:var(--card-outline-color);--outline-width:var(--card-outline-width);--background-color:var(--card-background-color);background-color:var(--background-color)}.dnb-card .dnb-section{z-index:1}@media screen and (min-width:40em){.dnb-card{--nested-space-l:calc(var(--padding-left, 0px)*-1);--nested-space-r:calc(var(--padding-right, 0px)*-1)}.dnb-card .dnb-section:after{--left:var(--nested-space-l);--width:calc(100% - var(--nested-space-r)*2)}}.dnb-card--filled.dnb-card.dnb-section{--background-color:var(--outline-color)}@media screen and (max-width:40em){.dnb-card--responsive.dnb-section:before{--outline:99vw 0 0 0 var(--background-color),198vw 0 0 0 var(--background-color),297vw 0 0 0 var(--background-color),396vw 0 0 0 var(--background-color),0 var(--outline-width) 0 0 var(--outline-color),99vw var(--outline-width) 0 0 var(--outline-color),0 calc(var(--outline-width)*-1) 0 0 var(--outline-color),99vw calc(var(--outline-width)*-1) 0 0 var(--outline-color),198vw var(--outline-width) 0 0 var(--outline-color),198vw calc(var(--outline-width)*-1) 0 0 var(--outline-color);left:var(--left)}.dnb-card+.dnb-card--responsive:not([class*=space__top]){background:linear-gradient(to left,var(--background-color),var(--background-color)) no-repeat 0 var(--outline-width)}.dnb-card+.dnb-card--responsive:not([class*=space__top]):before{top:var(--outline-width)}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card--responsive{margin-top:0}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card--responsive:before{top:var(--outline-width);z-index:0}}.dnb-card .dnb-flex-container:has(>.dnb-card__title+.dnb-scroll-view){align-items:stretch;flex-wrap:nowrap}.dnb-card--filled .dnb-scroll-view{clip-path:inset(0 0 0 0 round var(--rounded-corner) var(--rounded-corner) var(--rounded-corner) var(--rounded-corner))}.dnb-card>.dnb-flex-container>.dnb-space:has(>.dnb-scroll-view){width:100%}.dnb-card>.dnb-flex-container--align-stretch>.dnb-button{align-self:flex-start}

package/components/card/style/dnb-card.scss

@@ -20,9 +20,26 @@
   }
 
   &.dnb-section {
+    --outline-color: var(--card-outline-color);
+    --outline-width: var(--card-outline-width);
+    --background-color: var(--card-background-color);
+
     background-color: var(--background-color);
   }
 
+  & .dnb-section {
+    z-index: 1;
+  }
+  @include allAbove(small) {
+    // These vars needs to be declared outside of the nested .dnb-section
+    --nested-space-l: calc(var(--padding-left, 0px) * -1);
+    --nested-space-r: calc(var(--padding-right, 0px) * -1);
+    & .dnb-section::after {
+      --left: var(--nested-space-l);
+      --width: calc(100% - var(--nested-space-r) * 2);
+    }
+  }
+
   &--filled#{&}.dnb-section {
     --background-color: var(--outline-color);
   }

package/components/card/style/themes/dnb-card-theme-sbanken.css

@@ -1,5 +1,5 @@
-.dnb-card.dnb-section {
-  --outline-color: var(--border-color, var(--sb-color-gray-light));
-  --outline-width: 0.0625rem;
-  --background-color: var(--sb-color-white);
+.dnb-card {
+  --card-outline-color: var(--border-color, var(--sb-color-gray-light));
+  --card-outline-width: 0.0625rem;
+  --card-background-color: var(--sb-color-white);
 }

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

@@ -1 +1 @@
-.dnb-card.dnb-section{--outline-color:var(--border-color,var(--sb-color-gray-light));--outline-width:0.0625rem;--background-color:var(--sb-color-white)}
+.dnb-card{--card-outline-color:var(--border-color,var(--sb-color-gray-light));--card-outline-width:0.0625rem;--card-background-color:var(--sb-color-white)}

package/components/card/style/themes/dnb-card-theme-sbanken.scss

@@ -1,7 +1,5 @@
 .dnb-card {
-  &.dnb-section {
-    --outline-color: var(--border-color, var(--sb-color-gray-light));
-    --outline-width: 0.0625rem;
-    --background-color: var(--sb-color-white);
-  }
+  --card-outline-color: var(--border-color, var(--sb-color-gray-light));
+  --card-outline-width: 0.0625rem;
+  --card-background-color: var(--sb-color-white);
 }

package/components/card/style/themes/dnb-card-theme-ui.css

@@ -1,8 +1,5 @@
-/*
- * Utilities
- */
-.dnb-card.dnb-section {
-  --outline-color: var(--border-color, var(--color-lavender));
-  --outline-width: 0.25rem;
-  --background-color: var(--color-white);
+.dnb-card {
+  --card-outline-color: var(--border-color, var(--color-lavender));
+  --card-outline-width: 0.25rem;
+  --card-background-color: var(--color-white);
 }

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

@@ -1 +1 @@
-.dnb-card.dnb-section{--outline-color:var(--border-color,var(--color-lavender));--outline-width:0.25rem;--background-color:var(--color-white)}
+.dnb-card{--card-outline-color:var(--border-color,var(--color-lavender));--card-outline-width:0.25rem;--card-background-color:var(--color-white)}

package/components/card/style/themes/dnb-card-theme-ui.scss

@@ -1,9 +1,5 @@
-@import '../../../../style/core/utilities.scss';
-
 .dnb-card {
-  &.dnb-section {
-    --outline-color: var(--border-color, var(--color-lavender));
-    --outline-width: 0.25rem;
-    --background-color: var(--color-white);
-  }
+  --card-outline-color: var(--border-color, var(--color-lavender));
+  --card-outline-width: 0.25rem;
+  --card-background-color: var(--color-white);
 }

package/components/checkbox/style/dnb-checkbox.scss

@@ -243,7 +243,7 @@
    */
 
   // stylelint-disable no-descending-specificity
-  // We prioritise categorisation and readability over specificity here
+  // We prioritize categorisation and readability over specificity here
 
   /** Normal state **/
 

package/components/height-animation/HeightAnimation.d.ts

@@ -34,7 +34,7 @@ export type HeightAnimationProps = {
     innerRef?: React.RefObject<HTMLElement>;
 } & useHeightAnimationOptions;
 export type HeightAnimationAllProps = HeightAnimationProps & SpacingProps & Omit<React.HTMLProps<HTMLElement>, 'ref'>;
-declare function HeightAnimation({ open, animate, keepInDOM, showOverflow, element, duration, delay, className, innerRef, children, onInit, onOpen, onAnimationStart, onAnimationEnd, ...rest }: HeightAnimationAllProps): import("react/jsx-runtime").JSX.Element;
+declare function HeightAnimation({ open, animate, keepInDOM, showOverflow, element, duration, delay, className, innerRef, children, compensateForGap, onInit, onOpen, onAnimationStart, onAnimationEnd, ...rest }: HeightAnimationAllProps): import("react/jsx-runtime").JSX.Element;
 declare namespace HeightAnimation {
     var _supportsSpacingProps: string;
 }

package/components/height-animation/HeightAnimation.js

@@ -3,7 +3,7 @@
 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 = ["open", "animate", "keepInDOM", "showOverflow", "element", "duration", "delay", "className", "innerRef", "children", "onInit", "onOpen", "onAnimationStart", "onAnimationEnd"];
+const _excluded = ["open", "animate", "keepInDOM", "showOverflow", "element", "duration", "delay", "className", "innerRef", "children", "compensateForGap", "onInit", "onOpen", "onAnimationStart", "onAnimationEnd"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useRef } from 'react';
@@ -22,6 +22,7 @@ function HeightAnimation(_ref) {
       className,
       innerRef,
       children,
+      compensateForGap,
       onInit = null,
       onOpen = null,
       onAnimationStart = null,
@@ -40,6 +41,7 @@ function HeightAnimation(_ref) {
     open,
     animate,
     children,
+    compensateForGap,
     onInit,
     onOpen,
     onAnimationStart,
@@ -60,7 +62,9 @@ function HeightAnimation(_ref) {
     className: classnames('dnb-height-animation', className, isVisible ? 'dnb-height-animation--is-visible' : !isAnimating && !open && 'dnb-height-animation--hidden', isInDOM && 'dnb-height-animation--is-in-dom', animate && isVisibleParallax && 'dnb-height-animation--parallax', isAnimating && 'dnb-height-animation--animating', showOverflow && 'dnb-height-animation--show-overflow'),
     style: _objectSpread(_objectSpread({}, firstPaintStyle), rest === null || rest === void 0 ? void 0 : rest.style),
     "aria-hidden": keepInDOM ? !open : undefined
-  }, rest), children);
+  }, rest), compensateForGap ? React.createElement("div", {
+    className: "compensateForGap"
+  }, children) : children);
 }
 HeightAnimation._supportsSpacingProps = 'children';
 export default HeightAnimation;

package/components/height-animation/HeightAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeightAnimation.js","names":["React","useRef","classnames","useHeightAnimation","Space","HeightAnimation","_ref","open","animate","keepInDOM","showOverflow","element","duration","delay","className","innerRef","children","onInit","onOpen","onAnimationStart","onAnimationEnd","rest","_objectWithoutProperties","_excluded","elementRef","targetRef","isInDOM","isVisible","isVisibleParallax","isAnimating","firstPaintStyle","createElement","_extends","style","_objectSpread","undefined","_supportsSpacingProps"],"sources":["../../../../src/components/height-animation/HeightAnimation.tsx"],"sourcesContent":["import React, { useRef } from 'react'\nimport classnames from 'classnames'\nimport {\n  useHeightAnimation,\n  useHeightAnimationOptions,\n} from './useHeightAnimation'\nimport Space from '../space/Space'\n\nimport type { DynamicElement, SpacingProps } from '../../shared/types'\n\nexport type HeightAnimationProps = {\n  /**\n   * Whether the nested children content should be kept in the DOM or not.\n   * Default: false\n   */\n  keepInDOM?: boolean\n\n  /**\n   * Set to `true` to omit the usage of \"overflow: hidden;\"\n   * Default: false\n   */\n  showOverflow?: boolean\n\n  /**\n   * Defines the duration of the animation in milliseconds.\n   * Default: 400\n   */\n  duration?: number\n\n  /**\n   * Defines the delay of the animation in milliseconds.\n   * Default: 0\n   */\n  delay?: number\n\n  /**\n   * Define a custom HTML Element.\n   * Default: div\n   */\n  element?: DynamicElement\n\n  /**\n   * Send along a custom React Ref.\n   * Default: null\n   */\n  innerRef?: React.RefObject<HTMLElement>\n} & useHeightAnimationOptions\n\nexport type HeightAnimationAllProps = HeightAnimationProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\nfunction HeightAnimation({\n  open = true,\n  animate = true,\n  keepInDOM = false,\n  showOverflow = false,\n  element,\n  duration,\n  delay,\n  className,\n  innerRef,\n  children,\n  onInit = null,\n  onOpen = null,\n  onAnimationStart = null,\n  onAnimationEnd = null,\n  ...rest\n}: HeightAnimationAllProps) {\n  const elementRef = useRef<HTMLElement>()\n  const targetRef = innerRef || elementRef\n\n  const {\n    isInDOM,\n    isVisible,\n    isVisibleParallax,\n    isAnimating,\n    firstPaintStyle,\n  } = useHeightAnimation(targetRef, {\n    open,\n    animate,\n    children,\n    onInit,\n    onOpen,\n    onAnimationStart,\n    onAnimationEnd,\n  })\n\n  if (!keepInDOM && !isInDOM && !isAnimating) {\n    return null\n  }\n\n  if (duration) {\n    firstPaintStyle['--duration'] = `${duration}ms`\n  }\n  if (delay) {\n    firstPaintStyle['--delay'] = `${delay}ms`\n  }\n\n  return (\n    <Space\n      innerRef={targetRef}\n      element={element || 'div'}\n      className={classnames(\n        'dnb-height-animation',\n        isInDOM && 'dnb-height-animation--is-in-dom',\n        isVisible && 'dnb-height-animation--is-visible',\n        animate && isVisibleParallax && 'dnb-height-animation--parallax',\n        isAnimating && 'dnb-height-animation--animating',\n        !isVisible &&\n          !isAnimating &&\n          !open &&\n          'dnb-height-animation--hidden',\n        showOverflow && 'dnb-height-animation--show-overflow',\n        className\n      )}\n      style={{ ...firstPaintStyle, ...rest?.style }}\n      aria-hidden={keepInDOM ? !open : undefined}\n      {...rest}\n    >\n      {children}\n    </Space>\n  )\n}\n\nHeightAnimation._supportsSpacingProps = 'children'\n\nexport default HeightAnimation\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AACrC,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,kBAAkB,QAEb,sBAAsB;AAC7B,OAAOC,KAAK,MAAM,gBAAgB;AA8ClC,SAASC,eAAeA,CAAAC,IAAA,EAgBI;EAAA,IAhBH;MACvBC,IAAI,GAAG,IAAI;MACXC,OAAO,GAAG,IAAI;MACdC,SAAS,GAAG,KAAK;MACjBC,YAAY,GAAG,KAAK;MACpBC,OAAO;MACPC,QAAQ;MACRC,KAAK;MACLC,SAAS;MACTC,QAAQ;MACRC,QAAQ;MACRC,MAAM,GAAG,IAAI;MACbC,MAAM,GAAG,IAAI;MACbC,gBAAgB,GAAG,IAAI;MACvBC,cAAc,GAAG;IAEM,CAAC,GAAAd,IAAA;IADrBe,IAAI,GAAAC,wBAAA,CAAAhB,IAAA,EAAAiB,SAAA;EAEP,MAAMC,UAAU,GAAGvB,MAAM,CAAc,CAAC;EACxC,MAAMwB,SAAS,GAAGV,QAAQ,IAAIS,UAAU;EAExC,MAAM;IACJE,OAAO;IACPC,SAAS;IACTC,iBAAiB;IACjBC,WAAW;IACXC;EACF,CAAC,GAAG3B,kBAAkB,CAACsB,SAAS,EAAE;IAChClB,IAAI;IACJC,OAAO;IACPQ,QAAQ;IACRC,MAAM;IACNC,MAAM;IACNC,gBAAgB;IAChBC;EACF,CAAC,CAAC;EAEF,IAAI,CAACX,SAAS,IAAI,CAACiB,OAAO,IAAI,CAACG,WAAW,EAAE;IAC1C,OAAO,IAAI;EACb;EAEA,IAAIjB,QAAQ,EAAE;IACZkB,eAAe,CAAC,YAAY,CAAC,GAAI,GAAElB,QAAS,IAAG;EACjD;EACA,IAAIC,KAAK,EAAE;IACTiB,eAAe,CAAC,SAAS,CAAC,GAAI,GAAEjB,KAAM,IAAG;EAC3C;EAEA,OACEb,KAAA,CAAA+B,aAAA,CAAC3B,KAAK,EAAA4B,QAAA;IACJjB,QAAQ,EAAEU,SAAU;IACpBd,OAAO,EAAEA,OAAO,IAAI,KAAM;IAC1BG,SAAS,EAAEZ,UAAU,CACnB,sBAAsB,EAUtBY,SAAS,EARTa,SAAS,GAAI,kCAAkC,GAI7C,CAACE,WAAW,IACZ,CAACtB,IAAI,IACL,8BAA8B,EAPhCmB,OAAO,IAAI,iCAAiC,EAE5ClB,OAAO,IAAIoB,iBAAiB,IAAI,gCAAgC,EAChEC,WAAW,IAAI,iCAAiC,EAKhDnB,YAAY,IAAI,qCAElB,CAAE;IACFuB,KAAK,EAAAC,aAAA,CAAAA,aAAA,KAAOJ,eAAe,GAAKT,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEY,KAAK,CAAG;IAC9C,eAAaxB,SAAS,GAAG,CAACF,IAAI,GAAG4B;EAAU,GACvCd,IAAI,GAEPL,QACI,CAAC;AAEZ;AAEAX,eAAe,CAAC+B,qBAAqB,GAAG,UAAU;AAElD,eAAe/B,eAAe"}
+{"version":3,"file":"HeightAnimation.js","names":["React","useRef","classnames","useHeightAnimation","Space","HeightAnimation","_ref","open","animate","keepInDOM","showOverflow","element","duration","delay","className","innerRef","children","compensateForGap","onInit","onOpen","onAnimationStart","onAnimationEnd","rest","_objectWithoutProperties","_excluded","elementRef","targetRef","isInDOM","isVisible","isVisibleParallax","isAnimating","firstPaintStyle","createElement","_extends","style","_objectSpread","undefined","_supportsSpacingProps"],"sources":["../../../../src/components/height-animation/HeightAnimation.tsx"],"sourcesContent":["import React, { useRef } from 'react'\nimport classnames from 'classnames'\nimport {\n  useHeightAnimation,\n  useHeightAnimationOptions,\n} from './useHeightAnimation'\nimport Space from '../space/Space'\n\nimport type { DynamicElement, SpacingProps } from '../../shared/types'\n\nexport type HeightAnimationProps = {\n  /**\n   * Whether the nested children content should be kept in the DOM or not.\n   * Default: false\n   */\n  keepInDOM?: boolean\n\n  /**\n   * Set to `true` to omit the usage of \"overflow: hidden;\"\n   * Default: false\n   */\n  showOverflow?: boolean\n\n  /**\n   * Defines the duration of the animation in milliseconds.\n   * Default: 400\n   */\n  duration?: number\n\n  /**\n   * Defines the delay of the animation in milliseconds.\n   * Default: 0\n   */\n  delay?: number\n\n  /**\n   * Define a custom HTML Element.\n   * Default: div\n   */\n  element?: DynamicElement\n\n  /**\n   * Send along a custom React Ref.\n   * Default: null\n   */\n  innerRef?: React.RefObject<HTMLElement>\n} & useHeightAnimationOptions\n\nexport type HeightAnimationAllProps = HeightAnimationProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\nfunction HeightAnimation({\n  open = true,\n  animate = true,\n  keepInDOM = false,\n  showOverflow = false,\n  element,\n  duration,\n  delay,\n  className,\n  innerRef,\n  children,\n  compensateForGap,\n  onInit = null,\n  onOpen = null,\n  onAnimationStart = null,\n  onAnimationEnd = null,\n  ...rest\n}: HeightAnimationAllProps) {\n  const elementRef = useRef<HTMLElement>()\n  const targetRef = innerRef || elementRef\n\n  const {\n    isInDOM,\n    isVisible,\n    isVisibleParallax,\n    isAnimating,\n    firstPaintStyle,\n  } = useHeightAnimation(targetRef, {\n    open,\n    animate,\n    children,\n    compensateForGap,\n    onInit,\n    onOpen,\n    onAnimationStart,\n    onAnimationEnd,\n  })\n\n  if (!keepInDOM && !isInDOM && !isAnimating) {\n    return null\n  }\n\n  if (duration) {\n    firstPaintStyle['--duration'] = `${duration}ms`\n  }\n  if (delay) {\n    firstPaintStyle['--delay'] = `${delay}ms`\n  }\n\n  return (\n    <Space\n      innerRef={targetRef}\n      element={element || 'div'}\n      className={classnames(\n        'dnb-height-animation',\n        isInDOM && 'dnb-height-animation--is-in-dom',\n        isVisible && 'dnb-height-animation--is-visible',\n        animate && isVisibleParallax && 'dnb-height-animation--parallax',\n        isAnimating && 'dnb-height-animation--animating',\n        !isVisible &&\n          !isAnimating &&\n          !open &&\n          'dnb-height-animation--hidden',\n        showOverflow && 'dnb-height-animation--show-overflow',\n        className\n      )}\n      style={{ ...firstPaintStyle, ...rest?.style }}\n      aria-hidden={keepInDOM ? !open : undefined}\n      {...rest}\n    >\n      {compensateForGap ? (\n        <div className=\"compensateForGap\">{children}</div>\n      ) : (\n        children\n      )}\n    </Space>\n  )\n}\n\nHeightAnimation._supportsSpacingProps = 'children'\n\nexport default HeightAnimation\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AACrC,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,kBAAkB,QAEb,sBAAsB;AAC7B,OAAOC,KAAK,MAAM,gBAAgB;AA8ClC,SAASC,eAAeA,CAAAC,IAAA,EAiBI;EAAA,IAjBH;MACvBC,IAAI,GAAG,IAAI;MACXC,OAAO,GAAG,IAAI;MACdC,SAAS,GAAG,KAAK;MACjBC,YAAY,GAAG,KAAK;MACpBC,OAAO;MACPC,QAAQ;MACRC,KAAK;MACLC,SAAS;MACTC,QAAQ;MACRC,QAAQ;MACRC,gBAAgB;MAChBC,MAAM,GAAG,IAAI;MACbC,MAAM,GAAG,IAAI;MACbC,gBAAgB,GAAG,IAAI;MACvBC,cAAc,GAAG;IAEM,CAAC,GAAAf,IAAA;IADrBgB,IAAI,GAAAC,wBAAA,CAAAjB,IAAA,EAAAkB,SAAA;EAEP,MAAMC,UAAU,GAAGxB,MAAM,CAAc,CAAC;EACxC,MAAMyB,SAAS,GAAGX,QAAQ,IAAIU,UAAU;EAExC,MAAM;IACJE,OAAO;IACPC,SAAS;IACTC,iBAAiB;IACjBC,WAAW;IACXC;EACF,CAAC,GAAG5B,kBAAkB,CAACuB,SAAS,EAAE;IAChCnB,IAAI;IACJC,OAAO;IACPQ,QAAQ;IACRC,gBAAgB;IAChBC,MAAM;IACNC,MAAM;IACNC,gBAAgB;IAChBC;EACF,CAAC,CAAC;EAEF,IAAI,CAACZ,SAAS,IAAI,CAACkB,OAAO,IAAI,CAACG,WAAW,EAAE;IAC1C,OAAO,IAAI;EACb;EAEA,IAAIlB,QAAQ,EAAE;IACZmB,eAAe,CAAC,YAAY,CAAC,GAAI,GAAEnB,QAAS,IAAG;EACjD;EACA,IAAIC,KAAK,EAAE;IACTkB,eAAe,CAAC,SAAS,CAAC,GAAI,GAAElB,KAAM,IAAG;EAC3C;EAEA,OACEb,KAAA,CAAAgC,aAAA,CAAC5B,KAAK,EAAA6B,QAAA;IACJlB,QAAQ,EAAEW,SAAU;IACpBf,OAAO,EAAEA,OAAO,IAAI,KAAM;IAC1BG,SAAS,EAAEZ,UAAU,CACnB,sBAAsB,EAUtBY,SAAS,EARTc,SAAS,GAAI,kCAAkC,GAI7C,CAACE,WAAW,IACZ,CAACvB,IAAI,IACL,8BAA8B,EAPhCoB,OAAO,IAAI,iCAAiC,EAE5CnB,OAAO,IAAIqB,iBAAiB,IAAI,gCAAgC,EAChEC,WAAW,IAAI,iCAAiC,EAKhDpB,YAAY,IAAI,qCAElB,CAAE;IACFwB,KAAK,EAAAC,aAAA,CAAAA,aAAA,KAAOJ,eAAe,GAAKT,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEY,KAAK,CAAG;IAC9C,eAAazB,SAAS,GAAG,CAACF,IAAI,GAAG6B;EAAU,GACvCd,IAAI,GAEPL,gBAAgB,GACfjB,KAAA,CAAAgC,aAAA;IAAKlB,SAAS,EAAC;EAAkB,GAAEE,QAAc,CAAC,GAElDA,QAEG,CAAC;AAEZ;AAEAX,eAAe,CAACgC,qBAAqB,GAAG,UAAU;AAElD,eAAehC,eAAe"}

package/components/height-animation/HeightAnimationDocs.d.ts

@@ -0,0 +1,3 @@
+import { PropertiesTableProps } from '../../shared/types';
+export declare const HeightAnimationProperties: PropertiesTableProps;
+export declare const HeightAnimationEvents: PropertiesTableProps;

package/components/height-animation/HeightAnimationDocs.js

@@ -0,0 +1,75 @@
+export const HeightAnimationProperties = {
+  open: {
+    doc: 'Set to `true` on second re-render when the view should animate from 0px to auto. Defaults to `true`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  animate: {
+    doc: 'Set to `false` to omit the animation. Defaults to `true`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  keepInDOM: {
+    doc: 'Set to `true` ensure the nested children content will be kept in the DOM. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  compensateForGap: {
+    doc: 'To compensate for CSS gap between the rows, so animation does not jump during the animation. Provide a CSS unit or `auto`. Defaults to `null`.',
+    type: 'string',
+    status: 'optional'
+  },
+  showOverflow: {
+    doc: 'Set to `true` to omit the usage of "overflow: hidden;". Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  duration: {
+    doc: 'Custom duration of the animation in milliseconds. Defaults to `400ms`.',
+    type: 'number',
+    status: 'optional'
+  },
+  delay: {
+    doc: 'Custom delay of the animation in milliseconds. Defaults to `0ms`.',
+    type: 'number',
+    status: 'optional'
+  },
+  element: {
+    doc: 'Custom HTML element for the component. Defaults to `div` HTML Element.',
+    type: 'string',
+    status: 'optional'
+  },
+  innerRef: {
+    doc: 'Send along a custom React Ref.',
+    type: 'React.RefObject',
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  }
+};
+export const HeightAnimationEvents = {
+  onOpen: {
+    doc: 'Is called when fully opened or closed. Returns `true` or `false` depending on the state.',
+    type: 'function',
+    status: 'optional'
+  },
+  onAnimationStart: {
+    doc: 'Is called when animation has started.',
+    type: 'function',
+    status: 'optional'
+  },
+  onAnimationEnd: {
+    doc: 'Is called when animation is done and the full height is reached.',
+    type: 'function',
+    status: 'optional'
+  },
+  onInit: {
+    doc: 'Is called once before mounting the component (useLayoutEffect). Returns the instance of the internal animation class.',
+    type: 'function',
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=HeightAnimationDocs.js.map

package/components/height-animation/HeightAnimationDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeightAnimationDocs.js","names":["HeightAnimationProperties","open","doc","type","status","animate","keepInDOM","compensateForGap","showOverflow","duration","delay","element","innerRef","HeightAnimationEvents","onOpen","onAnimationStart","onAnimationEnd","onInit"],"sources":["../../../../src/components/height-animation/HeightAnimationDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const HeightAnimationProperties: PropertiesTableProps = {\n  open: {\n    doc: 'Set to `true` on second re-render when the view should animate from 0px to auto. Defaults to `true`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  animate: {\n    doc: 'Set to `false` to omit the animation. Defaults to `true`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  keepInDOM: {\n    doc: 'Set to `true` ensure the nested children content will be kept in the DOM. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  compensateForGap: {\n    doc: 'To compensate for CSS gap between the rows, so animation does not jump during the animation. Provide a CSS unit or `auto`. Defaults to `null`.',\n    type: 'string',\n    status: 'optional',\n  },\n  showOverflow: {\n    doc: 'Set to `true` to omit the usage of \"overflow: hidden;\". Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  duration: {\n    doc: 'Custom duration of the animation in milliseconds. Defaults to `400ms`.',\n    type: 'number',\n    status: 'optional',\n  },\n  delay: {\n    doc: 'Custom delay of the animation in milliseconds. Defaults to `0ms`.',\n    type: 'number',\n    status: 'optional',\n  },\n  element: {\n    doc: 'Custom HTML element for the component. Defaults to `div` HTML Element.',\n    type: 'string',\n    status: 'optional',\n  },\n  innerRef: {\n    doc: 'Send along a custom React Ref.',\n    type: 'React.RefObject',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const HeightAnimationEvents: PropertiesTableProps = {\n  onOpen: {\n    doc: 'Is called when fully opened or closed. Returns `true` or `false` depending on the state.',\n    type: 'function',\n    status: 'optional',\n  },\n  onAnimationStart: {\n    doc: 'Is called when animation has started.',\n    type: 'function',\n    status: 'optional',\n  },\n  onAnimationEnd: {\n    doc: 'Is called when animation is done and the full height is reached.',\n    type: 'function',\n    status: 'optional',\n  },\n  onInit: {\n    doc: 'Is called once before mounting the component (useLayoutEffect). Returns the instance of the internal animation class.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,yBAA+C,GAAG;EAC7DC,IAAI,EAAE;IACJC,GAAG,EAAE,sGAAsG;IAC3GC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,OAAO,EAAE;IACPH,GAAG,EAAE,2DAA2D;IAChEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDE,SAAS,EAAE;IACTJ,GAAG,EAAE,gGAAgG;IACrGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDG,gBAAgB,EAAE;IAChBL,GAAG,EAAE,gJAAgJ;IACrJC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,YAAY,EAAE;IACZN,GAAG,EAAE,8EAA8E;IACnFC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDK,QAAQ,EAAE;IACRP,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,KAAK,EAAE;IACLR,GAAG,EAAE,mEAAmE;IACxEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,OAAO,EAAE;IACPT,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,QAAQ,EAAE;IACRV,GAAG,EAAE,gCAAgC;IACrCC,IAAI,EAAE,iBAAiB;IACvBC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMS,qBAA2C,GAAG;EACzDC,MAAM,EAAE;IACNZ,GAAG,EAAE,0FAA0F;IAC/FC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDW,gBAAgB,EAAE;IAChBb,GAAG,EAAE,uCAAuC;IAC5CC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDY,cAAc,EAAE;IACdd,GAAG,EAAE,kEAAkE;IACvEC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDa,MAAM,EAAE;IACNf,GAAG,EAAE,uHAAuH;IAC5HC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}

package/components/height-animation/style/dnb-height-animation.css

@@ -6,8 +6,9 @@
  * Utilities
  */
 .dnb-height-animation {
-  --height-animation: height var(--duration, 400ms) var(--easing-default)
-    var(--delay, 0ms);
+  --height-animation-duration: var(--duration, 400ms);
+  --height-animation: height var(--height-animation-duration)
+    var(--easing-default) var(--delay, 0ms);
   will-change: height;
   transition: var(--height-animation);
 }

package/components/height-animation/style/dnb-height-animation.min.css

@@ -1 +1 @@
-.dnb-height-animation{--height-animation:height var(--duration,400ms) var(--easing-default) var(--delay,0ms);transition:var(--height-animation);will-change:height}html[data-visual-test] .dnb-height-animation,html[data-visual-test] .dnb-height-animation *{transition:none!important}.dnb-height-animation--animating{overflow-y:hidden}@supports (overflow-y:clip){.dnb-height-animation--animating{overflow-y:clip}}.dnb-height-animation--hidden{display:none}.dnb-height-animation--show-overflow{overflow:visible}
+.dnb-height-animation{--height-animation-duration:var(--duration,400ms);--height-animation:height var(--height-animation-duration) var(--easing-default) var(--delay,0ms);transition:var(--height-animation);will-change:height}html[data-visual-test] .dnb-height-animation,html[data-visual-test] .dnb-height-animation *{transition:none!important}.dnb-height-animation--animating{overflow-y:hidden}@supports (overflow-y:clip){.dnb-height-animation--animating{overflow-y:clip}}.dnb-height-animation--hidden{display:none}.dnb-height-animation--show-overflow{overflow:visible}

package/components/height-animation/style/dnb-height-animation.scss

@@ -6,8 +6,9 @@
 @import '../../../style/core/utilities.scss';
 
 .dnb-height-animation {
-  --height-animation: height var(--duration, 400ms) var(--easing-default)
-    var(--delay, 0ms);
+  --height-animation-duration: var(--duration, 400ms);
+  --height-animation: height var(--height-animation-duration)
+    var(--easing-default) var(--delay, 0ms);
 
   will-change: height;
   transition: var(--height-animation);

package/components/height-animation/useHeightAnimation.d.ts

@@ -11,6 +11,11 @@ export type useHeightAnimationOptions = {
      * Default: true
      */
     animate?: boolean;
+    /**
+     * To compensate for CSS gap between the rows, so animation does not jump during the animation.
+     * Provide a CSS unit or `var(--row-gap)`.
+     */
+    compensateForGap?: string | 'auto';
     /**
      * In order to let the Hook know when children has changed
      */
@@ -34,7 +39,7 @@ export type useHeightAnimationOptions = {
 };
 export type HeightAnimationOnStartTypes = 'opening' | 'closing' | 'adjusting';
 export type HeightAnimationOnEndTypes = 'opened' | 'closed' | 'adjusted';
-export declare function useHeightAnimation(targetRef: React.RefObject<HTMLElement>, { open, animate, children, onInit, onOpen, onAnimationStart, onAnimationEnd, }?: useHeightAnimationOptions): {
+export declare function useHeightAnimation(targetRef: React.RefObject<HTMLElement>, { open, animate, children, compensateForGap, onInit, onOpen, onAnimationStart, onAnimationEnd, }?: useHeightAnimationOptions): {
     open: boolean;
     isOpen: boolean;
     isInDOM: boolean;