playbook_ui 15.0.0.pre.alpha.PLAY2467contactkitinternational10329 → 15.0.0.pre.alpha.play1986inlineloadingsolidvariant10321

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5f20e205eef51d77bf9ce4b5694d675e30bfbe4ef8107c96b016868302ccaba3
-  data.tar.gz: 89c8ffe59230989390b0cb8031a47b3191bd5463b190f62465b10679a2dbf531
+  metadata.gz: db6853982084088c352fbaebcc9d4815525ef2e1d5b3f1bb4afd6c5b18debf49
+  data.tar.gz: 9953ba7ead3e65d4357fb88933055ec5b7cb65d342c93bca21485615ce3b29cd
 SHA512:
-  metadata.gz: 6c25d0d330b79ffdc47501616db7bdbe0577c48ce9fa5d33b8ea7d6058c9ce98674d72664ca312f6d79ddaf59b662701b8a136bb0ca589447c4ea8b72bbf97a8
-  data.tar.gz: f42561f7ad3f69134d46779d00d75c0aff2998c042a0c6ef5839131c80f788559de516772297a606049a2827222b863d0b434febf32ca28d0aadca4cb8e7b0c4
+  metadata.gz: e5c749fac180a2f02edeacd6b41e36b8bfb917dc6f60cb6fac3ef2e70947a87adf64526cbf96fefeeb26e73d973f650970cb0101d3c4e16b77e5ec45aa7bf041
+  data.tar.gz: bbd0144bb4d40303864e5f804d78a1aa2eb6f585c7d66809c15a097d03de7ddcb5d12a2083e293694738873d292cbbac668ccc00c5a0342c69a49f6182a33023

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