Fis Products table

dnbexperience · Jun 14, 2024 · 08a1af2 · 08a1af2
1 parent a783c7d
commit 08a1af2
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 113 deletions.
diff --git a/...ages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/CardProductsTable.js b/...ages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/CardProductsTable.js
diff --git a/...ges/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/CardProductsTable.tsx b/...ges/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>
+  )
+}
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/Examples.tsx
@@ -131,6 +131,7 @@ export const PaymentCardCustomExample = () => (
       `
 
       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' },

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/demos.mdx
@@ -62,6 +62,6 @@ Providing a custom class in the `customData` object can controll atributes like
 
 ### 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 />
diff --git a/packages/dnb-eufemia/src/extensions/payment-card/__tests__/PaymentCard.test.tsx b/packages/dnb-eufemia/src/extensions/payment-card/__tests__/PaymentCard.test.tsx
@@ -7,12 +7,12 @@ import React from 'react'
 import { axeComponent, loadScss } from '../../../core/jest/jestSetup'
 import PaymentCard, { Designs, formatCardNumber } from '../'
 import nbNO from '../../../shared/locales/nb-NO'
-import enGB from '../../../shared/locales/en-GB'
+// import enGB from '../../../shared/locales/en-GB'
 import { render, screen } from '@testing-library/react'
 import { PaymentCardProps } from '../types'
 
 const nb = nbNO['nb-NO'].PaymentCard
-const en = enGB['en-GB'].PaymentCard
+// const en = enGB['en-GB'].PaymentCard
 
 const defaultProps: PaymentCardProps = {
   productCode: 'NK1',

diff --git a/packages/dnb-eufemia/src/extensions/payment-card/stories/PaymentCard.stories.tsx b/packages/dnb-eufemia/src/extensions/payment-card/stories/PaymentCard.stories.tsx
@@ -14,7 +14,6 @@ import cardData from '../utils/cardProducts'
 import { H2 } from '../../../elements'
 
 import PaymentCard, { getCardDesign, Designs } from '../'
-import { Table } from '../../../components'
 
 export default {
   title: 'Eufemia/Extensions/PaymentCard',
@@ -51,38 +50,6 @@ export const PaymentCards = () => (
         />
       </Box>
 
-      <Table>
-        <thead>
-          <tr>
-            <th>Product Id</th>
-            <th>Card Display Name</th>
-            <th>Bank Logo Properties</th>
-            <th>Product Logo Variant</th>
-            <th>Product Type Variants</th>
-            <th>Card Provider Variants</th>
-            <th>Payment type variants</th>
-            <th>className</th>
-            <th>background image</th>
-          </tr>
-        </thead>
-        <tbody>
-          {cardData.map((card) => {
-            return (
-              <tr key={card.productCode}>
-                <td>{card?.productCode}</td>
-                <td>{card?.displayName}</td>
-                <td>{`${card?.bankLogo?.type} (${card?.bankLogo?.color})`}</td>
-                <td>{`${card?.productType?.type} (${card?.productType?.color})`}</td>
-                <td>{`${card?.cardProvider?.type} (${card?.cardProvider?.color})`}</td>
-                <td>{`${card?.paymentType?.type} (${card?.paymentType?.color})`}</td>
-                <td>{card?.cardClassName}</td>
-                <td>{card?.backgroundImage}</td>
-              </tr>
-            )
-          })}
-        </tbody>
-      </Table>
-
       <H3>Test</H3>
 
       <PaymentCard