playbook_ui 10.11.0 → 10.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '0485f294ad48da3202f9a98fdf00c4cd3c3addbad15ceda199c33ac4eabdb776'
-  data.tar.gz: 5b76b5396e753b22d50149d395ee93f838e76d23e6fb5c06ca8dca52da46fc8e
+  metadata.gz: a0e3bf2bdc63a8c3fc28f07fd67719ab9bd2d759ddbd3706215c2a77cc1790e4
+  data.tar.gz: 9c344346d97a29dcca825eecb59252fea8b5f55ddef3e2fe208ed43c5fca0186
 SHA512:
-  metadata.gz: ba0d8cc5f60aae14257de0987e4c14eefb1f7f6b017a52192f9af48c5fc36e05a7dee9e38382355e15fbcc17461ccc7307a2cef3a45d4c73fa2e12ee9c405710
-  data.tar.gz: 66092173d97050b33d281376303d0342a0ccbf5d0e4e35acbe15d2b5d19ed6cc2268932ce8a4c50eb1fb5ac6637a55b5ea9634d671127b40fed754a9a097138a
+  metadata.gz: 0c6e10aad137d1f01ed36c58f76ba654334fd78b4bd9fd648141366ea15cbe459e47a74bd9fec56a341a7d5b35169fe3fd5dcbf09beb62c5f9d2d527f91cc5ed
+  data.tar.gz: d4767de2a8a6e43c0c715d1dfb62414ff172ba9e0efebf102f650bb2ea92b492ba01df3a4353cda0cd870ed08764e618f16c848590e00f212fb7283dce83e97d

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_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/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "10.10.0"
-  VERSION = "10.11.0"
+  PREVIOUS_VERSION = "10.11.0"
+  VERSION = "10.12.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.11.0
+  version: 10.12.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-10-01 00:00:00.000000000 Z
+date: 2021-10-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -809,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
@@ -1378,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