playbook_ui_docs 14.13.0.pre.alpha.PLAY1856doc6166 → 14.13.0.pre.alpha.PLAY1873rails86087

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f7361c9ea673698c2ce31a4e464535c33e58a8dfe31c7a15bdd221d3d38f4cc0
-  data.tar.gz: bc62469fd1379805278add44d8230f57d7eceed8c495b66f3db59b9991a6884c
+  metadata.gz: bbb6a9c3f7715ee9d85ab9d242ae07d3e1cfee1a4818ded7d44d998b31604353
+  data.tar.gz: b8267301849e58d67efe8c5a0d228f0dade301cac7ccddd372cb6849abec0a85
 SHA512:
-  metadata.gz: bd7b9818d269ca2f9b1fce78aa06b981243f697e995f76d94df32b454ae715fc037a66261c67e5d647f44606c1a36a07b82fe2a4448eab3279d9f560f94344aa
-  data.tar.gz: 6c15fbefb75f885f6de3ae5d4010348154a06ff6d0076e48f2228436c372ddc6bf4681d3f6615b61b19d10e663e95bb0fc6bb89ebbf30d5e43e7dfbaf687eefd
+  metadata.gz: baccc7e1ee1c0e3d5da847248bfabb37d865ec682c58a0bbcf3234020ed0bf47715314c97dc17c365c6090f37873185e94775216c6f978d1ada42455a72f0a6e
+  data.tar.gz: c495517ae54ea3f254a030009b525b1c99fd33eb6bff3a6edaefc83db71e7db3b6490b015d565b3508812322f19390b64e400dfa3ad9fdc33606f08e9414de74

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.html.erb

@@ -0,0 +1,19 @@
+<div class="pb--doc-demo-row">
+  
+  <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Add Sophia Carden",
+      name: "Sophia Carden",
+      image_alt: "Add Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      action: "add",
+  }) %>
+
+  <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Remove Sophia Carden",
+      name: "Sophia Carden",
+      image_alt: "Remove Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      action: "remove",
+  }) %>
+
+</div>

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import AvatarActionButton from '../_avatar_action_button'
+
+const AvatarActionButtonActions = (props) => (
+  <div className="pb--doc-demo-row">
+    <AvatarActionButton
+        action="add"
+        imageAlt="Add Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Add Sophia Carden"
+        name="Sophia Carden"
+        {...props}
+    />
+    <AvatarActionButton
+        action="remove"
+        imageAlt="Remove Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Remove Sophia Carden"
+        name="Sophia Carden"
+        {...props}
+    />
+  </div>
+)
+
+export default AvatarActionButtonActions

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.html.erb

@@ -0,0 +1,10 @@
+<div class="pb--doc-demo-row">
+
+  <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
+      name: "Sophia Carden",
+      image_alt: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg"
+  }) %>
+
+</div>

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import AvatarActionButton from '../_avatar_action_button'
+
+const AvatarActionButtonDefault = (props) => (
+  <div className="pb--doc-demo-row">
+    <AvatarActionButton
+        imageAlt="Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Sophia Carden"
+        name="Sophia Carden"
+        {...props}
+    />
+  </div>
+)
+
+export default AvatarActionButtonDefault

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import AvatarActionButton from '../_avatar_action_button'
+
+const AvatarActionButtonOnClick = (props) => (
+  <div className="pb--doc-demo-row">
+    <AvatarActionButton
+        imageAlt="Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Alert Sophia Carden"
+        linkUrl="https://www.google.com"
+        name="Sophia Carden"
+        onClick={() => alert('clicked!')}
+        {...props}
+    />
+  </div>
+)
+
+export default AvatarActionButtonOnClick

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_onclick.html.erb

@@ -0,0 +1,16 @@
+<div class="pb--doc-demo-row">
+  
+  <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Alert Sophia Carden",
+      name: "Sophia Carden",
+      id: "clickable",
+      link_url: "http://www.google.com",
+      image_alt: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+  }) %>
+
+  <%= javascript_tag do %>
+    document.querySelector('#clickable').addEventListener('click', () => alert('clickable clicked!'))
+  <% end %>
+
+</div>

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.html.erb

