[PLAY-1773] Rails input masking: credit_card and cvv (#4267)

**What does this PR do?**
- Continues work in
[PLAY-1772](https://runway.powerhrg.com/backlog_items/PLAY-1772) and
PLAY-1866.
([PLAY-1773](https://runway.powerhrg.com/backlog_items/PLAY-1772)).
- Adds credit_card and cvv mask
- Make mask prop an enum

**Screenshots:** 
![Screenshot 2025-02-12 at 9 08
17 AM](https://github.com/user-attachments/assets/3e7bcc2b-ef37-4d6c-92a6-40dfc44e4194)

**How to test?**
1. Go to /kits/text_input/rails#mask
2. Type in the Credit Card and CVV text inputs
3. They should be masked as you type

#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.

Author: kangaree

playbook/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb

@@ -27,6 +27,20 @@
     placeholder: "123-45-6789"
   }) %>
 
+  <%= pb_rails("text_input", props: {
+    label: "Credit Card",
+    mask: "credit_card",
+    margin_bottom: "md",
+    placeholder: "1234 5678 9012 3456"
+  }) %>
+
+  <%= pb_rails("text_input", props: {
+    label: "CVV",
+    mask: "cvv",
+    margin_bottom: "md",
+    placeholder: "123"
+  }) %>
+
   <%= pb_rails("title" , props: {
     text: "Hidden Input Under The Hood",
     padding_bottom: "sm"

playbook/app/pb_kits/playbook/pb_text_input/index.js

@@ -27,6 +27,8 @@ export default class PbTextInput extends PbEnhancedElement {
       ssn: 'ssn',
       postal_code: 'postalCode',
       zip_code: 'zipCode',
+      credit_card: 'creditCard',
+      cvv: 'cvv',
     }[maskType];
 
     if (maskKey && INPUTMASKS[maskKey]) {
@@ -45,6 +47,9 @@ export default class PbTextInput extends PbEnhancedElement {
         case "currency":
           sanitizedInput.value = sanitizeCurrency(formattedValue);
           break;
+        case "credit_card":
+          sanitizedInput.value = sanitizeCreditCard(formattedValue);
+          break;
         default:
           sanitizedInput.value = formattedValue;
       }
@@ -63,6 +68,10 @@ function sanitizeCurrency(input) {
   return input.replace(/[$,]/g, "");
 }
 
+function sanitizeCreditCard(input) {
+  return input.replace(/\D/g, ""); 
+}
+
 function setCursorPosition(inputElement, cursorPosition, rawValue, formattedValue) {
   const difference = formattedValue.length - rawValue.length;
   const newPosition = Math.max(0, cursorPosition + difference);

playbook/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -4,13 +4,15 @@
 module Playbook
   module PbTextInput
     class TextInput < Playbook::KitBase
-      VALID_MASKS = %w[currency zipCode postalCode ssn].freeze
+      VALID_MASKS = %w[currency zip_code postal_code ssn credit_card cvv].freeze
 
       MASK_PATTERNS = {
         "currency" => '^\$\d{1,3}(?:,\d{3})*(?:\.\d{2})?$',
         "zip_code" => '\d{5}',
         "postal_code" => '\d{5}-\d{4}',
         "ssn" => '\d{3}-\d{2}-\d{4}',
+        "credit_card" => '\d{4} \d{4} \d{4} \d{4}',
+        "cvv" => '\d{3,4}',
       }.freeze
 
       prop :autocomplete, type: Playbook::Props::Boolean,
@@ -34,7 +36,8 @@ class TextInput < Playbook::KitBase
       prop :add_on, type: Playbook::Props::NestedProps,
                     nested_kit: Playbook::PbTextInput::AddOn
 
-      prop :mask, type: Playbook::Props::String,
+      prop :mask, type: Playbook::Props::Enum,
+                  values: ["currency", "zip_code", "postal_code", "ssn", "credit_card", "cvv", nil],
                   default: nil
 
       def classname