chore(PaymentCard): refactor payment card to ts

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

@@ -113,4 +113,14 @@ The `InputPassword` component has been moved to `Field.Password`, and is now a p
 - change `width` from number to string.
 - change `height`from number to string.
 
+## PaymentCard
+
+The PaymentCard has seen some major refactoring, changing the api for the custom card designs. If you do not use the custom card feature, the only other changes is to prop names (from snake_case to camelCase).
+
+- replace `product_code` with `productCode`.
+- replace `card_number` with `cardNumber`.
+- replace `card_status` with `cardStatus`.
+
+- remove `raw_data`. If you still need this functunality take a look at the updated documentation for [PaymentCard](uilib/extensions/payment-card/)
+
 _February, 6. 2024_

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

@@ -0,0 +1,66 @@
+import React from 'react'
+import cardData from '@dnb/eufemia/src/extensions/payment-card/utils/cardProducts'
+import { Table } from '@dnb/eufemia/src/components'
+
+export default function CardProductsTable() {
+  return (
+    <div className="table-container">
+      <Table>
+        <thead>
+          <tr>
+            <th>productCode</th>
+            <th>displayName</th>
+            <th>cardClassName</th>
+            <th>Custom Background Image</th>
+            <th>bankLogo</th>
+            <th>productType</th>
+            <th>cardProvider</th>
+            <th>paymentType</th>
+          </tr>
+        </thead>
+        <tbody>
+          {cardData.map((card) => {
+            return (
+              <tr key={card.productCode}>
+                <td>{card?.productCode}</td>
+                <td>{card?.displayName}</td>
+                <td>{card?.cardClassName}</td>
+
+                <td>{card?.backgroundImage ? 'YES' : ' - '}</td>
+
+                <td>{`${card?.bankLogo?.type} ${
+                  card?.bankLogo?.color
+                    ? '(' + card?.bankLogo?.color + ')'
+                    : ''
+                }`}</td>
+                <td>
+                  {card?.productType
+                    ? `${card?.productType?.type} ${
+                        card?.productType?.color
+                          ? '(' + card?.productType?.color + ')'
+                          : ''
+                      }`
+                    : ' - '}
+                </td>
+                <td>{`${card?.cardProvider?.type} ${
+                  card?.cardProvider?.color
+                    ? '(' + card?.cardProvider?.color + ')'
+                    : ''
+                }`}</td>
+                <td>
+                  {card?.paymentType
+                    ? `${card?.paymentType?.type} ${
+                        card?.paymentType?.color
+                          ? '(' + card?.paymentType?.color + ')'
+                          : ''
+                      }`
+                    : ' - '}
+                </td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </Table>
+    </div>
+  )
+}

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

@@ -6,18 +6,17 @@
 import React from 'react'
 import ComponentBox from '../../../../shared/tags/ComponentBox'
 import PaymentCard, {
-  getCardData,
+  getCardDesign,
+  PaymentCardType,
   Designs,
-  ProductType,
-  CardType,
-  BankAxeptType,
 } from '@dnb/eufemia/src/extensions/payment-card'
 import { H4 } from '@dnb/eufemia/src'
+import styled from '@emotion/styled'
 
 export function PaymentCardAllCardsExample() {
   return (
     <ComponentBox
-      scope={{ PaymentCard, getCardData }}
+      scope={{ PaymentCard, getCardDesign }}
       data-visual-test="all-cards"
     >
       {() => {
@@ -69,16 +68,16 @@ export function PaymentCardAllCardsExample() {
 
         const Cards = () => (
           <>
-            {demoCards.map((product_code) => {
-              const cardData = getCardData(product_code)
+            {demoCards.map((productCode) => {
+              const cardData = getCardDesign(productCode)
               return (
-                <article key={product_code}>
+                <article key={productCode}>
                   <H4>
-                    {cardData.cardDesign.name}({product_code})
+                    {cardData.displayName}({productCode})
                   </H4>
                   <PaymentCard
-                    product_code={product_code}
-                    card_number="************1337"
+                    productCode={productCode}
+                    cardNumber="************1337"
                   />
                 </article>
               )
@@ -92,35 +91,60 @@ export function PaymentCardAllCardsExample() {
   )
 }
 
+export function PaymentCardDesignsExample() {
+  return (
+    <ComponentBox
+      scope={{ PaymentCard, Designs }}
+      data-visual-test="design-cards"
+    >
+      <PaymentCard
+        customCard={{
+          ...Designs.gold,
+          cardProvider: { type: 'Mastercard' },
+        }}
+      />
+    </ComponentBox>
+  )
+}
+
 export const PaymentCardBasicExample = () => (
   <ComponentBox
     scope={{ PaymentCard }}
     data-visual-test="payment-card-basic"
   >
-    <PaymentCard product_code="NK1" card_number="************1337" />
+    <PaymentCard productCode="NK1" cardNumber="************1337" />
   </ComponentBox>
 )
 
 export const PaymentCardCustomExample = () => (
   <ComponentBox
-    scope={{ PaymentCard, Designs, ProductType, CardType, BankAxeptType }}
+    scope={{
+      PaymentCard,
+    }}
   >
     {() => {
-      const customData = {
-        productCode: 'UNDEFINED',
-        productName: 'DNB Custom Card',
-        displayName: 'Custom card',
-        cardDesign: Designs.gold,
-        cardType: CardType.Visa,
-        productType: ProductType.None,
-        bankAxept: BankAxeptType.BankAxept,
+      const Wrapper = styled.div`
+        .custom-card-background {
+          background-color: var(--color-lavender);
+          color: var(--color-indigo);
+        }
+      `
+
+      const customData: PaymentCardType = {
+        // Changing the background and all the text can be done by providing a css class
+        cardClassName: 'custom-card-background',
+        displayName: 'custom card',
+        bankLogo: { type: 'DNB' },
+        cardProvider: { type: 'MastercardDark' },
+        paymentType: { type: 'BankAxept' },
       }
       return (
-        <PaymentCard
-          product_code="UNDEFINED"
-          raw_data={customData}
-          card_number="************1337"
-        />
+        <Wrapper>
+          <PaymentCard
+            customCard={customData}
+            cardNumber="************1337"
+          />
+        </Wrapper>
       )
     }}
   </ComponentBox>
@@ -132,9 +156,9 @@ export const PaymentCardStatusExample = () => (
     data-visual-test="payment-card-status"
   >
     <PaymentCard
-      product_code="VG2"
-      card_status="blocked"
-      card_number="************1337"
+      productCode="VG2"
+      cardStatus="blocked"
+      cardNumber="************1337"
     />
   </ComponentBox>
 )
@@ -146,8 +170,8 @@ export const PaymentCardCompactExample = () => (
   >
     <PaymentCard
       variant="compact"
-      product_code="VG1"
-      card_number="************1337"
+      productCode="VG1"
+      cardNumber="************1337"
     />
   </ComponentBox>
 )

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

@@ -5,7 +5,6 @@ showTabs: true
 import PaymentCard, {
   getCardData,
   Designs,
-  ProductType,
   CardType,
 } from '@dnb/eufemia/src/extensions/payment-card'
 import ChangeLocale from 'dnb-design-system-portal/src/core/ChangeLocale'
@@ -15,6 +14,7 @@ import {
   PaymentCardStatusExample,
   PaymentCardCompactExample,
   PaymentCardAllCardsExample,
+  PaymentCardDesignsExample,
 } from './Examples'
 
 ## Demos
@@ -30,36 +30,38 @@ Basic card using productCode.
 
 <PaymentCardBasicExample />
 
-### Custom card using rawData
-
-You may have to import the extra named exports:
-
-```js
-import PaymentCard, {
-  getCardData,
-  Designs,
-  ProductType,
-  CardType,
-  BankAxeptType,
-} from '@dnb/eufemia/extensions/PaymentCard'
-```
+### Basic card using a status
 
-<PaymentCardCustomExample />
+Basic card using product code and status.
 
-### Basic card using a status
+The supported statuses are `active`, `not_active`, `blocked`, `expired`, `renewed`, `replaced`, `order_in_process`, `unknown`. Defaults to `active`.
 
 <PaymentCardStatusExample />
 
-Basic card using product code and status.
-
 ### Basic card in compact variant
 
 **NB:** The compact variant have to be aligned to a not yet defined SSOT style.
 
 <PaymentCardCompactExample />
 
+### Custom card using customCard
+
+While the preffered way to use this component is using the product code, you can also define your own style. The most practical way of doing this is to start with one of the default designs exposed through the object `Designs`, and modifying this until you get what you want.
+
+```ts
+import PaymentCard, { Designs } from '@dnb/eufemia/extensions/PaymentCard'
+```
+
+The default for the gold card design is with a white Visa logo, here we overwrite it to the mastercard logo instead.
+
+<PaymentCardDesignsExample />
+
+Providing a custom class in the `customData` object can controll atributes like background color and color witch is not supported otherwise.
+
+<PaymentCardCustomExample />
+
 ### Demo cards
 
-All the different card products and PaymentCard designs.
+All the different card products and PaymentCard designs. For a full overview covering the different options look at the [Properties](uilib/extensions/payment-card/properties/) tab.
 
 <PaymentCardAllCardsExample />