playbook_ui 7.4.1 → 7.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_timestamp/_timestamp.html.erb +1 -13
  3. data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx +20 -96
  4. data/app/pb_kits/playbook/pb_timestamp/_timestamp.scss +1 -12
  5. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb +1 -21
  6. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +4 -31
  7. data/app/pb_kits/playbook/pb_timestamp/docs/example.yml +0 -14
  8. data/app/pb_kits/playbook/pb_timestamp/docs/index.js +0 -7
  9. data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +1 -67
  10. data/lib/playbook/version.rb +1 -1
  11. metadata +2 -16
  12. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb +0 -69
  13. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx +0 -91
  14. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb +0 -14
  15. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +0 -27
  16. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.html.erb +0 -54
  17. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.jsx +0 -73
  18. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb +0 -59
  19. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx +0 -74
  20. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.html.erb +0 -177
  21. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.jsx +0 -209
  22. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.html.erb +0 -35
  23. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx +0 -51
  24. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.html.erb +0 -123
  25. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.jsx +0 -146
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 8d8c8cd1ac5b29ad3f0f0e914a5c1b37078f1be829e4dfbcef6e83c036238348
4
- data.tar.gz: 75ae2e39412a73d7f1d285e65b077473b6fd59e7782f0a28091d5b13ab9c35cc
3
+ metadata.gz: 5bad418755af10f625ed47faeaca637b4dccb55a63c8a0fd88002d7dda064b2f
4
+ data.tar.gz: c5f64a5804486d5f10cb804a3d868e3d7fb6185a9497615ed1a6ab46d0476d59
5
5
  SHA512:
6
- metadata.gz: a606892b74e9fd2da31362d46ddb6f8bb34b608f94f876c0c37e7320d2162eef96aba302d265892008b261d24d369af18d4eab5ca8874e20a493c50ca461dcc8
7
- data.tar.gz: bf4e5f312aeeb75f12fdb99e3863f6b4fca07ea0f33cfa48d320fc52fca17195e028609a459b5a2d97513d741c516b2fd22571c49a99f8bd46c6fd3b4d1562bc
6
+ metadata.gz: 98b489931e51a8fc9be743b5bdcef1d1723e15cefd3f35db99ebd5bc905d967c808dc0802ba3a2c656c640e75f3fdf1dc98797f959200a58599082ffd4c088ae
7
+ data.tar.gz: 375b19e66790f8ae24f8bf67d1eecb061c36dcbdca53040e7dd8133f0042439d62858235546a61b5ece430142ba474f6bfb570a8d729138190ef78bfd8d090a7
@@ -2,17 +2,5 @@
2
2
  id: object.id,
3
3
  data: object.data,
4
4
  class: object.classname) do %>
5
-
6
- <% case object.variant
7
- when "updated" %>
8
- <%= pb_rails("caption", props: { text: object.format_updated_string, size: 'xs', dark: object.dark }) %>
9
- <% when "elapsed" %>
10
- <%= pb_rails("caption", props: { text: object.format_updated_string, size: 'xs', dark: object.dark }) %>
11
- <% else %>
12
- <% if object.show_date %>
13
- <%= pb_rails("caption", props: { text: object.format_datetime_string, size: 'xs', dark: object.dark }) %>
14
- <% else %>
15
- <%= pb_rails("caption", props: { text: object.format_time_string, size: 'xs', dark: object.dark }) %>
16
- <% end %>
17
- <% end %>
5
+ <%= pb_rails("caption", props: { text: object.text, tag: 'span', size: 'xs' }) %>
18
6
  <% end %>
@@ -2,112 +2,36 @@
2
2
 
3
3
  import React from 'react'
4
4
  import classnames from 'classnames'
5
- import DateTime from '../pb_kit/dateTime.js'
6
- import { buildCss } from '../utilities/props'
5
+
7
6
  import { Caption } from '../'
7
+
8
+ import { buildCss, buildDataProps } from '../utilities/props'
9
+
8
10
  import { globalProps } from '../utilities/globalProps.js'
9
11
 
10
12
  type TimestampProps = {
11
- align?: "left" | "center" | "right",
12
- className?: string | array<string>,
13
- dark?: boolean,
14
- data?: string,
15
- text: string,
16
- timestamp: string,
17
- timezone: string,
18
13
  id?: string,
19
- showDate?: boolean,
20
- showUser?: boolean,
21
- showTimezone?: boolean,
22
- variant?: "default" | "elapsed" | "updated"
14
+ data?: object,
15
+ className?: string,
16
+ text?: string,
23
17
  }
24
18
 
