feat(PaymentCard): rename type Metalic to Metallic (#2226)

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.mdx

@@ -35,6 +35,8 @@ import { Accordion } from '@dnb/eufemia/src'
     - [FormRow](#formrow)
   - [Element changes](#element-changes)
     - [Paragraph](#paragraph)
+  - [Extension changes](#extension-changes)
+    - [PaymentCard](#paymentcard)
 
 </Accordion>
 
@@ -298,4 +300,11 @@ Removed `small` as prop. Use `size="small"` instead.
 
 1. Find the `small ` property and replace it with `size="small"`.
 
+## Extension changes
+
+### [PaymentCard](/uilib/extensions/payment-card/)
+
+1. `Type`'s value/option `Metalic` was renamed to `Metallic`. Find `Metalic` and replace with `Metallic`.
+2. `Type`'s value/option `BlackMetalic` was renamed to `BlackMetallic`. Find `BlackMetalic` and replace with `BlackMetallic`.
+
 _April, 20. 2023_

packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/CardProductsTable.js

@@ -71,5 +71,5 @@ const getProductVariant = (type, design) =>
 const getProductLogo = (bankLogo) =>
   bankLogo.cata({
     Colored: (color) => color,
-    Metalic: () => 'Metalic',
+    Metallic: () => 'Metallic',
   })

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

@@ -29,16 +29,16 @@ showTabs: true
 
 ## Card Design
 
-| Properties       | Type         | Description                                                                                                                                                                 |
-| ---------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `name`           | `string`     | _(required)_ string Name of design                                                                                                                                          |
-| `cardStyle`      | `string`     | _(required)_ css class. mainly to set background and color                                                                                                                  |
-| `bankLogo`       | `Union Type` | _(required)_ Union Type. import DNB from ./card/utils/Types to use. Can be DNB.Colored('HexValue') or DNB.Metalic                                                           |
-| `visa`           | `Union Type` | _(required)_ Union Type. import Visa from ./card/utils/Types to use. Can be Visa.Colored('HexValue') or Visa.Metalic                                                        |
-| `mastercard`     | `Union Type` | _(required)_ Union Type. import Mastercard from ./card/utils/Types to use. Can be Mastercard.Default, Mastercard.DefaultWhite Mastercard.Metalic or Mastercard.MetalicBlack |
-| `bankAxept`      | `Union Type` | _(required)_ Union Type. import BankAxept from ./card/utils/Types to use. Can be BankAxept.White or BankAxept.Black                                                         |
-| `saga`           | `Union Type` | _(required)_ Union Type. import Saga from ./card/utils/Types to use. Can be Saga.Gold, Saga.Platinum, Saga.VisaPlatinum, or Saga.None                                       |
-| `privateBanking` | `Union Type` | _(required)_ Union Type. import PB from ./card/utils/Types to use. Can be PB.Default, PB.Platinum or PB.None                                                                |
+| Properties       | Type         | Description                                                                                                                                                                   |
+| ---------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `name`           | `string`     | _(required)_ string Name of design                                                                                                                                            |
+| `cardStyle`      | `string`     | _(required)_ css class. mainly to set background and color                                                                                                                    |
+| `bankLogo`       | `Union Type` | _(required)_ Union Type. import DNB from ./card/utils/Types to use. Can be DNB.Colored('HexValue') or DNB.Metallic                                                            |
+| `visa`           | `Union Type` | _(required)_ Union Type. import Visa from ./card/utils/Types to use. Can be Visa.Colored('HexValue') or Visa.Metallic                                                         |
+| `mastercard`     | `Union Type` | _(required)_ Union Type. import Mastercard from ./card/utils/Types to use. Can be Mastercard.Default, Mastercard.DefaultWhite Mastercard.Metallic or Mastercard.MetallicBlack |
+| `bankAxept`      | `Union Type` | _(required)_ Union Type. import BankAxept from ./card/utils/Types to use. Can be BankAxept.White or BankAxept.Black                                                           |
+| `saga`           | `Union Type` | _(required)_ Union Type. import Saga from ./card/utils/Types to use. Can be Saga.Gold, Saga.Platinum, Saga.VisaPlatinum, or Saga.None                                         |
+| `privateBanking` | `Union Type` | _(required)_ Union Type. import PB from ./card/utils/Types to use. Can be PB.Default, PB.Platinum or PB.None                                                                  |
 
 ## List of designs
 
@@ -63,7 +63,7 @@ showTabs: true
 | ---------------- |
 | **DNB**          |
 | `Colored`        |
-| `Metalic`        |
+| `Metallic`       |
 | **Saga**         |
 | `Gold`           |
 | `Platinum`       |
@@ -76,8 +76,8 @@ showTabs: true
 | **Mastercard**   |
 | `Default`        |
 | `DefaultWhite`   |
-| `Metalic`        |
-| `BlackMetalic`   |
+| `Metallic`       |
+| `BlackMetallic`  |
 | **ProductType**  |
 | `BankAxept`      |
 | `Saga`           |
@@ -92,7 +92,7 @@ showTabs: true
 | `Black`          |
 | **Visa**         |
 | `Colored`        |
-| `Metalic`        |
+| `Metallic`       |
 | **Status**       |
 | `Expired`        |
 | `Blocked`        |

packages/dnb-eufemia/src/extensions/payment-card/icons/DNBMetalic.d.ts → packages/dnb-eufemia/src/extensions/payment-card/icons/DNBMetallic.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export interface DNBMetalicLogoSVGProps
+export interface DNBMetallicLogoSVGProps
   extends React.HTMLProps<HTMLElement> {
   /**
    * function fill() { [native code] }
@@ -9,5 +9,5 @@ export interface DNBMetalicLogoSVGProps
   height?: string;
   viewBox?: string;
 }
-declare const DNBMetalicLogoSVG: React.FC<DNBMetalicLogoSVGProps>;
-export default DNBMetalicLogoSVG;
+declare const DNBMetallicLogoSVG: React.FC<DNBMetallicLogoSVGProps>;
+export default DNBMetallicLogoSVG;

packages/dnb-eufemia/src/extensions/payment-card/icons/DNBMetalic.js → packages/dnb-eufemia/src/extensions/payment-card/icons/DNBMetallic.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const DNBMetalicLogoSVG = (props) => (
+const DNBMetallicLogoSVG = (props) => (
   <svg {...props} fill="none" xmlns="http://www.w3.org/2000/svg">
     <title>DNB logo</title>
     <path
@@ -31,17 +31,17 @@ const DNBMetalicLogoSVG = (props) => (
     </defs>
   </svg>
 )
-DNBMetalicLogoSVG.propTypes = {
+DNBMetallicLogoSVG.propTypes = {
   fill: PropTypes.string,
   width: PropTypes.string,
   height: PropTypes.string,
-  viewBox: PropTypes.string
+  viewBox: PropTypes.string,
 }
-DNBMetalicLogoSVG.defaultProps = {
+DNBMetallicLogoSVG.defaultProps = {
   fill: 'none',
   width: '56',
   height: '38',
-  viewBox: '0 0 56 38'
+  viewBox: '0 0 56 38',
 }
 
-export default DNBMetalicLogoSVG
+export default DNBMetallicLogoSVG

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface VisaMetallicSVGProps
+  extends React.HTMLProps<HTMLElement> {
+  width?: string;
+  height?: string;
+  viewBox?: string;
+}
+declare const VisaMetallicSVG: React.FC<VisaMetallicSVGProps>;
+export default VisaMetallicSVG;

packages/dnb-eufemia/src/extensions/payment-card/icons/VisaMetalic.js → packages/dnb-eufemia/src/extensions/payment-card/icons/VisaMetallic.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const VisaMetalicSVG = (props) => (
+const VisaMetallicSVG = (props) => (
   <svg {...props} fill="none" xmlns="http://www.w3.org/2000/svg">
-    <title>Visa Metalic</title>
+    <title>Visa Metallic</title>
     <path
       d="M53.5 43.2H51.6V50.9H53.5C55.9 50.9 57.2999 49.5 57.2999 47.1C57.2999 44.7 55.9 43.2 53.5 43.2ZM53.3999 50H52.5V43.9H53.3999C55.1999 43.9 56.2999 45 56.2999 46.9C56.2999 48.8 55.2999 50 53.3999 50ZM63.6 48.2C63.6 46.4 62.6 45.3 61 45.3C59.4 45.3 58.3999 46.5 58.3999 48.1C58.3999 49.8 59.5 50.9 61.2 50.9C62.2 50.9 63 50.5 63.5 49.7L62.7999 49.2C62.4999 49.7 62 50.1 61.2 50.1C60.3 50.1 59.3999 49.5 59.3999 48.3H63.6V48.2ZM61 46C61.9 46 62.5 46.6 62.6 47.6H59.2999C59.4999 46.6 60.1 46 61 46ZM67.6 45.3C66.8 45.3 66.1 45.7 65.7 46.3V43.2H64.7V50.9H65.5V49.8C65.9 50.6 66.6 51 67.5 51C69 51 70.1 49.8 70.1 48.2C70.1 46.4 69 45.3 67.6 45.3ZM67.3999 50.1C66.3999 50.1 65.6 49.2 65.6 48.1C65.6 46.9 66.3999 46.1 67.3999 46.1C68.3999 46.1 69.1 47 69.1 48.1C69.2 49.3 68.4999 50.1 67.3999 50.1ZM71.8999 44.5C72.2999 44.5 72.5 44.2 72.5 43.9C72.5 43.5 72.1999 43.3 71.8999 43.3C71.5999 43.3 71.2999 43.6 71.2999 43.9C71.1999 44.2 71.4999 44.5 71.8999 44.5ZM71.3999 50.9H72.3999V45.4H71.3999V50.9ZM76.2 50.1C75.6 50.1 75.3999 49.8 75.3999 49.3V46.1H76.7999V45.3H75.3999V43.6H74.3999V45.3H73.5V46.1H74.3999V49.3C74.3999 50.3 75 50.9 76 50.9C76.3 50.9 76.5999 50.9 76.7999 50.8V50C76.6999 50.1 76.4 50.1 76.2 50.1Z"
       fill="#B2B4B3"
@@ -84,15 +84,15 @@ const VisaMetalicSVG = (props) => (
     </defs>
   </svg>
 )
-VisaMetalicSVG.propTypes = {
+VisaMetallicSVG.propTypes = {
   width: PropTypes.string,
   height: PropTypes.string,
-  viewBox: PropTypes.string
+  viewBox: PropTypes.string,
 }
-VisaMetalicSVG.defaultProps = {
+VisaMetallicSVG.defaultProps = {
   width: '80',
   height: '54',
-  viewBox: '0 0 80 54'
+  viewBox: '0 0 80 54',
 }
 
-export default VisaMetalicSVG
+export default VisaMetallicSVG

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

@@ -2,20 +2,20 @@ import React from 'react'
 
 import BankAxept from './BankAxept'
 import DNB from './DNB'
-import DNBMetalic from './DNBMetalic'
+import DNBMetallic from './DNBMetallic'
 import Expired from './Clock'
 import Blocked from './Padlock'
 import MastercardDefault from './MastercardDefault'
-import MastercardMetalic from './MastercardMetalic'
-import MastercardMetalicBlack from './MastercardMetalicBlack'
+import MastercardMetallic from './MastercardMetallic'
+import MastercardMetallicBlack from './MastercardMetallicBlack'
 import Pluss from './Pluss'
 import PB from './PB'
 import PBPlatinum from './PBPlatinum'
 import SagaGold from './SagaGold'
 import SagaPlatinum from './SagaPlatinum'
 import SagaVisaPlatinum from './SagaVisaPlatinum'
 import VisaDefault from './VisaDefault'
-import VisaMetalic from './VisaMetalic'
+import VisaMetallic from './VisaMetallic'
 
 const BankLogo = ({ logoType, height }) =>
   logoType.cata({
@@ -26,12 +26,12 @@ const BankLogo = ({ logoType, height }) =>
         className="dnb-payment-card__card__bank-logo"
       />
     ),
-    Metalic: () => (
-      <DNBMetalic
+    Metallic: () => (
+      <DNBMetallic
         height={height}
         className="dnb-payment-card__card__bank-logo"
       />
-    )
+    ),
   })
 
 const ProductLogo = ({ productType, cardDesign }) => {
@@ -40,23 +40,23 @@ const ProductLogo = ({ productType, cardDesign }) => {
     BankAxept: () =>
       cardDesign.bankAxept.cata({
         White: () => <BankAxept className={id} fill="#ffffff" />,
-        Black: () => <BankAxept className={id} fill="#757575" />
+        Black: () => <BankAxept className={id} fill="#757575" />,
       }),
     Saga: () =>
       cardDesign.saga.cata({
         Gold: () => <SagaGold className={id} />,
         Platinum: () => <SagaPlatinum className={id} />,
         VisaPlatinum: () => <SagaVisaPlatinum className={id} />,
-        None: () => null
+        None: () => null,
       }),
     Pluss: () => <Pluss className={id} fill="#A5E1D2" />,
     PrivateBanking: () =>
       cardDesign.privateBanking.cata({
         Default: () => <PB className={id} />,
         Platinum: () => <PBPlatinum className={id} />,
-        None: () => null
+        None: () => null,
       }),
-    None: () => null
+    None: () => null,
   })
 }
 
@@ -80,18 +80,18 @@ const TypeLogo = ({ cardType, cardDesign }) => {
     Visa: () =>
       cardDesign.visa.cata({
         Colored: (color) => <VisaDefault className={id} fill={color} />,
-        Metalic: () => <VisaMetalic className={id} />
+        Metallic: () => <VisaMetallic className={id} />,
       }),
     Mastercard: () =>
       cardDesign.mastercard.cata({
         Default: () => <MastercardDefault className={id} />,
         DefaultWhite: () => (
           <MastercardDefault className={id} textFill="#ffffff" />
         ),
-        Metalic: () => <MastercardMetalic className={id} />,
-        BlackMetalic: () => <MastercardMetalicBlack className={id} />
+        Metallic: () => <MastercardMetallic className={id} />,
+        BlackMetallic: () => <MastercardMetallicBlack className={id} />,
       }),
-    None: () => null
+    None: () => null,
   })
 }
 

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

@@ -103,9 +103,9 @@ const sagaPlatinum = {
 const privateBanking = {
   name: 'Private Banking',
   cardStyle: 'card--design-private',
-  bankLogo: DNB.Metalic,
-  visa: Visa.Metalic,
-  mastercard: Mastercard.Metalic,
+  bankLogo: DNB.Metallic,
+  visa: Visa.Metallic,
+  mastercard: Mastercard.Metallic,
   bankAxept: BankAxept.White,
   saga: Saga.None,
   privateBanking: PB.Default,
@@ -115,8 +115,8 @@ const mcBlack = {
   name: 'Mastercard Black',
   cardStyle: 'card--design-black',
   bankLogo: DNB.Colored(properties['--color-black-80']),
-  visa: Visa.Metalic,
-  mastercard: Mastercard.BlackMetalic,
+  visa: Visa.Metallic,
+  mastercard: Mastercard.BlackMetallic,
   bankAxept: BankAxept.White,
   saga: Saga.None,
   privateBanking: PB.None,

packages/dnb-eufemia/src/extensions/payment-card/utils/Types.js

@@ -4,19 +4,19 @@ const daggy = createDaggy()
 
 const DNB = daggy.taggedSum('DNB', {
   Colored: ['color'],
-  Metalic: [],
+  Metallic: [],
 })
 
 const Visa = daggy.taggedSum('Visa', {
   Colored: ['color'],
-  Metalic: [],
+  Metallic: [],
 })
 
 const Mastercard = daggy.taggedSum('Mastercard', {
   Default: [],
   DefaultWhite: [],
-  Metalic: [],
-  BlackMetalic: [],
+  Metallic: [],
+  BlackMetallic: [],
 })
 
 const CardType = daggy.taggedSum('CardType', {