Skip to content

Commit

Permalink
feat(PaymentCard): updated designs
Browse files Browse the repository at this point in the history
  • Loading branch information
@langz
langz committed May 2, 2023
1 parent 8ac06fc commit b6a43e4
Show file tree
Hide file tree
Showing 54 changed files with 6,166 additions and 1,008 deletions.
4 changes: 2 additions & 2 deletions ...design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -304,7 +304,7 @@ Removed `small` as prop. Use `size="small"` instead.

### [PaymentCard](/uilib/extensions/payment-card/)

1. `Type`'s value/option `Metalic` was renamed to `Metallic`. Find `Metalic` and replace with `Metallic`.
2. `Type`'s value/option `BlackMetalic` was renamed to `BlackMetallic`. Find `BlackMetalic` and replace with `BlackMetallic`.
1. `Type`'s value/option `Metalic` was removed.
2. `Type`'s value/option `BlackMetalic` was removed.

_April, 20. 2023_
5 changes: 3 additions & 2 deletions ...ages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/CardProductsTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,15 +61,16 @@ const getTypeVariant = (type, design) =>

const getProductVariant = (type, design) =>
type.cata({
BankAxept: () => prettiePrint(design.bankAxept.toString()),
Saga: () => prettiePrint(design.saga.toString()),
Pluss: () => '-',
Intro: () => '-',
Bedrift: () => '-',
Business: () => '-',
PrivateBanking: () => prettiePrint(design.privateBanking.toString()),
None: () => '-',
})

const getProductLogo = (bankLogo) =>
bankLogo.cata({
Colored: (color) => color,
Metallic: () => 'Metallic',
})
50 changes: 42 additions & 8 deletions packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/Examples.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import PaymentCard, {
Designs,
ProductType,
CardType,
BankAxeptType,
} from '@dnb/eufemia/src/extensions/payment-card'
import { H4 } from '@dnb/eufemia/src'

Expand All @@ -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 = () => (
Expand All @@ -41,7 +70,9 @@ export function PaymentCardAllCardsExample() {
const cardData = getCardData(product_code)
return (
<article key={product_code}>
<H4>{cardData.cardDesign.name}</H4>
<H4>
{cardData.cardDesign.name}({product_code})
</H4>
<PaymentCard
product_code={product_code}
card_number="************1337"
Expand All @@ -68,15 +99,18 @@ export const PaymentCardBasicExample = () => (
)

export const PaymentCardCustomExample = () => (
<ComponentBox scope={{ PaymentCard, Designs, ProductType, CardType }}>
<ComponentBox
scope={{ PaymentCard, Designs, ProductType, CardType, BankAxeptType }}
>
{() => {
const customData = {
productCode: 'UNDEFINED',
productName: 'DNB Custom Card',
displayName: 'Custom card',
cardDesign: Designs.gold,
cardType: CardType.Visa,
productType: ProductType.BankAxept,
productType: ProductType.None,
bankAxept: BankAxeptType.BankAxept,
}
return (
<PaymentCard
Expand Down
3 changes: 2 additions & 1 deletion packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/demos.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ import PaymentCard, {
Designs,
ProductType,
CardType,
BankAxeptType,
} from '@dnb/eufemia/extensions/PaymentCard'
```

Expand All @@ -59,6 +60,6 @@ Basic card using product code and status.

### Demo cards

A few selected cards to showcase all the different PaymentCard designs.
All the different card products and PaymentCard designs.

<PaymentCardAllCardsExample />
56 changes: 29 additions & 27 deletions .../dnb-design-system-portal/src/docs/uilib/extensions/payment-card/properties.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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, PB.Platinum 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 |
Expand All @@ -63,24 +63,23 @@ 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** |
Expand All @@ -90,9 +89,12 @@ showTabs: true
| **BankAxept** |
| `White` |
| `Black` |
| `Gold` |
| `Black20` |
| `Gray` |
| **Visa** |
| `Colored` |
| `Metallic` |
| `Platinum` |
| **Status** |
| `Expired` |
| `Blocked` |
Expand Down
28 changes: 22 additions & 6 deletions packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -41,6 +56,7 @@ export interface PaymentCardRawData {
cardDesign: Designs;
cardType: CardType;
productType: ProductType;
bankAxept: BankAxeptType;
}
export type PaymentCardChildren =
| string
Expand Down
18 changes: 15 additions & 3 deletions packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 = {
Expand Down Expand Up @@ -189,6 +196,7 @@ const defaultCard = (productCode) => ({
cardDesign: defaultDesign,
cardType: CardType.None,
productType: ProductType.None,
bankAxept: BankAxeptType.None,
})

StatusOverlay.propTypes = {
Expand Down Expand Up @@ -299,6 +307,10 @@ function NormalCard({
productType={data.productType}
cardDesign={data.cardDesign}
/>
<BankAxeptLogo
bankAxept={data.bankAxept}
cardDesign={data.cardDesign}
/>
</div>
<div className="dnb-payment-card__card__bottom">
<CardText
Expand Down
4 changes: 3 additions & 1 deletion packages/dnb-eufemia/src/extensions/payment-card/__tests__/PaymentCard.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import Component, {
CardType,
formatCardNumber,
PaymentCardProps,
BankAxeptType,
} from '../PaymentCard'
import nbNO from '../../../shared/locales/nb-NO'
import enGB from '../../../shared/locales/en-GB'
Expand Down Expand Up @@ -123,7 +124,8 @@ describe('PaymentCard', () => {
displayName: 'Custom card', // Only showed in compact variant
cardDesign: Designs.gold,
cardType: CardType.Visa,
productType: ProductType.BankAxept,
productType: ProductType.None,
bankAxept: BankAxeptType.BankAxept,
}

const Comp = mount(
Expand Down
Loading

0 comments on commit b6a43e4

Please sign in to comment.