[PLAY-194] Contact Kit Update: Extension Variant (#1966)

* Contact Kit Extension Variant * Implement Contact Kit Jest Tests * Update test with new contact type * Return extension data without storing in variable Co-authored-by: Stephen Marshall <smarshall1980@gmail.com> * Adjust formatted contact value control flow * Remove Raise Parameter Co-authored-by: Stephen Marshall <smarshall1980@gmail.com>
powerhome · Jul 22, 2022 · eb5349c · eb5349c
1 parent 6a3f653
commit eb5349c
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 6 deletions.
diff --git a/playbook/app/pb_kits/playbook/pb_contact/_contact.jsx b/playbook/app/pb_kits/playbook/pb_contact/_contact.jsx
@@ -17,15 +17,17 @@ const contactTypeMap = {
   'work': 'phone-office',
   'work-cell': 'phone-laptop',
   'wrong-phone': 'phone-slash',
+  'extension': 'phone-plus',
 }
 
 const formatContact = (contactString, contactType) => {
-  if (contactType == 'email') {
-    return contactString
-  }
+  if (contactType == 'email') return contactString
   const cleaned = contactString.replace(/\D/g, '')
-  const phoneNumber = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/)
-  if (phoneNumber) {
+  if(contactType == 'extension') {
+    return cleaned.match(/^\d{4}$/)
+  }
+  if (contactType !== 'email') {
+    const phoneNumber = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/)
     const intlCode = phoneNumber[1] ? '+1 ' : ''
     return [
       intlCode,
@@ -66,7 +68,6 @@ const Contact = (props: ContactProps) => {
     globalProps(props),
     className
   )
-
   return (
     <div
         {...ariaProps}

diff --git a/playbook/app/pb_kits/playbook/pb_contact/contact.rb b/playbook/app/pb_kits/playbook/pb_contact/contact.rb
@@ -27,6 +27,8 @@ def contact_icon
           "phone-laptop"
         when "wrong-phone"
           "phone-slash"
+        when "extension"
+          "phone-plus"
         else # "unknown" || "other"
           "phone"
         end
@@ -35,6 +37,8 @@ def contact_icon
       def formatted_contact_value
         if contact_type == "email"
           contact_value
+        elsif contact_type == "extension" && contact_value.match(/^\d{4}$/)
+          contact_value
         else
           number_to_phone(formatted_value, area_code: true)
         end

diff --git a/playbook/app/pb_kits/playbook/pb_contact/contact.test.js b/playbook/app/pb_kits/playbook/pb_contact/contact.test.js
@@ -0,0 +1,87 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import Contact from './_contact'
+
+test('returns namespaced class name', () => {
+  render(
+    <Contact
+        contactDetail="Cell"
+        contactType="cell"
+        contactValue="349-185-9988"
+        data={{ testid: 'class-name-test' }}
+    />
+  )
+
+  const kit = screen.getByTestId('class-name-test')
+  expect(kit).toHaveClass('pb_contact_kit')
+})
+
+test('returns correct icon', () => {
+  render(
+    <>
+      <Contact
+          contactDetail="Cell"
+          contactType="cell"
+          contactValue="349-185-9988"
+          data={{ testid: 'test-cell' }}
+      />
+      <Contact
+          contactDetail="Home"
+          contactValue="5555555555"
+          data={{ testid: 'test-home' }}
+      />
+      <Contact
+          contactDetail="Work"
+          contactType="work"
+          contactValue="3245627482"
+          data={{ testid: 'test-work' }}
+      />
+      <Contact
+          contactDetail="Work-Cell"
+          contactType="work-cell"
+          contactValue="3245627482"
+          data={{ testid: 'test-work-cell' }}
+      />
+      <Contact
+          contactDetail="Email"
+          contactType="email"
+          contactValue="your.email@powerhrg.com"
+          data={{ testid: 'test-email' }}
+      />
+      <Contact
+          contactDetail="Wrong-Phone"
+          contactType="wrong-phone"
+          contactValue="3245627482"
+          data={{ testid: 'test-wrong-phone' }}
+      />
+      <Contact
+          contactDetail="Wrong-Type"
+          contactType="wrong-type"
+          contactValue="3245627482"
+          data={{ testid: 'test-wrong-type' }}
+      />
+      <Contact
+          contactDetail="Ext"
+          contactType='extension'
+          contactValue="1234"
+          data={{ testid: 'test-extension' }}
+      />
+      <Contact
+          contactDetail=""
+          contactType=""
+          contactValue="3245627482"
+          data={{ testid: 'test-empty' }}
+      />
+    </>
+  )
+
+  expect(screen.getByTestId('test-cell').querySelector('.pb_icon_kit')).toHaveClass('fa-mobile')
+  expect(screen.getByTestId('test-home').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
+  expect(screen.getByTestId('test-work').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-office')
+  expect(screen.getByTestId('test-work-cell').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-laptop')
+  expect(screen.getByTestId('test-email').querySelector('.pb_icon_kit')).toHaveClass('fa-envelope')
+  expect(screen.getByTestId('test-wrong-phone').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-slash')
+  expect(screen.getByTestId('test-wrong-type').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
+  expect(screen.getByTestId('test-extension').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-plus')
+  expect(screen.getByTestId('test-empty').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
+})
diff --git a/playbook/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb b/playbook/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb
@@ -20,3 +20,9 @@
   contact_value: "3245627482",
   contact_detail: "Work-Cell",
 }) %>
+
+<%= pb_rails("contact", props: {
+  contact_type: "extension",
+  contact_value: "1233",
+  contact_detail: "Ext",
+}) %>
diff --git a/playbook/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx b/playbook/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx
@@ -27,6 +27,12 @@ const ContactDefault = (props) => {
           contactValue="3245627482"
           {...props}
       />
+      <Contact
+          contactDetail="Ext"
+          contactType='extension'
+          contactValue="1234"
+          {...props}
+      />
     </div>
   )
 }

diff --git a/playbook/spec/pb_kits/playbook/kits/contact_spec.rb b/playbook/spec/pb_kits/playbook/kits/contact_spec.rb
@@ -25,6 +25,7 @@
       expect(subject.new(contact_type: "email").contact_icon).to eq "envelope"
       expect(subject.new(contact_type: "wrong-phone").contact_icon).to eq "phone-slash"
       expect(subject.new(contact_type: "intentionally-wrong-type").contact_icon).to eq "phone"
+      expect(subject.new(contact_type: "extension").contact_icon).to eq "phone-plus"
       expect(subject.new(contact_type: "").contact_icon).to eq "phone"
     end
   end