playbook_ui 10.9.0 → 10.13.0.pre.node.update

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6738352dabfe04589eca748d37fea92e74bd7684ee2f48bc4e09c4c1af0971d0
-  data.tar.gz: b896c23edb82d87be0f1f51098cf121e93ef29199b52084af8b46a12894ebac9
+  metadata.gz: 0e3bef4b4c16e0fe2d51c365b0fc52340324afd59b8f94650fa1ebd39307773c
+  data.tar.gz: 4a69c6cf7d912a368b92286224ad19fcc06de88ae3dca63074aabfdcb6217400
 SHA512:
-  metadata.gz: d36fca433fbb9a395d407ae6f684ad46345d4803db855bad56d518efb8a96cc751f1fb6181ba0ef298a19ae6d281b974d7887bd70a06daae1a89984095907385
-  data.tar.gz: 95dccde272cc2c53415a39a4de02dbc677db44e54a6625796d8fdc446656b9d555f81a31b7e2d9dc29d8dd7fa8dd2570ede988c56cdaafefe95539e0277ab895
+  metadata.gz: 95fa1b261d673deef080479651865dfe1a7bbe3305076f4270e48f36ecf1f79406e6794baa41c44475a16e8737529f3f7d8283b7b1a6b6f8f8bc9f7efa5c48dd
+  data.tar.gz: 94f7fe481bd6345176e026b4384e8136f24f966554f3bc39f6a30c52b9e5479f8ad038dc290a7d114694504691a0e3a135d16efd7969b43fd281e692bf34ba52

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -31,11 +31,11 @@
       }
     }
   }
+
   &:focus,:focus-within{
     div.cal_icon_wrapper, input.text_input{
       @include transition_default;
       border-color: $primary;
     }
   }
-
 }

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_inline_styles.scss

