playbook_ui 6.4.1 → 6.4.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (20) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date/_date.html.erb +8 -32
  3. data/app/pb_kits/playbook/pb_date/_date.jsx +67 -76
  4. data/app/pb_kits/playbook/pb_date/_date.scss +0 -25
  5. data/app/pb_kits/playbook/pb_date/date.rb +11 -20
  6. data/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb +9 -1
  7. data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +28 -0
  8. data/app/pb_kits/playbook/pb_date/docs/_description.md +0 -2
  9. data/app/pb_kits/playbook/pb_date/docs/example.yml +2 -6
  10. data/app/pb_kits/playbook/pb_date/docs/index.js +1 -3
  11. data/lib/playbook/version.rb +1 -1
  12. metadata +4 -12
  13. data/app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb +0 -24
  14. data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx +0 -32
  15. data/app/pb_kits/playbook/pb_date/docs/_date_default_react.jsx +0 -20
  16. data/app/pb_kits/playbook/pb_date/docs/_date_default_react.md +0 -3
  17. data/app/pb_kits/playbook/pb_date/docs/_date_timezone.html.erb +0 -51
  18. data/app/pb_kits/playbook/pb_date/docs/_date_timezone.md +0 -6
  19. data/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb +0 -27
  20. data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx +0 -39
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 9a08150d876a7028d6cc8b9118e531fa9a16ba7c9c4fa77f7ffa4faf7cab44c7
4
- data.tar.gz: ae48bc22ae443725b97cac2b5ab18d4de996462b6331e4fa4d7d92f98996b825
3
+ metadata.gz: 043d8ee7ffc205305e575f5a1b2dbc33a7044509a8907c19b1fdd2496df7995c
4
+ data.tar.gz: 7c38d3f71179c5f552836a74d7bb85c84035a304d3190b90f3a5d0a9be043a46
5
5
  SHA512:
6
- metadata.gz: 41f73dc0530334c77b1ab50f920f7bb570db7cea6864d1eb86dcf63da41995c88c2db83932bbb97b9156a2d4372c01d42f8e943e53d875ac12216a68b8dc7142
7
- data.tar.gz: 345d508437f8769cf5abd601e21d973628bea9455a90904041952f549b8a54df4bf17f2c7893ccb6679aaa4c5ba824af1b0ff47b199d546ce7f8ac383e943266
6
+ metadata.gz: 6c4ba1186d30795d4dc2a85ab19fe898b9ef043d1cb42e0db2aea26df4b7a0ea34ffd3e39f7272db76deb03533777d34798c3e1f9aac0a514d4d0133d3dbac2c
7
+ data.tar.gz: f6a7e045c41272b2a13c2035fe0b2100d792ab969f2cfd968008646b2c0c1a51bcd5ee467c831a4aba06a24fdebf7c662e7845e8d0e4f41af6af6e2d67070b80
data/app/pb_kits/playbook/pb_date/_date.html.erb CHANGED
@@ -1,38 +1,14 @@
1
1
  <%= content_tag(:div,
2
2
  id: object.id,
3
3
  data: object.data,
4
- class: object.classname,
5
- aria: object.aria) do %>
6
-
7
- <!-- icon -->
8
- <% if object.show_icon %>
9
- <%= pb_rails("body", props: {
10
- color: "light",
11
- tag: "div",
12
- }) do %>
13
- <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
14
- <% end %>
15
- <% end %>
16
-
17
- <!-- day_of_week -->
18
- <% if object.show_day_of_week %>
19
- <%= pb_rails("title", props: { tag: "div", text: object.date_day_of_week, size: 4 }) %>
20
- <%= pb_rails("body", props: {
21
- text: "•",
22
- color: "light",
23
- tag: "div",
24
- }) %>
25
- <% end %>
26
-
27
- <!-- month day, year -->
28
-
29
- <%# if not current year %>
30
- <% if object.year.to_s == DateTime.now.year.to_s %>
31
- <%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}", size: 4 }) %>
32
- <%# if is current year %>
33
- <% else %>
34
- <%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}, #{object.year}", size: 4 }) %>
4
+ class: object.classname) do %>
5
+ <% if object.size == "lg" %>
6
+ <%= pb_rails("title", props: { text: object.lg_date, size: 3 }) %>
7
+ <% elsif object.size == "sm" %>
8
+ <%= pb_rails("icon", props: { icon: "calendar", fixed_width: true }) %>
9
+ <%= pb_rails("title", props: { tag: "span", text: object.sm_date, size: 4 }) %>
10
+ <% else %>
11
+ <%= pb_rails("title", props: { text: object.xs_date, size: 4 }) %>
35
12
  <% end %>
