playbook_ui_docs 15.0.0.pre.alpha.PLAY2316advancedtablerightsidedoubleborder10726 → 15.0.0.pre.alpha.PLAY2361datepickerarrownav10322

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: df963e3ed4bc831a25fad881219c945d9f230e2930b1f7a35143f9fe5f103b96
-  data.tar.gz: 22bb0eefa9869115fccf925343b7650208b93e41614756cf236f4109a1be4c84
+  metadata.gz: 539205d0c391e17b5ddc5f4dae2a341c201b534a379735df7bb05e73d786efce
+  data.tar.gz: e7eac85b56babca0b31f6ada9925943e5d27bc1a7ef720b3b56d6fd36741fb7b
 SHA512:
-  metadata.gz: 80cb33e096877cf72ed3df4f51e75053ded8439401314c961740a0559d027356e05f9e5e44dce3218966de9c790406eb69ee01a3e1ff0d7bd90a5370dc482c50
-  data.tar.gz: c5ad1c755cbe421ee9c9cf625963033ee86c77fa1ed8e58b086062b05067f0831273f511a80292cb9c5195b97c798fd01fa69204afe741a4970547b5981a7b95
+  metadata.gz: 26f36f041756e896924ebe43d5be91edddf3bfe6807e0526caff3a6e61d06f0dac03e29879fcc532eff7d72bc76dd19d1c86a223c50528e63e41ebf61d4fc1d5
+  data.tar.gz: 9ab1468ee7872cfb131f228f1038b7145762d0e3b1a0e61976125586c33e1a0f40e2d46024cb26bd6fa00bcf2f8171ee3bf8f23bc1cae6f750720d1b1ee1f3de

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.html.erb

@@ -39,7 +39,5 @@
     ],
   },
 ] %>
-<%# Adjusting for test purposes. Will revert prior to commit. %>
-<%= pb_rails("card", props: {})  do %>
-  <%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", table_data: @table_data, column_definitions: column_definitions, table_props: { container: false, vertical_border: true } }) %>
-<% end %>
+
+<%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true } }) %>

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

@@ -1,5 +1,4 @@
 import React from "react"
-import Card from "../../pb_card/_card"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
@@ -45,21 +44,19 @@ const AdvancedTableColumnHeadersVerticalBorder = (props) => {
       ],
     },
   ];
-
+  
   const tableProps = {
-    sticky: true,
+    verticalBorder: true
   }
-// Adjusted for testing purposes. Will revert prior to commit.
+
   return (
     <>
-      <Card>
-        <AdvancedTable
-            columnDefinitions={columnDefinitions}
-            tableData={MOCK_DATA}
-            tableProps={tableProps}
-            {...props}
-        />
-      </Card>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          tableProps={tableProps}
+          {...props}
+      />
     </>
   )
 }

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

@@ -4,6 +4,7 @@ examples:
   - bar_graph_default: Default
   - bar_graph_legend: Legend
   - bar_graph_legend_position: Legend Position
+  - bar_graph_legend_non_clickable: Legend Non Clickable
   - bar_graph_height: Height
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb

@@ -4,9 +4,6 @@
 <%= pb_rails("card", props: {highlight: {position: "top", color:"warning"}, margin_bottom: "sm"}) do %>
   Top Position & Warning Color
 <% end %>
-<%= pb_rails("card", props: {highlight: {position: "right_side", color:"product_5_highlight"}, margin_bottom: "sm"}) do %>
-  Right Side Position & Product 5 Highlight Color
-<% end %>
 <%= pb_rails("card", props: {highlight: {position: "side", color:"category_2"}, margin_bottom: "sm"}) do %>
   Side Position & Category 2 Color
 <% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx

@@ -21,14 +21,6 @@ const CardHighlight = (props) => {
         {'Top Position & Warning Color'}
       </Card>
 
-      <Card
-          {...props}
-          highlight={{ position: 'right_side', color: 'product_5_highlight' }}
-          marginBottom="sm"
-      >
-        {'Right Side Position & Product 5 Highlight Color'}
-      </Card>
-
       <Card
           {...props}
           highlight={{ position: 'side', color: 'category_2' }}

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb

@@ -13,7 +13,7 @@
 }) %>
 
 <%= pb_rails("contact", props: {
-  contact_type: "work",
+  contact_type: "wrong number",
   contact_value: "3245627482",
 }) %>
 