@@ -9,6 +9,10 @@
 [class^=pb_date_picker_kit] {
   /*Default - No value in date picker*/
   &.inline-date-picker {
+    [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper input::placeholder,
+    [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
+      opacity: 1;
+    }
     &:not(:hover) {
       #date-picker-inline-angle-down {
         svg {

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import classnames from 'classnames'
 
 import { globalProps } from '../utilities/globalProps'
@@ -19,25 +19,45 @@ type FixedConfirmationToastProps = {
   className?: string,
   closeable?: boolean,
   data?: string,
+  horizontal?: 'right' | 'left' | 'center',
   id?: string,
   multiLine?: boolean,
+  onClose?: () => void,
+  open?: boolean,
   status?: 'success' | 'error' | 'neutral' | 'tip',
   text: string,
+  vertical?: 'top' | 'bottom',
 }
 
 const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
   const [showToast, toggleToast] = useState(true)
-  const { className, closeable = false, multiLine = false, status = 'neutral', text } = props
+  const {
+    className,
+    closeable = false,
+    horizontal,
+    multiLine = false,
+    onClose = () => {},
+    open = true,
+    status = 'neutral',
+    text,
+    vertical,
+  } = props
   const css = classnames(
     `pb_fixed_confirmation_toast_kit_${status}`,
     { '_multi_line': multiLine },
+    { [`positioned_toast ${vertical} ${horizontal}`]: vertical && horizontal },
     globalProps(props),
     className
   )
   const icon = iconMap[status]
 
+  useEffect(() => {
+    toggleToast(open)
+  }, [open])
+
   const handleClick = () => {
     toggleToast(!closeable)
+    onClose()
   }
 
   return (

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss

@@ -1,3 +1,4 @@
+@import "../tokens/positioning";
 @import "../tokens/spacing";
 @import "../tokens/colors";
 @import "../pb_body/body";
@@ -30,6 +31,37 @@ $confirmation_toast_colors: (
     opacity: 1;
   }
 
+  &.positioned_toast {
+    position: fixed;
+    z-index: $z_9;
+    display: flex;
+    justify-content: space-around;
+
+    &.top {
+      top: $space_md;
+    }
+
+    &.bottom {
+      bottom: $space_md;
+    }
+
+    &.left {
+      left: $space_md;
+      right: auto;
+    }
+
+    &.center {
+      left: 50%;
+      right: auto;
+      transform: translateX(-50%);
+    }
+
+    &.right {
+      left: auto;
+      right: $space_md;
+    }
+  }
+
   @each $color_name, $color_value in $confirmation_toast_colors {
     &[class*=_#{$color_name}]  {
       background: $color_value;

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb

@@ -0,0 +1,90 @@
+<%= pb_rails("button", props: { text: "Top Center", variant: "secondary", data: { toast: "#toast-top-center" } }) %>
+<%= pb_rails("button", props: { text: "Top Left", variant: "secondary", data: { toast: "#toast-top-left" } }) %>
+<%= pb_rails("button", props: { text: "Top Right", variant: "secondary", data: { toast: "#toast-top-right" } }) %>
+<%= pb_rails("button", props: { text: "Bottom Center", variant: "secondary", data: { toast: "#toast-bottom-center" } }) %>
+<%= pb_rails("button", props: { text: "Bottom Left", variant: "secondary", data: { toast: "#toast-bottom-left" } }) %>
+<%= pb_rails("button", props: { text: "Bottom Right", variant: "secondary", data: { toast: "#toast-bottom-right" } }) %>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  classname: "toast-to-hide",
+  closeable: true,
+  id: "toast-top-center",
+  text: "Top Center",
+  status: "neutral",
+  vertical: "top",
+  horizontal: "center"
+}) %>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  classname: "toast-to-hide",
+  closeable: true,
+  id: "toast-top-left",
+  text: "Top Left",
+  status: "neutral",
+  vertical: "top",
+  horizontal: "left"
+}) %>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  classname: "toast-to-hide",
+  closeable: true,
+  id: "toast-top-right",
+  text: "Top Right",
+  status: "neutral",
+  vertical: "top",
+  horizontal: "right"
+}) %>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  classname: "toast-to-hide",
+  closeable: true,
+  id: "toast-bottom-center",
+  text: "Bottom Center",
+  status: "neutral",
+  vertical: "bottom",
+  horizontal: "center"
+}) %>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  classname: "toast-to-hide",
+  closeable: true,
+  id: "toast-bottom-left",
+  text: "Bottom Left",
+  status: "neutral",
+  vertical: "bottom",
+  horizontal: "left"
+}) %>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  classname: "toast-to-hide",
+  closeable: true,
+  id: "toast-bottom-right",
+  text: "Bottom Right",
+  status: "neutral",
+  vertical: "bottom",
+  horizontal: "right"
+}) %>
+
+<script type="text/javascript">
+  const toasts = document.querySelectorAll(".toast-to-hide")
+  const buttons = document.querySelectorAll("button[data-toast]")
+
+  const hideToasts = () => {
+    toasts.forEach((toast) => {
+      toast.style.display = "none"
+    })
+  }
+
+  hideToasts()
+
+  buttons.forEach((button) => {
+    button.onclick = () => {
+      hideToasts()
+      let toast = document.querySelector(button.getAttribute("data-toast"))
+
+      if (toast) {
+        toast.style.display = "flex"
+      }
+    }
+  })
+</script>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.jsx

