MAGETWO-39881: [Tech Debt] Enable CC auto-detection for Braintree

- auto detection like the authorize.net style in one page checkout

Author: Cristian Partica

app/code/Magento/Braintree/view/frontend/web/template/payment/cc-form.html

@@ -43,11 +43,27 @@
             <span><!-- ko text: $t('Credit Card Type')--><!-- /ko --></span>
         </label>
         <div class="control">
-            <select name="payment[cc_type]" class="select"
-                data-bind="attr: {id: getCode() + '_cc_type', 'data-container': getCode() + '-cc-type', 'data-validate': JSON.stringify({required:true, 'validate-cc-type-select':'#' + getCode() + '_cc_number'})},
-                mageInit: {creditCardType:{creditCardTypeContainer:'#' + getCode() + '_cc_type_ss_div'}},
-                enable: true, options: getCcAvailableTypesValues(), optionsValue: 'value', optionsText: 'type', optionsCaption: $t('--Please Select--'), value: creditCardType">
-            </select>
+            <ul class="credit-card-types">
+                <!-- ko foreach: {data: getCcAvailableTypesValues(), as: 'item'} -->
+                <li class="item" data-bind="css: {_active: $parent.selectedCardType() == item.value} ">
+                    <!--ko if: $parent.getIcons(item.value) -->
+                    <img data-bind="attr: {
+                        'src': $parent.getIcons(item.value).url,
+                        'alt': item.type,
+                        'width': $parent.getIcons(item.value).width,
+                        'height': $parent.getIcons(item.value).height
+                        }">
+                    <!--/ko-->
+                </li>
+                <!--/ko-->
+            </ul>
+            <input type="hidden"
+                   name="payment[cc_type]"
+                   class="input-text"
+                   value=""
+                   data-bind="attr: {id: getCode() + '_cc_type', 'data-container': getCode() + '-cc-type'},
+                   value: creditCardType
+                   ">
         </div>
     </div>
     <div class="field number required" data-bind="visible: isCcFormShown">