@@ -21,18 +21,3 @@
   contact_type: "work-cell",
   contact_value: "349-185-9988",
 }) %>
-
-<%= pb_rails("contact", props: {
-  contact_type: "wrong-phone",
-  contact_value: "2124396666",
-}) %>
-
-<%= pb_rails("contact", props: {
-  contact_type: "extension",
-  contact_value: "1233",
-}) %>
-
-<%= pb_rails("contact", props: {
-  contact_type: "international",
-  contact_value: "+44 7700 900461",
-}) %>

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx

@@ -28,21 +28,6 @@ const ContactDefault = (props) => {
           contactValue="3245627482"
           {...props}
       />
-      <Contact
-          contactType="wrong-phone"
-          contactValue="2124396666"
-          {...props}
-      />
-      <Contact
-          contactType='extension'
-          contactValue="1234"
-          {...props}
-      />
-      <Contact
-          contactType="international"
-          contactValue="+44 7700 900461"
-          {...props}
-      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb

@@ -26,9 +26,3 @@
   contact_value: "1233",
   contact_detail: "Ext",
 }) %>
-
-<%= pb_rails("contact", props: {
-  contact_type: "international",
-  contact_value: "+44 7700 900461",
-  contact_detail: "International",
-}) %>

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx

@@ -33,12 +33,6 @@ const ContactDefault = (props) => {
           contactValue="1234"
           {...props}
       />
-      <Contact
-          contactDetail="International"
-          contactType="international"
-          contactValue="+44 7700 900461"
-          {...props}
-      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -91,7 +91,6 @@
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
-  <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label" } %>
   <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field", hidden_inputs: true } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
   <%= form.number_field :example_number_field, props: { label: true } %>

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

@@ -3,11 +3,9 @@ examples:
   rails:
   - loading_inline_default: Default
   - loading_inline_custom: Custom Text
-  - loading_inline_variant: Variant
 
   
   
   react:
   - loading_inline_default: Default
   - loading_inline_custom: Custom Text
-  - loading_inline_variant: Variant

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

@@ -1,3 +1,2 @@
 export { default as LoadingInlineDefault } from './_loading_inline_default.jsx'
 export { default as LoadingInlineCustom } from './_loading_inline_custom.jsx'
-export { default as LoadingInlineVariant } from './_loading_inline_variant.jsx'

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb

@@ -4,8 +4,8 @@
 
 <%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_breached" }) %>
 
-<script>
-    window.addEventListener("load", () => {
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {
 
     // variables for the kits you are targeting 
     const passphrase = document.querySelector(".passphrase_breached").querySelector("input")
@@ -142,4 +142,4 @@
     });
 
   })
-</script>
+<% end %>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.html.erb

@@ -10,8 +10,8 @@
 <%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_common" }) %>
 
 
-<script>
-    window.addEventListener("load", () => {
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {
 
     const commonText = document.querySelector("#body_common")
 
@@ -133,4 +133,4 @@
     });
 
   })
-</script>
+<% end %>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.html.erb

@@ -4,8 +4,8 @@
 
 <div id="match"> </div>
 
