playbook_ui 15.0.0.pre.alpha.PLAY198710641 → 15.0.0.pre.alpha.PLAY236510413

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4f692a3e63d89de4fe158b94d5114817e3e6dfd45108fb5ea88dec73f8a3362b
-  data.tar.gz: b77805447d91e42a4167450176bcf1772ed6d9bed5231786cde8cf6ce3929651
+  metadata.gz: c2160795c8e7884b53baf24a0caf41501a31484abfc2558b1cda1eb92c78e156
+  data.tar.gz: 0bd79d78760dc7617e1ab5a232a703ebb5c20fda537b2bcc8e45d0f69dc36260
 SHA512:
-  metadata.gz: f6619f4dc7594a4b1e2cf846f29847640f6ae076afc3b60b1b2f385c37ced204c40b9355a63af0ea65aa9bb4ab2130f4c43198a48eaa2719761e91a9ebe61930
-  data.tar.gz: e29fa8941bdf8b40ccae627949a91b336e52dc63e888b9b1c48e53b6588f39cbf5aac5c4bfaf53cdc7115c06b385e0f3ee96d791a25085e6ef6286e52d13d423
+  metadata.gz: '079e5354e33efd02c223d772f6ea1a0d4d16f1ac7631231e2ca5a841acc7178ab7e89f3475e6572999e6ed52a35288d3bffce23770d0321392ed532de27468a8'
+  data.tar.gz: 54c89d7d1eeae1d607b9df1a03aa4820dce84333731b67421b57be5e935b6170953929f86c4ebe8cf79b2029bc57b5d8bebf6ce1d0a92981d460f948b2eea5b5

data/app/pb_kits/playbook/_playbook.scss

@@ -33,6 +33,7 @@
 @import 'pb_distribution_bar/distribution_bar';
 @import 'pb_draggable/draggable';
 @import 'pb_dropdown/dropdown';
+@import 'pb_empty_state/empty_state';
 @import 'pb_file_upload/file_upload';
 @import 'pb_filter/filter';
 @import 'pb_fixed_confirmation_toast/fixed_confirmation_toast';
@@ -108,8 +109,6 @@
 @import 'pb_user/user';
 @import 'pb_user_badge/user_badge';
 @import 'pb_weekday_stacked/weekday_stacked';
-@import 'pb_empty_state/empty_state';
-@import 'pb_pb_bar_graph/pb_bar_graph';
 @import 'pb_pb_circle_chart/pb_circle_chart';
 @import 'utilities/mixins';
 @import 'utilities/spacing';

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

@@ -20,7 +20,7 @@
 // Dark mode
 .pb_card_kit.dark {
   @include pb_card_dark;
-
+  
   &.pb_card_kit_selected {
     @include pb_card_selected_dark;
   }
@@ -33,8 +33,7 @@
 
 // Highlight styles
 .pb_card_kit_highlight_top,
-.pb_card_kit_highlight_side,
-.pb_card_kit_highlight_right_side {
+.pb_card_kit_highlight_side {
   overflow: hidden;
 }
 
@@ -53,20 +52,13 @@
   }
 }
 
-// Highlight side variants
+// Highlight side variants  
 @each $color_name, $color_value in $pb_card_highlight_colors {
   .pb_card_kit_highlight_side.pb_card_kit_highlight_#{$color_name}::before {
     @include pb_card_highlight($pb_card_highlight_size, 100%, $color_value);
   }
 }
 
