playbook_ui 13.33.1 → 13.34.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e1c022847164064a888eae5ec0664e37bf3bfa352884159303d093fa8cfe6d5e
-  data.tar.gz: 04f74d04da0122d153510b4b44268be3d4c22c70a6ddb539be0ce483ba0fd4ac
+  metadata.gz: 7f2cb628a1802af0ae043163aec1b56821b21a2d91c1c17cc00154f2abc14e7e
+  data.tar.gz: cbbe7f33a75536e453823c0ca0a4645602165848eddc1d482a1b57c5236780cb
 SHA512:
-  metadata.gz: f65e1607e01a68c4fc7246cfd325699398931b4e6a42ac859a49a6d763f8efdd9c422e397926aac968c028f8ad77f338cb0028df2c007162d43bde076bfc6f34
-  data.tar.gz: 847a1fb9bccb3dbbaca66cfe8a9d5e9f40cb81b5db45b4c0a4374d5f25b52267afc5402248820ecea28775ef2e8e42bc1aa9e28bfc1497f00187af22006a2569
+  metadata.gz: ab5b25504dd6804769c95fad71a87a158bcb6f4832a4847a279b3eec324ff6376fb60a2148d5eb9a1be3ef5fab9fc27e81c676df6b32b76e40c4e74ee6bf1477
+  data.tar.gz: 7d5c990c0b0302c5844182adccaafd191a9f216d862d28843c4a4976be04483d6e5bb88995d19264a6707319aede8b05c11f2e78c3e7ee9e6b17220b7b300b05

data/app/pb_kits/playbook/pb_background/background.html.erb

@@ -1,23 +1,14 @@
 <% if object.image_url.present? %>
