playbook_ui_docs 14.6.2.pre.alpha.PLAY15814384 → 14.7.0.pre.alpha.PBNTR637quickpickdefaultdate4478

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5a87ae7a9eed66fd39f1d74d245970d0ed3953de8e55768300d321959a0f9c98
-  data.tar.gz: 5ee05dda27eba4bc8ace61e91b65d6320c66c98bd0847c6b9fd6b19af43e38ab
+  metadata.gz: dbcbc16be8b0ff80eabc4f113b0cb0f40649ab6b32923f004551f23b3a281c12
+  data.tar.gz: d1f30d6186c9ca075bf9fb9b109476439422dc8b05bafd7fd5e737895cb7917e
 SHA512:
-  metadata.gz: 655cf9744204519a8605acef134963294845b19ca80b3c62272c6970f0593d2620a48e4032fc2d3c761b4f8e558786dc41199201aa4ac690be8943bf8ca1f064
-  data.tar.gz: 37d3ae02502b529cea6228c733ff292c58cd6601b2a50854e46f832f007a8665a397473fbf1bc782cdb52e8193d8852d86a23b8e733c052f6560ae8b9aa3f5aa
+  metadata.gz: 584f1485eac89dd4c2ab63f58d6a09bbfbbe3d58d39666ecad723a0d7682e5b5808307db5bb3bf31cb879a192a6ef46090a249f713ffd27ab5d644ce1d43bd79
+  data.tar.gz: 6de0d45aac6578db04073699b4072db4e568fbce2a71717610858acc533eb8bd256e2e1baefe7f86113d9ff8691b311bdd257c1e6ff50d3df5041a990b802e60

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable, Pill, Body, Flex, Detail, Caption } from "playbook-ui"
+import { AdvancedTable, Pill, Body, Flex, Detail, Caption, Badge, Title } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableCustomCell = (props) => {
@@ -8,7 +8,18 @@ const AdvancedTableCustomCell = (props) => {
       accessor: "year",
       label: "Year",
       cellAccessors: ["quarter", "month", "day"],
-
+      customRenderer: (row, value) => (
+        <Flex>
+          <Title size={4}
+              text={value} 
+          />
+          <Badge dark
+              marginLeft="xxs"
+              text={row.original.newEnrollments > 20 ? "High" : "Low"}
+              variant="neutral"
+          />
+        </Flex>
+      ), 
     },
     {
       accessor: "newEnrollments",

data/app/pb_kits/playbook/pb_card/docs/_card_light.md

@@ -1 +1 @@
-Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>
+Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a> 

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

@@ -0,0 +1,26 @@
+<% initial_items = [
+  {
+    id: "1",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "2",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "3",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+] %>
+
+<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
+  <%= pb_rails("draggable/draggable_container") do %>
+    <%= pb_rails("flex") do %>
+      <% initial_items.each do |item| %>
+        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
+          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url], margin: "xs" }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,7 @@
+The `draggable` kit gives you a full subcomponent structure that allows it to be used with almost any kit.
+
+`initial_items` is a REQUIRED prop, which is the array of objects that contains data for the the draggable items.
+ 
+`draggable/draggable_container` = This specifies the container within which items can be dropped.
+
+`draggable/draggable_item` = This specifies the items that can be dragged and dropped. `drag_id` is a REQUIRED prop for draggable_item and must match the id on the items within `initial_items`.

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

@@ -0,0 +1,38 @@
+<% initial_items = [
+  { id: "21", name: "Joe Black" },
+  { id: "22", name: "Nancy White" },
+  { id: "23", name: "Bill Green" },
+] %>
+
+<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
+  <%= pb_rails("draggable/draggable_container") do %>
+    <% initial_items.each do |item| %>
+      <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
+        <%= pb_rails("card", props: {highlight: {position: "side", color:"primary"}, margin_bottom: "xs", padding: "xs"}) do %>
+          <%= pb_rails("flex", props:{align_items: "stretch", flex_direction:"column"}) do %>
+            <%= pb_rails("flex", props:{gap: "xs"}) do %>
+              <%= pb_rails("title", props: { text: item[:name], tag: "h4", size: 4 }) %>
+              <%= pb_rails("badge", props: {text:"35-12345" ,variant: "primary"}) %>
+            <% end %>
+            <%= pb_rails("caption", props: { size: "xs", text: "8:00A • Township Name • 90210" }) %>
+            <%= pb_rails("flex", props:{gap: "xxs", spacing:"between"}) do %>
+              <%= pb_rails("flex", props:{gap: "xxs"}) do %>
+                <%= pb_rails("caption", props: { size: "xs" , color: "error" }) do %>
+                  <%= pb_rails("icon", props: { icon: "house-circle-exclamation", fixed_width: true }) %>
+                <% end %>
+                <%= pb_rails("caption", props: { size: "xs" , color: "success" }) do %>
+                  <%= pb_rails("icon", props: { icon: "file-circle-check", fixed_width: true }) %>
+                <% end %>
+              <% end %>
+              <%= pb_rails("flex") do %>
+                <%= pb_rails("badge", props: {text:"Schedule QA" ,variant: "warning", rounded: true}) %>
+                <%= pb_rails("badge", props: {text:"Flex" ,variant: "primary", rounded: true}) %>
+                <%= pb_rails("badge", props: {text:"R99" ,variant: "primary", rounded: true}) %>
+            <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,19 @@
+<% initial_items = [
+  { id: "31", name: "Philadelphia" },
+  { id: "32", name: "New Jersey" },
+  { id: "33", name: "Maryland" },
+  { id: "34", name: "Connecticut" },
+
+] %>
+
+<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
+  <%= pb_rails("draggable/draggable_container") do %>
+    <%= pb_rails("list", props: {ordered: false}) do %>
+        <% initial_items.each do |item| %>
+            <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
+                <%= pb_rails("list/item") do %><%= item[:name] %><% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -8,4 +8,10 @@ examples:
   - draggable_with_cards: Draggable with Cards
   - draggable_multiple_containers: Dragging Across Multiple Containers
   
+  rails:
+  - draggable_default_rails: Default
+  - draggable_with_list_rails: Draggable with List Kit
+  - draggable_with_cards_rails: Draggable with Cards
+
+
   

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.jsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { Flex, SkeletonLoading } from "playbook-ui"
+
+
+const SkeletonLoadingBorderRadius = (props) => (
+  <Flex justify="evenly">
+    <SkeletonLoading 
+        borderRadius="rounded" 
+        height="50px" 
+        width="100px" 
+        {...props}
+    />
+    <SkeletonLoading 
+        borderRadius="xl" 
+        height="50px" 
+        width="100px" 
+        {...props}
+    />
+    <SkeletonLoading 
+        borderRadius="lg" 
+        height="50px" 
+        width="100px" 
+        {...props}
+    />
+    <SkeletonLoading 
+        borderRadius="md" 
+        height="50px" 
+        width="100px" 
+        {...props}
+    />
+    <SkeletonLoading 
+        height="50px" 
+        width="100px" 
+        {...props}
+    />
+    <SkeletonLoading 
+        borderRadius="xs" 
+        height="50px" 
+        width="100px" 
+        {...props}
+    />
+    <SkeletonLoading 
+        borderRadius="none" 
+        height="50px" 
+        width="100px" 
+        {...props}
+    />
+  </Flex>
+)
+
+export default SkeletonLoadingBorderRadius

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.md

@@ -0,0 +1 @@
+The `borderRadius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/visual_guidelines/border_radius) tokens, with `sm` as default.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Card, SkeletonLoading } from "playbook-ui"
+
+
+const SkeletonLoadingColor = (props) => (
+  <div>
+    <Card 
+        borderNone 
+        {...props}
+    >
+      <SkeletonLoading {...props}/>
+    </Card>
+    <Card 
+        background="light" 
+        borderNone 
+        {...props}
+    >
+      <SkeletonLoading 
+          color="white" 
+          {...props} 
+      />
+    </Card>
+  </div>
+)
+
+export default SkeletonLoadingColor

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.md

@@ -0,0 +1 @@
+The SkeletonLoading component has a default and a white `color` variant.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("skeleton_loading") %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { SkeletonLoading } from "playbook-ui"
+
+
+const SkeletonLoadingDefault = (props) => (
+  <div>
+    <SkeletonLoading {...props} />
+  </div>
+)
+
+export default SkeletonLoadingDefault

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { Card, SkeletonLoading } from "playbook-ui"
+
+
+const SkeletonLoadingHeightWidth = (props) => (
+  <div>
+    <SkeletonLoading
+        height="100px"
+        width="50%"
+        {...props}
+    />
+    <SkeletonLoading
+        gap="md"
+        height="20px"
+        marginY="md"
+        stack="3"
+        width="50px"
+        {...props}
+    />
+    <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
+        marginBottom="md"
+        padding="none" 
+    >
+      <SkeletonLoading
+          borderRadius="md"
+          gap="xl"
+          height="50%"
+          width="300px"
+          {...props}
+      />
+    </Card>
+    <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
+        padding="none"
+    >
+      <SkeletonLoading
+          borderRadius="md"
+          gap="xl"
+          height="30%"
+          stack="2"
+          width="70%"
+          {...props}
+      />
+    </Card>
+    <SkeletonLoading 
+        height="150px"
+        marginY="md"
+        width="150px"
+        {...props}
+    />
+    <SkeletonLoading 
+        borderRadius="rounded"
+        height="150px"
+        width="150px"
+        {...props}
+    />
+  </div>
+)
+
+export default SkeletonLoadingHeightWidth

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.md

@@ -0,0 +1,3 @@
+The `height` and `width` props accept pixel and percentage values. If using a percentage for `height`, the parent container must have a set height.
+
+Set the `height` and `width` props to the same value to make a square. A `rounded` borderRadius will make a square a circle. If using percentages to make a square, your parent container must also be a square.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { SkeletonLoading } from "playbook-ui"
+
+
+const SkeletonLoadingLayout = (props) => (
+  <div>
+    <SkeletonLoading
+        stack="5"
+        {...props}
+    />
+    <SkeletonLoading
+        gap="md"
+        paddingTop="xl"
+        stack="3"
+        {...props}
+    />
+  </div>
+)
+
+export default SkeletonLoadingLayout

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.md

@@ -0,0 +1,3 @@
+Use the `stack` and `gap` props in conjunction to layer multiple Skeleton loading bars on top of each other.
+
+`stack` accepts a number that correlates to the number of rows (1 is default), and `gap` accepts a portion of our [spacing props](https://playbook.powerapp.cloud/visual_guidelines/spacing) (`xxs` as default, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`) to set the pixel distance between each row. `gap` will not do anything if there is no corresponding `stack` prop set.

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

@@ -0,0 +1,13 @@
+examples:
+  
+  rails:
+  # - skeleton_loading_default: Default
+  
+  
+  react:
+  - skeleton_loading_default: Default
+  - skeleton_loading_color: Color
+  - skeleton_loading_layout: Layout
+  - skeleton_loading_border_radius: Border Radius
+  - skeleton_loading_height_width: Height & Width
+  

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

@@ -0,0 +1,5 @@
+export { default as SkeletonLoadingDefault } from './_skeleton_loading_default.jsx'
+export { default as SkeletonLoadingColor } from './_skeleton_loading_color.jsx'
+export { default as SkeletonLoadingLayout } from './_skeleton_loading_layout.jsx'
+export { default as SkeletonLoadingBorderRadius } from './_skeleton_loading_border_radius.jsx'
+export { default as SkeletonLoadingHeightWidth } from './_skeleton_loading_height_width.jsx'