playbook_ui 15.6.0.pre.alpha.PLAY2611selectinputoptions12951 → 15.6.0.pre.alpha.PLAY2686contactkittextonly13049

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8c8dcf57e95fee8fd64b1909bbf79e469d54956d93007681de556e37c87e37ae
-  data.tar.gz: a4832dece122085890ceb2499d4805ee08494a107fff1482de5eceb192cd660f
+  metadata.gz: a30081dbc5a14dfeec79933dd490fe553502036499c58f64de1d148a0fba985e
+  data.tar.gz: b6cf7dd45fd95b0cc39435dd440bb3829648799a28295ca0fd5b0f7d324a07d2
 SHA512:
-  metadata.gz: f4388b624d6e311fd09981b880853275e6cae73f90643c6ea20209da52ebd2586d5ad85bc147ae6ff094d62f8e4c9f95b31792bee0ef262d22385f9944383f93
-  data.tar.gz: 978e33b4ee58947791709e6c26ca8c13ae624a20dfb4b95aace37df9faa650f87301359047877fec06d70719537dce589915eb4cf068efa4390d24c80831d67a
+  metadata.gz: ae9a12d8598e97d2326f6d8b6c65950a2316e511d1e22de76709c4fb416b3f67a61e02dbc895138b64ec80c2f68bfd26be27a2e0aaa1a07f439c4be7a3e87c63
+  data.tar.gz: 97507923ae090f97a814c18cbd242e3746f7481fd797e0f3b809ccc34c3a784644e9b5d5b5ac8c8ef407bc712f17d67f1e2c778c82c0abc1ac28aa070fa79285

data/app/pb_kits/playbook/pb_card/docs/_card_header.md

@@ -1 +1 @@
-Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/token/colors" target="_blank">here</a>.
+Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md

@@ -1 +1 @@
-Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/token/colors" target="_blank">here</a>.
+Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap

@@ -25,11 +25,11 @@ exports[`html structure is correct 1`] = `
           >
             <div
               class="icon_wrapper"
-              style="vertical-align: middle; color: rgb(193, 205, 214);"
+              style="vertical-align: middle;"
             >
               <svg
                 aria-label="chevron-down icon"
-                class="pb_custom_icon svg-inline--fa svg_lg svg_fw"
+                class="pb_custom_icon svg-inline--fa color_text_lt_lighter svg_lg svg_fw"
                 color="currentColor"
                 fill="none"
                 height="auto"

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleIcon.tsx

@@ -27,12 +27,12 @@ type colorMap = {
 };
 
 const colorMap = {
-  default: "#242B42",
-  light: "#687887",
-  lighter: "#C1CDD6",
-  link: "#0056CF",
-  error: "#FF2229",
-  success: "#00CA74",
+  default:"text_lt_default",
+  light: "text_lt_light",
+  lighter: "text_lt_lighter",
+  link: "primary",
+  error: "error",
+  success: "text_dk_success_sm",
 };
 
 const CollapsibleIcon = ({
@@ -68,9 +68,10 @@ const CollapsibleIcon = ({
               className="icon_wrapper"
               key={icon ? showIcon(icon)[0] : "chevron-down"}
               onClick={(e) => handleIconClick(e)}
-              style={{ verticalAlign: "middle", color: color }}
+              style={{ verticalAlign: "middle"}}
           >
             <Icon
+                color={color}
                 icon={icon ? showIcon(icon)[0] : "chevron-down"}
                 size={iconSize}
             />
@@ -80,9 +81,10 @@ const CollapsibleIcon = ({
               className="icon_wrapper"
               key={icon ? showIcon(icon)[1] : "chevron-up"}
               onClick={(e) => handleIconClick(e)}
-              style={{ verticalAlign: "middle", color: color }}
+              style={{ verticalAlign: "middle" }}
           >
             <Icon
+                color={color}
                 icon={icon ? showIcon(icon)[1] : "chevron-up"}
                 size={iconSize}
             />

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx

@@ -7,7 +7,6 @@ const CollapsibleIcons = (props) => {
   <>
   <Collapsible
       icon={['plus','minus']}
-      iconColor='white'
   >
     <Collapsible.Main {...props}>
       <div>{'Main Section'}</div>

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -0,0 +1,2 @@
+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.
+

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

@@ -0,0 +1,2 @@
+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.
+

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

@@ -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

@@ -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

@@ -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 })
+  })
 })