playbook_ui 13.33.1.pre.alpha.play1407statvaluekitinconsistencies3352 → 13.33.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 930497ebc101aa6ef27bbc55dd868e8a23ce5bd39ecedef0737c0cd02b87cfd5
-  data.tar.gz: 6ad3f140dd0f5f777a568de3326eedbb6e6d2e2e6e7295283a3ddb75563b4184
+  metadata.gz: e1c022847164064a888eae5ec0664e37bf3bfa352884159303d093fa8cfe6d5e
+  data.tar.gz: 04f74d04da0122d153510b4b44268be3d4c22c70a6ddb539be0ce483ba0fd4ac
 SHA512:
-  metadata.gz: 50a63572ef9dfa42aa9e2e7de77fa7b49321752663aa9e91af996dfc3bc971f9ab2d1983637817755db9913a29ed4889b4d9c8775fd44f15aa3bffb3afe67321
-  data.tar.gz: 1f097f1aee790e0fe3aa6c31a06d0ba969628cbe8e6b9707b32a8975fffa6cb1f758fb9e22f98a7774aa26b9db719e055147abdbf71a2818aecd2a71a7b7fb8f
+  metadata.gz: f65e1607e01a68c4fc7246cfd325699398931b4e6a42ac859a49a6d763f8efdd9c422e397926aac968c028f8ad77f338cb0028df2c007162d43bde076bfc6f34
+  data.tar.gz: 847a1fb9bccb3dbbaca66cfe8a9d5e9f40cb81b5db45b4c0a4374d5f25b52267afc5402248820ecea28775ef2e8e42bc1aa9e28bfc1497f00187af22006a2569

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

@@ -1,14 +1,23 @@
 <% if object.image_url.present? %>
-  <%= pb_content_tag(object.tag,
+  <%= content_tag(object.tag,
+      aria: object.aria,
+      data: object.data,
+      id: object.id,
+      class: object.classname,
       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 %>
-  <%= pb_content_tag(object.tag,
+  <%= content_tag(object.tag,
+      aria: object.aria,
+      data: object.data,
+      id: object.id,
+      class: object.classname,
       style: object.custom_background_color
   ) do %>
     <%= content.presence %>

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

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

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

@@ -1,4 +1,9 @@
-<%= pb_content_tag do%>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria,
+    **combined_html_options) 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,3 +1,8 @@
-<%= pb_content_tag(:nav) do %>
+<%= content_tag(:nav,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
       <%= content.presence %>
 <% end %>

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

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

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

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

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

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

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

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

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

@@ -1,71 +1,72 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from '../..'
+import { Collapsible, useCollapsible, Background, Flex, Title, List, ListItem } from '../..'
 
-const CollapsibleCustomMain = (props) => {
+const CollapsibleCustomMain = () => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)
 
   return (
-    <>
-      <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">
+  <>
+    <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">
           <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("flex", props: { position: "sticky", top: "0", cursor: "pointer", data: { "collapsible-main": "true", align: "center", gap: "sm", justify: "between" } }) 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 }) %>
      <% end %>
@@ -16,5 +16,4 @@
             <% end %>
       <% end %>
     <% end %>
-
-      
+    

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

@@ -1,74 +1,73 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from '../..'
+import { Collapsible, useCollapsible, Background, Flex, Title, List, ListItem } from '../..'
 
-const CollapsibleCustomMainWithIcon = (props) => {
+const CollapsibleCustomMainWithIcon = () => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)
 
   return (
-    <>
-      <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"
-        >
+  <>
+    <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">
           <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,8 +1,12 @@
 <%= pb_rails("collapsible", props: { name: "default-example" }) do %>
-  <%= 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("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("collapsible/collapsible_icon") %>
-  <% end %>
+     <% end %>
+      <% end %>
+     <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
+    <% 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,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

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types';
 import { Collapsible, useCollapsible, Button } from '../..'
 
 const CollapsibleState = (props) => {
@@ -8,7 +7,6 @@ const CollapsibleState = (props) => {
   return (
   <>
     <Button
-        dark={props.dark}
         onClick={() => setIsCollapsed(!isCollapsed)}
         padding="none"
         variant="link"
@@ -19,7 +17,6 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
-        iconColor='white'
         padding="none"
     >
       <Collapsible.Main padding="sm" 
@@ -38,7 +35,6 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
-        iconColor='white'
         padding="none"
     >
       <Collapsible.Main padding="sm" 
@@ -57,7 +53,6 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
-        iconColor='white'
         padding="none"
     >
         <Collapsible.Main padding="sm" 
@@ -77,8 +72,4 @@ 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,20 +40,19 @@ 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 }
-  dark?: boolean
-  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},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  id?: string,
 }
 
 const Contact = (props: ContactProps): React.ReactElement => {
@@ -64,10 +63,8 @@ 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)
@@ -76,7 +73,6 @@ const Contact = (props: ContactProps): React.ReactElement => {
     globalProps(props),
     className
   )
-
   return (
     <div
         {...ariaProps}
@@ -87,27 +83,25 @@ const Contact = (props: ContactProps): React.ReactElement => {
     >
       <Body
           className="pb_contact_kit"
-          color={"light"} 
-          dark={dark}
+          color="light"
           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,21 +2,18 @@
   <%= pb_rails("body", props: { 
         tag: "span", 
         classname: "pb_contact_kit", 
-        color: "light",
-        dark: object.dark
+        color: "light" 
       }) do %>
     <%= pb_rails("icon", props: { 
           icon: object.contact_icon, 
-          fixed_width: true,
-          dark: object.dark
+          fixed_width: true 
         }) %>
     <%= object.formatted_contact_value if object.contact_value %>
 
     <%= pb_rails("caption", props: { 
           text: object.contact_detail, 
           tag: 'span', 
-          size: 'xs',
-          dark: object.dark
+          size: 'xs'
         }) if object.contact_detail %>
   <% end %>
 <% end %>