-<script>
-    window.addEventListener("load", () => {   
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {   
 
       const useState = (defaultValue) => {
           let value = defaultValue;
@@ -48,4 +48,4 @@
 
       }
     })
-</script>
+<% end %>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb

@@ -32,8 +32,8 @@
 
 
 
-<script>
-    window.addEventListener("load", () => {
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {
 
 
     // variables for the passphrase kits you are targeting 
@@ -320,4 +320,4 @@
 
   
   })
-</script>
+<% end %>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb

@@ -7,8 +7,8 @@
 <%= pb_rails("text_input", props: { label: "Passphrase Strength", value: "0", disabled: true, id: "calc_strength_change" }) %>
 
 
-<script>
-    window.addEventListener("load", () => {
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {
 
     // variables for the kits you are targeting 
     const passphrase = document.querySelector(".passphrase_change").querySelector("input")
@@ -120,4 +120,4 @@
     });
 
   })
-</script>
+<% end %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb

@@ -13,8 +13,8 @@
 <script>
   document.addEventListener('DOMContentLoaded', () => {
     function handleButtonClick() {
-      const editorContainer = [...document.querySelectorAll('[data-pb-react-props]')]
-        .find(element => element.getAttribute('data-pb-react-props')?.includes('"id":"content-preview-editor"'))
+      const editorContainer = [...document.querySelectorAll('[data-react-props]')]
+        .find(element => element.getAttribute('data-react-props')?.includes('"id":"content-preview-editor"'))
 
       const editorElement = editorContainer?.querySelector('trix-editor')
       const inputId = editorElement?.getAttribute('input')

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.html.erb

@@ -11,27 +11,4 @@
             padding_right: "xs" 
         }) %>
     <% end %>
-<% end %>
-
-<%= pb_rails("flex", props: { classname: "flex-container", margin_top: "lg", vertical: "stretch" }) do %>
-    <%= pb_rails("body", props: { classname: "flex-item" }) do %>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-    <% end %>
-    <%= pb_rails("section_separator", props: { orientation: "vertical" }) do %>
-        <%= pb_rails("card", props: {
-            border_radius: "rounded",
-            justify_content: "center",
-            padding: "none"
-        })  do %>
-            <%= pb_rails("caption", props: {
-                text: "TODAY",
-                size: "xs",
-                padding_left: "xs",
-                padding_right: "xs" 
-            }) %>
-        <% end %>
-    <% end %>
-    <%= pb_rails("body", props: { classname: "flex-item" }) do %>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-    <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx

@@ -2,25 +2,8 @@ import React from 'react'
 import Card from '../../pb_card/_card'
 import Caption from '../../pb_caption/_caption'
 import SectionSeparator from '../../pb_section_separator/_section_separator'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
 
-const childrenHorizontal = (
-    <Card
-        borderRadius="rounded"
-        justifyContent="center"
-        padding="none"
-    >
-        <Caption
-            paddingLeft="xs"
-            paddingRight="xs"
-            size="xs"
-            text="TODAY"
-        />
-    </Card>
-)
-
-const childrenVertical = (
+const children = (
     <Card
         borderRadius="rounded"
         justifyContent="center"
@@ -37,33 +20,12 @@ const childrenVertical = (
 
 const SectionSeparatorChildren = (props) => {
     return (
-        <>
-            <SectionSeparator
-                {...props}
-                lineStyle='dashed'
-            >
-                {childrenHorizontal}
-            </SectionSeparator>
-            <Flex
-                inline="flex-container"
-                marginTop="lg"
-                vertical="stretch"
-            >
-                <FlexItem>
-                    {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
-                </FlexItem>
-                    <SectionSeparator
-                        orientation="vertical"
-                        {...props}
-                    >
-                        {childrenVertical}
-                    </SectionSeparator>
-                <FlexItem>
-                    {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
-                </FlexItem>
-            </Flex>
-        </>
-        
+        <SectionSeparator
+            {...props}
+            lineStyle='dashed'
+        >
+            {children}
+        </SectionSeparator>
     )
 }
 

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

@@ -9,8 +9,6 @@ examples:
   - text_input_no_label: No Label
   - text_input_options: Input Options
   - text_input_mask: Mask
-  - text_input_autocomplete: Autocomplete
-  
   react:
   - text_input_default: Default
   - text_input_error: With Error
@@ -21,7 +19,6 @@ examples:
   - text_input_no_label: No Label
   - text_input_mask: Mask
   - text_input_sanitize: Sanitized Masked Input
-  - text_input_autocomplete: Autocomplete
 
 
   swift:

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

@@ -7,4 +7,3 @@ export { default as TextInputInline } from './_text_input_inline.jsx'
 export { default as TextInputNoLabel } from './_text_input_no_label.jsx'
 export { default as TextInputMask } from './_text_input_mask.jsx'
 export { default as TextInputSanitize } from './_text_input_sanitize.jsx'
-export { default as TextInputAutocomplete } from './_text_input_autocomplete.jsx'

data/app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md

@@ -0,0 +1 @@
+Use these only to display status updates in areas that has a lot of data.

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb

@@ -8,6 +8,7 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now,
+  show_date: true,
   align: "left"
 }) %>
 
@@ -15,6 +16,7 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now + 4.years,
+  show_date: true,
   align: "left"
 }) %>
 
@@ -22,6 +24,7 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now - 1.year,
+  show_date: true,
   align: "left"
 }) %>
 
@@ -37,6 +40,7 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now,
+  show_date: true,
   align: "center"
 }) %>
 
