Export all designs

- Revert the export - cleanup
dnbexperience · Jun 7, 2024 · f479d55 · f479d55
1 parent 26017b1
commit f479d55
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 128 deletions.
diff --git a/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.tsx b/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.tsx
@@ -43,7 +43,6 @@ const defaultProps = {
   id: null,
 
   customCard: null,
-  // rawData: null,
 
   skeleton: false,
   className: null,
@@ -73,8 +72,7 @@ export default function PaymentCard(props: PaymentCardProps) {
     digits,
     id,
     customCard: cardDesignProp,
-    // rawData,
-    // locale,
+    // locale
     skeleton,
     className,
     children, //eslint-disable-line
@@ -94,8 +92,6 @@ export default function PaymentCard(props: PaymentCardProps) {
     ...cardDesignProp,
   }
 
-  // const cardData: CustomCard = rawData || getCardData(productCode)
-
   const params = {
     className: classnames(
       'dnb-payment-card',
@@ -217,12 +213,3 @@ export function getCardDesign(productCode: string): CustomCard {
     defaultCard(productCode)
   )
 }
-
-// export const getCardData: (productCode: string) => PaymentCardRawData = (
-//   productCode
-// ) => {
-//   const card = cardProducts.find(
-//     (item) => item.productCode === productCode
-//   )
-//   return card || defaultCard(productCode)
-// }
diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/index.tsx b/packages/dnb-eufemia/src/extensions/payment-card/icons/index.tsx
@@ -93,7 +93,7 @@ function ProductLogo({ type }: ProductLogoProps) {
 
 type PaymentTypeProps = {
   type: PaymentType
-  color: string
+  color?: string
 }
 
 const PaymentTypeLogo = ({ type, color }: PaymentTypeProps) => {

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
@@ -26,17 +26,6 @@ const CustomWrapper = styled(Wrapper)`
   /* empty */
 `
 
-// const customData: PaymentCardRawData = {
-//   productCode: 'UNDEFINED',
-//   productName: 'DNB Custom Card',
-//   displayName: 'Custom card', // Only showed in compact variant
-//   // cardDesign: 'gold',
-//   cardDesign: Designs.gold,
-//   cardType: 'MastercardDefault',
-//   productType: 'Saga',
-//   bankAxept: 'BankAxeptWhite',
-// }
-
 export const PaymentCards = () => (
   <CustomWrapper className="dnb-spacing">
     <Box>
@@ -86,6 +75,11 @@ export const PaymentCards = () => (
       />
     </Box>
 
+    <Box>
+      <H3>Custom Card</H3>
+      <PaymentCard customCard={Designs.saga} />
+    </Box>
+
     <Box>
       <PaymentCard
         productCode={undefined}

diff --git a/packages/dnb-eufemia/src/extensions/payment-card/types.ts b/packages/dnb-eufemia/src/extensions/payment-card/types.ts
@@ -74,43 +74,7 @@ export type PaymentCardCardStatus =
   | 'replaced'
   | 'unknown'
 
-// // Testing new structure
-// type PaymentCardData = {
-//   productCode: string
-//   productName: string
-//   // cardDesign: CardDesignData // rename?
-//   cardType?: CardTypeDesign
-//   productType?: ProductType
-//   paymentTypeVariant?: BankAxeptType
-//   cardStyle?: string
-//   bankLogo?: LogoType
-//   bankLogoColor?: string
-//   cardDesign?: CardDesign
-//   backgroundImage?: string
-//   visaColor?: string
-// }
-
-// export type CustomCard = {
-//   productCode?: string
-//   displayName?: string
-//   bankLogo?: 'sbanken' | 'DNB'
-//   cardClassName?: string // css class
-//   bankLogoColor?: string // default #ffff
-//   productType?: ProductType
-//   background?: string // default dnb green
-//   backgroundImage?: string
-//   cardProvider?: CardProvider
-//   cardProviderColor?: string
-//   paymentType?: PaymentType
-//   paymentTypeColor?:
-//     | 'white'
-//     | 'black20'
-//     | 'gray'
-//     | 'darkGray'
-//     | 'black'
-//     | 'gold'
-//     | string
-// }
+export type PaymentCardVariant = 'normal' | 'compact'
 
 export type CustomCard = {
   productCode?: string
@@ -124,15 +88,6 @@ export type CustomCard = {
   paymentType?: { type: PaymentType; color?: string }
 }
 
-type paymentTypeColor =
-  | 'white'
-  | 'black20'
-  | 'gray'
-  | 'darkGray'
-  | 'black'
-  | 'gold'
-  | string
-
 export type BankLogoType = 'sbanken' | 'DNB'
 
 export type CardProvider =
@@ -151,59 +106,3 @@ export type ProductType =
   | 'Business'
   | 'Bedrift'
   | 'PrivateBanking'
-
-// export type PaymentCardRawData = {
-//   productCode: string
-//   productName: string
-//   cardDesign: CardDesignData // rename?
-//   cardType: CardTypeDesign
-//   productType: ProductType
-//   bankAxept: BankAxeptType // PaymentSystemVariant
-//   // remove?
-//   displayName: string // not used
-// }
-
-// export type CardDesignData = {
-//   cardStyle?: string
-//   bankLogo?: LogoType
-//   bankLogoColors?: string
-//   cardDesign?: CardDesign
-//   backgroundImage?: string
-//   visaColors?: string
-//   // Remove?
-//   name?: string
-//   cardType?: CardTypeDesign
-//   bankAxept?: BankAxeptType
-//   cardStatus?: CardStatus
-//   productType?: ProductType
-// }
-
-export type PaymentCardVariant = 'normal' | 'compact'
-// export type LogoType = 'DNB' | 'sbanken'
-
-export type CardStatus =
-  | 'expired'
-  | 'not_active'
-  | 'blocked'
-  | 'order_in_process'
-  | 'renewed'
-  | 'replaced'
-  | 'unknown'
-  | 'active'
-
-export type CardDesign = 'SagaGold' | 'SagaPlatinum' | 'None' | 'PBDefault'
-export type BankAxeptType =
-  | 'BankAxeptWhite'
-  | 'BankAxeptBlack20'
-  | 'BankAxeptGray'
-  | 'BankAxeptGrayDark'
-  | 'BankAxeptBlack'
-  | 'BankAxeptGold'
-  | 'Credit'
-  | 'None'
-export type CardTypeDesign =
-  | 'VisaColored'
-  | 'VisaPlatinum'
-  | 'MastercardDefault'
-  | 'MastercardDark'
-  | 'None'
diff --git a/packages/dnb-eufemia/src/extensions/payment-card/utils/CardDesigns.ts b/packages/dnb-eufemia/src/extensions/payment-card/utils/CardDesigns.ts
@@ -137,3 +137,22 @@ export const sbankenMastercard: CustomCard = {
   cardProvider: { type: 'Mastercard', color: properties['--color-white'] },
   paymentType: { type: 'Credit', color: properties['--color-white'] },
 }
+
+const Designs = {
+  defaultDesign,
+  pluss,
+  young,
+  myFirst,
+  youth,
+  gold,
+  saga,
+  sagaPlatinum,
+  privateBanking,
+  mcBlack,
+  businessNoVisa,
+  businessWithVisa,
+  sbankenVisa,
+  sbankenMastercard,
+}
+
+export default Designs