playbook_ui_docs 13.33.1.pre.alpha.PLAY14143340 → 13.34.0.pre.alpha.PLAY14143357

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2b8f0b0dc58e459bc198e51dc977b93551ff2b1b05950cb6f7e218fec8355065
-  data.tar.gz: f48734886c91157e7dd2fac0189e191bf733e8a3675e51a37065e6748d301564
+  metadata.gz: 20987ef4b4e2a8cfb7ae34d2496af7c93bf08d0a8a3a102d59f72518286f1142
+  data.tar.gz: 37a435348707084444119b8d50fe346dd361f1abf4688189712a7781015b22d0
 SHA512:
-  metadata.gz: b0ab3b3fcb07d63d14bb777006661697d4ca7d13abfb2bb5cfcfd02db674ce1db959cb0d73b1bed9579a8c04d735530599b57c9c3c618629967c10b085250fcf
-  data.tar.gz: ef14bf1135505e7e202def1d3ac516b24916b6e180e7b11ba92e478ebed7e9472475784a60b244fa23fc5995a86805e27df932eb480525ff11a3d5ec5a2d09bb
+  metadata.gz: b5449d62cabc44e7d927f196fddf3a6877dfabec6a7d7f1bf754376e61f1d72b351a211e2ebab3917b2c9ef5222d15f09170ee4eeb1c7775e574d97319dc1634
+  data.tar.gz: 3c826ee75a8a3cf5f875ed681369aab004114ac65331497d00381f144daeb1a8dcd1d07f3551f8ca9ab49173ff0da73bc8172127552ef4516cc817d1dd4da933

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 'playbook-ui'
+import PropTypes from 'prop-types'
+import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from 'playbook-ui'
 
-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 'playbook-ui'
+import PropTypes from 'prop-types'
+import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from 'playbook-ui'
 
-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 'playbook-ui'
 
 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_form_pill/docs/_form_pill_icon.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("form_pill", props: {
+    icon: "badge-check",
+    text: "icon and tag",
+    tabindex: 0,
+}) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import FormPill from '../_form_pill'
+
+const FormPillIcon = (props) => {
+  return (
+    <div>
+      <FormPill
+          icon="badge-check"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="icon and tag"
+          {...props}
+      />
+    </div>
+  )
+}
+export default FormPillIcon

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

@@ -5,10 +5,11 @@ examples:
   - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
-
+  # - form_pill_icon: Form Pill Icon
 
   react:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
+  # - form_pill_icon: Form Pill Icon

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

@@ -2,4 +2,4 @@ export { default as FormPillUser } from './_form_pill_user.jsx'
 export { default as FormPillSize } from './_form_pill_size.jsx'
 export { default as FormPillTag } from './_form_pill_tag.jsx'
 export { default as FormPillExample } from './_form_pill_example.jsx'
-
+export { default as FormPillIcon } from './_form_pill_icon.jsx'

data/app/pb_kits/playbook/pb_icon/docs/_icon_color.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("flex", props: {orientation: "column"}) do %>
+    <%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "primary", padding_bottom: "sm", size: "2x" }) %>
+    <%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "data_4", padding_bottom: "sm", size: "2x" }) %>
+    <%= pb_rails("icon", props: { icon: "roofing", fixed_width: true, color: "product_5_background", size: "2x" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_color.jsx

@@ -0,0 +1,34 @@
+import React from "react"
+import Icon from "../_icon"
+
+const IconDefault = (props) => {
+  return (
+    <div style={{ display: "flex", flexDirection: "column"}}>
+      <Icon
+          color="primary"
+          fixedWidth
+          icon="user"
+          paddingBottom="sm"
+          size="2x"
+          {...props}
+      />
+      <Icon
+          color="data_4"
+          fixedWidth
+          icon="recycle"
+          paddingBottom="sm"
+          size="2x"
+          {...props}
+      />
+      <Icon
+          color="product_5_background"
+          fixedWidth
+          icon="product-roofing"
+          size="2x"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default IconDefault

data/app/pb_kits/playbook/pb_icon/docs/_icon_color.md

@@ -0,0 +1 @@
+Pass any text, status, data, product, or category Playbook <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">color token</a> to the `color` prop to change any icon's color. 

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

@@ -9,6 +9,7 @@ examples:
   - icon_sizes: Icon Sizes
   - icon_custom: Icon Custom
   - icon_fa_kit: Icon with FontAwesome Kit
+  - icon_color: Icon Color
 
   react:
   - icon_default: Icon Default
@@ -20,6 +21,7 @@ examples:
   - icon_sizes: Icon Sizes
   - icon_custom: Icon Custom
   - icon_fa_kit: Icon with FontAwesome Kit
+  - icon_color: Icon Color
 
   swift:
   - icon_default_swift: Icon Default

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

@@ -7,3 +7,4 @@ export { default as IconBorder } from './_icon_border.jsx'
 export { default as IconSizes } from './_icon_sizes.jsx'
 export { default as IconCustom } from './_icon_custom.jsx'
 export { default as IconFaKit} from './_icon_fa_kit.jsx'
+export { default as IconColor } from './_icon_color.jsx'

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.jsx

@@ -1,40 +1,35 @@
 import React from 'react'
-
 import StarRating from '../_star_rating'
 
 const StarRatingHide = (props) => (
-  <>
-
-    <StarRating
-        paddingBottom="xs"
-        rating={3}
-        {...props}
-    />
-
-
-    <StarRating
-        layoutOption={"number"}
-        paddingBottom="xs"
-        rating={2.8}
-        {...props}
-    />
-
-
-    <StarRating
-        layoutOption={"number"}
-        paddingBottom="xs"
-        rating={3}
-        {...props}
-    />
-
-    <StarRating
-        layoutOption={"onestar"}
-        paddingBottom="xs"
-        rating={3}
-        {...props}
-    />
-
-  </>
+    <>
+        <StarRating
+            paddingBottom="xs"
+            rating={3}
+            {...props}
+        />
+
+        <StarRating
+            layoutOption={"number"}
+            paddingBottom="xs"
+            rating={2.8}
+            {...props}
+        />
+
+        <StarRating
+            layoutOption={"number"}
+            paddingBottom="xs"
+            rating={3}
+            {...props}
+        />
+
+        <StarRating
+            layoutOption={"onestar"}
+            paddingBottom="xs"
+            rating={1}
+            {...props}
+        />
+    </>
 )
 
 export default StarRatingHide

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_interactive.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import StarRating from '../_star_rating'
+
+const StarRatingInteractive = (props) => (
+    <>
+        <StarRating
+            paddingBottom="xs"
+            variant="interactive"
+            {...props}
+        />
+    </>
+)
+
+export default StarRatingInteractive

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

@@ -9,3 +9,5 @@ export { default as StarRatingHide } from './_star_rating_hide.jsx'
 export { default as StarRatingNumberConfig } from './_star_rating_number_config.jsx'
 
 export { default as StarRatingSizeOptions } from './_star_rating_size_options.jsx'
+
+export { default as StarRatingInteractive } from './_star_rating_interactive.jsx'