From 57cc8a19e039881052503981206fb3c578ba09a4 Mon Sep 17 00:00:00 2001
From: Nick Amantia <92755007+nickamantia@users.noreply.github.com>
Date: Thu, 24 Oct 2024 12:30:06 -0400
Subject: [PATCH 01/10] Dropdown ClassName Fix (#3845)

**What does this PR do?** A clear and concise description with your
runway ticket url.

Fixes dropdown Classname


**Screenshots:** Screenshots to visualize your addition/change


**How to test?** Steps to confirm the desired behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See addition/change


#### Checklist:
- [ ] **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.
- [ ] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
- [ ] **TESTS** I have added test coverage to my code.
---
 playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.scss  | 8 ++++----
 playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx   | 4 +---
 playbook/app/pb_kits/playbook/pb_dropdown/dropdown.rb     | 4 ++--
 .../app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx    | 2 +-
 4 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.scss b/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.scss
index 05b26b4b07..f769bd112a 100644
--- a/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.scss
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.scss
@@ -9,7 +9,7 @@
 
 @import "./scss_partials/dropdown_animation";
 
-.pb_dropdown {
+[class*="pb_dropdown"] {
   .dropdown_wrapper {
     [class*="dropdown_trigger_wrapper"] {
       @include pb_body;
@@ -131,7 +131,7 @@
     }
   }
 
-  &.separators_hidden {
+  &[class*="separators_hidden"] {
     .dropdown_wrapper {
       .pb_dropdown_container {
 
@@ -142,7 +142,7 @@
     }
   }
 
-  &.subtle {
+  &[class*="subtle"] {
     .dropdown_wrapper {
       .pb_dropdown_container {
         
@@ -178,7 +178,7 @@
       }
     }
   
-    &.separators_hidden {
+    &[class*="separators_hidden"] {
       .dropdown_wrapper {
         .pb_dropdown_container {
           [class*="pb_dropdown_option"]:first-child {
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx b/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx
index 28af6eb76a..13af9cb3c5 100644
--- a/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx
@@ -74,10 +74,8 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
     const htmlProps = buildHtmlProps(htmlOptions);
     const separatorsClass = separators ? '' : 'separators_hidden'
     const classes = classnames(
-        buildCss("pb_dropdown"),
+        buildCss("pb_dropdown", variant, separatorsClass),
         globalProps(props),
-        variant,
-        separatorsClass,
         className
     );
 
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.rb b/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.rb
index 30e6cbd2f5..422e7824e2 100644
--- a/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.rb
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.rb
@@ -24,7 +24,7 @@ def data
       end
 
       def classname
-        generate_classname("pb_dropdown", variant, separators_class, separator: " ")
+        generate_classname("pb_dropdown", variant, separators_class)
       end
 
     private
@@ -38,7 +38,7 @@ def input_default_value
       end
 
       def separators_class
-        separators ? "" : "separators_hidden"
+        separators ? nil : "separators_hidden"
       end
 
       def options_with_blank
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx b/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx
index 58e114d1a6..2ea0553a0e 100644
--- a/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx
+++ b/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx
@@ -50,7 +50,7 @@ test('generated default kit and classname', () => {
 
   const kit = screen.getByTestId(testId)
   expect(kit).toBeInTheDocument()
-  expect(kit).toHaveClass('pb_dropdown')
+  expect(kit).toHaveClass('pb_dropdown_default')
 })
 
 test('generated default Trigger and Container when none passed in', () => {

From 49bb02f9acc688117d375b3e3dcad5fe4c73dc46 Mon Sep 17 00:00:00 2001
From: Nida Ghuman <nidaqg@gmail.com>
Date: Thu, 24 Oct 2024 13:36:39 -0400
Subject: [PATCH 02/10] Version Bump 14.6.2 (#3844)

---
 playbook-website/Gemfile.lock    | 2 +-
 playbook/Gemfile.lock            | 2 +-
 playbook/lib/playbook/version.rb | 4 ++--
 playbook/package.json            | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/playbook-website/Gemfile.lock b/playbook-website/Gemfile.lock
index dde6ef761d..884c2fb3af 100644
--- a/playbook-website/Gemfile.lock
+++ b/playbook-website/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: ../playbook
   specs:
-    playbook_ui (14.6.0)
+    playbook_ui (14.6.2)
       actionpack (>= 5.2.4.5)
       actionview (>= 5.2.4.5)
       activesupport (>= 5.2.4.5)
diff --git a/playbook/Gemfile.lock b/playbook/Gemfile.lock
index 98fa51d2da..b644f93b20 100644
--- a/playbook/Gemfile.lock
+++ b/playbook/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    playbook_ui (14.6.0)
+    playbook_ui (14.6.2)
       actionpack (>= 5.2.4.5)
       actionview (>= 5.2.4.5)
       activesupport (>= 5.2.4.5)
diff --git a/playbook/lib/playbook/version.rb b/playbook/lib/playbook/version.rb
index 97fbbe200c..1d1954ad9f 100644
--- a/playbook/lib/playbook/version.rb
+++ b/playbook/lib/playbook/version.rb
@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "14.5.0"
-  VERSION = "14.6.0"
+  PREVIOUS_VERSION = "14.6.1"
+  VERSION = "14.6.2"
 end
diff --git a/playbook/package.json b/playbook/package.json
index bf8236bca2..2af3422d19 100644
--- a/playbook/package.json
+++ b/playbook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "playbook-ui",
-  "version": "14.6.0",
+  "version": "14.6.2",
   "description": "Nitro's Design System",
   "main": "./dist/playbook.js",
   "types": "./dist/types/index.d.ts",

From ee029e2feb5d05b74fe5c8ef20697a0be5a684b3 Mon Sep 17 00:00:00 2001
From: Ben Langfeld <blangfeld@powerhrg.com>
Date: Thu, 24 Oct 2024 13:43:27 -0400
Subject: [PATCH 03/10] Update Sentry DSNs (#3843)

See https://github.com/powerhome/software/pull/896
---
 playbook-website/config/deploy/production/secrets.yaml | 8 ++++----
 playbook-website/config/deploy/prs/secrets.yaml        | 8 ++++----
 playbook-website/config/deploy/staging/secrets.yaml    | 8 ++++----
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/playbook-website/config/deploy/production/secrets.yaml b/playbook-website/config/deploy/production/secrets.yaml
index f11748c1aa..0754f061f0 100644
--- a/playbook-website/config/deploy/production/secrets.yaml
+++ b/playbook-website/config/deploy/production/secrets.yaml
@@ -1,6 +1,6 @@
 appConfig:
     secretKeyBase: ENC[AES256_GCM,data:pTc2zofEnukd275BCaIpHOM5LokYsaYdgyGPHH6tggclP8Fj2S3/s7UREfDDuNZdAWAelmfWj3AY6xhtmdNRXt0F1UDvrNw0aCDAUqQK/jfHvgCtPQ2ncdZdpoUeEzmTaHUu3JVCphrCBFWxYrSvQg5qfx/docSiGR/PtaWTgOA=,iv:NwUXrRidkh5gT0E90h8CH9qtddboQnd2uvQfPXVkfM0=,tag:vJ5vPuSFeiRc+kDX5tY3Jg==,type:str]
-    sentry_dsn: ENC[AES256_GCM,data:pnb9JEfwZ0wCe+eh1CChiKiYAyyMeRtMvJEy9HyY9HFyleFB336Q6nVFx1D74LSxgNbrZiBqg/aA1ZysYCIDRciN6LOMlFAn5AAbMhpYcdNbLQ==,iv:j8l3ISTxrLVF21VRTDkqcmxeMt8jPrZDzDW9rHZ84lc=,tag:eMnHnxYQ+uAIhba0bDNuAA==,type:str]
+    sentry_dsn: ENC[AES256_GCM,data:30XIW9Gw0dniLDeHEzyjrWtWY5TtkjcjkSlAPg5J84QaYeKaKYOZZClfYj3nARyHDj3ryyxYYzMusfLvXPrIXoZUzP9o+xSUnyCHaWL/ZEqReB+7Dg==,iv:6sT6Qs/lkE+vZVGDkEG8E7e8cpe0Z4dLe5lF+NRpVL0=,tag:4Kd3Rp8Kkr2baGQOo8JJ9g==,type:str]
     open_ai: ENC[AES256_GCM,data:He7ruscMUMlif05pZhA7f0/rjVt1oG8qzJKGXO6SxHVKZ5t062dD3covgJAGqjCh9aH4wcjCS2xyhBNJWbqjcLhrYsLHuZB4URLfA1CyhJa+maReOCOH88vTutFdIYY=,iv:cZBzbIWxtp+sq3mcE+YGeHeALlSADsU7uXgmKgbmQc8=,tag:a09iJDiJRQ5ImhndwPeYkA==,type:str]
 database:
     passwords:
@@ -35,8 +35,8 @@ sops:
     azure_kv: []
     hc_vault: []
     age: []
-    lastmodified: "2024-10-09T16:27:54Z"
-    mac: ENC[AES256_GCM,data:XZUMDOE+3t8dqAGGi1kZa7JCeC4yHKtBLKMAptq9rDfVqu+j8jjQpN6GuoHarhCSNmo14gOeN619YwSDpowgqY1WTv4LSRMBy2/zZfyd+dIfAnDpvIOMAB2nFj6QoAzRRZjR7j54/oXLJUaySyVB6Wfe8gz4JXBwkaXS2qKDr6Q=,iv:Q05Ig42Jcdx8TOJImzv2OVIRhkKAloE+GSPCKP/OC0s=,tag:Ib3otL+28qidtoYGWqXxYA==,type:str]
+    lastmodified: "2024-10-23T17:00:12Z"
+    mac: ENC[AES256_GCM,data:1c0jrxXg2CJpl4Z4mC+I/vL/yJo0gZDVFPNqwk4nYX2iRiCXJL+N+V+ti07Ml1W+4ZoHsGZSC9dF78VZ6Josok3QL2Xtthp7PySkvLZyAqhWY0m5dv6DNaBGKkqVTqcPEp0AgMlK9+1a7DnhOpSZX/R2RsiuxHsJ8LkNsyroPWM=,iv:wRR+AsB11L2r0zPi92QPE6j19GkkrpcMOv7KsbMM5s4=,tag:dScA92dGzuuzRJ64ciXzrQ==,type:str]
     pgp: []
     unencrypted_suffix: _unencrypted
-    version: 3.8.1
+    version: 3.9.1
diff --git a/playbook-website/config/deploy/prs/secrets.yaml b/playbook-website/config/deploy/prs/secrets.yaml
index 44cb2f815e..e1c06fe367 100644
--- a/playbook-website/config/deploy/prs/secrets.yaml
+++ b/playbook-website/config/deploy/prs/secrets.yaml
@@ -1,6 +1,6 @@
 appConfig:
     secretKeyBase: ENC[AES256_GCM,data:tX9TTqw+teUH3ugGOXIfCMSE1fofM8YBfei2cXLB8Wbmsxp+bsoIgByMtgAbyHzov73P2PaJhQWWo/fG2W7Zj8T0gQ5BcK9mVFUkbt/+SmQpbbprLeIpauN4Gar2QWzyzJPIVEUopf3gdEERx3a+2rbMotJ4rB8Xfvv9OO4sOy4=,iv:H7nM7+ERPsNpehyuaAXSotrG8YCMhL1VSNAmFggs+Q4=,tag:eE+MuzvnCuQ6XKAKMMkrsA==,type:str]
-    sentry_dsn: ENC[AES256_GCM,data:9k5OGZqUcLote0IAJt7GJBsDxN3iJxoVtfPn9RKYfV1KZzNNWyeTZKC/PmjdjKotNbXzLPUSIPbtV8bk2DmttOwQr/r0xbnaTcRT2CWh/4XwVA==,iv:qML16zZMGBSO9nz7kSihlvn5uLj1s+RDSSqOb1jivGw=,tag:XvsrAuIAgAboayg2ZN1KZQ==,type:str]
+    sentry_dsn: ENC[AES256_GCM,data:v111U+PNOrc28dbLZmpk3ye0EdSpmQtt8HnFxAIidGOkWqlOgdkJzCm05crcLi4i6vHwp9cmXHe/gPPNZJbS45SEs/w8JJheAyA5iBZTLBMqQmTXYg==,iv:Fr0AYhTRJlJxEOVe1bUccoIClEnchTgNJvb6OHCuNsE=,tag:VRAaBIWgvfck6bIzwQTFSw==,type:str]
     open_ai: ENC[AES256_GCM,data:ewKDrouP0ZuMNAr19DvqBIzYdRInruWH7GxPX2ZH79DVJkT53qLFqzQMIBScqai40WXQmFLNicLnnbHVK+Xcv0tq/xBHtS7BANIwa5XJnWo56jYR3mOdbAcw+ZNFrks=,iv:c5veWRGGydflJ38TFf56ei9GI0tCnE24TLxJGFHscdE=,tag:rGLKDJesBs5JTNt83dsmoA==,type:str]
 database:
     passwords:
@@ -35,8 +35,8 @@ sops:
     azure_kv: []
     hc_vault: []
     age: []
-    lastmodified: "2024-10-09T16:20:19Z"
-    mac: ENC[AES256_GCM,data:qG/8X0ZyqRkCAaQvxqghiYPmPsqhRoq7WAeh8MvkzfAdYWuEp3UIcOqG/CYs77A9770537CYearWkuskXRvYxDyTHdMasqyvayxxl3INwkZgqWWY9fcePLS76FL0nXq8jKz4rQg39148PgeYbYEQuz72wq6CmlXRLj6jg1cyAJw=,iv:24lVuaQcM+GyKg8A8+ek462zm9rXj/D7B5tli6hxJF4=,tag:mX/8OUwt6Mb7dn/Tmx8VkA==,type:str]
+    lastmodified: "2024-10-23T17:00:27Z"
+    mac: ENC[AES256_GCM,data:iaQDM4Pzl/nUcwMy07k3qbrupwR2rAiQH+N060upYycShO2hKTeuBXIMrI13HSu+zmi/Bfttw/1LC/hHa3O7vDXw6SEUrRVsAyS4BneO53WmSiJZei7ilBAIgCIdUMdfAtw+S3m7Tb4pdOow+vU1vrq5NDFxU1qNwhza86OlpDc=,iv:4g1EfhnEy6QSv5bGvHUKtXQWePiuzg6ytnp+DyoUaWw=,tag:0MGrT0vgI4zhSgFRfAx6xw==,type:str]
     pgp: []
     unencrypted_suffix: _unencrypted
-    version: 3.8.1
+    version: 3.9.1
diff --git a/playbook-website/config/deploy/staging/secrets.yaml b/playbook-website/config/deploy/staging/secrets.yaml
index b364148685..7123fac27d 100644
--- a/playbook-website/config/deploy/staging/secrets.yaml
+++ b/playbook-website/config/deploy/staging/secrets.yaml
@@ -1,6 +1,6 @@
 appConfig:
     secretKeyBase: ENC[AES256_GCM,data:kOsJ3LgAPCPZ4Vdm/EBFksqneV7tSeFqKrI965UEqkZ7EQ7n/STuE0vte90/oMF1C0eBYzwHEsnT/1kPirKn5/Rz4np2M1jQIvucTfk7QMd76fueIS2lXtLw155rYL8iEh5JyxviOJNfL93U3FiySo1Fa8+1FoOqvlnHa4+/Uoo=,iv:pjEQHF499TYjNEe+O95G3VgqpAfUyJPtVws8nl3zw4k=,tag:38L8NgqyGQu8ueIBS8NcmQ==,type:str]
-    sentry_dsn: ENC[AES256_GCM,data:8vuODktXtDvYOUKS5XR7JJ0t9sX0urMWdmIeu66wwvqfGNJogacXj097PqM4MHLIsl0DICJen/2xA+uvUSV+ZVqJH7gCqeY3fH4XwMhE8dKZZA==,iv:5NYs+MiDZiR41cuazIFPXC3IKJsJgbl4eoRvTym0dTo=,tag:XP1rGTjYcl5nMUScJ/3w/A==,type:str]
+    sentry_dsn: ENC[AES256_GCM,data:ZXe1ap46ockSXjRM1BxPMhbydR9k4eyHBLH+vx/a5D+gvvkFgEc9A9PCJ1bJg6I5IvoeZM1P56/RNi82W3QQTRCJsmHraJ39JQdEU0T4olYCdC8n/A==,iv:3jr3T4IYhzfj1GQ7V6q/HfPv0OC10caiNabI2W5DsgI=,tag:hbYiukEbPfygPC9uXBMn2Q==,type:str]
     open_ai: ENC[AES256_GCM,data:XX6uvmMSXUvaZFcLR4o5zOmZaQDodlRP4tpZ9Od73pnk4sA6VEaPoqBk3AHr0Ret5KD0WhE2TLnMt2UVEv4+xeRcct0lJtN/n+xXODXsGXoRYRRF7hiYGTJJewT5glY=,iv:tOWyS9Ep+TmP4MtY6LEez9XcD/mWERVV2sbEXQU8rrc=,tag:v3sv3+FzybiKijYY7ncqYg==,type:str]
 database:
     passwords:
@@ -35,8 +35,8 @@ sops:
     azure_kv: []
     hc_vault: []
     age: []
-    lastmodified: "2024-10-09T16:26:13Z"
-    mac: ENC[AES256_GCM,data:4oDOX4judp5IwSWIwz0TjModHhgYdIDLlij0m4S7qVeoluGaDSdn8Xx5bhaTOapYxzk1xIzrCuRhAeMFnieBhJ4l8V9XBGxRYDOobYPCJzXuWJFF80T+QoOe2JyjMB84LjtA6qUTn4cvul/tW7hMQ7ySKVr94oHpNW6lx24N2JM=,iv:EDoIKM6S044f764iz73LJBG+NRBqyy+ev6lCK+12cHg=,tag:pR8fl4g7ppG14Mym05P2uQ==,type:str]
+    lastmodified: "2024-10-23T17:00:43Z"
+    mac: ENC[AES256_GCM,data:BAUFJMNvJ7ZpY+W4LIAZFA48icyvyClqDFgh9b/uVoRppoU4x87AvD5WX7nSJm7Dn6Dy7ru+BbE36MFZMQMozmVtpxOwdWvxk+WckIzPpIIiB3IFCBhFz01Ql1/kYC56XVGFGTZ/nhGm0Vm3swbroPF/bf6LPHwXGyS6gcAKX9M=,iv:MATRiWYznGMAvu+hukaFJJa92txGq/CFj/B2sX5NaXg=,tag:U80RXtROcr5AcEM7zXvmnA==,type:str]
     pgp: []
     unencrypted_suffix: _unencrypted
-    version: 3.8.1
+    version: 3.9.1

From da1140263059a2be48f1fad85a168d8989dde462 Mon Sep 17 00:00:00 2001
From: Nida Ghuman <nidaqg@gmail.com>
Date: Mon, 28 Oct 2024 08:19:37 -0400
Subject: [PATCH 04/10] Update CHANGELOG.md 14.6.2 (#3836)

Changelog PR for 14.6.0
---
 playbook/CHANGELOG.md | 42 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/playbook/CHANGELOG.md b/playbook/CHANGELOG.md
index 7080805df6..53cc2c1163 100644
--- a/playbook/CHANGELOG.md
+++ b/playbook/CHANGELOG.md
@@ -1,3 +1,45 @@
+# Supercharge Your Tables: Custom Components in Advanced Table Cells!
+##### October 22, 2024
+
+<img width="889" alt="6c7a47b3-9b73-4790-811f-e4a01f32c625" src="https://github.com/user-attachments/assets/16ecd4b0-53be-4e0e-813f-2f606a70dbd3">
+
+We’re excited to announce a new level of flexibility for your tables! The Advanced Table now supports custom components within individual cells. Using the optional customRenderer in columnDefinition, you can access not only the current cell's value but also the entire row's data. This opens up powerful possibilities to render dynamic, tailored content in each cell with ease.
+
+[14.6.2](https://github.com/powerhome/playbook/tree/14.6.2) full list of changes:
+
+**Kit Enhancements:**
+
+- Custom Width for Popover Kit and PopoverProps for Filter Kit [\#3827](https://github.com/powerhome/playbook/pull/3827) ([ElisaShapiro](https://github.com/ElisaShapiro))
+- Dropdown Kit - States & Variant Prop [\#3828](https://github.com/powerhome/playbook/pull/3828) ([nickamantia](https://github.com/nickamantia))
+- Custom Cells for Advanced Table [\#3821](https://github.com/powerhome/playbook/pull/3821) ([nidaqg](https://github.com/nidaqg))
+- Multiple User Bubble Size Prop [\#3719](https://github.com/powerhome/playbook/pull/3719) 
+([markdoeswork](https://github.com/markdoeswork))
+- Adding React Dropdown Clearing Feature [\#3793](https://github.com/powerhome/playbook/pull/3793) ([carloslimasd](https://github.com/carloslimasd))
+- Filter Kit - Filter Kit Displaying Zero Results [\#3799](https://github.com/powerhome/playbook/pull/3799) ([ElisaShapiro](https://github.com/ElisaShapiro))
+- Add Reset Functionality to Rails side of MultiLevelSelect [\#3792](https://github.com/powerhome/playbook/pull/3792) ([nidaqg](https://github.com/nidaqg))
+- Allow Children for MultiLevelSelect [\#3661](https://github.com/powerhome/playbook/pull/3661) ([nidaqg](https://github.com/nidaqg))
+- Loading State for Rails Form, Resolution of Dialog Loading [\#3753](https://github.com/powerhome/playbook/pull/3753) ([skduncan](https://github.com/skduncan))
+
+**Fixed Bugs:**
+- Advanced Table Kit "toggle all" is Inverted in Rails [\#3790](https://github.com/powerhome/playbook/pull/3790) ([ElisaShapiro](https://github.com/ElisaShapiro))
+- Truncating the Typeahead FormPill Text [\#3738](https://github.com/powerhome/playbook/pull/3738) ([carloslimasd](https://github.com/carloslimasd))
+- Fixing icon display for markdown helper [\#3754](https://github.com/powerhome/playbook/pull/3754) ([skduncan](https://github.com/skduncan))
+- Set Total Tickets Hero Gauge Height to 150px instead of 25% [\#3752](https://github.com/powerhome/playbook/pull/3752) ([kangaree](https://github.com/kangaree))
+- Dropdown ClassName Fix [\#3845](https://github.com/powerhome/playbook/pull/3845) ([@nickamantia](https://github.com/nickamantia))
+
+**Improvements:**
+- Upgrade intl-tel-input to Latest and Make Fixes [\#3791](https://github.com/powerhome/playbook/pull/3791) ([kangaree](https://github.com/kangaree))
+- Bump react-zoom-pan-pinch from 2.6.1 to 3.6.0 [\#3817](https://github.com/powerhome/playbook/pull/3817) ([kangaree](https://github.com/kangaree))
+- Update react modal version [\#3819](https://github.com/powerhome/playbook/pull/3819) ([markdoeswork](https://github.com/markdoeswork))
+- Add rdbms to playbook-website [\#3778](https://github.com/powerhome/playbook/pull/3778) ([indiebrain](https://github.com/indiebrain))
+- Show htmlOptions as a Global Prop [\#3755](https://github.com/powerhome/playbook/pull/3755) ([skduncan](https://github.com/skduncan))
+- Support Multiple Versions of ruby/psych [\#3751](https://github.com/powerhome/playbook/pull/3751) ([xjunior](https://github.com/xjunior))
+- More storage for CI image builds [\#3767](https://github.com/powerhome/playbook/pull/3767) ([benlangfeld](https://github.com/benlangfeld))
+
+
+[Full Changelog](https://github.com/powerhome/playbook/compare/14.5.0...14.6.2)
+
+
 # 🐝 Improved Usability, Flexibility, Customization and More! 🐝
 ##### October 1, 2024 
 

From 7a92d5eccc8f639c002e3b791ab58d936c3295a9 Mon Sep 17 00:00:00 2001
From: Gary Kang <42440452+kangaree@users.noreply.github.com>
Date: Tue, 29 Oct 2024 16:48:04 -0400
Subject: [PATCH 05/10] [PLAY-1479] Beta Link Kit (#3852)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**What does this PR do?**

- Create a Link Kit for Rails and React.
- Add color, dark, disabled, icon, icon right, tag, and underline props

[PLAY-1479](https://runway.powerhrg.com/backlog_items/PLAY-1479)

**Screenshots:** Screenshots to visualize your addition/change
![Screenshot 2024-10-25 at 9 52
18 AM](https://github.com/user-attachments/assets/45f0d1af-a340-4558-a9cc-909bbc4a813a)

**How to test?** Steps to confirm the desired behavior:
1. Go to /kits/link/
2. Test Rails and React
3. Compare the handoff to each prop
4. Visit the link (in a non-incognito window). Go back, the link should
be purple and "visited"
5. Hover over links to see the color
6. "Focus" on the link by tabbing until you hit the link
7. Use dark mode


#### 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.
- [x] **TESTS** I have added test coverage to my code.
---
 playbook-website/config/menu.yml              |   3 +
 playbook/app/entrypoints/playbook-doc.js      |   2 +
 playbook/app/entrypoints/playbook.scss        |   3 +-
 playbook/app/javascript/kits.js               |   1 +
 .../app/pb_kits/playbook/pb_link/_link.scss   |  66 +++++++++++
 .../app/pb_kits/playbook/pb_link/_link.tsx    | 107 ++++++++++++++++++
 .../pb_link/docs/_link_color.html.erb         |  30 +++++
 .../playbook/pb_link/docs/_link_color.jsx     |  40 +++++++
 .../pb_link/docs/_link_disabled.html.erb      |   5 +
 .../playbook/pb_link/docs/_link_disabled.jsx  |  15 +++
 .../playbook/pb_link/docs/_link_icon.html.erb |  15 +++
 .../playbook/pb_link/docs/_link_icon.jsx      |  25 ++++
 .../playbook/pb_link/docs/_link_tag.html.erb  |  35 ++++++
 .../playbook/pb_link/docs/_link_tag.jsx       |  45 ++++++++
 .../pb_link/docs/_link_underline.html.erb     |   5 +
 .../playbook/pb_link/docs/_link_underline.jsx |  15 +++
 .../pb_kits/playbook/pb_link/docs/example.yml |  16 +++
 .../pb_kits/playbook/pb_link/docs/index.js    |   5 +
 .../pb_kits/playbook/pb_link/link.html.erb    |  21 ++++
 playbook/app/pb_kits/playbook/pb_link/link.rb |  44 +++++++
 .../pb_kits/playbook/pb_link/link.test.jsx    |  92 +++++++++++++++
 .../pb_kits/playbook/tokens/_typography.scss  |  35 ++++++
 .../spec/pb_kits/playbook/kits/link_spec.rb   |  43 +++++++
 23 files changed, 667 insertions(+), 1 deletion(-)
 create mode 100644 playbook/app/pb_kits/playbook/pb_link/_link.scss
 create mode 100644 playbook/app/pb_kits/playbook/pb_link/_link.tsx
 create mode 100644 playbook/app/pb_kits/playbook/pb_link/docs/_link_color.html.erb
 create mode 100644 playbook/app/pb_kits/playbook/pb_link/docs/_link_color.jsx
 create mode 100644 playbook/app/pb_kits/playbook/pb_link/docs/_link_disabled.html.erb
 create mode 100644 playbook/app/pb_kits/playbook/pb_link/docs/_link_disabled.jsx
 create mode 100644 playbook/app/pb_kits/playbook/pb_link/docs/_link_icon.html.erb
 create mode 100644 playbook/app/pb_kits/playbook/pb_link/docs/_link_icon.jsx
 create mode 100644 playbook/app/pb_kits/playbook/pb_link/docs/_link_tag.html.erb
 create mode 100644 playbook/app/pb_kits/playbook/pb_link/docs/_link_tag.jsx
 create mode 100644 playbook/app/pb_kits/playbook/pb_link/docs/_link_underline.html.erb
 create mode 100644 playbook/app/pb_kits/playbook/pb_link/docs/_link_underline.jsx
 create mode 100644 playbook/app/pb_kits/playbook/pb_link/docs/example.yml
 create mode 100644 playbook/app/pb_kits/playbook/pb_link/docs/index.js
 create mode 100644 playbook/app/pb_kits/playbook/pb_link/link.html.erb
 create mode 100644 playbook/app/pb_kits/playbook/pb_link/link.rb
 create mode 100644 playbook/app/pb_kits/playbook/pb_link/link.test.jsx
 create mode 100644 playbook/spec/pb_kits/playbook/kits/link_spec.rb

diff --git a/playbook-website/config/menu.yml b/playbook-website/config/menu.yml
index 882f663f75..61f8012c84 100644
--- a/playbook-website/config/menu.yml
+++ b/playbook-website/config/menu.yml
@@ -542,6 +542,9 @@ kits:
       be followed by Title 2s followed by Title 3s and so on, without skipping any
       levels.
     status: stable
+  - name: link
+    platforms: *1
+    status: beta
 - category: user
   description:
   components:
diff --git a/playbook/app/entrypoints/playbook-doc.js b/playbook/app/entrypoints/playbook-doc.js
index 91fc773807..c4491a7449 100755
--- a/playbook/app/entrypoints/playbook-doc.js
+++ b/playbook/app/entrypoints/playbook-doc.js
@@ -59,6 +59,7 @@ import * as Layout from 'kits/pb_layout/docs'
 import * as LegendDocs from 'kits/pb_legend/docs'
 import * as Lightbox from 'kits/pb_lightbox/docs'
 import * as LineGraphDocs from 'kits/pb_line_graph/docs'
+import * as Link from 'kits/pb_link/docs'
 import * as List from 'kits/pb_list/docs'
 import * as LoadingInline from 'kits/pb_loading_inline/docs'
 import * as Map from 'kits/pb_map/docs'
@@ -167,6 +168,7 @@ WebpackerReact.registerComponents({
   ...LegendDocs,
   ...Lightbox,
   ...LineGraphDocs,
+  ...Link,
   ...List,
   ...LoadingInline,
   ...Map,
diff --git a/playbook/app/entrypoints/playbook.scss b/playbook/app/entrypoints/playbook.scss
index eed254252d..8ebaa9cf11 100755
--- a/playbook/app/entrypoints/playbook.scss
+++ b/playbook/app/entrypoints/playbook.scss
@@ -30,6 +30,7 @@
 @import 'kits/pb_dialog/dialog';
 @import 'kits/pb_distribution_bar/distribution_bar';
 @import 'kits/pb_draggable/draggable';
+@import 'kits/pb_drawer/drawer';
 @import 'kits/pb_dropdown/dropdown';
 @import 'kits/pb_file_upload/file_upload';
 @import 'kits/pb_filter/filter';
@@ -54,6 +55,7 @@
 @import 'kits/pb_legend/legend';
 @import 'kits/pb_lightbox/lightbox';
 @import 'kits/pb_line_graph/line_graph';
+@import 'kits/pb_link/link';
 @import 'kits/pb_list/list';
 @import 'kits/pb_loading_inline/loading_inline';
 @import 'kits/pb_map/map';
@@ -106,7 +108,6 @@
 @import 'kits/pb_user_badge/user_badge';
 @import 'kits/pb_walkthrough/walkthrough';
 @import 'kits/pb_weekday_stacked/weekday_stacked';
-@import 'kits/pb_drawer/drawer';
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';
diff --git a/playbook/app/javascript/kits.js b/playbook/app/javascript/kits.js
index 9651ffa73b..15de7bb5b1 100644
--- a/playbook/app/javascript/kits.js
+++ b/playbook/app/javascript/kits.js
@@ -59,6 +59,7 @@ export { default as Layout } from '../pb_kits/playbook/pb_layout/_layout'
 export { default as Legend } from '../pb_kits/playbook/pb_legend/_legend'
 export { default as Lightbox } from '../pb_kits/playbook/pb_lightbox/_lightbox'
 export { default as LineGraph } from '../pb_kits/playbook/pb_line_graph/_line_graph'
+export { default as Link} from '../pb_kits/playbook/pb_link/_link'
 export { default as List } from '../pb_kits/playbook/pb_list/_list'
 export { default as ListItem } from '../pb_kits/playbook/pb_list/_list_item'
 export { default as LoadingInline } from '../pb_kits/playbook/pb_loading_inline/_loading_inline'
diff --git a/playbook/app/pb_kits/playbook/pb_link/_link.scss b/playbook/app/pb_kits/playbook/pb_link/_link.scss
new file mode 100644
index 0000000000..bb1aec6e2e
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_link/_link.scss
@@ -0,0 +1,66 @@
+@import "../tokens/colors";
+@import "../tokens/line_height";
+@import "../tokens/typography";
+@import "../tokens/border_radius";
+
+[class^=pb_link_kit]{
+  @include pb_link($primary);
+  &:hover {
+    color: $text_lt_default;
+  }
+  &:focus {
+    outline: none;
+  }
+  &:focus-visible {
+    border-radius: $border_rad_light;
+    outline: 1px solid $primary;
+    outline-offset: 2px;
+  }
+  &:visited {
+    color: $data_3;
+  }
+  &.dark  {
+    @include pb_link($active_dark);
+    &:hover {
+      color: $text_dk_default;
+    }
+  }
+  @each $color_name, $color_value in $pb_link_colors {
+    &[class*=_#{"" + $color_name}] {
+      @include pb_link($color_value);
+
+      &:hover {
+        color: map-get($pb_link_hover_colors, $color_name);
+      }
+
+      &:visited {
+        color: $data_3;
+      }
+    }
+  }
+
+  @each $dark_color_name, $dark_color_value in $pb_dark_link_colors{
+    &[class*=_#{$dark_color_name}][class*=dark]{
+      @include pb_link($dark_color_value);
+      
+      &:hover {
+        color: map-get($pb_dark_link_hover_colors, $dark_color_name);
+      }
+
+      &:visited {
+        color: $data_3;
+      }
+    }
+  }
+
+  &[class*=_underline] {
+    text-decoration: underline;
+  }
+
+  &[class*=_disabled] {
+    pointer-events: none;
+    cursor: default;
+    color: $text_lt_lighter;
+  }
+
+}
diff --git a/playbook/app/pb_kits/playbook/pb_link/_link.tsx b/playbook/app/pb_kits/playbook/pb_link/_link.tsx
new file mode 100644
index 0000000000..1ed1a3625e
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_link/_link.tsx
@@ -0,0 +1,107 @@
+import React from 'react'
+import classnames from 'classnames'
+
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
+
+import Icon from '../pb_icon/_icon'
+
+type LinkProps = {
+  aria?: {[key: string]: string},
+  className?: string,
+  children?: React.ReactChild[] | React.ReactChild,
+  color?: 'default' | 'body' | 'muted' | 'destructive',
+  dark?: boolean,
+  data?: {[key: string]: string},
+  disabled?: boolean,
+  href?: string,
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void) | ((arg?: Event) => void)},
+  icon?: string,
+  iconRight?: string,
+  id?: string,
+  tag?: 'a' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
+  text?: string,
+  underline?: boolean,
+} & GlobalProps
+
+const Link = (props: LinkProps): React.ReactElement => {
+  const {
+    aria = {},
+    children,
+    className,
+    color = '',
+    data = {},
+    disabled = false,
+    href= '',
+    htmlOptions = {},
+    icon = '',
+    iconRight = '',
+    id = '',
+    tag = 'a',
+    text = '',
+    underline = false,
+  } = props
+
+  const ariaProps: {[key: string]: string} = buildAriaProps(aria)
+  const dataProps: {[key: string]: string} = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
+  const classes = classnames(
+    buildCss('pb_link_kit', color, underline ? 'underline' : '', disabled ? 'disabled' : ''),
+    globalProps(props),
+    className
+  )
+  const Tag = tag as keyof JSX.IntrinsicElements
+
+  const renderContent = () => (
+    <>
+      {icon && (
+        <Icon
+            fixedWidth
+            icon={icon}
+            marginRight="xxs"
+            size="xs"
+        />
+      )}
+      {text || children}
+      {iconRight && (
+        <Icon
+            fixedWidth
+            icon={iconRight}
+            marginLeft="xxs"
+            size="xs"
+        />
+      )}
+    </>
+  )
+
+  const commonProps = {
+    ...ariaProps,
+    ...dataProps,
+    ...htmlProps,
+    className: classes,
+    id,
+  }
+
+  if (tag === 'a') {
+    return (
+      <a
+          {...commonProps}
+          href={href}
+      >
+        {renderContent()}
+      </a>
+    )
+  } else {
+    return (
+      <a
+          {...commonProps}
+          href={href}
+      >
+        <Tag>{renderContent()}</Tag>
+      </a>
+    )
+  }
+
+}
+
+export default Link
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_link/docs/_link_color.html.erb b/playbook/app/pb_kits/playbook/pb_link/docs/_link_color.html.erb
new file mode 100644
index 0000000000..1d5d695dd8
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_link/docs/_link_color.html.erb
@@ -0,0 +1,30 @@
+<div>
+  <%= pb_rails("link", props: {
+    text: "link example",
+    href: "https://www.google.com/search?q=playbook+design+system",
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("link", props: {
+    text: "link example",
+    href: "https://www.youtube.com/@PowerHRG",
+    color: "body",
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("link", props: {
+    text: "link example",
+    href: "https://github.com/powerhome/.github/blob/main/profile/README.md",
+    color: "muted",
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("link", props: {
+    text: "link example",
+    href: "https://rubygems.org/gems/playbook_ui/",
+    color: "destructive",
+  }) %>
+</div>
diff --git a/playbook/app/pb_kits/playbook/pb_link/docs/_link_color.jsx b/playbook/app/pb_kits/playbook/pb_link/docs/_link_color.jsx
new file mode 100644
index 0000000000..8d3108dd10
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_link/docs/_link_color.jsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import { Link } from 'playbook-ui'
+
+const LinkColor = (props) => (
+  <div>
+    <div>
+      <Link
+          href="https://www.google.com/search?q=playbook+design+system"
+          text="link example"
+          {...props}
+      />
+    </div>
+    <div>
+      <Link
+          color="body"
+          href="https://www.youtube.com/@PowerHRG"
+          text="link example"
+          {...props}
+      />
+    </div>
+    <div>
+      <Link
+          color="muted"
+          href="https://github.com/powerhome/.github/blob/main/profile/README.md"
+          text="link example"
+          {...props}
+      />
+    </div>
+    <div>
+      <Link
+          color="destructive"
+          href="https://rubygems.org/gems/playbook_ui/"
+          text="link example"
+          {...props}
+      />
+    </div>
+  </div>
+)
+
+export default LinkColor
diff --git a/playbook/app/pb_kits/playbook/pb_link/docs/_link_disabled.html.erb b/playbook/app/pb_kits/playbook/pb_link/docs/_link_disabled.html.erb
new file mode 100644
index 0000000000..df60fec0b2
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_link/docs/_link_disabled.html.erb
@@ -0,0 +1,5 @@
+<%= pb_rails("link", props: {
+  text: "link example",
+  href: "#disabled",
+  disabled: true,
+}) %>
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_link/docs/_link_disabled.jsx b/playbook/app/pb_kits/playbook/pb_link/docs/_link_disabled.jsx
new file mode 100644
index 0000000000..ed9a64d613
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_link/docs/_link_disabled.jsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { Link } from 'playbook-ui'
+
+const LinkDisabled = (props) => (
+  <div>
+    <Link
+        disabled
+        href="#disabled"
+        text="link example"
+        {...props}
+    />
+  </div>
+)
+
+export default LinkDisabled
diff --git a/playbook/app/pb_kits/playbook/pb_link/docs/_link_icon.html.erb b/playbook/app/pb_kits/playbook/pb_link/docs/_link_icon.html.erb
new file mode 100644
index 0000000000..ac17688298
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_link/docs/_link_icon.html.erb
@@ -0,0 +1,15 @@
+<div>
+  <%= pb_rails("link", props: {
+    text: "link example",
+    href: "#icon",
+    icon: "arrow-up-right-from-square",
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("link", props: {
+    text: "link example",
+    href: "#icon2",
+    icon_right: "chevron-right",
+  }) %>
+</div>
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_link/docs/_link_icon.jsx b/playbook/app/pb_kits/playbook/pb_link/docs/_link_icon.jsx
new file mode 100644
index 0000000000..07503f0890
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_link/docs/_link_icon.jsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import { Link } from 'playbook-ui'
+
+const LinkIcon = (props) => (
+  <div>
+    <div>
+      <Link
+          href="#icon"
+          icon="arrow-up-right-from-square"
+          text="link example"
+          {...props}
+      />
+    </div>
+    <div>
+      <Link
+          href="#icon2"
+          iconRight="chevron-right"
+          text="link example"
+          {...props}
+      />
+    </div>
+  </div>
+)
+
+export default LinkIcon
diff --git a/playbook/app/pb_kits/playbook/pb_link/docs/_link_tag.html.erb b/playbook/app/pb_kits/playbook/pb_link/docs/_link_tag.html.erb
new file mode 100644
index 0000000000..a7a41266e9
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_link/docs/_link_tag.html.erb
@@ -0,0 +1,35 @@
+<%= pb_rails("link", props: {
+  text: "h1 link example",
+  href: "#tag",
+  icon: "arrow-up-right-from-square",
+  tag: "h1",
+}) %>
+
+<%= pb_rails("link", props: {
+  text: "h3 link example",
+  href: "#tag2",
+  tag: "h3",
+  underline: true,
+}) %>
+
+<%= pb_rails("link", props: {
+  color: "destructive",
+  text: "h6 link example",
+  href: "#tag3",
+  tag: "h6",
+}) %>
+
+<%= pb_rails("link", props: {
+  text: "p link example",
+  href: "#tag4",
+  icon_right: "chevron-right",
+  tag: "p",
+}) %>
+
+<div>
+  This is a <%= pb_rails("link", props: {
+    text: "span link example",
+    href: "#tag5",
+    tag: "span",
+  }) %>
+</div>
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_link/docs/_link_tag.jsx b/playbook/app/pb_kits/playbook/pb_link/docs/_link_tag.jsx
new file mode 100644
index 0000000000..9d9d4ae710
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_link/docs/_link_tag.jsx
@@ -0,0 +1,45 @@
+import React from 'react'
+import { Link } from 'playbook-ui'
+
+const LinkTag = (props) => (
+  <div>
+    <Link
+        href="#tag"
+        icon="arrow-up-right-from-square"
+        tag="h1"
+        text="h1 link example"
+        {...props}
+    />
+    <Link
+        href="#tag2"
+        tag="h3"
+        text="h3 link example"
+        underline
+        {...props}
+    />
+    <Link
+        color="destructive"
+        href="#tag3"
+        tag="h6"
+        text="h6 link example"
+        {...props}
+    />
+    <Link
+        href="#tag4"
+        iconRight="chevron-right"
+        tag="p"
+        text="p link example"
+        {...props}
+    />
+    <div>
+      This is a <Link
+          href="#tag5"
+          tag="span"
+          text="span link example"
+          {...props}
+    />
+    </div>
+  </div>
+)
+
+export default LinkTag
diff --git a/playbook/app/pb_kits/playbook/pb_link/docs/_link_underline.html.erb b/playbook/app/pb_kits/playbook/pb_link/docs/_link_underline.html.erb
new file mode 100644
index 0000000000..854357a6f2
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_link/docs/_link_underline.html.erb
@@ -0,0 +1,5 @@
+<%= pb_rails("link", props: {
+  text: "link example",
+  href: "#underline",
+  underline: true,
+}) %>
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_link/docs/_link_underline.jsx b/playbook/app/pb_kits/playbook/pb_link/docs/_link_underline.jsx
new file mode 100644
index 0000000000..8f509db388
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_link/docs/_link_underline.jsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { Link } from 'playbook-ui'
+
+const LinkUnderline = (props) => (
+  <div>
+    <Link
+        href="#underline"
+        text="link example"
+        underline
+        {...props}
+    />
+  </div>
+)
+
+export default LinkUnderline
diff --git a/playbook/app/pb_kits/playbook/pb_link/docs/example.yml b/playbook/app/pb_kits/playbook/pb_link/docs/example.yml
new file mode 100644
index 0000000000..ae862385d6
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_link/docs/example.yml
@@ -0,0 +1,16 @@
+examples:
+  
+  rails:
+  - link_color: Color
+  - link_underline: Underline
+  - link_icon: Icon
+  - link_disabled: Disabled
+  - link_tag: Tag
+  
+  
+  react:
+  - link_color: Color
+  - link_underline: Underline
+  - link_icon: Icon
+  - link_disabled: Disabled
+  - link_tag: Tag
diff --git a/playbook/app/pb_kits/playbook/pb_link/docs/index.js b/playbook/app/pb_kits/playbook/pb_link/docs/index.js
new file mode 100644
index 0000000000..6f0b6c138e
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_link/docs/index.js
@@ -0,0 +1,5 @@
+export { default as LinkColor } from './_link_color.jsx'
+export { default as LinkUnderline } from './_link_underline.jsx'
+export { default as LinkIcon } from './_link_icon.jsx'
+export { default as LinkDisabled } from './_link_disabled.jsx'
+export { default as LinkTag } from './_link_tag.jsx'
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_link/link.html.erb b/playbook/app/pb_kits/playbook/pb_link/link.html.erb
new file mode 100644
index 0000000000..fcbab306e4
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_link/link.html.erb
@@ -0,0 +1,21 @@
+<% link_content = proc do %>
+  <% if object.icon.present? %>
+    <%= pb_rails("icon", props: { icon: object.icon, fixed_width: true, size: "xs", margin_right: "xxs" }) %>
+  <% end %>
+  <%= object.content %>
+  <% if object.icon_right.present? %>
+    <%= pb_rails("icon", props: { icon: object.icon_right, fixed_width: true, size: "xs", margin_left: "xxs" }) %>
+  <% end %>
+<% end %>
+
+<% if object.tag == "a" %>
+  <%= pb_content_tag(object.tag, { href: object.href }) do %>
+    <%= link_content.call %>
+  <% end %>
+<% else %>
+  <%= pb_content_tag(:a, { href: object.href }) do %>
+    <%= content_tag(object.tag) do %>
+      <%= link_content.call %>
+    <% end %>
+  <% end %>
+<% end %>
diff --git a/playbook/app/pb_kits/playbook/pb_link/link.rb b/playbook/app/pb_kits/playbook/pb_link/link.rb
new file mode 100644
index 0000000000..e1b3695633
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_link/link.rb
@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbLink
+    class Link < ::Playbook::KitBase
+      prop :color, type: Playbook::Props::Enum,
+                   values: %w[default body muted destructive],
+                   default: "default"
+      prop :disabled, type: Playbook::Props::Boolean,
+                      default: false
+      prop :href
+      prop :icon
+      prop :icon_right
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[a h1 h2 h3 h4 h5 h6 p span div],
+                 default: "a"
+      prop :text
+      prop :underline, type: Playbook::Props::Boolean,
+                       default: false
+
+      def classname
+        generate_classname("pb_link_kit", color_class, underline_class, disabled_class)
+      end
+
+      def content
+        text
+      end
+
+    private
+
+      def color_class
+        color == "default" ? nil : color
+      end
+
+      def disabled_class
+        disabled ? "disabled" : nil
+      end
+
+      def underline_class
+        underline ? "underline" : nil
+      end
+    end
+  end
+end
diff --git a/playbook/app/pb_kits/playbook/pb_link/link.test.jsx b/playbook/app/pb_kits/playbook/pb_link/link.test.jsx
new file mode 100644
index 0000000000..7161767d7a
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_link/link.test.jsx
@@ -0,0 +1,92 @@
+import React from 'react'
+import { ensureAccessible, renderKit, render, screen } from '../utilities/test-utils'
+
+import { Link } from 'playbook-ui'
+
+const link = 'https://www.google.com'
+
+const props = {
+  data: { testid: 'default' },
+  href: link,
+}
+
+test('returns namespaced class name', () => {
+  const kit = renderKit(Link , props)
+  expect(kit).toBeInTheDocument()
+  expect(kit).toHaveClass('pb_link_kit')
+  expect(kit).toHaveAttribute('href', link)
+})
+
+it("should be accessible", async () => {
+  ensureAccessible(Link, props)
+})
+
+test('with colors', () => {
+  ['default', 'body', 'muted', 'destructive'].forEach((color) => {
+    const testId = `colors-test-${color}`
+    render(
+      <Link
+          color={color}
+          data={{ testid: testId }}
+          text="Test colors"
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`pb_link_kit_${color}`)
+  })
+})
+
+test('disable prop', () => {
+  render(
+      <Link
+          data={{ testid: 'disable-test' }}
+          disabled
+      />
+  )
+
+  const kit = screen.getByTestId('disable-test')
+
+  expect(kit).toHaveClass('pb_link_kit_disabled')
+})
+
+test('underline prop', () => {
+  render(
+      <Link
+          data={{ testid: 'underline-test' }}
+          underline
+      />
+  )
+
+  const kit = screen.getByTestId('underline-test')
+
+  expect(kit).toHaveClass('pb_link_kit_underline')
+})
+
+test('adds icon', () => {
+  render(
+      <Link
+          data={{ testid: 'icon-test' }}
+          icon="arrow-up-right-from-square"
+      />
+  )
+
+  const kit = screen.getByTestId('icon-test')
+
+  const icon = kit.querySelector('.pb_icon_kit')
+  expect(icon).toBeInTheDocument();
+})
+
+test('adds icon right', () => {
+  render(
+      <Link
+          data={{ testid: 'icon-right-test' }}
+          iconRight="chevron-right"
+      />
+  )
+
+  const kit = screen.getByTestId('icon-right-test')
+
+  const icon = kit.querySelector('.pb_icon_kit')
+  expect(icon).toBeInTheDocument();
+})
diff --git a/playbook/app/pb_kits/playbook/tokens/_typography.scss b/playbook/app/pb_kits/playbook/tokens/_typography.scss
index 25c4cbbc97..5bf975e92e 100755
--- a/playbook/app/pb_kits/playbook/tokens/_typography.scss
+++ b/playbook/app/pb_kits/playbook/tokens/_typography.scss
@@ -1,3 +1,5 @@
+@import "../tokens/colors";
+
 $font_family_base: "Power Centra", "Helvetica Neue", Helvetica, Arial, sans_serif !default;
 
 /* CLEAN UP AND REMOVE */
@@ -51,3 +53,36 @@ $boldest:       700 !default;
 $bolder:        700 !default;
 $light:         300 !default;
 $lighter:       300 !default;
+
+/* Link Colors */
+$pb_link_colors: (
+  default:        $primary_action,
+  body:           $text_lt_default,
+  muted:          $text_lt_light,
+  destructive:    $error,
+);
+
+$pb_link_hover_colors: (
+  default:        $text_lt_default,
+  body:           $primary_action,
+  muted:          $text_lt_default,
+  destructive:    $text_lt_default,
+);
+
+$pb_dark_link_colors: (
+  default:        $active_dark,
+  body:           $text_dk_default,
+  muted:          $text_dk_light,
+  destructive:    $error_dark,
+);
+
+$pb_dark_link_hover_colors: (
+  default:        $text_dk_default,
+  body:           $active_dark,
+  muted:          $text_dk_default,
+  destructive:    $text_dk_default,
+);
+
+@mixin pb_link($color: $primary_action) {
+  color: $color;
+}
\ No newline at end of file
diff --git a/playbook/spec/pb_kits/playbook/kits/link_spec.rb b/playbook/spec/pb_kits/playbook/kits/link_spec.rb
new file mode 100644
index 0000000000..11a694fc13
--- /dev/null
+++ b/playbook/spec/pb_kits/playbook/kits/link_spec.rb
@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+require_relative "../../../../app/pb_kits/playbook/pb_link/link"
+
+RSpec.describe Playbook::PbLink::Link do
+  subject { Playbook::PbLink::Link }
+
+  it {
+    is_expected.to define_enum_prop(:color)
+      .with_default("default")
+      .with_values("default", "body", "muted", "destructive")
+  }
+  it { is_expected.to define_boolean_prop(:disabled).with_default(false) }
+  it { is_expected.to define_prop(:href) }
+  it { is_expected.to define_prop(:icon) }
+  it { is_expected.to define_prop(:icon_right) }
+  it {
+    is_expected.to define_enum_prop(:tag)
+      .with_default("a")
+      .with_values("a", "h1", "h2", "h3", "h4", "h5", "h6", "p", "span", "div")
+  }
+  it { is_expected.to define_prop(:text) }
+  it { is_expected.to define_boolean_prop(:underline).with_default(false) }
+
+  describe "#classname" do
+    it "returns namespaced class name", :aggregate_failures do
+      expect(subject.new({}).classname).to eq "pb_link_kit"
+      expect(subject.new(classname: "additional_class").classname).to eq "pb_link_kit additional_class"
+      expect(subject.new(dark: true).classname).to eq "pb_link_kit dark"
+      expect(subject.new(color: "destructive").classname).to eq "pb_link_kit_destructive"
+      expect(subject.new(underline: true).classname).to eq "pb_link_kit_underline"
+      expect(subject.new(disabled: true).classname).to eq "pb_link_kit_disabled"
+    end
+  end
+
+  describe "#href" do
+    it "adds href attribute", :aggregate_failures do
+      instance = subject.new(href: "google.com")
+      expect(instance.href).to eq("google.com")
+      expect(instance).to have_attributes(href: "google.com")
+    end
+  end
+end

From ecf834fe169b4f97e599711afd0c343a4d8364de Mon Sep 17 00:00:00 2001
From: Gary Kang <42440452+kangaree@users.noreply.github.com>
Date: Tue, 29 Oct 2024 16:48:39 -0400
Subject: [PATCH 06/10] [PLAY-1538] Add README.md to root in dist for NPM
 (#3853)

**What does this PR do?**
Copy a README.md to /playbook from Portal docs for NPM description.
Differentiate Portal and NPM READMEs in later story.

**Screenshots:**
![Zight 2024-10-29 at 9 00 35
AM](https://github.com/user-attachments/assets/fb60f149-e686-415c-9c2e-efce6d1358a5)

**How to test?** Steps to confirm the desired behavior:
1. Check the [alpha NPM
release](https://www.npmjs.com/package/playbook-ui/v/14.6.2-alpha.PLAY1538READMEroot4262)
and make sure there is a README
2. Make sure Portal documentation works as expected (no changes to
[existing
docs](https://portal.powerapp.cloud/catalog/default/system/playbook/docs/))


#### 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.
---
 playbook/README.md | 94 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 94 insertions(+)
 create mode 100644 playbook/README.md

diff --git a/playbook/README.md b/playbook/README.md
new file mode 100644
index 0000000000..6cdedb92c2
--- /dev/null
+++ b/playbook/README.md
@@ -0,0 +1,94 @@
+[![npm version](https://badge.fury.io/js/playbook-ui.svg)](https://badge.fury.io/js/playbook-ui)
+[![Gem Version](https://badge.fury.io/rb/playbook_ui.svg)](https://badge.fury.io/rb/playbook_ui)
+
+# Playbook Design System
+
+Playbook is the first design system built for both Rails & React interfaces. Inspired by [Velocity](https://www.invisionapp.com/inside-design/design-resources/design-system-dashboard-ui-kit/), Playbook takes a modern design approach and applies it in a way that makes it easy to support bleeding edge or legacy systems. Playbook is built & maintained by the User Experience & Development teams at [Power Home Remodeling](https://www.techatpower.com/), the largest home remodeler in the US.
+
+## Development
+
+### Requirements
+
+- [asdf](https://github.com/asdf-vm/asdf)
+
+### Getting Started and Running Playbook for Development
+
+1. After cloning the repo, you should have the following nested folders among other files. It will be important to pay attention to which folder we are in as we get playbook running:
+    ```
+    playbook
+    │   playbook
+    │   playbook-website
+    ```
+1. Ensure your installed version of `bundler` is the same as the `BUNDLED WITH` section found in [Gemfile.lock](./Gemfile.lock). You can check the version you have by running `bundle -v`.
+
+1. From the root directory, run `./setup.sh`
+
+1. From the top-level playbook folder run `yarn start-dev` This may take a little while.
+1. Once you see the "compiled successfully" message in your terminal, navigate to [http://localhost:3000](http://localhost:3000) and you should see the playbook website.
+
+### Post Installation Startup
+
+Use `./run.sh` to run the application in one step. This will handle dependency updates then start the server. Helpful for fast start-up without bootstrapping especially when switching branches. 🚀
+
+### Running Library Tests
+
+1. `cd playbook && ./test.sh`
+
+---
+
+## Additional Resources
+
+### Adding NPM Dependencies
+
+1. You need to be working in `playbook/playbook` or `playbook/playbook-website` subdirectory
+1. run `yarn workspace playbook-website add <lib name>` to add to the website
+1. run `yarn workspace playbook-ui add <lib name>` to add to the kit source
+1. run `yarn workspace playbook-project add <lib name>` to add to the main project
+
+### Upgrading between versions
+
+See [docs/upgrade-guide](./upgrade-guide)
+
+### Releases
+
+* [Playbook Releases](https://github.com/powerhome/playbook/wiki/Playbook-Releases)
+
+### Development Environment
+
+* [Common Errors & Solutions](https://github.com/powerhome/playbook/wiki/Common-Errors-&-Solutions)
+
+### Building Playbook Kits
+
+* [Generating a Kit](https://github.com/powerhome/playbook/wiki/Generating-a-Kit)
+* [Rails Kit](https://github.com/powerhome/playbook/wiki/Rails-Kit)
+* [Rails Kit Helpers](https://github.com/powerhome/playbook/wiki/Rails-Kit-Helpers)
+* [Using a Kit within a Kit](https://github.com/powerhome/playbook/wiki/Using-a-Kit-within-a-Kit)
+* [Understanding Rails Kit HTML Wrapper](https://github.com/powerhome/playbook/wiki/Understanding-Rails-Kit-HTML-Wrapper)
+* [Kit Stylesheet](https://github.com/powerhome/playbook/wiki/Kit-Stylesheet)
+
+### Testing Playbook Kits Locally
+
+#### Testing React Kits locally
+
+1.  From inside the `playbook-ui` directory, run `yarn link`;
+1.  From Inside the project you want to test with `playbook-ui`, run `yarn link playbook-ui`;
+1.  Rebuild the project now using this version of `playbook-ui`;
+1.  Test all the things!
+1.  When finished, from inside the project you were testing with `playbook-ui`, run `yarn unlink playbook-ui`;
+1.  From Inside the `playbook-ui` directory, run `yarn unlink`;
+
+#### Jest & React-Testing-Library for Writing Tests
+
+We are currently backfilling test cases for React kit test coverage using Jest and React Testing Library. More additions and enhancements
+to the testing libraries are currently in the works. In the meantime, please take a look at these resources:
+
+- https://github.com/testing-library/jest-dom#usage for usage and examples
+- https://jestjs.io/docs/en/using-matchers
+
+When a new kit is generated, a placeholder React kit test will also be created. You can run all the tests with `yarn test`.
+
+### Important Note
+
+Keep in mind: Styles are brought in from playbook through the rails gem, so you will not be able to test scss updates with yarn linking.
+
+The gem & npm package is available as open source under the terms of the [ISC License](https://opensource.org/licenses/ISC).

From 27c5726b5625e4dd54da5fa0f703fb9e3c069dd8 Mon Sep 17 00:00:00 2001
From: Jasper Furniss <jasper.furniss@powerhrg.com>
Date: Wed, 30 Oct 2024 14:32:52 -0400
Subject: [PATCH 07/10] [PBNTR-555] Currency Kit Updates (#3832)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**What does this PR do?** A clear and concise description with your
runway ticket url.
https://runway.powerhrg.com/backlog_items/PBNTR-555

**Screenshots:** Screenshots to visualize your addition/change
<img width="652" alt="Screenshot 2024-10-22 at 3 53 03 PM"
src="https://github.com/user-attachments/assets/3f32b0ac-17d3-4164-98a7-608f7132eae5">


**How to test?** Steps to confirm the desired behavior:
1. Go to bottom of Currency kit on rails & react.
2. See new doc examples highlighting the new comma_separator prop.


#### 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.
- [X] **TESTS** I have added test coverage to my code.
---
 .../workflows/github-actions-check-labels.yml |  0
 .../playbook/pb_currency/_currency.tsx        | 22 ++++++---
 .../pb_kits/playbook/pb_currency/currency.rb  | 49 ++++++++++++++-----
 .../playbook/pb_currency/currency.test.js     | 35 +++++++++++++
 .../docs/_currency_comma_separator.html.erb   |  7 +++
 .../docs/_currency_comma_separator.jsx        | 18 +++++++
 .../docs/_currency_comma_separator.md         |  3 ++
 .../playbook/pb_currency/docs/example.yml     |  4 +-
 .../playbook/pb_currency/docs/index.js        |  1 +
 .../playbook/pb_currency/currency_spec.rb     |  9 ++++
 10 files changed, 130 insertions(+), 18 deletions(-)
 create mode 100644 .github/workflows/github-actions-check-labels.yml
 create mode 100644 playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb
 create mode 100644 playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx
 create mode 100644 playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md

diff --git a/.github/workflows/github-actions-check-labels.yml b/.github/workflows/github-actions-check-labels.yml
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/playbook/app/pb_kits/playbook/pb_currency/_currency.tsx b/playbook/app/pb_kits/playbook/pb_currency/_currency.tsx
index f0673c777b..c03f683541 100644
--- a/playbook/app/pb_kits/playbook/pb_currency/_currency.tsx
+++ b/playbook/app/pb_kits/playbook/pb_currency/_currency.tsx
@@ -26,6 +26,7 @@ type CurrencyProps = {
   variant?: 'default' | 'light' | 'bold',
   unit?: string,
   unstyled?: boolean,
+  commaSeparator?: boolean,
 }
 
 const sizes: {lg: 1, md: 3, sm: 4} = {
@@ -53,6 +54,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     variant = 'default',
     dark = false,
     unstyled = false,
+    commaSeparator = false,
   } = props
 
   const emphasizedClass = emphasized ? '' : '_deemphasized'
@@ -74,7 +76,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     className
   )
 
-  const getFormattedNumber = (input: number | any ) => new Intl.NumberFormat('en-US', {
+  const getFormattedNumber = (input: number | any) => new Intl.NumberFormat('en-US', {
     notation: 'compact',
     maximumFractionDigits: 1,
   }).format(input)
@@ -88,12 +90,20 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     return isAmount ? num.slice(0, -1) : isUnit ? num.slice(-1) : ''
   }
 
-  const getMatchingDecimalAmount = decimals === "matching" ? amount : whole,
-    getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
+  const getMatchingDecimalAmount = decimals === "matching" ? amount : whole
+  const getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
 
-  const getAmount = abbreviate ? getAbbreviatedValue('amount') : getMatchingDecimalAmount,
-    getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null,
-    getDecimalValue = abbreviate ? '' : getMatchingDecimalValue
+  const formatAmount = (amount: string) => {
+    if (!commaSeparator) return amount;
+    
+    const [wholePart, decimalPart] = amount.split('.');
+    const formattedWhole = new Intl.NumberFormat('en-US').format(parseInt(wholePart));
+    return decimalPart ? `${formattedWhole}.${decimalPart}` : formattedWhole;
+  }
+
+  const getAmount = abbreviate ? getAbbreviatedValue('amount') : formatAmount(getMatchingDecimalAmount)
+  const getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null
+  const getDecimalValue = abbreviate ? '' : getMatchingDecimalValue
 
   return (
     <div
diff --git a/playbook/app/pb_kits/playbook/pb_currency/currency.rb b/playbook/app/pb_kits/playbook/pb_currency/currency.rb
index 32959ba8e7..796a1abd07 100644
--- a/playbook/app/pb_kits/playbook/pb_currency/currency.rb
+++ b/playbook/app/pb_kits/playbook/pb_currency/currency.rb
@@ -43,6 +43,9 @@ class Currency < Playbook::KitBase
       prop :unstyled, type: Playbook::Props::Boolean,
                       default: false
 
+      prop :comma_separator, type: Playbook::Props::Boolean,
+                             default: false
+
       def classname
         generate_classname("pb_currency_kit", align, size, dark_class)
       end
@@ -65,7 +68,7 @@ def caption_props
       def title_props
         {
           size: size_value,
-          text: abbreviate ? abbreviated_value : whole_value,
+          text: abbreviate ? abbreviated_value : formatted_amount,
           classname: "pb_currency_value",
           dark: dark,
         }
@@ -96,28 +99,38 @@ def variant_class
     private
 
       def whole_value
-        return amount if decimals == "matching"
-
-        amount.split(".").first.to_s
+        value = amount.split(".").first
+        if comma_separator
+          number_with_delimiter(value.gsub(",", ""))
+        else
+          value
+        end
       end
 
-      def abbreviated_value(index = 0..-2)
-        value = amount.split(".").first.split(",").join("")
-        abbreviated_num = number_to_human(value, units: { thousand: "K", million: "M", billion: "B", trillion: "T" }).gsub(/\s+/, "").to_s
-        abbreviated_num[index]
+      def decimal_value
+        amount.split(".")[1] || "00"
       end
 
       def units_element
         return "" if decimals == "matching" && !abbreviate && !unit
 
-        _, decimal_part = amount.split(".")
-        if unit.nil? && abbreviate == false
-          decimal_part.nil? ? ".00" : ".#{decimal_part}"
+        if unit.nil? && !abbreviate
+          if decimals == "matching"
+            ""
+          else
+            ".#{decimal_value}"
+          end
         else
           abbreviate ? "#{abbreviated_value(-1)}#{unit}" : unit
         end
       end
 
+      def abbreviated_value(index = 0..-2)
+        value = amount.split(".").first.gsub(",", "").to_i
+        abbreviated_num = number_to_human(value, units: { thousand: "K", million: "M", billion: "B", trillion: "T" }).gsub(/\s+/, "")
+        abbreviated_num[index]
+      end
+
       def size_value
         case size
         when "lg"
@@ -132,6 +145,20 @@ def size_value
       def dark_class
         dark ? "dark" : nil
       end
+
+      def formatted_amount
+        return abbreviated_value if abbreviate
+
+        if decimals == "matching"
+          if comma_separator
+            number_with_delimiter(amount.gsub(",", ""))
+          else
+            amount
+          end
+        else
+          whole_value
+        end
+      end
     end
   end
 end
diff --git a/playbook/app/pb_kits/playbook/pb_currency/currency.test.js b/playbook/app/pb_kits/playbook/pb_currency/currency.test.js
index 9a42143689..e55e3b297f 100644
--- a/playbook/app/pb_kits/playbook/pb_currency/currency.test.js
+++ b/playbook/app/pb_kits/playbook/pb_currency/currency.test.js
@@ -61,3 +61,38 @@ test('decimals default prop returns decimals as body text', () => {
   expect(currencyKit.querySelector('.pb_currency_value')).toHaveTextContent('320')
   expect(currencyKit.querySelector('.unit')).toHaveTextContent('.20')
 })
+
+
+test('commaSeparator prop returns comma separated amount', () => {
+  render(
+    <Currency 
+        amount="1234567890"
+        commaSeparator
+        data={{ testid: 'comma-test' }}
+    />
+  )
+  expect(screen.getByTestId('comma-test')).toHaveTextContent('1,234,567,890')
+})
+
+test('commaSeparator prop returns comma separated amount with decimals', () => {
+  render(
+    <Currency 
+        amount="1234567890.12"
+        commaSeparator
+        data={{ testid: 'comma-test-decimals' }}
+    />
+  )
+  expect(screen.getByTestId('comma-test-decimals')).toHaveTextContent('1,234,567,890.12')
+})
+
+test('commaSeparator prop returns comma separated amount with decimals="matching"', () => {
+  render(
+    <Currency 
+        amount="1234567890.12"
+        commaSeparator
+        data={{ testid: 'comma-test-decimals-matching' }}
+        decimals="matching"
+    />
+  )
+  expect(screen.getByTestId('comma-test-decimals-matching')).toHaveTextContent('1,234,567,890.12')
+})
diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb
new file mode 100644
index 0000000000..48f0548013
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb
@@ -0,0 +1,7 @@
+<%= pb_rails("currency", props: {
+  amount: '1234567.89',
+  comma_separator: true,
+  size: 'lg',
+  emphasized: false,
+  decimals: 'matching',
+}) %>
diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx
new file mode 100644
index 0000000000..851cf52a10
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx
@@ -0,0 +1,18 @@
+import React from "react"
+
+import Currency from "../_currency"
+
+const CurrencyCommaSeparator = (props) => {
+  return (
+    <Currency
+        amount='1234567.89'
+        commaSeparator
+        decimals="matching"
+        emphasized={false}
+        size="lg"
+        {...props}
+    />
+  )
+}
+
+export default CurrencyCommaSeparator
diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md
new file mode 100644
index 0000000000..b2c926c110
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md
@@ -0,0 +1,3 @@
+The optional `commaSeparator` can be used to auto-format the use of commas as a thousands separator. 
+
+**NOTE:** If the value passed into the `amount` prop is already comma-dilineated, it will not add additional commas.
diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/example.yml b/playbook/app/pb_kits/playbook/pb_currency/docs/example.yml
index a8354bce15..8568c2a514 100644
--- a/playbook/app/pb_kits/playbook/pb_currency/docs/example.yml
+++ b/playbook/app/pb_kits/playbook/pb_currency/docs/example.yml
@@ -8,7 +8,8 @@ examples:
   - currency_abbreviated: Abbreviate Larger Amounts
   - currency_matching_decimals: Matching Decimals
   - currency_unstyled: Unstyled
-
+  - currency_comma_separator: Comma Separator
+  
   react:
   - currency_variants: Variants
   - currency_size: Size
@@ -17,6 +18,7 @@ examples:
   - currency_abbreviated: Abbreviate Larger Amounts
   - currency_matching_decimals: Matching Decimals
   - currency_unstyled: Unstyled
+  - currency_comma_separator: Comma Separator
 
   swift:
   - currency_size_swift: Size
diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/index.js b/playbook/app/pb_kits/playbook/pb_currency/docs/index.js
index e0ab2b0b99..86ae571909 100644
--- a/playbook/app/pb_kits/playbook/pb_currency/docs/index.js
+++ b/playbook/app/pb_kits/playbook/pb_currency/docs/index.js
@@ -5,3 +5,4 @@ export { default as CurrencyNoSymbol } from './_currency_no_symbol.jsx'
 export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
 export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
 export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
+export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'
diff --git a/playbook/spec/pb_kits/playbook/pb_currency/currency_spec.rb b/playbook/spec/pb_kits/playbook/pb_currency/currency_spec.rb
index 6a5d8bf3e6..f69e4a8449 100644
--- a/playbook/spec/pb_kits/playbook/pb_currency/currency_spec.rb
+++ b/playbook/spec/pb_kits/playbook/pb_currency/currency_spec.rb
@@ -15,6 +15,7 @@
   it { is_expected.to define_enum_prop(:variant).with_default("default").with_values("default", "light", "bold") }
   it { is_expected.to define_prop(:abbreviate).with_default(false).of_type(Playbook::Props::Boolean) }
   it { is_expected.to define_enum_prop(:decimals).with_default("default").with_values("default", "matching") }
+  it { is_expected.to define_prop(:comma_separator).with_default(false).of_type(Playbook::Props::Boolean) }
 
   describe "#classname" do
     it "returns namespaced class name", :aggregate_failures do
@@ -75,4 +76,12 @@
       expect(num.body_props[:text]).to eq ".20"
     end
   end
+
+  describe "when prop commaSeparator is set to true" do
+    it "returns comma separated amount" do
+      num = subject.new(comma_separator: true, amount: "1234567890")
+
+      expect(num.title_props[:text]).to eq "1,234,567,890"
+    end
+  end
 end

From 5c32dbde8a406a1a4920e723b97ccc32ac5e75ca Mon Sep 17 00:00:00 2001
From: Jasper Furniss <jasper.furniss@powerhrg.com>
Date: Wed, 30 Oct 2024 15:59:48 -0400
Subject: [PATCH 08/10] Revert "[PBNTR-555] Currency Kit Updates" (#3866)

Reverts powerhome/playbook#3832
---
 .../workflows/github-actions-check-labels.yml |  0
 .../playbook/pb_currency/_currency.tsx        | 22 +++------
 .../pb_kits/playbook/pb_currency/currency.rb  | 49 +++++--------------
 .../playbook/pb_currency/currency.test.js     | 35 -------------
 .../docs/_currency_comma_separator.html.erb   |  7 ---
 .../docs/_currency_comma_separator.jsx        | 18 -------
 .../docs/_currency_comma_separator.md         |  3 --
 .../playbook/pb_currency/docs/example.yml     |  4 +-
 .../playbook/pb_currency/docs/index.js        |  1 -
 .../playbook/pb_currency/currency_spec.rb     |  9 ----
 10 files changed, 18 insertions(+), 130 deletions(-)
 delete mode 100644 .github/workflows/github-actions-check-labels.yml
 delete mode 100644 playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb
 delete mode 100644 playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx
 delete mode 100644 playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md

diff --git a/.github/workflows/github-actions-check-labels.yml b/.github/workflows/github-actions-check-labels.yml
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/playbook/app/pb_kits/playbook/pb_currency/_currency.tsx b/playbook/app/pb_kits/playbook/pb_currency/_currency.tsx
index c03f683541..f0673c777b 100644
--- a/playbook/app/pb_kits/playbook/pb_currency/_currency.tsx
+++ b/playbook/app/pb_kits/playbook/pb_currency/_currency.tsx
@@ -26,7 +26,6 @@ type CurrencyProps = {
   variant?: 'default' | 'light' | 'bold',
   unit?: string,
   unstyled?: boolean,
-  commaSeparator?: boolean,
 }
 
 const sizes: {lg: 1, md: 3, sm: 4} = {
@@ -54,7 +53,6 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     variant = 'default',
     dark = false,
     unstyled = false,
-    commaSeparator = false,
   } = props
 
   const emphasizedClass = emphasized ? '' : '_deemphasized'
@@ -76,7 +74,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     className
   )
 
-  const getFormattedNumber = (input: number | any) => new Intl.NumberFormat('en-US', {
+  const getFormattedNumber = (input: number | any ) => new Intl.NumberFormat('en-US', {
     notation: 'compact',
     maximumFractionDigits: 1,
   }).format(input)
@@ -90,20 +88,12 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     return isAmount ? num.slice(0, -1) : isUnit ? num.slice(-1) : ''
   }
 
-  const getMatchingDecimalAmount = decimals === "matching" ? amount : whole
-  const getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
+  const getMatchingDecimalAmount = decimals === "matching" ? amount : whole,
+    getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
 
-  const formatAmount = (amount: string) => {
-    if (!commaSeparator) return amount;
-    
-    const [wholePart, decimalPart] = amount.split('.');
-    const formattedWhole = new Intl.NumberFormat('en-US').format(parseInt(wholePart));
-    return decimalPart ? `${formattedWhole}.${decimalPart}` : formattedWhole;
-  }
-
-  const getAmount = abbreviate ? getAbbreviatedValue('amount') : formatAmount(getMatchingDecimalAmount)
-  const getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null
-  const getDecimalValue = abbreviate ? '' : getMatchingDecimalValue
+  const getAmount = abbreviate ? getAbbreviatedValue('amount') : getMatchingDecimalAmount,
+    getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null,
+    getDecimalValue = abbreviate ? '' : getMatchingDecimalValue
 
   return (
     <div
diff --git a/playbook/app/pb_kits/playbook/pb_currency/currency.rb b/playbook/app/pb_kits/playbook/pb_currency/currency.rb
index 796a1abd07..32959ba8e7 100644
--- a/playbook/app/pb_kits/playbook/pb_currency/currency.rb
+++ b/playbook/app/pb_kits/playbook/pb_currency/currency.rb
@@ -43,9 +43,6 @@ class Currency < Playbook::KitBase
       prop :unstyled, type: Playbook::Props::Boolean,
                       default: false
 
-      prop :comma_separator, type: Playbook::Props::Boolean,
-                             default: false
-
       def classname
         generate_classname("pb_currency_kit", align, size, dark_class)
       end
@@ -68,7 +65,7 @@ def caption_props
       def title_props
         {
           size: size_value,
-          text: abbreviate ? abbreviated_value : formatted_amount,
+          text: abbreviate ? abbreviated_value : whole_value,
           classname: "pb_currency_value",
           dark: dark,
         }
@@ -99,38 +96,28 @@ def variant_class
     private
 
       def whole_value
-        value = amount.split(".").first
-        if comma_separator
-          number_with_delimiter(value.gsub(",", ""))
-        else
-          value
-        end
+        return amount if decimals == "matching"
+
+        amount.split(".").first.to_s
       end
 
-      def decimal_value
-        amount.split(".")[1] || "00"
+      def abbreviated_value(index = 0..-2)
+        value = amount.split(".").first.split(",").join("")
+        abbreviated_num = number_to_human(value, units: { thousand: "K", million: "M", billion: "B", trillion: "T" }).gsub(/\s+/, "").to_s
+        abbreviated_num[index]
       end
 
       def units_element
         return "" if decimals == "matching" && !abbreviate && !unit
 
-        if unit.nil? && !abbreviate
-          if decimals == "matching"
-            ""
-          else
-            ".#{decimal_value}"
-          end
+        _, decimal_part = amount.split(".")
+        if unit.nil? && abbreviate == false
+          decimal_part.nil? ? ".00" : ".#{decimal_part}"
         else
           abbreviate ? "#{abbreviated_value(-1)}#{unit}" : unit
         end
       end
 
-      def abbreviated_value(index = 0..-2)
-        value = amount.split(".").first.gsub(",", "").to_i
-        abbreviated_num = number_to_human(value, units: { thousand: "K", million: "M", billion: "B", trillion: "T" }).gsub(/\s+/, "")
-        abbreviated_num[index]
-      end
-
       def size_value
         case size
         when "lg"
@@ -145,20 +132,6 @@ def size_value
       def dark_class
         dark ? "dark" : nil
       end
-
-      def formatted_amount
-        return abbreviated_value if abbreviate
-
-        if decimals == "matching"
-          if comma_separator
-            number_with_delimiter(amount.gsub(",", ""))
-          else
-            amount
-          end
-        else
-          whole_value
-        end
-      end
     end
   end
 end
diff --git a/playbook/app/pb_kits/playbook/pb_currency/currency.test.js b/playbook/app/pb_kits/playbook/pb_currency/currency.test.js
index e55e3b297f..9a42143689 100644
--- a/playbook/app/pb_kits/playbook/pb_currency/currency.test.js
+++ b/playbook/app/pb_kits/playbook/pb_currency/currency.test.js
@@ -61,38 +61,3 @@ test('decimals default prop returns decimals as body text', () => {
   expect(currencyKit.querySelector('.pb_currency_value')).toHaveTextContent('320')
   expect(currencyKit.querySelector('.unit')).toHaveTextContent('.20')
 })
-
-
-test('commaSeparator prop returns comma separated amount', () => {
-  render(
-    <Currency 
-        amount="1234567890"
-        commaSeparator
-        data={{ testid: 'comma-test' }}
-    />
-  )
-  expect(screen.getByTestId('comma-test')).toHaveTextContent('1,234,567,890')
-})
-
-test('commaSeparator prop returns comma separated amount with decimals', () => {
-  render(
-    <Currency 
-        amount="1234567890.12"
-        commaSeparator
-        data={{ testid: 'comma-test-decimals' }}
-    />
-  )
-  expect(screen.getByTestId('comma-test-decimals')).toHaveTextContent('1,234,567,890.12')
-})
-
-test('commaSeparator prop returns comma separated amount with decimals="matching"', () => {
-  render(
-    <Currency 
-        amount="1234567890.12"
-        commaSeparator
-        data={{ testid: 'comma-test-decimals-matching' }}
-        decimals="matching"
-    />
-  )
-  expect(screen.getByTestId('comma-test-decimals-matching')).toHaveTextContent('1,234,567,890.12')
-})
diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb
deleted file mode 100644
index 48f0548013..0000000000
--- a/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb
+++ /dev/null
@@ -1,7 +0,0 @@
-<%= pb_rails("currency", props: {
-  amount: '1234567.89',
-  comma_separator: true,
-  size: 'lg',
-  emphasized: false,
-  decimals: 'matching',
-}) %>
diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx
deleted file mode 100644
index 851cf52a10..0000000000
--- a/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react"
-
-import Currency from "../_currency"
-
-const CurrencyCommaSeparator = (props) => {
-  return (
-    <Currency
-        amount='1234567.89'
-        commaSeparator
-        decimals="matching"
-        emphasized={false}
-        size="lg"
-        {...props}
-    />
-  )
-}
-
-export default CurrencyCommaSeparator
diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md
deleted file mode 100644
index b2c926c110..0000000000
--- a/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md
+++ /dev/null
@@ -1,3 +0,0 @@
-The optional `commaSeparator` can be used to auto-format the use of commas as a thousands separator. 
-
-**NOTE:** If the value passed into the `amount` prop is already comma-dilineated, it will not add additional commas.
diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/example.yml b/playbook/app/pb_kits/playbook/pb_currency/docs/example.yml
index 8568c2a514..a8354bce15 100644
--- a/playbook/app/pb_kits/playbook/pb_currency/docs/example.yml
+++ b/playbook/app/pb_kits/playbook/pb_currency/docs/example.yml
@@ -8,8 +8,7 @@ examples:
   - currency_abbreviated: Abbreviate Larger Amounts
   - currency_matching_decimals: Matching Decimals
   - currency_unstyled: Unstyled
-  - currency_comma_separator: Comma Separator
-  
+
   react:
   - currency_variants: Variants
   - currency_size: Size
@@ -18,7 +17,6 @@ examples:
   - currency_abbreviated: Abbreviate Larger Amounts
   - currency_matching_decimals: Matching Decimals
   - currency_unstyled: Unstyled
-  - currency_comma_separator: Comma Separator
 
   swift:
   - currency_size_swift: Size
diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/index.js b/playbook/app/pb_kits/playbook/pb_currency/docs/index.js
index 86ae571909..e0ab2b0b99 100644
--- a/playbook/app/pb_kits/playbook/pb_currency/docs/index.js
+++ b/playbook/app/pb_kits/playbook/pb_currency/docs/index.js
@@ -5,4 +5,3 @@ export { default as CurrencyNoSymbol } from './_currency_no_symbol.jsx'
 export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
 export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
 export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
-export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'
diff --git a/playbook/spec/pb_kits/playbook/pb_currency/currency_spec.rb b/playbook/spec/pb_kits/playbook/pb_currency/currency_spec.rb
index f69e4a8449..6a5d8bf3e6 100644
--- a/playbook/spec/pb_kits/playbook/pb_currency/currency_spec.rb
+++ b/playbook/spec/pb_kits/playbook/pb_currency/currency_spec.rb
@@ -15,7 +15,6 @@
   it { is_expected.to define_enum_prop(:variant).with_default("default").with_values("default", "light", "bold") }
   it { is_expected.to define_prop(:abbreviate).with_default(false).of_type(Playbook::Props::Boolean) }
   it { is_expected.to define_enum_prop(:decimals).with_default("default").with_values("default", "matching") }
-  it { is_expected.to define_prop(:comma_separator).with_default(false).of_type(Playbook::Props::Boolean) }
 
   describe "#classname" do
     it "returns namespaced class name", :aggregate_failures do
@@ -76,12 +75,4 @@
       expect(num.body_props[:text]).to eq ".20"
     end
   end
-
-  describe "when prop commaSeparator is set to true" do
-    it "returns comma separated amount" do
-      num = subject.new(comma_separator: true, amount: "1234567890")
-
-      expect(num.title_props[:text]).to eq "1,234,567,890"
-    end
-  end
 end

From b5cc921363c77f8ec219e9ba2b9bbd7f5d2deab2 Mon Sep 17 00:00:00 2001
From: Rachel Radford <54749071+RachelRadford21@users.noreply.github.com>
Date: Wed, 30 Oct 2024 17:08:17 -0400
Subject: [PATCH 09/10] [PBIOS-602] Swift Changelog Update (#3854)

**What does this PR do?** A clear and concise description with your
runway ticket url.
[PBIOS-602] Swift Changelog Update

**Screenshots:** Screenshots to visualize your addition/change


**How to test?** Steps to confirm the desired behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See addition/change


#### 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.
- [x] **TESTS** I have added test coverage to my code.
---
 playbook/SWIFT_CHANGELOG.md | 53 +++++++++++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)

diff --git a/playbook/SWIFT_CHANGELOG.md b/playbook/SWIFT_CHANGELOG.md
index 7a0624a559..24bd2c6434 100644
--- a/playbook/SWIFT_CHANGELOG.md
+++ b/playbook/SWIFT_CHANGELOG.md
@@ -1,3 +1,56 @@
+# 🚀 Playbook Swift 6.4.0: Enhanced Buttons, Truncations, and Dynamic Typeahead! 🚀
+##### Oct 18, 2024
+![image](https://github.com/user-attachments/assets/875ae784-bb68-47e1-ae67-3d25e90f427e)
+
+The latest release, Playbook Swift 6.4.0, brings new enhancements focused on flexibility, user experience, and seamless integrations. Key highlights include the new **Destructive Button**, adjustments to **Typeahead** for height and list display, and improved truncation in the User Kit for a cleaner, more responsive UI.
+
+[6.4.0](https://github.com/powerhome/playbook-swift/tree/6.4.0) full list of changes:
+
+### Playbook Changes
+
+#### Kit Enhancements
+- **Destructive Button**: A new button style designed for critical actions. (#457)
+- **Height Adjusted Dropdown**: Improved dropdown to better fit varied content heights. (#450)
+- **User Kit Truncation**: Tighter, more dynamic user name displays. (#458)
+- **Add Props to PBMessage**: Additional properties to further customize PBMessage. (#456)
+- **Typeahead Enhancements**:
+  - **Show No Option**: Now includes messaging when no options are available. (#455)
+  - **Section List**: Categorized options for a more organized typeahead. (#459)
+  - **Initial Value Support**: Set a starting value in PBSwift Typeahead.
+  - **Truncated User Name Support**: Cleaner user name display in User Kit.
+
+#### Bug Fixes
+- **Message Component Cursor Fix**: Improved cursor behavior for smooth typing experiences. (#454)
+
+### Documentation Updates
+- **Typeahead Enhancements**: Documented updates for scrollable lists, dropdown height adjustments, conversation name display, and improved conversation management options.
+
+### Connect-Specific
+- **Conditional Popover Handler**: Fixed the “Close” button issue with a new conditional handler. (#565)
+
+🔗 **Full Changelog**: https://github.com/powerhome/playbook-swift/compare/6.3.1...6.4.0
+
+
+
+# ✨ Dynamic Status Indicators & Interactive Messaging! ✨
+##### Sept 20, 2024
+![image](https://github.com/user-attachments/assets/84b6e16c-9fa4-45ba-b00f-6ffa223dbbb4)
+
+We’re excited to introduce Playbook Swift 6.3.0, featuring two key updates: a customizable PBAvatar status indicator size and new interactivity for the message kit, delivering more responsive, intuitive user experiences. Here’s what’s new:
+
+[6.3.0](https://github.com/powerhome/playbook-swift/tree/6.3.0) full list of changes:
+
+**Kit Enhancements**
+- **PBAvatar Status Indicator Size**: Adjust and style status indicators with more control for a sharper, polished look. #525
+- **Handle Click on Message Kit**: Respond to user interactions seamlessly, elevating message engagement. #526
+- **Dark Mode Reaction Button Improvements**: Enhanced visibility with border and button refinements for Dark Mode. #508, #528
+
+### Bug Fix
+- **Online Status Color**: Ensuring accurate color representation for improved visual clarity. #566
+  
+
+🔗 **Full Changelog**: https://github.com/powerhome/playbook-swift/compare/6.2.0...6.3.0
+
 # ✨ Enhance, Customize, and Expand! ✨
 ##### Aug 28, 2024
 

From c965ab789e1d3048ee52fa9f5432598aba91552b Mon Sep 17 00:00:00 2001
From: Jasper Furniss <jasper.furniss@powerhrg.com>
Date: Thu, 31 Oct 2024 09:31:34 -0400
Subject: [PATCH 10/10] [PBNTR-555] Currency Kit Comma Separator (#3867)

**What does this PR do?** A clear and concise description with your
runway ticket url.


**Screenshots:** Screenshots to visualize your addition/change


**How to test?** Steps to confirm the desired behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See addition/change


#### Checklist:
- [ ] **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.
- [ ] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
- [ ] **TESTS** I have added test coverage to my code.
---
 .../workflows/github-actions-check-labels.yml |  0
 .../playbook/pb_currency/_currency.tsx        | 22 ++++++---
 .../pb_kits/playbook/pb_currency/currency.rb  | 49 ++++++++++++++-----
 .../playbook/pb_currency/currency.test.js     | 35 +++++++++++++
 .../docs/_currency_comma_separator.html.erb   |  7 +++
 .../docs/_currency_comma_separator.jsx        | 18 +++++++
 .../docs/_currency_comma_separator.md         |  3 ++
 .../playbook/pb_currency/docs/example.yml     |  4 +-
 .../playbook/pb_currency/docs/index.js        |  1 +
 .../playbook/pb_currency/currency_spec.rb     |  9 ++++
 10 files changed, 130 insertions(+), 18 deletions(-)
 create mode 100644 .github/workflows/github-actions-check-labels.yml
 create mode 100644 playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb
 create mode 100644 playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx
 create mode 100644 playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md

diff --git a/.github/workflows/github-actions-check-labels.yml b/.github/workflows/github-actions-check-labels.yml
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/playbook/app/pb_kits/playbook/pb_currency/_currency.tsx b/playbook/app/pb_kits/playbook/pb_currency/_currency.tsx
index f0673c777b..c03f683541 100644
--- a/playbook/app/pb_kits/playbook/pb_currency/_currency.tsx
+++ b/playbook/app/pb_kits/playbook/pb_currency/_currency.tsx
@@ -26,6 +26,7 @@ type CurrencyProps = {
   variant?: 'default' | 'light' | 'bold',
   unit?: string,
   unstyled?: boolean,
+  commaSeparator?: boolean,
 }
 
 const sizes: {lg: 1, md: 3, sm: 4} = {
@@ -53,6 +54,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     variant = 'default',
     dark = false,
     unstyled = false,
+    commaSeparator = false,
   } = props
 
   const emphasizedClass = emphasized ? '' : '_deemphasized'
@@ -74,7 +76,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     className
   )
 
-  const getFormattedNumber = (input: number | any ) => new Intl.NumberFormat('en-US', {
+  const getFormattedNumber = (input: number | any) => new Intl.NumberFormat('en-US', {
     notation: 'compact',
     maximumFractionDigits: 1,
   }).format(input)
@@ -88,12 +90,20 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     return isAmount ? num.slice(0, -1) : isUnit ? num.slice(-1) : ''
   }
 
-  const getMatchingDecimalAmount = decimals === "matching" ? amount : whole,
-    getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
+  const getMatchingDecimalAmount = decimals === "matching" ? amount : whole
+  const getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
 
-  const getAmount = abbreviate ? getAbbreviatedValue('amount') : getMatchingDecimalAmount,
-    getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null,
-    getDecimalValue = abbreviate ? '' : getMatchingDecimalValue
+  const formatAmount = (amount: string) => {
+    if (!commaSeparator) return amount;
+    
+    const [wholePart, decimalPart] = amount.split('.');
+    const formattedWhole = new Intl.NumberFormat('en-US').format(parseInt(wholePart));
+    return decimalPart ? `${formattedWhole}.${decimalPart}` : formattedWhole;
+  }
+
+  const getAmount = abbreviate ? getAbbreviatedValue('amount') : formatAmount(getMatchingDecimalAmount)
+  const getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null
+  const getDecimalValue = abbreviate ? '' : getMatchingDecimalValue
 
   return (
     <div
diff --git a/playbook/app/pb_kits/playbook/pb_currency/currency.rb b/playbook/app/pb_kits/playbook/pb_currency/currency.rb
index 32959ba8e7..796a1abd07 100644
--- a/playbook/app/pb_kits/playbook/pb_currency/currency.rb
+++ b/playbook/app/pb_kits/playbook/pb_currency/currency.rb
@@ -43,6 +43,9 @@ class Currency < Playbook::KitBase
       prop :unstyled, type: Playbook::Props::Boolean,
                       default: false
 
+      prop :comma_separator, type: Playbook::Props::Boolean,
+                             default: false
+
       def classname
         generate_classname("pb_currency_kit", align, size, dark_class)
       end
@@ -65,7 +68,7 @@ def caption_props
       def title_props
         {
           size: size_value,
-          text: abbreviate ? abbreviated_value : whole_value,
+          text: abbreviate ? abbreviated_value : formatted_amount,
           classname: "pb_currency_value",
           dark: dark,
         }
@@ -96,28 +99,38 @@ def variant_class
     private
 
       def whole_value
-        return amount if decimals == "matching"
-
-        amount.split(".").first.to_s
+        value = amount.split(".").first
+        if comma_separator
+          number_with_delimiter(value.gsub(",", ""))
+        else
+          value
+        end
       end
 
-      def abbreviated_value(index = 0..-2)
-        value = amount.split(".").first.split(",").join("")
-        abbreviated_num = number_to_human(value, units: { thousand: "K", million: "M", billion: "B", trillion: "T" }).gsub(/\s+/, "").to_s
-        abbreviated_num[index]
+      def decimal_value
+        amount.split(".")[1] || "00"
       end
 
       def units_element
         return "" if decimals == "matching" && !abbreviate && !unit
 
-        _, decimal_part = amount.split(".")
-        if unit.nil? && abbreviate == false
-          decimal_part.nil? ? ".00" : ".#{decimal_part}"
+        if unit.nil? && !abbreviate
+          if decimals == "matching"
+            ""
+          else
+            ".#{decimal_value}"
+          end
         else
           abbreviate ? "#{abbreviated_value(-1)}#{unit}" : unit
         end
       end
 
+      def abbreviated_value(index = 0..-2)
+        value = amount.split(".").first.gsub(",", "").to_i
+        abbreviated_num = number_to_human(value, units: { thousand: "K", million: "M", billion: "B", trillion: "T" }).gsub(/\s+/, "")
+        abbreviated_num[index]
+      end
+
       def size_value
         case size
         when "lg"
@@ -132,6 +145,20 @@ def size_value
       def dark_class
         dark ? "dark" : nil
       end
+
+      def formatted_amount
+        return abbreviated_value if abbreviate
+
+        if decimals == "matching"
+          if comma_separator
+            number_with_delimiter(amount.gsub(",", ""))
+          else
+            amount
+          end
+        else
+          whole_value
+        end
+      end
     end
   end
 end
diff --git a/playbook/app/pb_kits/playbook/pb_currency/currency.test.js b/playbook/app/pb_kits/playbook/pb_currency/currency.test.js
index 9a42143689..e55e3b297f 100644
--- a/playbook/app/pb_kits/playbook/pb_currency/currency.test.js
+++ b/playbook/app/pb_kits/playbook/pb_currency/currency.test.js
@@ -61,3 +61,38 @@ test('decimals default prop returns decimals as body text', () => {
   expect(currencyKit.querySelector('.pb_currency_value')).toHaveTextContent('320')
   expect(currencyKit.querySelector('.unit')).toHaveTextContent('.20')
 })
+
+
+test('commaSeparator prop returns comma separated amount', () => {
+  render(
+    <Currency 
+        amount="1234567890"
+        commaSeparator
+        data={{ testid: 'comma-test' }}
+    />
+  )
+  expect(screen.getByTestId('comma-test')).toHaveTextContent('1,234,567,890')
+})
+
+test('commaSeparator prop returns comma separated amount with decimals', () => {
+  render(
+    <Currency 
+        amount="1234567890.12"
+        commaSeparator
+        data={{ testid: 'comma-test-decimals' }}
+    />
+  )
+  expect(screen.getByTestId('comma-test-decimals')).toHaveTextContent('1,234,567,890.12')
+})
+
+test('commaSeparator prop returns comma separated amount with decimals="matching"', () => {
+  render(
+    <Currency 
+        amount="1234567890.12"
+        commaSeparator
+        data={{ testid: 'comma-test-decimals-matching' }}
+        decimals="matching"
+    />
+  )
+  expect(screen.getByTestId('comma-test-decimals-matching')).toHaveTextContent('1,234,567,890.12')
+})
diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb
new file mode 100644
index 0000000000..48f0548013
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb
@@ -0,0 +1,7 @@
+<%= pb_rails("currency", props: {
+  amount: '1234567.89',
+  comma_separator: true,
+  size: 'lg',
+  emphasized: false,
+  decimals: 'matching',
+}) %>
diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx
new file mode 100644
index 0000000000..851cf52a10
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx
@@ -0,0 +1,18 @@
+import React from "react"
+
+import Currency from "../_currency"
+
+const CurrencyCommaSeparator = (props) => {
+  return (
+    <Currency
+        amount='1234567.89'
+        commaSeparator
+        decimals="matching"
+        emphasized={false}
+        size="lg"
+        {...props}
+    />
+  )
+}
+
+export default CurrencyCommaSeparator
diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md
new file mode 100644
index 0000000000..b2c926c110
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md
@@ -0,0 +1,3 @@
+The optional `commaSeparator` can be used to auto-format the use of commas as a thousands separator. 
+
+**NOTE:** If the value passed into the `amount` prop is already comma-dilineated, it will not add additional commas.
diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/example.yml b/playbook/app/pb_kits/playbook/pb_currency/docs/example.yml
index a8354bce15..8568c2a514 100644
--- a/playbook/app/pb_kits/playbook/pb_currency/docs/example.yml
+++ b/playbook/app/pb_kits/playbook/pb_currency/docs/example.yml
@@ -8,7 +8,8 @@ examples:
   - currency_abbreviated: Abbreviate Larger Amounts
   - currency_matching_decimals: Matching Decimals
   - currency_unstyled: Unstyled
-
+  - currency_comma_separator: Comma Separator
+  
   react:
   - currency_variants: Variants
   - currency_size: Size
@@ -17,6 +18,7 @@ examples:
   - currency_abbreviated: Abbreviate Larger Amounts
   - currency_matching_decimals: Matching Decimals
   - currency_unstyled: Unstyled
+  - currency_comma_separator: Comma Separator
 
   swift:
   - currency_size_swift: Size
diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/index.js b/playbook/app/pb_kits/playbook/pb_currency/docs/index.js
index e0ab2b0b99..86ae571909 100644
--- a/playbook/app/pb_kits/playbook/pb_currency/docs/index.js
+++ b/playbook/app/pb_kits/playbook/pb_currency/docs/index.js
@@ -5,3 +5,4 @@ export { default as CurrencyNoSymbol } from './_currency_no_symbol.jsx'
 export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
 export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
 export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
+export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'
diff --git a/playbook/spec/pb_kits/playbook/pb_currency/currency_spec.rb b/playbook/spec/pb_kits/playbook/pb_currency/currency_spec.rb
index 6a5d8bf3e6..f69e4a8449 100644
--- a/playbook/spec/pb_kits/playbook/pb_currency/currency_spec.rb
+++ b/playbook/spec/pb_kits/playbook/pb_currency/currency_spec.rb
@@ -15,6 +15,7 @@
   it { is_expected.to define_enum_prop(:variant).with_default("default").with_values("default", "light", "bold") }
   it { is_expected.to define_prop(:abbreviate).with_default(false).of_type(Playbook::Props::Boolean) }
   it { is_expected.to define_enum_prop(:decimals).with_default("default").with_values("default", "matching") }
+  it { is_expected.to define_prop(:comma_separator).with_default(false).of_type(Playbook::Props::Boolean) }
 
   describe "#classname" do
     it "returns namespaced class name", :aggregate_failures do
@@ -75,4 +76,12 @@
       expect(num.body_props[:text]).to eq ".20"
     end
   end
+
+  describe "when prop commaSeparator is set to true" do
+    it "returns comma separated amount" do
+      num = subject.new(comma_separator: true, amount: "1234567890")
+
+      expect(num.title_props[:text]).to eq "1,234,567,890"
+    end
+  end
 end