-  <%= content_tag(object.tag,
-      aria: object.aria,
-      data: object.data,
-      id: object.id,
-      class: object.classname,
+  <%= pb_content_tag(object.tag,
       style: "background-image: url('#{object.image_url}');
               background-repeat: #{object.background_repeat};
               background-size: #{object.background_size};
               background-position: #{object.background_position};",
-      **combined_html_options
   ) do %>
     <%= content.presence %>
   <% end %>
 <% else %>
-  <%= content_tag(object.tag,
-      aria: object.aria,
-      data: object.data,
-      id: object.id,
-      class: object.classname,
+  <%= pb_content_tag(object.tag,
       style: object.custom_background_color
   ) do %>
     <%= content.presence %>

data/app/pb_kits/playbook/pb_body/body.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(object.tag,
-  aria: object.aria,
-  id: object.id,
-  data: object.data,
-  class: object.classname,
-  **combined_html_options) do %>
+<%= pb_content_tag(object.tag) do %>
   <%= object.content %>
 <% end %>

data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria,
-    **combined_html_options) do%>
+<%= pb_content_tag do%>
 <%= content_tag(object.link ? 'a' : 'span', class: 'bread_crumb_item', href: object.link) do %>
     <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:nav,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag(:nav) do %>
       <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_caption/caption.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(object.tag,
-  aria: object.aria,
-  id: object.id,
-  data: object.data,
-  class: object.classname,
-  **combined_html_options) do %>
+<%= pb_content_tag(object.tag) do %>
   <%= content.presence || object.text %>
 <% end %>

data/app/pb_kits/playbook/pb_card/card.html.erb

@@ -1,10 +1,4 @@
-<%= content_tag(object.tag,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria,
-    dark: object.dark,
-    **combined_html_options) do %>
+<%= pb_content_tag(object.tag) do %>
     <%= content.presence %>
 <% end %>
 

data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss

@@ -18,7 +18,7 @@
     height: auto;
   }
   .icon_wrapper:hover {
-      color: $primary
+      color: $primary_action_dark
   }
 
   .dark {

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

@@ -19,7 +19,7 @@ const CollapsibleColor = (props) => (
       </Collapsible.Content>
     </Collapsible>
     <Collapsible
-        iconColor='light'
+        iconColor='lighter'
         marginBottom="xs"
     >
       <Collapsible.Main>
@@ -34,7 +34,7 @@ const CollapsibleColor = (props) => (
       </Collapsible.Content>
     </Collapsible>
     <Collapsible
-        iconColor='lighter'
+        iconColor='light'
         marginBottom="xs"
     >
       <Collapsible.Main>

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

@@ -1,72 +1,71 @@
 import React from 'react'
-import { Collapsible, useCollapsible, Background, Flex, Title, List, ListItem } from '../..'
+import PropTypes from 'prop-types'
+import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from '../..'
 
-const CollapsibleCustomMain = () => {
+const CollapsibleCustomMain = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)
 
   return (
-  <>
-    <Collapsible
-        collapsed={isCollapsed}
-    >
-          <Background 
-              backgroundColor="white" 
-              cursor="pointer"
-              htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
-              position="sticky" 
-              top="0" 
-          >
-              <Flex 
-                  align="center" 
-                  gap="sm"
-                  justify="between" 
-              >
-                <Title 
-                    size={4} 
-                    text="Custom Main Section" 
-                />
-              </Flex>
-          </Background>
-      <Collapsible.Content padding="none">
+    <>
+      <Collapsible collapsed={isCollapsed}>
+        <Flex
+            align="center"
+            cursor="pointer"
+            gap="sm"
+            htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
+            justify="between"
+            position="sticky"
+            top="0"
+        >
+          <Title 
+              dark={props.dark} 
+              size={4} 
+              text="Custom Main Section" />
+        </Flex>
+        <Collapsible.Content 
+            padding="none">
           <div>
-          <List>
+            <List>
               <ListItem 
                   align="stretch"
                   flexDirection="column" 
               >
-                Checklist item
+                {"Checklist item"}
               </ListItem>
               <ListItem 
                   align="stretch"
                   flexDirection="column" 
               >
-                Checklist item
+                {"Checklist item"}
               </ListItem>
               <ListItem 
                   align="stretch"
                   flexDirection="column" 
               >
-                Checklist item
+                {"Checklist item"}
               </ListItem>
               <ListItem 
                   align="stretch"
                   flexDirection="column" 
               >
-                Checklist item
+                {"Checklist item"}
               </ListItem>
               <ListItem 
                   align="stretch"
                   flexDirection="column" 
               >
-                Checklist item
+                {"Checklist item"}
               </ListItem>
             </List>
           </div>
       </Collapsible.Content>
     </Collapsible>
-   
   </>
   )
 }
 
+CollapsibleCustomMain.propTypes = {
+  dark: PropTypes.bool,
+}
+
 export default CollapsibleCustomMain

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("collapsible", props: { name: "default-example" }) do %>
-    <%= pb_rails("background", props: { background_color: "white", position: "sticky", top: "0", cursor:"pointer", data: {"collapsible-main": "true"} }) do %>
+    <%= pb_rails("flex", props: { position: "sticky", top: "0", cursor: "pointer", data: { "collapsible-main": "true", align: "center", gap: "sm", justify: "between" } }) do %>
       <%= pb_rails("flex", props: {align:"center", gap:"sm", justify:"between"}) do %>
         <%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %>
      <% end %>
@@ -16,4 +16,5 @@
             <% end %>
       <% end %>
     <% end %>
-    
+
+      

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

@@ -1,73 +1,74 @@
 import React from 'react'
-import { Collapsible, useCollapsible, Background, Flex, Title, List, ListItem } from '../..'
+import PropTypes from 'prop-types'
+import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from '../..'
 
-const CollapsibleCustomMainWithIcon = () => {
+const CollapsibleCustomMainWithIcon = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)
 
   return (
-  <>
-    <Collapsible
-        collapsed={isCollapsed}
-    >
-          <Background 
-              backgroundColor="white" 
-              cursor="pointer"
-              htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
-              position="sticky" 
-              top="0" 
-          >
-              <Flex 
-                  align="center" 
-                  gap="sm"
-                  justify="between" 
-              >
-                <Title 
-                    size={4} 
-                    text="Custom Main Section" 
-                />
-                <Collapsible.Icon collapsed={isCollapsed}/>
-              </Flex>
-          </Background>
-      <Collapsible.Content padding="none">
+    <>
+      <Collapsible collapsed={isCollapsed}>
+        <Flex
+            align="center"
+            cursor="pointer"
+            gap="sm"
+            htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
+            justify="between"
+            position="sticky"
+            top="0"
+        >
+          <Title
+              dark={props.dark}
+              size={4}
+              text="Custom Main Section"
+          />
+          <Collapsible.Icon collapsed={isCollapsed} />
+        </Flex>
+        <Collapsible.Content 
+            padding="none"
+        >
           <div>
           <List>
               <ListItem 
                   align="stretch"
                   flexDirection="column" 
               >
-                Checklist item
+                {"Checklist item"}
               </ListItem>
               <ListItem 
                   align="stretch"
                   flexDirection="column" 
               >
-                Checklist item
+                {"Checklist item"}
               </ListItem>
               <ListItem 
                   align="stretch"
                   flexDirection="column" 
               >
-                Checklist item
+                {"Checklist item"}
               </ListItem>
               <ListItem 
                   align="stretch"
                   flexDirection="column" 
               >
-                Checklist item
+                {"Checklist item"}
               </ListItem>
               <ListItem 
                   align="stretch"
                   flexDirection="column" 
               >
-                Checklist item
+                {"Checklist item"}
               </ListItem>
             </List>
           </div>
       </Collapsible.Content>
     </Collapsible>
-   
   </>
   )
 }
 
+CollapsibleCustomMainWithIcon.propTypes = {
+  dark: PropTypes.bool,
+}
+
 export default CollapsibleCustomMainWithIcon

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.html.erb

@@ -1,12 +1,8 @@
 <%= pb_rails("collapsible", props: { name: "default-example" }) do %>
-    <%= pb_rails("background", props: { background_color: "white", position: "sticky", top: "0", cursor:"pointer", data: {"collapsible-main": "true"} }) do %>
-      <%= pb_rails("flex", props: {align:"center", gap:"sm", justify:"between"}) do %>
-        <%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %>
+  <%= pb_rails("flex", props: { position: "sticky", top: "0", cursor: "pointer", data: { "collapsible-main": "true" }, align: "center", gap: "sm", justify: "between" }) do %>
+    <%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %>
     <%= pb_rails("collapsible/collapsible_icon") %>
-     <% end %>
-      <% end %>
-     <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
-    <% end %>
+  <% end %>
       <%= pb_rails("collapsible/collapsible_content", props: { padding: "none"  }) do %>
         <%= pb_rails("list", props: {ordered: false, dark: false, borderless: false}) do %>
             <%= pb_rails("list/item") do %> Checklist Item <% end %>

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

@@ -7,6 +7,7 @@ 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

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types';
 import { Collapsible, useCollapsible, Button } from '../..'
 
 const CollapsibleState = (props) => {
@@ -7,6 +8,7 @@ const CollapsibleState = (props) => {
   return (
   <>
     <Button
+        dark={props.dark}
         onClick={() => setIsCollapsed(!isCollapsed)}
         padding="none"
         variant="link"
@@ -17,6 +19,7 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
+        iconColor='white'
         padding="none"
     >
       <Collapsible.Main padding="sm" 
@@ -35,6 +38,7 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
+        iconColor='white'
         padding="none"
     >
       <Collapsible.Main padding="sm" 
@@ -53,6 +57,7 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
+        iconColor='white'
         padding="none"
     >
         <Collapsible.Main padding="sm" 
@@ -72,4 +77,8 @@ const CollapsibleState = (props) => {
   )
 }
 
+CollapsibleState.propTypes = {
+  dark: PropTypes.bool,
+}
+
 export default CollapsibleState

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

@@ -8,23 +8,23 @@ import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
 import Icon from '../pb_icon/_icon'
 
-const contactTypeMap: { [key: string]: string; } = {
+const contactTypeMap: { [key: string]: string } = {
   'cell': 'mobile',
   'email': 'envelope',
+  'extension': 'phone-plus',
   'home': 'phone',
   'work': 'phone-office',
   'work-cell': 'phone-laptop',
   'wrong-phone': 'phone-slash',
-  'extension': 'phone-plus',
 }
 
 const formatContact = (contactString: string, contactType: string) => {
-  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(contactType == 'extension') {
+  if (contactType === 'extension') {
     return cleaned.match(/^\d{4}$/)
   }
 
@@ -40,19 +40,20 @@ const formatContact = (contactString: string, contactType: string) => {
       phoneNumber[4],
     ].join('')
   }
-  
+
   return null
 }
 
 type ContactProps = {
-  aria?: { [key: string]: string; },
-  className?: string | string[],
-  contactDetail?: string,
-  contactType?: string,
-  contactValue: string,
-  data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  id?: string,
+  aria?: { [key: string]: string }
+  className?: string | string[]
+  contactDetail?: string
+  contactType?: string
+  contactValue: string
+  data?: { [key: string]: string }
+  dark?: boolean
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) }
+  id?: string
 }
 
 const Contact = (props: ContactProps): React.ReactElement => {
@@ -63,8 +64,10 @@ const Contact = (props: ContactProps): React.ReactElement => {
     contactType,
     contactValue,
     data = {},
+    dark = false,
     htmlOptions = {},
-    id } = props
+    id,
+  } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -73,6 +76,7 @@ const Contact = (props: ContactProps): React.ReactElement => {
     globalProps(props),
     className
   )
+
   return (
     <div
         {...ariaProps}
@@ -83,25 +87,27 @@ const Contact = (props: ContactProps): React.ReactElement => {
     >
       <Body
           className="pb_contact_kit"
-          color="light"
+          color={"light"} 
+          dark={dark}
           tag="span"
       >
         <Icon
+            dark={dark}
             fixedWidth
             icon={contactTypeMap[contactType] || 'phone'}
         />
         {` ${formatContact(contactValue, contactType)} `}
-        {
-          contactDetail &&
+        {contactDetail && (
           <Caption
+              dark={dark}
               size="xs"
               tag="span"
               text={contactDetail}
           />
-        }
+        )}
       </Body>
     </div>
   )
 }
 
-export default Contact
+export default Contact

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

@@ -2,18 +2,21 @@
   <%= pb_rails("body", props: { 
         tag: "span", 
         classname: "pb_contact_kit", 
-        color: "light" 
+        color: "light",
+        dark: object.dark
       }) do %>
     <%= pb_rails("icon", props: { 
           icon: object.contact_icon, 
-          fixed_width: true 
+          fixed_width: true,
+          dark: object.dark
         }) %>
     <%= object.formatted_contact_value if object.contact_value %>
 
     <%= pb_rails("caption", props: { 
           text: object.contact_detail, 
           tag: 'span', 
-          size: 'xs'
+          size: 'xs',
+          dark: object.dark
         }) if object.contact_detail %>
   <% end %>
 <% end %>