diff --git a/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.mdx index 8aea9ef946e..fcf2fb50ff9 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.mdx @@ -309,7 +309,15 @@ 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 `DNB` value/option `Metalic` was removed. +2. `Type`'s `Saga` value/option `VisaPlatinum` was removed. +3. `Type`'s `PB` value/option `Platinum` was removed. +4. `Type`'s `Mastercard` value/option `DefaultWhite` was removed. +5. `Type`'s `Mastercard` value/option `Metalic` was removed. +6. `Type`'s `Mastercard` value/option `BlackMetalic` was removed. +7. `Type`'s `Visa` value/option `Metalic` was removed. +8. `CardDesign`'s value/option `white` was removed. +9. `CardDesign`'s value/option `silver` was removed. +10. `ProductType`'s value/option `BankAxept` was removed. _April, 20. 2023_ diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/CardProductsTable.js b/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/CardProductsTable.js index dc6f32d4f30..c89fed283e7 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/CardProductsTable.js +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/CardProductsTable.js @@ -61,9 +61,11 @@ 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: () => '-', }) @@ -71,5 +73,4 @@ const getProductVariant = (type, design) => const getProductLogo = (bankLogo) => bankLogo.cata({ Colored: (color) => color, - Metallic: () => 'Metallic', }) 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 index a21f51d4805..ca488af93a1 100644 --- 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 @@ -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 (
-

{cardData.cardDesign.name}

+

+ {cardData.cardDesign.name}({product_code}) +

