playbook_ui 13.2.0 → 13.4.0.pre.alpha.play961turnoffdeprecationwarnings1171

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6c03b530a4b2b16b5dcf7ea348a4aa6a66db48f68359fed8469e47746c6fad2c
-  data.tar.gz: 5695a441ba55870888683da55c49814c94de842a952614d711325bfd1813fe35
+  metadata.gz: a5687cf64fd91e0542870d040a225a5ce93425595201932182dac4bfd5222608
+  data.tar.gz: 1aa93b8be4d0c630173934157a703de11fca34d72fb0539ec8d5b25f67dc1f7c
 SHA512:
-  metadata.gz: cb2dd83ad7e0030f750adb29cab24f33d979922ac9763e35de399c8df427053ae501e0b24a168116c6fccf876885bf7fc9e7e0356b94bae6ef7ccb14cf7bf45c
-  data.tar.gz: 51fa2673e72139fdfce189b16a2364430eb8518fb9480d5b8c203bd66956478654506a20e358fbd6e6de955c97270503ed69f92857fe51789ddc30595daff9b3
+  metadata.gz: 4cb69e3c3405c327d6b0b6b8ce41cfe5663d1ac8d2256b8d9bb3e13bf06d32f09a0bbe293fbe07c086a8005d886bc6993e3f53fda967c3fd5f71ab7be473215a
+  data.tar.gz: c9ead3436044663c3e7726b79bc1869b26abfb9bc4d46721ee1012b6f6e9cc6df9eab7afd2b033be3e97ba1e2c888dca4bc7be497764585a5a267819fe9bb79b

data/app/pb_kits/playbook/_playbook.scss

@@ -112,5 +112,6 @@
 @import './utilities/focus';
 @import './utilities/border_radius';
 @import './utilities/hover';
+@import './utilities/text_align';
 
 @import 'pb_multi_level_select/multi_level_select';

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -37,10 +37,15 @@
     font-size: $font_smaller;
     letter-spacing: $lspace_loose;
   }
+  
+  &[class*=_truncate] {
+    @include body_truncate;
+  }
 
   @each $status_name, $status_value in $pb_body_status {
     &[class*=#{$status_name}] {
       @include pb_body($status_value);
+      @include body_truncate;
     }
   }
 

data/app/pb_kits/playbook/pb_body/_body.tsx

@@ -19,11 +19,12 @@ type BodyProps = {
   status?: 'neutral' | 'negative' | 'positive',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
   text?: string,
+  truncate?: null | '1' | '2' | '3' | '4' | '5',
   variant?: null | 'link',
 } & GlobalProps
 
 const Body = (props: BodyProps): React.ReactElement => {
-  if (props.variant) deprecatedProps("Body", ["status"]) //status prop is deprecated, use color instead please
+  if (props.variant) deprecatedProps() //status prop is deprecated, use color instead please
   const {
     aria = {},
     children,
@@ -36,13 +37,15 @@ const Body = (props: BodyProps): React.ReactElement => {
     status = null,
     tag = 'div',
     text = '',
+    truncate = null,
     variant = null,
   } = props
 
   const ariaProps: {[key: string]: any} = buildAriaProps(aria)
   const dataProps: {[key: string]: any} = buildDataProps(data)
+  const isTruncated = truncate ? `truncate_${truncate}` : ''
   const classes = classnames(
-    buildCss('pb_body_kit', color, variant, status),
+    buildCss('pb_body_kit', color, variant, status, isTruncated),
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_body/_body_mixins.scss

@@ -36,6 +36,25 @@ $pb_body_status: (
   font-family: $font-family-base;
 }
 
+$pb_body_truncate: (
+  truncate_1: 1,
+  truncate_2: 2,
+  truncate_3: 3,
+  truncate_4: 4,
+  truncate_5: 5
+);
+
+@mixin body_truncate {
+  @each $name, $number in $pb_body_truncate {
+    &[class*=_#{$name}] {
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: $number;
+      -webkit-box-orient: vertical; 
+    }
+  }
+}
+
 
 // Colors ======================
 @mixin pb_body_light {

data/app/pb_kits/playbook/pb_body/body.rb

@@ -18,9 +18,12 @@ module Playbook
                           default: false
       prop :highlighted_text, type: Playbook::Props::Array,
                               default: []
+      prop :truncate, type: Playbook::Props::Enum,
+                      values: [nil, "1", "2", "3", "4", "5"],
+                      default: nil
 
       def classname
-        generate_classname("pb_body_kit", color_class, status_class)
+        generate_classname("pb_body_kit", color_class, status_class, is_truncated)
       end
 
       def content
@@ -28,6 +31,10 @@ module Playbook
         highlighting ? apply_highlight(body_text) : body_text
       end
 
+      def is_truncated
+        truncate ? "truncate_#{truncate}" : nil
+      end
+
     private
 
       def apply_highlight(text)

data/app/pb_kits/playbook/pb_button/button.html.erb

@@ -18,14 +18,14 @@
     <% else %>
     <% if object.icon && !object.icon_right %>
         <span>
-            <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_right: "xs" }) %>
+            <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_right: "xs", font_style: object.icon_font_family }) %>
         </span>
     <% end %>
     <%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, classname: "loading-icon" }) %>
     <span class="pb_button_content"><%= content.presence || object.text %></span>
     <% if object.icon && object.icon_right %>
         <span>
