fix: Allow to set icon color for payments icons (#76)

* build(icons): avoid to exclude colors from payments

while the code will work as expected (branded payments like MasterCard won't be affected by the
color)the type definition is wrong as it will "allow color" for all icons

* feat(icons): run npm generate to allow color on payments

* docs(release): add release notes

* chore(icons): allow branded icons to be separated to avoid Color prop

Author: duranmla

assets/icons/payment/american-express.svg assets/icons/brands/american-express.svgassets/icons/payment/american-express.svg renamed to assets/icons/brands/american-express.svg

@@ -16,6 +16,7 @@ import { TitleCard } from './components/TitleCard';
 
 #### 🐛 Bug Fixes
 - `Select` to have cursor pointer not-allowed
+- `Icons` payments to support color change
 - `InlineSpinner` to behave closer to other icons when placed alongside text
 
 

assets/icons/payment/apple-pay.svg assets/icons/brands/apple-pay.svgassets/icons/payment/apple-pay.svg renamed to assets/icons/brands/apple-pay.svg

@@ -13,7 +13,7 @@
         "build:esm": "ttsc --target es6 --module esnext --outDir lib/esm",
         "build:documentation": "docz build",
         "generate": "npm run generate:icons",
-        "generate:icons": "node ./scripts/generate-icons assets/icons -r -o src/icons --exclude-color-prop **/payment/** **/flags/** --exclude-suffix **/flags/**",
+        "generate:icons": "node ./scripts/generate-icons assets/icons -r -o src/icons --exclude-color-prop **/brands/** **/flags/** --exclude-suffix **/flags/**",
         "prettier": "pretty-quick --staged",
         "start": "docz dev",
         "test": "jest",

assets/icons/payment/google-pay.svg assets/icons/brands/google-pay.svgassets/icons/payment/google-pay.svg renamed to assets/icons/brands/google-pay.svg

@@ -0,0 +1,26 @@
+// DO NOT EDIT. This file was generated by running `npm run generate`.;
+import * as React from 'react';
+import { get } from '../../utils/themeGet';
+import { IconProps } from '../IconProps';
+type Props = Omit<IconProps, 'color'>;
+
+const AmericanExpressIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps) => {
+    const sizePx = Number.isFinite(size as number)
+        ? size
+        : get(`iconSizes.${size}`)(props) || get('iconSizes.medium')(props);
+    return (
+        <svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24">
+            <g fill="none" fillRule="evenodd">
+                <path fill="#016FD0" d="M20 4v16H4V4.007z" />
+                <path
+                    d="M9.756 12.64l.284.372.293-.372H20v2.31s-.307.196-.598.199h-5.321l-.32-.396v.396h-1.05v-.675s-.144.094-.454.094H11.9v.58h-1.589l-.284-.379-.288.38H7.108V12.64h2.648zm2.39.31h-1.034v1.878h.48v-.593h.493c.417 0 .733-.222.733-.654 0-.357-.248-.631-.672-.631zm7.816 0h-.911c-.547 0-.735.29-.735.59 0 .339.205.563.573.563h.424c.138 0 .198.08.198.16 0 .082-.06.157-.198.157h-.937v.407h.997c.413 0 .611-.269.611-.597 0-.306-.178-.54-.588-.54h-.444a.163.163 0 01-.172-.163c0-.076.046-.155.197-.155h.788l.197-.423zm-1.718 0h-.911c-.547 0-.735.29-.735.59 0 .339.205.563.573.563h.424c.138 0 .198.08.198.16 0 .082-.06.157-.198.157h-.937v.407h.997c.413 0 .61-.269.61-.597 0-.306-.177-.54-.587-.54h-.444a.163.163 0 01-.172-.163c0-.076.046-.155.197-.155h.788l.197-.423zm-1.803 0h-1.528v1.877h1.528v-.407h-1.055v-.334h1.025v-.395h-1.025v-.322h1.055v-.42zm-2.378 0H13.02v1.877h.468v-.667h.197l.562.667h.572l-.616-.691a.571.571 0 00.513-.577c0-.396-.309-.61-.654-.61zm-4.476 0h-.59l.762.95-.744.927h.581l.43-.578.44.578h.59l-.745-.939.751-.939h-.566l-.455.588-.454-.588zm-.631 0H7.428v1.877h1.528v-.407H7.9v-.334h1.03v-.395h-1.03v-.322h1.055v-.42zm3.155.424c.135 0 .231.083.231.217 0 .125-.096.216-.232.216h-.518v-.433h.52zm1.913-.005c.129 0 .222.101.222.198 0 .125-.12.198-.215.198h-.542v-.396h.535zM5.646 9.354l.339.782v-.782h1.283l.202.565.195-.565h5.763v.284s.303-.284.8-.284l1.87.006.333.772v-.778h1.074l.296.443v-.443h1.084v2.508H17.8l-.283-.445v.445h-1.579l-.158-.395h-.425l-.156.395h-1.07c-.429 0-.702-.278-.702-.278v.278h-1.614l-.32-.395v.395H5.493l-.159-.395h-.423l-.157.395H4V10.75l.613-1.396h1.033zm4.837.309H8.956v1.878h1.527v-.408H9.43v-.334h1.03v-.395h-1.03v-.321h1.054v-.42zm1.313 0h-1.042v1.878h.469v-.667h.197l.56.667h.573l-.616-.692a.571.571 0 00.514-.577c0-.395-.31-.609-.655-.609zm5.54 0h-.595v1.878h.469V10.33l.779 1.21h.576V9.664h-.468v1.18l-.76-1.18zm-4.216 0h-.478v1.878h.478V9.663zm1.675 0h-.517c-.63 0-.93.396-.93.946 0 .537.303.932.802.932h.103l.197-.41h-.123c-.298 0-.505-.153-.505-.517 0-.306.18-.506.437-.506h.536v-.445zm1.087 0h-.61l-.806 1.878h.525l.148-.376h.864l.148.376h.536l-.805-1.878zm-7.246 0h-.74l-.423 1.213-.433-1.21-.745-.003v1.878h.468v-1.384l.498 1.384h.41l.496-1.384v1.384h.469V9.663zm-3.201 0h-.61l-.806 1.878h.524l.149-.376h.864l.148.376h.536l-.805-1.878zm10.135.437l.263.657h-.527l.264-.657zm-10.448 0l.264.657h-.528l.264-.657zm6.636-.017c.128 0 .221.1.221.198 0 .125-.12.197-.214.197h-.542v-.395h.535z"
+                    fill="#FFF"
+                    fillRule="nonzero"
+                />
+            </g>
+        </svg>
+    );
+};
+
+AmericanExpressIcon.defaultProps = {};
+export default AmericanExpressIcon;

