feat(PaymentCard): updated designs

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.mdx

@@ -304,7 +304,7 @@ Removed `small` as prop. Use `size="small"` instead.
 
 ### [PaymentCard](/uilib/extensions/payment-card/)
 
-1. `Type`'s value/option `Metalic` was renamed to `Metallic`. Find `Metalic` and replace with `Metallic`.
-2. `Type`'s value/option `BlackMetalic` was renamed to `BlackMetallic`. Find `BlackMetalic` and replace with `BlackMetallic`.
+1. `Type`'s value/option `Metalic` was removed.
+2. `Type`'s value/option `BlackMetalic` was removed.
 
 _April, 20. 2023_

packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/CardProductsTable.js

@@ -61,15 +61,16 @@ const getTypeVariant = (type, design) =>
 
 const getProductVariant = (type, design) =>
   type.cata({
-    BankAxept: () => prettiePrint(design.bankAxept.toString()),
     Saga: () => prettiePrint(design.saga.toString()),
     Pluss: () => '-',
+    Intro: () => '-',
+    Bedrift: () => '-',
+    Business: () => '-',
     PrivateBanking: () => prettiePrint(design.privateBanking.toString()),
     None: () => '-',
   })
 
 const getProductLogo = (bankLogo) =>
   bankLogo.cata({
     Colored: (color) => color,
-    Metallic: () => 'Metallic',
   })

packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/Examples.tsx

@@ -10,6 +10,7 @@ import PaymentCard, {
   Designs,
   ProductType,
   CardType,
+  BankAxeptType,
 } from '@dnb/eufemia/src/extensions/payment-card'
 import { H4 } from '@dnb/eufemia/src'
 