-// Highlight side right variants
-@each $color_name, $color_value in $pb_card_highlight_colors {
-  .pb_card_kit_highlight_right_side.pb_card_kit_highlight_#{$color_name}::before {
-    @include pb_card_right_highlight($pb_card_highlight_size, 100%, $color_value);
-  }
-}
-
 // Card Header
 .pb_card_header_kit {
   flex-grow: 0;
@@ -76,7 +68,7 @@
   padding: $space_sm;
   border: 0;
   border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
-
+  
   // Inherit border radius from parent card
   .pb_card_kit_border_radius_xs & {
     border-radius: $border_radius_xs $border_radius_xs 0px 0px;

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -26,7 +26,7 @@ type CardPropTypes = {
   dragHandle?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   highlight?: {
-    position?: "side" | "right_side" | "top",
+    position?: "side" | "top",
     color?: string,
   },
   id?: string,
@@ -56,7 +56,7 @@ const Header = (props: CardHeaderProps) => {
   const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
   const headerColorCSS = `pb_card_header_kit_${headerColor}`
   const headerStripedCSS = headerColorStriped ? `pb_card_header_kit_${headerColor}_striped` : ''
-
+  
   const headerCSS = classnames(
     'pb_card_header_kit',
     headerColorCSS,
@@ -108,7 +108,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
   const borderRadiusCSS = borderRadius !== 'md' ? `pb_card_kit_border_radius_${borderRadius}` : ''
   const highlightPositionCSS = highlight.position ? `pb_card_kit_highlight_${highlight.position}` : ''
   const highlightColorCSS = highlight.color ? `pb_card_kit_highlight_${highlight.color}` : ''
-
+  
   const cardCss = classnames(
     'pb_card_kit', // Base class
     selectedCSS,

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -87,16 +87,6 @@ $pb_card_header_colors: map-merge(map-merge(map-merge($product_colors, $addition
   background: $background;
 }
 
-@mixin pb_card_right_highlight($width, $height, $background){
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: $width;
-  height: $height;
-  background: $background;
-}
-
 @mixin pb_card_header_color($header_color) {
   background: $header_color;
 }

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_date_picker/_date_picker.tsx

@@ -210,12 +210,10 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
           className="input_wrapper"
       >
 
-        {!hideLabel && (
-          <Caption
-              className="pb_date_picker_kit_label"
-              text={label}
-          />
-        )}
+        <Caption
+            className="pb_date_picker_kit_label"
+            text={hideLabel ? null : label}
+        />
           <>
             <div className="date_picker_input_wrapper">
               <input

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

@@ -35,7 +35,6 @@ type FixedConfirmationToastProps = {
 
 const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.ReactElement => {
   const [showToast, toggleToast] = useState(true);
-
   const {
     autoClose = 0,
     children,
@@ -88,15 +87,8 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
     <>
       {showToast && (
         <div
-            aria-atomic="true"
-            aria-live="polite"
             className={css}
             onClick={handleClick}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" || e.key === " ") handleClick();
-            }}
-            role="status"
-            tabIndex={0}
             {...htmlProps}
         >
           {returnedIcon && icon !== "none" && (
@@ -119,7 +111,6 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
 
           {closeable && (
             <Icon
-                aria={{ "label": "Close Toast" }}
                 className="pb_icon"
                 cursor="pointer"
                 fixedWidth={false}

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb

@@ -1,6 +1,6 @@
-<%= pb_content_tag(:div, "aria-atomic": "true", "aria-live": "polite", role: "status", tabindex: 0, onkeydown: "if(event.key==='Enter'||event.key===' '){ this.remove(); }" ) do %>
+<%= pb_content_tag do %>
     <% if object.icon_value && object.icon_value != "none" %>
-    <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true, aria: { "aria-label": "#{object.icon_value} icon" } }) %>
+    <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
     <% end %>
     <% if content %>
         <%= content %>
@@ -8,5 +8,5 @@
         <%= pb_rails("title", props: { text: object.text, size: 4, flex: "1", classname: "pb_fixed_confirmation_toast_text" }) %>
     <% end %>
 
-    <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer", fixed_width: true, aria: { "aria-label": "Close Toast" } }) if object.closeable %>
+    <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer", fixed_width: true }) if object.closeable %>
 <% end %>

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_icon_button/_icon_button.tsx

@@ -51,7 +51,6 @@ const IconButton = (props: IconButtonProps) => {
         id={id}
     >
       <Button
-          aria={aria}
           borderRadius="xs"
           htmlType={htmlType}
           link={link}

data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb

@@ -1,6 +1,5 @@
 <%= pb_content_tag do %>
-  <%= pb_rails("button", props: { aria: object.aria,
-                                  type: object.type,
+  <%= pb_rails("button", props: { type: object.type,
                                   link: object.link,
                                   new_window:object.new_window,
                                   target: object.target,

data/app/pb_kits/playbook/pb_nav/_item.tsx

@@ -140,8 +140,7 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
   delete filteredProps?.marginLeft;
 
 
-  const isLink = !!link
-  const Tag = isLink ? "a" : "div"
+  const Tag = link ? "a" : "div";
   const activeClass = active === true ? "active" : "";
   const highlightedBorderClass = active === true && highlighted_border === false ? "highlighted_border_none" : "";
   const collapsibleTrailClass = collapsible && collapsibleTrail ? "collapsible_trail" : "";
@@ -201,13 +200,6 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
 
   const collapsibleClasses = buildCss("collapsible_nav_wrapper", activeClass, highlightedBorderClass, collapsibleTrailClass)
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (!isLink && (e.key === "Enter" || e.key === " ")) {
-      e.preventDefault()
-      onClick?.()
-    }
-  }
-
   return (
     <>
       {collapsible ? (
@@ -230,18 +222,15 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
                   {...dataProps}
                   {...htmlProps}
                   className={classes}
-                  href={isLink ? link : undefined}
+                  href={link}
                   id={id}
-                  role={!isLink ? "button" : undefined}
-                  tabIndex={!isLink ? 0 : undefined}
-                  target={isLink ? target : undefined}
+                  target={target}
               >
                 {imageUrl && (
                   <div
                       className="pb_nav_list_item_icon_section_collapsible"
                       key={imageUrl}
                       onClick={(e) => handleIconClick(e)}
-                      onKeyDown={!isLink ? handleKeyDown : undefined}
                   >
                     <Image className="pb_nav_img_wrapper"
                         url={imageUrl}
@@ -276,13 +265,10 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
             {...dataProps}
             {...htmlProps}
             className={classes}
-            href={isLink ? link : undefined}
+            href={link}
             id={id}
             onClick={onClick}
-            onKeyDown={!isLink ? handleKeyDown : undefined}
-            role={!isLink ? "button" : undefined}
-            tabIndex={!isLink ? 0 : undefined}
-            target={isLink ? target : undefined}
+            target={target}
         >
           {imageUrl && (
             <div className="pb_nav_list_item_icon_section"

data/app/pb_kits/playbook/pb_nav/item.html.erb

@@ -3,9 +3,7 @@
       <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark, classname:object.margin_classes }) do %>
         <%= pb_content_tag( object.tag,
             href: object.link && object.link,
-            target: object.link && object.target,
-            onkeydown: !object.link ? "if(event.key==='Enter'||event.key===' '){event.preventDefault(); this.click();}" : nil,
-            tabindex: object.link ? nil : 0,
+            target: object.link && object.target
           ) do %>
           <% if object.image_url %>
             <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
@@ -25,9 +23,7 @@
   <% else %>
     <%= pb_content_tag( object.tag,
         href: object.link && object.link,
-        target: object.link && object.target,
-        onkeydown: !object.link ? "if(event.key==='Enter'||event.key===' '){event.preventDefault(); this.click();}" : nil,
-        tabindex: object.link ? nil : 0,
+        target: object.link && object.target
       ) do %>
       <% if object.image_url %>
         <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md

@@ -1,4 +1,4 @@
-Custom tooltip formatting is configured through the tooltip object in the options passed to the kit: 
+Custom tooltip formatting is configured through the tooltip object in the chart options: 
 `headerFormat` **Type**: String | when set to null will disable the header.
 `pointFormat` **Type**: String | defines the HTML template for each data point and supports custom HTML when `useHTML` is enabled.
 `useHTML` **Type**: boolean (default false) | enables HTML rendering in tooltips.

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.md

@@ -1,4 +1,4 @@
-Layout options from Highcharts:
+##### Prop
 
 `align` **Type**: String | **Values**: left | center | right (defaults to center)
 `verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults to bottom)

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
 }) %>