feat(PaymentCard): updated designs

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

@@ -21,6 +21,7 @@ export default function CardProductsTable() {
         </thead>
         <tbody>
           {data.map((card) => {
+            console.log(card)
             return (
               <tr key={card.productCode}>
                 <td>{card.productCode}</td>
@@ -61,15 +62,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

@@ -21,18 +21,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 +69,7 @@ export function PaymentCardAllCardsExample() {
               const cardData = getCardData(product_code)
               return (
                 <article key={product_code}>
-                  <H4>{cardData.cardDesign.name}</H4>
+                  <H4>{product_code}</H4>
                   <PaymentCard
                     product_code={product_code}
                     card_number="************1337"

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

@@ -11,9 +11,6 @@ import PaymentCard, {
 import ChangeLocale from 'dnb-design-system-portal/src/core/ChangeLocale'
 import {
   PaymentCardBasicExample,
-  PaymentCardCustomExample,
-  PaymentCardStatusExample,
-  PaymentCardCompactExample,
   PaymentCardAllCardsExample,
 } from './Examples'
 
@@ -43,20 +40,14 @@ import PaymentCard, {
 } from '@dnb/eufemia/extensions/PaymentCard'
 ```
 
-<PaymentCardCustomExample />
-
 ### Basic card using a status
 
-<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 />
-
 ### Demo cards
 
 A few selected cards to showcase all the different PaymentCard designs.

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

@@ -29,16 +29,16 @@ showTabs: true
 
 ## 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
   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;
+  bankAxeptType: 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,
+  bankAxeptType: PropTypes.object.isRequired,
 })
 
 const translationDefaultPropsProps = {
@@ -189,6 +196,7 @@ const defaultCard = (productCode) => ({
   cardDesign: defaultDesign,
   cardType: CardType.None,
   productType: ProductType.None,
+  bankAxeptType: BankAxeptType.None,
 })
 
 StatusOverlay.propTypes = {
@@ -299,6 +307,10 @@ function NormalCard({
             productType={data.productType}
             cardDesign={data.cardDesign}
           />
+          <BankAxeptLogo
+            bankAxeptType={data.bankAxeptType}
+            cardDesign={data.cardDesign}
+          />
         </div>
         <div className="dnb-payment-card__card__bottom">
           <CardText

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;

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

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

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

@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Intro = (props) => (
+  <svg {...props} fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M4.298 12.964C4.746 12.964 5.11 12.586 5.11 12.138C5.11 11.69 4.746 11.326 4.298 11.326C3.85 11.326 3.472 11.69 3.472 12.138C3.472 12.586 3.85 12.964 4.298 12.964ZM4.9 19.992V14H1.442V15.008H3.682V19.992H1.442V21H7.154V19.992H4.9ZM13.0705 13.888C12.0205 13.888 11.1805 14.364 10.7605 15.162V14H9.68253V21H10.9005V16.954C10.9005 15.694 11.6145 14.882 12.7345 14.882C13.7705 14.882 14.3445 15.498 14.3445 16.604V21H15.5625V16.548C15.5625 14.882 14.6385 13.888 13.0705 13.888ZM22.4451 20.104C21.2411 20.104 20.6111 19.474 20.6111 18.564V15.008H23.5791V14H20.6111V11.816H19.3791V14H17.7131V15.008H19.3791V18.648C19.3791 20.132 20.4571 21.112 22.3331 21.112C23.1311 21.112 23.8031 20.944 24.2931 20.65V19.628C23.7331 19.964 23.0751 20.104 22.4451 20.104ZM31.4696 13.888C30.3776 13.888 29.5516 14.364 29.1596 15.134V14H26.5836V15.008H28.0816V19.992H26.5836V21H31.0356V19.992H29.2996V16.716C29.2996 15.61 30.1116 14.952 31.4276 14.966C31.8756 14.966 32.3236 15.078 32.6316 15.204V14.126C32.4076 14.014 31.9596 13.888 31.4696 13.888ZM37.7781 21.112C39.7381 21.112 41.1801 19.698 41.1801 17.5C41.1801 15.302 39.7381 13.888 37.7781 13.888C35.8181 13.888 34.3761 15.302 34.3761 17.5C34.3761 19.698 35.8181 21.112 37.7781 21.112ZM37.7781 20.104C36.5181 20.104 35.6081 19.082 35.6081 17.5C35.6081 15.918 36.5181 14.896 37.7781 14.896C39.0381 14.896 39.9481 15.918 39.9481 17.5C39.9481 19.082 39.0381 20.104 37.7781 20.104Z"
+      fill={props.fill}
+    />
+  </svg>
+)
+Intro.propTypes = {
+  fill: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string,
+  viewBox: PropTypes.string,
+}
+Intro.defaultProps = {
+  fill: '#00343E',
+  width: '42',
+  height: '32',
+  viewBox: '0 0 42 32',
+}
+
+export default Intro

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface MastercardDarkSVGProps
+  extends React.HTMLProps<HTMLElement> {
+  width?: string;
+  height?: string;
+  viewBox?: string;
+}
+declare const MastercardDarkSVG: React.FC<MastercardDarkSVGProps>;
+export default MastercardDarkSVG;