playbook_ui_docs 14.7.0.pre.rc.19 → 14.8.0.pre.alpha.PLAY1598floatinguiupgrade4563

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5293ed4de08a534bdda085db80aeac124c1eb0a18ca1c09563c0dbd0939ae7dd
-  data.tar.gz: d0015f4418aa858a399a6d80484133b14954925f4b592100ba6f50278c59b025
+  metadata.gz: f6dbb6db66dc1826b37e2cf613d0d6790a701e37200d2c1aabf25ed89c99752c
+  data.tar.gz: fc6fe3c9a13ecf1f44ec78f00acb8a02c0c58c277305fbafc71115242391c456
 SHA512:
-  metadata.gz: 8ee6361ddd51ec534c6644f0b6194d257a4718f85cdf452691a9bb1a6fdb83606b3f0c7b15cb6c052331e67a49a60b4db0457522fbd3826fe126611f36b47a4d
-  data.tar.gz: 9fc4b4124f94741702e586ff21a3a2dbe75a9bd9836829f9fd03c591a2e4eb53068274e1fbf20cc592fe16f46950abef06f5d57c72389805729a05cfbbca00fb
+  metadata.gz: c6af9dbf1244ef135c221cee215b6ffe123b9b5e998a2b0c4401aedd40c6a4f19051b19a702e8984eb9c86d684a6ad9c073c210c374fbeb0584864ffa71b7ae4
+  data.tar.gz: bd8f29c5dca2b3dbf37a6ae45fb21249686b1a545097840637e1321181fb38cc3141c05413ccf0a24106c799bc7cf1eab795b581d0badb7e2f0cd1916dbbf588

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_date_picker/docs/_date_picker_quick_pick_default_date.html.erb

@@ -0,0 +1,42 @@
+<%= pb_rails("date_picker", props: {
+  allow_input: true,
+  default_date: "This month",
+  end_date_id: "quick-pick-end-date",
+  end_date_name: "quick-pick-end-date",
+  mode: "range",
+  picker_id: "quick-pick-default-date",
+  placeholder: "mm/dd/yyyy to mm/dd/yyyy",
+  selection_type: "quickpick",
+  start_date_id: "quick-pick-start-date",
+  start_date_name: "quick-pick-start-date"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  allow_input: true,
+  custom_quick_pick_dates: {
+    dates: [
+      {
+        label: "Last 15 months",
+        value: {
+          timePeriod: "months",
+          amount: 15,
+        },
+      },
+      {
+        label: "First Week of June 2022",
+        value: ["06/01/2022", "06/07/2022"],
+      },
+    ],
+  },
+  default_date: "First Week of June 2022",
+  end_date_id: "quick-pick-end-date",
+  end_date_name: "quick-pick-end-date",
+  label: "Custom Date Picker",
+  mode: "range",
+  picker_id: "custom-quick-pick-default-date",
+  placeholder: "mm/dd/yyyy to mm/dd/yyyy",
+  selection_type: "quickpick",
+  start_date_id: "quick-pick-start-date",
+  start_date_name: "quick-pick-start-date"
+}) %>
+

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.jsx

@@ -0,0 +1,44 @@
+import React from "react"
+import DatePicker from "../_date_picker"
+
+const DatePickerQuickPickDefaultDate = (props) => (
+    <>
+        <DatePicker
+            allowInput
+            defaultDate="This month"
+            mode="range"
+            pickerId="quick-pick-default-date"
+            placeholder="mm/dd/yyyy to mm/dd/yyyy"
+            selectionType="quickpick"
+            {...props}
+        />
+
+        <DatePicker
+            allowInput
+            customQuickPickDates={{
+                dates: [
+                    {
+                        label: "Last 15 months",
+                        value: {
+                            timePeriod: "months",
+                            amount: 15,
+                        },
+                    },
+                    {
+                        label: "First Week of June 2022",
+                        value: ["06/01/2022", "06/07/2022"],
+                    },
+                ],
+            }}
+            defaultDate="First Week of June 2022"
+            label="Custom Date Picker"
+            mode="range"
+            pickerId="custom-quick-pick-default-date"
+            placeholder="mm/dd/yyyy to mm/dd/yyyy"
+            selectionType="quickpick"
+            {...props}
+        />
+    </>
+)
+
+export default DatePickerQuickPickDefaultDate

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.md

@@ -0,0 +1 @@
+To set a default value using Quick Pick, use the `defaultDate` or `default_date` prop. This prop should match one of the labels displayed in the UI of the dropdown menu.

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

