playbook_ui 9.4.0.pre.alpha2 → 9.4.0

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 (24) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx +2 -1
  3. data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss +3 -2
  4. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.jsx +67 -9
  5. data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx +11 -45
  6. data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb +6 -17
  7. data/app/pb_kits/playbook/pb_date_stacked/date_stacked.rb +5 -12
  8. data/app/pb_kits/playbook/pb_date_stacked/docs/example.yml +1 -3
  9. data/app/pb_kits/playbook/pb_date_stacked/docs/index.js +0 -1
  10. data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.jsx +16 -32
  11. data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss +4 -23
  12. data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb +8 -12
  13. data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.rb +2 -9
  14. data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.html.erb +1 -8
  15. data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx +1 -19
  16. data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx +1 -1
  17. data/app/pb_kits/playbook/pb_flex/_flex.jsx +1 -6
  18. data/app/pb_kits/playbook/pb_section_separator/_section_separator.jsx +3 -7
  19. data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb +2 -2
  20. data/lib/playbook/version.rb +1 -1
  21. metadata +4 -7
  22. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.html.erb +0 -5
  23. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.jsx +0 -38
  24. data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js +0 -35
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: f839b72cd21876e826496faaa29c3d306c24dd29eb714e46bc269fe88c39f445
4
- data.tar.gz: b8ee3b0cc53c15e3898c95777c96d394b5a7f9d6b659322add05c61cbfcf1b4b
3
+ metadata.gz: 1c56b74cd258f0a3479d6f6acdaebe1792f3e5a30bbca45c3f2b21493ed2b5f4
4
+ data.tar.gz: 151e4c6b8f15c191ca1358de007a3ba373fb7da32d8d1f3afd5d0743a86ae364
5
5
  SHA512:
6
- metadata.gz: cfdc5aa4001dd522efc77c2919c45ce514eebe0a6f8b8754ebecdce36823f5647880432f3f4a66e540a48a6683864a35ce7aca7117709b8a35ce3e06511813c3
7
- data.tar.gz: 3ca9ce55526340f77d313ff6e9e1bb5e3fd34cb4319df3a9432511b8852872653410658d456746fb949bbf96105c7d300c598c928a6099f776a8b70e2847552c
6
+ metadata.gz: a079d327c1a318bb826104f242c104286dd0d996e8adfe325ca719488d790fd73ef71d6ab302c835a368852e5b993f3831480faf0b609aeccdd99e37a9aaee4b
7
+ data.tar.gz: 3cf8ead3bf3712caaf275ef4559207108d655315d2c5c43505aba4a0203e91c788ce50cfe51c36d85a0cacf2c364ad65e593b6607a8003fcdd8da48aabd0396f
@@ -53,9 +53,10 @@ const Checkbox = (props: CheckboxProps) => {
53
53
 
54
54
  useEffect(() => {
55
55
  if (checkRef.current) {
56
+ checkRef.current.checked = checked
56
57
  checkRef.current.indeterminate = indeterminate
57
58
  }
58
- }, [indeterminate])
59
+ }, [indeterminate, checked])
59
60
 
