@dnb/eufemia 10.0.0-beta.4 → 10.0.0-beta.6

package/extensions/payment-card/utils/cardProducts.js

@@ -71,7 +71,7 @@ const cardData = [{
   cardDesign: defaultDesign,
   productType: ProductType.None,
   cardType: CardType.Visa,
-  bankAxept: BankAxeptType.None
+  bankAxept: BankAxeptType.BankAxept
 }, {
   productCode: 'VK4',
   productName: 'DNB Visa',
@@ -79,7 +79,7 @@ const cardData = [{
   cardDesign: defaultDesign,
   productType: ProductType.None,
   cardType: CardType.Visa,
-  bankAxept: BankAxeptType.None
+  bankAxept: BankAxeptType.BankAxept
 }, {
   productCode: '084',
   productName: 'Pluss Mastercard(leve)',
@@ -111,7 +111,7 @@ const cardData = [{
   cardDesign: pluss,
   productType: ProductType.Pluss,
   cardType: CardType.Visa,
-  bankAxept: BankAxeptType.None
+  bankAxept: BankAxeptType.BankAxept
 }, {
   productCode: 'VL4',
   productName: 'DNB Visa u/leg',
@@ -151,7 +151,7 @@ const cardData = [{
   cardDesign: sagaPlatinum,
   productType: ProductType.Saga,
   cardType: CardType.Visa,
-  bankAxept: BankAxeptType.None
+  bankAxept: BankAxeptType.BankAxept
 }, {
   productCode: 'VP3',
   productName: 'Private Banking Visa',
@@ -159,7 +159,7 @@ const cardData = [{
   cardDesign: privateBanking,
   productType: ProductType.PrivateBanking,
   cardType: CardType.Visa,
-  bankAxept: BankAxeptType.None
+  bankAxept: BankAxeptType.BankAxept
 }, {
   productCode: 'VP4',
   productName: 'SAGA Platinum Visa u/leg',

package/fragments/drawer-list/DrawerList.js

@@ -15,6 +15,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import keycode from 'keycode';
 import { isTrue, makeUniqueId, extendPropsWithContextInClassComponent, validateDOMAttributes, dispatchCustomElementEvent } from '../../shared/component-helper';
+import { getThemeClasses } from '../../shared/Theme';
 import { createSpacingClasses } from '../../components/space/SpacingHelper';
 import DrawerListContext from './DrawerListContext';
 import DrawerListProvider from './DrawerListProvider';
@@ -116,6 +117,8 @@ class DrawerListInstance extends React.PureComponent {
   }
 
   render() {
+    var _this$context2;
+
     const props = extendPropsWithContextInClassComponent(this.props, DrawerList.defaultProps, this.context.getTranslation(this.props).DrawerList);
 
     const {
@@ -270,7 +273,7 @@ class DrawerListInstance extends React.PureComponent {
       include_owner_width: align_drawer === 'right',
       independent_width: isTrue(independent_width),
       fixed_position: isTrue(fixed_position),
-      className: portal_class
+      className: getThemeClasses((_this$context2 = this.context) === null || _this$context2 === void 0 ? void 0 : _this$context2.theme, portal_class)
     }, mainList) : mainList);
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnb/eufemia",
-  "version": "10.0.0-beta.4",
+  "version": "10.0.0-beta.6",
   "description": "DNB Eufemia Design System UI Library",
   "license": "SEE LICENSE IN LICENSE FILE",
   "author": "DNB Team & Tobias Høegh",

package/shared/Eufemia.js

@@ -2,7 +2,7 @@ export function init() {
   if (typeof window !== 'undefined') {
     class Eufemia {
       get version() {
-        return '10.0.0-beta.4';
+        return '10.0.0-beta.6';
       }
 
     }

package/shared/Theme.d.ts

@@ -13,7 +13,15 @@ export declare type ThemeProps = {
     variant?: ThemeVariants;
     size?: ThemeSizes;
     colorMapping?: ColorMapping;
-    element?: DynamicElement;
+    element?: DynamicElement | false;
 };
 export declare type ThemeAllProps = ThemeProps & React.HTMLAttributes<HTMLElement>;
 export default function Theme(themeProps: ThemeAllProps): JSX.Element;
+export declare function ThemeWrapper({ children, theme, element, className, ...rest }: {
+    [x: string]: any;
+    children: any;
+    theme: any;
+    element?: any;
+    className?: any;
+}): any;
+export declare function getThemeClasses(theme: ThemeProps, className?: any): any;

package/shared/Theme.js

@@ -1,58 +1,80 @@
 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 = ["children", "element"],
-      _excluded2 = ["name", "variant", "size"];
-
-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; }
-
+const _excluded = ["children", "element", "name", "variant", "size", "colorMapping"],
+      _excluded2 = ["children", "theme", "element", "className"];
 import React from 'react';
 import classnames from 'classnames';
 import Context from './Context';
 import Provider from './Provider';
+import { extendPropsWithContext } from './component-helper';
 export default function Theme(themeProps) {
   const context = React.useContext(Context);
 
   const {
     children,
-    element
+    element,
+    name,
+    variant,
+    size,
+    colorMapping
   } = themeProps,
-        theme = _objectWithoutProperties(themeProps, _excluded);
-
-  const currentTheme = _objectSpread(_objectSpread({}, context === null || context === void 0 ? void 0 : context.theme), theme);
+        restProps = _objectWithoutProperties(themeProps, _excluded);
 
+  const theme = extendPropsWithContext({
+    name,
+    variant,
+    size,
+    colorMapping
+  }, null, context === null || context === void 0 ? void 0 : context.theme);
   return React.createElement(Provider, {
-    theme: currentTheme
-  }, React.createElement(ThemeWrapper, {
+    theme: theme
+  }, React.createElement(ThemeWrapper, _extends({
     element: element,
-    currentTheme: currentTheme
-  }, children));
+    theme: theme
+  }, restProps), children));
 }
-
-function ThemeWrapper(_ref) {
+export function ThemeWrapper(_ref) {
   let {
     children,
-    element,
-    currentTheme
-  } = _ref;
+    theme,
+    element = null,
+    className = null
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded2);
+
+  const Wrapper = element === false ? React.Fragment : element || 'div';
+  const ref = React.useRef(null);
+
+  if (Wrapper === React.Fragment) {
+    return children;
+  }
 
+  rest['ref'] = ref;
+  const classNames = getThemeClasses(theme, className);
   const {
     name,
     variant,
     size
-  } = currentTheme,
-        rest = _objectWithoutProperties(currentTheme, _excluded2);
-
-  const Wrapper = element || 'div';
-  const ref = React.useRef(null);
-  rest['ref'] = ref;
-  const className = classnames('eufemia-theme', name && `eufemia-theme__${name}` + (variant ? ` eufemia-theme__${name}--${variant}` : ""), size && `eufemia-theme__size--${size}`);
+  } = theme;
   return React.createElement(Wrapper, _extends({
     "data-name": name,
     "data-variant": variant,
     "data-size": size,
-    className: className
+    className: classNames
   }, rest), children);
+}
+export function getThemeClasses(theme) {
+  let className = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+
+  if (!theme) {
+    return className;
+  }
+
+  const {
+    name,
+    variant,
+    size,
+    colorMapping
+  } = theme;
+  return classnames(className, 'eufemia-theme', name && `eufemia-theme__${name}` + (variant ? ` eufemia-theme__${name}--${variant}` : ""), colorMapping && `eufemia-theme__color-mapping--${colorMapping}`, size && `eufemia-theme__size--${size}`);
 }

package/style/dnb-ui-components.css

@@ -1876,7 +1876,11 @@ html[data-visual-test] .dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date-
   height: 1px;
 }
 .dnb-date-picker__addon {
-  display: block;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  grid-gap: 1rem;
+  gap: 1rem;
   padding: 1rem;
 }
 .dnb-date-picker__addon::after {