@@ -0,0 +1,35 @@
+<div class="pb--doc-demo-row">
+  
+  <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
+      name: "Sophia Carden",
+      image_alt: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      placement: "bottom_left"
+  }) %>
+
+  <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
+      name: "Sophia Carden",
+      image_alt: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      placement: "bottom_right"
+  }) %>
+
+    <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
+      name: "Sophia Carden",
+      image_alt: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      placement: "top_left"
+  }) %>
+
+    <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
+      name: "Sophia Carden",
+      image_alt: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      placement: "top_right"
+  }) %>
+
+</div>

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+
+import AvatarActionButton from '../_avatar_action_button'
+
+const AvatarActionButtonPlacement = (props) => (
+  <div className="pb--doc-demo-row">
+    <AvatarActionButton
+        imageAlt="Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Sophia Carden"
+        name="Sophia Carden"
+        placement="bottom_left"
+        {...props}
+    />
+    <AvatarActionButton
+        imageAlt="Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Sophia Carden"
+        name="Sophia Carden"
+        placement="bottom_right"
+        {...props}
+    />
+    <AvatarActionButton
+        imageAlt="Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Sophia Carden"
+        name="Sophia Carden"
+        placement="top_left"
+        {...props}
+    />
+    <AvatarActionButton
+        imageAlt="Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Sophia Carden"
+        name="Sophia Carden"
+        placement="top_right"
+        {...props}
+    />
+  </div>
+)
+
+export default AvatarActionButtonPlacement

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb

@@ -0,0 +1,13 @@
+<div class="pb--doc-demo-row">
+  
+  <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
+      name: "Sophia Carden",
+      link_url: "http://www.google.com",
+      image_alt: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      tooltip_text: "Tooltip Text",
+      tooltip_id: "avatar_1",
+  }) %>
+
+</div>

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

@@ -0,0 +1,15 @@
+examples:
+  
+  rails:
+  - avatar_action_button_default: Default
+  - avatar_action_button_placement: Placement
+  - avatar_action_button_actions: Actions
+  - avatar_action_button_onclick: On Click
+  - avatar_action_button_tooltip: Tooltip
+
+  
+  react:
+  - avatar_action_button_default: Default
+  - avatar_action_button_placement: Placement
+  - avatar_action_button_actions: Actions
+  - avatar_action_button_on_click: On Click

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

@@ -0,0 +1,4 @@
+export { default as AvatarActionButtonDefault } from './_avatar_action_button_default.jsx'
+export { default as AvatarActionButtonPlacement } from './_avatar_action_button_placement.jsx'
+export { default as AvatarActionButtonActions } from './_avatar_action_button_actions.jsx'
+export { default as AvatarActionButtonOnClick } from './_avatar_action_button_on_click.jsx'

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

@@ -17,7 +17,6 @@ examples:
 
   react:
   - bar_graph_default: Default
-  - bar_graph_pb_styles: Playbook Styles
   - bar_graph_legend: Legend
   - bar_graph_legend_position: Legend Position
   - bar_graph_legend_non_clickable: Legend Non Clickable

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

@@ -10,4 +10,3 @@ export { default as BarGraphStacked } from './_bar_graph_stacked.jsx'
 export { default as BarGraphNegativeNumbers } from './_bar_graph_negative_numbers.jsx'
 export { default as BarGraphSecondaryYAxis } from './_bar_graph_secondary_y_axis.jsx'
 export { default as BarGraphHorizontal } from './_bar_graph_horizontal.jsx'
-export { default as BarGraphPbStyles } from './_bar_graph_pb_styles.jsx'

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb

@@ -43,9 +43,9 @@
       <% end %>
     <% end %>
 
-    <%= pb_rails("table/table_body", props: {draggable_container: true}) do %>
+    <%= pb_rails("draggable/draggable_container", props: {tag:"tbody"}) do %>
       <% initial_items.each do |item| %>
