playbook_ui 15.1.0.pre.rc.4 → 15.1.0.pre.rc.5

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

@@ -0,0 +1,16 @@
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "updated",
+  show_user: true,
+  show_current_year: true,
+  text: "Maricris Nonato"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "updated",
+  show_user: false,
+  show_current_year: true
+}) %>

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

@@ -0,0 +1,30 @@
+import React from 'react'
+import Timestamp from '../_timestamp'
+
+const todaysDate = new Date()
+
+const TimestampUpdatedShowCurrentYear = (props) => {
+  return (
+    <div>
+      <Timestamp
+          showCurrentYear
+          showUser
+          text="Maricris Nonato"
+          timestamp={todaysDate}
+          variant="updated"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          showCurrentYear
+          timestamp={todaysDate}
+          variant="updated"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TimestampUpdatedShowCurrentYear

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

@@ -0,0 +1 @@
+The `updated` variant can also be used in conjunction with the `showCurrentYear`/`show_current_year` prop to show the year even if it is the current year. 

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

@@ -0,0 +1,16 @@
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "updated",
+  show_user: true,
+  show_date: false,
+  text: "Maricris Nonato"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "updated",
+  show_user: false,
+  show_date: false
+}) %>

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

@@ -0,0 +1,30 @@
+import React from 'react'
+import Timestamp from '../_timestamp'
+
+const todaysDate = new Date()
+
+const TimestampUpdatedShowDate = (props) => {
+  return (
+    <div>
+      <Timestamp
+          showDate={false}
+          showUser
+          text="Maricris Nonato"
+          timestamp={todaysDate}
+          variant="updated"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          showDate={false}
+          timestamp={todaysDate}
+          variant="updated"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TimestampUpdatedShowDate

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

@@ -0,0 +1 @@
+The `updated` variant can also be used in conjunction with the `showDate`/`show_date` prop. This prop is set to true by default but can be set to false to hide the date.

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

@@ -0,0 +1,26 @@
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "updated",
+  show_user: true,
+  show_time: false,
+  text: "Maricris Nonato"
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "updated",
+  show_user: false,
+  show_time: false
+}) %>
+
+<br>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  variant: "updated",
+  show_current_year: true,
+  show_user: false,
+  show_time: false
+}) %>

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

@@ -0,0 +1,41 @@
+import React from 'react'
+import Timestamp from '../_timestamp'
+
+const todaysDate = new Date()
+
+const TimestampUpdatedShowTime = (props) => {
+  return (
+    <div>
+      <Timestamp
+          showTime={false}
+          showUser
+          text="Maricris Nonato"
+          timestamp={todaysDate}
+          variant="updated"
+          {...props}
+      />
+
+      <br />
+
+      <Timestamp
+          showTime={false}
+          timestamp={todaysDate}
+          variant="updated"
+          {...props}
+      />
+
+       <br />
+
+      <Timestamp
+          showCurrentYear
+          showTime={false}
+          timestamp={todaysDate}
+          variant="updated"
+          {...props}
+      />
+
+    </div>
+  )
+}
+
+export default TimestampUpdatedShowTime

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

@@ -0,0 +1 @@
+The `updated` variant can also be used in conjunction with the `showTime`/`show_time` prop. This prop is set to true by default but can be set to false to hide the time. This can also be used in conjunction with `showCurrentYear`/`show_current_year` to show the year even if it is the current year.

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

@@ -2,18 +2,30 @@ examples:
 
   rails:
   - timestamp_default: Default
+  - timestamp_show_date: Hide Date
+  - timestamp_show_time: Hide Time
+  - timestamp_show_current_year: Show Current Year
+  - timestamp_timezones: Show Timezones
   - timestamp_align: Alignments