@@ -12,6 +12,7 @@ examples:
   - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
   - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
+  - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max
@@ -42,6 +43,7 @@ examples:
   - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
   - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
+  - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max

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

@@ -25,3 +25,4 @@ export { default as DatePickerQuickPickRangeLimit } from './_date_picker_quick_p
 export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
 export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_custom'
 export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'
+export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_pick_default_date'

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_timeline/docs/_timeline_with_gap.html.erb

@@ -0,0 +1,94 @@
+<%= pb_rails("flex", props: { justify: "evenly" }) do %>
+    <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "xs"}) do %>
+            <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Conversation started",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Trip #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Refund issue #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+        <% end %>
+    <% end %>
+
+    <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "sm"}) do %>
+            <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Conversation started",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Trip #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Refund issue #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+        <% end %>
+    <% end %>
+
+    <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "md"}) do %>
+            <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Conversation started",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Trip #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Refund issue #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+        <% end %>
+    <% end %>
+
+    <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "lg"}) do %>
+            <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Conversation started",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Trip #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Refund issue #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>
+

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.jsx

@@ -0,0 +1,180 @@
+import React from 'react'
+
+import Timeline from '../_timeline'
+import Flex from "../../pb_flex/_flex"
+import FlexItem from "../../pb_flex/_flex_item"
+import Body from '../../pb_body/_body'
+
+const TimelineWithGap = (props) => (
+  <div>
+    <Flex justify="evenly">
+    <FlexItem>
+        <Timeline
+            gap="xs"
+            orientation="vertical"
+        >
+          <Timeline.Item
+              icon="user"
+              iconColor="royal"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Conversation started"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="check"
+              iconColor="teal"
+              lineStyle="dotted"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Trip #12422"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="credit-card"
+              iconColor="red"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Refund issue #12422"
+                {...props}
+            />
+          </Timeline.Item>
+        </Timeline>
+      </FlexItem>
+      <FlexItem>
+        <Timeline
+            gap="sm"
+            orientation="vertical"
+        >
+          <Timeline.Item
+              icon="user"
+              iconColor="royal"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Conversation started"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="check"
+              iconColor="teal"
+              lineStyle="dotted"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Trip #12422"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="credit-card"
+              iconColor="red"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Refund issue #12422"
+                {...props}
+            />
+          </Timeline.Item>
+        </Timeline>
+      </FlexItem>
+      <FlexItem>
+        <Timeline
+            gap="md"
+            orientation="vertical"
+        >
+          <Timeline.Item
+              icon="user"
+              iconColor="royal"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Conversation started"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="check"
+              iconColor="teal"
+              lineStyle="dotted"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Trip #12422"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="credit-card"
+              iconColor="red"
+              lineStyle="dotted"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Refund issue #12422"
+                {...props}
+            />
+          </Timeline.Item>
+        </Timeline>
+      </FlexItem>
+      <FlexItem>
+        <Timeline
+            gap="lg"
+            orientation="vertical"
+        >
+          <Timeline.Item
+              icon="user"
+              iconColor="royal"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Conversation started"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="check"
+              iconColor="teal"
+              lineStyle="dotted"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Trip #12422"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="credit-card"
+              iconColor="red"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Refund issue #12422"
+                {...props}
+            />
+          </Timeline.Item>
+        </Timeline>
+      </FlexItem>
+    </Flex>
+  </div>
+)
+
+export default TimelineWithGap

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.md

@@ -0,0 +1 @@
+Use the optional `gap` prop to render the timeline kit with adjusted spacing between nodes. The `gap` prop will only work when utilized with a vertical timeline. Horizontal timelines will show no difference in spacing.

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

@@ -1,14 +1,16 @@
 examples:
-  
+
   rails:
   - timeline_default: Default
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
   - timeline_with_children: With Children
-  
-  
+  - timeline_with_gap: With Gap
+
+
   react:
   - timeline_default: Default
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
   - timeline_with_children: With Children
+  - timeline_with_gap: With Gap

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

@@ -2,3 +2,5 @@ export { default as TimelineDefault } from './_timeline_default.jsx'
 export { default as TimelineVertical } from './_timeline_vertical.jsx'
 export { default as TimelineWithDate } from './_timeline_with_date.jsx'
 export { default as TimelineWithChildren } from './_timeline_with_children.jsx'
+export { default as TimelineWithGap } from './_timeline_with_gap.jsx'
+