@@ -0,0 +1,105 @@
+import React, { useState } from 'react'
+
+import Button from '../../pb_button/_button'
+import FixedConfirmationToast from '../_fixed_confirmation_toast'
+
+const FixedConfirmationToastPositions = (props) => {
+  const [state, setState] = useState({
+    open: false,
+    vertical: 'top',
+    horizontal: 'center',
+  })
+
+  const { vertical, horizontal, open } = state
+
+  const handleClick = (newState) => () => {
+    setState({ open: true, ...newState })
+  }
+
+  const handleClose = () => {
+    setState({ ...state, open: false })
+  }
+
+  return (
+    <div>
+      <Button
+          onClick={handleClick({
+            horizontal: 'center',
+            open: true,
+            vertical: 'top',
+          })}
+          text="Top Center"
+          variant="secondary"
+          {...props}
+      />
+      {' '}
+      <Button
+          onClick={handleClick({
+            horizontal: 'left',
+            open: true,
+            vertical: 'top',
+          })}
+          text="Top Left"
+          variant="secondary"
+          {...props}
+      />
+      {' '}
+      <Button
+          onClick={handleClick({
+            horizontal: 'right',
+            open: true,
+            vertical: 'top',
+          })}
+          text="Top Right"
+          variant="secondary"
+          {...props}
+      />
+      {' '}
+      <Button
+          onClick={handleClick({
+            horizontal: 'center',
+            open: true,
+            vertical: 'bottom',
+          })}
+          text="Bottom Center"
+          variant="secondary"
+          {...props}
+      />
+      {' '}
+      <Button
+          onClick={handleClick({
+            horizontal: 'left',
+            open: true,
+            vertical: 'bottom',
+          })}
+          text="Bottom Left"
+          variant="secondary"
+          {...props}
+      />
+      {' '}
+      <Button
+          onClick={handleClick({
+            horizontal: 'right',
+            open: true,
+            vertical: 'bottom',
+          })}
+          text="Bottom Right"
+          variant="secondary"
+          {...props}
+      />
+
+      <FixedConfirmationToast
+          closeable
+          horizontal={horizontal}
+          onClose={handleClose}
+          open={open}
+          status="neutral"
+          text={`${vertical} ${horizontal}`}
+          vertical={vertical}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default FixedConfirmationToastPositions

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

@@ -4,8 +4,10 @@ examples:
   - fixed_confirmation_toast_default: Default
   - fixed_confirmation_toast_multi_line: Multi Line
   - fixed_confirmation_toast_close: Click to Close
+  - fixed_confirmation_toast_positions: Click to Show Positions
   
   react:
   - fixed_confirmation_toast_default: Default
   - fixed_confirmation_toast_multi_line: Multi Line
   - fixed_confirmation_toast_close: Click to Close
+  - fixed_confirmation_toast_positions: Click to Show Positions

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

@@ -1,3 +1,4 @@
 export { default as FixedConfirmationToastDefault } from './_fixed_confirmation_toast_default.jsx'
 export { default as FixedConfirmationToastMultiLine } from './_fixed_confirmation_toast_multi_line.jsx'
 export { default as FixedConfirmationToastClose } from './_fixed_confirmation_toast_close.jsx'
+export { default as FixedConfirmationToastPositions } from './_fixed_confirmation_toast_positions.jsx'

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -11,6 +11,12 @@ module Playbook
                         default: false
       prop :closeable, type: Playbook::Props::Boolean,
                        default: false
+      prop :horizontal, type: Playbook::Props::Enum,
+                        values: [nil, "right", "left", "center"],
+                        default: nil
+      prop :vertical, type: Playbook::Props::Enum,
+                      values: [nil, "top", "bottom"],
+                      default: nil
 
       def show_text?
         text.present?
@@ -20,6 +26,10 @@ module Playbook
         closeable.present? ? " remove_toast" : ""
       end
 
+      def position_class
+        horizontal && vertical ? " positioned_toast #{vertical} #{horizontal}" : ""
+      end
+
       def multi_line_class
         multi_line.present? ? "multi_line" : nil
       end
@@ -38,7 +48,7 @@ module Playbook
       end
 
       def classname
-        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class
+        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class
       end
     end
   end

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tooltip.html.erb

@@ -0,0 +1,59 @@
+<%= pb_rails("progress_step", props: {orientation: "horizontal"}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-1", tooltip: "Tooltip for step 1", tooltip_position: "right", step_direction: "horizontal" }) do %>
+  step 1
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-2", tooltip: "Tooltip for step 2", step_direction: "horizontal" }) do %>
+  step 2
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-3", tooltip: "Tooltip for step 3", tooltip_position: "left", step_direction: "horizontal" }) do %>
+  step 3
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-4", tooltip: "Tooltip for step 4", tooltip_position: "bottom" }) do %>
+  step 4
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-5", tooltip: "Tooltip for step 5" }) do %>
+  step 5
+  <% end %>
+<% end %>
+
+<br /><br />
+
+<%= pb_rails("progress_step", props: {orientation: "vertical"}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-6", tooltip: "Tooltip step 1", step_direction: "vertical" }) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-7", tooltip: "Tooltip step 2", tooltip_position: "left"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-8", tooltip: "Tooltip step 3", tooltip_position: "top", step_direction: "vertical" }) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-9", tooltip: "Tooltip step 4", tooltip_position: "bottom"}) do %>
+  <% end %>
+<% end %>
+
+<br /><br>
+<%= pb_rails("progress_step",props:{ variant:"tracker", icon:true}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-10", tooltip: "The order has been received", step_direction: "horizontal" , tooltip_position: "right"  }) do %>
+      <%= pb_rails("caption", props:{text: "Ordered"})%>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-11", tooltip:"Item(s) have been shipped" }) do %>
+      <%= pb_rails("caption", props:{text: "Shipped"})%>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-12", tooltip:"This step has not been reached", tooltip_position: "left" }) do %>
+      <%= pb_rails("caption", props:{text: "Delivered"})%>
+  <% end %>
+<% end %>
+
+<br /><br>
+<%= pb_rails("progress_step",props:{ variant:"tracker", icon:true}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-13", tooltip: "The order has been processed", tooltip_position: "right" }) do %>
+      <%= pb_rails("caption", props:{text: "Ordered"})%>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active", icon: "exclamation-triangle", classname: "tooltip-trigger-14", tooltip: "More details needed before shipment", tooltip_position: "bottom" }) do %>
+      <%= pb_rails("caption", props:{text: "Shipped"})%>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-15", tooltip: "This step is inactive"}) do %>
+      <%= pb_rails("caption", props:{text: "Out for Delivery"})%>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-16", tooltip: "Estimated delivery: Jun 27", tooltip_position: "left"}) do %>
+      <%= pb_rails("caption", props:{text: "Delivered"})%>
+  <% end %>
+<% end %>

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

@@ -4,8 +4,8 @@ examples:
   - progress_step_vertical: Vertical
   - progress_step_tracker: Tracker
   - progress_step_custom_icon: Custom Icon
-  
-  
+  - progress_step_tooltip: Tooltip
+
   react:
   - progress_step_default: Default
   - progress_step_vertical: Vertical

data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb

@@ -2,10 +2,21 @@
   id: object.id,
   data: object.data,
   class: object.classname) do %>
-  <div class="box">
+  <div class="box" style="max-width: min-content;" id="<%= object.tooltip_trigger_class %>">
     <div class="circle">
       <%= pb_rails("icon", props: { icon: object.icon, size: "xs" }) if object.icon.present? %>
     </div>
+    <% if object.tooltip.present? %>
+      <div>
+        <%= pb_rails("tooltip", props: {
+          trigger_element_selector: "##{object.tooltip_trigger_class}",
+          tooltip_id: "example-tooltip",
+          position: object.step_tooltip_position
+        }) do %>
+            <%= object.tooltip %>
+      <% end %>
+      </div>
+    <% end %>
     <div class="content">
       <%= content.presence %>
     <div>

data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb

@@ -8,6 +8,11 @@ module Playbook
                     default: "inactive"
 
       prop :icon, required: false, default: "check"
+      prop :tooltip, required: false
+      prop :tooltip_position, required: false
+      prop :step_direction, type: Playbook::Props::Enum,
+                            values: %w[horizontal vertical],
+                            default: "horizontal"
 
       def name_icon
         icon || "check"
@@ -16,6 +21,22 @@ module Playbook
       def classname
         generate_classname("pb_progress_step_item", status)
       end
+
+      def tooltip_trigger_class
+        classname.split(" ").last
+      end
+
+      def step_tooltip_position
+        if tooltip_position.present?
+          if step_direction == "vertical"
+            "right"
+          else
+            "top"
+          end
+        else
+          tooltip_position
+        end
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss

@@ -118,19 +118,4 @@
       }
     }
   }
