feat(PaymentCard): add styling for other card statuses

packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/properties.mdx

@@ -4,16 +4,16 @@ showTabs: true
 
 ## Card Properties
 
-| Properties                              | Description                                                                                                                                        |
-| --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `product_code`                          | _(required)_ if product code matches one of the codes in the list the card will get that design, if no match is found Default design will be used. |
-| `raw_data`                              | _(optional)_ useful if you want to create custom cards. See Card data properties.                                                                  |
-| `card_status`                           | _(optional)_ use one of these: `active`, `not_active`, `blocked`, `expired`. Defaults to `active`.                                                 |
-| `variant`                               | _(optional)_ defines the appearance. Use one of these: `normal` or `compact`. Defaults to `normal`.                                                |
-| `digits`                                | _(optional)_ will use 8 digits if none are specified.                                                                                              |
-| `card_number`                           | _(optional)_ masked card number.                                                                                                                   |
-| `locale`                                | _(optional)_ use `nb-NO` or `en-GB`. Defaults to the Eufemia provider.                                                                             |
-| `skeleton`                              | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown.                                                                |
+| Properties                                  | Description                                                                                                                                        |
+| ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `product_code`                              | _(required)_ if product code matches one of the codes in the list the card will get that design, if no match is found Default design will be used. |
+| `raw_data`                                  | _(optional)_ useful if you want to create custom cards. See Card data properties.                                                                  |
+| `card_status`                               | _(optional)_ use one of these: `active`, `not_active`, `blocked`, `expired`, `renewed`, `replaced`, `order_in_process`. Defaults to `active`.      |
+| `variant`                                   | _(optional)_ defines the appearance. Use one of these: `normal` or `compact`. Defaults to `normal`.                                                |
+| `digits`                                    | _(optional)_ will use 8 digits if none are specified.                                                                                              |
+| `card_number`                               | _(optional)_ masked card number.                                                                                                                   |
+| `locale`                                    | _(optional)_ use `nb-NO` or `en-GB`. Defaults to the Eufemia provider.                                                                             |
+| `skeleton`                                  | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown.                                                                |
 | [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                              |
 
 ## Card Data

packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.d.ts

@@ -7,7 +7,10 @@ export type PaymentCardCardStatus =
   | 'active'
   | 'blocked'
   | 'expired'
-  | 'not_active';
+  | 'not_active'
+  | 'order_in_process'
+  | 'renewed'
+  | 'replaced';
 export type PaymentCardVariant = 'normal' | 'compact';
 export type PaymentCardDigits = string | number;
 export enum CardType {

packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.js

@@ -2,7 +2,6 @@
  * Web PaymentCard Component
  *
  */
-
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
@@ -51,6 +50,9 @@ const translationDefaultPropsProps = {
   text_expired: null,
   text_blocked: null,
   text_not_active: null,
+  text_order_in_process: null,
+  text_renewed: null,
+  text_replaced: null
 }
 
 export default class PaymentCard extends React.PureComponent {
@@ -59,12 +61,10 @@ export default class PaymentCard extends React.PureComponent {
   static propTypes = {
     product_code: PropTypes.string.isRequired,
     card_number: PropTypes.string.isRequired,
-    card_status: PropTypes.oneOf([
-      'active',
-      'blocked',
-      'expired',
-      'not_active',
-    ]),
+    card_status: PropTypes.oneOf(['active', 'blocked', 'expired', 'not_active',
+    'order_in_process',
+    'renewed',
+    'replaced']),
     variant: PropTypes.oneOf(['normal', 'compact']),
     digits: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     raw_data: cardDataPropTypes,
@@ -220,50 +220,58 @@ StatusOverlay.defaultProps = {
   skeleton: false,
 }
 
-function StatusOverlay({ cardStatus, translations, skeleton }) {
+
+
+const BlockingOverlay = ({cardStatus, text}, skeleton) => {
+  return (
+    <div
+      className={classnames(
+        'dnb-payment-card__blocking__overlay',
+        createSkeletonClass('font', skeleton)
+      )}
+    >
+      <div className="dnb-payment-card__blocking__center">
+        <StatusIcon status={cardStatus} />
+        <P top="xx-small">{text}</P>
+      </div>
+    </div>
+  )
+
+}
+
+function StatusOverlay({ cardStatus, translations}) {
   switch (cardStatus) {
     case 'not_active':
       return (
-        <div
-          className={classnames(
-            'dnb-payment-card__blocking__overlay',
-            createSkeletonClass('font', skeleton)
-          )}
-        >
-          <div className="dnb-payment-card__blocking__center">
-            <StatusIcon status={cardStatus} />
-            <P top="xx-small">{translations.text_not_active}</P>
-          </div>
-        </div>
+        <BlockingOverlay cardStatus={cardStatus} text={translations.text_not_active}/>
+      )
+
+    case 'order_in_process':
+      return (
+        <BlockingOverlay cardStatus={cardStatus} text={translations.text_order_in_process}/>
+      )
+
+    case 'renewed':
+      return (
+        <BlockingOverlay cardStatus={cardStatus} text={translations.text_renewed}/>
+
       )
+
+    case 'replaced':
+      return (
+        <BlockingOverlay cardStatus={cardStatus} text={translations.text_replaced}/>
+
+      )
+
     case 'blocked':
       return (
-        <div
-          className={classnames(
-            'dnb-payment-card__blocking__overlay',
-            createSkeletonClass('font', skeleton)
-          )}
-        >
-          <div className="dnb-payment-card__blocking__center">
-            <StatusIcon status={cardStatus} />
-            <P top="xx-small">{translations.text_blocked}</P>
-          </div>
-        </div>
+        <BlockingOverlay cardStatus={cardStatus} text={translations.text_blocked} />
+
       )
 
     case 'expired':
       return (
-        <div
-          className={classnames(
-            'dnb-payment-card__blocking__overlay',
-            createSkeletonClass('font', skeleton)
-          )}
-        >
-          <div className="dnb-payment-card__blocking__center">
-            <StatusIcon status={cardStatus} />
-            <P top="xx-small">{translations.text_expired}</P>
-          </div>
-        </div>
+        <BlockingOverlay cardStatus={cardStatus} text={translations.text_expired} />
       )
 
     case 'active':

packages/dnb-eufemia/src/extensions/payment-card/__tests__/PaymentCard.test.tsx

@@ -74,6 +74,28 @@ describe('PaymentCard', () => {
     expect(screen.queryByText(nb.text_not_active)).toBeInTheDocument()
   })
 
+  it('has correct renewed status', () => {
+    render(<PaymentCard {...defaultProps} card_status="renewed" />)
+
+    expect(screen.queryByText(nb.text_renewed)).toBeInTheDocument()
+  })
+
+  it('has correct replaced status', () => {
+    render(<PaymentCard {...defaultProps} card_status="replaced" />)
+
+    expect(screen.queryByText(nb.text_replaced)).toBeInTheDocument()
+  })
+
+  it('has correct order_in_process status', () => {
+    render(
+      <PaymentCard {...defaultProps} card_status="order_in_process" />
+    )
+
+    expect(
+      screen.queryByText(nb.text_order_in_process)
+    ).toBeInTheDocument()
+  })
+
   it('has correct blocked status', () => {
     render(<PaymentCard {...defaultProps} card_status="blocked" />)
 

packages/dnb-eufemia/src/extensions/payment-card/icons/index.js

@@ -2,9 +2,10 @@ import React from 'react'
 
 import BankAxept from './BankAxept'
 import DNB from './DNB'
-import Expired from './Clock'
-import Blocked from './Padlock'
-import NotActive from './CardIn'
+import { clock_medium as Expired } from '../../../icons'
+import { padlock_medium as Blocked } from '../../../icons'
+import { card_in_medium as CardIn } from '../../../icons'
+import { hourglass as Hourglass } from '../../../icons'
 import MastercardDefault from './MastercardDefault'
 import MastercardDark from './MastercardDark'
 import Pluss from './Pluss'
@@ -16,7 +17,6 @@ import SagaGold from './SagaGold'
 import SagaPlatinum from './SagaPlatinum'
 import VisaDefault from './VisaDefault'
 import VisaPlatinum from './VisaPlatinum'
-
 const BankLogo = ({ logoType, height }) =>
   logoType.cata({
     Colored: (color) => (
@@ -71,10 +71,19 @@ const StatusIcon = ({ status }) => {
       return <Expired />
 
     case 'not_active':
-      return <NotActive />
+      return <CardIn />
 
     case 'blocked':
       return <Blocked />
+
+    case 'order_in_process':
+      return <Hourglass />
+
+    case 'renewed':
+      return <CardIn />
+
+    case 'replaced':
+      return <CardIn />
 
     case 'active':
     default:

packages/dnb-eufemia/src/icons/dnb/card_in_medium.tsx

@@ -11,7 +11,7 @@ const card_in_medium = (props) => (
     {...props}
   >
     <path
-      stroke="#000"
+      stroke="#fefefe"
       strokeLinecap="round"
       strokeLinejoin="round"
       strokeWidth={1.5}

packages/dnb-eufemia/src/icons/dnb/clock_medium.tsx

@@ -11,7 +11,7 @@ const clock_medium = (props) => (
     {...props}
   >
     <path
-      stroke="#000"
+      stroke="#fefefe"
       strokeLinecap="round"
       strokeLinejoin="round"
       strokeWidth={1.5}

packages/dnb-eufemia/src/icons/dnb/hourglass.tsx

@@ -12,7 +12,7 @@ const hourglass = (props) => (
   >
     <g clipPath="url(#hourglass_svg__a)">
       <path
-        stroke="#000"
+        stroke="#fefefe"
         strokeLinecap="round"
         strokeLinejoin="round"
         strokeWidth={1.5}

packages/dnb-eufemia/src/icons/dnb/padlock_medium.tsx

@@ -11,7 +11,7 @@ const padlock_medium = (props) => (
     {...props}
   >
     <path
-      stroke="#000"
+      stroke="#fefefe"
       strokeLinecap="round"
       strokeLinejoin="round"
       strokeWidth={1.5}

packages/dnb-eufemia/src/shared/locales/en-GB.js

@@ -116,6 +116,9 @@ export default {
       text_expired: 'Expired',
       text_blocked: 'Blocked',
       text_not_active: 'Not activated',
+      text_order_in_process: 'Order in process',
+      text_renewed: 'Renewed',
+      text_replaced: 'Replaced',
     },
     Logo: {
       alt: 'DNB Logo',

packages/dnb-eufemia/src/shared/locales/nb-NO.js

@@ -116,6 +116,9 @@ export default {
       text_expired: 'Utgått',
       text_blocked: 'Sperret',
       text_not_active: 'Ikke aktivert',
+      text_order_in_process: 'Under behandling',
+      text_renewed: 'Fornyet',
+      text_replaced: 'Erstattet',
     },
     Logo: {
       alt: 'DNB Logo',