-  - timestamp_timezones: Timezones
-  - timestamp_updated: Last Updated by
-  - timestamp_elapsed: Time Ago
+  - timestamp_elapsed: Time Ago (Elapsed Variant)
+  - timestamp_updated: Last Updated by (Updated Variant)
+  - timestamp_updated_show_current_year: Last Updated by (Updated Variant) - Show Current Year
+  - timestamp_updated_show_date: Last Updated by (Updated Variant) - Hide Date
+  - timestamp_updated_show_time: Last Updated by (Updated Variant) - Hide Time
   - timestamp_unstyled: Unstyled
 
   react:
   - timestamp_default: Default
+  - timestamp_show_date: Hide Date
+  - timestamp_show_time: Hide Time
+  - timestamp_show_current_year: Show Current Year
+  - timestamp_timezones: Show Timezones
   - timestamp_align: Alignments
-  - timestamp_timezones: Timezones
-  - timestamp_updated: Last Updated by
-  - timestamp_elapsed: Time Ago
+  - timestamp_elapsed: Time Ago (Elapsed Variant)
+  - timestamp_updated: Last Updated by (Updated Variant)
+  - timestamp_updated_show_current_year: Last Updated by (Updated Variant) - Show Current Year
+  - timestamp_updated_show_date: Last Updated by (Updated Variant) - Hide Date
+  - timestamp_updated_show_time: Last Updated by (Updated Variant) - Hide Time
   - timestamp_unstyled: Unstyled
 
   swift:

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

@@ -4,3 +4,9 @@ export { default as TimestampTimezones } from './_timestamp_timezones.jsx'
 export { default as TimestampUpdated } from './_timestamp_updated.jsx'
 export { default as TimestampElapsed } from './_timestamp_elapsed.jsx'
 export { default as TimestampUnstyled } from './_timestamp_unstyled.jsx'
+export { default as TimestampShowDate } from './_timestamp_show_date.jsx'
+export { default as TimestampShowTime } from './_timestamp_show_time.jsx'
+export { default as TimestampShowCurrentYear } from './_timestamp_show_current_year.jsx'
+export { default as TimestampUpdatedShowCurrentYear } from './_timestamp_updated_show_current_year.jsx'
+export { default as TimestampUpdatedShowDate } from './_timestamp_updated_show_date.jsx'
+export { default as TimestampUpdatedShowTime } from './_timestamp_updated_show_time.jsx'

data/app/pb_kits/playbook/pb_timestamp/timestamp.rb

@@ -14,8 +14,12 @@ module Playbook
                     default: "left"
       prop :hide_updated, type: Playbook::Props::Boolean,
                           default: false
+      prop :show_current_year, type: Playbook::Props::Boolean,
+                               default: false
       prop :show_date, type: Playbook::Props::Boolean,
                        default: true
+      prop :show_time, type: Playbook::Props::Boolean,
+                       default: true
       prop :show_timezone, type: Playbook::Props::Boolean,
                            default: false
       prop :show_user, type: Playbook::Props::Boolean,
@@ -50,14 +54,22 @@ module Playbook
         when "elapsed"
           format_elapsed_string
         else
-          show_date ? datetime_or_text : format_time_string
+          if show_date && show_time
+            datetime_or_text
+          elsif show_date && !show_time
+            timestamp ? format_date_string : text
+          elsif !show_date && show_time
+            format_time_string
+          else
+            text
+          end
         end
       end
 
     private
 
       def format_year_string
-        pb_date_time.to_year != DateTime.now.year.to_s ? ", #{pb_date_time.to_year}" : ""
+        pb_date_time.to_year != DateTime.now.year.to_s || show_current_year ? ", #{pb_date_time.to_year}" : ""
       end
 
       def format_time_string
@@ -73,14 +85,24 @@ module Playbook
       end
 
       def format_datetime_string
-        "#{format_date_string} · #{format_time_string}".html_safe
+        if show_time
+          "#{format_date_string} · #{format_time_string}".html_safe
+        else
+          format_date_string
+        end
       end
 
       def format_updated_string
