From 59de6ec4ae336e10367ccc346cca738c10968fab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?A=CC=8Adne=20Rosenvinge?= Date: Mon, 10 Jun 2024 16:16:07 +0200 Subject: [PATCH] Cleanup --- .../extensions/payment-card/Examples.tsx | 17 ++++----- .../uilib/extensions/payment-card/demos.mdx | 1 - .../extensions/payment-card/PaymentCard.tsx | 36 +++++-------------- .../extensions/payment-card/icons/index.tsx | 8 ++--- .../src/extensions/payment-card/types.ts | 13 ++----- .../payment-card/utils/CardDesigns.ts | 28 +++++++-------- packages/dnb-eufemia/src/shared/Context.tsx | 3 ++ 7 files changed, 35 insertions(+), 71 deletions(-) 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 500ed8952d3..aced71b73cf 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 @@ -8,9 +8,6 @@ import ComponentBox from '../../../../shared/tags/ComponentBox' import PaymentCard, { getCardDesign, CustomCard, - // ProductType, - // CardType, - // BankAxeptType, } from '@dnb/eufemia/src/extensions/payment-card' import { H4 } from '@dnb/eufemia/src' @@ -69,15 +66,15 @@ export function PaymentCardAllCardsExample() { const Cards = () => ( <> - {demoCards.map((product_code) => { - const cardData = getCardDesign(product_code) + {demoCards.map((productCode) => { + const cardData = getCardDesign(productCode) return ( -
+

- {cardData.displayName}({product_code}) + {cardData.displayName}({productCode})

@@ -97,7 +94,7 @@ export const PaymentCardBasicExample = () => ( scope={{ PaymentCard }} data-visual-test="payment-card-basic" > - + ) @@ -105,8 +102,6 @@ export const PaymentCardCustomExample = () => ( {() => { diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/demos.mdx index 2de5098b219..ba3859db562 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/demos.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/demos.mdx @@ -5,7 +5,6 @@ showTabs: true import PaymentCard, { getCardData, Designs, - ProductType, CardType, } from '@dnb/eufemia/src/extensions/payment-card' import ChangeLocale from 'dnb-design-system-portal/src/core/ChangeLocale' diff --git a/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.tsx b/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.tsx index c014fdccbd5..cf23f77a74a 100644 --- a/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.tsx +++ b/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.tsx @@ -36,27 +36,9 @@ const defaultCard: (productCode: string) => CustomCard = ( const defaultProps = { digits: 8, - // locale: null, - card_status: 'active', + cardStatus: 'active', variant: 'normal', - - id: null, - - customCard: null, - skeleton: false, - className: null, - children: null, - - // translations - text_card_number: null, - text_expired: null, - text_blocked: null, - text_not_active: null, - text_order_in_process: null, - text_renewed: null, - text_replaced: null, - text_unknown: null, } export default function PaymentCard(props: PaymentCardProps) { @@ -72,11 +54,9 @@ export default function PaymentCard(props: PaymentCardProps) { digits, id, customCard: cardDesignProp, - // locale skeleton, className, children, //eslint-disable-line - ...attributes } = extendPropsWithContext( convertSnakeCaseProps(props), @@ -103,10 +83,10 @@ export default function PaymentCard(props: PaymentCardProps) { ...attributes, } - skeletonDOMAttributes(params, skeleton, context) - - // also used for code markup simulation - validateDOMAttributes(props, params) + const validatedParameters = validateDOMAttributes( + props, + skeletonDOMAttributes(params, skeleton, context) + ) const cardStatusMap = { not_active: translations.text_not_active, @@ -119,7 +99,7 @@ export default function PaymentCard(props: PaymentCardProps) { } return ( -
+
{cardDesign.displayName}
@@ -127,7 +107,7 @@ export default function PaymentCard(props: PaymentCardProps) { id={id} className={classnames( 'dnb-payment-card__card', - `dnb-payment-card__${cardDesign.cardClassName}` // kan denne overskrives? + cardDesign.cardClassName && cardDesign.cardClassName )} {...(cardDesign.backgroundImage ? { @@ -192,7 +172,7 @@ export default function PaymentCard(props: PaymentCardProps) { } } -export function formatCardNumber(cardNumber, digits = 8) { +export function formatCardNumber(cardNumber: string, digits: number) { const formatCardNumberRegex = /(?=(?:....)*$)/g if (!cardNumber) { diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/index.tsx b/packages/dnb-eufemia/src/extensions/payment-card/icons/index.tsx index eb7bfdce2d5..89098bff158 100644 --- a/packages/dnb-eufemia/src/extensions/payment-card/icons/index.tsx +++ b/packages/dnb-eufemia/src/extensions/payment-card/icons/index.tsx @@ -23,12 +23,8 @@ import VisaPlatinum from './VisaPlatinum' import Sbanken from './Sbanken' import Credit from './Credit' import { - CardDesign, - LogoType, ProductType, - BankAxeptType, - CardStatus, - CardTypeDesign, + PaymentCardCardStatus, PaymentType, CardProvider, BankLogoType, @@ -114,7 +110,7 @@ const PaymentTypeLogo = ({ type, color }: PaymentTypeProps) => { } } -const StatusIcon = ({ status }: { status: CardStatus }) => { +const StatusIcon = ({ status }: { status: PaymentCardCardStatus }) => { switch (status) { case 'expired': return diff --git a/packages/dnb-eufemia/src/extensions/payment-card/types.ts b/packages/dnb-eufemia/src/extensions/payment-card/types.ts index e2b57e66ed0..31f6f1b309c 100644 --- a/packages/dnb-eufemia/src/extensions/payment-card/types.ts +++ b/packages/dnb-eufemia/src/extensions/payment-card/types.ts @@ -25,18 +25,11 @@ export type PaymentCardProps = { * Useful if you want to create custom cards. See Card data properties. */ customCard?: CustomCard - // rawData?: PaymentCardRawData - id?: string /** * Use `nb-NO` or `en-GB`. Defaults to the Eufemia provider. */ - // locale?: InternalLocale, skeleton?: boolean className?: string - children?: React.ReactNode - /** - * Translations - */ } & Omit, 'ref'> & SpacingProps & PaymentCardTranslations & @@ -49,8 +42,6 @@ type DeprecatedPaymentCardProps = { card_number?: string /** @deprecated use `cardStatus` */ card_status?: PaymentCardCardStatus - // /** @deprecated use `rawData` */ - // raw_data?: PaymentCardRawData } type PaymentCardTranslations = { @@ -79,8 +70,8 @@ export type PaymentCardVariant = 'normal' | 'compact' export type CustomCard = { productCode?: string displayName?: string - cardClassName?: string // css class - background?: string // default dnb green + cardClassName?: string + background?: string backgroundImage?: string bankLogo?: { type: BankLogoType; color?: string } productType?: { type: ProductType; color?: string } diff --git a/packages/dnb-eufemia/src/extensions/payment-card/utils/CardDesigns.ts b/packages/dnb-eufemia/src/extensions/payment-card/utils/CardDesigns.ts index d1f9fbfc3c5..11ab0a07630 100644 --- a/packages/dnb-eufemia/src/extensions/payment-card/utils/CardDesigns.ts +++ b/packages/dnb-eufemia/src/extensions/payment-card/utils/CardDesigns.ts @@ -3,7 +3,7 @@ import { CustomCard } from '../types' import { myFirstImg, youthImg, ungImg } from './backgrounds' export const defaultDesign: CustomCard = { - cardClassName: 'card--design-default', + cardClassName: 'dnb-payment-card__card--design-default', bankLogo: { type: 'DNB', color: properties['--color-white'] }, cardProvider: { type: 'Visa', color: properties['--color-white'] }, paymentType: { type: 'BankAxept', color: properties['--color-white'] }, @@ -11,7 +11,7 @@ export const defaultDesign: CustomCard = { export const pluss: CustomCard = { // name: 'Pluss', - cardClassName: 'card--design-pluss', + cardClassName: 'dnb-payment-card__card--design-pluss', bankLogo: { type: 'DNB', color: properties['--color-white'] }, cardProvider: { type: 'Visa', color: properties['--color-white'] }, paymentType: { type: 'BankAxept', color: properties['--color-white'] }, @@ -19,7 +19,7 @@ export const pluss: CustomCard = { export const young: CustomCard = { // name: 'Ung', - cardClassName: 'card--design-ung', + cardClassName: 'dnb-payment-card__card--design-ung', backgroundImage: ungImg, bankLogo: { type: 'DNB', color: properties['--color-sea-green'] }, cardProvider: { type: 'Mastercard' }, @@ -31,7 +31,7 @@ export const young: CustomCard = { export const myFirst: CustomCard = { // name: 'My first', - cardClassName: 'card--design-my-first', + cardClassName: 'dnb-payment-card__card--design-my-first', backgroundImage: myFirstImg, bankLogo: { type: 'DNB', color: properties['--color-ocean-green'] }, cardProvider: { type: 'Visa', color: properties['--color-black-80'] }, @@ -43,7 +43,7 @@ export const myFirst: CustomCard = { export const youth: CustomCard = { // name: 'Youth', - cardClassName: 'card--design-youth', + cardClassName: 'dnb-payment-card__card--design-youth', backgroundImage: youthImg, bankLogo: { type: 'DNB', color: properties['--color-sea-green'] }, cardProvider: { type: 'Visa', color: properties['--color-black-80'] }, @@ -55,7 +55,7 @@ export const youth: CustomCard = { export const gold: CustomCard = { // name: 'Gold', - cardClassName: 'card--design-gold', + cardClassName: 'dnb-payment-card__card--design-gold', bankLogo: { type: 'DNB', color: properties['--color-white'] }, cardProvider: { type: 'Visa', color: properties['--color-white'] }, paymentType: { @@ -66,7 +66,7 @@ export const gold: CustomCard = { export const saga: CustomCard = { // name: 'Saga', - cardClassName: 'card--design-saga', + cardClassName: 'dnb-payment-card__card--design-saga', bankLogo: { type: 'DNB', color: '#BFA970' }, cardProvider: { type: 'Mastercard', color: '#BFA970' }, paymentType: { @@ -77,7 +77,7 @@ export const saga: CustomCard = { export const sagaPlatinum: CustomCard = { // name: 'Saga platinum', - cardClassName: 'card--design-saga', + cardClassName: 'dnb-payment-card__card--design-saga', bankLogo: { type: 'DNB', color: '#b2b4b3' }, cardProvider: { type: 'MastercardDark', @@ -92,7 +92,7 @@ export const sagaPlatinum: CustomCard = { export const privateBanking: CustomCard = { // name: 'Private Banking', - cardClassName: 'card--design-private', + cardClassName: 'dnb-payment-card__card--design-private', bankLogo: { type: 'DNB', color: '#b2b4b3' }, cardProvider: { type: 'VisaPlatinum' }, paymentType: { type: 'BankAxept', color: '#b2b4b3' }, @@ -100,7 +100,7 @@ export const privateBanking: CustomCard = { export const mcBlack: CustomCard = { // name: 'Mastercard Black', - cardClassName: 'card--design-black', + cardClassName: 'dnb-payment-card__card--design-black', bankLogo: { type: 'DNB', color: properties['--color-black-80'] }, paymentType: { type: 'BankAxept', color: properties['--color-white'] }, cardProvider: { type: 'MastercardDark', color: '#b2b4b3' }, @@ -108,7 +108,7 @@ export const mcBlack: CustomCard = { export const businessNoVisa: CustomCard = { // name: 'Bedriftskort BankAxept', - cardClassName: 'card--design-business-no-visa', + cardClassName: 'dnb-payment-card__card--design-business-no-visa', bankLogo: { type: 'DNB', color: properties['--color-mint-green'] }, cardProvider: { type: 'Visa', color: properties['--color-white'] }, paymentType: { type: 'BankAxept', color: properties['--color-white'] }, @@ -116,7 +116,7 @@ export const businessNoVisa: CustomCard = { export const businessWithVisa: CustomCard = { // name: 'Bedriftskort Visa', - cardClassName: 'card--design-business-with-visa', + cardClassName: 'dnb-payment-card__card--design-business-with-visa', bankLogo: { type: 'DNB', color: properties['--color-mint-green'] }, cardProvider: { type: 'Visa', color: properties['--color-white'] }, paymentType: { type: 'BankAxept', color: properties['--color-white'] }, @@ -124,7 +124,7 @@ export const businessWithVisa: CustomCard = { export const sbankenVisa: CustomCard = { // name: 'Sbanken', - cardClassName: 'card--design-sbanken-visa', + cardClassName: 'dnb-payment-card__card--design-sbanken-visa', bankLogo: { type: 'sbanken', color: properties['--sb-color-text'] }, cardProvider: { type: 'Visa', color: '#0F357F' }, paymentType: { type: 'BankAxept', color: '#55565A' }, @@ -132,7 +132,7 @@ export const sbankenVisa: CustomCard = { export const sbankenMastercard: CustomCard = { // name: 'Sbanken Mastercard', - cardClassName: 'card--design-sbanken-mastercard', + cardClassName: 'dnb-payment-card__card--design-sbanken-mastercard', bankLogo: { type: 'sbanken', color: properties['--color-white'] }, cardProvider: { type: 'Mastercard', color: properties['--color-white'] }, paymentType: { type: 'Credit', color: properties['--color-white'] }, diff --git a/packages/dnb-eufemia/src/shared/Context.tsx b/packages/dnb-eufemia/src/shared/Context.tsx index e324e673c31..b2128337493 100644 --- a/packages/dnb-eufemia/src/shared/Context.tsx +++ b/packages/dnb-eufemia/src/shared/Context.tsx @@ -51,6 +51,7 @@ import type { FormElementProps } from './helpers/filterValidProps' import type { ThemeProps } from './Theme' import type { FormsTranslation } from '../extensions/forms/hooks/useTranslation' import type { DeepPartial } from './types' +import { PaymentCardProps } from '../extensions/payment-card' export type ContextComponents = { Button?: Partial @@ -87,6 +88,8 @@ export type ContextComponents = { FormStatus?: Partial Logo?: Partial + PaymentCard?: Partial + // -- TODO: Not converted yet -- NumberFormat?: Record Pagination?: Record