playbook_ui_docs 14.8.0.pre.alpha.PLAY16254545 → 14.8.0.pre.rc.0

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.8.0.pre.alpha.PLAY16254545
+  version: 14.8.0.pre.rc.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-11-19 00:00:00.000000000 Z
+date: 2024-11-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -507,9 +507,6 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom_override.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom_override.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom_override.md
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.html.erb
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.html.erb
@@ -651,17 +648,12 @@ files:
 - app/pb_kits/playbook/pb_distribution_bar/docs/index.js
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.html.erb
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.md
 - app/pb_kits/playbook/pb_draggable/docs/example.yml
@@ -1840,9 +1832,6 @@ files:
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.html.erb
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.jsx
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.md
-- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.html.erb
-- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.jsx
-- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.md
 - app/pb_kits/playbook/pb_timeline/docs/example.yml
 - app/pb_kits/playbook/pb_timeline/docs/index.js
 - app/pb_kits/playbook/pb_timestamp/docs/_description.md

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.html.erb

@@ -1,42 +0,0 @@
-<%= 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

@@ -1,44 +0,0 @@
-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

@@ -1 +0,0 @@
-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_draggable/docs/_draggable_default_rails.html.erb

@@ -1,26 +0,0 @@
-<% 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

@@ -1,7 +0,0 @@
-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

@@ -1,38 +0,0 @@
-<% 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

@@ -1,19 +0,0 @@
-<% 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_timeline/docs/_timeline_with_gap.html.erb

@@ -1,94 +0,0 @@
-<%= 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

@@ -1,180 +0,0 @@
-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

@@ -1 +0,0 @@
-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.