playbook_ui_docs 14.12.0.pre.alpha.testingwithfas5689 → 14.12.0.pre.rc.0

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.html.erb

@@ -1,47 +0,0 @@
-<% content = capture do %>
-    <%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
-        <%= pb_rails("body", props: { text: "Nested content inside a Table Row" }) %>
-    <% end %>
-<% end %>
-
-<%= pb_rails("table", props: { size: "sm" }) do %>
-  <%= pb_rails("table/table_head") do %>
-      <%= pb_rails("table/table_row") do %>
-          <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
-          <%= pb_rails("table/table_header", props: { text: ""}) %>
-       <% end %>
-  <% end %>
-  <%= pb_rails("table/table_body") do %>
-      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, id: "1" }) do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-          <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
-            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
-          <% end %>
-      <% end %>
-      <%= pb_rails("table/table_row") do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-          <%= pb_rails("table/table_cell", props: { text: ""}) %>
-      <% end %>
-      <%= pb_rails("table/table_row") do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-          <%= pb_rails("table/table_cell", props: { text: ""}) %>
-      <% end %>
-  <% end %>
-<% end %>
-  

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_rails.md

@@ -1,2 +0,0 @@
-The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsible_content` prop to add any content to the collapsible Row.
-Please be aware that you will need to pass in an `id` to any table rows you want to be collapsible. Make sure every `id` is unique if you are using multipe collapsibles.

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.html.erb

@@ -1,52 +0,0 @@
-<% content = capture do %>
-    <%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
-        <%= pb_rails("body", props: { text: "Expanded Custom Layout", padding_bottom: "sm" }) %>
-        <%= pb_rails("flex", props: { justify: "between" }) do %>
-            <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
-            <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
-            <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
-            <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
-        <% end %>
-    <% end %>
-<% end %>
-
-<%= pb_rails("table", props: { size: "sm" }) do %>
-  <%= pb_rails("table/table_head") do %>
-      <%= pb_rails("table/table_row") do %>
-          <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
-          <%= pb_rails("table/table_header", props: { text: ""}) %>
-       <% end %>
-  <% end %>
-  <%= pb_rails("table/table_body") do %>
-      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, id: "2" }) do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-          <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
-            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
-          <% end %>
-      <% end %>
-      <%= pb_rails("table/table_row") do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-          <%= pb_rails("table/table_cell", props: { text: ""}) %>
-      <% end %>
-      <%= pb_rails("table/table_row") do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-          <%= pb_rails("table/table_cell", props: { text: ""}) %>
-      <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.html.erb

@@ -1,52 +0,0 @@
-<% content = capture do %>
-    <%= pb_rails("table", props: { container: false, border_radius: "none", size: "sm"}) do %>
-        <%= pb_rails("background", props: { tag: "tr" }) do %>
-            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
-            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
-            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
-            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
-            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
-        <% end %>
-    <% end %>
-<% end %>
-
-<%= pb_rails("table", props: { size: "sm" }) do %>
-  <%= pb_rails("table/table_head") do %>
-      <%= pb_rails("table/table_row") do %>
-          <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
-          <%= pb_rails("table/table_header", props: { text: ""}) %>
-       <% end %>
-  <% end %>
-  <%= pb_rails("table/table_body") do %>
-      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: false, id: "3" }) do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-          <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
-            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
-          <% end %>
-      <% end %>
-      <%= pb_rails("table/table_row") do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-          <%= pb_rails("table/table_cell", props: { text: ""}) %>
-      <% end %>
-      <%= pb_rails("table/table_row") do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-          <%= pb_rails("table/table_cell", props: { text: ""}) %>
-      <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md

@@ -1,3 +0,0 @@
-The `collapsible_content` can display any content, including nested Table Rows.
-
-Additionally, the `collapsible_side_highlight` can also be removed by setting it to false if needed. This prop is set to true by default.

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb

@@ -1,80 +0,0 @@
-<% content = capture do %>
-    <%= pb_rails("table", props: { container: false, border_radius: "none", size: "sm"}) do %>
-        <%= pb_rails("table/table_head") do %>
-            <%= pb_rails("background", props: { tag: "tr" }) do %>
-                <%= pb_rails("table/table_header") do %>Alt Header<% end %>
-                <%= pb_rails("table/table_header") do %>Alt Header<% end %>
-                <%= pb_rails("table/table_header") do %>Alt Header<% end %>
-                <%= pb_rails("table/table_header") do %>Alt Header<% end %>
-            <% end %>
-        <% end %>
-        <%= pb_rails("table/table_body") do %>
-            <%= pb_rails("table/table_row") do %>
-                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
-                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
-                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
-                <%= pb_rails("table/table_cell") do %>
-                    <%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
-                <% end %>
-            <% end %>
-            <%= pb_rails("table/table_row") do %>
-                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
-                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
-                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
-                <%= pb_rails("table/table_cell") do %>
-                    <%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
-                <% end %>
-            <% end %>
-            <%= pb_rails("table/table_row") do %>
-                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
-                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
-                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
-                <%= pb_rails("table/table_cell") do %>
-                    <%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
-                <% end %>
-            <% end %>
-        <% end %>
-    <% end %>
-<% end %>
-
-
-<%= pb_rails("table", props: { size: "sm" }) do %>
-  <%= pb_rails("table/table_head") do %>
-      <%= pb_rails("table/table_row") do %>
-          <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
-          <%= pb_rails("table/table_header", props: { text: ""}) %>
-       <% end %>
-  <% end %>
-  <%= pb_rails("table/table_body") do %>
-      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: false, id: "4" }) do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-          <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
-            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
-          <% end %>
-      <% end %>
-      <%= pb_rails("table/table_row") do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-          <%= pb_rails("table/table_cell", props: { text: ""}) %>
-      <% end %>
-      <%= pb_rails("table/table_row") do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-          <%= pb_rails("table/table_cell", props: { text: ""}) %>
-      <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md

@@ -1 +0,0 @@
-The `collapsible_content` can also be used to display nested Tables within each Row.

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

@@ -1,46 +0,0 @@
-  <%= pb_rails("text_input", props: {
-    label: "Currency",
-    mask: "currency",
-    margin_bottom: "md",
-    name: "currency_name",
-    placeholder:"$0.00"
-  }) %>
-
-  <%= pb_rails("text_input", props: {
-    label: "ZIP Code",
-    mask: "zip_code",
-    margin_bottom: "md",
-    placeholder: "12345"
-  }) %>
-
-  <%= pb_rails("text_input", props: {
-    label: "Postal Code",
-    mask: "postal_code",
-    placeholder: "12345-6789",
-    margin_bottom: "md",
-  }) %>
-
-  <%= pb_rails("text_input", props: {
-    label: "SSN",
-    mask: "ssn",
-    margin_bottom: "md",
-    placeholder: "123-45-6789"
-  }) %>
-
-  <%= pb_rails("title" , props: {
-    text: "Hidden Input Under The Hood",
-    padding_bottom: "sm"
-  })%>
-
-  <%= pb_rails("text_input", props: {
-    label: "Currency",
-    mask: "currency",
-    margin_bottom: "md",
-    name: "currency_name",
-    id: "example-currency",
-    placeholder: "$0.00",
-  }) %>
-
-<style>
-#example-currency-sanitized {display: flex !important;}
-</style>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask_rails.md

@@ -1,3 +0,0 @@
-The mask prop lets you style your inputs while maintaining the value that the user typed in.
-
-It uses a hidden input field to submit the unformatted value as it will have the proper `name` attribute. It will also copy the id field with a `"#{your-id-sanitized}"`

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb

@@ -1,19 +0,0 @@
-<%
-  names = [
-    { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
-    { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
-    { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
-    { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
-    { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
-  ]
-%>
-
-<%= pb_rails("typeahead", props: {
-    html_options: { style: { maxWidth: "240px" }},
-    id: "typeahead-form-pill",
-    is_multi: true,
-    options: names,
-    label: "Truncation Within Typeahead",
-    pills: true,
-    truncate: 1,
-}) %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx

@@ -1,27 +0,0 @@
-import React from 'react'
-import { Typeahead } from 'playbook-ui'
-
-const names = [
-  { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
-  { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
-  { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
-  { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
-  { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
-]
-
-const TypeaheadTruncatedText = (props) => {
-  return (
-    <>
-      <Typeahead
-          htmlOptions={{ style: { maxWidth: "240px" }}}
-          isMulti
-          label="Truncation Within Typeahead"
-          options={names}
-          truncate={1}
-          {...props}
-      />
-    </>
-  )
-}
-
-export default TypeaheadTruncatedText

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.md

@@ -1 +0,0 @@
-For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.