@dnb/eufemia 10.74.0 → 10.75.0

package/extensions/payment-card/style/dnb-payment-card.scss

@@ -1,158 +1,156 @@
 /*
- * PaymentCard component
- *
+ * PaymentCard component styles
+ * This file provides styling for the PaymentCard component, including general design tokens
+ * and variations for different card types (e.g., default, pluss, gold, etc.).
  */
 
 @import '../../../style/core/utilities.scss';
 @import '../../../style/themes/theme-sbanken/properties.scss';
 
 .dnb-payment-card {
+  /*
+   * Define custom CSS variables used throughout the PaymentCard component.
+   * These variables allow for reusable colors, border-radius, and overlay background transitions.
+   */
   --color-dark-cyan: #003b47;
-  --dnb-payment-bg-default: linear-gradient(
-    187.2deg,
-    #008484 6.31%,
-    var(--color-sea-green) 82.66%
-  );
-  --dnb-payment-bg-pluss: linear-gradient(
-      187.2deg,
-      var(--color-dark-cyan) 6.31%,
-      var(--color-ocean-green) 82.66%
-    ),
-    var(--color-emerald-green);
-  --dnb-payment-bg-white: linear-gradient(
-    184.55deg,
-    var(--color-black-background) 4.63%,
-    var(--color-white) 92.04%
-  );
-  --dnb-payment-bg-gold: linear-gradient(
-    184.55deg,
-    #bfa970 4.63%,
-    #d3bd83 84.57%
-  );
-  --dnb-payment-bg-saga: linear-gradient(
-    187.2deg,
-    #1c1c1c 6.31%,
-    #000 82.66%
-  );
-  --dnb-payment-bg-private: linear-gradient(
-    187.2deg,
-    #1c1c1c 6.31%,
-    #000 82.66%
-  );
-  --dnb-payment-bg-business-no-visa: linear-gradient(
-      187.2deg,
-      var(--color-dark-cyan) 6.31%,
-      var(--color-ocean-green) 82.66%
-    ),
-    var(--color-emerald-green);
-  --dnb-payment-bg-business-with-visa: linear-gradient(
-      187.2deg,
-      var(--color-dark-cyan) 6.31%,
-      var(--color-ocean-green) 82.66%
-    ),
-    var(--color-emerald-green);
-
+  --dnb-payment-bg-default: var(--color-sea-green);
+  --dnb-payment-bg-pluss: var(--color-ocean-green);
+  --dnb-payment-bg-white: var(--color-white);
+  --dnb-payment-bg-gold: #D8C583;
+  --dnb-payment-bg-black-gold:  #1F1B10;
+  --dnb-payment-bg-black-grey: #1C1C1E;
+  --dnb-payment-overlay-bg-dark: rgba(0 0 0 / 60%);
+  --dnb-payment-overlay-bg-light: rgba(255 255 255 / 70%);
+  --dnb-payment-border-radius: 12px;
+
+  // General styles for the PaymentCard container
   margin: 0;
+  border-radius: var(--dnb-payment-border-radius);
 
+  /*
+   * Base styles for the card element including size, padding, color, and shadow.
+   * This serves as the core design for all PaymentCard variations.
+   */
   &__card {
-    position: relative;
-    width: 343px;
-    height: 216px;
+    width: 100%;
+    height: 100%;
     padding: 16px;
-
-    border-radius: 12px;
-
-    border: 1px solid;
-    border-color: rgb(255 255 255 / 10%) transparent rgb(255 255 255 / 10%)
-      transparent;
+    border-radius: inherit;
 
     color: var(--color-white);
     box-shadow: var(--shadow-default);
 
     transition: all 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
 
-    &--design-default {
-      background: var(--dnb-payment-bg-default);
-      color: var(--color-white);
-    }
+    // Ensure the card content cannot be selected
+    user-select: none;
 
-    &--design-pluss {
-      background: var(--dnb-payment-bg-pluss);
-      color: var(--color-white);
-    }
-
-    &--design-ung {
-      color: var(--color-black-80);
-    }
-
-    &--design-youth {
-      color: var(--color-black-80);
-    }
-
-    &--design-my-first {
-      color: var(--color-black-80);
+    // Specific container wrapper for the card.
+    &__wrapper {
+      position: relative;
+      width: 343px;
+      height: 216px;
+      border-radius: inherit;
+      border: 1px solid var(--color-black-8);
+
+      // Creates a transparent overlay to prevent user selection
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: inherit;
+      }
     }
 
-    &--design-gold {
-      background: var(--dnb-payment-bg-gold);
-      color: var(--color-white);
-    }
+    // Styles for a card marked as: not_active | blocked | expired
+    &--blocked {
+      opacity: 0.5;
+    }
+    
+    /*
+     * Design variations for different card types.
+     * Each modifier represents a unique card style and contains
+     * specific background and text color configurations.
+     */
+    &--design {
+      // Card styles for DNB default card designs
+      &-default {
+        background-color: var(--dnb-payment-bg-default);
+        color: var(--color-white);
+      }
 
-    &--design-saga {
-      background: var(--dnb-payment-bg-saga);
-      color: var(--color-white);
-    }
+      // Card styles for DNB Pluss card designs
+      &-pluss {
+        background-color: var(--dnb-payment-bg-pluss);
+        color: var(--color-white);
+      }
 
-    &--design-private {
-      background: var(--dnb-payment-bg-private);
-      color: var(--color-white);
-    }
+      // Card styles for youth-oriented card designs
+      &-ung, &-youth, &-my-first {
+        background-color: var(--dnb-payment-bg-white);
+        color: var(--color-black);
+      }
 
-    &--design-black {
-      background: var(--color-black);
-      color: var(--color-white);
-    }
+      // Gold card design
+      &-gold {
+        background-color: var(--dnb-payment-bg-gold);
+        color: var(--color-black);
+      }
 
-    &--design-business-no-visa {
-      background: var(--dnb-payment-bg-business-no-visa);
-      color: var(--color-white);
-    }
+      // Saga (Gold) card design with black-gold theme
+      &-saga {
+        background-color: var(--dnb-payment-bg-black-gold);
+        color: var(--color-white);
+        // Specific styles for separators within the Saga card.
+        .provider--separator {
+          color: var(--dnb-payment-bg-gold);
+        }
+      }
 
-    &--design-business-with-visa {
-      background: var(--dnb-payment-bg-business-with-visa);
-      color: var(--color-white);
-    }
+      // Shared styles for Saga Platinum and private cards with black-grey theme
+      &-saga-platinum,
+      &-private {
+        background-color: var(--dnb-payment-bg-black-grey);
+        color: var(--color-white);
+      }
 
-    &--design-sbanken-mastercard {
-      background: var(--sb-color-purple);
-      color: var(--color-white);
-    }
+      // Black (Elite) card design
+      &-black {
+        background-color: var(--color-black);
+        color: var(--color-white);
+      }
 
-    &--design-sbanken-visa {
-      background: var(--color-white);
-      color: var(--sb-color-text);
-    }
+      // Design for a business card without Visa support
+      &-business-no-visa {
+        background-color: var(--dnb-payment-bg-business-no-visa);
+        color: var(--color-white);
+      }
 
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
+      // Design for a business card with Visa support
+      &-business-with-visa {
+        background-color: var(--dnb-payment-bg-business-with-visa);
+        color: var(--color-white);
+      }
 
-      background: radial-gradient(
-        52.39% 52.39% at 50% 50%,
-        #f7f6e61f 0%,
-        #06060600 100%
-      );
-      border-radius: inherit;
-    }
+      // Sbanken-themed Mastercard with purple background
+      &-sbanken-mastercard {
+        background-color: var(--sb-color-purple);
+        color: var(--color-white);
+      }
 
-    &--design-sbanken-mastercard::after {
-      background: none;
+      // Sbanken-themed Visa card with a white background and custom text color.
+      &-sbanken-visa {
+        background-color: var(--color-white);
+        color: var(--sb-color-text);
+      }
     }
 
+    /*
+     * Primary container for card content (e.g., numbers, text, holder name).
+     * Ensures content stretches to fit the card while preserving relative positioning.
+     */
     &__content {
       display: flex;
       height: 100%;
@@ -160,164 +158,181 @@
       position: relative;
     }
 
-    &__wrapper {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-    }
-
     // In case of .dnb-spacing usage
     .dnb-spacing & .dnb-p {
       margin-bottom: 0 !important;
     }
 
-    &__holder {
-      font-weight: var(--font-weight-medium);
-      text-transform: uppercase;
-      text-align: left;
-      // opacity: 0.5;
-
-      &.dnb-p {
-        font-size: 0.625rem;
-      }
-    }
+    // Styling for the card number
+    &__numbers.dnb-p {
 
-    &__numbers {
-      font-size: 1.5rem !important;
-      font-weight: var(--font-weight-medium);
+      font-size: 1.375rem; // 22px
+      line-height: 1.143rem;
+      font-weight: var(--font-weight-regular);
     }
 
-    &__credit-type {
-      position: absolute;
-      bottom: 0;
-      right: 0;
+    // Card Type Text - Credit / Debit
+    &__type-text.dnb-p {
+      font-size: 0.938rem; // 15px
+      line-height: 1.188rem;
+      padding-top: 6px;
     }
 
-    &__bank-logo {
-      position: absolute;
-      top: 0;
-      left: 0;
+    /* Provider Icons Container
+     * Flex container to house provider logos (e.g., Visa, Mastercard, BankAxept).
+     * Includes a visual separator if two providers are present. */
+    &__providers {
+      display: flex;
+      align-items: center;
+      column-gap: 1rem;
+
+      // Adds divider between provider icons
+      .provider--separator {
+        width: 1px;
+        height: 26px;
+        background-color: currentcolor;
+        transform:scale(0.5, 1); // subpixel rendering (0.5px width is not supported on some browsers)
+      }
     }
 
-    &__product-type {
-      height: 38px;
-      position: absolute;
-      top: 0;
-      left: 70px;
-    }
+    // Positioning of Card Elements
+    &__top {
+      // Bank + Loyalty Logos
+      &__left {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: flex;
+        align-items: center;
+      }
 
-    &__bank-axept {
-      height: 45px;
-      position: absolute;
-      top: 0;
-      right: 0;
+      /*
+       * Normal mode: Card Type Text (Credit / Debit)
+       * Compact mode: Provider Icons
+       */
+      &__right {
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
     }
+    &__bottom {
+      /*
+       * Normal mode: Card Number
+       * Compact mode: Hidden
+       */
+      &__left {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+      }
 
-    &__credit {
-      position: absolute;
-      top: 6px;
-      right: 0;
+      /*
+       * Normal mode: Provider Icons
+       * Compact mode: Hidden
+       */
+      &__right {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+      }
     }
   }
 
-  &__blocking {
-    &__overlay {
-      svg path {
+  /*
+   * Overlay styling used for additional content or status displayed over the card element.
+   * It centers the content and adapts the overlay design
+   * based on the card's background theme (light or dark).
+   */
+  &__overlay {
+    svg {
+      width: 2rem;
+      height: 2rem;
+      shape-rendering: geometricprecision;
+      &.icon--fill path {
+        fill: currentcolor;
+      }
+      &.icon--stroke path {
         stroke: currentcolor;
       }
-
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      border-radius: inherit;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      background: linear-gradient(
-        184.55deg,
-        rgb(204 204 204 / 50%) 4.63%,
-        rgb(232 232 232 / 50%) 84.83%
-      );
     }
 
-    &__center {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &__content {
+      min-width: 6rem;
+      height: 6rem;
       padding: 1rem;
       display: flex;
-      align-items: center;
-      justify-content: center;
       flex-direction: column;
+      align-items: center;
+      gap: 0.667rem;
+      border-radius: inherit;
+      font-size: var(--font-size-basis);
+      line-height: var(--line-height-small);
 
-      background: var(--color-black-80);
-      color: var(--color-sand-yellow);
-      border-radius: 4px;
-    }
+      // cards with a light background use this overlay status
+      &--light {
+        background-color: var(--dnb-payment-overlay-bg-dark);
+        color: var(--color-white);
+      }
 
-    svg {
-      shape-rendering: geometricprecision;
+      // cards with a dark background use this overlay status
+      &--dark {
+        background-color: var(--dnb-payment-overlay-bg-light);
+        color: var(--color-black);
+      }
     }
   }
 
-  &.dnb-skeleton &__card__holder {
-    opacity: 1;
-  }
-
+  /* Compact mode styling for PaymentCard component
+   * This defines the styles and visual appearance of the card in its compact variant.
+   * The compact variant is designed to be more concise, with reduced height and adjusted layouts.
+   */
   &--compact &__card {
-    padding: 0;
-    height: 32.8mm;
-
-    border-radius: 12px 12px 0 0;
-    box-shadow: var(--shadow-default);
-
-    &__top {
-      position: absolute;
-      top: 4mm;
-      left: 6mm;
-      right: 6mm;
-    }
-
-    &__bottom {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-
-      height: 14mm;
-
-      background-color: var(--color-white);
-    }
+    height: 62px;
+    border-radius: var(--dnb-payment-border-radius) var(--dnb-payment-border-radius) 0 0;
 
     &__wrapper {
-      padding: 6px 22px;
-      color: var(--color-black-80);
+      height: auto;
     }
 
-    &__numbers {
-      font-size: var(--font-size-basis);
-    }
+    // Adjust the margin and height of the provider icons section
+    &__providers {
+      margin-top: 5px;
+      height: 1.375rem;
+      div, svg {
+        height: 100%;
+        width: auto;
+      }
 
-    &__credit-type {
-      top: 10px;
-      right: 4px;
-      bottom: auto;
+      // In compact mode with multiple providers, adjust margins and spacing
+      &--multiple {
+        margin-top: 7px;
+        height: 1rem;
+        column-gap: 0.5rem;
+        div, svg {
+          vertical-align: top;
+        }
+
+        // Define a fixed width for separators between provider icons
+        .provider--separator {
+          width: 1px;
+        }
+      }
     }
   }
-
-  &--compact &__blocking {
-    &__center {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-direction: row;
-
-      height: 100%;
-      width: 100%;
-      gap: var(--spacing-x-small);
-
-      background: rgb(0 0 0 / 73.9%);
-      border-radius: inherit;
+  &--compact &__overlay {
+    // In compact mode, hide overlay content, we only show opacity change if needed
+    &__content {
+      display: none;
     }
   }
 }

package/extensions/payment-card/utils/CardDesigns.d.ts

@@ -16,14 +16,15 @@ declare namespace Designs {
     export { sbankenMastercard };
 }
 export namespace defaultDesign {
-    let name: string;
-    let cardStyle: string;
-    let bankLogo: any;
-    let visa: any;
-    let mastercard: any;
-    let bankAxept: any;
-    let saga: any;
-    let privateBanking: any;
+    export let name: string;
+    export let cardStyle: string;
+    export let bankLogo: any;
+    export let visa: any;
+    export let mastercard: any;
+    export let bankAxept: any;
+    export let saga: any;
+    export let privateBanking: any;
+    export { visaDefault as backgroundImage };
 }
 export namespace pluss {
     let name_1: string;
@@ -42,6 +43,7 @@ export namespace pluss {
     export { saga_1 as saga };
     let privateBanking_1: any;
     export { privateBanking_1 as privateBanking };
+    export { visaPluss as backgroundImage };
 }
 export namespace young {
     let name_2: string;
@@ -60,7 +62,6 @@ export namespace young {
     export { saga_2 as saga };
     let privateBanking_2: any;
     export { privateBanking_2 as privateBanking };
-    export { ungImg as backgroundImage };
 }
 export namespace myFirst {
     let name_3: string;
@@ -117,6 +118,7 @@ export namespace gold {
     export { saga_5 as saga };
     let privateBanking_5: any;
     export { privateBanking_5 as privateBanking };
+    export { mastercardGold as backgroundImage };
 }
 export namespace saga {
     let name_6: string;
@@ -135,6 +137,7 @@ export namespace saga {
     export { saga_6 as saga };
     let privateBanking_6: any;
     export { privateBanking_6 as privateBanking };
+    export { visaSagaGold as backgroundImage };
 }
 export namespace sagaPlatinum {
     let name_7: string;
@@ -153,6 +156,7 @@ export namespace sagaPlatinum {
     export { saga_7 as saga };
     let privateBanking_7: any;
     export { privateBanking_7 as privateBanking };
+    export { visaSagaPlatinum as backgroundImage };
 }
 export namespace privateBanking {
     let name_8: string;
@@ -171,6 +175,7 @@ export namespace privateBanking {
     export { saga_8 as saga };
     let privateBanking_8: any;
     export { privateBanking_8 as privateBanking };
+    export { visaSagaPlatinum as backgroundImage };
 }
 export namespace mcBlack {
     let name_9: string;
@@ -189,6 +194,7 @@ export namespace mcBlack {
     export { saga_9 as saga };
     let privateBanking_9: any;
     export { privateBanking_9 as privateBanking };
+    export { visaSagaPlatinum as backgroundImage };
 }
 export namespace businessNoVisa {
     let name_10: string;
@@ -207,6 +213,7 @@ export namespace businessNoVisa {
     export { saga_10 as saga };
     let privateBanking_10: any;
     export { privateBanking_10 as privateBanking };
+    export { visaDefault as backgroundImage };
 }
 export namespace businessWithVisa {
     let name_11: string;
@@ -225,6 +232,7 @@ export namespace businessWithVisa {
     export { saga_11 as saga };
     let privateBanking_11: any;
     export { privateBanking_11 as privateBanking };
+    export { visaDefault as backgroundImage };
 }
 export namespace sbankenVisa {
     let name_12: string;
@@ -262,6 +270,10 @@ export namespace sbankenMastercard {
     let privateBanking_13: any;
     export { privateBanking_13 as privateBanking };
 }
-import { ungImg } from './backgrounds';
+import { visaDefault } from './backgrounds';
+import { visaPluss } from './backgrounds';
 import { myFirstImg } from './backgrounds';
 import { youthImg } from './backgrounds';
+import { mastercardGold } from './backgrounds';
+import { visaSagaGold } from './backgrounds';
+import { visaSagaPlatinum } from './backgrounds';