25
19
  const Timestamp = (props: TimestampProps) => {
26
- const {
27
- align = 'left',
28
- className,
29
- dark = false,
30
- text,
31
- timestamp,
32
- timezone,
33
- showDate = true,
34
- showUser = false,
35
- showTimezone = false,
36
- variant = 'default',
37
- } = props
38
- const classes = classnames(
39
- buildCss('pb_timestamp_kit', align, {
40
- dark: dark,
41
- variant: variant,
42
- }),
43
- globalProps(props),
44
- className
45
- )
46
-
47
- const currentYear = new Date().getFullYear().toString()
48
- const dateTimestamp = new DateTime({ value: timestamp, zone: timezone })
49
- const dateDisplay = dateTimestamp.toMonth() + ' ' + dateTimestamp.toDay()
50
- const timeDisplay = dateTimestamp.toHour() + ':' + dateTimestamp.toMinute() + dateTimestamp.toMeridian()
51
-
52
- var fullTimeDisplay = function fullTimeDisplay(dateTimestamp, timeDisplay, timezone, showTimezone) {
53
- if (showTimezone == 'true' && timezone.length > 0) {
54
- timeDisplay = timeDisplay + ' ' + dateTimestamp.toTimezone()
55
- }
56
- return timeDisplay
57
- }
58
-
59
- var fullDateDisplay = function fullDateDisplay(dateTimestamp, currentYear, dateDisplay, timezone, showTimezone) {
60
- var fullDisplay = dateTimestamp.toMonth() + ' ' + dateTimestamp.toDay()
61
- if (dateTimestamp.toYear() > currentYear) {
62
- fullDisplay = fullDisplay + ', ' + dateTimestamp.toYear().toString()
63
- }
64
- return fullDisplay + ' \u00b7 ' + fullTimeDisplay(dateTimestamp, timeDisplay, timezone, showTimezone)
65
- }
66
-
67
- var fullElapsedDisplay = function fullElapsedDisplay(showUser, text, dateTimestamp){
68
- var userDisplay = (showUser == 'true' && text.length > 0) ? ' by ' + text : ''
69
- return 'Last updated' + userDisplay + ' ' + dateTimestamp.value.fromNow()
70
- }
71
-
72
- var fullUpdatedDisplay = function fullUpdatedDisplay(showUser, text, timeDisplay, timezone, showTimezone){
73
- var userDisplay = (showUser == 'true' && text.length > 0) ? ' by ' + text : ''
74
- return 'Last updated' + userDisplay + ' at ' + fullTimeDisplay(dateTimestamp, timeDisplay, timezone, showTimezone)
75
- }
20
+ const { id, className, data = {}, text } = props
21
+ const dataProps = buildDataProps(data)
22
+ const pbCss = buildCss('pb_timestamp_kit')
76
23
 
77
24
  return (
78
- <div className={classes}>
79
- <div className="pb_timestamp_kit">
80
- <If condition={variant == 'updated'}>
81
- <Caption
82
- dark={dark}
83
- size="xs"
84
- text={fullUpdatedDisplay(showUser, text, timeDisplay, timezone, showTimezone)}
85
- />
86
- </If>
87
- <If condition={variant == 'elapsed'}>
88
- <Caption
89
- dark={dark}
90
- size="xs"
91
- text={fullElapsedDisplay(showUser, text, dateTimestamp)}
92
- />
93
- </If>
94
- <If condition={variant == 'default'}>
95
- <If condition={showDate == 'true'}>
96
- <Caption
97
- dark={dark}
98
- size="xs"
99
- text={fullDateDisplay(dateTimestamp, currentYear, dateDisplay, timezone, showTimezone)}
100
- />
101
- </If>
102
- <If condition={showDate == 'false'}>
103
- <Caption
104
- dark={dark}
105
- size="xs"
106
- text={timeDisplay}
107
- />
108
- </If>
109
- </If>
110
- </div>
25
+ <div
26
+ {...dataProps}
27
+ className={classnames(pbCss, globalProps(props), className)}
28
+ id={id}
29
+ >
30
+ <Caption
31
+ size="xs"
32
+ tag="span"
33
+ text={text}
34
+ />
111
35
  </div>
112
36
  )
113
37
  }
@@ -1,16 +1,5 @@
1
1
  @import "timestamp-mixins";
2
- @import "../tokens/colors";
3
2
 