-  &.hide-labels {
-    tbody {
-      tr {
-        td {
-          &::before {
-            content: '';
-            left: 0;
-            padding-right: 0;
-            position: relative;
-            width: 0;
-          }
-        }
-      }
-    }
-  }
 }

data/app/pb_kits/playbook/pb_table/styles/_mobile.scss

@@ -118,19 +118,4 @@
       }
     }
   }
-  &.hide-labels {
-    tbody {
-      tr {
-        td {
-          &::before {
-            content: '';
-            left: 0;
-            padding-right: 0;
-            position: relative;
-            width: 0;
-          }
-        }
-      }
-    }
-  }
 }

data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss

@@ -118,19 +118,4 @@
       }
     }
   }
-  &.hide-labels {
-    tbody {
-      tr {
-        td {
-          &::before {
-            content: '';
-            left: 0;
-            padding-right: 0;
-            position: relative;
-            width: 0;
-          }
-        }
-      }
-    }
-  }
 }

data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss

@@ -118,19 +118,4 @@
       }
     }
   }
-  &.hide-labels {
-    tbody {
-      tr {
-        td {
-          &::before {
-            content: '';
-            left: 0;
-            padding-right: 0;
-            position: relative;
-            width: 0;
-          }
-        }
-      }
-    }
-  }
 }

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