36
-
37
13
  <% end %>
38
14
 
data/app/pb_kits/playbook/pb_date/_date.jsx CHANGED
@@ -2,91 +2,82 @@
2
2
 
3
3
  import React from 'react'
4
4
  import DateTime from '../pb_kit/dateTime.js'
5
- import { Body, Icon, Title } from '../'
5
+ import { Icon } from '../'
6
6
  import classnames from 'classnames'
7
7
  import { globalProps } from '../utilities/globalProps.js'
8
- import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
9
8
 
10
- type PbDateProps = {
11
- aria: Object,
12
- date: string | date,
13
- className?: string,
14
- data?: Object,
15
- id?: string,
16
- showIcon?: boolean,
17
- showDayOfWeek?: boolean,
18
- alignment?: "left" | "center" | "right"
9
+ const defaultDateString = (value: DateTime) => {
10
+ const weekday = value.toWeekday().toUpperCase()
11
+ const month = value.toMonth().toUpperCase()
12
+ const day = value.toDay()
13
+
14
+ return `${weekday} · ${month} ${day}`
19
15
  }
20
16
 
21
- const PbDate = (props: PbDateProps) => {
22
- const {
23
- aria = {},
24
- alignment = 'left',
25
- className,
26
- date,
27
- data = {},
28
- id,
29
- showDayOfWeek = false,
30
- showIcon = false,
31
- } = props
17
+ const largeDateString = (value: DateTime) => {
18
+ const month = value.toMonth().toUpperCase()
19
+ const day = value.toDay()
20
+
21
+ return `${month} ${day}`
22
+ }
32
23
 
33
- const dateTimestamp = new DateTime({ value: date })
34
- const weekday = dateTimestamp.toWeekday()
35
- const month = dateTimestamp.toMonth()
36
- const day = dateTimestamp.toDay()
37
- const year = dateTimestamp.toYear()
38
- const currentYear = new Date().getFullYear().toString()
24
+ type DateSubcomponent = {
25
+ value: DateTime,
26
+ }
39
27
 
40
- const ariaProps = buildAriaProps(aria)
41
- const dataProps = buildDataProps(data)
28
+ const ExtraSmallDate = ({ value, ...props }: DateSubcomponent) => (
29
+ <h3 className={classnames('pb_title_kit_4', globalProps(props))}>
30
+ {defaultDateString(value)}
31
+ </h3>
32
+ )
42
33
 
43
- const classes = classnames(
44
- className,
45
- buildCss('pb_date_kit', alignment),
46
- globalProps(props)
47
- )
34
+ const SmallDate = ({ value, ...props }: DateSubcomponent) => (
35
+ <h3 className={classnames('pb_title_kit_4', globalProps(props))}>
36
+ <Icon
37
+ fixedWidth
38
+ icon="calendar"
39
+ />
40
+ {defaultDateString(value)}
41
+ </h3>
42
+ )
43
+
44
+ const LargeDate = ({ value, ...props }: DateSubcomponent) => (
45
+ <h3 className={classnames('pb_title_kit_3', globalProps(props))}>
46
+ {largeDateString(value)}
47
+ </h3>
48
+ )
49
+
50
+ type PbDateProps = {
51
+ size?: "xs" | "sm" | "lg",
52
+ value?: string,
53
+ className?: string
54
+ }
55
+
56
+ const PbDate = ({ size, value, className, ...props }: PbDateProps) => {
57
+ const date = new DateTime({ value: value })
58
+
59
+ if (size == 'xs')
60
+ return (
61
+ <ExtraSmallDate
62
+ {...props}
63
+ className={className}
64
+ value={date}
65
+ />
66
+ )
67
+ if (size == 'lg')
68
+ return (
69
+ <LargeDate
70
+ {...props}
71
+ className={className}
72
+ value={date}
73
+ />
74
+ )
48
75
  return (
49
- <div
50
- {...ariaProps}
51
- {...dataProps}
52
- className={classes}
53
- id={id}
54
- >
55
- <Title
56
- size={4}
57
- tag="h4"
58
- >
59
- <If condition={showIcon}>
60
- <Body
61
- color="light"
62
- tag="span"
63
- >
64
- <Icon
65
- fixedWidth
66
- icon="calendar-alt"
67
- />
68
- </Body>
69
- </If>
70
- <If condition={showDayOfWeek}>
71
- {weekday}
72
- <Body
73
- color="light"
74
- tag="span"
75
- text=" • "
76
- />
77
- </If>
78
- <span>
79
- {month}
80
- {' '}
81
- {day}
82
- </span>
83
- <If condition={currentYear != year}>
84
- <span>
85
- {` , ${year}`}
86
- </span>
87
- </If>
88
- </Title>
89
- </div>
76
+ <SmallDate
77
+ {...props}
78
+ className={className}
79
+ value={date}
80
+ />
90
81
  )
91
82
  }
92
83
 
data/app/pb_kits/playbook/pb_date/_date.scss CHANGED
@@ -1,27 +1,2 @@
1
1
  @import "../pb_icon/icon";
2
2
  @import "../pb_title/title";
3
-
4
- [class^=pb_date_kit] {
5
- display: flex;
6
- flex-direction: row;
7
- align-items: center;
8
- > div {
9
- margin-right: 4px !important;
10
- }
11
-
12
- &[class*=_center] {
13
- display: flex;
14
- flex-direction: row;
15
- align-items: center;
16
- justify-content: center;
17
- margin-right: 4px !important;
18
- }
19
-
20
- &[class*=_right] {
21
- display: flex;
22
- flex-direction: row;
23
- align-items: center;
24
- justify-content: flex-end;
25
- margin-left: 4px !important;
26
- }
27
- }
data/app/pb_kits/playbook/pb_date/date.rb CHANGED
@@ -10,39 +10,30 @@ module Playbook
10
10
  partial "pb_date/date"
11
11
 
12
12
  prop :date, required: true
13
- prop :timezone, default: "America/New_York"
14
- prop :alignment, type: Playbook::Props::Enum,
15
- values: %w[left center right],
16
- default: "left"
17
- prop :show_icon, type: Playbook::Props::Boolean,
18
- default: false
19
- prop :show_day_of_week, type: Playbook::Props::Boolean,
20
- default: false
13
+ prop :size, type: Playbook::Props::Enum,
14
+ values: %w[lg sm xs],
15
+ default: "sm"
21
16
 
22
17
  def classname
23
- generate_classname("pb_date_kit", alignment)
18
+ generate_classname("pb_date_kit")
24
19
  end
25
20
 
26
- def date_day_of_week
27
- pb_date_time.to_day_of_week
21
+ def xs_date
22
+ "#{pb_date_time.to_day_of_week.upcase} &middot; #{pb_date_time.to_month.upcase} #{pb_date_time.to_day}".html_safe
28
23
  end
29
24
 
30
- def day
31
- pb_date_time.to_day
25
+ def lg_date
26
+ "#{pb_date_time.to_month.upcase} #{pb_date_time.to_day}"
32
27
  end
33
28
 
34
- def month
35
- pb_date_time.to_month.capitalize
36
- end
37
-
38
- def year
39
- pb_date_time.to_year
29
+ def sm_date
30
+ "#{pb_date_time.to_day_of_week.upcase} &middot; #{pb_date_time.to_month.upcase} #{pb_date_time.to_day}".html_safe
40
31
  end
41
32
 
42
33
  private
43
34
 
44
35
  def pb_date_time
45
- Playbook::PbKit::PbDateTime.new(date, timezone)
36
+ Playbook::PbKit::PbDateTime.new(date)
46
37
  end
47
38
  end
48
39
  end
data/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb CHANGED
@@ -1,9 +1,17 @@
1
1
  <%= pb_rails("date", props: {
2
2
  date: Date.today,
3
+ size: "lg"
3
4
  }) %>
4
5
 
5
- <br />
6
+ <br>
7
+
8
+ <%= pb_rails("date", props: {
9
+ date: DateTime.now
10
+ }) %>
11
+
12
+ <br>
6
13
 
7
14
  <%= pb_rails("date", props: {
8
15
  date: "2012-08-02T15:49:29Z",
16
+ size: "xs"
9
17
  }) %>
data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx ADDED
@@ -0,0 +1,28 @@
1
+ import React from 'react'
2
+ import { Date } from '../../'
3
+
4
+ const DateDefault = () => {
5
+ return (
6
+ <div>
7
+ <Date
8
+ size="lg"
9
+ value="1995-12-25"
10
+ />
11
+
12
+ <br />
13
+
14
+ <Date
15
+ value="17 Mar 69"
16
+ />
17
+
18
+ <br />
19
+
20
+ <Date
21
+ size="xs"
22
+ value="2020-04-20T04:20:00.000Z"
23
+ />
24
+ </div>
25
+ )
26
+ }
27
+
28
+ export default DateDefault
data/app/pb_kits/playbook/pb_date/docs/_description.md CHANGED
@@ -1,3 +1 @@
1
1
  Use to display the date. Year will not display if it is the current year.
2
-
3
- `DateTime` defaults to the "America/New_York" timezone. `Date` ignores timezone.
data/app/pb_kits/playbook/pb_date/docs/example.yml CHANGED
@@ -2,12 +2,8 @@ examples:
2
2
 
3
3
  rails:
4
4
  - date_default: Default
5
- - date_timezone: Timezones
6
- - date_variants: Variants
7
- - date_alignment: Alignment
5
+
8
6
 
9
7
  react:
10
- - date_default_react: Default
11
- - date_variants: Variants
12
- - date_alignment: Alignment
8
+ - date_default: Default
13
9
 
data/app/pb_kits/playbook/pb_date/docs/index.js CHANGED
@@ -1,3 +1 @@
1
- export { default as DateDefaultReact } from './_date_default_react.jsx'
2
- export { default as DateVariants } from './_date_variants.jsx'
3
- export { default as DateAlignment } from './_date_alignment.jsx'
1
+ export { default as DateDefault } from './_date_default.jsx'
data/lib/playbook/version.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- VERSION = "6.4.1"
4
+ VERSION = "6.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: 6.4.1
4
+ version: 6.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-08-31 00:00:00.000000000 Z
12
+ date: 2020-09-04 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -702,15 +702,8 @@ files:
702
702
  - app/pb_kits/playbook/pb_date/_date.jsx
703
703
  - app/pb_kits/playbook/pb_date/_date.scss
704
704
  - app/pb_kits/playbook/pb_date/date.rb
705
- - app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb
706
- - app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx
707
705
  - app/pb_kits/playbook/pb_date/docs/_date_default.html.erb
708
- - app/pb_kits/playbook/pb_date/docs/_date_default_react.jsx
709
- - app/pb_kits/playbook/pb_date/docs/_date_default_react.md
710
- - app/pb_kits/playbook/pb_date/docs/_date_timezone.html.erb
711
- - app/pb_kits/playbook/pb_date/docs/_date_timezone.md
712
- - app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb
713
- - app/pb_kits/playbook/pb_date/docs/_date_variants.jsx
706
+ - app/pb_kits/playbook/pb_date/docs/_date_default.jsx
714
707
  - app/pb_kits/playbook/pb_date/docs/_description.md
715
708
  - app/pb_kits/playbook/pb_date/docs/example.yml
716
709
  - app/pb_kits/playbook/pb_date/docs/index.js
@@ -1954,8 +1947,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
1954
1947
  - !ruby/object:Gem::Version
1955
1948
  version: '0'
1956
1949
  requirements: []
1957
- rubyforge_project:
1958
- rubygems_version: 2.7.3
1950
+ rubygems_version: 3.1.4
1959
1951
  signing_key:
1960
1952
  specification_version: 4
1961
1953
  summary: Playbook Design System
data/app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb DELETED
@@ -1,24 +0,0 @@
1
-
2
- <%= pb_rails("date", props: {
3
- date: DateTime.now,
4
- show_icon: true,
5
- show_day_of_week: true
6
- }) %>
7
-
8
- <br><br>
9
-
10
- <%= pb_rails("date", props: {
11
- date: DateTime.now,
12
- show_icon: true,
13
- show_day_of_week: true,
14
- alignment: "center"
15
- }) %>
16
-
17
- <br><br>
18
-
19
- <%= pb_rails("date", props: {
20
- date: DateTime.now,
21
- show_icon: true,
22
- show_day_of_week: true,
23
- alignment: "right"
24
- }) %>
data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx DELETED
@@ -1,32 +0,0 @@
1
- import React from 'react'
2
- import { Date as FormattedDate } from '../..'
3
-
4
- const DateAlignment = () => {
5
- return (
6
- <div>
7
- <FormattedDate
8
- date="1995-12-25"
9
- dayOfWeek
10
- icon
11
- />
12
-
13
- <br />
14
-
15
- <FormattedDate
16
- alignment="center"
17
- date="2020-12-25"
18
- dayOfWeek
19
- icon
20
- />
21
-
22
- <br />
23
-
24
- <FormattedDate
25
- alignment="right"
26
- date={new Date()}
27
- />
28
- </div>
29
- )
30
- }
31
-
32
- export default DateAlignment
data/app/pb_kits/playbook/pb_date/docs/_date_default_react.jsx DELETED
@@ -1,20 +0,0 @@
1
- import React from 'react'
2
- import { Date as FormattedDate } from '../..'
3
-
4
- const DateDefaultReact = () => {
5
- return (
6
- <div>
7
- <FormattedDate
8
- date="2012-12-25"
9
- />
10
-
11
- <br />
12
-
13
- <FormattedDate
14
- date={new Date()}
15
- />
16
- </div>
17
- )
18
- }
19
-
20
- export default DateDefaultReact
data/app/pb_kits/playbook/pb_date/docs/_date_default_react.md DELETED
@@ -1,3 +0,0 @@
1
- *Development Note* - We are reviewing this kit for a potential name change due to naming collisions when `new Date()` is used.
2
-
3
- To avoid this bug, please use name spacing as shown in the code examples. ie `import { Date as AliasedComponentName } from '../../'`
data/app/pb_kits/playbook/pb_date/docs/_date_timezone.html.erb DELETED
@@ -1,51 +0,0 @@
1
- <%= pb_rails("caption", props: { text: "East Coast (Default)"}) %>
2
- <%= pb_rails("date", props: {
3
- date: DateTime.now,
4
- timezone: "America/New_York"
5
- }) %>
6
-
7
- <br>
8
-
9
- <%= pb_rails("caption", props: { text: "West Coast"}) %>
10
- <%= pb_rails("date", props: {
11
- date: DateTime.now,
12
- timezone: "America/Los_Angeles"
13
- }) %>
14
-
15
- <br>
16
-
17
- <%= pb_rails("caption", props: { text: "Toyko, Japan"}) %>
18
- <%= pb_rails("date", props: {
19
- date: DateTime.now,
20
- timezone: "Asia/Tokyo"
21
- }) %>
22
-
23
- <br>
24
-
25
- <%= pb_rails("caption", props: { text: "Anti-pattern example"}) %>
26
-
27
- <%= pb_rails("date", props: {
28
- date: Date.today,
29
- timezone: "Australia/Sydney"
30
- }) %>
31
- <%= pb_rails("body", props: { text: "Date.today ignores Timezone"}) %>
32
-
33
- <br>
34
-
35
- <%= pb_rails("caption", props: { text: "DateTime respects Timezone"}) %>
36
-
37
- <%= pb_rails("date", props: {
38
- date: DateTime.now,
39
- timezone: "Australia/Sydney"
40
- }) %>
41
-
42
- <%= pb_rails("body", props: { text: "'.now' in Australia is tomorrow (if you're EST after 10am)"}) %>
43
-
44
- <br>
45
-
46
- <%= pb_rails("caption", props: { text: "String Dates"}) %>
47
- <%= pb_rails("date", props: {
48
- date: "2012-08-02T00:49:29Z",
49
- }) %>
50
-
51
- <%= pb_rails("body", props: { text: "Defaults to UTC, then changes due to EST Timezone."}) %>
data/app/pb_kits/playbook/pb_date/docs/_date_timezone.md DELETED
@@ -1,6 +0,0 @@
1
- Depending on the data you send to the `date` prop you might have unexpected results due to ruby `Date` and `DateTime` classes.
2
-
3
- Don't care about timezones? Use `Date`.
4
-
5
- If you need a date that recognizes a timezone, especially when paired with the [Time kit](/kits/time), leverage `DateTime`.
6
-
data/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb DELETED
@@ -1,27 +0,0 @@
1
- <div>
2
- <%= pb_rails("date", props: {
3
- date: DateTime.now,
4
- }) %>
5
-
6
- <br><br>
7
-
8
- <%= pb_rails("date", props: {
9
- date: DateTime.now,
10
- show_icon: true
11
- }) %>
12
-
13
- <br><br>
14
-
15
- <%= pb_rails("date", props: {
16
- date: DateTime.now,
17
- show_day_of_week: true
18
- }) %>
19
-
20
- <br><br>
21
-
22
- <%= pb_rails("date", props: {
23
- date: DateTime.now,
24
- show_icon: true,
25
- show_day_of_week: true
26
- }) %>
27
- </div>
data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx DELETED
@@ -1,39 +0,0 @@
1
- import React from 'react'
2
- import { Date as FormattedDate } from '../..'
3
-
4
- const DateVariants = () => {
5
- return (
6
- <div>
7
- <FormattedDate
8
- date="1995-12-25"
9
- />
10
-
11
- <br />
12
- <br />
13
-
14
- <FormattedDate
15
- date="1995-12-25"
16
- showIcon
17
- />
18
-
19
- <br />
20
- <br />
21
-
22
- <FormattedDate
23
- date="1995-12-25"
24
- showDayOfWeek
25
- />
26
-
27
- <br />
28
- <br />
29
-
30
- <FormattedDate
31
- date="1995-12-25"
32
- showDayOfWeek
33
- showIcon
34
- />
35
- </div>
36
- )
37
- }
38
-
39
- export default DateVariants