( ) export const PaymentCardCustomExample = () => ( - + {() => { const customData = { productCode: 'UNDEFINED', @@ -76,7 +109,8 @@ export const PaymentCardCustomExample = () => ( displayName: 'Custom card', cardDesign: Designs.gold, cardType: CardType.Visa, - productType: ProductType.BankAxept, + productType: ProductType.None, + bankAxept: BankAxeptType.BankAxept, } return ( diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/properties.mdx index d54b41856f8..f3d2b3e521a 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/properties.mdx @@ -18,37 +18,37 @@ showTabs: true ## Card Data -| Properties | Type | Description | -| ------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `productCode` | `string` | _(required)_ product code for the given card. | -| `productName` | `string` | _(required)_ product name. Can be blank. | -| `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 | +| Properties | Type | Description | +| ------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `productCode` | `string` | _(required)_ product code for the given card. | +| `productName` | `string` | _(required)_ product name. Can be blank. | +| `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.Saga, ProductType.Pluss, ProductType.Intro, ProductType.Business, ProductType.Bedrift, 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') or Visa.Platinum | +| `mastercard` | `Union Type` | _(required)_ Union Type. import Mastercard from ./card/utils/Types to use. Can be Mastercard.Default or Mastercard.Dark | +| `bankAxept` | `Union Type` | _(required)_ Union Type. import BankAxept from ./card/utils/Types to use. Can be BankAxept.White, BankAxept.Black, BankAxept.Gold, BankAxept.Black20 or BankAxept.Gray | +| `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 or PB.None | ## List of designs | Properties | Type | Description | | ------------------ | -------- | ---------------------- | | `defaultDesign` | `object` | Default | -| `white` | `object` | White | +| `pluss` | `object` | Pluss | +| `young` | `object` | Ung | | `myFirst` | `object` | My first | | `youth` | `object` | Youth | -| `silver` | `object` | Silver | | `gold` | `object` | Gold | | `saga` | `object` | Saga | | `sagaPlatinum` | `object` | Saga platinum | @@ -63,24 +63,22 @@ showTabs: true | ---------------- | | **DNB** | | `Colored` | -| `Metallic` | | **Saga** | | `Gold` | | `Platinum` | -| `VisaPlatinum` | | `None` | | **PB** | | `Default` | -| `Platinum` | | `None` | | **Mastercard** | | `Default` | -| `DefaultWhite` | -| `Metallic` | -| `BlackMetallic` | +| `Dark` | | **ProductType** | -| `BankAxept` | | `Saga` | +| `Pluss` | +| `Intro` | +| `Bedrift` | +| `Business` | | `PrivateBanking` | | `None` | | **CardType** | @@ -90,9 +88,12 @@ showTabs: true | **BankAxept** | | `White` | | `Black` | +| `Gold` | +| `Black20` | +| `Gray` | | **Visa** | | `Colored` | -| `Metallic` | +| `Platinum` | | **Status** | | `Expired` | | `Blocked` | diff --git a/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.d.ts b/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.d.ts index 00830013a14..15c8c5deb41 100644 --- a/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.d.ts +++ b/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.d.ts @@ -7,23 +7,38 @@ export type PaymentCardVariant = 'normal' | 'compact'; export type PaymentCardDigits = string | number; export enum CardType { Visa, // eslint-disable-line - None, // eslint-disable-line - Left, // eslint-disable-line - Right // eslint-disable-line + Mastercard, // eslint-disable-line + None // eslint-disable-line } + export enum ProductType { - BankAxept, // eslint-disable-line Saga, // eslint-disable-line + Pluss, // eslint-disable-line + Intro, // eslint-disable-line + Business, // eslint-disable-line + Bedrift, // eslint-disable-line PrivateBanking, // eslint-disable-line None // eslint-disable-line } +export enum BankAxept { + White, // eslint-disable-line + Black, // eslint-disable-line + Gold, // eslint-disable-line + Black20, // eslint-disable-line + Gray // 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 +56,7 @@ export interface PaymentCardRawData { cardDesign: Designs; cardType: CardType; productType: ProductType; + bankAxept: BankAxeptType; } export type PaymentCardChildren = | string diff --git a/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.js b/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.js index 5e360e75d2b..5cbde675742 100644 --- a/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.js +++ b/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.js @@ -23,12 +23,18 @@ 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 } +export { Designs, ProductType, CardType, BankAxeptType } const cardDataPropTypes = PropTypes.shape({ productCode: PropTypes.string.isRequired, @@ -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 = { @@ -254,7 +262,7 @@ function CardText({ cardNumber, translations, skeleton }) { >

{translations.text_card_number}

@@ -291,6 +299,13 @@ function NormalCard({ 'dnb-payment-card__card', `dnb-payment-card__${data.cardDesign.cardStyle}` )} + {...(data.cardDesign?.backgroundImage + ? { + style: { + backgroundImage: `url(${data.cardDesign.backgroundImage})`, + }, + } + : {})} >
@@ -299,6 +314,10 @@ function NormalCard({ productType={data.productType} cardDesign={data.cardDesign} /> +
{ 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( diff --git a/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__image_snapshots__/paymentcard-have-to-match-a-basic-card.snap.png b/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__image_snapshots__/paymentcard-have-to-match-a-basic-card.snap.png index 6d5929672a7..d3ed6372c33 100644 Binary files a/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__image_snapshots__/paymentcard-have-to-match-a-basic-card.snap.png and b/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__image_snapshots__/paymentcard-have-to-match-a-basic-card.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__image_snapshots__/paymentcard-have-to-match-a-card-with-status.snap.png b/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__image_snapshots__/paymentcard-have-to-match-a-card-with-status.snap.png index 33d29b3084a..a955bb4de43 100644 Binary files a/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__image_snapshots__/paymentcard-have-to-match-a-card-with-status.snap.png and b/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__image_snapshots__/paymentcard-have-to-match-a-card-with-status.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__image_snapshots__/paymentcard-have-to-match-a-compact-card-variant.snap.png b/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__image_snapshots__/paymentcard-have-to-match-a-compact-card-variant.snap.png index 54bbea99c3e..8402df78f9e 100644 Binary files a/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__image_snapshots__/paymentcard-have-to-match-a-compact-card-variant.snap.png and b/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__image_snapshots__/paymentcard-have-to-match-a-compact-card-variant.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__image_snapshots__/paymentcard-have-to-match-all-cards.snap.png b/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__image_snapshots__/paymentcard-have-to-match-all-cards.snap.png index 8d370328b52..af6ad59e0ed 100644 Binary files a/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__image_snapshots__/paymentcard-have-to-match-all-cards.snap.png and b/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__image_snapshots__/paymentcard-have-to-match-all-cards.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__snapshots__/PaymentCard.test.tsx.snap b/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__snapshots__/PaymentCard.test.tsx.snap index d80e660114a..47f98dded36 100644 --- a/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__snapshots__/PaymentCard.test.tsx.snap +++ b/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__snapshots__/PaymentCard.test.tsx.snap @@ -33,6 +33,9 @@ exports[`PaymentCard have to match snapshot 1`] = ` cardStatus="active" data={ { + "bankAxept": { + "is": [Function], + }, "cardDesign": { "bankAxept": { "is": [Function], @@ -162,16 +165,47 @@ exports[`PaymentCard have to match snapshot 1`] = ` "is": [Function], } } + /> + - +

Kortnummer

@@ -350,62 +384,63 @@ exports[`PaymentCard scss have to match snapshot 1`] = ` * Utilities */ .dnb-payment-card { + --color-dark-cyan: #003b47; --dnb-payment-bg-default: linear-gradient( - 184.55deg, - var(--color-sea-green) 6.31%, + 187.2deg, + #008484 6.31%, var(--color-sea-green) 82.66% ); --dnb-payment-bg-pluss: linear-gradient( 187.2deg, - #14555a 6.31%, - rgb(0 52 62 / 40%) 82.66% + var(--color-dark-cyan) 6.31%, + var(--color-ocean-green) 82.66% ), - #14555a; + var(--color-emerald-green); --dnb-payment-bg-white: linear-gradient( 184.55deg, var(--color-black-background) 4.63%, var(--color-white) 92.04% ); - --dnb-payment-bg-silver: linear-gradient( - 184.55deg, - var(--color-black-20) 4.63%, - var(--color-black-8) 82.87% - ); --dnb-payment-bg-gold: linear-gradient( 184.55deg, #bfa970 4.63%, #d3bd83 84.57% ); --dnb-payment-bg-saga: linear-gradient( - 184.55deg, - #241e23 6.31%, - #251d23 85.2% + 187.2deg, + #1c1c1c 6.31%, + #000 82.66% ); - --dnb-payment-bg-business-no-visa: linear-gradient( - 184.55deg, - #50c9de 6.31%, - var(--color-sky-blue) 82.66% + --dnb-payment-bg-private: linear-gradient( + 187.2deg, + #1c1c1c 6.31%, + #000 82.66% ); + --dnb-payment-bg-business-no-visa: linear-gradient( + 187.2deg, + var(--color-dark-cyan) 6.31%, + var(--color-ocean-green) 82.66% + ), + var(--color-emerald-green); --dnb-payment-bg-business-with-visa: linear-gradient( - 184.55deg, - #2cc48e 6.31%, - var(--color-summer-green) 82.66% - ); + 187.2deg, + var(--color-dark-cyan) 6.31%, + var(--color-ocean-green) 82.66% + ), + var(--color-emerald-green); margin: 0; } .dnb-payment-card__card { position: relative; width: 85.6mm; height: 53.98mm; - padding: 6mm; + padding: 4mm; border-radius: 3.48mm; border: 1px solid; border-color: rgba(255, 255, 255, 0.1) transparent rgba(0, 0, 0, 0.2) transparent; color: var(--color-white); box-shadow: var(--shadow-default); - background: var(--color-sea-green); transition: all 225ms cubic-bezier(0, 0, 0.2, 1) 0ms; - /* White, Youth, MyFirst */ } .dnb-payment-card__card--design-default { background: var(--dnb-payment-bg-default); @@ -415,12 +450,13 @@ exports[`PaymentCard scss have to match snapshot 1`] = ` background: var(--dnb-payment-bg-pluss); color: var(--color-white); } -.dnb-payment-card__card--design-white { - background: var(--dnb-payment-bg-white); +.dnb-payment-card__card--design-ung { + color: var(--color-black-80); +} +.dnb-payment-card__card--design-youth { color: var(--color-black-80); } -.dnb-payment-card__card--design-silver { - background: var(--dnb-payment-bg-silver); +.dnb-payment-card__card--design-my-first { color: var(--color-black-80); } .dnb-payment-card__card--design-gold { @@ -432,7 +468,7 @@ exports[`PaymentCard scss have to match snapshot 1`] = ` color: var(--color-white); } .dnb-payment-card__card--design-private { - background: var(--color-black-80); + background: var(--dnb-payment-bg-private); color: var(--color-white); } .dnb-payment-card__card--design-black { @@ -454,7 +490,7 @@ exports[`PaymentCard scss have to match snapshot 1`] = ` left: 0; width: 100%; height: 100%; - background-image: radial-gradient(farthest-corner at 80% 30%, rgba(247, 246, 230, 0.1215686275) 0%, rgba(6, 6, 6, 0) 60%, rgba(6, 6, 6, 0) 99%); + background: radial-gradient(52.39% 52.39% at 50% 50%, rgba(247, 246, 230, 0.1215686275) 0%, rgba(6, 6, 6, 0) 100%); border-radius: inherit; } .dnb-payment-card__card__content { @@ -472,18 +508,18 @@ exports[`PaymentCard scss have to match snapshot 1`] = ` margin-bottom: 0 !important; } .dnb-payment-card__card__holder { + font-weight: var(--font-weight-medium); text-transform: uppercase; text-align: left; - opacity: 0.5; } .dnb-payment-card__card__holder.dnb-p { font-size: 0.625rem; } .dnb-payment-card__card__numbers { - font-size: var(--font-size-medium); + font-size: 1.5rem !important; + font-weight: var(--font-weight-medium); } .dnb-payment-card__card__credit-type { - height: 51px; position: absolute; bottom: 0; right: 0; @@ -494,6 +530,12 @@ exports[`PaymentCard scss have to match snapshot 1`] = ` left: 0; } .dnb-payment-card__card__product-type { + height: 38px; + position: absolute; + top: 0; + left: 70px; +} +.dnb-payment-card__card__bank-axept { height: 45px; position: absolute; top: 0; @@ -556,7 +598,8 @@ exports[`PaymentCard scss have to match snapshot 1`] = ` font-size: var(--font-size-basis); } .dnb-payment-card--compact .dnb-payment-card__card__credit-type { - top: 0; + top: 8px; + right: 4px; bottom: auto; } .dnb-payment-card--compact .dnb-payment-card__blocking__center { diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/BankAxept.js b/packages/dnb-eufemia/src/extensions/payment-card/icons/BankAxept.js index 5bcebf5609d..a644f8a7600 100644 --- a/packages/dnb-eufemia/src/extensions/payment-card/icons/BankAxept.js +++ b/packages/dnb-eufemia/src/extensions/payment-card/icons/BankAxept.js @@ -2,13 +2,11 @@ import React from 'react' import PropTypes from 'prop-types' const BankAxeptSVG = (props) => ( - + BankAxept ) @@ -16,13 +14,13 @@ BankAxeptSVG.propTypes = { fill: PropTypes.string, width: PropTypes.string, height: PropTypes.string, - viewBox: PropTypes.string + viewBox: PropTypes.string, } BankAxeptSVG.defaultProps = { fill: '#fff', width: '72', height: '35', - viewBox: '0 0 72 35' + viewBox: '0 0 72 35', } export default BankAxeptSVG diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/Bedrift.d.ts b/packages/dnb-eufemia/src/extensions/payment-card/icons/Bedrift.d.ts new file mode 100644 index 00000000000..fdad9b04226 --- /dev/null +++ b/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 { + /** + * function fill() { [native code] } + */ + fill?: string; + width?: string; + height?: string; + viewBox?: string; +} +declare const Bedrift: React.FC; +export default Bedrift; diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/Bedrift.js b/packages/dnb-eufemia/src/extensions/payment-card/icons/Bedrift.js new file mode 100644 index 00000000000..8da9ab7a6fe --- /dev/null +++ b/packages/dnb-eufemia/src/extensions/payment-card/icons/Bedrift.js @@ -0,0 +1,27 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const Bedrift = (props) => ( + + Bedrift + + +) +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 diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/Business.d.ts b/packages/dnb-eufemia/src/extensions/payment-card/icons/Business.d.ts new file mode 100644 index 00000000000..dfe410c1843 --- /dev/null +++ b/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 { + /** + * function fill() { [native code] } + */ + fill?: string; + width?: string; + height?: string; + viewBox?: string; +} +declare const Business: React.FC; +export default Business; diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/Business.js b/packages/dnb-eufemia/src/extensions/payment-card/icons/Business.js new file mode 100644 index 00000000000..bbffd7a0b55 --- /dev/null +++ b/packages/dnb-eufemia/src/extensions/payment-card/icons/Business.js @@ -0,0 +1,26 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const Business = (props) => ( + + Business + + +) +Business.propTypes = { + fill: PropTypes.string, + width: PropTypes.string, + height: PropTypes.string, + viewBox: PropTypes.string, +} +Business.defaultProps = { + fill: '#A5E1D2', + width: '56', + height: '32', + viewBox: '0 0 56 32', +} + +export default Business diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/DNBMetallic.d.ts b/packages/dnb-eufemia/src/extensions/payment-card/icons/DNBMetallic.d.ts deleted file mode 100644 index f84c9c73dc6..00000000000 --- a/packages/dnb-eufemia/src/extensions/payment-card/icons/DNBMetallic.d.ts +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react'; -export interface DNBMetallicLogoSVGProps - extends React.HTMLProps { - /** - * function fill() { [native code] } - */ - fill?: string; - width?: string; - height?: string; - viewBox?: string; -} -declare const DNBMetallicLogoSVG: React.FC; -export default DNBMetallicLogoSVG; diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/DNBMetallic.js b/packages/dnb-eufemia/src/extensions/payment-card/icons/DNBMetallic.js deleted file mode 100644 index 727522e4d5e..00000000000 --- a/packages/dnb-eufemia/src/extensions/payment-card/icons/DNBMetallic.js +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' - -const DNBMetallicLogoSVG = (props) => ( - - DNB logo - - - - - - - - - - - - - - -) -DNBMetallicLogoSVG.propTypes = { - fill: PropTypes.string, - width: PropTypes.string, - height: PropTypes.string, - viewBox: PropTypes.string, -} -DNBMetallicLogoSVG.defaultProps = { - fill: 'none', - width: '56', - height: '38', - viewBox: '0 0 56 38', -} - -export default DNBMetallicLogoSVG diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/Intro.d.ts b/packages/dnb-eufemia/src/extensions/payment-card/icons/Intro.d.ts new file mode 100644 index 00000000000..b9449920a59 --- /dev/null +++ b/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 { + /** + * function fill() { [native code] } + */ + fill?: string; + width?: string; + height?: string; + viewBox?: string; +} +declare const Intro: React.FC; +export default Intro; diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/Intro.js b/packages/dnb-eufemia/src/extensions/payment-card/icons/Intro.js new file mode 100644 index 00000000000..78f3ecd8111 --- /dev/null +++ b/packages/dnb-eufemia/src/extensions/payment-card/icons/Intro.js @@ -0,0 +1,26 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const Intro = (props) => ( + + Intro + + +) +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 diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/MastercardDark.d.ts b/packages/dnb-eufemia/src/extensions/payment-card/icons/MastercardDark.d.ts new file mode 100644 index 00000000000..44c707d5d58 --- /dev/null +++ b/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 { + width?: string; + height?: string; + viewBox?: string; +} +declare const MastercardDarkSVG: React.FC; +export default MastercardDarkSVG; diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/MastercardDark.js b/packages/dnb-eufemia/src/extensions/payment-card/icons/MastercardDark.js new file mode 100644 index 00000000000..c0190bcbda4 --- /dev/null +++ b/packages/dnb-eufemia/src/extensions/payment-card/icons/MastercardDark.js @@ -0,0 +1,28 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const MastercardDarkSVG = (props) => ( + + Mastercard + + + + +) +MastercardDarkSVG.propTypes = { + width: PropTypes.string, + height: PropTypes.string, + viewBox: PropTypes.string, +} +MastercardDarkSVG.defaultProps = { + width: '52', + height: '32', + viewBox: '0 0 52 32', +} +export default MastercardDarkSVG diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/MastercardDefault.js b/packages/dnb-eufemia/src/extensions/payment-card/icons/MastercardDefault.js index cfdea6dfc5c..296da72e115 100644 --- a/packages/dnb-eufemia/src/extensions/payment-card/icons/MastercardDefault.js +++ b/packages/dnb-eufemia/src/extensions/payment-card/icons/MastercardDefault.js @@ -2,45 +2,28 @@ import React from 'react' import PropTypes from 'prop-types' const MastercardSVG = ({ textFill, ...props }) => ( - + Mastercard + - - - ) MastercardSVG.propTypes = { - textFill: PropTypes.string, width: PropTypes.string, height: PropTypes.string, - viewBox: PropTypes.string + viewBox: PropTypes.string, } MastercardSVG.defaultProps = { - textFill: '#333333', - width: '80', - height: '54', - viewBox: '0 0 80 54' + width: '52', + height: '32', + viewBox: '0 0 52 32', } export default MastercardSVG diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/MastercardMetallic.d.ts b/packages/dnb-eufemia/src/extensions/payment-card/icons/MastercardMetallic.d.ts deleted file mode 100644 index 2a9b193e3c6..00000000000 --- a/packages/dnb-eufemia/src/extensions/payment-card/icons/MastercardMetallic.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; -export interface MastercardSVGProps extends React.HTMLProps { - width?: string; - height?: string; - viewBox?: string; -} -declare const MastercardSVG: React.FC; -export default MastercardSVG; diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/MastercardMetallic.js b/packages/dnb-eufemia/src/extensions/payment-card/icons/MastercardMetallic.js deleted file mode 100644 index f1c718c6309..00000000000 --- a/packages/dnb-eufemia/src/extensions/payment-card/icons/MastercardMetallic.js +++ /dev/null @@ -1,81 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' - -const MastercardSVG = (props) => ( - - Mastercard - - - - - - - - - - - - - - - - - - - - - - - - -) -MastercardSVG.propTypes = { - width: PropTypes.string, - height: PropTypes.string, - viewBox: PropTypes.string -} -MastercardSVG.defaultProps = { - width: '80', - height: '54', - viewBox: '0 0 80 54' -} -export default MastercardSVG diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/MastercardMetallicBlack.d.ts b/packages/dnb-eufemia/src/extensions/payment-card/icons/MastercardMetallicBlack.d.ts deleted file mode 100644 index d152aabd7a2..00000000000 --- a/packages/dnb-eufemia/src/extensions/payment-card/icons/MastercardMetallicBlack.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; -export interface SVGProps extends React.HTMLProps { - width?: string; - height?: string; - viewBox?: string; -} -declare const SVG: React.FC; -export default SVG; diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/MastercardMetallicBlack.js b/packages/dnb-eufemia/src/extensions/payment-card/icons/MastercardMetallicBlack.js deleted file mode 100644 index 4eb698d8fe5..00000000000 --- a/packages/dnb-eufemia/src/extensions/payment-card/icons/MastercardMetallicBlack.js +++ /dev/null @@ -1,244 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' - -const SVG = (props) => ( - - Mastercard - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -) -SVG.propTypes = { - width: PropTypes.string, - height: PropTypes.string, - viewBox: PropTypes.string -} -SVG.defaultProps = { - width: '74', - height: '49', - viewBox: '0 0 74 49' -} - -export default SVG diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/PB.js b/packages/dnb-eufemia/src/extensions/payment-card/icons/PB.js index 3bf9887cc1d..28a21a43c7e 100644 --- a/packages/dnb-eufemia/src/extensions/payment-card/icons/PB.js +++ b/packages/dnb-eufemia/src/extensions/payment-card/icons/PB.js @@ -2,13 +2,11 @@ import React from 'react' import PropTypes from 'prop-types' const PBSVG = (props) => ( - - PB + + PrivateBanking ) @@ -16,13 +14,13 @@ PBSVG.propTypes = { fill: PropTypes.string, width: PropTypes.string, height: PropTypes.string, - viewBox: PropTypes.string + viewBox: PropTypes.string, } PBSVG.defaultProps = { fill: '#B2B4B3', - width: '75', - height: '35', - viewBox: '0 0 75 35' + width: '72', + height: '32', + viewBox: '0 0 72 32', } export default PBSVG diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/PBPlatinum.d.ts b/packages/dnb-eufemia/src/extensions/payment-card/icons/PBPlatinum.d.ts deleted file mode 100644 index 5cec117d7fb..00000000000 --- a/packages/dnb-eufemia/src/extensions/payment-card/icons/PBPlatinum.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; -export interface PBPlatinumSVGProps extends React.HTMLProps { - width?: string; - height?: string; - viewBox?: string; -} -declare const PBPlatinumSVG: React.FC; -export default PBPlatinumSVG; diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/PBPlatinum.js b/packages/dnb-eufemia/src/extensions/payment-card/icons/PBPlatinum.js deleted file mode 100644 index 0801154ff2d..00000000000 --- a/packages/dnb-eufemia/src/extensions/payment-card/icons/PBPlatinum.js +++ /dev/null @@ -1,74 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' - -const PBPlatinumSVG = (props) => ( - - PBPlatinum - - - - - - - - - - - - - - -) -PBPlatinumSVG.propTypes = { - width: PropTypes.string, - height: PropTypes.string, - viewBox: PropTypes.string -} -PBPlatinumSVG.defaultProps = { - width: '72', - height: '35', - viewBox: '0 0 75 35' -} - -export default PBPlatinumSVG diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/Pluss.js b/packages/dnb-eufemia/src/extensions/payment-card/icons/Pluss.js index 76b1a0d1bb2..4deea61b943 100644 --- a/packages/dnb-eufemia/src/extensions/payment-card/icons/Pluss.js +++ b/packages/dnb-eufemia/src/extensions/payment-card/icons/Pluss.js @@ -2,26 +2,11 @@ import React from 'react' import PropTypes from 'prop-types' const Pluss = (props) => ( - + + Pluss - - - - ) @@ -29,13 +14,13 @@ Pluss.propTypes = { fill: PropTypes.string, width: PropTypes.string, height: PropTypes.string, - viewBox: PropTypes.string + viewBox: PropTypes.string, } Pluss.defaultProps = { - fill: '#A5E1D2', - width: '75', - height: '35', - viewBox: '0 0 75 35' + fill: '#FFFFFF', + width: '33', + height: '32', + viewBox: '0 0 33 32', } export default Pluss diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/SagaGold.js b/packages/dnb-eufemia/src/extensions/payment-card/icons/SagaGold.js index b4cb08aabef..cef421a346d 100644 --- a/packages/dnb-eufemia/src/extensions/payment-card/icons/SagaGold.js +++ b/packages/dnb-eufemia/src/extensions/payment-card/icons/SagaGold.js @@ -2,31 +2,23 @@ import React from 'react' import PropTypes from 'prop-types' const SagaGoldSVG = (props) => ( - - SagaGold + + Saga Gold - ) SagaGoldSVG.propTypes = { width: PropTypes.string, height: PropTypes.string, - viewBox: PropTypes.string + viewBox: PropTypes.string, } SagaGoldSVG.defaultProps = { - width: '75', - height: '35', - viewBox: '0 0 75 35' + width: '53', + height: '32', + viewBox: '0 0 53 32', } export default SagaGoldSVG diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/SagaPlatinum.js b/packages/dnb-eufemia/src/extensions/payment-card/icons/SagaPlatinum.js index cf418a18efb..db1b598c393 100644 --- a/packages/dnb-eufemia/src/extensions/payment-card/icons/SagaPlatinum.js +++ b/packages/dnb-eufemia/src/extensions/payment-card/icons/SagaPlatinum.js @@ -2,57 +2,23 @@ import React from 'react' import PropTypes from 'prop-types' const SagaPlatinumSVG = (props) => ( - - SagaPlatinum + + Saga Platinum - - - - - - - - ) SagaPlatinumSVG.propTypes = { width: PropTypes.string, height: PropTypes.string, - viewBox: PropTypes.string + viewBox: PropTypes.string, } SagaPlatinumSVG.defaultProps = { - width: '73', - height: '35', - viewBox: '0 0 75 35' + width: '53', + height: '32', + viewBox: '0 0 53 32', } export default SagaPlatinumSVG diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/SagaVisaPlatinum.d.ts b/packages/dnb-eufemia/src/extensions/payment-card/icons/SagaVisaPlatinum.d.ts deleted file mode 100644 index 6ed64ee1110..00000000000 --- a/packages/dnb-eufemia/src/extensions/payment-card/icons/SagaVisaPlatinum.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -import * as React from 'react'; -export interface SagaVisaPlatinumSVGProps - extends React.HTMLProps { - width?: string; - height?: string; - viewBox?: string; -} -declare const SagaVisaPlatinumSVG: React.FC; -export default SagaVisaPlatinumSVG; diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/SagaVisaPlatinum.js b/packages/dnb-eufemia/src/extensions/payment-card/icons/SagaVisaPlatinum.js deleted file mode 100644 index a9ceb32a669..00000000000 --- a/packages/dnb-eufemia/src/extensions/payment-card/icons/SagaVisaPlatinum.js +++ /dev/null @@ -1,73 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' - -const SagaVisaPlatinumSVG = (props) => ( - - SagaVisaPlatinum - - - - - - - - - - - - - - -) -SagaVisaPlatinumSVG.propTypes = { - width: PropTypes.string, - height: PropTypes.string, - viewBox: PropTypes.string -} -SagaVisaPlatinumSVG.defaultProps = { - width: '75', - height: '35', - viewBox: '0 0 75 35' -} -export default SagaVisaPlatinumSVG diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/VisaDefault.js b/packages/dnb-eufemia/src/extensions/payment-card/icons/VisaDefault.js index 646a2130a0f..1ddd9543c45 100644 --- a/packages/dnb-eufemia/src/extensions/payment-card/icons/VisaDefault.js +++ b/packages/dnb-eufemia/src/extensions/payment-card/icons/VisaDefault.js @@ -2,15 +2,11 @@ import React from 'react' import PropTypes from 'prop-types' const VisaSVG = (props) => ( - + Visa - ) @@ -18,13 +14,13 @@ VisaSVG.propTypes = { fill: PropTypes.string, width: PropTypes.string, height: PropTypes.string, - viewBox: PropTypes.string + viewBox: PropTypes.string, } VisaSVG.defaultProps = { fill: '#ffffff', - width: '80', - height: '54', - viewBox: '0 0 80 54' + width: '66', + height: '37', + viewBox: '0 0 66 37', } export default VisaSVG diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/VisaMetallic.d.ts b/packages/dnb-eufemia/src/extensions/payment-card/icons/VisaMetallic.d.ts deleted file mode 100644 index f02ebe33d2a..00000000000 --- a/packages/dnb-eufemia/src/extensions/payment-card/icons/VisaMetallic.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -import * as React from 'react'; -export interface VisaMetallicSVGProps - extends React.HTMLProps { - width?: string; - height?: string; - viewBox?: string; -} -declare const VisaMetallicSVG: React.FC; -export default VisaMetallicSVG; diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/VisaMetallic.js b/packages/dnb-eufemia/src/extensions/payment-card/icons/VisaMetallic.js deleted file mode 100644 index 1970960bf40..00000000000 --- a/packages/dnb-eufemia/src/extensions/payment-card/icons/VisaMetallic.js +++ /dev/null @@ -1,98 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' - -const VisaMetallicSVG = (props) => ( - - Visa Metallic - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -) -VisaMetallicSVG.propTypes = { - width: PropTypes.string, - height: PropTypes.string, - viewBox: PropTypes.string, -} -VisaMetallicSVG.defaultProps = { - width: '80', - height: '54', - viewBox: '0 0 80 54', -} - -export default VisaMetallicSVG diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/VisaPlatinum.d.ts b/packages/dnb-eufemia/src/extensions/payment-card/icons/VisaPlatinum.d.ts new file mode 100644 index 00000000000..18abc031977 --- /dev/null +++ b/packages/dnb-eufemia/src/extensions/payment-card/icons/VisaPlatinum.d.ts @@ -0,0 +1,9 @@ +import * as React from 'react'; +export interface VisaPlatinumSVGProps + extends React.HTMLProps { + width?: string; + height?: string; + viewBox?: string; +} +declare const VisaPlatinumSVG: React.FC; +export default VisaPlatinumSVG; diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/VisaPlatinum.js b/packages/dnb-eufemia/src/extensions/payment-card/icons/VisaPlatinum.js new file mode 100644 index 00000000000..f26769d7b3e --- /dev/null +++ b/packages/dnb-eufemia/src/extensions/payment-card/icons/VisaPlatinum.js @@ -0,0 +1,24 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const VisaPlatinumSVG = (props) => ( + + Visa Platinum + + +) +VisaPlatinumSVG.propTypes = { + width: PropTypes.string, + height: PropTypes.string, + viewBox: PropTypes.string, +} +VisaPlatinumSVG.defaultProps = { + width: '66', + height: '37', + viewBox: '0 0 66 37', +} + +export default VisaPlatinumSVG diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/index.js b/packages/dnb-eufemia/src/extensions/payment-card/icons/index.js index 3c7783f5390..77ab237cb41 100644 --- a/packages/dnb-eufemia/src/extensions/payment-card/icons/index.js +++ b/packages/dnb-eufemia/src/extensions/payment-card/icons/index.js @@ -2,20 +2,19 @@ import React from 'react' import BankAxept from './BankAxept' import DNB from './DNB' -import DNBMetallic from './DNBMetallic' import Expired from './Clock' import Blocked from './Padlock' import MastercardDefault from './MastercardDefault' -import MastercardMetallic from './MastercardMetallic' -import MastercardMetallicBlack from './MastercardMetallicBlack' +import MastercardDark from './MastercardDark' import Pluss from './Pluss' +import Intro from './Intro' +import Business from './Business' +import Bedrift from './Bedrift' import PB from './PB' -import PBPlatinum from './PBPlatinum' import SagaGold from './SagaGold' import SagaPlatinum from './SagaPlatinum' -import SagaVisaPlatinum from './SagaVisaPlatinum' import VisaDefault from './VisaDefault' -import VisaMetallic from './VisaMetallic' +import VisaPlatinum from './VisaPlatinum' const BankLogo = ({ logoType, height }) => logoType.cata({ @@ -26,40 +25,45 @@ const BankLogo = ({ logoType, height }) => className="dnb-payment-card__card__bank-logo" /> ), - Metallic: () => ( - - ), }) const ProductLogo = ({ productType, cardDesign }) => { const id = 'dnb-payment-card__card__product-type' return productType.cata({ - BankAxept: () => - cardDesign.bankAxept.cata({ - White: () => , - Black: () => , - }), Saga: () => cardDesign.saga.cata({ Gold: () => , Platinum: () => , - VisaPlatinum: () => , None: () => null, }), - Pluss: () => , + Pluss: () => , + Intro: () => , + Business: () => , + Bedrift: () => , PrivateBanking: () => cardDesign.privateBanking.cata({ Default: () => , - Platinum: () => , None: () => null, }), None: () => null, }) } +const BankAxeptLogo = ({ bankAxept, cardDesign }) => { + const id = 'dnb-payment-card__card__bank-axept' + return bankAxept.cata({ + BankAxept: () => + cardDesign.bankAxept.cata({ + White: () => , + Black20: () => , + Gray: () => , + Black: () => , + Gold: () => , + }), + None: () => null, + }) +} + const StatusIcon = ({ status }) => { switch (status) { case 'expired': @@ -80,19 +84,15 @@ const TypeLogo = ({ cardType, cardDesign }) => { Visa: () => cardDesign.visa.cata({ Colored: (color) => , - Metallic: () => , + Platinum: () => , }), Mastercard: () => cardDesign.mastercard.cata({ Default: () => , - DefaultWhite: () => ( - - ), - Metallic: () => , - BlackMetallic: () => , + Dark: () => , }), None: () => null, }) } -export { BankLogo, ProductLogo, StatusIcon, TypeLogo } +export { BankLogo, ProductLogo, StatusIcon, TypeLogo, BankAxeptLogo } 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 index c7a4e614f93..4ae37d2c06f 100644 --- a/packages/dnb-eufemia/src/extensions/payment-card/stories/PaymentCard.stories.tsx +++ b/packages/dnb-eufemia/src/extensions/payment-card/stories/PaymentCard.stories.tsx @@ -12,6 +12,11 @@ import { H3 } from '../../..' import '../style' import '../style/themes/ui' import PaymentCard, { getCardData } from '../../../extensions/payment-card' +import cardData from '../utils/cardProducts' +import { Designs } from '../PaymentCard' +import { CardType } from '../PaymentCard' +import { ProductType } from '../PaymentCard' +import { BankAxeptType } from '../PaymentCard' export default { title: 'Eufemia/Extensions/PaymentCard', @@ -21,6 +26,16 @@ const CustomWrapper = styled(Wrapper)` /* empty */ ` +const customData = { + productCode: 'UNDEFINED', + productName: 'DNB Custom Card', + displayName: 'Custom card', // Only showed in compact variant + cardDesign: Designs.gold, + cardType: CardType.Visa, + productType: ProductType.Business, + bankAxept: BankAxeptType.BankAxept, +} + export const PaymentCards = () => ( @@ -40,35 +55,43 @@ export const PaymentCards = () => ( /> - {demoCards.map((product_code) => { + + + + {cards.map((product_code) => { const cardData = getCardData(product_code) return (
-

{cardData.cardDesign.name}

- +

+ {cardData.cardDesign.name}({product_code}) +

+
+ + {/* */} +
) })} ) - -const demoCards = [ - 'VE1', - 'VL2', - 'VX1', - 'VX3', - 'VL1', - '096', - 'VG1', - 'VP2', - 'VP3', - 'P101', - 'BK1', - 'VB2', -] +const cards = cardData.map((card) => card.productCode) diff --git a/packages/dnb-eufemia/src/extensions/payment-card/style/dnb-payment-card.scss b/packages/dnb-eufemia/src/extensions/payment-card/style/dnb-payment-card.scss index b67bd7c3333..ddbb37e2aa4 100644 --- a/packages/dnb-eufemia/src/extensions/payment-card/style/dnb-payment-card.scss +++ b/packages/dnb-eufemia/src/extensions/payment-card/style/dnb-payment-card.scss @@ -6,47 +6,50 @@ @import '../../../style/core/utilities.scss'; .dnb-payment-card { + --color-dark-cyan: #003b47; --dnb-payment-bg-default: linear-gradient( - 184.55deg, - var(--color-sea-green) 6.31%, + 187.2deg, + #008484 6.31%, var(--color-sea-green) 82.66% ); --dnb-payment-bg-pluss: linear-gradient( 187.2deg, - #14555a 6.31%, - rgb(0 52 62 / 40%) 82.66% + var(--color-dark-cyan) 6.31%, + var(--color-ocean-green) 82.66% ), - #14555a; + var(--color-emerald-green); --dnb-payment-bg-white: linear-gradient( 184.55deg, var(--color-black-background) 4.63%, var(--color-white) 92.04% ); - --dnb-payment-bg-silver: linear-gradient( - 184.55deg, - var(--color-black-20) 4.63%, - var(--color-black-8) 82.87% - ); --dnb-payment-bg-gold: linear-gradient( 184.55deg, #bfa970 4.63%, #d3bd83 84.57% ); --dnb-payment-bg-saga: linear-gradient( - 184.55deg, - #241e23 6.31%, - #251d23 85.2% + 187.2deg, + #1c1c1c 6.31%, + #000 82.66% ); - --dnb-payment-bg-business-no-visa: linear-gradient( - 184.55deg, - #50c9de 6.31%, - var(--color-sky-blue) 82.66% + --dnb-payment-bg-private: linear-gradient( + 187.2deg, + #1c1c1c 6.31%, + #000 82.66% ); + --dnb-payment-bg-business-no-visa: linear-gradient( + 187.2deg, + var(--color-dark-cyan) 6.31%, + var(--color-ocean-green) 82.66% + ), + var(--color-emerald-green); --dnb-payment-bg-business-with-visa: linear-gradient( - 184.55deg, - #2cc48e 6.31%, - var(--color-summer-green) 82.66% - ); + 187.2deg, + var(--color-dark-cyan) 6.31%, + var(--color-ocean-green) 82.66% + ), + var(--color-emerald-green); margin: 0; @@ -54,7 +57,7 @@ position: relative; width: 85.6mm; height: 53.98mm; - padding: 6mm; + padding: 4mm; border-radius: 3.48mm; @@ -64,7 +67,6 @@ color: var(--color-white); box-shadow: var(--shadow-default); - background: var(--color-sea-green); transition: all 225ms cubic-bezier(0, 0, 0.2, 1) 0ms; @@ -78,14 +80,15 @@ color: var(--color-white); } - /* White, Youth, MyFirst */ - &--design-white { - background: var(--dnb-payment-bg-white); + &--design-ung { + color: var(--color-black-80); + } + + &--design-youth { color: var(--color-black-80); } - &--design-silver { - background: var(--dnb-payment-bg-silver); + &--design-my-first { color: var(--color-black-80); } @@ -100,7 +103,7 @@ } &--design-private { - background: var(--color-black-80); + background: var(--dnb-payment-bg-private); color: var(--color-white); } @@ -128,11 +131,10 @@ width: 100%; height: 100%; - background-image: radial-gradient( - farthest-corner at 80% 30%, + background: radial-gradient( + 52.39% 52.39% at 50% 50%, #f7f6e61f 0%, - #06060600 60%, - #06060600 99% + #06060600 100% ); border-radius: inherit; } @@ -156,9 +158,10 @@ } &__holder { + font-weight: var(--font-weight-medium); text-transform: uppercase; text-align: left; - opacity: 0.5; + // opacity: 0.5; &.dnb-p { font-size: 0.625rem; @@ -166,11 +169,11 @@ } &__numbers { - font-size: var(--font-size-medium); + font-size: 1.5rem !important; + font-weight: var(--font-weight-medium); } &__credit-type { - height: 51px; position: absolute; bottom: 0; right: 0; @@ -183,6 +186,13 @@ } &__product-type { + height: 38px; + position: absolute; + top: 0; + left: 70px; + } + + &__bank-axept { height: 45px; position: absolute; top: 0; @@ -231,13 +241,6 @@ opacity: 1; } - // Not in use yet - // &--small { - // width: calc(85.6mm * 0.75); - // height: calc(53.98mm * 0.75); - // border-radius: calc(3.48mm * 0.75); - // } - &--compact &__card { padding: 0; height: 32.8mm; @@ -273,7 +276,8 @@ } &__credit-type { - top: 0; + top: 8px; + right: 4px; bottom: auto; } } diff --git a/packages/dnb-eufemia/src/extensions/payment-card/utils/CardDesigns.js b/packages/dnb-eufemia/src/extensions/payment-card/utils/CardDesigns.js index a75c9d548ea..0abefea4e82 100644 --- a/packages/dnb-eufemia/src/extensions/payment-card/utils/CardDesigns.js +++ b/packages/dnb-eufemia/src/extensions/payment-card/utils/CardDesigns.js @@ -1,12 +1,13 @@ import properties from '../../../style/themes/theme-ui/properties' import { DNB, Saga, PB, Mastercard, BankAxept, Visa } from './Types' +import { myFirstImg, youthImg, ungImg } from './backgrounds' const defaultDesign = { name: 'Default', cardStyle: 'card--design-default', bankLogo: DNB.Colored(properties['--color-white']), visa: Visa.Colored(properties['--color-white']), - mastercard: Mastercard.DefaultWhite, + mastercard: Mastercard.Default, bankAxept: BankAxept.White, saga: Saga.None, privateBanking: PB.None, @@ -15,56 +16,48 @@ const defaultDesign = { const pluss = { name: 'Pluss', cardStyle: 'card--design-pluss', - bankLogo: DNB.Colored(properties['--color-mint-green']), + bankLogo: DNB.Colored(properties['--color-white']), visa: Visa.Colored(properties['--color-white']), - mastercard: Mastercard.DefaultWhite, + mastercard: Mastercard.Default, bankAxept: BankAxept.White, saga: Saga.None, privateBanking: PB.None, } -const white = { - name: 'White', - cardStyle: 'card--design-white', - bankLogo: DNB.Colored(properties['--color-black-55']), - visa: Visa.Colored(properties['--color-black-55']), +const young = { + name: 'Ung', + cardStyle: 'card--design-ung', + bankLogo: DNB.Colored(properties['--color-sea-green']), + visa: Visa.Colored(properties['--color-black-80']), mastercard: Mastercard.Default, bankAxept: BankAxept.Black, saga: Saga.None, privateBanking: PB.None, + backgroundImage: ungImg, } const myFirst = { name: 'My first', - cardStyle: 'card--design-white', - bankLogo: DNB.Colored(properties['--color-emerald-green']), - visa: Visa.Colored(properties['--color-black-55']), + cardStyle: 'card--design-my-first', + bankLogo: DNB.Colored(properties['--color-ocean-green']), + visa: Visa.Colored(properties['--color-black-80']), mastercard: Mastercard.Default, bankAxept: BankAxept.Black, saga: Saga.None, privateBanking: PB.None, + backgroundImage: myFirstImg, } const youth = { name: 'Youth', - cardStyle: 'card--design-white', - bankLogo: DNB.Colored(properties['--color-summer-green']), - visa: Visa.Colored(properties['--color-black-55']), - mastercard: Mastercard.Default, - bankAxept: BankAxept.Black, - saga: Saga.None, - privateBanking: PB.None, -} - -const silver = { - name: 'Silver', - cardStyle: 'card--design-silver', - bankLogo: DNB.Colored(properties['--color-black-55']), - visa: Visa.Colored(properties['--color-black-55']), + cardStyle: 'card--design-youth', + bankLogo: DNB.Colored(properties['--color-sea-green']), + visa: Visa.Colored(properties['--color-black-80']), mastercard: Mastercard.Default, bankAxept: BankAxept.Black, saga: Saga.None, privateBanking: PB.None, + backgroundImage: youthImg, } const gold = { @@ -72,7 +65,7 @@ const gold = { cardStyle: 'card--design-gold', bankLogo: DNB.Colored(properties['--color-white']), visa: Visa.Colored(properties['--color-white']), - mastercard: Mastercard.DefaultWhite, + mastercard: Mastercard.Default, bankAxept: BankAxept.White, saga: Saga.None, privateBanking: PB.None, @@ -81,10 +74,10 @@ const gold = { const saga = { name: 'Saga', cardStyle: 'card--design-saga', - bankLogo: DNB.Colored('#CFAD88'), - visa: Visa.Colored('#CFAD8899'), - mastercard: Mastercard.DefaultWhite, - bankAxept: BankAxept.White, + bankLogo: DNB.Colored('#BFA970'), + visa: Visa.Colored('#BFA970'), + mastercard: Mastercard.Default, + bankAxept: BankAxept.Gold, saga: Saga.Gold, privateBanking: PB.None, } @@ -92,10 +85,10 @@ const saga = { const sagaPlatinum = { name: 'Saga platinum', cardStyle: 'card--design-saga', - bankLogo: DNB.Colored('#8C9091'), - visa: Visa.Colored('#8C909199'), - mastercard: Mastercard.DefaultWhite, - bankAxept: BankAxept.White, + bankLogo: DNB.Colored('#b2b4b3'), + visa: Visa.Colored('#cccccc'), + mastercard: Mastercard.Dark, + bankAxept: BankAxept.Black20, saga: Saga.Platinum, privateBanking: PB.None, } @@ -103,10 +96,10 @@ const sagaPlatinum = { const privateBanking = { name: 'Private Banking', cardStyle: 'card--design-private', - bankLogo: DNB.Metallic, - visa: Visa.Metallic, - mastercard: Mastercard.Metallic, - bankAxept: BankAxept.White, + bankLogo: DNB.Colored('#b2b4b3'), + visa: Visa.Platinum, + mastercard: Mastercard.Dark, + bankAxept: BankAxept.Gray, saga: Saga.None, privateBanking: PB.Default, } @@ -115,8 +108,8 @@ const mcBlack = { name: 'Mastercard Black', cardStyle: 'card--design-black', bankLogo: DNB.Colored(properties['--color-black-80']), - visa: Visa.Metallic, - mastercard: Mastercard.BlackMetallic, + visa: Visa.Colored('#b2b4b3'), + mastercard: Mastercard.Dark, bankAxept: BankAxept.White, saga: Saga.None, privateBanking: PB.None, @@ -125,9 +118,9 @@ const mcBlack = { const businessNoVisa = { name: 'Bedriftskort BankAxept', cardStyle: 'card--design-business-no-visa', - bankLogo: DNB.Colored(properties['--color-white']), + bankLogo: DNB.Colored(properties['--color-mint-green']), visa: Visa.Colored(properties['--color-white']), - mastercard: Mastercard.DefaultWhite, + mastercard: Mastercard.Default, bankAxept: BankAxept.White, saga: Saga.None, privateBanking: PB.None, @@ -136,9 +129,9 @@ const businessNoVisa = { const businessWithVisa = { name: 'Bedriftskort Visa', cardStyle: 'card--design-business-with-visa', - bankLogo: DNB.Colored(properties['--color-white']), + bankLogo: DNB.Colored(properties['--color-mint-green']), visa: Visa.Colored(properties['--color-white']), - mastercard: Mastercard.DefaultWhite, + mastercard: Mastercard.Default, bankAxept: BankAxept.White, saga: Saga.None, privateBanking: PB.None, @@ -146,10 +139,9 @@ const businessWithVisa = { const Designs = { defaultDesign, - white, + young, myFirst, youth, - silver, pluss, gold, saga, @@ -164,10 +156,9 @@ export default Designs export { defaultDesign, pluss, - white, + young, myFirst, youth, - silver, gold, saga, sagaPlatinum, diff --git a/packages/dnb-eufemia/src/extensions/payment-card/utils/Types.js b/packages/dnb-eufemia/src/extensions/payment-card/utils/Types.js index a7770d09874..21aea20f9d0 100644 --- a/packages/dnb-eufemia/src/extensions/payment-card/utils/Types.js +++ b/packages/dnb-eufemia/src/extensions/payment-card/utils/Types.js @@ -4,19 +4,16 @@ const daggy = createDaggy() const DNB = daggy.taggedSum('DNB', { Colored: ['color'], - Metallic: [], }) const Visa = daggy.taggedSum('Visa', { Colored: ['color'], - Metallic: [], + Platinum: [], }) const Mastercard = daggy.taggedSum('Mastercard', { Default: [], - DefaultWhite: [], - Metallic: [], - BlackMetallic: [], + Dark: [], }) const CardType = daggy.taggedSum('CardType', { @@ -28,35 +25,37 @@ const CardType = daggy.taggedSum('CardType', { const BankAxept = daggy.taggedSum('BankAxept', { White: [], Black: [], + Gold: [], + Black20: [], + Gray: [], }) const Saga = daggy.taggedSum('Saga', { Gold: [], Platinum: [], - VisaPlatinum: [], None: [], }) // PrivateBanking const PB = daggy.taggedSum('PB', { Default: [], - Platinum: [], None: [], }) const ProductType = daggy.taggedSum('ProductType', { - BankAxept: [], Saga: [], Pluss: [], + Intro: [], + Bedrift: [], + Business: [], PrivateBanking: [], None: [], }) -// const Status = daggy.taggedSum('Status', { -// Expired: [], -// Blocked: [], -// Active: [] -// }) +const BankAxeptType = daggy.taggedSum('BankAxeptType', { + BankAxept: [], + None: [], +}) export { DNB, @@ -66,8 +65,8 @@ export { ProductType, CardType, BankAxept, + BankAxeptType, Visa, - // Status } const Types = { @@ -78,8 +77,8 @@ const Types = { ProductType, CardType, BankAxept, + BankAxeptType, Visa, - // Status } export default Types diff --git a/packages/dnb-eufemia/src/extensions/payment-card/utils/backgrounds/index.ts b/packages/dnb-eufemia/src/extensions/payment-card/utils/backgrounds/index.ts new file mode 100644 index 00000000000..d8254788ff7 --- /dev/null +++ b/packages/dnb-eufemia/src/extensions/payment-card/utils/backgrounds/index.ts @@ -0,0 +1,5 @@ +import myFirstImg from './my-first' +import ungImg from './ung' +import youthImg from './youth' + +export { myFirstImg, ungImg, youthImg } diff --git a/packages/dnb-eufemia/src/extensions/payment-card/utils/backgrounds/my-first.ts b/packages/dnb-eufemia/src/extensions/payment-card/utils/backgrounds/my-first.ts new file mode 100644 index 00000000000..49b403a30c8 --- /dev/null +++ b/packages/dnb-eufemia/src/extensions/payment-card/utils/backgrounds/my-first.ts @@ -0,0 +1,4 @@ +const base64EncodedImage = + 'data:image/jpeg;base64,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' + +export default base64EncodedImage diff --git a/packages/dnb-eufemia/src/extensions/payment-card/utils/backgrounds/ung.ts b/packages/dnb-eufemia/src/extensions/payment-card/utils/backgrounds/ung.ts new file mode 100644 index 00000000000..5f39d2379db --- /dev/null +++ b/packages/dnb-eufemia/src/extensions/payment-card/utils/backgrounds/ung.ts @@ -0,0 +1,4 @@ +const base64EncodedImage = + "data:image/jpeg;base64,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"; + +export default base64EncodedImage diff --git a/packages/dnb-eufemia/src/extensions/payment-card/utils/backgrounds/youth.ts b/packages/dnb-eufemia/src/extensions/payment-card/utils/backgrounds/youth.ts new file mode 100644 index 00000000000..5cdcd98422b --- /dev/null +++ b/packages/dnb-eufemia/src/extensions/payment-card/utils/backgrounds/youth.ts @@ -0,0 +1,4 @@ +const base64EncodedImage = + "data:image/jpeg;base64,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"; + +export default base64EncodedImage diff --git a/packages/dnb-eufemia/src/extensions/payment-card/utils/cardProducts.js b/packages/dnb-eufemia/src/extensions/payment-card/utils/cardProducts.js index 6f981dd3287..06faac51a3d 100644 --- a/packages/dnb-eufemia/src/extensions/payment-card/utils/cardProducts.js +++ b/packages/dnb-eufemia/src/extensions/payment-card/utils/cardProducts.js @@ -1,10 +1,9 @@ import { defaultDesign, pluss, - white, + young, myFirst, youth, - silver, gold, saga, sagaPlatinum, @@ -14,7 +13,7 @@ import { businessWithVisa, } from './CardDesigns' -import { CardType, ProductType } from './Types' +import { CardType, ProductType, BankAxeptType } from './Types' const cardData = [ { @@ -23,7 +22,8 @@ const cardData = [ displayName: 'DNB Kortet', cardDesign: defaultDesign, cardType: CardType.None, - productType: ProductType.BankAxept, + productType: ProductType.None, + bankAxept: BankAxeptType.BankAxept, }, { productCode: 'NK4', @@ -31,7 +31,8 @@ const cardData = [ displayName: 'DNB Kortet', cardDesign: defaultDesign, cardType: CardType.None, - productType: ProductType.BankAxept, + productType: ProductType.None, + bankAxept: BankAxeptType.BankAxept, }, { productCode: 'NK5', @@ -39,7 +40,8 @@ const cardData = [ displayName: 'DNB Kortet', cardDesign: defaultDesign, cardType: CardType.None, - productType: ProductType.BankAxept, + productType: ProductType.None, + bankAxept: BankAxeptType.BankAxept, }, { productCode: 'VE1', @@ -48,6 +50,7 @@ const cardData = [ cardDesign: defaultDesign, cardType: CardType.Visa, productType: ProductType.None, + bankAxept: BankAxeptType.None, }, { productCode: 'VE2', @@ -56,6 +59,7 @@ const cardData = [ cardDesign: defaultDesign, cardType: CardType.Visa, productType: ProductType.None, + bankAxept: BankAxeptType.None, }, { productCode: 'VG1', @@ -64,6 +68,7 @@ const cardData = [ cardDesign: saga, cardType: CardType.Visa, productType: ProductType.Saga, + bankAxept: BankAxeptType.BankAxept, }, { productCode: 'VG4', @@ -72,6 +77,16 @@ const cardData = [ cardDesign: saga, cardType: CardType.Visa, productType: ProductType.Saga, + bankAxept: BankAxeptType.BankAxept, + }, + { + productCode: '053', + productName: 'SAGA Gull Mastercard', + displayName: 'SAGA Gull', + cardDesign: saga, + cardType: CardType.Mastercard, + productType: ProductType.Saga, + bankAxept: BankAxeptType.None, }, { productCode: 'VK2', @@ -80,6 +95,7 @@ const cardData = [ cardDesign: defaultDesign, productType: ProductType.None, cardType: CardType.Visa, + bankAxept: BankAxeptType.None, }, { productCode: 'VK4', @@ -88,6 +104,16 @@ const cardData = [ cardDesign: defaultDesign, productType: ProductType.None, cardType: CardType.Visa, + bankAxept: BankAxeptType.None, + }, + { + productCode: '084', + productName: 'Pluss Mastercard(leve)', + displayName: 'Pluss Mastercard', + cardDesign: pluss, + productType: ProductType.Pluss, + cardType: CardType.Mastercard, + bankAxept: BankAxeptType.None, }, { productCode: 'VL1', @@ -96,14 +122,16 @@ const cardData = [ cardDesign: pluss, productType: ProductType.Pluss, cardType: CardType.Visa, + bankAxept: BankAxeptType.BankAxept, }, { productCode: 'VL2', productName: 'Hvitt Visa', displayName: 'Hvitt kort', - cardDesign: white, + cardDesign: young, productType: ProductType.None, cardType: CardType.Visa, + bankAxept: BankAxeptType.BankAxept, }, { productCode: 'VL3', @@ -112,22 +140,34 @@ const cardData = [ cardDesign: pluss, productType: ProductType.Pluss, cardType: CardType.Visa, + bankAxept: BankAxeptType.None, }, { productCode: 'VL4', productName: 'DNB Visa u/leg', displayName: 'DNB Visa', - cardDesign: silver, + cardDesign: defaultDesign, productType: ProductType.None, cardType: CardType.Visa, + bankAxept: BankAxeptType.BankAxept, }, { productCode: 'VL6', productName: 'Hvitt Visa u/leg', displayName: 'Hvitt kort', - cardDesign: white, + cardDesign: young, productType: ProductType.None, cardType: CardType.Visa, + bankAxept: BankAxeptType.BankAxept, + }, + { + productCode: '085', + productName: 'Ung Mastercard(student)', + displayName: 'Ung Mastercard', + cardDesign: young, + productType: ProductType.None, + cardType: CardType.Mastercard, + bankAxept: BankAxeptType.None, }, { productCode: 'VO1', @@ -136,6 +176,7 @@ const cardData = [ cardDesign: defaultDesign, cardType: CardType.Visa, productType: ProductType.None, + bankAxept: BankAxeptType.BankAxept, }, { productCode: 'VP2', @@ -144,6 +185,7 @@ const cardData = [ cardDesign: sagaPlatinum, productType: ProductType.Saga, cardType: CardType.Visa, + bankAxept: BankAxeptType.None, }, { productCode: 'VP3', @@ -152,6 +194,7 @@ const cardData = [ cardDesign: privateBanking, productType: ProductType.PrivateBanking, cardType: CardType.Visa, + bankAxept: BankAxeptType.None, }, { productCode: 'VP4', @@ -160,6 +203,16 @@ const cardData = [ cardDesign: sagaPlatinum, productType: ProductType.Saga, cardType: CardType.Visa, + bankAxept: BankAxeptType.BankAxept, + }, + { + productCode: '069', + productName: 'SAGA Platinum Mastercard', + displayName: 'SAGA Platinum', + cardDesign: sagaPlatinum, + productType: ProductType.Saga, + cardType: CardType.Mastercard, + bankAxept: BankAxeptType.None, }, { productCode: 'VP5', @@ -168,25 +221,17 @@ const cardData = [ cardDesign: privateBanking, productType: ProductType.PrivateBanking, cardType: CardType.Visa, + bankAxept: BankAxeptType.BankAxept, + }, + { + productCode: '080', + productName: 'Private Banking Mastercard', + displayName: 'Private Banking', + cardDesign: privateBanking, + productType: ProductType.PrivateBanking, + cardType: CardType.Mastercard, + bankAxept: BankAxeptType.None, }, - // { - // productCode: 'VU3', - // productName: 'Intro Electron', - // displayName: 'Intro Electron', - // cardDesign: defaultDesign, - // - // productLogo: "", - // cardType: CardType.Visa, - // }, - // { - // productCode: 'VU6', - // productName: 'Leve Ung', - // displayName: 'Leve Ung', - // cardDesign: defaultDesign, - // - // productLogo: "", - // type: "", - // }, { productCode: 'VX1', productName: 'Mitt første kort', @@ -194,30 +239,34 @@ const cardData = [ cardDesign: myFirst, productType: ProductType.None, cardType: CardType.Visa, + bankAxept: BankAxeptType.None, }, { productCode: 'VX3', productName: 'Ungdomskortet', displayName: 'Ungdomskort', cardDesign: youth, - productType: ProductType.BankAxept, + productType: ProductType.None, cardType: CardType.Visa, + bankAxept: BankAxeptType.BankAxept, }, { productCode: 'VX4', productName: 'Mitt første kort u/leg', displayName: 'Mitt første kort', cardDesign: myFirst, - productType: ProductType.None, + productType: ProductType.Intro, cardType: CardType.Visa, + bankAxept: BankAxeptType.BankAxept, }, { productCode: 'VX5', productName: 'Ungdomskortet u/leg', displayName: 'Ungdomskort', cardDesign: youth, - productType: ProductType.BankAxept, + productType: ProductType.Intro, cardType: CardType.Visa, + bankAxept: BankAxeptType.BankAxept, }, { productCode: '096', @@ -226,14 +275,16 @@ const cardData = [ cardDesign: gold, productType: ProductType.None, cardType: CardType.Mastercard, + bankAxept: BankAxeptType.None, }, { productCode: '044', productName: 'Hvitt Mastercard', displayName: 'Student', - cardDesign: white, + cardDesign: young, productType: ProductType.None, cardType: CardType.Mastercard, + bankAxept: BankAxeptType.None, }, { productCode: '043', @@ -242,6 +293,7 @@ const cardData = [ cardDesign: pluss, productType: ProductType.Pluss, cardType: CardType.Mastercard, + bankAxept: BankAxeptType.None, }, { productCode: '098', @@ -250,6 +302,7 @@ const cardData = [ cardDesign: saga, productType: ProductType.Saga, cardType: CardType.Mastercard, + bankAxept: BankAxeptType.None, }, { productCode: '074', @@ -258,6 +311,7 @@ const cardData = [ cardDesign: sagaPlatinum, productType: ProductType.Saga, cardType: CardType.Mastercard, + bankAxept: BankAxeptType.None, }, { productCode: '062', @@ -266,22 +320,25 @@ const cardData = [ cardDesign: privateBanking, productType: ProductType.PrivateBanking, cardType: CardType.Mastercard, + bankAxept: BankAxeptType.None, }, { productCode: 'BK1', productName: 'Bedriftskort (småkjøpskort)', displayName: 'Bedriftskort (småkjøpskort)', cardDesign: businessNoVisa, - productType: ProductType.BankAxept, + productType: ProductType.Bedrift, cardType: CardType.None, + bankAxept: BankAxeptType.BankAxept, }, { productCode: 'BP1', productName: 'Bedriftskort (småkjøpskort)', displayName: 'Bedriftskort (småkjøpskort)', cardDesign: businessNoVisa, - productType: ProductType.BankAxept, + productType: ProductType.Bedrift, cardType: CardType.None, + bankAxept: BankAxeptType.BankAxept, }, { productCode: 'VB1', @@ -290,14 +347,25 @@ const cardData = [ cardDesign: businessWithVisa, productType: ProductType.None, cardType: CardType.Visa, + bankAxept: BankAxeptType.BankAxept, }, { productCode: 'VB2', + productName: 'Visa Business', + displayName: 'Visa Business', + cardDesign: businessWithVisa, + productType: ProductType.None, + cardType: CardType.Visa, + bankAxept: BankAxeptType.BankAxept, + }, + { + productCode: 'VB5', productName: 'Bedriftskort med Visa', displayName: 'Bedriftskort med Visa', cardDesign: businessWithVisa, - productType: ProductType.None, + productType: ProductType.Business, cardType: CardType.Visa, + bankAxept: BankAxeptType.None, }, { productCode: 'P101', @@ -306,6 +374,7 @@ const cardData = [ cardDesign: mcBlack, productType: ProductType.None, cardType: CardType.Mastercard, + bankAxept: BankAxeptType.None, }, ]