playbook_ui_docs 15.0.0.pre.alpha.PLAY2473rowhighlightfix10512 → 15.0.0.pre.alpha.PLAY2480playbookicons10010725

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

@@ -3,37 +3,30 @@
   show_date: false,
   show_timezone: true,
   timezone: "America/New_York",
-  align: "left"
 }) %>
 
 <br>
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now,
-  show_date: true,
   show_timezone: true,
   timezone: "America/New_York",
-  align: "left"
 }) %>
 
 <br>
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now + 4.years,
-  show_date: true,
   show_timezone: true,
   timezone: "America/New_York",
-  align: "left"
 }) %>
 
 <br>
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now - 1.year,
-  show_date: true,
   show_timezone: true,
   timezone: "America/New_York",
-  align: "left"
 }) %>
 
 <br>
@@ -43,37 +36,30 @@
   show_date: false,
   show_timezone: true,
   timezone: "Asia/Hong_Kong",
-  align: "left"
 }) %>
 
 <br>
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now,
-  show_date: true,
   show_timezone: true,
   timezone: "Asia/Hong_Kong",
-  align: "left"
 }) %>
 
 <br>
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now + 4.years,
-  show_date: true,
   show_timezone: true,
   timezone: "Asia/Hong_Kong",
-  align: "left"
 }) %>
 
 <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

@@ -15,7 +15,6 @@ const TimestampTimezones = (props) => {
   return (
     <div>
       <Timestamp
-          align="left"
           showDate={false}
           showTimezone
           timestamp={todaysDate}
@@ -26,8 +25,6 @@ const TimestampTimezones = (props) => {
       <br />
 
       <Timestamp
-          align="left"
-          showDate
           showTimezone
           timestamp={todaysDate}
           timezone="America/New_York"
@@ -37,8 +34,6 @@ const TimestampTimezones = (props) => {
       <br />
 
       <Timestamp
-          align="left"
-          showDate
           showTimezone
           timestamp={futureDate}
           timezone="America/New_York"
@@ -48,8 +43,6 @@ const TimestampTimezones = (props) => {
       <br />
 
       <Timestamp
-          align="left"
-          showDate
           showTimezone
           timestamp={pastDate}
           timezone="America/New_York"
@@ -59,7 +52,6 @@ const TimestampTimezones = (props) => {
       <br />
 
       <Timestamp
-          align="left"
           showDate={false}
           showTimezone
           timestamp={todaysDate}
@@ -70,8 +62,6 @@ const TimestampTimezones = (props) => {
       <br />
 
       <Timestamp
-          align="left"
-          showDate
           showTimezone
           timestamp={todaysDate}
           timezone="Asia/Hong_Kong"
@@ -81,8 +71,6 @@ const TimestampTimezones = (props) => {
       <br />
 
       <Timestamp
-          align="left"
-          showDate
           showTimezone
           timestamp={futureDate}
           timezone="Asia/Hong_Kong"
@@ -92,8 +80,6 @@ const TimestampTimezones = (props) => {
       <br />
 
       <Timestamp
-          align="left"
-          showDate
           showTimezone
           timestamp={pastDate}
           timezone="Asia/Hong_Kong"

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

@@ -0,0 +1 @@
+The `showTimezone`/`show_timezone` prop can be used to show the timezone as well. This is set to false by default. **NOTE**: This prop must be used in conjunction with the `timezone` prop to specify which timezone to display. 

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

@@ -2,8 +2,6 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now,
-  show_date: true,
-  align: "left",
   unstyled: true,
 }) %>
 
@@ -14,8 +12,6 @@
 <%= 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

@@ -10,8 +10,6 @@ const TimestampUnstyled = (props) => {
           text="Basic unstyled example"
       />
       <Timestamp
-          align="left"
-          showDate
           timestamp={new Date()}
           unstyled
           {...props}
@@ -24,8 +22,6 @@ const TimestampUnstyled = (props) => {
       />
       <Title size={1}>
         <Timestamp
-            align="left"
-            showDate
             timestamp={new Date()}
             unstyled
             {...props}

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

@@ -17,7 +17,6 @@ const TimestampUpdated = (props) => {
       <br />
 
       <Timestamp
-          showUser={false}
           timestamp={todaysDate}
           variant="updated"
           {...props}

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

@@ -0,0 +1,5 @@
+Use variant `updated` to show last updated at timestamp. 
+
+This variant can be customized using the optional `showUser`/`show_user` prop to show user as part of the text. When showing the user, pass in the user name using the `text` prop as shown. 
+
+`showUser`/`show_user` is set to false by default. 

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'