-        user_string = show_user ? " by #{text}" : ""
-        datetime_string = " on #{format_date_string} at #{format_time_string}"
-
-        "Last updated#{user_string}#{datetime_string}"
+        final_updated_string = []
+        final_updated_string << "by #{text}" if show_user && text.present?
+        if show_date && !show_time
+          final_updated_string << "on #{format_date_string}"
+        elsif show_date && show_time
+          final_updated_string << "on #{format_date_string} at #{format_time_string}"
+        elsif show_time && !show_date
+          final_updated_string << "at #{format_time_string}"
+        end
+        "Last updated #{final_updated_string.join(' ')}"
       end
 
       def format_elapsed_string

data/app/pb_kits/playbook/pb_timestamp/timestamp.test.js

@@ -102,7 +102,6 @@ describe("Timestamp Kit", () => {
     render(
       <Timestamp
           data={{ testid: testId }}
-          showDate={false}
           showUser
           text="Maricris Nonato"
           timestamp={new Date()}
@@ -112,7 +111,7 @@ describe("Timestamp Kit", () => {
     const kit = screen.getByTestId(testId);
     const text = kit.querySelector(".pb_caption_kit_xs");
     expect(text.textContent).toEqual(
-      "Last updated  by Maricris Nonato on Jan 1 at 12:00a"
+      "Last updated by Maricris Nonato on Jan 1 at 12:00a"
     );
   });
 
@@ -120,14 +119,13 @@ describe("Timestamp Kit", () => {
     render(
       <Timestamp
           data={{ testid: testId }}
-          showDate={false}
           timestamp={new Date()}
           variant="updated"
       />
     );
     const kit = screen.getByTestId(testId);
     const text = kit.querySelector(".pb_caption_kit_xs");
-    expect(text.textContent).toEqual("Last updated  on Jan 1 at 12:00a");
+    expect(text.textContent).toEqual("Last updated on Jan 1 at 12:00a");
   });
 
   test("renders Timestamp elapsed variant with user", () => {
@@ -162,3 +160,70 @@ describe("Timestamp Kit", () => {
     expect(text.textContent).toEqual("  a few seconds ago");
   });
 });
+
+  test("default variant: time only when showDate=false", () => {
+    render(
+      <Timestamp
+          data={{ testid: testId }}
+          showDate={false}
+          showTime
+          timestamp={new Date()}
+      />
+    )
+    const text = screen.getByTestId(testId).querySelector(".pb_caption_kit_xs")
+    expect(text?.textContent).toEqual("12:00a")
+  })
+
+  test("default variant: date only when showTime=false (no year for current year)", () => {
+    render(
+      <Timestamp
+          data={{ testid: testId }}
+          showTime={false}
+          timestamp={new Date()}
+      />
+    )
+    const text = screen.getByTestId(testId).querySelector(".pb_caption_kit_xs")
+    expect(text?.textContent).toEqual("Jan 1")
+  })
+
+  test("default variant: date only with showCurrentYear=true forces year", () => {
+    render(
+      <Timestamp
+          data={{ testid: testId }}
+          showCurrentYear
+          showTime={false}
+          timestamp={new Date()}
+      />
+    )
+    const text = screen.getByTestId(testId).querySelector(".pb_caption_kit_xs")
+    expect(text?.textContent).toEqual("Jan 1, 2020")
+  })
+
+  test('updated variant: "by user" + date only when showDate=true and showTime=false', () => {
+    render(
+      <Timestamp
+          data={{ testid: testId }}
+          showTime={false}
+          showUser
+          text="Maricris Nonato"
+          timestamp={new Date()}
+          variant="updated"
+      />
+    )
+    const text = screen.getByTestId(testId).querySelector(".pb_caption_kit_xs")
+    expect(text?.textContent).toEqual("Last updated by Maricris Nonato on Jan 1")
+  })
+
+  test('updated variant: "at time" only when showDate=false and showTime=true', () => {
+    render(
+      <Timestamp
+          data={{ testid: testId }}
+          showDate={false}
+          timestamp={new Date()}
+          variant="updated"
+      />
+    )
+    const text = screen.getByTestId(testId).querySelector(".pb_caption_kit_xs")
+    expect(text?.textContent).toEqual("Last updated at 12:00a")
+  })
+