-        <%= pb_rails("table/table_row", props:{drag_id: item[:id], draggable_item: true}) do %>
+        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], tag:"tr"}) do %>
           <%= pb_rails("table/table_cell", props: { text: item[:id]}) %>
           <%= pb_rails("table/table_cell") do %>
             <%= pb_rails("flex", props:{align:"center"}) do %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md

@@ -1,4 +1 @@
-The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this:
-
-- use the `draggable_container` prop on the table/table_body to designate it as the Draggable Container
-- use the `draggable_item` prop on the table/table_row to designate it as the Draggable Item. Make sure to also pass id to the `drag_id` prop here. 
+The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this, make use of the `tag` prop on the draggable_container to set it to 'tbody' and the same prop on the draggable_item to set that to 'tr'. This will create the functionality seen here. 

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

@@ -4,9 +4,7 @@ examples:
   - draggable_with_list: Draggable with List Kit
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
-  - draggable_with_table_react: Draggable with Table
   - draggable_multiple_containers: Dragging Across Multiple Containers
-
   rails:
   - draggable_default_rails: Default
   - draggable_with_list_rails: Draggable with List Kit

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

@@ -2,5 +2,4 @@ export { default as DraggableDefault } from './_draggable_default.jsx'
 export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
 export { default as DraggableWithList } from './_draggable_with_list.jsx'
 export { default as DraggableWithSelectableList } from './_draggable_with_selectable_list.jsx'
-export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
-export { default as DraggableWithTableReact } from './_draggable_with_table_react.jsx'
+export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx

@@ -1,77 +1,42 @@
-import React, { useState, useEffect } from "react"
-import { Button, Drawer, Icon, Nav, NavItem } from "playbook-ui"
+import React, { useState } from "react";
+import { Button, Drawer, Flex } from "playbook-ui";
 
-const DrawerMenu = () => {
-  const [isSmallScreen, setIsSmallScreen] = useState(false)
-  const navItems = ["Overview", "Albums", "Similar Artists"]
+const useDrawer = (visible = false) => {
+  const [opened, setOpened] = useState(visible);
+  const toggle = () => setOpened(!opened);
 
-  useEffect(() => {
-    const mediaQuery = window.matchMedia("(max-width: 992px)")
-    const updateScreen = (e) => setIsSmallScreen(e.matches)
-    updateScreen(mediaQuery)
-    mediaQuery.addEventListener('change', updateScreen)
-    return () => mediaQuery.removeEventListener('change', updateScreen)
-  }, [])
+  return [opened, toggle];
+};
+
+const DrawerBreakpoints = () => {
+  const [smallDrawerOpened, toggleSmallDrawer] = useDrawer();
 
   return (
-    <div>
-      <Button id='sidebar'
-          padding='xs'
-      >
-        <Icon icon='bars'
-            size='2x'
-        />
-      </Button>
-      <Drawer
-          behavior={"push"}
-          breakpoint='md'
-          overlay={isSmallScreen ? true : false}
-          placement='left'
-          size='md'
-          triggerId='sidebar'
-      >
-        <Nav
-            link='#'
-            orientation='vertical'
-            padding={isSmallScreen ? "none" : "sm"}
-            variant='bold'
+    <>
+      <Flex wrap>
+        <Button
+            id="sm"
+            marginRight="md"
+            onClick={toggleSmallDrawer}
+        >
+          {"Will open at small breakpoint"}
+        </Button>
+      </Flex>
+      <Flex>
+        <Drawer
+            behavior={"push"}
+            breakpoint="sm"
+            onClose={toggleSmallDrawer}
+            opened={smallDrawerOpened}
+            overlay={false}
+            placement={"right"}
+            size={"lg"}
         >
-          {navItems.map((text, index) => {
-            return (
-              <NavItem
-                  collapsible
-                  collapsibleTrail
-                  fontWeight='bolder'
-                  iconLeft='city'
-                  iconRight={["plus", "minus"]}
-                  key={index}
-                  link='#'
-                  text={text}
-              >
-                <NavItem fontSize='small'
-                    link='#'
-                    marginY='none'
-                    text='City'
-                />
-                <NavItem
-                    fontSize='small'
-                    link='#'
-                    marginY='none'
-                    text='People'
-                />
-                <NavItem
-                    fontSize='small'
-                    link='#'
-                    marginY='none'
-                    text='Business'
-                />
-              </NavItem>
-            )
-          })}
-        </Nav>
-      </Drawer>
-    </div>
-  )
-}
+          Open because small breakpoint 
+        </Drawer>
+      </Flex>
+    </>
+  );
+};
 
