playbook_ui 14.25.0.pre.alpha.PLAY2450iconbuttonaccessibility10050 → 14.25.0.pre.alpha.PLAY2467contactkitinternational10238

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dd227aa3cf1f1d1cbd711c79950fb9ca64c9d87e4dffb1024c57573e21cb44f8
-  data.tar.gz: 8da9eccfa3f32b5289bb746aa4062d10caa4f97da8d2a8b423a7dacf0b7c2393
+  metadata.gz: 070d8c050710240a666b93b0fc10c4c3eee2eb52d6b71a764314eb7dffdb1607
+  data.tar.gz: 75a9695755bfa7f568c68e12f04e2da3fb4691d6fbf2d19bc1e76fbdab1a8b18
 SHA512:
-  metadata.gz: 7df6f55ba47742e8bf1cc9e9c07a9c8669eb461b979423f6ba8cc9272d589fb8000b47ed9cbbf1fac3f76c30a278615705abcc0115a6ab0d2f03956221d7a9b0
-  data.tar.gz: dc98d1d465c56dfa04713dcb8b6833032a0a34d73c4370d42e272ade458b55ca510cb9d21cd161fe65b07be5bab249fa1cce104d0e305301eed8de5e9dd11340
+  metadata.gz: 8099640bc4cdd08a3d14375cec05c19642900b07cab98d5c942667c4c0c16641914d2ecd50aa52133456e89c0e6bb11e851d6201fa453e4215f962a12f35bdd5
+  data.tar.gz: 0c01a89ccc4326a2ad87e2b2f14205cb4a5f0c213da84714b16d80e21172c3144d8e2aacc8eec1ff4911f183ed3038daf7d8f46341d8655b28cb7912a935ee21

data/app/pb_kits/playbook/pb_contact/_contact.tsx

@@ -17,6 +17,7 @@ const contactTypeMap: { [key: string]: string } = {
   'work': 'phone-office',
   'work-cell': 'phone-laptop',
   'wrong-phone': 'phone-slash',
+  'international': 'globe',
 }
 
 const envelopeIcon = getAllIcons()["envelope"].icon as unknown as { [key: string]: SVGElement }
@@ -24,6 +25,10 @@ const envelopeIcon = getAllIcons()["envelope"].icon as unknown as { [key: string
 const formatContact = (contactString: string, contactType: string) => {
   if (contactType === 'email') return contactString
 
+  // International phone numbers are unformatted
+  if (contactType === 'international') return contactString
+  
+  // Format US numbers
   const cleaned = contactString.replace(/\D/g, '')
   const phoneNumber = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/)
 

data/app/pb_kits/playbook/pb_contact/contact.rb

@@ -29,6 +29,8 @@ module Playbook
           "phone-slash"
         when "extension"
           "phone-plus"
+        when "international"
+          "globe"
         else # "unknown" || "other"
           "phone"
         end
@@ -39,6 +41,8 @@ module Playbook
           contact_value
         elsif contact_type == "extension" && contact_value.match(/^\d{4}$/)
           contact_value
+        elsif contact_type == "international"
+          contact_value
         else
           number_to_phone(formatted_value, area_code: true)
         end

data/app/pb_kits/playbook/pb_contact/contact.test.js

@@ -66,6 +66,12 @@ test('returns correct icon', () => {
           contactValue="1234"
           data={{ testid: 'test-extension' }}
       />
+      <Contact
+          contactDetail="International"
+          contactType="international"
+          contactValue="+44 20 7946 0958"
+          data={{ testid: 'test-international' }}
+      />
       <Contact
           contactDetail=""
           contactType=""
@@ -83,10 +89,11 @@ test('returns correct icon', () => {
   expect(screen.getByTestId('test-wrong-phone').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-wrong-type').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-extension').querySelector('.pb_custom_icon')).toBeInTheDocument()
+  expect(screen.getByTestId('test-international').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-empty').querySelector('.pb_custom_icon')).toBeInTheDocument()
 })
 
-test("not compliant values return null in phone related contact types", () => {
+test("not compliant values return null in US phone related contact types", () => {
   const notCompliantValues = [
     "349-185-998223",
     "349-1858",
@@ -129,3 +136,16 @@ test("not compliant values return null in phone related contact types", () => {
     )
   })
 })
+
+test('international contact type preserves original format', () => {
+  render(
+    <Contact
+        contactType="international"
+        contactValue="+44 20 7946 0958"
+        data={{ testid: 'test-international-format' }}
+    />
+  )
+
+  const kit = screen.getByTestId('test-international-format')
+  expect(kit).toHaveTextContent('+44 20 7946 0958')
+})

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb

@@ -13,7 +13,7 @@
 }) %>
 
 <%= pb_rails("contact", props: {
-  contact_type: "wrong number",
+  contact_type: "work",
   contact_value: "3245627482",
 }) %>
 
@@ -21,3 +21,18 @@
   contact_type: "work-cell",
   contact_value: "349-185-9988",
 }) %>
+
+<%= pb_rails("contact", props: {
+  contact_type: "wrong-phone",
+  contact_value: "2124396666",
+}) %>
+
+<%= pb_rails("contact", props: {
+  contact_type: "extension",
+  contact_value: "1233",
+}) %>
+
+<%= pb_rails("contact", props: {
+  contact_type: "international",
+  contact_value: "+44 7700 900461",
+}) %>

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx

@@ -28,6 +28,21 @@ const ContactDefault = (props) => {
           contactValue="3245627482"
           {...props}
       />
+      <Contact
+          contactType="wrong-phone"
+          contactValue="2124396666"
+          {...props}
+      />
+      <Contact
+          contactType='extension'
+          contactValue="1234"
+          {...props}
+      />
+      <Contact
+          contactType="international"
+          contactValue="+44 7700 900461"
+          {...props}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.md

@@ -0,0 +1,5 @@
+The Contact kit automatically formats US phone numbers when the `contactType` / `contact_type` is one of: `home` (default), `work`, `cell`, `work-cell`, `wrong-phone`.
+
+- Use `email` to display emails.
+- Use `international` to display International phone numbers exactly as provided (no formatting applied).
+- Use `extension` to display four digit phone extensions.

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb

@@ -26,3 +26,9 @@
   contact_value: "1233",
   contact_detail: "Ext",
 }) %>
+
+<%= pb_rails("contact", props: {
+  contact_type: "international",
+  contact_value: "+44 7700 900461",
+  contact_detail: "International",
+}) %>

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx

@@ -33,6 +33,12 @@ const ContactDefault = (props) => {
           contactValue="1234"
           {...props}
       />
+      <Contact
+          contactDetail="International"
+          contactType="international"
+          contactValue="+44 7700 900461"
+          {...props}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx

@@ -51,7 +51,6 @@ const IconButton = (props: IconButtonProps) => {
         id={id}
     >
       <Button
-          aria={aria}
           borderRadius="xs"
           htmlType={htmlType}
           link={link}

data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb

@@ -1,6 +1,5 @@
 <%= pb_content_tag do %>
-  <%= pb_rails("button", props: { aria: object.aria,
-                                  type: object.type,
+  <%= pb_rails("button", props: { type: object.type,
                                   link: object.link,
                                   new_window:object.new_window,
                                   target: object.target,