@@ -90,7 +90,11 @@
     }
   }
   &.inline {
-    &:not(:hover) { 
+    .text_input_wrapper input::placeholder,
+    .text_input_wrapper .text_input .placeholder {
+      opacity: 1;
+    }
+    &:not(:hover) {
       .text_input_wrapper input:not(:focus) {
         background-color: transparent;
         border-color: transparent;

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

@@ -70,7 +70,7 @@ const Timestamp = (props: TimestampProps) => {
 
   const fullDateDisplay = () => {
     let fullDisplay = `${dateTimestamp.toMonth()} ${dateTimestamp.toDay()}`
-    if (dateTimestamp.toYear() > currentYear) {
+    if (dateTimestamp.toYear() !== currentYear) {
       fullDisplay = `${fullDisplay}, ${dateTimestamp.toYear()}`
     }
     return `${fullDisplay} ${' \u00b7 '} ${fullTimeDisplay()}`

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

@@ -20,6 +20,14 @@
   align: "left"
 }) %>
 
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now - 1.year,
+  show_date: true,
+  align: "left"
+}) %>
+
 <br><br>
 
 <%= pb_rails("timestamp", props: {
@@ -44,6 +52,14 @@
   align: "center"
 }) %>
 
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now - 1.year,
+  show_date: true,
+  align: "center"
+}) %>
+
 <br><br>
 
 <%= pb_rails("timestamp", props: {
@@ -67,3 +83,11 @@
   show_date: true,
   align: "right"
 }) %>
+
+<br>
+
+<%= 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

@@ -2,12 +2,14 @@ import React from 'react'
 import Timestamp from '../_timestamp.jsx'
 
 const todaysDate = new Date()
-const year = new Date().getFullYear() + 4
+const futureYear = new Date().getFullYear() + 4
+const pastYear = new Date().getFullYear() - 1
 const month = new Date().getMonth()
 const date = new Date().getDate()
 const hours = new Date().getHours()
 const minutes = new Date().getMinutes()
-const customDate = new Date(year, month, date, hours, minutes)
+const futureDate = new Date(futureYear, month, date, hours, minutes)
+const pastDate = new Date(pastYear, month, date, hours, minutes)
 
 const TimestampAlign = (props) => {
   return (
@@ -33,7 +35,16 @@ const TimestampAlign = (props) => {
       <Timestamp
           align="left"
           showDate
-          timestamp={customDate}
+          timestamp={futureDate}
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="left"
+          showDate
+          timestamp={pastDate}
           {...props}
       />
 
@@ -61,7 +72,16 @@ const TimestampAlign = (props) => {
       <Timestamp
           align="center"
           showDate
-          timestamp={customDate}
+          timestamp={futureDate}
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="center"
+          showDate
+          timestamp={pastDate}
           {...props}
       />
 
@@ -89,7 +109,16 @@ const TimestampAlign = (props) => {
       <Timestamp
           align="right"
           showDate
-          timestamp={customDate}
+          timestamp={futureDate}
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="right"
+          showDate
+          timestamp={pastDate}
           {...props}
       />
     </div>

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

@@ -19,3 +19,11 @@
   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

@@ -2,12 +2,14 @@ import React from 'react'
 import Timestamp from '../_timestamp.jsx'
 
 const todaysDate = new Date()
-const year = new Date().getFullYear() + 4
+const futureYear = new Date().getFullYear() + 4
+const pastYear = new Date().getFullYear() - 1
 const month = new Date().getMonth()
 const date = new Date().getDate()
 const hours = new Date().getHours()
 const minutes = new Date().getMinutes()
-const customDate = new Date(year, month, date, hours, minutes)
+const futureDate = new Date(futureYear, month, date, hours, minutes)
+const pastDate = new Date(pastYear, month, date, hours, minutes)
 
 const TimestampDefault = (props) => {
   return (
@@ -33,7 +35,16 @@ const TimestampDefault = (props) => {
       <Timestamp
           align="left"
           showDate
-          timestamp={customDate}
+          timestamp={futureDate}
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="left"
+          showDate
+          timestamp={pastDate}
           {...props}
       />
     </div>

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

@@ -28,6 +28,16 @@
 
 <br>
 
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now - 1.year,
+  show_date: true,
+  show_timezone: true,
+  timezone: "America/New_York",
+  align: "left"
+}) %>
+
+<br>
+
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now,
   show_date: false,
@@ -57,3 +67,13 @@
 }) %>
 
 <br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now - 1.year,
+  show_date: true,
+  show_timezone: true,
+  timezone: "Asia/Hong_Kong",
+  align: "left"
+}) %>
+
+<br>

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

@@ -2,12 +2,14 @@ import React from 'react'
 import Timestamp from '../_timestamp.jsx'
 
 const todaysDate = new Date()
-const year = new Date().getFullYear() + 4
+const futureYear = new Date().getFullYear() + 4
+const pastYear = new Date().getFullYear() - 1
 const month = new Date().getMonth()
 const date = new Date().getDate()
 const hours = new Date().getHours()
 const minutes = new Date().getMinutes()
-const customDate = new Date(year, month, date, hours, minutes)
+const futureDate = new Date(futureYear, month, date, hours, minutes)
+const pastDate = new Date(pastYear, month, date, hours, minutes)
 
 const TimestampTimezones = (props) => {
   return (
@@ -38,7 +40,18 @@ const TimestampTimezones = (props) => {
           align="left"
           showDate
           showTimezone
-          timestamp={customDate}
+          timestamp={futureDate}
+          timezone="America/New_York"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="left"
+          showDate
+          showTimezone
+          timestamp={pastDate}
           timezone="America/New_York"
           {...props}
       />
@@ -71,7 +84,18 @@ const TimestampTimezones = (props) => {
           align="left"
           showDate
           showTimezone
-          timestamp={customDate}
+          timestamp={futureDate}
+          timezone="Asia/Hong_Kong"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          align="left"
+          showDate
+          showTimezone
+          timestamp={pastDate}
           timezone="Asia/Hong_Kong"
           {...props}
       />

data/dist/reset.css

@@ -1,2 +1,61 @@
-*{box-sizing:border-box;margin:0;padding:0}*:before,*:after{box-sizing:border-box}html{-webkit-tap-highlight-color:rgba(0,0,0,0);height:100vh;overflow-x:hidden}body{font-family:"Proxima Nova","Helvetica Neue",Helvetica,Arial,sans_serif;font-size:16px;line-height:1.5;background-color:#F3F7FB;height:100%;letter-spacing:0;font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-moz-font-feature-settings:"liga" on;color:#242B42;margin:0 !important;padding:0 !important;box-sizing:border-box;min-height:100vh;padding:50px}a{text-decoration:none;color:#0056CF}
+/* CLEAN UP AND REMOVE */
+/* Headings */
+/* Standard Font Weights */
+/* Non_Standard Font Weights */
+/*=====================================
+Base colors should not be documented.
+Only document color use.
+
+Colors -----------------------------*/
+/* Specialty Gradient -----------------*/
+/* Interface colors -------------------*/
+/* Main colors ------------------------*/
+/*=====================================
+
+Background colors ------------------*/
+/* Card colors ------------------*/
+/* Active colors ----------------------*/
+/* Hover colors -----------------------*/
+/* Focus colors -----------------------*/
+/* Border colors ----------------------*/
+/* Shadow colors ----------------------*/
+/* Text colors ------------------------*/
+/* Data colors ------------------------*/
+/* Status colors ----------------------*/
+/* Link colors ------------------------*/
+/* Product colors ---------------------*/
+/* Category colors ---------------------*/
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0; }
+  *:before, *:after {
+    box-sizing: border-box; }
+
+html {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  height: 100vh;
+  overflow-x: hidden; }
+
+body {
+  font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif;
+  font-size: 16px;
+  line-height: 1.5;
+  background-color: #F3F7FB;
+  height: 100%;
+  letter-spacing: 0;
+  font-weight: 400;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+  -moz-font-feature-settings: "liga" on;
+  color: #242B42;
+  margin: 0 !important;
+  padding: 0 !important;
+  box-sizing: border-box;
+  min-height: 100vh;
+  padding: 50px; }
+
+a {
+  text-decoration: none;
+  color: #0056CF; }
 

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "10.8.0"
-  VERSION = "10.9.0"
+  PREVIOUS_VERSION = "10.12.0"
+  VERSION = "10.13.0.pre.node.update"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.9.0
+  version: 10.13.0.pre.node.update
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-09-20 00:00:00.000000000 Z
+date: 2021-11-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -18,9 +18,6 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 5.2.4.5
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: '6.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -28,9 +25,6 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 5.2.4.5
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: '6.0'
 - !ruby/object:Gem::Dependency
   name: actionview
   requirement: !ruby/object:Gem::Requirement
@@ -38,9 +32,6 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 5.2.4.5
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: '6.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -48,9 +39,6 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 5.2.4.5
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: '6.0'
 - !ruby/object:Gem::Dependency
   name: activesupport
   requirement: !ruby/object:Gem::Requirement
@@ -58,9 +46,6 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 5.2.4.5
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: '6.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -68,9 +53,6 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 5.2.4.5
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: '6.0'
 - !ruby/object:Gem::Dependency
   name: react-rails
   requirement: !ruby/object:Gem::Requirement
@@ -176,9 +158,6 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 5.2.4.5
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: '6.0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -186,9 +165,6 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 5.2.4.5
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: '6.0'
 - !ruby/object:Gem::Dependency
   name: rspec-html-matchers
   requirement: !ruby/object:Gem::Requirement
@@ -833,6 +809,8 @@ files:
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.md
+- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb
+- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.jsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb
@@ -1402,6 +1380,7 @@ files:
 - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.html.erb
 - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb
 - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx
+- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tooltip.html.erb
 - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.html.erb
 - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.jsx
 - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker_click_events.jsx
@@ -2072,9 +2051,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.0.3
 signing_key: