Cleanup

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 (
-                <article key={product_code}>
+                <article key={productCode}>
                   <H4>
-                    {cardData.displayName}({product_code})
+                    {cardData.displayName}({productCode})
                   </H4>
                   <PaymentCard
-                    productCode={product_code}
+                    productCode={productCode}
                     cardNumber="************1337"
                   />
                 </article>
@@ -97,16 +94,14 @@ export const PaymentCardBasicExample = () => (
     scope={{ PaymentCard }}
     data-visual-test="payment-card-basic"
   >
-    <PaymentCard product_code="NK1" card_number="************1337" />
+    <PaymentCard productCode="NK1" cardNumber="************1337" />
   </ComponentBox>
 )
 
 export const PaymentCardCustomExample = () => (
   <ComponentBox
     scope={{
       PaymentCard,
-      // Designs,
-      //   ProductType, CardType, BankAxeptType
     }}
   >
     {() => {

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'

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,15 +99,15 @@ export default function PaymentCard(props: PaymentCardProps) {
   }
 
   return (
-    <figure {...params}>
+    <figure {...validatedParameters}>
       <figcaption className="dnb-sr-only dnb-payment-card__figcaption">
         {cardDesign.displayName}
       </figcaption>
       <div
         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) {

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 <Expired />

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<React.HTMLProps<HTMLElement>, '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 }

packages/dnb-eufemia/src/extensions/payment-card/utils/CardDesigns.ts

@@ -3,23 +3,23 @@ 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'] },
 }
 
 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'] },
 }
 
 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,47 +92,47 @@ 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' },
 }
 
 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' },
 }
 
 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'] },
 }
 
 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'] },
 }
 
 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' },
 }
 
 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'] },

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<ButtonProps>
@@ -87,6 +88,8 @@ export type ContextComponents = {
   FormStatus?: Partial<FormStatusProps>
   Logo?: Partial<LogoProps>
 
+  PaymentCard?: Partial<PaymentCardProps>
+
   // -- TODO: Not converted yet --
   NumberFormat?: Record<string, unknown>
   Pagination?: Record<string, unknown>