@dnb/eufemia 10.10.0 → 10.11.0

package/es/extensions/payment-card/PaymentCard.js

@@ -31,7 +31,10 @@ const translationDefaultPropsProps = {
   text_card_number: null,
   text_expired: null,
   text_blocked: null,
-  text_not_active: null
+  text_not_active: null,
+  text_order_in_process: null,
+  text_renewed: null,
+  text_replaced: null
 };
 export default class PaymentCard extends React.PureComponent {
   render() {
@@ -97,7 +100,7 @@ _defineProperty(PaymentCard, "defaultProps", _objectSpread({
 process.env.NODE_ENV !== "production" ? PaymentCard.propTypes = _objectSpread(_objectSpread({
   product_code: PropTypes.string.isRequired,
   card_number: PropTypes.string.isRequired,
-  card_status: PropTypes.oneOf(['active', 'blocked', 'expired', 'not_active']),
+  card_status: PropTypes.oneOf(['active', 'blocked', 'expired', 'not_active', 'order_in_process', 'renewed', 'replaced']),
   variant: PropTypes.oneOf(['normal', 'compact']),
   digits: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   raw_data: cardDataPropTypes,
@@ -140,42 +143,55 @@ process.env.NODE_ENV !== "production" ? StatusOverlay.propTypes = {
 StatusOverlay.defaultProps = {
   skeleton: false
 };
+const BlockingOverlay = ({
+  cardStatus,
+  text
+}, skeleton) => {
+  return React.createElement("div", {
+    className: classnames('dnb-payment-card__blocking__overlay', createSkeletonClass('font', skeleton))
+  }, React.createElement("div", {
+    className: "dnb-payment-card__blocking__center"
+  }, React.createElement(StatusIcon, {
+    status: cardStatus
+  }), React.createElement(P, {
+    top: "xx-small"
+  }, text)));
+};
 function StatusOverlay({
   cardStatus,
-  translations,
-  skeleton
+  translations
 }) {
   switch (cardStatus) {
     case 'not_active':
-      return React.createElement("div", {
-        className: classnames('dnb-payment-card__blocking__overlay', createSkeletonClass('font', skeleton))
-      }, React.createElement("div", {
-        className: "dnb-payment-card__blocking__center"
-      }, React.createElement(StatusIcon, {
-        status: cardStatus
-      }), React.createElement(P, {
-        top: "xx-small"
-      }, translations.text_not_active)));
+      return React.createElement(BlockingOverlay, {
+        cardStatus: cardStatus,
+        text: translations.text_not_active
+      });
+    case 'order_in_process':
+      return React.createElement(BlockingOverlay, {
+        cardStatus: cardStatus,
+        text: translations.text_order_in_process
+      });
+    case 'renewed':
+      return React.createElement(BlockingOverlay, {
+        cardStatus: cardStatus,
+        text: translations.text_renewed
+      });
+    case 'replaced':
+      return React.createElement(BlockingOverlay, {
+        cardStatus: cardStatus,
+        text: translations.text_replaced
+      });
     case 'blocked':
-      return React.createElement("div", {
-        className: classnames('dnb-payment-card__blocking__overlay', createSkeletonClass('font', skeleton))
-      }, React.createElement("div", {
-        className: "dnb-payment-card__blocking__center"
-      }, React.createElement(StatusIcon, {
-        status: cardStatus
-      }), React.createElement(P, {
-        top: "xx-small"
-      }, translations.text_blocked)));
+      return React.createElement(BlockingOverlay, {
+        cardStatus: cardStatus,
+        text: translations.text_blocked
+      });
     case 'expired':
-      return React.createElement("div", {
-        className: classnames('dnb-payment-card__blocking__overlay', createSkeletonClass('font', skeleton))
-      }, React.createElement("div", {
-        className: "dnb-payment-card__blocking__center"
-      }, React.createElement(StatusIcon, {
-        status: cardStatus
-      }), React.createElement(P, {
-        top: "xx-small"
-      }, translations.text_expired)));
+      return React.createElement(BlockingOverlay, {
+        cardStatus: cardStatus,
+        text: translations.text_expired
+      });
     case 'active':
     default:
       return null;

package/es/extensions/payment-card/PaymentCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentCard.js","names":["React","PropTypes","classnames","Context","Provider","isTrue","validateDOMAttributes","extendPropsWithContextInClassComponent","spacingPropTypes","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","P","ProductType","CardType","BankAxeptType","Designs","defaultDesign","cardProducts","ProductLogo","TypeLogo","BankLogo","StatusIcon","BankAxeptLogo","cardDataPropTypes","process","env","NODE_ENV","shape","productCode","string","isRequired","productName","displayName","cardDesign","object","cardType","productType","bankAxept","translationDefaultPropsProps","text_card_number","text_expired","text_blocked","text_not_active","PaymentCard","PureComponent","render","_this$context","props","defaultProps","locale","context","skeleton","product_code","card_number","card_status","variant","digits","id","raw_data","className","class","_className","children","attributes","_objectWithoutProperties","_excluded","cardData","getCardData","params","_objectSpread","createElement","Consumer","translation","translations","NormalCard","data","cardStatus","cardNumber","formatCardNumber","parseFloat","_defineProperty","propTypes","oneOf","oneOfType","number","bool","node","func","formatCardNumberRegex","length","slice","replace","trim","card","find","item","defaultCard","None","StatusOverlay","status","top","CardText","modifier","_data$cardDesign","_extends","cardStyle","backgroundImage","style","logoType","bankLogo"],"sources":["../../../../src/extensions/payment-card/PaymentCard.js"],"sourcesContent":["/**\n * Web PaymentCard Component\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport Provider from '../../shared/Provider'\nimport {\n  isTrue,\n  validateDOMAttributes,\n  extendPropsWithContextInClassComponent,\n} from '../../shared/component-helper'\nimport {\n  spacingPropTypes,\n  createSpacingClasses,\n} from '../../components/space/SpacingHelper'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../../components/skeleton/SkeletonHelper'\nimport P from '../../elements/P'\n\nimport { ProductType, CardType, BankAxeptType } from './utils/Types'\nimport Designs, { defaultDesign } from './utils/CardDesigns'\nimport cardProducts from './utils/cardProducts'\nimport {\n  ProductLogo,\n  TypeLogo,\n  BankLogo,\n  StatusIcon,\n  BankAxeptLogo,\n} from './icons'\n\nexport { Designs, ProductType, CardType, BankAxeptType }\n\nconst cardDataPropTypes = PropTypes.shape({\n  productCode: PropTypes.string.isRequired,\n  productName: PropTypes.string.isRequired,\n  displayName: PropTypes.string.isRequired,\n  cardDesign: PropTypes.object.isRequired,\n  cardType: PropTypes.object.isRequired,\n  productType: PropTypes.object.isRequired,\n  bankAxept: PropTypes.object.isRequired,\n})\n\nconst translationDefaultPropsProps = {\n  text_card_number: null,\n  text_expired: null,\n  text_blocked: null,\n  text_not_active: null,\n}\n\nexport default class PaymentCard extends React.PureComponent {\n  static contextType = Context\n\n  static propTypes = {\n    product_code: PropTypes.string.isRequired,\n    card_number: PropTypes.string.isRequired,\n    card_status: PropTypes.oneOf([\n      'active',\n      'blocked',\n      'expired',\n      'not_active',\n    ]),\n    variant: PropTypes.oneOf(['normal', 'compact']),\n    digits: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    raw_data: cardDataPropTypes,\n    id: PropTypes.string,\n    locale: PropTypes.string,\n\n    skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n\n    ...spacingPropTypes,\n\n    class: PropTypes.string,\n    className: PropTypes.string,\n    children: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.node,\n      PropTypes.func,\n    ]),\n  }\n\n  static defaultProps = {\n    digits: 8,\n    locale: null,\n    card_status: 'active',\n    variant: 'normal',\n\n    id: null,\n    raw_data: null,\n\n    skeleton: false,\n    class: null,\n    className: null,\n    children: null,\n\n    ...translationDefaultPropsProps,\n  }\n\n  render() {\n    // use only the props from context, who are available here anyway\n    const props = extendPropsWithContextInClassComponent(\n      this.props,\n      PaymentCard.defaultProps,\n      { locale: this.context.locale },\n      { skeleton: this.context?.skeleton }\n    )\n\n    const {\n      product_code,\n      card_number,\n      card_status,\n      variant,\n      digits,\n      id,\n      raw_data,\n      locale,\n      skeleton,\n      className,\n      class: _className,\n      children, //eslint-disable-line\n      ...attributes\n    } = props\n\n    const cardData = raw_data || getCardData(product_code)\n\n    const params = {\n      className: classnames(\n        'dnb-payment-card',\n        `dnb-payment-card--${variant}`,\n        createSkeletonClass(null, skeleton, this.context),\n        createSpacingClasses(props),\n        className,\n        _className\n      ),\n      ...attributes,\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      <Provider locale={locale}>\n        <Context.Consumer>\n          {({ translation }) => {\n            const translations = extendPropsWithContextInClassComponent(\n              this.props,\n              translationDefaultPropsProps,\n              translation.PaymentCard\n            )\n            return (\n              <figure {...params}>\n                <figcaption className=\"dnb-sr-only dnb-payment-card__figcaption\">\n                  {cardData.productName}\n                </figcaption>\n                <NormalCard\n                  id={id}\n                  skeleton={isTrue(skeleton)}\n                  data={cardData}\n                  cardStatus={card_status}\n                  cardNumber={formatCardNumber(\n                    card_number,\n                    parseFloat(digits)\n                  )}\n                  translations={translations}\n                />\n              </figure>\n            )\n          }}\n        </Context.Consumer>\n      </Provider>\n    )\n  }\n}\n\nconst formatCardNumberRegex = /(?=(?:....)*$)/g\n\nexport const formatCardNumber = (cardNumber, digits = 8) => {\n  if (!cardNumber) {\n    return cardNumber\n  }\n  if (digits && digits <= cardNumber.length) {\n    return cardNumber\n      .slice(cardNumber.length - digits, cardNumber.length)\n      .replace(formatCardNumberRegex, ' ')\n      .trim()\n  }\n  return cardNumber.replace(formatCardNumberRegex, ' ').trim()\n}\n\nexport const getCardData = (productCode) => {\n  const card = cardProducts.find(\n    (item) => item.productCode === productCode\n  )\n  return card || defaultCard(productCode)\n}\n\nconst defaultCard = (productCode) => ({\n  productCode,\n  productName: '',\n  displayName: '',\n  cardDesign: defaultDesign,\n  cardType: CardType.None,\n  productType: ProductType.None,\n  bankAxept: BankAxeptType.None,\n})\n\nStatusOverlay.propTypes = {\n  cardStatus: PropTypes.string.isRequired,\n  translations: PropTypes.object.isRequired,\n  skeleton: PropTypes.bool,\n}\nStatusOverlay.defaultProps = {\n  skeleton: false,\n}\n\nfunction StatusOverlay({ cardStatus, translations, skeleton }) {\n  switch (cardStatus) {\n    case 'not_active':\n      return (\n        <div\n          className={classnames(\n            'dnb-payment-card__blocking__overlay',\n            createSkeletonClass('font', skeleton)\n          )}\n        >\n          <div className=\"dnb-payment-card__blocking__center\">\n            <StatusIcon status={cardStatus} />\n            <P top=\"xx-small\">{translations.text_not_active}</P>\n          </div>\n        </div>\n      )\n    case 'blocked':\n      return (\n        <div\n          className={classnames(\n            'dnb-payment-card__blocking__overlay',\n            createSkeletonClass('font', skeleton)\n          )}\n        >\n          <div className=\"dnb-payment-card__blocking__center\">\n            <StatusIcon status={cardStatus} />\n            <P top=\"xx-small\">{translations.text_blocked}</P>\n          </div>\n        </div>\n      )\n\n    case 'expired':\n      return (\n        <div\n          className={classnames(\n            'dnb-payment-card__blocking__overlay',\n            createSkeletonClass('font', skeleton)\n          )}\n        >\n          <div className=\"dnb-payment-card__blocking__center\">\n            <StatusIcon status={cardStatus} />\n            <P top=\"xx-small\">{translations.text_expired}</P>\n          </div>\n        </div>\n      )\n\n    case 'active':\n    default:\n      return null\n  }\n}\n\nCardText.propTypes = {\n  cardNumber: PropTypes.string.isRequired,\n  translations: PropTypes.object.isRequired,\n  skeleton: PropTypes.bool.isRequired,\n}\n\nfunction CardText({ cardNumber, translations, skeleton }) {\n  return (\n    <span\n      className={classnames(\n        'dnb-payment-card__card__wrapper',\n        createSkeletonClass('font', skeleton)\n      )}\n    >\n      <P\n        className=\"dnb-payment-card__card__holder\"\n        modifier=\"x-small medium\"\n      >\n        {translations.text_card_number}\n      </P>\n      <P className=\"dnb-payment-card__card__numbers\">{cardNumber}</P>\n    </span>\n  )\n}\n\nNormalCard.propTypes = {\n  id: PropTypes.string,\n  skeleton: PropTypes.bool,\n  data: cardDataPropTypes.isRequired,\n  cardStatus: PropTypes.string.isRequired,\n  cardNumber: PropTypes.string.isRequired,\n  translations: PropTypes.object.isRequired,\n}\nNormalCard.defaultProps = {\n  id: null,\n  skeleton: null,\n}\n\nfunction NormalCard({\n  data,\n  cardStatus,\n  cardNumber,\n  id,\n  skeleton,\n  translations,\n}) {\n  return (\n    <div\n      id={id}\n      className={classnames(\n        'dnb-payment-card__card',\n        `dnb-payment-card__${data.cardDesign.cardStyle}`\n      )}\n      {...(data.cardDesign?.backgroundImage\n        ? {\n            style: {\n              backgroundImage: `url(${data.cardDesign.backgroundImage})`,\n            },\n          }\n        : {})}\n    >\n      <div className=\"dnb-payment-card__card__content\">\n        <div className=\"dnb-payment-card__card__top\">\n          <BankLogo logoType={data.cardDesign.bankLogo} />\n          <ProductLogo\n            productType={data.productType}\n            cardDesign={data.cardDesign}\n          />\n          <BankAxeptLogo\n            bankAxept={data.bankAxept}\n            cardDesign={data.cardDesign}\n          />\n        </div>\n        <div className=\"dnb-payment-card__card__bottom\">\n          <CardText\n            cardNumber={cardNumber}\n            displayName={data.displayName}\n            translations={translations}\n            skeleton={skeleton}\n          />\n          <TypeLogo\n            cardType={data.cardType}\n            cardDesign={data.cardDesign}\n          />\n        </div>\n      </div>\n      <StatusOverlay\n        skeleton={skeleton}\n        cardStatus={cardStatus}\n        translations={translations}\n      />\n    </div>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"PaymentCard.js","names":["React","PropTypes","classnames","Context","Provider","isTrue","validateDOMAttributes","extendPropsWithContextInClassComponent","spacingPropTypes","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","P","ProductType","CardType","BankAxeptType","Designs","defaultDesign","cardProducts","ProductLogo","TypeLogo","BankLogo","StatusIcon","BankAxeptLogo","cardDataPropTypes","process","env","NODE_ENV","shape","productCode","string","isRequired","productName","displayName","cardDesign","object","cardType","productType","bankAxept","translationDefaultPropsProps","text_card_number","text_expired","text_blocked","text_not_active","text_order_in_process","text_renewed","text_replaced","PaymentCard","PureComponent","render","_this$context","props","defaultProps","locale","context","skeleton","product_code","card_number","card_status","variant","digits","id","raw_data","className","class","_className","children","attributes","_objectWithoutProperties","_excluded","cardData","getCardData","params","_objectSpread","createElement","Consumer","translation","translations","NormalCard","data","cardStatus","cardNumber","formatCardNumber","parseFloat","_defineProperty","propTypes","oneOf","oneOfType","number","bool","node","func","formatCardNumberRegex","length","slice","replace","trim","card","find","item","defaultCard","None","StatusOverlay","BlockingOverlay","text","status","top","CardText","modifier","_data$cardDesign","_extends","cardStyle","backgroundImage","style","logoType","bankLogo"],"sources":["../../../../src/extensions/payment-card/PaymentCard.js"],"sourcesContent":["/**\n * Web PaymentCard Component\n *\n */\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport Provider from '../../shared/Provider'\nimport {\n  isTrue,\n  validateDOMAttributes,\n  extendPropsWithContextInClassComponent,\n} from '../../shared/component-helper'\nimport {\n  spacingPropTypes,\n  createSpacingClasses,\n} from '../../components/space/SpacingHelper'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../../components/skeleton/SkeletonHelper'\nimport P from '../../elements/P'\n\nimport { ProductType, CardType, BankAxeptType } from './utils/Types'\nimport Designs, { defaultDesign } from './utils/CardDesigns'\nimport cardProducts from './utils/cardProducts'\nimport {\n  ProductLogo,\n  TypeLogo,\n  BankLogo,\n  StatusIcon,\n  BankAxeptLogo,\n} from './icons'\n\nexport { Designs, ProductType, CardType, BankAxeptType }\n\nconst cardDataPropTypes = PropTypes.shape({\n  productCode: PropTypes.string.isRequired,\n  productName: PropTypes.string.isRequired,\n  displayName: PropTypes.string.isRequired,\n  cardDesign: PropTypes.object.isRequired,\n  cardType: PropTypes.object.isRequired,\n  productType: PropTypes.object.isRequired,\n  bankAxept: PropTypes.object.isRequired,\n})\n\nconst translationDefaultPropsProps = {\n  text_card_number: null,\n  text_expired: null,\n  text_blocked: null,\n  text_not_active: null,\n  text_order_in_process: null,\n  text_renewed: null,\n  text_replaced: null,\n}\n\nexport default class PaymentCard extends React.PureComponent {\n  static contextType = Context\n\n  static propTypes = {\n    product_code: PropTypes.string.isRequired,\n    card_number: PropTypes.string.isRequired,\n    card_status: PropTypes.oneOf([\n      'active',\n      'blocked',\n      'expired',\n      'not_active',\n      'order_in_process',\n      'renewed',\n      'replaced',\n    ]),\n    variant: PropTypes.oneOf(['normal', 'compact']),\n    digits: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    raw_data: cardDataPropTypes,\n    id: PropTypes.string,\n    locale: PropTypes.string,\n\n    skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n\n    ...spacingPropTypes,\n\n    class: PropTypes.string,\n    className: PropTypes.string,\n    children: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.node,\n      PropTypes.func,\n    ]),\n  }\n\n  static defaultProps = {\n    digits: 8,\n    locale: null,\n    card_status: 'active',\n    variant: 'normal',\n\n    id: null,\n    raw_data: null,\n\n    skeleton: false,\n    class: null,\n    className: null,\n    children: null,\n\n    ...translationDefaultPropsProps,\n  }\n\n  render() {\n    // use only the props from context, who are available here anyway\n    const props = extendPropsWithContextInClassComponent(\n      this.props,\n      PaymentCard.defaultProps,\n      { locale: this.context.locale },\n      { skeleton: this.context?.skeleton }\n    )\n\n    const {\n      product_code,\n      card_number,\n      card_status,\n      variant,\n      digits,\n      id,\n      raw_data,\n      locale,\n      skeleton,\n      className,\n      class: _className,\n      children, //eslint-disable-line\n      ...attributes\n    } = props\n\n    const cardData = raw_data || getCardData(product_code)\n\n    const params = {\n      className: classnames(\n        'dnb-payment-card',\n        `dnb-payment-card--${variant}`,\n        createSkeletonClass(null, skeleton, this.context),\n        createSpacingClasses(props),\n        className,\n        _className\n      ),\n      ...attributes,\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      <Provider locale={locale}>\n        <Context.Consumer>\n          {({ translation }) => {\n            const translations = extendPropsWithContextInClassComponent(\n              this.props,\n              translationDefaultPropsProps,\n              translation.PaymentCard\n            )\n            return (\n              <figure {...params}>\n                <figcaption className=\"dnb-sr-only dnb-payment-card__figcaption\">\n                  {cardData.productName}\n                </figcaption>\n                <NormalCard\n                  id={id}\n                  skeleton={isTrue(skeleton)}\n                  data={cardData}\n                  cardStatus={card_status}\n                  cardNumber={formatCardNumber(\n                    card_number,\n                    parseFloat(digits)\n                  )}\n                  translations={translations}\n                />\n              </figure>\n            )\n          }}\n        </Context.Consumer>\n      </Provider>\n    )\n  }\n}\n\nconst formatCardNumberRegex = /(?=(?:....)*$)/g\n\nexport const formatCardNumber = (cardNumber, digits = 8) => {\n  if (!cardNumber) {\n    return cardNumber\n  }\n  if (digits && digits <= cardNumber.length) {\n    return cardNumber\n      .slice(cardNumber.length - digits, cardNumber.length)\n      .replace(formatCardNumberRegex, ' ')\n      .trim()\n  }\n  return cardNumber.replace(formatCardNumberRegex, ' ').trim()\n}\n\nexport const getCardData = (productCode) => {\n  const card = cardProducts.find(\n    (item) => item.productCode === productCode\n  )\n  return card || defaultCard(productCode)\n}\n\nconst defaultCard = (productCode) => ({\n  productCode,\n  productName: '',\n  displayName: '',\n  cardDesign: defaultDesign,\n  cardType: CardType.None,\n  productType: ProductType.None,\n  bankAxept: BankAxeptType.None,\n})\n\nStatusOverlay.propTypes = {\n  cardStatus: PropTypes.string.isRequired,\n  translations: PropTypes.object.isRequired,\n  skeleton: PropTypes.bool,\n}\nStatusOverlay.defaultProps = {\n  skeleton: false,\n}\n\nconst BlockingOverlay = ({ cardStatus, text }, skeleton) => {\n  return (\n    <div\n      className={classnames(\n        'dnb-payment-card__blocking__overlay',\n        createSkeletonClass('font', skeleton)\n      )}\n    >\n      <div className=\"dnb-payment-card__blocking__center\">\n        <StatusIcon status={cardStatus} />\n        <P top=\"xx-small\">{text}</P>\n      </div>\n    </div>\n  )\n}\n\nfunction StatusOverlay({ cardStatus, translations }) {\n  switch (cardStatus) {\n    case 'not_active':\n      return (\n        <BlockingOverlay\n          cardStatus={cardStatus}\n          text={translations.text_not_active}\n        />\n      )\n\n    case 'order_in_process':\n      return (\n        <BlockingOverlay\n          cardStatus={cardStatus}\n          text={translations.text_order_in_process}\n        />\n      )\n\n    case 'renewed':\n      return (\n        <BlockingOverlay\n          cardStatus={cardStatus}\n          text={translations.text_renewed}\n        />\n      )\n\n    case 'replaced':\n      return (\n        <BlockingOverlay\n          cardStatus={cardStatus}\n          text={translations.text_replaced}\n        />\n      )\n\n    case 'blocked':\n      return (\n        <BlockingOverlay\n          cardStatus={cardStatus}\n          text={translations.text_blocked}\n        />\n      )\n\n    case 'expired':\n      return (\n        <BlockingOverlay\n          cardStatus={cardStatus}\n          text={translations.text_expired}\n        />\n      )\n\n    case 'active':\n    default:\n      return null\n  }\n}\n\nCardText.propTypes = {\n  cardNumber: PropTypes.string.isRequired,\n  translations: PropTypes.object.isRequired,\n  skeleton: PropTypes.bool.isRequired,\n}\n\nfunction CardText({ cardNumber, translations, skeleton }) {\n  return (\n    <span\n      className={classnames(\n        'dnb-payment-card__card__wrapper',\n        createSkeletonClass('font', skeleton)\n      )}\n    >\n      <P\n        className=\"dnb-payment-card__card__holder\"\n        modifier=\"x-small medium\"\n      >\n        {translations.text_card_number}\n      </P>\n      <P className=\"dnb-payment-card__card__numbers\">{cardNumber}</P>\n    </span>\n  )\n}\n\nNormalCard.propTypes = {\n  id: PropTypes.string,\n  skeleton: PropTypes.bool,\n  data: cardDataPropTypes.isRequired,\n  cardStatus: PropTypes.string.isRequired,\n  cardNumber: PropTypes.string.isRequired,\n  translations: PropTypes.object.isRequired,\n}\nNormalCard.defaultProps = {\n  id: null,\n  skeleton: null,\n}\n\nfunction NormalCard({\n  data,\n  cardStatus,\n  cardNumber,\n  id,\n  skeleton,\n  translations,\n}) {\n  return (\n    <div\n      id={id}\n      className={classnames(\n        'dnb-payment-card__card',\n        `dnb-payment-card__${data.cardDesign.cardStyle}`\n      )}\n      {...(data.cardDesign?.backgroundImage\n        ? {\n            style: {\n              backgroundImage: `url(${data.cardDesign.backgroundImage})`,\n            },\n          }\n        : {})}\n    >\n      <div className=\"dnb-payment-card__card__content\">\n        <div className=\"dnb-payment-card__card__top\">\n          <BankLogo logoType={data.cardDesign.bankLogo} />\n          <ProductLogo\n            productType={data.productType}\n            cardDesign={data.cardDesign}\n          />\n          <BankAxeptLogo\n            bankAxept={data.bankAxept}\n            cardDesign={data.cardDesign}\n          />\n        </div>\n        <div className=\"dnb-payment-card__card__bottom\">\n          <CardText\n            cardNumber={cardNumber}\n            displayName={data.displayName}\n            translations={translations}\n            skeleton={skeleton}\n          />\n          <TypeLogo\n            cardType={data.cardType}\n            cardDesign={data.cardDesign}\n          />\n        </div>\n      </div>\n      <StatusOverlay\n        skeleton={skeleton}\n        cardStatus={cardStatus}\n        translations={translations}\n      />\n    </div>\n  )\n}\n"],"mappings":"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"}

package/es/extensions/payment-card/icons/index.js

@@ -1,10 +1,8 @@
-var _Expired, _NotActive, _Blocked;
+var _Expired, _CardIn, _Blocked, _Hourglass, _CardIn2, _CardIn3;
 import React from 'react';
 import BankAxept from './BankAxept';
 import DNB from './DNB';
-import Expired from './Clock';
-import Blocked from './Padlock';
-import NotActive from './CardIn';
+import { clock_medium as Expired, padlock_medium as Blocked, card_in_medium as CardIn, hourglass as Hourglass } from '../../../icons';
 import MastercardDefault from './MastercardDefault';
 import MastercardDark from './MastercardDark';
 import Pluss from './Pluss';
@@ -102,9 +100,15 @@ const StatusIcon = ({
     case 'expired':
       return _Expired || (_Expired = React.createElement(Expired, null));
     case 'not_active':
-      return _NotActive || (_NotActive = React.createElement(NotActive, null));
+      return _CardIn || (_CardIn = React.createElement(CardIn, null));
     case 'blocked':
       return _Blocked || (_Blocked = React.createElement(Blocked, null));
+    case 'order_in_process':
+      return _Hourglass || (_Hourglass = React.createElement(Hourglass, null));
+    case 'renewed':
+      return _CardIn2 || (_CardIn2 = React.createElement(CardIn, null));
+    case 'replaced':
+      return _CardIn3 || (_CardIn3 = React.createElement(CardIn, null));
     case 'active':
     default:
       return null;

package/es/extensions/payment-card/icons/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","BankAxept","DNB","Expired","Blocked","NotActive","MastercardDefault","MastercardDark","Pluss","Intro","Business","Bedrift","PB","SagaGold","SagaPlatinum","VisaDefault","VisaPlatinum","BankLogo","logoType","height","cata","Colored","color","createElement","fill","className","ProductLogo","productType","cardDesign","_SagaGold","_SagaPlatinum","_Pluss","_Intro","_Business","_Bedrift","_PB","id","Saga","saga","Gold","Platinum","None","PrivateBanking","privateBanking","Default","BankAxeptLogo","bankAxept","_BankAxept","_BankAxept2","_BankAxept3","_BankAxept4","_BankAxept5","White","Black20","Gray","Black","StatusIcon","status","_Expired","_NotActive","_Blocked","TypeLogo","cardType","_VisaPlatinum","_MastercardDefault","_MastercardDark","Visa","visa","Mastercard","mastercard","Dark"],"sources":["../../../../../src/extensions/payment-card/icons/index.js"],"sourcesContent":["import React from 'react'\n\nimport BankAxept from './BankAxept'\nimport DNB from './DNB'\nimport Expired from './Clock'\nimport Blocked from './Padlock'\nimport NotActive from './CardIn'\nimport MastercardDefault from './MastercardDefault'\nimport MastercardDark from './MastercardDark'\nimport Pluss from './Pluss'\nimport Intro from './Intro'\nimport Business from './Business'\nimport Bedrift from './Bedrift'\nimport PB from './PB'\nimport SagaGold from './SagaGold'\nimport SagaPlatinum from './SagaPlatinum'\nimport VisaDefault from './VisaDefault'\nimport VisaPlatinum from './VisaPlatinum'\n\nconst BankLogo = ({ logoType, height }) =>\n  logoType.cata({\n    Colored: (color) => (\n      <DNB\n        height={height}\n        fill={color}\n        className=\"dnb-payment-card__card__bank-logo\"\n      />\n    ),\n  })\n\nconst ProductLogo = ({ productType, cardDesign }) => {\n  const id = 'dnb-payment-card__card__product-type'\n  return productType.cata({\n    Saga: () =>\n      cardDesign.saga.cata({\n        Gold: () => <SagaGold className={id} />,\n        Platinum: () => <SagaPlatinum className={id} />,\n        None: () => null,\n      }),\n    Pluss: () => <Pluss className={id} />,\n    Intro: () => <Intro className={id} />,\n    Business: () => <Business className={id} />,\n    Bedrift: () => <Bedrift className={id} />,\n    PrivateBanking: () =>\n      cardDesign.privateBanking.cata({\n        Default: () => <PB className={id} />,\n        None: () => null,\n      }),\n    None: () => null,\n  })\n}\n\nconst BankAxeptLogo = ({ bankAxept, cardDesign }) => {\n  const id = 'dnb-payment-card__card__bank-axept'\n  return bankAxept.cata({\n    BankAxept: () =>\n      cardDesign.bankAxept.cata({\n        White: () => <BankAxept className={id} fill=\"#ffffff\" />,\n        Black20: () => <BankAxept className={id} fill=\"#cccccc\" />,\n        Gray: () => <BankAxept className={id} fill=\"#b2b4b3\" />,\n        Black: () => <BankAxept className={id} fill=\"#333333\" />,\n        Gold: () => <BankAxept className={id} fill=\"#BFA970\" />,\n      }),\n    None: () => null,\n  })\n}\n\nconst StatusIcon = ({ status }) => {\n  switch (status) {\n    case 'expired':\n      return <Expired />\n\n    case 'not_active':\n      return <NotActive />\n    \n    case 'blocked':\n      return <Blocked />\n\n    case 'active':\n    default:\n      return null\n  }\n}\n\nconst TypeLogo = ({ cardType, cardDesign }) => {\n  const id = 'dnb-payment-card__card__credit-type'\n  return cardType.cata({\n    Visa: () =>\n      cardDesign.visa.cata({\n        Colored: (color) => <VisaDefault className={id} fill={color} />,\n        Platinum: () => <VisaPlatinum className={id} />,\n      }),\n    Mastercard: () =>\n      cardDesign.mastercard.cata({\n        Default: () => <MastercardDefault className={id} />,\n        Dark: () => <MastercardDark className={id} />,\n      }),\n    None: () => null,\n  })\n}\n\nexport { BankLogo, ProductLogo, StatusIcon, TypeLogo, BankAxeptLogo }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","BankAxept","DNB","clock_medium","Expired","padlock_medium","Blocked","card_in_medium","CardIn","hourglass","Hourglass","MastercardDefault","MastercardDark","Pluss","Intro","Business","Bedrift","PB","SagaGold","SagaPlatinum","VisaDefault","VisaPlatinum","BankLogo","logoType","height","cata","Colored","color","createElement","fill","className","ProductLogo","productType","cardDesign","_SagaGold","_SagaPlatinum","_Pluss","_Intro","_Business","_Bedrift","_PB","id","Saga","saga","Gold","Platinum","None","PrivateBanking","privateBanking","Default","BankAxeptLogo","bankAxept","_BankAxept","_BankAxept2","_BankAxept3","_BankAxept4","_BankAxept5","White","Black20","Gray","Black","StatusIcon","status","_Expired","_CardIn","_Blocked","_Hourglass","_CardIn2","_CardIn3","TypeLogo","cardType","_VisaPlatinum","_MastercardDefault","_MastercardDark","Visa","visa","Mastercard","mastercard","Dark"],"sources":["../../../../../src/extensions/payment-card/icons/index.js"],"sourcesContent":["import React from 'react'\n\nimport BankAxept from './BankAxept'\nimport DNB from './DNB'\nimport {\n  clock_medium as Expired,\n  padlock_medium as Blocked,\n  card_in_medium as CardIn,\n  hourglass as Hourglass,\n} from '../../../icons'\nimport MastercardDefault from './MastercardDefault'\nimport MastercardDark from './MastercardDark'\nimport Pluss from './Pluss'\nimport Intro from './Intro'\nimport Business from './Business'\nimport Bedrift from './Bedrift'\nimport PB from './PB'\nimport SagaGold from './SagaGold'\nimport SagaPlatinum from './SagaPlatinum'\nimport VisaDefault from './VisaDefault'\nimport VisaPlatinum from './VisaPlatinum'\nconst BankLogo = ({ logoType, height }) =>\n  logoType.cata({\n    Colored: (color) => (\n      <DNB\n        height={height}\n        fill={color}\n        className=\"dnb-payment-card__card__bank-logo\"\n      />\n    ),\n  })\n\nconst ProductLogo = ({ productType, cardDesign }) => {\n  const id = 'dnb-payment-card__card__product-type'\n  return productType.cata({\n    Saga: () =>\n      cardDesign.saga.cata({\n        Gold: () => <SagaGold className={id} />,\n        Platinum: () => <SagaPlatinum className={id} />,\n        None: () => null,\n      }),\n    Pluss: () => <Pluss className={id} />,\n    Intro: () => <Intro className={id} />,\n    Business: () => <Business className={id} />,\n    Bedrift: () => <Bedrift className={id} />,\n    PrivateBanking: () =>\n      cardDesign.privateBanking.cata({\n        Default: () => <PB className={id} />,\n        None: () => null,\n      }),\n    None: () => null,\n  })\n}\n\nconst BankAxeptLogo = ({ bankAxept, cardDesign }) => {\n  const id = 'dnb-payment-card__card__bank-axept'\n  return bankAxept.cata({\n    BankAxept: () =>\n      cardDesign.bankAxept.cata({\n        White: () => <BankAxept className={id} fill=\"#ffffff\" />,\n        Black20: () => <BankAxept className={id} fill=\"#cccccc\" />,\n        Gray: () => <BankAxept className={id} fill=\"#b2b4b3\" />,\n        Black: () => <BankAxept className={id} fill=\"#333333\" />,\n        Gold: () => <BankAxept className={id} fill=\"#BFA970\" />,\n      }),\n    None: () => null,\n  })\n}\n\nconst StatusIcon = ({ status }) => {\n  switch (status) {\n    case 'expired':\n      return <Expired />\n\n    case 'not_active':\n      return <CardIn />\n\n    case 'blocked':\n      return <Blocked />\n\n    case 'order_in_process':\n      return <Hourglass />\n\n    case 'renewed':\n      return <CardIn />\n\n    case 'replaced':\n      return <CardIn />\n\n    case 'active':\n    default:\n      return null\n  }\n}\n\nconst TypeLogo = ({ cardType, cardDesign }) => {\n  const id = 'dnb-payment-card__card__credit-type'\n  return cardType.cata({\n    Visa: () =>\n      cardDesign.visa.cata({\n        Colored: (color) => <VisaDefault className={id} fill={color} />,\n        Platinum: () => <VisaPlatinum className={id} />,\n      }),\n    Mastercard: () =>\n      cardDesign.mastercard.cata({\n        Default: () => <MastercardDefault className={id} />,\n        Dark: () => <MastercardDark className={id} />,\n      }),\n    None: () => null,\n  })\n}\n\nexport { BankLogo, ProductLogo, StatusIcon, TypeLogo, BankAxeptLogo }\n"],"mappings":"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"}

package/es/fragments/drawer-list/style/dnb-drawer-list.scss

@@ -54,6 +54,9 @@
   --drawer-list-height--small: 1.5rem;
   --drawer-list-height--medium: 2.5rem;
   --drawer-list-height--large: 3rem;
+  --drawer-list-option-inner-background: var(--color-white);
+  --drawer-list-list-background: var(--color-white);
+  --drawer-list-list-line-height: var(--line-height-basis);
 
   display: block; // has to be block element so we can se the content
   position: relative;
@@ -116,8 +119,8 @@
     padding: 0;
 
     font-size: var(--font-size-basis);
-    line-height: var(--line-height-basis);
-    background-color: transparent;
+    line-height: var(--drawer-list-list-line-height);
+    background-color: var(--drawer-list-list-background);
 
     transform: translateY(0);
     transition:
@@ -193,7 +196,7 @@
       padding: 1rem;
 
       color: inherit;
-      background-color: var(--color-white);
+      background-color: var(--drawer-list-option-inner-background);
 
       // So e.g. an anchor gets aligned to left
       > * {

package/es/fragments/drawer-list/style/themes/dnb-drawer-list-theme-sbanken.scss

@@ -0,0 +1,179 @@
+/*
+* ScrollView theme
+*
+*/
+
+@import '../../../../style/core/utilities.scss';
+
+:root {
+  --drawer-list-height: 2.5rem;
+}
+
+.dnb-drawer-list {
+  --drawer-list-options-border-radius: 0 0 0.5rem 0.5rem;
+  --drawer-list-options-border-radius-reversed: 0.5rem 0.5rem 0 0;
+  --drawer-list-option-border-width: 0.125rem;
+  --drawer-list-option-inner-border-display: none;
+  --drawer-list-option-inner-background: transparent;
+  --drawer-list-list-background: var(--sb-color-white);
+
+  &__list {
+    margin-top: calc(
+      -1 * var(--drawer-list-option-border-width)
+    ); // Switch border width to a negative number
+    border-radius: var(--drawer-list-options-border-radius);
+
+    &:focus-visible {
+      outline: var(--sb-color-blue-dark) solid
+        var(--drawer-list-option-border-width);
+    }
+  }
+
+  &__option__inner {
+    overflow: visible;
+    background-color: transparent;
+    padding: 1rem 0.75rem;
+
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      bottom: -3px;
+      left: 0.5rem;
+      width: calc(100% - 1rem);
+      height: 1px;
+      @include fakeBorder(var(--sb-color-gray-dark), 0.125rem, inset);
+    }
+  }
+
+  &__options {
+    @include fakeBorder(
+      var(--sb-color-gray-dark-2),
+      var(--drawer-list-option-border-width),
+      inset
+    );
+    border-radius: var(--drawer-list-options-border-radius);
+  }
+
+  &__option {
+    border: var(--drawer-list-option-border-width) solid
+      var(--sb-color-gray-dark-2);
+    border-bottom-color: transparent;
+    border-top-color: transparent;
+    border-right-color: transparent; // Fix ugly border with scrollbar
+    background-color: transparent;
+    z-index: 0;
+
+    @include hover() {
+      border-color: var(--sb-color-violet);
+      z-index: 1;
+
+      .dnb-drawer-list__option__inner::before {
+        display: var(--drawer-list-option-inner-border-display);
+      }
+    }
+
+    @include active() {
+      border-color: var(--sb-color-violet);
+      z-index: 1;
+
+      .dnb-drawer-list__option__inner::before {
+        display: var(--drawer-list-option-inner-border-display);
+      }
+    }
+
+    &--selected {
+      background-color: var(--sb-color-violet);
+      color: var(--sb-color-white);
+      border-right-color: var(
+        --sb-color-gray-dark-2
+      ); // Compensate for transparent right border
+
+      &.last-of-type {
+        border-bottom-color: var(--sb-color-gray-dark-2);
+      }
+
+      .dnb-drawer-list__option__inner::before {
+        display: var(--drawer-list-option-inner-border-display);
+      }
+
+      // check icon
+      .dnb-drawer-list__option__inner::after {
+        content: '';
+
+        grid-column: 2;
+        grid-row: 1 / -1;
+
+        justify-self: end;
+        align-self: center;
+
+        width: 1rem;
+        height: 1rem;
+
+        background-size: cover;
+        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuOTk5OTYgMTEuMDU3M0wxNC42NjY2IDIuMzkwNjdMMTUuNjA5MyAzLjMzMzM0TDUuOTk5OTYgMTIuOTQyN0wwLjM5MDYyNSA3LjMzMzM0TDEuMzMzMjkgNi4zOTA2N0w1Ljk5OTk2IDExLjA1NzNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
+      }
+    }
+
+    &.last-of-type {
+      border-radius: var(--drawer-list-options-border-radius);
+
+      .dnb-drawer-list__option__inner::before {
+        display: none;
+      }
+    }
+
+    &:focus-visible {
+      border-color: var(--sb-color-blue-dark);
+      outline: 0.0625rem solid var(--sb-color-blue-dark);
+      background-color: var(--sb-color-blue-light-3);
+      color: var(--sb-color-blue-dark);
+      font-weight: var(--sb-font-weight-medium);
+      z-index: 1;
+
+      .dnb-drawer-list__option__inner::before {
+        display: var(--drawer-list-option-inner-border-display);
+      }
+
+      .dnb-drawer-list__option__inner::after {
+        // Selected checkmark icon
+        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuOTk5OTYgMTEuMDU3M0wxNC42NjY2IDIuMzkwNjdMMTUuNjA5MyAzLjMzMzM0TDUuOTk5OTYgMTIuOTQyN0wwLjM5MDYyNSA3LjMzMzM0TDEuMzMzMjkgNi4zOTA2N0w1Ljk5OTk2IDExLjA1NzNaIiBmaWxsPSIjMDA1Q0ZGIi8+Cjwvc3ZnPgo=');
+      }
+    }
+  }
+
+  &__triangle {
+    display: none;
+  }
+
+  // When it opens upwards
+  &--top {
+    .dnb-drawer-list__list {
+      border-radius: var(--drawer-list-options-border-radius-reversed);
+      margin-top: 0;
+      margin-bottom: calc(
+        -1 * var(--drawer-list-option-border-width)
+      ); // Switch border width to a negative number
+    }
+
+    .dnb-drawer-list__options {
+      border-radius: var(--drawer-list-options-border-radius-reversed);
+    }
+
+    .dnb-drawer-list__option {
+      &.last-of-type {
+        border-radius: 0;
+      }
+
+      &.first-of-type {
+        border-radius: var(--drawer-list-options-border-radius-reversed);
+      }
+    }
+
+    .dnb-drawer-list__option--selected {
+      &.first-of-type {
+        border-top-color: var(--sb-color-gray-dark-2);
+      }
+    }
+  }
+}

package/es/fragments/drawer-list/style/themes/dnb-drawer-list-theme-ui.scss

@@ -8,12 +8,13 @@
 .dnb-drawer-list {
   --drawer-list-options-border-radius: 0.25rem;
   --drawer-list-option-border-width: 0.0625rem;
+  --drawer-list-option-inner-background: var(--color-white);
+  --drawer-list-list-background: var(--color-white);
 
   color: var(--color-emerald-green);
 
   &__list {
     @include defaultDropShadow();
-    background-color: var(--color-white);
     border-radius: calc(
       var(--drawer-list-options-border-radius) + 0.15rem
     );
@@ -68,10 +69,6 @@
       font-weight: var(--font-weight-medium);
     }
 
-    &__inner {
-      background-color: var(--color-white);
-    }
-
     @include hover() {
       background-color: var(--color-mint-green-12);
 

package/es/fragments/lib.d.ts

@@ -14,7 +14,8 @@ export { DrawerList, ScrollView };
 export declare const getFragments: () => {
     DrawerList: typeof DrawerList;
     ScrollView: import("react").ForwardRefExoticComponent<import("./scroll-view/ScrollView").ScrollViewProps & import("../shared/types").SpacingElementProps & {
-        space?: import("../shared/types").SpaceType | import("../shared/types").SpacingElementProps;
+        space?: import("../shared/types").SpaceTypeAll;
+        innerSpace?: import("../shared/types").SpaceTypeAll | import("../shared/types").SpaceTypeMedia;
     } & Partial<Omit<import("react").HTMLAttributes<HTMLDivElement>, "title">> & {
         innerRef?: import("react").ForwardedRef<unknown>;
     } & import("react").RefAttributes<unknown>>;

package/es/fragments/scroll-view/ScrollView.d.ts

@@ -15,7 +15,8 @@ export type ScrollViewAllProps = ScrollViewProps & SpacingProps & Partial<Omit<R
     innerRef?: React.ForwardedRef<unknown>;
 };
 declare const _default: React.ForwardRefExoticComponent<ScrollViewProps & import("../../shared/types").SpacingElementProps & {
-    space?: import("../../shared/types").SpaceType | import("../../shared/types").SpacingElementProps;
+    space?: import("../../shared/types").SpaceTypeAll;
+    innerSpace?: import("../../shared/types").SpaceTypeAll | import("../../shared/types").SpaceTypeMedia;
 } & Partial<Omit<React.HTMLAttributes<HTMLDivElement>, "title">> & {
     innerRef?: React.ForwardedRef<unknown>;
 } & React.RefAttributes<unknown>>;

package/es/shared/Context.d.ts

@@ -31,6 +31,7 @@ import type { GlobalErrorProps } from '../components/GlobalError';
 import type { ModalProps } from '../components/modal/types';
 import type { AccordionProps } from '../components/Accordion';
 import type { StepIndicatorProps } from '../components/StepIndicator';
+import type { FormLabelProps } from '../components/FormLabel';
 import type { NumberFormatCurrency } from '../components/NumberFormat';
 import type { FormElementProps } from './helpers/filterValidProps';
 import type { ThemeProps } from './Theme';
@@ -62,6 +63,7 @@ export type ContextComponents = {
     Modal?: Partial<ModalProps>;
     Accordion?: Partial<AccordionProps>;
     StepIndicator?: Partial<StepIndicatorProps>;
+    FormLabel?: Partial<FormLabelProps>;
     NumberFormat?: Record<string, unknown>;
     Pagination?: Record<string, unknown>;
     /**

package/es/shared/Context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Context.js","names":["React","LOCALE","CURRENCY","CURRENCY_DISPLAY","defaultLocales","extend","prepareContext","props","locales","__context__","Object","assign","key","handleLocaleFallbacks","locale","translation","destruct","context","_objectSpread","updateTranslation","getTranslation","lang","breakpoints","skeleton","split","Context","createContext","currency","currency_display","source","validKeys","k","String","includes","list","val","last","length","forEach","i"],"sources":["../../../src/shared/Context.tsx"],"sourcesContent":["/**\n * Web Context Context\n *\n */\n\nimport React from 'react'\nimport { LOCALE, CURRENCY, CURRENCY_DISPLAY } from './defaults'\nimport defaultLocales from './locales'\nimport { extend } from './component-helper'\n\n// All TypeScript based Eufemia elements\nimport type { ScrollViewProps } from '../fragments/scroll-view/ScrollView'\n\n// All TypeScript based Eufemia components\nimport type { AnchorProps } from '../components/Anchor'\nimport type { ButtonProps } from '../components/button/Button'\nimport type { AvatarProps } from '../components/avatar/Avatar'\nimport type { AvatarGroupProps } from '../components/avatar/AvatarGroup'\nimport type { BadgeProps } from '../components/badge/Badge'\nimport type { BreadcrumbProps } from '../components/breadcrumb/Breadcrumb'\nimport type { BreadcrumbItemProps } from '../components/breadcrumb/BreadcrumbItem'\nimport type { InfoCardProps } from '../components/info-card/InfoCard'\nimport type { SliderProps } from '../components/slider/Slider'\nimport type { TagProps } from '../components/tag/Tag'\nimport type { TagGroupProps } from '../components/tag/TagGroup'\nimport type { TimelineProps } from '../components/timeline/Timeline'\nimport type { TimelineItemProps } from '../components/timeline/TimelineItem'\nimport type { VisuallyHiddenProps } from '../components/visually-hidden/VisuallyHidden'\nimport type { DrawerProps } from '../components/drawer/types'\nimport type { DialogProps } from '../components/dialog/types'\nimport type { TooltipProps } from '../components/tooltip/types'\nimport type { SectionProps } from '../components/section/Section'\nimport type { FormRowProps } from '../components/form-row/FormRowHelpers'\nimport type { UploadProps } from '../components/upload/types'\nimport type { SkeletonProps, SkeletonShow } from '../components/Skeleton'\nimport type { HelpButtonProps } from '../components/HelpButton'\nimport type { TableProps } from '../components/Table'\nimport type { GlobalErrorProps } from '../components/GlobalError'\nimport type { ModalProps } from '../components/modal/types'\nimport type { AccordionProps } from '../components/Accordion'\nimport type { StepIndicatorProps } from '../components/StepIndicator'\n\nimport type { NumberFormatCurrency } from '../components/NumberFormat'\n\nimport type { FormElementProps } from './helpers/filterValidProps'\nimport type { ThemeProps } from './Theme'\n\nexport type ContextComponents = {\n  Button?: Partial<ButtonProps>\n  Anchor?: Partial<AnchorProps>\n  Avatar?: Partial<AvatarProps>\n  AvatarGroup?: Partial<AvatarGroupProps>\n  Badge?: Partial<BadgeProps>\n  Breadcrumb?: Partial<BreadcrumbProps>\n  BreadcrumbItem?: Partial<BreadcrumbItemProps>\n  InfoCard?: Partial<InfoCardProps>\n  Slider?: Partial<SliderProps>\n  Tag?: Partial<TagProps>\n  TagGroup?: Partial<TagGroupProps>\n  Timeline?: Partial<TimelineProps>\n  TimelineItem?: Partial<TimelineItemProps>\n  VisuallyHidden?: Partial<VisuallyHiddenProps>\n  Drawer?: Partial<DrawerProps>\n  Dialog?: Partial<DialogProps>\n  Tooltip?: Partial<TooltipProps>\n  Section?: Partial<SectionProps>\n  ScrollView?: Partial<ScrollViewProps>\n  Upload?: Partial<UploadProps>\n  Skeleton?: Partial<SkeletonProps>\n  HelpButton?: Partial<HelpButtonProps>\n  Table?: Partial<TableProps>\n  GlobalError?: Partial<GlobalErrorProps>\n  Modal?: Partial<ModalProps>\n  Accordion?: Partial<AccordionProps>\n  StepIndicator?: Partial<StepIndicatorProps>\n\n  // -- TODO: Not converted yet --\n  NumberFormat?: Record<string, unknown>\n  Pagination?: Record<string, unknown>\n\n  /**\n   * @deprecated – can be removed in v11\n   */\n  FormRow?: FormRowProps\n\n  // Common props\n  formElement?: FormElementProps\n}\n\nexport type ContextProps = ContextComponents & {\n  // -- All TypeScript based Eufemia components --\n\n  // -- Global properties --\n\n  /**\n   * Contains theme related properties, such as a theme name\n   */\n  theme?: ThemeProps\n\n  /**\n   * Will enable all skeletons inside this provider/context scope\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * Define what breakpoints should be used by the MediaQuery component and hook\n   */\n  breakpoints?: Record<string, string>\n\n  /**\n   * Defines the locale (internal translation) used by some components\n   */\n  locale?: Locale\n\n  /**\n   * Provide your own translations. Use the same format as defined in the translation files\n   */\n  translation?: Translation\n\n  /**\n   * Defines the currency used by the NumberFormat component\n   */\n  currency?: NumberFormatCurrency\n\n  /**\n   * Defines the currencyDisplay used by the NumberFormat component\n   */\n  currency_display?: string\n\n  /**\n   * Update any given provider/context properties\n   */\n  update?: (props: ContextProps) => void\n\n  /**\n   * Update any given provider/context properties, but only for the particular scope\n   */\n  updateCurrent?: (props: ContextProps) => void\n\n  /**\n   * Update the used locale from within the context\n   */\n  setLocale?: (locale: Locale) => void\n\n  /**\n   * Update the used locale from within the context, but only for the particular scope\n   */\n  setCurrentLocale?: (locale: Locale) => void\n\n  // -- For internal use --\n  locales?: Locales\n  __context__?: Record<string, unknown>\n  updateTranslation?: (locale: Locale, translation: Translation) => void\n  getTranslation?: (props: GetTranslationProps) => Translation\n}\n\nexport type GetTranslationProps = Partial<{\n  lang?: Locale\n  locale?: Locale\n}>\n\nexport type Locale = string | 'nb-NO' | 'en-GB' | 'en-US'\nexport type ComponentTranslationsName = string | keyof ContextComponents\nexport type ComponentTranslation = string\nexport type ComponentTranslations = Record<string, ComponentTranslation>\nexport type Locales = Record<Locale, Translation | TranslationConsumer>\nexport type Translation = Record<\n  /**\n   * Support only \"HelpButton\"\n   */\n  ComponentTranslationsName,\n  ComponentTranslations\n>\nexport type TranslationConsumer = Record<\n  /**\n   * Support \"HelpButton.title\"\n   */\n  ComponentTranslationsName,\n  ComponentTranslation | ComponentTranslations\n>\n\nexport function prepareContext<Props>(\n  props: ContextProps = {}\n): Props & ContextProps {\n  const locales: Locales = props.locales\n    ? extend(defaultLocales, props.locales)\n    : defaultLocales\n\n  if (props.__context__) {\n    Object.assign(props, props.__context__)\n    delete props.__context__\n  }\n\n  const key = handleLocaleFallbacks(props.locale || LOCALE, locales)\n  const translation = locales[key] || defaultLocales[LOCALE] || {} // here we could use Object.freeze\n\n  /**\n   * The code above adds support for strings, defined like:\n   * {\n   *    \"Modal.close_title\": \"Lukk\",\n   * }\n   */\n  if (locales[key]) {\n    locales[key] = destruct(locales[key], translation)\n  }\n\n  const context = {\n    // We may use that in future\n    updateTranslation: (locale: string, translation: Translation) => {\n      context.translation = context.locales[locale] = translation\n    },\n    getTranslation: (props: GetTranslationProps) => {\n      if (props) {\n        const lang = props.lang || props.locale\n        if (lang && context.locales[lang] && lang !== key) {\n          return context.locales[lang]\n        }\n      }\n      return context.translation\n    },\n\n    locales,\n    locale: null,\n    breakpoints: null,\n    skeleton: null,\n\n    ...props,\n\n    /**\n     * Make sure we set this after props, since we update this one!\n     */\n    translation,\n  } as Props & ContextProps\n\n  return context\n}\n\nfunction handleLocaleFallbacks(locale: Locale, locales: Locales) {\n  if (!locales[locale]) {\n    if (locale === 'en' || locale.split('-')[0] === 'en') {\n      return 'en-GB'\n    }\n  }\n  return locale\n}\n\n// If no provider is given, we use the default context from here\nconst Context = React.createContext<ContextProps>(\n  prepareContext({\n    locale: LOCALE,\n    currency: CURRENCY,\n    currency_display: CURRENCY_DISPLAY,\n  })\n)\n\nexport default Context\n\nfunction destruct(\n  source: TranslationConsumer,\n  validKeys: Record<string, unknown>\n): TranslationConsumer {\n  for (const k in source) {\n    if (String(k).includes('.')) {\n      const list = k.split('.')\n\n      if (validKeys[list[0]]) {\n        const val = source[k]\n        const last = list.length - 1\n\n        list.forEach((k, i) => {\n          source[k] = i === last ? val : source[k]\n\n          // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n          // @ts-ignore\n          source = source[k] || {}\n        })\n\n        // If the root object is frozen, then use this\n        // let lastObj = { ...source }\n        // list.forEach((k, i) => {\n        //   lastObj[k] = i === last ? val : lastObj[k] // we may have to create a new object here instead?\n        //   lastObj = lastObj[k]\n        // })\n      }\n    }\n  }\n\n  return source\n}\n"],"mappings":"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"}
+{"version":3,"file":"Context.js","names":["React","LOCALE","CURRENCY","CURRENCY_DISPLAY","defaultLocales","extend","prepareContext","props","locales","__context__","Object","assign","key","handleLocaleFallbacks","locale","translation","destruct","context","_objectSpread","updateTranslation","getTranslation","lang","breakpoints","skeleton","split","Context","createContext","currency","currency_display","source","validKeys","k","String","includes","list","val","last","length","forEach","i"],"sources":["../../../src/shared/Context.tsx"],"sourcesContent":["/**\n * Web Context Context\n *\n */\n\nimport React from 'react'\nimport { LOCALE, CURRENCY, CURRENCY_DISPLAY } from './defaults'\nimport defaultLocales from './locales'\nimport { extend } from './component-helper'\n\n// All TypeScript based Eufemia elements\nimport type { ScrollViewProps } from '../fragments/scroll-view/ScrollView'\n\n// All TypeScript based Eufemia components\nimport type { AnchorProps } from '../components/Anchor'\nimport type { ButtonProps } from '../components/button/Button'\nimport type { AvatarProps } from '../components/avatar/Avatar'\nimport type { AvatarGroupProps } from '../components/avatar/AvatarGroup'\nimport type { BadgeProps } from '../components/badge/Badge'\nimport type { BreadcrumbProps } from '../components/breadcrumb/Breadcrumb'\nimport type { BreadcrumbItemProps } from '../components/breadcrumb/BreadcrumbItem'\nimport type { InfoCardProps } from '../components/info-card/InfoCard'\nimport type { SliderProps } from '../components/slider/Slider'\nimport type { TagProps } from '../components/tag/Tag'\nimport type { TagGroupProps } from '../components/tag/TagGroup'\nimport type { TimelineProps } from '../components/timeline/Timeline'\nimport type { TimelineItemProps } from '../components/timeline/TimelineItem'\nimport type { VisuallyHiddenProps } from '../components/visually-hidden/VisuallyHidden'\nimport type { DrawerProps } from '../components/drawer/types'\nimport type { DialogProps } from '../components/dialog/types'\nimport type { TooltipProps } from '../components/tooltip/types'\nimport type { SectionProps } from '../components/section/Section'\nimport type { FormRowProps } from '../components/form-row/FormRowHelpers'\nimport type { UploadProps } from '../components/upload/types'\nimport type { SkeletonProps, SkeletonShow } from '../components/Skeleton'\nimport type { HelpButtonProps } from '../components/HelpButton'\nimport type { TableProps } from '../components/Table'\nimport type { GlobalErrorProps } from '../components/GlobalError'\nimport type { ModalProps } from '../components/modal/types'\nimport type { AccordionProps } from '../components/Accordion'\nimport type { StepIndicatorProps } from '../components/StepIndicator'\nimport type { FormLabelProps } from '../components/FormLabel'\n\nimport type { NumberFormatCurrency } from '../components/NumberFormat'\n\nimport type { FormElementProps } from './helpers/filterValidProps'\nimport type { ThemeProps } from './Theme'\n\nexport type ContextComponents = {\n  Button?: Partial<ButtonProps>\n  Anchor?: Partial<AnchorProps>\n  Avatar?: Partial<AvatarProps>\n  AvatarGroup?: Partial<AvatarGroupProps>\n  Badge?: Partial<BadgeProps>\n  Breadcrumb?: Partial<BreadcrumbProps>\n  BreadcrumbItem?: Partial<BreadcrumbItemProps>\n  InfoCard?: Partial<InfoCardProps>\n  Slider?: Partial<SliderProps>\n  Tag?: Partial<TagProps>\n  TagGroup?: Partial<TagGroupProps>\n  Timeline?: Partial<TimelineProps>\n  TimelineItem?: Partial<TimelineItemProps>\n  VisuallyHidden?: Partial<VisuallyHiddenProps>\n  Drawer?: Partial<DrawerProps>\n  Dialog?: Partial<DialogProps>\n  Tooltip?: Partial<TooltipProps>\n  Section?: Partial<SectionProps>\n  ScrollView?: Partial<ScrollViewProps>\n  Upload?: Partial<UploadProps>\n  Skeleton?: Partial<SkeletonProps>\n  HelpButton?: Partial<HelpButtonProps>\n  Table?: Partial<TableProps>\n  GlobalError?: Partial<GlobalErrorProps>\n  Modal?: Partial<ModalProps>\n  Accordion?: Partial<AccordionProps>\n  StepIndicator?: Partial<StepIndicatorProps>\n  FormLabel?: Partial<FormLabelProps>\n\n  // -- TODO: Not converted yet --\n  NumberFormat?: Record<string, unknown>\n  Pagination?: Record<string, unknown>\n\n  /**\n   * @deprecated – can be removed in v11\n   */\n  FormRow?: FormRowProps\n\n  // Common props\n  formElement?: FormElementProps\n}\n\nexport type ContextProps = ContextComponents & {\n  // -- All TypeScript based Eufemia components --\n\n  // -- Global properties --\n\n  /**\n   * Contains theme related properties, such as a theme name\n   */\n  theme?: ThemeProps\n\n  /**\n   * Will enable all skeletons inside this provider/context scope\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * Define what breakpoints should be used by the MediaQuery component and hook\n   */\n  breakpoints?: Record<string, string>\n\n  /**\n   * Defines the locale (internal translation) used by some components\n   */\n  locale?: Locale\n\n  /**\n   * Provide your own translations. Use the same format as defined in the translation files\n   */\n  translation?: Translation\n\n  /**\n   * Defines the currency used by the NumberFormat component\n   */\n  currency?: NumberFormatCurrency\n\n  /**\n   * Defines the currencyDisplay used by the NumberFormat component\n   */\n  currency_display?: string\n\n  /**\n   * Update any given provider/context properties\n   */\n  update?: (props: ContextProps) => void\n\n  /**\n   * Update any given provider/context properties, but only for the particular scope\n   */\n  updateCurrent?: (props: ContextProps) => void\n\n  /**\n   * Update the used locale from within the context\n   */\n  setLocale?: (locale: Locale) => void\n\n  /**\n   * Update the used locale from within the context, but only for the particular scope\n   */\n  setCurrentLocale?: (locale: Locale) => void\n\n  // -- For internal use --\n  locales?: Locales\n  __context__?: Record<string, unknown>\n  updateTranslation?: (locale: Locale, translation: Translation) => void\n  getTranslation?: (props: GetTranslationProps) => Translation\n}\n\nexport type GetTranslationProps = Partial<{\n  lang?: Locale\n  locale?: Locale\n}>\n\nexport type Locale = string | 'nb-NO' | 'en-GB' | 'en-US'\nexport type ComponentTranslationsName = string | keyof ContextComponents\nexport type ComponentTranslation = string\nexport type ComponentTranslations = Record<string, ComponentTranslation>\nexport type Locales = Record<Locale, Translation | TranslationConsumer>\nexport type Translation = Record<\n  /**\n   * Support only \"HelpButton\"\n   */\n  ComponentTranslationsName,\n  ComponentTranslations\n>\nexport type TranslationConsumer = Record<\n  /**\n   * Support \"HelpButton.title\"\n   */\n  ComponentTranslationsName,\n  ComponentTranslation | ComponentTranslations\n>\n\nexport function prepareContext<Props>(\n  props: ContextProps = {}\n): Props & ContextProps {\n  const locales: Locales = props.locales\n    ? extend(defaultLocales, props.locales)\n    : defaultLocales\n\n  if (props.__context__) {\n    Object.assign(props, props.__context__)\n    delete props.__context__\n  }\n\n  const key = handleLocaleFallbacks(props.locale || LOCALE, locales)\n  const translation = locales[key] || defaultLocales[LOCALE] || {} // here we could use Object.freeze\n\n  /**\n   * The code above adds support for strings, defined like:\n   * {\n   *    \"Modal.close_title\": \"Lukk\",\n   * }\n   */\n  if (locales[key]) {\n    locales[key] = destruct(locales[key], translation)\n  }\n\n  const context = {\n    // We may use that in future\n    updateTranslation: (locale: string, translation: Translation) => {\n      context.translation = context.locales[locale] = translation\n    },\n    getTranslation: (props: GetTranslationProps) => {\n      if (props) {\n        const lang = props.lang || props.locale\n        if (lang && context.locales[lang] && lang !== key) {\n          return context.locales[lang]\n        }\n      }\n      return context.translation\n    },\n\n    locales,\n    locale: null,\n    breakpoints: null,\n    skeleton: null,\n\n    ...props,\n\n    /**\n     * Make sure we set this after props, since we update this one!\n     */\n    translation,\n  } as Props & ContextProps\n\n  return context\n}\n\nfunction handleLocaleFallbacks(locale: Locale, locales: Locales) {\n  if (!locales[locale]) {\n    if (locale === 'en' || locale.split('-')[0] === 'en') {\n      return 'en-GB'\n    }\n  }\n  return locale\n}\n\n// If no provider is given, we use the default context from here\nconst Context = React.createContext<ContextProps>(\n  prepareContext({\n    locale: LOCALE,\n    currency: CURRENCY,\n    currency_display: CURRENCY_DISPLAY,\n  })\n)\n\nexport default Context\n\nfunction destruct(\n  source: TranslationConsumer,\n  validKeys: Record<string, unknown>\n): TranslationConsumer {\n  for (const k in source) {\n    if (String(k).includes('.')) {\n      const list = k.split('.')\n\n      if (validKeys[list[0]]) {\n        const val = source[k]\n        const last = list.length - 1\n\n        list.forEach((k, i) => {\n          source[k] = i === last ? val : source[k]\n\n          // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n          // @ts-ignore\n          source = source[k] || {}\n        })\n\n        // If the root object is frozen, then use this\n        // let lastObj = { ...source }\n        // list.forEach((k, i) => {\n        //   lastObj[k] = i === last ? val : lastObj[k] // we may have to create a new object here instead?\n        //   lastObj = lastObj[k]\n        // })\n      }\n    }\n  }\n\n  return source\n}\n"],"mappings":"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"}

package/es/shared/Eufemia.d.ts

@@ -1,2 +1,2 @@
 export function init(): void;
-export const version: "10.10.0";
+export const version: "10.11.0";