-            <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_left: "xs" }) %>
+            <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_left: "xs", font_style: object.icon_font_family }) %>
         </span>
     <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_button/button.rb

@@ -29,6 +29,9 @@ module Playbook
                   values: ["sm", "md", "lg", nil],
                   default: nil
       prop :form, default: nil
+      prop :icon_font_family, type: Playbook::Props::Enum,
+                              values: %w[far fas fab fak],
+                              default: "far"
 
       def options
         {

data/app/pb_kits/playbook/pb_caption/_caption.tsx

@@ -17,7 +17,7 @@ type CaptionProps = {
 } & GlobalProps;
 
 const Caption = (props: CaptionProps): React.ReactElement => {
-  if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
+  if (props.variant) deprecatedProps() //variant prop is deprecated, use color instead
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx

@@ -99,8 +99,12 @@ const CollapsibleMain = ({
   const mainSpacing = globalProps(props, { cursor })
 
   const handleCollapsibleClick = () => {
+    onClick && onClick();
+    //To disable default toggling behavior return "true" in the onClick()
+    const disableToggle = onClick && onClick();
+    if (disableToggle !== true) {
     toggle();
-    onClick && onClick()
+    }
   }
 
   return (

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

@@ -49,7 +49,7 @@ type DatePickerProps = {
 } & GlobalProps
 
 const DatePicker = (props: DatePickerProps): React.ReactElement => {
-  if (props.plugins) deprecatedProps('Date Picker', ['plugins'])
+  if (props.plugins) deprecatedProps()
 
   const {
     allowInput = false,

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx

@@ -19,7 +19,7 @@ type DateTimeStackedProps = {
 }
 
 const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
-  if (props.date) deprecatedProps('Date Time Stacked', ['date'])
+  if (props.date) deprecatedProps()
 
   const {
     date,

data/app/pb_kits/playbook/pb_kit/dateTime.ts

@@ -121,30 +121,61 @@ export const toIso = (newDate: Date | string): string => {
 }
 
 export const fromNow = (newDate: Date | string): string => {
-  const startDate = formatDate(newDate).getTime()
-  const endDate = new Date().getTime()
+  const today = new Date()
+  const formattedDate = formatDate(newDate)
+
+  const startDate = formattedDate.getTime()
+  const endDate = today.getTime()
   const elapsedTime = endDate - startDate
-  let elapsedTimeString = `${Math.round(elapsedTime / (365.25 * 24 * 60 * 60 * 1000))} years ago`; // 730+ days
-
-  const MILLISECONDS_IN_A_MONTH = 30.44 * 24 * 60 * 60 * 1000
-
-  const elapsedTimeData = [
-    { min: 0, max: 44999, value: "a few seconds ago" }, // 0-44 seconds
-    { min: 45000, max: 89999, value: "a minute ago" }, // 45-89 seconds
-    { min: 90000, max: 2649999, value: `${Math.round(elapsedTime / 60000)} minutes ago`}, //  90s-44 minutes
-    { min: 2650000, max: 7299999, value: "an hour ago" }, // 45-120 minutes
-    { min: 7300000, max: 75699999, value: `${Math.round(elapsedTime / 3600000)} hours ago`}, // 2-21 hours
-    { min: 75700000, max: 172899999, value: "a day ago" }, // 22-48 hours
-    { min: 172900000, max: 2169999999, value: `${Math.round(elapsedTime / 86400000)} days ago`}, // 2-25 days
-    { min: 2170000000, max: 5184999999, value: "a month ago"}, // 26-60 days
-    { min: 5185000000, max: 27561699999, value: `${Math.round(elapsedTime / MILLISECONDS_IN_A_MONTH)} months ago`}, // 60-319 days
-    { min: 27561700000, max: 63072999999, value: "a year ago"}, // 320-730 days
-  ];
-
-  for (const timeDate of elapsedTimeData) {
-    if (elapsedTime >= timeDate.min && elapsedTime <= timeDate.max) {
-      elapsedTimeString = timeDate.value;
-      break;
+
+  // For years/months, don't use elapsedTime due to rounding
+  const differenceInYears = today.getFullYear() - formattedDate.getFullYear()
+  const differenceInMonths = () => {
+    let months = differenceInYears * 12
+    months -= formattedDate.getMonth()
+    months += today.getMonth()
+    return months
+  }
+
+  const FORTY_FIVE_SECONDS = 45000
+  const NINETY_SECONDS = 90000
+
+  const FORTY_FIVE_MINUTES = 2670000
+  const NINETY_MINUTES = 5400000
+
+  const TWENTY_TWO_HOURS = 77400000
+  const THIRTY_SIX_HOURS = 129600000
+
+  const TWENTY_SIX_DAYS = 2203200000
+  const FORTY_FIVE_DAYS = 3888000000
+
+  const TEN_AND_A_HALF_MONTHS = 27560000000
+
+  const MILLISECONDS_IN_A_MINUTE = 60000
+  const MILLISECONDS_IN_A_HOUR = 3600000
+  const MILLISECONDS_IN_A_DAY = 86400000
+
+  let elapsedTimeString = differenceInYears === 1 ? `${differenceInYears} year ago` : `${differenceInYears} years ago` // 320 days to 1+ year: "x year(s) ago"
+
+  // Inspiration: https://momentjs.com/docs/#/displaying/fromnow/
+  const intervals = [
+    { min: 0, max: FORTY_FIVE_SECONDS, value: "a few seconds ago" }, // 0-44.99 seconds
+    { min: FORTY_FIVE_SECONDS, max: NINETY_SECONDS, value: "a minute ago" }, // 45-89.99 seconds
+    { min: NINETY_SECONDS, max: FORTY_FIVE_MINUTES, value: `${Math.round(elapsedTime / MILLISECONDS_IN_A_MINUTE)} minutes ago` }, // 90s-44.49 minutes: "2 minutes ago ... 44 minutes ago"
+    { min: FORTY_FIVE_MINUTES, max: NINETY_MINUTES, value: "an hour ago" }, // 44.5-89.99 minutes
+    { min: NINETY_MINUTES, max: TWENTY_TWO_HOURS, value: `${Math.round(elapsedTime / MILLISECONDS_IN_A_HOUR)} hours ago` }, // 90m-21.49 hours: "2 hours ago ... 21 hours ago"
+    { min: TWENTY_TWO_HOURS, max: THIRTY_SIX_HOURS, value: "a day ago" }, // 21.5-35.99 hours
+    { min: THIRTY_SIX_HOURS, max: TWENTY_SIX_DAYS, value: `${Math.round(elapsedTime / MILLISECONDS_IN_A_DAY)} days ago` }, // 36h-25.49 days: "2 days ago ... 25 days ago"
+    { min: TWENTY_SIX_DAYS, max: FORTY_FIVE_DAYS, value: "a month ago" }, // 25.5-44.99 days
+    { min: FORTY_FIVE_DAYS, max: TEN_AND_A_HALF_MONTHS, value: `${differenceInMonths()} months ago` }, // 45 days to 319 days: "2 months ago ... 10 months ago"
+  ]
+
+  for (const interval of intervals) {
+    const { min, max, value } = interval
+
+    if (elapsedTime >= min && elapsedTime < max) {
+      elapsedTimeString = value
+      break
     }
   }
 

data/app/pb_kits/playbook/pb_table/docs/_table_header.html.erb

@@ -0,0 +1,54 @@
+<%= pb_rails("table", props: { size: "lg"} ) do %>
+  <thead>
+    <tr>
+      <%= pb_rails("table/table_header", props: {
+        id: "name",
+        colspan: 2,
+        sort_menu: [
+          { item: "Name", link: "?q[sorts]=name+desc", active: false, direction: "desc" },
+          { item: "Name", link: "?q[sorts]=name+asc", active: true, direction: "asc" },
+        ],
+      }) %>
+      <%= pb_rails("table/table_header", props: {
+        text: "Age",
+        id: "age",
+        sort_menu: [
+          { item: "Age", link: "?q[sorts]=age+desc", active: false, direction: "desc" },
+          { item: "Age", link: "?q[sorts]=age+asc", active: false, direction: "asc" },
+        ],
+      }) %>
+      <%= pb_rails("table/table_header", props: {
+        text: "Territory",
+        id: "territory",
+        sort_menu: [
+          { item: "Territory", link: "?q[sorts]=territory+desc", active: false, direction: "desc" },
+          { item: "Territory", link: "?q[sorts]=territory+asc", active: false, direction: "asc" },
+        ],
+      }) %>
+      <%= pb_rails("table/table_header", props: { text: "Job Title" }) %>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Name 1</td>
+      <td>Name 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Name 1</td>
+      <td>Name 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Name 1</td>
+      <td>Name 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+  </tbody>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_header.md

@@ -0,0 +1 @@
+A kit that produces a `<th>` tag. You can also use the `sort_menu` prop to make the header a sortable link, just like <a href="https://playbook.powerapp.cloud/kits/filter#sort-only" target="_blank">our filter kit.</a>

data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.jsx

@@ -28,7 +28,7 @@ const TableOneAction = (props) => {
             <Button
                 onClick={() => alert('button clicked!')}
                 paddingLeft="none"
-                text="Tetriary Action"
+                text="Tertiary Action"
                 variant="link"
                 {...props}
             />
@@ -49,7 +49,7 @@ const TableOneAction = (props) => {
             <Button
                 onClick={() => alert('button clicked!')}
                 paddingLeft="none"
-                text="Tetriary Action"
+                text="Tertiary Action"
                 variant="link"
                 {...props}
             />
@@ -70,7 +70,7 @@ const TableOneAction = (props) => {
             <Button
                 onClick={() => alert('button clicked!')}
                 paddingLeft="none"
-                text="Tetriary Action"
+                text="Tertiary Action"
                 variant="link"
                 {...props}
             />

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

@@ -4,6 +4,7 @@ examples:
     - table_md: Medium
     - table_lg: Large
     - table_sticky: Sticky Header
+    - table_header: Table Header
     - table_alignment_row: Row Alignment
     - table_alignment_column: Column Alignment
     - table_alignment_shift_row: Shift Row

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

@@ -17,3 +17,4 @@
 @import "desktop_collapse";
 @import "sticky_header";
 @import "vertical_border";
+@import "table_header";

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

@@ -0,0 +1,31 @@
+
+$text_align_values: (
+  start: start,
+  end: end,
+  left: left,
+  right: right,
+  center: center,
+  justify: justify,
+  justify-all: justify-all,
+  match-parent: match-parent,
+);
+
+[class^=pb_table] {
+  thead {
+    [class^=pb_table_header_kit] {
+      @each $align_name, $align_value in $text_align_values {
+        &[class*=_align_#{$align_name}] {
+          text-align: $align_value;
+        }
+      }
+    }
+  }
+}
+
+[class^=pb_table] {
+  thead {
+    [class^=pb_th_active] {
+      color: $primary !important;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_table/table_header.html.erb

@@ -0,0 +1,64 @@
+<%= content_tag(:th,
+    colspan: object.colspan,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: "pb-th#{object.id}") do %>
+  <% object.sort_menu.each do |item| %>
+    <% if item[:active] == true %>
+      <%= pb_rails("flex", props:{ align: object.align_content }) do %>
+        <%= content.presence || content_tag(:span, item[:item], class: "pb_th_active") %>
+        <span class="pb_th_active">
+          <%= pb_rails("icon", props: { icon: object.sort_icon(item[:direction]),
+                                        fixed_width: true,
+                                        classname: "pb_th_active",
+                                        padding_left: "xs" }) %>
+        </span>
+      <% end %>
+    <% end %>
+  <% end %>
+  <% if object.sort_menu.all? { |item| item[:active] == false } %>
+    <%= pb_rails("flex", props:{ align: object.align_content }) do %>
+      <%= content.presence || object.text %>
+      <%= pb_rails("icon", props: { icon: "arrow-up-arrow-down",
+                                    fixed_width: true,
+                                    padding_left: "xs" }) %>
+    <% end %>
+  <% else %>
+    <%= content.presence || object.text %>
+  <% end %>
+  <% if object.sort_menu != [{}] && object.colspan > 1 %>
+    <%= pb_rails("popover", props: { classname: "pb_filter_sort_menu",
+                                    close_on_click: "outside",
+                                    trigger_element_id: "pb-th#{object.id}",
+                                    tooltip_id: "sort-filter-btn-tooltip#{object.id}",
+                                    position: object.placement ,
+                                    padding: 'none'}) do %>
+      <%= pb_rails("list") do %>
+        <% object.sort_menu.each do |item| %>
+          <%= pb_rails("list/item") do %>
+            <%= pb_rails("button", props: { variant: "link" ,
+                                            classname: "p-0",
+                                            text: item[:item],
+                                            link: item[:link],
+                                            icon: sort_icon(item[:direction]),
+                                            icon_right: true }) %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+<% if object.sort_menu != [{}] && object.colspan == 1 %>
+  <script>
+    document.addEventListener("DOMContentLoaded", function() {
+      var thId = `<%= "#pb-th#{object.id}" %>`
+      var firstLink = `<%= next_link %>`
+      var thElement = document.querySelector(thId);
+
+      thElement.addEventListener("click", function() {
+        window.location.href = firstLink;
+      });
+    });
+  </script>
+<% end %>

data/app/pb_kits/playbook/pb_table/table_header.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTable
+    class TableHeader < Playbook::KitBase
+      prop :align, type: Playbook::Props::Enum,
+                   values: %w[start center end stretch baseline none],
+                   default: "start"
+      prop :align_content, type: Playbook::Props::Enum,
+                           values: %w[start center end stretch baseline none],
+                           default: "center"
+      prop :colspan, type: Playbook::Props::Number,
+                     default: 1
+      prop :placement, type: Playbook::Props::Enum,
+                       values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
+                       default: "bottom-start"
+      prop :sort_menu, type: Playbook::Props::HashArray,
+                       default: [{}]
+      prop :text, type: Playbook::Props::String,
+                  default: ""
+
+      def classname
+        generate_classname("pb_table_header_kit", align_class)
+      end
+
+      def align_class
+        align.present? ? "align_#{align}" : nil
+      end
+
+      def next_link
+        return sort_menu[0][:link] if sort_menu.all? { |item| item[:active] == false }
+
+        sort_menu.each_with_index do |item, index|
+          if item[:active] == true
+            next_index = (index + 1) % sort_menu.length
+            sort_menu[next_index][:link]
+          end
+        end
+      end
+
+      def sort_icon(direction)
+        case direction
+        when "asc"
+          "sort-amount-up"
+        when "desc"
+          "sort-amount-down"
+        else
+          ""
+        end
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx

@@ -20,7 +20,7 @@ type TimeStackedProps = {
 }
 
 const TimeStackedDefault = (props: TimeStackedProps): React.ReactElement => {
-  if (props.date) deprecatedProps('Time Stacked', ['date']) //date prop is deprecated, use time instead
+  if (props.date) deprecatedProps() //date prop is deprecated, use time instead
 
   const {
     align = 'left',

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

@@ -5,7 +5,6 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 import DateTime from '../pb_kit/dateTime';
 
-
 import Caption from '../pb_caption/_caption'
 
 type TimestampProps = {
@@ -22,6 +21,7 @@ type TimestampProps = {
   showUser?: boolean,
   hideUpdated?: boolean,
   showTimezone?: boolean,
+  unstyled?: boolean,
   variant?: "default" | "elapsed" | "updated"
 }
 
@@ -39,6 +39,7 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
     showUser = false,
     hideUpdated = false,
     showTimezone = false,
+    unstyled = false,
     variant = 'default',
   } = props
 
@@ -85,7 +86,7 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
     return `${updatedText} ${userDisplay} ${DateTime.fromNow(timestamp)}`
   }
 
-  const captionText = () => {
+  const timestampText = () => {
     switch (variant) {
     case 'updated':
       return formatUpdatedString()
@@ -103,11 +104,17 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
         className={classes}
     >
       <div className="pb_timestamp_kit">
-        <Caption
-            dark={dark}
-            size="xs"
-            text={captionText()}
-        />
+        {unstyled ? (
+          <div>
+            {timestampText()}
+          </div>
+        ) : (
+          <Caption
+              dark={dark}
+              size="xs"
+              text={timestampText()}
+          />
+        )}
       </div>
     </div>
   )

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

@@ -0,0 +1,21 @@
+<%= pb_rails("caption", props: { size: "xs", text: "Basic unstyled example" }) %>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  show_date: true,
+  align: "left",
+  unstyled: true,
+}) %>
+
+<br />
+
+<%= pb_rails("caption", props: { size: "xs", text: "Example with wrapping typography kit" }) %>
+
+<%= pb_rails("title", props: { size: 1 }) do %>
+  <%= pb_rails("timestamp", props: {
+    timestamp: DateTime.now,
+    show_date: true,
+    align: "left",
+    unstyled: true,
+  }) %>
+<% end %>

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

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Caption, Timestamp, Title } from '../../'
+
+const TimestampUnstyled = (props) => {
+  return (
+    <>
+      <Caption size="xs"
+          text="Basic unstyled example"
+      />
+      <Timestamp
+          align="left"
+          showDate
+          timestamp={new Date()}
+          unstyled
+          {...props}
+      />
+
+      <br />
+
+      <Caption size="xs"
+          text="Example with wrapping typography kit"
+      />
+      <Title size={1}>
+        <Timestamp
+            align="left"
+            showDate
+            timestamp={new Date()}
+            unstyled
+            {...props}
+        />
+      </Title>
+    </>
+  )
+}
+
+export default TimestampUnstyled

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

@@ -0,0 +1 @@
+For alternative typography styles, you can pass a boolean prop called `unstyled` to the `Timestamp` kit and wrap it in any of our typography kits (`Title`, `Body`, etc.). This will allow the `Timestamp` kit to inherit any of our typography styles.