@@ -21,18 +22,46 @@ export function PaymentCardAllCardsExample() {
     >
       {() => {
         const demoCards = [
+          'NK1',
+          'NK4',
+          'NK5',
           'VE1',
+          'VE2',
+          'VG1',
+          'VG4',
+          '053',
+          'VK2',
+          'VK4',
+          '084',
+          'VL1',
           'VL2',
+          'VL3',
+          'VL4',
+          'VL6',
+          '085',
+          'VO1',
+          'VP2',
+          'VP3',
+          'VP4',
+          '069',
+          'VP5',
+          '080',
           'VX1',
           'VX3',
-          'VL1',
+          'VX4',
+          'VX5',
           '096',
-          'VG1',
-          'VP2',
-          'VP3',
-          'P101',
+          '044',
+          '043',
+          '098',
+          '074',
+          '062',
           'BK1',
+          'BP1',
+          'VB1',
           'VB2',
+          'VB5',
+          'P101',
         ]
 
         const Cards = () => (
@@ -41,7 +70,9 @@ export function PaymentCardAllCardsExample() {
               const cardData = getCardData(product_code)
               return (
                 <article key={product_code}>
-                  <H4>{cardData.cardDesign.name}</H4>
+                  <H4>
+                    {cardData.cardDesign.name}({product_code})
+                  </H4>
                   <PaymentCard
                     product_code={product_code}
                     card_number="************1337"
@@ -68,15 +99,18 @@ export const PaymentCardBasicExample = () => (
 )
 
 export const PaymentCardCustomExample = () => (
-  <ComponentBox scope={{ PaymentCard, Designs, ProductType, CardType }}>
+  <ComponentBox
+    scope={{ PaymentCard, Designs, ProductType, CardType, BankAxeptType }}
+  >
     {() => {
       const customData = {
         productCode: 'UNDEFINED',
         productName: 'DNB Custom Card',
         displayName: 'Custom card',
         cardDesign: Designs.gold,
         cardType: CardType.Visa,
-        productType: ProductType.BankAxept,
+        productType: ProductType.None,
+        bankAxeptType: BankAxeptType.BankAxept,
       }
       return (
         <PaymentCard

packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/demos.mdx

@@ -40,11 +40,10 @@ import PaymentCard, {
   Designs,
   ProductType,
   CardType,
+  BankAxeptType,
 } from '@dnb/eufemia/extensions/PaymentCard'
 ```
 
-<PaymentCardCustomExample />
-
 ### Basic card using a status
 
 <PaymentCardStatusExample />
@@ -59,6 +58,6 @@ Basic card using product code and status.
 
 ### Demo cards
 
-A few selected cards to showcase all the different PaymentCard designs.
+All the different card products and PaymentCard designs.
 
 <PaymentCardAllCardsExample />

packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/properties.mdx

@@ -25,20 +25,20 @@ showTabs: true
 | `displayName` | `string`     | _(required)_ the visible product name. Can be empty.                                                                                                                                                             |
 | `cardDesign`  | `object`     | _(required)_ object that describes the style properties of the card. can be imported from `@dnb/eufemia/extensions/payment-card/utils/CardDesigns` (see available designs below) or a custom one can be created. |
 | `cardType`    | `Union Type` | _(required)_ import CardType from `@dnb/eufemia/extensions/payment-card/utils/Types` to use. Can be CardType.Visa, CardType.Mastercard or CardType.None                                                          |
-| `productType` | `Union Type` | _(required)_ import ProductType from `@dnb/eufemia/extensions/payment-card/utils/Types` to use. Can be ProductType.BankAxept, ProductType.Saga, ProductType.PrivateBanking or ProductType.None                   |
+| `productType` | `Union Type` | _(required)_ import ProductType from `@dnb/eufemia/extensions/payment-card/utils/Types` to use. Can be ProductType.Saga, ProductType.PrivateBanking or ProductType.None                                          |
 
 ## Card Design
 
-| Properties       | Type         | Description                                                                                                                                                                   |
-| ---------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `name`           | `string`     | _(required)_ string Name of design                                                                                                                                            |
-| `cardStyle`      | `string`     | _(required)_ css class. mainly to set background and color                                                                                                                    |
-| `bankLogo`       | `Union Type` | _(required)_ Union Type. import DNB from ./card/utils/Types to use. Can be DNB.Colored('HexValue') or DNB.Metallic                                                            |
-| `visa`           | `Union Type` | _(required)_ Union Type. import Visa from ./card/utils/Types to use. Can be Visa.Colored('HexValue') or Visa.Metallic                                                         |
-| `mastercard`     | `Union Type` | _(required)_ Union Type. import Mastercard from ./card/utils/Types to use. Can be Mastercard.Default, Mastercard.DefaultWhite Mastercard.Metallic or Mastercard.MetallicBlack |
-| `bankAxept`      | `Union Type` | _(required)_ Union Type. import BankAxept from ./card/utils/Types to use. Can be BankAxept.White or BankAxept.Black                                                           |
-| `saga`           | `Union Type` | _(required)_ Union Type. import Saga from ./card/utils/Types to use. Can be Saga.Gold, Saga.Platinum, Saga.VisaPlatinum, or Saga.None                                         |
-| `privateBanking` | `Union Type` | _(required)_ Union Type. import PB from ./card/utils/Types to use. Can be PB.Default, PB.Platinum or PB.None                                                                  |
+| Properties       | Type         | Description                                                                                                           |
+| ---------------- | ------------ | --------------------------------------------------------------------------------------------------------------------- |
+| `name`           | `string`     | _(required)_ string Name of design                                                                                    |
+| `cardStyle`      | `string`     | _(required)_ css class. mainly to set background and color                                                            |
+| `bankLogo`       | `Union Type` | _(required)_ Union Type. import DNB from ./card/utils/Types to use. Can be DNB.Colored('HexValue')                    |
+| `visa`           | `Union Type` | _(required)_ Union Type. import Visa from ./card/utils/Types to use. Can be Visa.Colored('HexValue')                  |
+| `mastercard`     | `Union Type` | _(required)_ Union Type. import Mastercard from ./card/utils/Types to use. Can be Mastercard.Default, Mastercard.Dark |
+| `bankAxept`      | `Union Type` | _(required)_ Union Type. import BankAxept from ./card/utils/Types to use. Can be BankAxept.White or BankAxept.Black   |
+| `saga`           | `Union Type` | _(required)_ Union Type. import Saga from ./card/utils/Types to use. Can be Saga.Gold, Saga.Platinum or Saga.None     |
+| `privateBanking` | `Union Type` | _(required)_ Union Type. import PB from ./card/utils/Types to use. Can be PB.Default, PB.Platinum or PB.None          |
 
 ## List of designs
 
@@ -48,7 +48,6 @@ showTabs: true
 | `white`            | `object` | White                  |
 | `myFirst`          | `object` | My first               |
 | `youth`            | `object` | Youth                  |
-| `silver`           | `object` | Silver                 |
 | `gold`             | `object` | Gold                   |
 | `saga`             | `object` | Saga                   |
 | `sagaPlatinum`     | `object` | Saga platinum          |
@@ -63,21 +62,17 @@ showTabs: true
 | ---------------- |
 | **DNB**          |
 | `Colored`        |
-| `Metallic`       |
 | **Saga**         |
 | `Gold`           |
 | `Platinum`       |
-| `VisaPlatinum`   |
 | `None`           |
 | **PB**           |
 | `Default`        |
 | `Platinum`       |
 | `None`           |
 | **Mastercard**   |
 | `Default`        |
-| `DefaultWhite`   |
-| `Metallic`       |
-| `BlackMetallic`  |
+| `Dark`           |
 | **ProductType**  |
 | `BankAxept`      |
 | `Saga`           |
@@ -92,7 +87,6 @@ showTabs: true
 | `Black`          |
 | **Visa**         |
 | `Colored`        |
-| `Metallic`       |
 | **Status**       |
 | `Expired`        |
 | `Blocked`        |

packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.d.ts

@@ -18,12 +18,16 @@ export enum ProductType {
   None // eslint-disable-line
 }
 
+export enum BankAxeptType {
+  BankAxept, // eslint-disable-line
+  None // eslint-disable-line
+}
+
 export enum Designs {
   defaultDesign, // eslint-disable-line
-  white, // eslint-disable-line
+  young, // eslint-disable-line
   myFirst, // eslint-disable-line
   youth, // eslint-disable-line
-  silver, // eslint-disable-line
   pluss, // eslint-disable-line
   gold, // eslint-disable-line
   saga, // eslint-disable-line
@@ -41,6 +45,7 @@ export interface PaymentCardRawData {
   cardDesign: Designs;
   cardType: CardType;
   productType: ProductType;
+  bankAxept: BankAxeptType;
 }
 export type PaymentCardChildren =
   | string

packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.js

@@ -23,10 +23,16 @@ import {
 } from '../../components/skeleton/SkeletonHelper'
 import P from '../../elements/P'
 
-import { ProductType, CardType } from './utils/Types'
+import { ProductType, CardType, BankAxeptType } from './utils/Types'
 import Designs, { defaultDesign } from './utils/CardDesigns'
 import cardProducts from './utils/cardProducts'
-import { ProductLogo, TypeLogo, BankLogo, StatusIcon } from './icons'
+import {
+  ProductLogo,
+  TypeLogo,
+  BankLogo,
+  StatusIcon,
+  BankAxeptLogo,
+} from './icons'
 
 export { Designs, ProductType, CardType }
 
@@ -37,6 +43,7 @@ const cardDataPropTypes = PropTypes.shape({
   cardDesign: PropTypes.object.isRequired,
   cardType: PropTypes.object.isRequired,
   productType: PropTypes.object.isRequired,
+  bankAxept: PropTypes.object.isRequired,
 })
 
 const translationDefaultPropsProps = {
@@ -189,6 +196,7 @@ const defaultCard = (productCode) => ({
   cardDesign: defaultDesign,
   cardType: CardType.None,
   productType: ProductType.None,
+  bankAxept: BankAxeptType.None,
 })
 
 StatusOverlay.propTypes = {
@@ -299,6 +307,10 @@ function NormalCard({
             productType={data.productType}
             cardDesign={data.cardDesign}
           />
+          <BankAxeptLogo
+            bankAxept={data.bankAxept}
+            cardDesign={data.cardDesign}
+          />
         </div>
         <div className="dnb-payment-card__card__bottom">
           <CardText

packages/dnb-eufemia/src/extensions/payment-card/__tests__/PaymentCard.test.tsx

@@ -16,6 +16,7 @@ import Component, {
   CardType,
   formatCardNumber,
   PaymentCardProps,
+  BankAxeptType,
 } from '../PaymentCard'
 import nbNO from '../../../shared/locales/nb-NO'
 import enGB from '../../../shared/locales/en-GB'
@@ -123,7 +124,8 @@ describe('PaymentCard', () => {
       displayName: 'Custom card', // Only showed in compact variant
       cardDesign: Designs.gold,
       cardType: CardType.Visa,
-      productType: ProductType.BankAxept,
+      productType: ProductType.None,
+      bankAxept: BankAxeptType.BankAxept,
     }
 
     const Comp = mount(

packages/dnb-eufemia/src/extensions/payment-card/icons/Bedrift.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface BedriftProps extends React.HTMLProps<HTMLElement> {
+  /**
+   * function fill() { [native code] }
+   */
+  fill?: string;
+  width?: string;
+  height?: string;
+  viewBox?: string;
+}
+declare const Bedrift: React.FC<BedriftProps>;
+export default Bedrift;

packages/dnb-eufemia/src/extensions/payment-card/icons/Bedrift.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Bedrift = (props) => (
+  <svg {...props} fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M6.356 15.834C7.112 15.442 7.532 14.728 7.532 13.762C7.532 12.194 6.426 11.2 4.676 11.2H1.12V21H5.194C6.902 21 8.134 19.866 8.134 18.27C8.134 17.094 7.42 16.184 6.356 15.834ZM4.186 12.558C5.236 12.558 5.838 13.02 5.838 13.902C5.838 14.756 5.25 15.246 4.186 15.246H2.8V12.558H4.186ZM4.648 19.628H2.8V16.604H4.648C5.824 16.604 6.426 17.164 6.426 18.116C6.426 19.096 5.782 19.628 4.648 19.628ZM16.1797 17.598C16.1797 15.344 14.8917 13.888 12.8617 13.888C10.8457 13.888 9.45973 15.344 9.45973 17.5C9.45973 19.614 10.8597 21.126 12.9877 21.126C14.4717 21.126 15.4517 20.538 15.9557 19.642L14.8777 18.9C14.5137 19.432 13.9957 19.866 12.9877 19.866C12.0777 19.866 11.1397 19.264 11.0417 17.976H16.1377C16.1517 17.906 16.1797 17.696 16.1797 17.598ZM12.8617 15.148C13.8697 15.148 14.4717 15.792 14.6257 16.898H11.0557C11.2097 15.778 11.8817 15.148 12.8617 15.148ZM22.783 11.2V14.938C22.251 14.238 21.467 13.874 20.529 13.874C18.667 13.874 17.239 15.414 17.239 17.5C17.239 19.586 18.667 21.126 20.529 21.126C21.579 21.126 22.447 20.664 22.965 19.782V21H24.421V11.2H22.783ZM20.767 19.81C19.633 19.81 18.877 18.872 18.877 17.5C18.877 16.128 19.633 15.19 20.767 15.19C21.957 15.19 22.783 16.142 22.783 17.5C22.783 18.858 21.957 19.81 20.767 19.81ZM29.5916 13.874C28.6816 13.874 27.9116 14.364 27.5476 15.134V14H26.1056V21H27.7436V17.066C27.7436 15.876 28.4296 15.288 29.5496 15.288C29.8156 15.288 30.0536 15.316 30.2356 15.358V13.944C30.1236 13.916 29.8856 13.874 29.5916 13.874ZM32.3216 13.3C32.8956 13.3 33.3856 12.824 33.3856 12.25C33.3856 11.676 32.8956 11.186 32.3216 11.186C31.7476 11.186 31.2716 11.676 31.2716 12.25C31.2716 12.824 31.7476 13.3 32.3216 13.3ZM31.5096 21H33.1476V14H31.5096V21ZM38.1287 12.39C38.3807 12.39 38.6887 12.432 38.8707 12.502V11.214C38.6467 11.144 38.1427 11.074 37.7647 11.074C36.3087 11.074 35.5107 11.858 35.5107 13.3V14H34.4887V15.316H35.5107V21H37.1487V15.316H38.7867V14H37.1487V13.412C37.1487 12.754 37.4847 12.39 38.1287 12.39ZM43.3546 19.81C42.6266 19.81 42.2766 19.488 42.2766 18.802V15.316H44.0686V14H42.2766V11.816H40.6386V14H39.5046V15.316H40.6386V18.858C40.6386 20.314 41.5066 21.126 43.0606 21.126C43.5506 21.126 43.9286 21.084 44.1946 20.972V19.684C43.9706 19.768 43.6766 19.81 43.3546 19.81Z"
+      fill={props.fill}
+    />
+  </svg>
+)
+Bedrift.propTypes = {
+  fill: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string,
+  viewBox: PropTypes.string,
+}
+Bedrift.defaultProps = {
+  fill: '#A5E1D2',
+  width: '45',
+  height: '32',
+  viewBox: '0 0 45 32',
+}
+
+export default Bedrift

packages/dnb-eufemia/src/extensions/payment-card/icons/Business.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface BusinessProps extends React.HTMLProps<HTMLElement> {
+  /**
+   * function fill() { [native code] }
+   */
+  fill?: string;
+  width?: string;
+  height?: string;
+  viewBox?: string;
+}
+declare const Business: React.FC<BusinessProps>;
+export default Business;