RubyGems - playbook_ui - Versions diffs - 15.6.0 → 15.7.0.pre.alpha.play263313229 - Mend

playbook_ui 15.6.0 → 15.7.0.pre.alpha.play263313229

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (185) hide show

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx CHANGED Viewed

@@ -22,7 +22,6 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
-        iconColor='white'
         padding="none"
     >
       <Collapsible.Main padding="sm"
@@ -41,7 +40,6 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
-        iconColor='white'
         padding="none"
     >
       <Collapsible.Main padding="sm"
@@ -60,7 +58,6 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
-        iconColor='white'
         padding="none"
     >
         <Collapsible.Main padding="sm"

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

@@ -61,7 +61,9 @@ type ContactProps = {
   data?: { [key: string]: string }
   dark?: boolean
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) }
+  iconEnabled?: boolean
   id?: string
+  unstyled?: boolean
 }
 const Contact = (props: ContactProps): React.ReactElement => {
@@ -74,7 +76,9 @@ const Contact = (props: ContactProps): React.ReactElement => {
     data = {},
     dark = false,
     htmlOptions = {},
+    iconEnabled = true,
     id,
+    unstyled = false,
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
@@ -85,6 +89,51 @@ const Contact = (props: ContactProps): React.ReactElement => {
     className
   )
+  const formattedValue = formatContact(contactValue, contactType)
+  const content = (
+    <>
+      {iconEnabled && (contactType === 'email' ? (
+        <Icon
+            className="svg-inline--fa envelope"
+            customIcon={envelopeIcon}
+            dark={dark}
+            fixedWidth
+        />
+      ) : (
+        <Icon
+            dark={dark}
+            fixedWidth
+            icon={contactTypeMap[contactType] || 'phone'}
+        />
+      ))}
+      {iconEnabled ? ` ${formattedValue} ` : formattedValue}
+      {contactDetail && (
+        <Caption
+            dark={dark}
+            size="xs"
+            tag="span"
+            text={contactDetail}
+        />
+      )}
+    </>
+  )
+  // When unstyled, render just the content without Body wrapper
+  if (unstyled) {
+    return (
+      <span
+          {...ariaProps}
+          {...dataProps}
+          {...htmlProps}
+          className={classes}
+          id={id}
+      >
+        {content}
+      </span>
+    )
+  }
+  // Default styled mode with Body wrapper
   return (
     <div
         {...ariaProps}
@@ -95,33 +144,11 @@ const Contact = (props: ContactProps): React.ReactElement => {
     >
       <Body
           className="pb_contact_kit"
-          color={"light"}
+          color="light"
           dark={dark}
           tag="span"
       >
-          {contactType === 'email' ? (
-            <Icon
-                className="svg-inline--fa envelope"
-                customIcon={envelopeIcon}
-                dark={dark}
-                fixedWidth
-            />
-          ) : (
-            <Icon
-                dark={dark}
-                fixedWidth
-                icon={contactTypeMap[contactType] || 'phone'}
-            />
-          )}
-        {` ${formatContact(contactValue, contactType)} `}
-        {contactDetail && (
-          <Caption
-              dark={dark}
-              size="xs"
-              tag="span"
-              text={contactDetail}
-          />
-        )}
+        {content}
       </Body>
     </div>
   )

data/app/pb_kits/playbook/pb_contact/contact.html.erb CHANGED Viewed

@@ -1,24 +1,23 @@
-<%= pb_content_tag do %>
-  <%= pb_rails("body", props: {
-        tag: "span",
-        classname: "pb_contact_kit",
-        color: "light",
-        dark: object.dark
-  }) do %>
-    <% if contact_type == "email" %>
-      <%= pb_rails("icon", props: {
-            custom_icon: Playbook::Engine::root.join(envelope_path),
-            fixed_width: true,
-            dark: object.dark
-      }) %>
+<% if object.unstyled %>
+  <%= content_tag :span, class: object.classname, id: object.id, data: object.data, aria: object.aria, **object.html_options do %>
+    <% if icon_enabled %>
+      <% if contact_type == "email" %>
+        <%= pb_rails("icon", props: {
+              custom_icon: Playbook::Engine::root.join(envelope_path),
+              fixed_width: true,
+              dark: object.dark
+        }) %>
+      <% else %>
+        <%= pb_rails("icon", props: {
+              icon: object.contact_icon,
+              fixed_width: true,
+              dark: object.dark
+        }) %>
+      <% end %>
+      <%= " #{object.formatted_contact_value}" if object.contact_value %>
     <% else %>
-      <%= pb_rails("icon", props: {
-            icon: object.contact_icon,
-            fixed_width: true,
-            dark: object.dark
-      }) %>
+      <%= object.formatted_contact_value if object.contact_value %>
     <% end %>
-    <%= object.formatted_contact_value if object.contact_value %>
     <%= pb_rails("caption", props: {
           text: object.contact_detail,
@@ -27,4 +26,39 @@
           dark: object.dark
         }) if object.contact_detail %>
   <% end %>
+<% else %>
+  <%= pb_content_tag do %>
+    <%= pb_rails("body", props: {
+          tag: "span",
+          classname: "pb_contact_kit",
+          color: "light",
+          dark: object.dark
+    }) do %>
+      <% if icon_enabled %>
+        <% if contact_type == "email" %>
+          <%= pb_rails("icon", props: {
+                custom_icon: Playbook::Engine::root.join(envelope_path),
+                fixed_width: true,
+                dark: object.dark
+          }) %>
+        <% else %>
+          <%= pb_rails("icon", props: {
+                icon: object.contact_icon,
+                fixed_width: true,
+                dark: object.dark
+          }) %>
+        <% end %>
+        <%= " #{object.formatted_contact_value}" if object.contact_value %>
+      <% else %>
+        <%= object.formatted_contact_value if object.contact_value %>
+      <% end %>
+      <%= pb_rails("caption", props: {
+            text: object.contact_detail,
+            tag: 'span',
+            size: 'xs',
+            dark: object.dark
+          }) if object.contact_detail %>
+    <% end %>
+  <% end %>
 <% end %>

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

@@ -8,6 +8,8 @@ module Playbook
       prop :contact_type
       prop :contact_value
       prop :contact_detail
+      prop :icon_enabled, type: Playbook::Props::Boolean, default: true
+      prop :unstyled, type: Playbook::Props::Boolean, default: false
       def classname
         generate_classname("pb_contact_kit")
@@ -44,7 +46,15 @@ module Playbook
         elsif contact_type == "international"
           contact_value
         else
-          number_to_phone(formatted_value, area_code: true)
+          # Check if number has leading 1 (US country code)
+          # Format like "+1 (212) 555-1234"
+          intl_code = ""
+          cleaned_number = formatted_value
+          if cleaned_number.length == 11 && cleaned_number.start_with?("1")
+            intl_code = "+1 "
+            cleaned_number = cleaned_number.sub(/^1/, "")
+          end
+          "#{intl_code}#{number_to_phone(cleaned_number, area_code: true)}"
         end
       end

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

@@ -149,3 +149,79 @@ test('international contact type preserves original format', () => {
   const kit = screen.getByTestId('test-international-format')
   expect(kit).toHaveTextContent('+44 20 7946 0958')
 })
+test('iconEnabled prop hides icon when false', () => {
+  render(
+    <>
+      <Contact
+          contactType="home"
+          contactValue="2125551234"
+          data={{ testid: 'test-with-icon' }}
+          iconEnabled
+      />
+      <Contact
+          contactType="home"
+          contactValue="2125551234"
+          data={{ testid: 'test-without-icon' }}
+          iconEnabled={false}
+      />
+    </>
+  )
+  // With icon enabled, should have icon
+  expect(screen.getByTestId('test-with-icon').querySelector('.pb_custom_icon')).toBeInTheDocument()
+  // Without icon, should not have icon
+  expect(screen.getByTestId('test-without-icon').querySelector('.pb_custom_icon')).not.toBeInTheDocument()
+  // But should still have the formatted phone number
+  expect(screen.getByTestId('test-without-icon')).toHaveTextContent('(212) 555-1234')
+})
+test('unstyled prop renders without Body wrapper', () => {
+  render(
+    <>
+      <Contact
+          contactType="home"
+          contactValue="2125551234"
+          data={{ testid: 'test-styled' }}
+      />
+      <Contact
+          contactType="home"
+          contactValue="2125551234"
+          data={{ testid: 'test-unstyled' }}
+          unstyled
+      />
+    </>
+  )
+  // Styled version should have Body wrapper with pb_contact_kit class
+  const styled = screen.getByTestId('test-styled')
+  const styledBody = styled.querySelector('span.pb_contact_kit')
+  expect(styledBody).toBeInTheDocument()
+  expect(styledBody).toHaveTextContent('(212) 555-1234')
+  // Unstyled version should be a span without Body wrapper
+  const unstyled = screen.getByTestId('test-unstyled')
+  expect(unstyled.tagName).toBe('SPAN')
+  expect(unstyled.querySelector('span.pb_contact_kit')).not.toBeInTheDocument()
+  expect(unstyled).toHaveTextContent('(212) 555-1234')
+})
+test('unstyled and iconEnabled work together', () => {
+  render(
+    <Contact
+        contactType="home"
+        contactValue="2125551234"
+        data={{ testid: 'test-unstyled-no-icon' }}
+        iconEnabled={false}
+        unstyled
+    />
+  )
+  const kit = screen.getByTestId('test-unstyled-no-icon')
+  expect(kit.tagName).toBe('SPAN')
+  expect(kit.querySelector('.pb_custom_icon')).not.toBeInTheDocument()
+  expect(kit.querySelector('.pb_body_kit')).not.toBeInTheDocument()
+  expect(kit).toHaveTextContent('(212) 555-1234')
+})

data/app/pb_kits/playbook/pb_contact/docs/_contact_unstyled.html.erb ADDED Viewed

@@ -0,0 +1,33 @@
+<%= pb_rails("body", props: { color: "default" }) do %>
+  <%= pb_rails("contact", props: {
+        contact_value: "2125551234",
+        icon_enabled: false,
+        unstyled: true
+  }) %>
+<% end %>
+<%= pb_rails("body", props: { color: "light" }) do %>
+  <%= pb_rails("contact", props: {
+        contact_value: "12125551234",
+        icon_enabled: false,
+        unstyled: true
+  }) %>
+<% end %>
+<%= pb_rails("body", props: { color: "lighter" }) do %>
+  <%= pb_rails("contact", props: {
+        contact_value: "4155551234",
+        icon_enabled: false,
+        unstyled: true
+  }) %>
+<% end %>
+<%= pb_rails("body", props: { color: "default" }) do %>
+  <%= pb_rails("contact", props: {
+        contact_type: "extension",
+        contact_value: "1234",
+        icon_enabled: false,
+        unstyled: true
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_contact/docs/_contact_unstyled.jsx ADDED Viewed

@@ -0,0 +1,46 @@
+import React from 'react'
+import Contact from "../../pb_contact/_contact"
+import Body from "../../pb_body/_body"
+const ContactUnstyled = (props) => {
+  return (
+    <div>
+      <Body color="default">
+        <Contact
+            contactValue="2125551234"
+            iconEnabled={false}
+            unstyled
+            {...props}
+        />
+      </Body>
+      <Body color="light">
+        <Contact
+            contactValue="12125551234"
+            iconEnabled={false}
+            unstyled
+            {...props}
+        />
+      </Body>
+      <Body color="lighter">
+        <Contact
+            contactValue="4155551234"
+            iconEnabled={false}
+            unstyled
+            {...props}
+        />
+      </Body>
+      <Body color="default">
+        <Contact
+            contactType="extension"
+            contactValue="1234"
+            iconEnabled={false}
+            unstyled
+            {...props}
+        />
+      </Body>
+    </div>
+  )
+}
+export default ContactUnstyled

data/app/pb_kits/playbook/pb_contact/docs/_contact_unstyled_rails.md ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ Use the Contact kit with `icon_enabled: false` and `unstyled: true` to display phone numbers with full typography control. When `unstyled: true`, the Contact kit renders just the formatted text without a Body wrapper, allowing you to wrap it in your own Typography kit to control the color and styling.
2	+

data/app/pb_kits/playbook/pb_contact/docs/_contact_unstyled_react.md ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ Use the Contact kit with `iconEnabled={false}` and `unstyled` to display phone numbers with full typography control. With `unstyled`, the Contact kit renders just the formatted text without a Body wrapper, allowing you to wrap it in your own Typography kit to control the color and styling.
2	+

data/app/pb_kits/playbook/pb_contact/docs/example.yml CHANGED Viewed

@@ -3,11 +3,13 @@ examples:
   rails:
   - contact_default: Default
   - contact_with_detail: Detail Indicator
+  - contact_unstyled: Unstyled
   react:
   - contact_default: Default
   - contact_with_detail: Detail Indicator
+  - contact_unstyled: Unstyled
   swift:

data/app/pb_kits/playbook/pb_contact/docs/index.js CHANGED Viewed

@@ -1,2 +1,3 @@
 export { default as ContactDefault } from './_contact_default.jsx'
 export { default as ContactWithDetail } from './_contact_with_detail.jsx'
+export { default as ContactUnstyled } from './_contact_unstyled.jsx'

data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js CHANGED Viewed

@@ -251,4 +251,28 @@ describe('DatePicker Kit', () => {
       expect(input).toHaveValue(DateTime.getYearStartDate(new Date()).formatDate() + " to " + new Date().formatDate())
     })
   })
+  test('displays defaultDate when it is later than maxDate', async () => {
+    const testId = 'datepicker-out-of-range-after'
+    const futureDateString = '01/15/2020'
+    const maxDateString = '01/10/2020'
+    render(
+      <DatePicker
+          data={{ testid: testId }}
+          defaultDate={futureDateString}
+          format="m/d/Y"
+          maxDate={maxDateString}
+          pickerId="date-picker-out-of-range-after"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    const input = within(kit).getByPlaceholderText('Select Date')
+    await waitFor(() => {
+      expect(input).toHaveValue('01/15/2020')
+    }, { timeout: 5000 })
+  })
 })