4
- [class^=pb_timestamp_kit]{
3
+ [class^=pb_timestamp_kit] {
5
4
  @include pb_timestamp;
6
-
7
- &[class*=_center] {
8
- text-align: center;
9
- }
10
- &[class*=_right] {
11
- text-align: right;
12
- }
13
- &[class*=_dark] {
14
- color: $text_dk_default;
15
- }
16
5
  }
@@ -1,21 +1 @@
1
- <%= pb_rails("timestamp", props: {
2
- timestamp: DateTime.now,
3
- show_date: false,
4
- align: "left"
5
- }) %>
6
-
7
- <br>
8
-
9
- <%= pb_rails("timestamp", props: {
10
- timestamp: DateTime.now,
11
- show_date: true,
12
- align: "left"
13
- }) %>
14
-
15
- <br>
16
-
17
- <%= pb_rails("timestamp", props: {
18
- timestamp: DateTime.now + 4.years,
19
- show_date: true,
20
- align: "left"
21
- }) %>
1
+ <%= pb_rails("timestamp", props: { text: "20 seconds ago" }) %>
@@ -1,35 +1,8 @@
1
1
  import React from 'react'
2
- import Timestamp from '../_timestamp.jsx'
2
+ import { Timestamp } from '../../'
3
3
 
4
- const TimestampDefault = (props) => {
5
- return (
6
- <div>
7
- <Timestamp
8
- align="left"
9
- showDate="false"
10
- timestamp={new Date().getTime()}
11
- {...props}
12
- />
13
-
14
- <br />
15
-
16
- <Timestamp
17
- align="left"
18
- showDate="true"
19
- timestamp={new Date().getTime()}
20
- {...props}
21
- />
22
-
23
- <br />
24
-
25
- <Timestamp
26
- align="left"
27
- showDate="true"
28
- timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
29
- {...props}
30
- />
31
- </div>
32
- )
33
- }
4
+ const TimestampDefault = () => (
5
+ <Timestamp text="20 seconds ago" />
6
+ )
34
7
 
35
8
  export default TimestampDefault
@@ -2,20 +2,6 @@ examples:
2
2
 
3
3
  rails:
4
4
  - timestamp_default: Default
5
- - timestamp_align: Alignments
6
- - timestamp_timezones: Timezones
7
- - timestamp_timezones_align: Timezones - Alignments
8
- - timestamp_updated: Last Updated by
9
- - timestamp_updated_align: Last Updated by - Alignments
10
- - timestamp_elapsed: Time Ago
11
- - timestamp_elapsed_align: Time Ago - Alignments
12
5
 
13
6
  react:
14
7
  - timestamp_default: Default
15
- - timestamp_align: Alignments
16
- - timestamp_timezones: Timezones
17
- - timestamp_timezones_align: Timezones - Alignments
18
- - timestamp_updated: Last Updated by
19
- - timestamp_updated_align: Last Updated by - Alignments
20
- - timestamp_elapsed: Time Ago
21
- - timestamp_elapsed_align: Time Ago - Alignments
@@ -1,8 +1 @@
1
1
  export { default as TimestampDefault } from './_timestamp_default.jsx'
2
- export { default as TimestampAlign } from './_timestamp_align.jsx'
3
- export { default as TimestampTimezones } from './_timestamp_timezones.jsx'
4
- export { default as TimestampTimezonesAlign } from './_timestamp_timezones_align.jsx'
5
- export { default as TimestampUpdated } from './_timestamp_updated.jsx'
6
- export { default as TimestampUpdatedAlign } from './_timestamp_updated_align.jsx'
7
- export { default as TimestampElapsed } from './_timestamp_elapsed.jsx'
8
- export { default as TimestampElapsedAlign } from './_timestamp_elapsed_align.jsx'
@@ -3,80 +3,14 @@
3
3
  module Playbook
4
4
  module PbTimestamp
5
5
  class Timestamp
6
- include ActionView::Helpers::DateHelper
7
6
  include Playbook::Props
8
7
 
9
8
  partial "pb_timestamp/timestamp"
10
9
 
11
10
  prop :text
12
- prop :timestamp, required: true
13
-
14
- prop :dark, type: Playbook::Props::Boolean,
15
- default: false
16
- prop :align, type: Playbook::Props::Enum,
17
- values: %w[left center right],
18
- default: "left"
19
- prop :show_date, type: Playbook::Props::Boolean,
20
- default: true
21
- prop :show_timezone, type: Playbook::Props::Boolean,
22
- default: false
23
- prop :show_user, type: Playbook::Props::Boolean,
24
- default: false
25
- prop :timezone, default: "America/New_York"
26
- prop :variant, type: Playbook::Props::Enum,
27
- values: %w[default elapsed updated],
28
- default: "default"
29
11
 
30
12
  def classname
31
- generate_classname("pb_timestamp_kit", variant_class, align)
32
- end
33
-
34
- def format_year_string
35
- pb_date_time.to_year != DateTime.now.year.to_s ? ", #{pb_date_time.to_year}" : ""
36
- end
37
-
38
- def format_time_string
39
- "#{pb_date_time.to_hour}:#{pb_date_time.to_minutes}#{pb_date_time.to_meridian} #{format_timezone_string}".strip
40
- end
41
-
42
- def format_timezone_string
43
- timezone && show_timezone ? pb_date_time.to_timezone.to_s : ""
44
- end
45
-
46
- def format_date_string
47
- "#{pb_date_time.to_month_downcase} #{pb_date_time.to_unpadded_day}#{format_year_string}"
48
- end
49
-
50
- def format_datetime_string
51
- "#{format_date_string} &middot; #{format_time_string}".html_safe
52
- end
53
-
54
- def format_updated_string
55
- user_string = show_user ? " by #{text}" : ""
56
-
57
- case variant
58
- when "updated"
59
- datetime_string = " on #{format_date_string} at #{format_time_string}"
60
- when "elapsed"
61
- datetime_string = " #{time_ago_in_words(pb_date_time.convert_to_timestamp)} ago"
62
- end
63
-
64
- "Last updated#{user_string}#{datetime_string}"
65
- end
66
-
67
- private
68
-
69
- def pb_date_time
70
- Playbook::PbKit::PbDateTime.new(timestamp, timezone)
71
- end
72
-
73
- def variant_class
74
- case variant
75
- when "updated"
76
- "updated"
77
- when "elapsed"
78
- "elapsed"
79
- end
13
+ generate_classname("pb_timestamp_kit")
80
14
  end
81
15
  end
82
16
  end
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- VERSION = "7.4.1"
4
+ VERSION = "7.4.2"
5
5
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 7.4.1
4
+ version: 7.4.2
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2020-10-30 00:00:00.000000000 Z
12
+ date: 2020-11-02 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -1705,22 +1705,8 @@ files:
1705
1705
  - app/pb_kits/playbook/pb_timestamp/docs/_description.md
1706
1706
  - app/pb_kits/playbook/pb_timestamp/docs/_footer.md
1707
1707
  - app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md
1708
- - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb
1709
- - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx
1710
1708
  - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb
1711
1709
  - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx
1712
- - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb
1713
- - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx
1714
- - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.html.erb
1715
- - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.jsx
1716
- - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb
1717
- - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx
1718
- - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.html.erb
1719
- - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.jsx
1720
- - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.html.erb
1721
- - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx
1722
- - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.html.erb
1723
- - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.jsx
1724
1710
  - app/pb_kits/playbook/pb_timestamp/docs/example.yml
1725
1711
  - app/pb_kits/playbook/pb_timestamp/docs/index.js
1726
1712
  - app/pb_kits/playbook/pb_timestamp/timestamp.rb
@@ -1,69 +0,0 @@
1
- <%= pb_rails("timestamp", props: {
2
- timestamp: DateTime.now,
3
- show_date: false,
4
- align: "left"
5
- }) %>
6
-
7
- <br>
8
-
9
- <%= pb_rails("timestamp", props: {
10
- timestamp: DateTime.now,
11
- show_date: true,
12
- align: "left"
13
- }) %>
14
-
15
- <br>
16
-
17
- <%= pb_rails("timestamp", props: {
18
- timestamp: DateTime.now + 4.years,
19
- show_date: true,
20
- align: "left"
21
- }) %>
22
-
23
- <br><br>
24
-
25
- <%= pb_rails("timestamp", props: {
26
- timestamp: DateTime.now,
27
- show_date: false,
28
- align: "center"
29
- }) %>
30
-
31
- <br>
32
-
33
- <%= pb_rails("timestamp", props: {
34
- timestamp: DateTime.now,
35
- show_date: true,
36
- align: "center"
37
- }) %>
38
-
39
- <br>
40
-
41
- <%= pb_rails("timestamp", props: {
42
- timestamp: DateTime.now + 4.years,
43
- show_date: true,
44
- align: "center"
45
- }) %>
46
-
47
- <br><br>
48
-
49
- <%= pb_rails("timestamp", props: {
50
- timestamp: DateTime.now,
51
- show_date: false,
52
- align: "right"
53
- }) %>
54
-
55
- <br>
56
-
57
- <%= pb_rails("timestamp", props: {
58
- timestamp: DateTime.now,
59
- show_date: true,
60
- align: "right"
61
- }) %>
62
-
63
- <br>
64
-
65
- <%= pb_rails("timestamp", props: {
66
- timestamp: DateTime.now + 4.years,
67
- show_date: true,
68
- align: "right"
69
- }) %>