@dnb/eufemia 9.26.1 → 9.29.0

package/cjs/components/avatar/style/dnb-avatar.min.css

@@ -1 +1 @@
-.dnb-avatar{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-avatar *,.dnb-avatar :after,.dnb-avatar :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-avatar :after,.dnb-avatar :before{text-decoration:inherit;vertical-align:inherit}:root{--avatar-font-size--small:var(--font-size-x-small);--avatar-font-size--medium:var(--font-size-basis);--avatar-font-size--large:var(--font-size-x-large);--avatar-font-size--x-large:var(--font-size-x-large);--avatar-line-height--small:var(--line-height-x-small);--avatar-line-height--medium:var(--line-height-basis);--avatar-line-height--large:var(--line-height-large);--avatar-line-height--x-large:var(--line-height-large);--avatar-width--small:1.5rem;--avatar-height--small:1.5rem;--avatar-width--medium:2rem;--avatar-height--medium:2rem;--avatar-width--large:4rem;--avatar-height--large:4rem;--avatar-width--x-large:5rem;--avatar-height--x-large:5rem}.dnb-avatar{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;-ms-flex-negative:0;align-items:center;border-radius:50%;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;flex-shrink:0;font-weight:500;font-weight:var(--font-weight-medium);justify-content:center;line-height:1;overflow:hidden;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dnb-avatar,.dnb-core-style .dnb-avatar{line-height:2.5rem;line-height:var(--button-height)}.dnb-avatar--size-small{font-size:.875rem;font-size:var(--avatar-font-size--small);height:1.5rem;height:var(--avatar-height--small);width:1.5rem;width:var(--avatar-width--small)}.dnb-avatar--size-small,.dnb-core-style .dnb-avatar--size-small{line-height:1.125rem;line-height:var(--avatar-line-height--small)}.dnb-avatar--size-medium{font-size:1.125rem;font-size:var(--avatar-font-size--medium);height:2rem;height:var(--avatar-height--medium);width:2rem;width:var(--avatar-width--medium)}.dnb-avatar--size-medium,.dnb-core-style .dnb-avatar--size-medium{line-height:1.5rem;line-height:var(--avatar-line-height--medium)}.dnb-avatar--size-large{font-size:2.125rem;font-size:var(--avatar-font-size--large);height:4rem;height:var(--avatar-height--large);width:4rem;width:var(--avatar-width--large)}.dnb-avatar--size-large,.dnb-core-style .dnb-avatar--size-large{line-height:2.5rem;line-height:var(--avatar-line-height--large)}.dnb-avatar--size-x-large{font-size:2.125rem;font-size:var(--avatar-font-size--x-large);height:5rem;height:var(--avatar-height--x-large);width:5rem;width:var(--avatar-width--x-large)}.dnb-avatar--size-x-large,.dnb-core-style .dnb-avatar--size-x-large{line-height:2.5rem;line-height:var(--avatar-line-height--x-large)}.dnb-avatar__group{-webkit-box-pack:flex;-ms-flex-pack:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row;justify-content:flex}.dnb-avatar__group .dnb-avatar{--border-color:var(--color-black-3);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){.dnb-avatar__group .dnb-avatar{-webkit-box-shadow:0 0 0 .125rem #f8f8f8;box-shadow:0 0 0 .125rem #f8f8f8;-webkit-box-shadow:0 0 0 .125rem var(--color-black-3);box-shadow:0 0 0 .125rem var(--color-black-3)}}.dnb-avatar__group .dnb-avatar--size-small{margin-left:-.5rem}.dnb-avatar__group .dnb-avatar--size-medium{margin-left:-.75rem}.dnb-avatar__group .dnb-avatar--size-large{margin-left:-1rem}.dnb-avatar__group .dnb-avatar--size-x-large{margin-left:-1.5rem}.dnb-avatar__group .dnb-avatar:nth-of-type(2){margin-left:0}.dnb-avatar__group--elements-left{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;-ms-flex-negative:0;align-items:center;color:#737373;color:var(--color-black-55);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;flex-shrink:0;justify-content:center}.dnb-avatar__group--elements-left--size-small{font-size:.875rem;font-size:var(--font-size-x-small);margin-left:.125rem}.dnb-avatar__group--elements-left--size-medium{font-size:1rem;font-size:var(--font-size-small);margin-left:.125rem}.dnb-avatar__group--elements-left--size-large,.dnb-avatar__group--elements-left--size-x-large{font-size:1.625rem;font-size:var(--font-size-large);margin-left:.25rem;margin-left:var(--spacing-xx-small)}
+.dnb-avatar{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-avatar *,.dnb-avatar :after,.dnb-avatar :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-avatar :after,.dnb-avatar :before{text-decoration:inherit;vertical-align:inherit}:root{--avatar-font-size--small:var(--font-size-x-small);--avatar-font-size--medium:var(--font-size-basis);--avatar-font-size--large:var(--font-size-x-large);--avatar-font-size--x-large:var(--font-size-x-large);--avatar-line-height--small:var(--line-height-x-small);--avatar-line-height--medium:var(--line-height-basis);--avatar-line-height--large:var(--line-height-large);--avatar-line-height--x-large:var(--line-height-large);--avatar-width--small:1.5rem;--avatar-height--small:1.5rem;--avatar-width--medium:2rem;--avatar-height--medium:2rem;--avatar-width--large:4rem;--avatar-height--large:4rem;--avatar-width--x-large:5rem;--avatar-height--x-large:5rem}.dnb-avatar{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;-ms-flex-negative:0;align-items:center;border-radius:50%;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;flex-shrink:0;font-weight:500;font-weight:var(--font-weight-medium);justify-content:center;line-height:1;overflow:hidden;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}.dnb-avatar,.dnb-core-style .dnb-avatar{line-height:2.5rem;line-height:var(--button-height)}.dnb-avatar--size-small{font-size:.875rem;font-size:var(--avatar-font-size--small);height:1.5rem;height:var(--avatar-height--small);width:1.5rem;width:var(--avatar-width--small)}.dnb-avatar--size-small,.dnb-core-style .dnb-avatar--size-small{line-height:1.125rem;line-height:var(--avatar-line-height--small)}.dnb-avatar--size-medium{font-size:1.125rem;font-size:var(--avatar-font-size--medium);height:2rem;height:var(--avatar-height--medium);width:2rem;width:var(--avatar-width--medium)}.dnb-avatar--size-medium,.dnb-core-style .dnb-avatar--size-medium{line-height:1.5rem;line-height:var(--avatar-line-height--medium)}.dnb-avatar--size-large{font-size:2.125rem;font-size:var(--avatar-font-size--large);height:4rem;height:var(--avatar-height--large);width:4rem;width:var(--avatar-width--large)}.dnb-avatar--size-large,.dnb-core-style .dnb-avatar--size-large{line-height:2.5rem;line-height:var(--avatar-line-height--large)}.dnb-avatar--size-x-large{font-size:2.125rem;font-size:var(--avatar-font-size--x-large);height:5rem;height:var(--avatar-height--x-large);width:5rem;width:var(--avatar-width--x-large)}.dnb-avatar--size-x-large,.dnb-core-style .dnb-avatar--size-x-large{line-height:2.5rem;line-height:var(--avatar-line-height--x-large)}.dnb-avatar__group{-webkit-box-pack:flex;-ms-flex-pack:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row;justify-content:flex}.dnb-avatar__group .dnb-avatar{--border-color:var(--color-black-3);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){.dnb-avatar__group .dnb-avatar{-webkit-box-shadow:0 0 0 .125rem #f8f8f8;box-shadow:0 0 0 .125rem #f8f8f8;-webkit-box-shadow:0 0 0 .125rem var(--color-black-3);box-shadow:0 0 0 .125rem var(--color-black-3)}}.dnb-avatar__group .dnb-avatar--size-small{margin-left:-.5rem}.dnb-avatar__group .dnb-avatar--size-medium{margin-left:-.75rem}.dnb-avatar__group .dnb-avatar--size-large{margin-left:-1rem}.dnb-avatar__group .dnb-avatar--size-x-large{margin-left:-1.5rem}.dnb-avatar__group .dnb-avatar:nth-of-type(2){margin-left:0}.dnb-avatar__group--elements-left{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;-ms-flex-negative:0;align-items:center;color:#737373;color:var(--color-black-55);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;flex-shrink:0;justify-content:center}.dnb-avatar__group--elements-left--size-small{font-size:.875rem;font-size:var(--font-size-x-small);margin-left:.125rem}.dnb-avatar__group--elements-left--size-medium{font-size:1rem;font-size:var(--font-size-small);margin-left:.125rem}.dnb-avatar__group--elements-left--size-large,.dnb-avatar__group--elements-left--size-x-large{font-size:1.625rem;font-size:var(--font-size-large);margin-left:.25rem;margin-left:var(--spacing-xx-small)}

package/cjs/components/badge/Badge.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import { ISpacingProps } from '../../shared/interfaces';
+import { SkeletonShow } from '../skeleton/Skeleton';
+export interface BadgeProps {
+    /**
+     * Aria label to describe the badge
+     * Default: null
+     */
+    label?: React.ReactNode;
+    /**
+     * Custom className on the component root
+     * Default: null
+     */
+    className?: string;
+    /**
+     * Skeleton should be applied when loading content
+     * Default: null
+     */
+    skeleton?: SkeletonShow;
+    /**
+     * The content to display the badge on top of.
+     * Default: null
+     */
+    children?: React.ReactNode;
+    /**
+     * The content of the component.
+     * Default: null
+     */
+    content?: string | number | React.ReactNode;
+    /**
+     * The vertical positioning of the component.
+     * Default: null
+     */
+    vertical?: 'bottom' | 'top';
+    /**
+     * The horizontal positioning of the component.
+     * Default: null
+     */
+    horizontal?: 'left' | 'right';
+    /**
+     * The variant of the component.
+     * Default: information.
+     */
+    variant?: 'information' | 'notification';
+}
+declare type BadgeAndISpacingProps = BadgeProps & ISpacingProps;
+export declare const defaultProps: {
+    label: any;
+    className: any;
+    skeleton: boolean;
+    children: any;
+    content: any;
+    vertical: any;
+    horizontal: any;
+    variant: string;
+};
+declare function Badge(localProps: BadgeAndISpacingProps): JSX.Element;
+export default Badge;

package/cjs/components/badge/Badge.js

@@ -0,0 +1,124 @@
+"use strict";
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.array.index-of.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
+require("core-js/modules/es.object.assign.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _SpacingHelper = require("../space/SpacingHelper");
+
+var _SkeletonHelper = require("../skeleton/SkeletonHelper");
+
+var _Context = _interopRequireDefault(require("../../shared/Context"));
+
+var _componentHelper = require("../../shared/component-helper");
+
+var _excluded = ["children"],
+    _excluded2 = ["label", "className", "children", "skeleton", "horizontal", "vertical", "content", "variant"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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; }
+
+var defaultProps = {
+  label: null,
+  className: null,
+  skeleton: false,
+  children: null,
+  content: null,
+  vertical: null,
+  horizontal: null,
+  variant: 'information'
+};
+exports.defaultProps = defaultProps;
+
+function Badge(localProps) {
+  var context = _react.default.useContext(_Context.default);
+
+  var _extendPropsWithConte = (0, _componentHelper.extendPropsWithContext)(_objectSpread(_objectSpread({}, defaultProps), localProps), defaultProps, context === null || context === void 0 ? void 0 : context.Badge),
+      children = _extendPropsWithConte.children,
+      props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
+
+  var BadgeRoot = function BadgeRoot(_ref) {
+    var children = _ref.children;
+    return _react.default.createElement("span", {
+      className: "dnb-badge__root",
+      "data-testid": "badge-root"
+    }, children);
+  };
+
+  var BadgeElem = function BadgeElem(localProps) {
+    var label = localProps.label,
+        className = localProps.className,
+        children = localProps.children,
+        skeleton = localProps.skeleton,
+        horizontal = localProps.horizontal,
+        vertical = localProps.vertical,
+        contentProp = localProps.content,
+        variant = localProps.variant,
+        props = _objectWithoutProperties(localProps, _excluded2);
+
+    var skeletonClasses = (0, _SkeletonHelper.createSkeletonClass)('shape', skeleton, context);
+    var spacingClasses = (0, _SpacingHelper.createSpacingClasses)(props);
+    var contentIsNum = typeof contentProp === 'number';
+    var variantIsNotification = variant === 'notification';
+    var content = variantIsNotification && contentIsNum && contentProp > 9 ? '9+' : contentProp;
+
+    if (variantIsNotification && !contentIsNum) {
+      (0, _componentHelper.warn)("Type of content should be a number: A notification badge is best suited to display content of type number.");
+    }
+
+    if (!label && contentIsNum) {
+      (0, _componentHelper.warn)("Label required: A Badge with a number as content requires a label describing the content of the badge. This is to ensure correct semantic and accessibility.");
+    }
+
+    return _react.default.createElement("span", _extends({
+      className: (0, _classnames.default)("dnb-badge dnb-badge--variant-".concat(variant), skeletonClasses, spacingClasses, className, horizontal && "dnb-badge--horizontal-".concat(horizontal), vertical && "dnb-badge--vertical-".concat(vertical)),
+      "data-testid": "badge"
+    }, props), label && _react.default.createElement("span", {
+      "data-testid": "badge-label",
+      className: "dnb-sr-only"
+    }, label, ' '), content);
+  };
+
+  if (children) {
+    return _react.default.createElement(BadgeRoot, null, children, _react.default.createElement(BadgeElem, props));
+  }
+
+  return _react.default.createElement(BadgeElem, props);
+}
+
+var _default = Badge;
+exports.default = _default;

package/cjs/components/badge/index.d.ts

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

package/cjs/components/badge/index.js

@@ -0,0 +1,52 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+
+var _Badge = _interopRequireWildcard(require("./Badge"));
+
+Object.keys(_Badge).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Badge[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Badge[key];
+    }
+  });
+});
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+
+var _default = _Badge.default;
+exports.default = _default;

package/cjs/components/badge/style/_badge.scss

@@ -0,0 +1,74 @@
+/*
+* Badge component
+*
+*/
+
+:root {
+  --badge-font-size: var(--font-size-x-small);
+  --badge-width: 1.5rem;
+  --badge-height: 1.5rem;
+  --badge-border-radius-information: calc(var(--badge-height) / 4);
+  --badge-border-radius-notification: calc(var(--badge-height) / 2);
+  --badge-line-height: var(--line-height-x-small);
+}
+
+.dnb-badge {
+  // Safari needs a correct CSS specificity
+  &,
+  .dnb-core-style & {
+    line-height: var(--badge-line-height);
+  }
+
+  display: inline-flex;
+  font-weight: var(--font-weight-medium);
+  flex-direction: row;
+  white-space: nowrap;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+
+  width: var(--badge-width);
+  height: var(--badge-height);
+  font-size: var(--badge-font-size);
+
+  &__root {
+    position: relative;
+    display: inline-flex;
+    vertical-align: middle;
+    flex-shrink: 0;
+    .dnb-badge {
+      display: flex;
+      overflow: hidden;
+      position: absolute;
+      z-index: 2; // Render the badge on top of a potential .dnb-img img.
+    }
+  }
+
+  &--variant-notification {
+    border-radius: var(--badge-border-radius-notification);
+  }
+
+  &--variant-information {
+    border-radius: var(--badge-border-radius-information);
+    min-width: var(--badge-width);
+    width: auto;
+    padding: 0 var(--spacing-xx-small);
+  }
+
+  &--horizontal-left {
+    left: 0;
+  }
+
+  &--horizontal-right {
+    right: 0;
+  }
+
+  &--vertical-bottom {
+    bottom: 0;
+  }
+
+  &--vertical-top {
+    top: 0;
+  }
+}

package/cjs/components/badge/style/dnb-badge.css

@@ -0,0 +1,151 @@
+/*
+* DNB Badge
+*
+*/
+/**
+ * This file is only used to make components independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+ * Scopes
+ *
+ */
+/*
+ * Document Reset
+ *
+ */
+.dnb-badge {
+  font-family: 'DNB', sans-serif;
+  font-family: var(--font-family-default);
+  font-weight: normal;
+  font-weight: var(--font-weight-basis);
+  font-size: 1rem;
+  font-size: var(--font-size-small);
+  font-style: normal;
+  line-height: 1.5rem;
+  line-height: var(--line-height-basis);
+  color: #333;
+  color: var(--color-black-80, #333);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  /**
+  * Ensure consistency and use the same as HTML reset -> html {...}
+  * between base and code package
+  */
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+     tab-size: 4;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  word-break: break-word;
+  /**
+  * 1. Remove repeating backgrounds in all browsers (opinionated).
+  * 2. Add border box sizing in all browsers (opinionated).
+  */
+  /**
+  * 1. Add text decoration inheritance in all browsers (opinionated).
+  * 2. Add vertical alignment inheritance in all browsers (opinionated).
+  */
+  margin: 0;
+  padding: 0; }
+  .dnb-badge *,
+  .dnb-badge ::before,
+  .dnb-badge ::after {
+    background-repeat: no-repeat;
+    /* 1 */
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    /* 2 */ }
+  .dnb-badge ::before,
+  .dnb-badge ::after {
+    text-decoration: inherit;
+    /* 1 */
+    vertical-align: inherit;
+    /* 2 */ }
+
+/*
+* Badge component
+*
+*/
+:root {
+  --badge-font-size: var(--font-size-x-small);
+  --badge-width: 1.5rem;
+  --badge-height: 1.5rem;
+  --badge-border-radius-information: calc(var(--badge-height)/4);
+  --badge-border-radius-information: calc(var(--badge-height) / 4);
+  --badge-border-radius-notification: calc(var(--badge-height)/2);
+  --badge-border-radius-notification: calc(var(--badge-height) / 2);
+  --badge-line-height: var(--line-height-x-small); }
+
+.dnb-badge {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-weight: 500;
+  font-weight: var(--font-weight-medium);
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  white-space: nowrap;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -ms-flex-line-pack: center;
+      align-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 1.5rem;
+  width: var(--badge-width);
+  height: 1.5rem;
+  height: var(--badge-height);
+  font-size: 0.875rem;
+  font-size: var(--badge-font-size); }
+  .dnb-badge,
+  .dnb-core-style .dnb-badge {
+    line-height: 1.125rem;
+    line-height: var(--badge-line-height); }
+  .dnb-badge__root {
+    position: relative;
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    vertical-align: middle;
+    -ms-flex-negative: 0;
+        flex-shrink: 0; }
+    .dnb-badge__root .dnb-badge {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      overflow: hidden;
+      position: absolute;
+      z-index: 2; }
+  .dnb-badge--variant-notification {
+    border-radius: 0.75rem;
+    border-radius: calc(1.5rem / 2);
+    border-radius: var(--badge-border-radius-notification); }
+  .dnb-badge--variant-information {
+    border-radius: 0.375rem;
+    border-radius: calc(1.5rem / 4);
+    border-radius: var(--badge-border-radius-information);
+    min-width: 1.5rem;
+    min-width: var(--badge-width);
+    width: auto;
+    padding: 0 0.25rem;
+    padding: 0 var(--spacing-xx-small); }
+  .dnb-badge--horizontal-left {
+    left: 0; }
+  .dnb-badge--horizontal-right {
+    right: 0; }
+  .dnb-badge--vertical-bottom {
+    bottom: 0; }
+  .dnb-badge--vertical-top {
+    top: 0; }

package/cjs/components/badge/style/dnb-badge.min.css

@@ -0,0 +1 @@
+.dnb-badge{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-badge *,.dnb-badge :after,.dnb-badge :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-badge :after,.dnb-badge :before{text-decoration:inherit;vertical-align:inherit}:root{--badge-font-size:var(--font-size-x-small);--badge-width:1.5rem;--badge-height:1.5rem;--badge-border-radius-information:calc(var(--badge-height)/4);--badge-border-radius-notification:calc(var(--badge-height)/2);--badge-line-height:var(--line-height-x-small)}.dnb-badge{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;-ms-flex-line-pack:center;-webkit-box-align:center;-ms-flex-align:center;align-content:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;font-size:.875rem;font-size:var(--badge-font-size);font-weight:500;font-weight:var(--font-weight-medium);height:1.5rem;height:var(--badge-height);justify-content:center;white-space:nowrap;width:1.5rem;width:var(--badge-width)}.dnb-badge,.dnb-core-style .dnb-badge{line-height:1.125rem;line-height:var(--badge-line-height)}.dnb-badge__root{-ms-flex-negative:0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;flex-shrink:0;position:relative;vertical-align:middle}.dnb-badge__root .dnb-badge{display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;position:absolute;z-index:2}.dnb-badge--variant-notification{border-radius:.75rem;border-radius:var(--badge-border-radius-notification)}.dnb-badge--variant-information{border-radius:.375rem;border-radius:var(--badge-border-radius-information);min-width:1.5rem;min-width:var(--badge-width);padding:0 .25rem;padding:0 var(--spacing-xx-small);width:auto}.dnb-badge--horizontal-left{left:0}.dnb-badge--horizontal-right{right:0}.dnb-badge--vertical-bottom{bottom:0}.dnb-badge--vertical-top{top:0}

package/cjs/components/badge/style/dnb-badge.scss

@@ -0,0 +1,12 @@
+/*
+* DNB Badge
+*
+*/
+
+@import '../../../style/components/imports.scss';
+
+.dnb-badge {
+  @include componentReset();
+}
+
+@import './_badge.scss';

package/cjs/components/badge/style/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Web Style Import
+ *
+ */
+
+import './dnb-badge.scss';

package/cjs/components/badge/style/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./dnb-badge.min.css");

package/cjs/components/badge/style/themes/dnb-badge-theme-ui.css

@@ -0,0 +1,21 @@
+/*
+* Badge theme
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+.dnb-badge {
+  color: #fff;
+  color: var(--color-white); }
+  .dnb-badge--variant-information {
+    background-color: #14555a;
+    background-color: var(--color-emerald-green); }
+  .dnb-badge--variant-notification {
+    background-color: #dc2a2a;
+    background-color: var(--color-fire-red); }

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

@@ -0,0 +1 @@
+.dnb-badge{color:#fff;color:var(--color-white)}.dnb-badge--variant-information{background-color:#14555a;background-color:var(--color-emerald-green)}.dnb-badge--variant-notification{background-color:#dc2a2a;background-color:var(--color-fire-red)}

package/cjs/components/badge/style/themes/dnb-badge-theme-ui.scss

@@ -0,0 +1,17 @@
+/*
+* Badge theme
+*
+*/
+
+@import '../../../../style/themes/imports.scss';
+
+.dnb-badge {
+  color: var(--color-white);
+
+  &--variant-information {
+    background-color: var(--color-emerald-green);
+  }
+  &--variant-notification {
+    background-color: var(--color-fire-red);
+  }
+}

package/cjs/components/badge/style/themes/ui.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/components/badge/style/themes/ui.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./dnb-badge-theme-ui.min.css");

package/cjs/components/badge/style.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/components/badge/style.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./style/dnb-badge.min.css");

package/cjs/components/breadcrumb/Breadcrumb.js

@@ -113,25 +113,26 @@ var Breadcrumb = function Breadcrumb(localProps) {
 
   var context = _react.default.useContext(_Context.default);
 
-  var _usePropsWithContext = (0, _hooks.usePropsWithContext)(localProps, defaultProps, context === null || context === void 0 ? void 0 : (_context$translation = context.translation) === null || _context$translation === void 0 ? void 0 : _context$translation.Breadcrumb, context === null || context === void 0 ? void 0 : context.Breadcrumb, {
+  var allProps = (0, _hooks.usePropsWithContext)(localProps, defaultProps, context === null || context === void 0 ? void 0 : (_context$translation = context.translation) === null || _context$translation === void 0 ? void 0 : _context$translation.Breadcrumb, context === null || context === void 0 ? void 0 : context.Breadcrumb, {
     skeleton: context === null || context === void 0 ? void 0 : context.skeleton
-  }),
-      className = _usePropsWithContext.className,
-      skeleton = _usePropsWithContext.skeleton,
-      childrenItems = _usePropsWithContext.children,
-      variant = _usePropsWithContext.variant,
-      onClick = _usePropsWithContext.onClick,
-      navText = _usePropsWithContext.navText,
-      goBackText = _usePropsWithContext.goBackText,
-      homeText = _usePropsWithContext.homeText,
-      backToText = _usePropsWithContext.backToText,
-      styleType = _usePropsWithContext.styleType,
-      collapsedStyleType = _usePropsWithContext.collapsedStyleType,
-      overrideIsCollapsed = _usePropsWithContext.isCollapsed,
-      spacing = _usePropsWithContext.spacing,
-      data = _usePropsWithContext.data,
-      href = _usePropsWithContext.href,
-      props = _objectWithoutProperties(_usePropsWithContext, _excluded);
+  });
+
+  var className = allProps.className,
+      skeleton = allProps.skeleton,
+      childrenItems = allProps.children,
+      variant = allProps.variant,
+      onClick = allProps.onClick,
+      navText = allProps.navText,
+      goBackText = allProps.goBackText,
+      homeText = allProps.homeText,
+      backToText = allProps.backToText,
+      styleType = allProps.styleType,
+      collapsedStyleType = allProps.collapsedStyleType,
+      overrideIsCollapsed = allProps.isCollapsed,
+      spacing = allProps.spacing,
+      data = allProps.data,
+      href = allProps.href,
+      props = _objectWithoutProperties(allProps, _excluded);
 
   var skeletonClasses = (0, _SkeletonHelper.createSkeletonClass)('font', skeleton, context);
   var spacingClasses = (0, _SpacingHelper.createSpacingClasses)(props);
@@ -172,6 +173,7 @@ var Breadcrumb = function Breadcrumb(localProps) {
     }), childrenItems);
   };
 
+  (0, _componentHelper.validateDOMAttributes)(allProps, props);
   return _react.default.createElement("nav", _extends({
     "aria-label": (0, _componentHelper.convertJsxToString)(navText),
     className: (0, _classnames.default)('dnb-breadcrumb', skeletonClasses, spacingClasses, className, spacing && 'dnb-breadcrumb--spacing'),

package/cjs/components/button/Button.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { SkeletonShow } from '../skeleton/Skeleton';
 import { IconPrimaryIcon } from '../icon-primary/IconPrimary';
+import { DataAttributeTypes } from '../../shared/interfaces';
 export type ButtonText = string | React.ReactNode;
 export type ButtonVariant =
   | 'primary'
@@ -72,9 +73,10 @@ export type ButtonOnClick = string | ((...args: any[]) => any);
 
 export interface ButtonProps
   extends Omit<
-    React.HTMLProps<HTMLElement>,
-    'disabled' | 'size' | 'title' | 'wrap'
-  > {
+      React.HTMLProps<HTMLElement>,
+      'disabled' | 'size' | 'title' | 'wrap'
+    >,
+    Partial<DataAttributeTypes> {
   /**
    * The content of the button can be a string or a React Element.
    */