-export default DrawerMenu
+export default DrawerBreakpoints;

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx

@@ -8,8 +8,8 @@ const DrawerMenu = () => {
     const mediaQuery = window.matchMedia("(max-width: 600px)")
     setIsSmallScreen(mediaQuery.matches)
     const handler = (e) => setIsSmallScreen(e.matches)
-    mediaQuery.addEventListener("change", handler)
-    return () => mediaQuery.removeEventListener("change", handler)
+    mediaQuery.addEventListener('change', handler)
+    return () => mediaQuery.removeEventListener('change', handler)
   }, [])
 
   return (
@@ -22,17 +22,17 @@ const DrawerMenu = () => {
         />
       </Button>
       <Drawer
-          breakpoint='md'
+          breakpoint="md"
           placement='bottom'
           size='full'
           triggerId='menuButton'
           withinElement
       >
-        <Nav
+        <Nav 
             highlight={false}
             link='#'
-            orientation={isSmallScreen ? "vertical" : "horizontal"}
-            padding={isSmallScreen ? "none" : "sm"}
+            orientation={isSmallScreen ? 'vertical' : 'horizontal'} 
+            padding={isSmallScreen ? 'none' : 'sm'}
         >
           <NavItem link='#'
               text='About'

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

@@ -10,5 +10,4 @@ examples:
   - drawer_menu: Within Element
   - drawer_sizes: Sizes
   - drawer_overlay: Overlay
-  - drawer_breakpoints: Breakpoints
   - drawer_borders: Borders 

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.html.erb

@@ -1,2 +1 @@
 <%= pb_rails("progress_pills", props: { aria: { label: "2 out of 3 steps complete" }, steps: 3, active: 2 }) %>
-<%= pb_rails("progress_pills", props: { aria: { label: "9 out of 18 steps complete" }, steps: 18, active: 9, margin_top: "md" }) %>

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.jsx

@@ -10,13 +10,6 @@ const ProgressPillsDefault = (props) => {
                 steps={3}
                 {...props}
             />
-            <ProgressPills
-                active={9}
-                aria={{ label: '9 out of 18 steps complete' }}
-                marginTop="md"
-                steps={18}
-                {...props}
-            />
         </>
     )
 }

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx

@@ -16,7 +16,7 @@ const TableWithCollapsible = (props) => {
     );
   };
 
-  return (
+return (
       <Table
           size="sm"
           {...props}

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

@@ -31,7 +31,6 @@ examples:
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
     - table_outer_padding: Outer Padding
     - table_with_collapsible: Table with Collapsible
-    - table_with_collapsible_with_custom_click: Table with Collapsible with Custom Click
     - table_with_collapsible_with_custom_content_rails: Table with Collapsible with Custom Content
     - table_with_collapsible_with_nested_rows_rails: Table with Collapsible with Nested Rows
     - table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb

@@ -27,20 +27,6 @@
     placeholder: "123-45-6789"
   }) %>
 
-  <%= pb_rails("text_input", props: {
-    label: "Credit Card",
-    mask: "credit_card",
-    margin_bottom: "md",
-    placeholder: "1234 5678 9012 3456"
-  }) %>
-
-  <%= pb_rails("text_input", props: {
-    label: "CVV",
-    mask: "cvv",
-    margin_bottom: "md",
-    placeholder: "123"
-  }) %>
-
   <%= pb_rails("title" , props: {
     text: "Hidden Input Under The Hood",
     padding_bottom: "sm"