assets/icons/payment/mastercard.svg assets/icons/brands/mastercard.svgassets/icons/payment/mastercard.svg renamed to assets/icons/brands/mastercard.svg

@@ -0,0 +1,23 @@
+// DO NOT EDIT. This file was generated by running `npm run generate`.;
+import * as React from 'react';
+import { get } from '../../utils/themeGet';
+import { IconProps } from '../IconProps';
+type Props = Omit<IconProps, 'color'>;
+
+const ApplePayIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps) => {
+    const sizePx = Number.isFinite(size as number)
+        ? size
+        : get(`iconSizes.${size}`)(props) || get('iconSizes.medium')(props);
+    return (
+        <svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24">
+            <path
+                d="M22.5 4.5A1.5 1.5 0 0124 6v12a1.5 1.5 0 01-1.5 1.5h-21A1.5 1.5 0 010 18V6a1.5 1.5 0 011.5-1.5h21zm0 .5h-21a1 1 0 00-1 1v12a1 1 0 001 1h21a1 1 0 001-1V6a1 1 0 00-1-1zm-4.521 5.485l.992 3.167h.019l.992-3.167h.857l-1.477 4.1c-.338.94-.726 1.249-1.545 1.249-.064 0-.27-.008-.327-.023v-.643c.053.008.18.015.248.015.372 0 .583-.156.71-.557l.076-.238-1.425-3.903h.88zM6.59 10.009c.188.015.73.072 1.076.58-.029.02-.643.371-.635 1.107.007.88.78 1.173.787 1.18-.007.022-.123.415-.404.823-.246.357-.499.708-.904.715-.39.007-.52-.23-.968-.23-.448 0-.592.223-.96.237-.39.014-.687-.38-.933-.737-.505-.722-.888-2.037-.368-2.924a1.43 1.43 0 011.214-.73c.383-.006.737.251.968.251.231 0 .643-.3 1.127-.272zm8.594.427c.963 0 1.59.499 1.59 1.272v2.668h-.778v-.643h-.019c-.221.42-.71.684-1.24.684-.781 0-1.326-.46-1.326-1.152 0-.688.53-1.082 1.507-1.141l1.048-.063v-.298c0-.434-.29-.672-.804-.672-.425 0-.733.215-.797.546h-.759c.023-.695.684-1.2 1.578-1.2zm-3.767-1.423c1.052 0 1.785.717 1.785 1.762 0 1.048-.748 1.769-1.811 1.769h-1.166v1.832h-.841V9.013h2.033zm4.55 3.605l-.937.06c-.526.033-.8.227-.8.565 0 .327.286.539.733.539.57 0 1.003-.36 1.003-.863v-.3zm-4.772-2.903h-.97v2.13h.966c.733 0 1.15-.39 1.15-1.067 0-.676-.417-1.063-1.146-1.063zM6.595 8.604c.036.344-.102.681-.305.932-.21.244-.543.437-.876.409-.044-.33.123-.681.311-.896.21-.251.573-.43.87-.445z"
+                fill="#000"
+                fillRule="nonzero"
+            />
+        </svg>
+    );
+};
+
+ApplePayIcon.defaultProps = {};
+export default ApplePayIcon;