playbook_ui 15.0.0.pre.alpha.PLAY2316advancedtablerightsidedoubleborder10726 → 15.0.0.pre.alpha.PLAY2361datepickerarrownav10322

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/_section_separator.scss

@@ -53,13 +53,10 @@ $section_colors_dark: (
 .pb_section_separator_vertical {
   margin-left: $space_xs;
   margin-right: $space_xs;
-  flex-direction: column;
   &::before {
-    flex: 1;
-    @include section_separator_vertical(false);
+    display: none;
   }
   &::after {
-    flex: 1;
     @include section_separator_vertical(false);
   }
 }
@@ -90,7 +87,7 @@ $section_colors_dark: (
         background: none;
       }
       &.pb_section_separator_vertical {
-        &::before, &::after {
+        &::after {
           border: 1px dashed $color_value;
           background: none;
         }
@@ -109,7 +106,7 @@ $section_colors_dark: (
   }
   
   &.pb_section_separator_vertical {
-    &::before, &::after {
+    &::after {
       @include section_separator_vertical(true);
     }
   }
@@ -118,11 +115,6 @@ $section_colors_dark: (
     &::before, &::after {
       @include section_separator_dashed(true);
     }
-    &.pb_section_separator_vertical {
-      &::before, &::after {
-        @include section_separator_dashed(true);
-      }
-    }
   }
 }
 
@@ -134,7 +126,7 @@ $section_colors_dark: (
     }
 
     &.pb_section_separator_vertical {
-      &::before, &::after {
+      &::after {
         @include section_separator_vertical(false);
         background: $color_value;
       }
@@ -146,7 +138,7 @@ $section_colors_dark: (
         background: none;
       }
       &.pb_section_separator_vertical {
-        &::before, &::after {
+        &::after {
           border: 1px dashed $color_value;
           background: none;
         }

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_section_separator/section_separator.html.erb

@@ -7,10 +7,7 @@
         <% end %>
     <% end %>
     <% if object.orientation === 'vertical' %>
-        <% if content %>
-            <%= content %>
-        <% elsif object.text %>
-            <span><%= pb_rails("caption", props: { text: object.text }) %></span>
+        <%= pb_rails("flex", props: { orientation: "column"}) do %>
         <% end %>
     <%end%>
 <% end %>

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -36,7 +36,6 @@ type TextInputProps = {
     alignment?: "right" | "left",
     border?: boolean,
   },
-  autoComplete?: boolean | string,
 } & GlobalProps
 
 const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>) => {
@@ -60,7 +59,6 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     type = 'text',
     value = '',
     children = null,
-    autoComplete = true,
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -144,7 +142,6 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     childInput ? React.cloneElement(children, { className: "text_input" }) :
     (<input
         {...domSafeProps(props)}
-        autoComplete={typeof autoComplete === "string" ? autoComplete : ( autoComplete ? undefined : "off" )}
         className="text_input"
         disabled={disabled}
         id={id}

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_text_input/text_input.rb

@@ -15,7 +15,8 @@ module Playbook
         "cvv" => '\d{3,4}',
       }.freeze
 
-      prop :autocomplete, default: true
+      prop :autocomplete, type: Playbook::Props::Boolean,
+                          default: true
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
       prop :error
@@ -68,7 +69,7 @@ module Playbook
 
       def all_input_options
         {
-          autocomplete: autocomplete == true ? nil : (autocomplete.presence || "off"),
+          autocomplete: autocomplete ? nil : "off",
           class: "text_input #{input_options.dig(:classname) || ''}",
           data: validation_data,
           disabled: disabled,

data/app/pb_kits/playbook/pb_text_input/text_input.test.js

@@ -306,41 +306,3 @@ test('returns masked CVV value', () => {
 
   expect(input.value).toBe('')
 })
-
-test('adds autocomplete string attribute', () => {
-  render(
-    <TextInput
-        autoComplete="family-name"
-        data={{ testid: testId }}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const input = within(kit).getByRole('textbox')
-  expect(input).toHaveAttribute("autocomplete", "family-name")
-})
-
-test('adds autocomplete "off" attribute', () => {
-  render(
-    <TextInput
-        autoComplete={false}
-        data={{ testid: testId }}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const input = within(kit).getByRole('textbox')
-  expect(input).toHaveAttribute("autocomplete", "off")
-})
-
-test('does not add autocomplete attribute otherwise', () => {
-  render(
-    <TextInput
-        data={{ testid: testId }}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const input = within(kit).getByRole('textbox')
-  expect(input).not.toHaveAttribute("autocomplete")
-})

data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx

@@ -18,11 +18,9 @@ type TimestampProps = {
   timezone: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  showCurrentYear?: boolean,
   showDate?: boolean,
   showUser?: boolean,
   hideUpdated?: boolean,
-  showTime?: boolean,
   showTimezone?: boolean,
   unstyled?: boolean,
   variant?: "default" | "elapsed" | "updated"
@@ -39,11 +37,9 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
     text,
     timezone,
     timestamp,
-    showCurrentYear = false,
     showDate = true,
     showUser = false,
     hideUpdated = false,
-    showTime = true,
     showTimezone = false,
     unstyled = false,
     variant = 'default',
@@ -59,6 +55,7 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
   )
 
   const currentYear = new Date().getFullYear().toString()
+  const dateDisplay = `${DateTime.toMonth(timestamp, timezone)} ${DateTime.toDay(timestamp, timezone)}`
   const shouldShowUser = showUser == true && text.length > 0
   const shouldShowTimezone = showTimezone == true && timezone.length > 0
   const updatedText = hideUpdated ? "" : "Last updated"
@@ -73,26 +70,16 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
     return timeDisplay
   }
 
-  const baseDateDisplay = () => {
-  let display = `${DateTime.toMonth(timestamp, timezone)} ${DateTime.toDay(timestamp, timezone)}`
-  if (DateTime.toYear(timestamp, timezone).toString() !== currentYear || showCurrentYear) {
-    display = `${display}, ${DateTime.toYear(timestamp, timezone)}`
-  }
-  return display
-}
-
   const fullDateDisplay = () => {
-    const fullDisplay = baseDateDisplay()
-    return showTime ? `${fullDisplay} ${' \u00b7 '} ${fullTimeDisplay()}` : fullDisplay
+    let fullDisplay = `${DateTime.toMonth(timestamp, timezone)} ${DateTime.toDay(timestamp, timezone)}`
+    if (DateTime.toYear(timestamp, timezone).toString() !== currentYear) {
+      fullDisplay = `${fullDisplay}, ${DateTime.toYear(timestamp, timezone)}`
+    }
+    return `${fullDisplay} ${' \u00b7 '} ${fullTimeDisplay()}`
   }
 
   const formatUpdatedString = () => {
-    const finalUpdatedString = []
-    if (shouldShowUser) finalUpdatedString.push(`by ${text}`)
-    if (showDate && !showTime) finalUpdatedString.push(`on ${baseDateDisplay()}`)
-    if (showDate && showTime) finalUpdatedString.push(`on ${baseDateDisplay()} at ${timeDisplay}`)
-    if (showTime && !showDate) finalUpdatedString.push(`at ${timeDisplay}`)
-    return `Last updated ${finalUpdatedString.join(' ')}`
+    return `Last updated ${userDisplay} on ${dateDisplay} at ${timeDisplay}`
   }
 
   const formatElapsedString = () => {
@@ -106,10 +93,7 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
     case 'elapsed':
       return formatElapsedString()
     default:
-      if (showDate && showTime) return timestamp ? fullDateDisplay() : text
-      if (showDate && !showTime) return baseDateDisplay()
-      if (!showDate && showTime) return fullTimeDisplay()
-      return text
+      return showDate ? timestamp ? fullDateDisplay() : text : fullTimeDisplay()
     }
   }
 

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}