playbook_ui 14.25.0.pre.alpha.PLAY2467contactkitinternational10238 → 14.25.0.pre.alpha.play1986inlineloadingsolidvariant9963

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 070d8c050710240a666b93b0fc10c4c3eee2eb52d6b71a764314eb7dffdb1607
-  data.tar.gz: 75a9695755bfa7f568c68e12f04e2da3fb4691d6fbf2d19bc1e76fbdab1a8b18
+  metadata.gz: 0ee315a459262d17524d4034ee8ee267a36cb55a6bff5ab517eded1823079b82
+  data.tar.gz: 214124df5701381babad6d1c668e2d821852a12ea69e76c654b80142005b86ef
 SHA512:
-  metadata.gz: 8099640bc4cdd08a3d14375cec05c19642900b07cab98d5c942667c4c0c16641914d2ecd50aa52133456e89c0e6bb11e851d6201fa453e4215f962a12f35bdd5
-  data.tar.gz: 0c01a89ccc4326a2ad87e2b2f14205cb4a5f0c213da84714b16d80e21172c3144d8e2aacc8eec1ff4911f183ed3038daf7d8f46341d8655b28cb7912a935ee21
+  metadata.gz: c809a3b70d4575e569eb8651e363753b1ddf1d8b655158d1c0028eeee1510007c2c029d4e425571b9dd27258573f07344b2b8bb4880cf0a1a48e98cdfdf8010a
+  data.tar.gz: c36c53928fcc035ce43a88d6f3523b71895d49eae26ab8231984df5517a18724fa9801c0e130f20f31545e31c2ba3d666080b74ba7f53c73d1af83487aa77bad

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

@@ -17,7 +17,6 @@ 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 }
@@ -25,10 +24,6 @@ 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,8 +29,6 @@ module Playbook
           "phone-slash"
         when "extension"
           "phone-plus"
-        when "international"
-          "globe"
         else # "unknown" || "other"
           "phone"
         end
@@ -41,8 +39,6 @@ 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,12 +66,6 @@ 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=""
@@ -89,11 +83,10 @@ 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 US phone related contact types", () => {
+test("not compliant values return null in phone related contact types", () => {
   const notCompliantValues = [
     "349-185-998223",
     "349-1858",
@@ -136,16 +129,3 @@ test("not compliant values return null in US 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: "work",
+  contact_type: "wrong number",
   contact_value: "3245627482",
 }) %>
 
@@ -21,18 +21,3 @@
   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,21 +28,6 @@ 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_with_detail.html.erb

@@ -26,9 +26,3 @@
   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,12 +33,6 @@ const ContactDefault = (props) => {
           contactValue="1234"
           {...props}
       />
-      <Contact
-          contactDetail="International"
-          contactType="international"
-          contactValue="+44 7700 900461"
-          {...props}
-      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx

@@ -16,6 +16,7 @@ type LoadingInlineProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   text?: string,
+  variant?: "dotted" | "solid" ,
 }
 
 const LoadingInline = (props: LoadingInlineProps) => {
@@ -28,6 +29,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
     htmlOptions = {},
     id,
     text = ' Loading',
+    variant = 'dotted',
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -54,7 +56,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
         <Icon
             aria={{ label: 'loading icon' }}
             fixedWidth
-            icon="spinner"
+            icon={variant === 'dotted' ? 'spinner' : variant === 'solid' ? 'spinner-solid' : undefined}
             pulse
         />
         {text}

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("loading_inline", props: {text: "Dotted Spinner", variant: "dotted"}) %>
+
+<br/>
+
+<%= pb_rails("loading_inline", props: {text: "Solid Spinner", variant: "solid"}) %>

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { LoadingInline } from 'playbook-ui'
+
+const LoadingInlineVariant = (props) => {
+  return (
+    <div>
+      <LoadingInline 
+          text=" Dotted Spinner" 
+          variant="dotted" 
+          {...props}
+      />
+
+      <br />
+  
+      <LoadingInline
+          text=" Solid Spinner"
+          variant="solid"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default LoadingInlineVariant

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

@@ -3,9 +3,11 @@ examples:
   rails:
   - loading_inline_default: Default
   - loading_inline_custom: Custom Text
+  - loading_inline_variant: Variant
 
   
   
   react:
   - loading_inline_default: Default
   - loading_inline_custom: Custom Text
+  - loading_inline_variant: Variant

data/app/pb_kits/playbook/pb_loading_inline/docs/index.js

@@ -1,2 +1,3 @@
 export { default as LoadingInlineDefault } from './_loading_inline_default.jsx'
 export { default as LoadingInlineCustom } from './_loading_inline_custom.jsx'
+export { default as LoadingInlineVariant } from './_loading_inline_variant.jsx'

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb

@@ -1,6 +1,6 @@
 <%= pb_content_tag do %>
 
   <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
-    <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: "spinner", pulse: true }) %> <%= object.text %>
+    <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: object.spinner_icon, pulse: true }) %> <%= object.text %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb

@@ -8,10 +8,21 @@ module Playbook
                    default: "left"
       prop :dark, type: Playbook::Props::Boolean, default: false
       prop :text, type: Playbook::Props::String, default: "Loading"
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[dotted solid],
+                     default: "dotted"
 
       def classname
         generate_classname("pb_loading_inline_kit", align)
       end
+
+      def spinner_icon
+        if variant == "dotted"
+          "spinner"
+        elsif variant == "solid"
+          "spinner-solid"
+        end
+      end
     end
   end
 end