@@ -44,6 +48,7 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now + 4.years,
+  show_date: true,
   align: "center"
 }) %>
 
@@ -51,6 +56,7 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now - 1.year,
+  show_date: true,
   align: "center"
 }) %>
 
@@ -58,6 +64,7 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now,
+  show_date: false,
   align: "right"
 }) %>
 
@@ -65,6 +72,7 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now,
+  show_date: true,
   align: "right"
 }) %>
 
@@ -72,6 +80,7 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now + 4.years,
+  show_date: true,
   align: "right"
 }) %>
 
@@ -79,5 +88,6 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now - 1.year,
+  show_date: true,
   align: "right"
 }) %>

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx

@@ -25,6 +25,7 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="left"
+          showDate
           timestamp={todaysDate}
           {...props}
       />
@@ -33,6 +34,7 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="left"
+          showDate
           timestamp={futureDate}
           {...props}
       />
@@ -41,6 +43,7 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="left"
+          showDate
           timestamp={pastDate}
           {...props}
       />
@@ -59,6 +62,7 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="center"
+          showDate
           timestamp={todaysDate}
           {...props}
       />
@@ -67,6 +71,7 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="center"
+          showDate
           timestamp={futureDate}
           {...props}
       />
@@ -75,6 +80,7 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="center"
+          showDate
           timestamp={pastDate}
           {...props}
       />
@@ -93,6 +99,7 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="right"
+          showDate
           timestamp={todaysDate}
           {...props}
       />
@@ -101,6 +108,7 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="right"
+          showDate
           timestamp={futureDate}
           {...props}
       />
@@ -109,6 +117,7 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="right"
+          showDate
           timestamp={pastDate}
           {...props}
       />

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb

@@ -1,15 +1,29 @@
 <%= pb_rails("timestamp", props: {
-  timestamp: DateTime.now
+  timestamp: DateTime.now,
+  show_date: false,
+  align: "left"
 }) %>
 
 <br>
 
 <%= pb_rails("timestamp", props: {
-  timestamp: DateTime.now + 4.years
+  timestamp: DateTime.now,
+  show_date: true,
+  align: "left"
 }) %>
 
 <br>
 
 <%= pb_rails("timestamp", props: {
-  timestamp: DateTime.now - 1.year
+  timestamp: DateTime.now + 4.years,
+  show_date: true,
+  align: "left"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now - 1.year,
+  show_date: true,
+  align: "left"
 }) %>

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx

@@ -15,6 +15,8 @@ const TimestampDefault = (props) => {
   return (
     <div>
       <Timestamp
+          align="left"
+          showDate={false}
           timestamp={todaysDate}
           {...props}
       />
@@ -22,6 +24,17 @@ const TimestampDefault = (props) => {
       <br />
 
       <Timestamp
+          align="left"
+          showDate
+          timestamp={todaysDate}
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="left"
+          showDate
           timestamp={futureDate}
           {...props}
       />
@@ -29,6 +42,8 @@ const TimestampDefault = (props) => {
       <br />
 
       <Timestamp
+          align="left"
+          showDate
           timestamp={pastDate}
           {...props}
       />

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb

@@ -10,6 +10,7 @@
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now - 3.months,
   variant: "elapsed",
+  show_user: false
 }) %>
 
 <br>
@@ -17,5 +18,6 @@
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now - 320.days,
   variant: "elapsed",
+  show_user: false,
   hide_updated: true
 }) %>

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx

@@ -23,6 +23,7 @@ const TimestampElapsed = (props) => {
       <br />
 
       <Timestamp
+          showUser={false}
           timestamp={customDate}
           variant="elapsed"
           {...props}
@@ -32,6 +33,7 @@ const TimestampElapsed = (props) => {
 
       <Timestamp
           hideUpdated
+          showUser={false}
           timestamp={customDate}
           variant="elapsed"
           {...props}