60
61
  return (
61
62
  <label
@@ -4,12 +4,13 @@
4
4
  $transition: $transition_cubic;
5
5
 
6
6
  [class^=pb_checkbox_kit] {
7
- display: inline-flex;
8
7
  cursor: pointer;
8
+ display: inline-flex;
9
+ vertical-align: middle;
9
10
  .pb_checkbox_label {
10
- padding-left: $space_xs;
11
11
  cursor: pointer;
12
12
  font-size: $text_lt_default;
13
+ padding-left: $space_xs;
13
14
  user-select: none;
14
15
  }
15
16
 
@@ -1,15 +1,73 @@
1
- import React from 'react'
2
- import { Checkbox } from '../..'
1
+ import React, { useState } from 'react'
2
+ import { Checkbox, Table } from '../..'
3
3
 
4
4
  const CheckboxIndeterminate = (props) => {
5
+ const [checkboxes, setCheckboxes] = useState([
6
+ { name: 'Coffee', checked: false },
7
+ { name: 'Ice Cream', checked: false },
8
+ { name: 'Chocolate', checked: true },
9
+ ])
10
+
11
+ const isAllChecked = !checkboxes.find((checkbox) => !checkbox.checked)
12
+ const isNoneChecked = !checkboxes.find((checkbox) => checkbox.checked)
13
+
14
+ const processCheckboxes = (checked) =>
15
+ checkboxes.slice(0).map((checkbox) => {
16
+ checkbox.checked = checked
17
+ return checkbox
18
+ })
19
+
20
+ const onToggleAll = () => {
21
+ setCheckboxes(
22
+ isNoneChecked ? processCheckboxes(true) : processCheckboxes(false)
23
+ )
24
+ }
25
+
26
+ const updateCheckboxes = (checkbox, index) => {
27
+ const newCheckboxes = checkboxes.slice(0)
28
+ newCheckboxes[index].checked = !checkbox.checked
29
+ setCheckboxes(newCheckboxes)
30
+ }
31
+
5
32
  return (
6
- <Checkbox
7
- indeterminate
8
- name="checkbox-name"
9
- text="Indeterminate State"
10
- value="check-box value"
11
- {...props}
12
- />
33
+ <Table
34
+ container={false}
35
+ size="md"
36
+ >
37
+ <thead>
38
+ <tr>
39
+ <th>
40
+ <Checkbox
41
+ checked={isAllChecked}
42
+ indeterminate={!isAllChecked && !isNoneChecked}
43
+ name="checkbox-name"
44
+ onChange={onToggleAll}
45
+ text={isNoneChecked ? 'Check All' : 'Uncheck All'}
46
+ value="check-box value"
47
+ {...props}
48
+ />
49
+ </th>
50
+ </tr>
51
+ </thead>
52
+ <tbody>
53
+ {checkboxes.map((checkbox, index) => (
54
+ <tr key={index}>
55
+ <td>
56
+ <Checkbox
57
+ checked={checkbox.checked}
58
+ name={checkbox.name}
59
+ onChange={() => {
60
+ updateCheckboxes(checkbox, index)
61
+ }}
62
+ text={checkbox.name}
63
+ value="check-box value"
64
+ {...props}
65
+ />
66
+ </td>
67
+ </tr>
68
+ ))}
69
+ </tbody>
70
+ </Table>
13
71
  )
14
72
  }
15
73
 
@@ -9,7 +9,6 @@ import { globalProps } from '../utilities/globalProps.js'
9
9
 
10
10
  type DateStackedProps = {
11
11
  align?: "left" | "center" | "right",
12
- bold?: boolean,
13
12
  className?: string | array<string>,
14
13
  dark?: boolean,
15
14
  data?: string,
@@ -27,7 +26,6 @@ const sizes = {
27
26
  const DateStacked = (props: DateStackedProps) => {
28
27
  const {
29
28
  align = 'left',
30
- bold = false,
31
29
  reverse = false,
32
30
  className,
33
31
  dark = false,
@@ -48,51 +46,19 @@ const DateStacked = (props: DateStackedProps) => {
48
46
  const inputYear = dateTimestamp.toYear().toString()
49
47
 
50
48
  return (
51
-
52
- <div>
53
- <If condition={bold == false}>
54
-
55
- <div className={classes}>
56
- <div className="pb_date_stacked_day_month">
57
- <Caption text={dateTimestamp.toMonth().toUpperCase()} />
58
- <Title
59
- dark={dark}
60
- size={sizes[size]}
61
- text={dateTimestamp.toDay()}
62
- />
63
- </div>
64
- <If condition={currentYear != inputYear}>
65
- <Caption size="xs">{inputYear}</Caption>
66
- </If>
67
- </div>
68
- <Else />
69
- <>
70
- <div className={classes}>
71
- <div className="pb_date_stacked_day_month">
72
-
73
- <Title
74
- bold
75
- dark={dark}
76
- size="4"
77
- text={dateTimestamp.toMonth()}
78
- />
79
- <Title
80
- bold
81
- dark={dark}
82
- size="4"
83
- text={dateTimestamp.toDay()}
84
- />
85
- <If condition={currentYear != inputYear}>
86
- <Title size="4">{inputYear}</Title>
87
- </If>
88
- </div>
89
-
90
- </div>
91
-
92
- </>
49
+ <div className={classes}>
50
+ <div className="pb_date_stacked_day_month">
51
+ <Caption text={dateTimestamp.toMonth().toUpperCase()} />
52
+ <Title
53
+ dark={dark}
54
+ size={sizes[size]}
55
+ text={dateTimestamp.toDay()}
56
+ />
57
+ </div>
58
+ <If condition={currentYear != inputYear}>
59
+ <Caption size="xs">{inputYear}</Caption>
93
60
  </If>
94
61
  </div>
95
-
96
62
  )
97
63
  }
98
64
 
@@ -3,22 +3,11 @@
3
3
  data: object.data,
4
4
  class: object.classname) do %>
5
5
 
6
- <% if object.bold == false %>
7
-
8
- <div class="pb_date_stacked_day_month">
9
- <%= pb_rails("caption", props: { text: object.month }) %>
10
- <%= pb_rails("title", props: { text: object.day , size: object.title_size }) do %><% end %>
11
- <%= pb_rails("caption", props: { text: object.year, size:"xs" }) %>
12
- </div>
13
-
14
- <% else %>
15
- <div class="pb_date_stacked_day_month">
16
- <%= pb_rails("title", props: { text: object.month, size: 4 }) %>
17
- <%= pb_rails("title", props: { text: object.day, size: 4 }) do %><% end %>
18
- <%= pb_rails("title", props: { text: object.year, size:4 }) %>
19
-
20
- </div>
21
-
22
- <% end %>
6
+ <div class="pb_date_stacked_day_month">
7
+ <%= pb_rails("caption", props: { text: object.month }) %>
8
+ <%= pb_rails("title", props: { text: object.day , size: object.title_size }) do %>
9
+ <% end %>
10
+ </div>
11
+ <%= pb_rails("caption", props: { text: object.year, size:"xs" }) %>
23
12
 
24
13
  <% end %>
@@ -14,11 +14,9 @@ module Playbook
14
14
  default: false
15
15
  prop :dark, type: Playbook::Props::Boolean,
16
16
  default: false
17
- prop :bold, type: Playbook::Props::Boolean,
18
- default: false
19
17
 
20
18
  def classname
21
- generate_classname("pb_date_stacked_kit", align, size, bold, reverse_class, dark_class)
19
+ generate_classname("pb_date_stacked_kit", align, size, reverse_class, dark_class)
22
20
  end
23
21
 
24
22
  def title_size
@@ -33,7 +31,10 @@ module Playbook
33
31
  end
34
32
 
35
33
  def month
36
- pb_date_time.to_month.capitalize
34
+ month = Playbook::PbKit::PbDateTime.new(date)
35
+ content_tag(:time, datetime: month.to_iso) do
36
+ "#{month.to_month}"
37
+ end
37
38
  end
38
39
 
39
40
  def year
@@ -47,16 +48,8 @@ module Playbook
47
48
  end
48
49
  end
49
50
 
50
- def bold_class
51
- bold ? "bold" : nil
52
- end
53
-
54
51
  private
55
52
 
56
- def pb_date_time
57
- Playbook::PbKit::PbDateTime.new(date)
58
- end
59
-
60
53
  def reverse_class
61
54
  reverse ? "reverse" : nil
62
55
  end
@@ -6,12 +6,10 @@ examples:
6
6
  - date_stacked_reverse: Day & Month Reverse
7
7
  - date_stacked_sizes: Sizes
8
8
  - date_stacked_align: Alignment
9
- - date_stacked_bold: Bold
10
-
11
9
 
12
10
  react:
13
11
  - date_stacked_default: Default
14
12
  - date_stacked_not_current_year: Not Current Year
15
13
  - date_stacked_reverse: Day & Month Reverse
16
14
  - date_stacked_sizes: Sizes
17
- - date_stacked_bold: Bold
15
+ - date_stacked_align: Alignment
@@ -1,4 +1,3 @@
1
- export { default as DateStackedBold } from './_date_stacked_bold.jsx'
2
1
  export { default as DateStackedDefault } from './_date_stacked_default.jsx'
3
2
  export { default as DateStackedNotCurrentYear } from './_date_stacked_not_current_year.jsx'
4
3
  export { default as DateStackedReverse } from './_date_stacked_reverse.jsx'
@@ -1,59 +1,43 @@
1
-
2
1
  /* @flow */
3
2
 
4
3
  import React from 'react'
5
- import { buildCss } from '../utilities/props'
6
- import { deprecatedProps, globalProps } from '../utilities/globalProps.js'
7
-
8
- import { DateStacked, Flex, FlexItem, SectionSeparator, TimeStacked } from '../'
4
+ import { DateStacked, Flex, FlexItem, TimeStacked } from '../'
5
+ import { buildDataProps } from '../utilities/props'
6
+ import { globalProps } from '../utilities/globalProps.js'
9
7
 
10
8
  type DateTimeStackedProps = {
9
+ data?: string,
11
10
  id?: string,
12
- date: string,
13
- datetime: string,
11
+ date: date,
14
12
  dark: boolean,
15
- timeZone?: string,
16
13
  }
17
14
 
18
15
  const DateTimeStacked = (props: DateTimeStackedProps) => {
19
- if (props.date) deprecatedProps('Date Time Stacked', ['date'])
20
-
21
- const {
22
- date,
23
- datetime,
24
- dark,
25
- timeZone = 'America/New_York',
26
- } = props
27
-
28
- const classes = buildCss('pb_date_time_stacked_kit', globalProps(props))
16
+ const { date, data = {}, dark } = props,
17
+ dataProps = buildDataProps(data)
29
18
 
30
19
  return (
31
20
  <Flex
32
- inline="flex-container"
33
- vertical="stretch"
34
- {...props}
21
+ className={globalProps(props)}
22
+ orientation="row"
23
+ vertical="center"
24
+ {...dataProps}
35
25
  >
36
26
  <FlexItem>
37
27
  <DateStacked
38
28
  align="right"
39
- bold
40
29
  dark={dark}
41
- date={date || datetime}
42
- timeZone={timeZone}
30
+ date={date}
31
+ reverse
32
+ size="sm"
43
33
  />
44
34
  </FlexItem>
45
-
46
- <SectionSeparator
47
- className="date-time-padding"
48
- orientation="vertical"
49
- />
50
35
  <FlexItem>
51
36
  <TimeStacked
52
- className={classes}
37
+ className="pb_date_time_stacked_kit"
53
38
  dark={dark}
54
- date={date || datetime}
55
39
  tag="caption"
56
- timeZone={timeZone}
40
+ time={date}
57
41
  />
58
42
  </FlexItem>
59
43
  </Flex>
@@ -1,25 +1,6 @@
1
- [class^=pb_date_time_stacked] {
2
-
3
- [class^=padding_month] {
4
- padding-bottom: ($space_xs + 2) !important;
5
- }
6
-
7
- [class^=padding_day] {
8
- padding-bottom: ($space_xs + 2) !important;
9
- }
10
-
11
- &[class*=_dark] {
12
- & > * [class^=pb_title_kit] {
13
- color: $text_dk_default;
14
- }
15
- & > * [class^=pb_caption_kit] {
16
- color: $text_dk_light;
17
- }
18
- }
1
+ @import "../pb_title/title";
2
+ @import "../pb_body/body";
19
3
 
4
+ .pb_date_time_stacked_kit {
5
+ padding-left: $space-xs;
20
6
  }
21
- .date-time-padding {
22
- padding-right: ($space_xs / 2);
23
- padding-left: ($space_xs / 2);
24
- }
25
-
@@ -1,17 +1,13 @@
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
- <%= pb_rails("flex", props: {classname: "flex-container", vertical: "stretch"}) do %>
8
- <%= pb_rails("body", props: {classname: "flex-item"}) do %>
9
- <%= pb_rails("date_stacked", props: { date: object.date_time_value, size: "sm", align: "right", bold: true, dark: object.dark }) %>
4
+ class: object.classname) do %>
5
+ <%= pb_rails("flex", props: { orientation: "row", vertical: "center" }) do %>
6
+ <%= pb_rails("flex/flex_item") do %>
7
+ <%= pb_rails("date_stacked", props: { align: "right", date: object.date, reverse: true, size: "sm", dark: object.dark }) %>
10
8
  <% end %>
11
- <%= pb_rails("section_separator", props: { orientation: "vertical", classname: "date-time-padding" }) %>
12
- <%= pb_rails("body", props: {classname: "flex-item"}) do %>
13
- <%= pb_rails("time_stacked", props: { time: object.date_time_value, dark: object.dark, timezone: object.timezone }) %>
9
+ <%= pb_rails("flex/flex_item") do %>
10
+ <%= pb_rails("time_stacked", props: { classname: "pb_date_time_stacked_kit", time: object.date, tag: "caption" }) %>
14
11
  <% end %>
15
- <% end %>
16
-
17
- <% end %>
12
+ <% end %>
13
+ <% end %>
@@ -3,17 +3,10 @@
3
3
  module Playbook
4
4
  module PbDateTimeStacked
5
5
  class DateTimeStacked < Playbook::KitBase
6
- prop :date, deprecated: true
7
- prop :date_time, type: Playbook::Props::Date,
6
+ prop :date, type: Playbook::Props::Date,
8
7
  default: ::DateTime.current
9
8
  prop :dark, type: Playbook::Props::Boolean,
10
9
  default: false
11
- prop :timezone, type: Playbook::Props::String,
12
- default: "America/New_York"
13
-
14
- def date_time_value
15
- date || date_time
16
- end
17
10
  end
18
11
  end
19
- end
12
+ end
@@ -1,8 +1 @@
1
- <%= pb_rails("date_time_stacked", props: { date_time: DateTime.now }) %>
2
- <br>
3
- <%= pb_rails("date_time_stacked", props: { date_time: Date.new(2018, 03, 20) }) %>
4
- <br>
5
- <%= pb_rails("date_time_stacked", props: { date_time: DateTime.now, timezone: "Asia/Tokyo" }) %>
6
- <br>
7
- <%= pb_rails("date_time_stacked", props: { date_time: DateTime.now, timezone: "America/Denver" }) %>
8
-
1
+ <%= pb_rails("date_time_stacked") %>
@@ -4,28 +4,10 @@ import { DateTimeStacked } from '../../'
4
4
  const DateTimeStackedDefault = (props) => (
5
5
  <div>
6
6
  <DateTimeStacked
7
- datetime={new Date()}
7
+ date={new Date()}
8
8
  {...props}
9
9
  />
10
- <br />
11
- <DateTimeStacked
12
- datetime={new Date()}
13
- timeZone="Asia/Tokyo"
14
-
15
- {...props}
16
- />
17
- <br />
18
- <DateTimeStacked
19
- datetime={new Date()}
20
- timeZone="America/Denver"
21
-
22
- {...props}
23
- />
24
-
25
10
  </div>
26
11
  )
27
12
 
28
13
  export default DateTimeStackedDefault
29
-
30
- // *Development Note* - We are reviewing this kit for a potential name change due to naming collisions when `new Date()` is used.
31
- // To avoid this bug, please use name spacing as shown in the code examples. ie `import { Date as AliasedComponentName } from '../../'
@@ -9,7 +9,7 @@ import { Dialog } from '../'
9
9
  - https://jestjs.io/docs/en/using-matchers
10
10
  */
11
11
 
12
- test('Kit renders Dialog', () => {
12
+ test('generated scaffold test - update me', () => {
13
13
  const testId = 'test1'
14
14
 
15
15
  render(
@@ -2,12 +2,11 @@
2
2
 
3
3
  import React from 'react'
4
4
  import classnames from 'classnames'
5
- import { buildCss, buildDataProps } from '../utilities/props'
5
+ import { buildCss } from '../utilities/props'
6
6
  import { globalProps } from '../utilities/globalProps.js'
7
7
  type FlexProps = {
8
8
  children: array<React.ReactNode> | React.ReactNode,
9
9
  className?: string,
10
- data?: object,
11
10
  horizontal?: "left" | "center" | "right" | "stretch" | "none",
12
11
  justify?: "start" | "center" | "end" | "around" | "between" | "evenly" | "none",
13
12
  id?: string,
@@ -28,7 +27,6 @@ const Flex = (props: FlexProps) => {
28
27
  align = 'none',
29
28
  children,
30
29
  className,
31
- data = {},
32
30
  inline = false,
33
31
  horizontal = 'left',
34
32
  justify = 'none',
@@ -53,8 +51,6 @@ const Flex = (props: FlexProps) => {
53
51
  const columnGapClass = columnGap !== 'none' ? `columnGap_${columnGap}` : ''
54
52
  const wrapClass = wrap === true ? 'wrap' : ''
55
53
  const reverseClass = reverse === true ? 'reverse' : ''
56
- const dataProps = buildDataProps(data)
57
-
58
54
  return (
59
55
  <div
60
56
  className={classnames(
@@ -74,7 +70,6 @@ const Flex = (props: FlexProps) => {
74
70
  globalProps(props),
75
71
  className
76
72
  )}
77
- {...dataProps}
78
73
  >
79
74
  {children}
80
75
  </div>
@@ -38,13 +38,9 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
38
38
  className={classes}
39
39
  id={id}
40
40
  >
41
-
42
- <If condition={text}>
43
- <span>
44
- <Caption text={text} />
45
- </span>
46
- </If>
47
-
41
+ <span>
42
+ <Caption text={text} />
43
+ </span>
48
44
  </div>
49
45
  )
50
46
  }
@@ -3,10 +3,10 @@
3
3
  data: object.data,
4
4
  class: object.classname) do %>
5
5
 
6
- <%= pb_rails("body", props: { color: "light", dark: object.dark, classname: "pb_time_stacked time-spacing" }) do %>
6
+ <%= pb_rails("body", props: { color: "light", classname: "pb_time_stacked time-spacing" }) do %>
7
7
  <time>
8
8
  <%= object.format_time_string %>
9
- <%= pb_rails("caption", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase, dark: object.dark, classname: "pb_time_stacked" }) %>
9
+ <%= pb_rails("caption", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase, classname: "pb_time_stacked" }) %>
10
10
  </time>
11
11
  <% end %>
12
12
  <% end %>
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- VERSION = "9.4.0.pre.alpha2"
4
+ VERSION = "9.4.0"
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: 9.4.0.pre.alpha2
4
+ version: 9.4.0
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: 2021-04-12 00:00:00.000000000 Z
12
+ date: 2021-04-14 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -809,8 +809,6 @@ files:
809
809
  - app/pb_kits/playbook/pb_date_stacked/date_stacked.rb
810
810
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.html.erb
811
811
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.jsx
812
- - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.html.erb
813
- - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.jsx
814
812
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.html.erb
815
813
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx
816
814
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.html.erb
@@ -840,7 +838,6 @@ files:
840
838
  - app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss
841
839
  - app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb
842
840
  - app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.rb
843
- - app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js
844
841
  - app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.html.erb
845
842
  - app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx
846
843
  - app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml
@@ -2106,9 +2103,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
2106
2103
  version: '0'
2107
2104
  required_rubygems_version: !ruby/object:Gem::Requirement
2108
2105
  requirements:
2109
- - - ">"
2106
+ - - ">="
2110
2107
  - !ruby/object:Gem::Version
2111
- version: 1.3.1
2108
+ version: '0'
2112
2109
  requirements: []
2113
2110
  rubyforge_project:
2114
2111
  rubygems_version: 2.7.3
@@ -1,5 +0,0 @@
1
- <%= pb_rails("date_stacked", props: { date: DateTime.now, align: "left", bold: true }) %>
2
- <br>
3
- <%= pb_rails("date_stacked", props: { date: Date.new(2018, 03, 20), align: "center", bold: true }) %>
4
- <br>
5
- <%= pb_rails("date_stacked", props: { date: DateTime.now, align: "right", bold: true }) %>
@@ -1,38 +0,0 @@
1
- import React from 'react'
2
- import DateStacked from '../_date_stacked.jsx'
3
-
4
- const DateStackedBold = (props) => {
5
- return (
6
- <div>
7
- <DateStacked
8
- align="left"
9
- bold
10
- date={new Date()}
11
- {...props}
12
- />
13
-
14
- <br />
15
-
16
- <DateStacked
17
- align="center"
18
- bold
19
- date={new Date('20 Mar 2018')}
20
- {...props}
21
- />
22
-
23
- <br />
24
-
25
- <DateStacked
26
- align="right"
27
- bold
28
- date={new Date()}
29
- {...props}
30
- />
31
-
32
- <br />
33
-
34
- </div>
35
- )
36
- }
37
-
38
- export default DateStackedBold
@@ -1,35 +0,0 @@
1
- import { ensureAccessible, renderKit } from '../utilities/test-utils'
2
- import { DateTimeStacked } from '../'
3
-
4
- /* eslint-disable jsx-control-statements/jsx-jcs-no-undef */
5
-
6
- const props = {
7
- data: { testid: 'datetimestacked' },
8
- datetime: new Date('Wed Mar 31 2021 12:00:00 GMT-0500'),
9
- }
10
-
11
- test('Kit renders date time', () => {
12
- const kit = renderKit(DateTimeStacked, props)
13
- expect(kit).toBeInTheDocument()
14
- })
15
-
16
- it('Should be accessible', async () => {
17
- ensureAccessible(DateTimeStacked, props)
18
- })
19
-
20
- test('renders time in default timezone', () => {
21
- const kit = renderKit(DateTimeStacked, props)
22
- expect(kit).toHaveTextContent(/Mar311:00pEDT/i)
23
- })
24
-
25
- test('renders time in timezone', () => {
26
- props.timeZone = 'Asia/Tokyo'
27
- const kit = renderKit(DateTimeStacked, props)
28
- expect(kit).toHaveTextContent(/Mar312:00aJST/i)
29
- })
30
-
31
- test('renders time in timezone', () => {
32
- props.timeZone = 'America/Denver'
33
- const kit = renderKit(DateTimeStacked, props)
34
- expect(kit).toHaveTextContent(/Mar3111:00aMDT/i)
35
- })