playbook_ui 12.24.0 → 12.25.0.pre.alpha.railsmultilevelimprovements758

Sign up to get free protection for your applications and to get access to all the features.
Files changed (37) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date/_date.tsx +96 -42
  3. data/app/pb_kits/playbook/pb_date/date.html.erb +22 -2
  4. data/app/pb_kits/playbook/pb_date/date.rb +2 -0
  5. data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.html.erb +30 -0
  6. data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx +47 -0
  7. data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.md +1 -0
  8. data/app/pb_kits/playbook/pb_date/docs/example.yml +4 -4
  9. data/app/pb_kits/playbook/pb_date/docs/index.js +1 -0
  10. data/app/pb_kits/playbook/pb_docs/kit_example.rb +0 -2
  11. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +20 -1
  12. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +4 -4
  13. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb +72 -0
  14. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +1 -0
  15. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +3 -0
  16. data/app/pb_kits/playbook/pb_time/_time.tsx +71 -35
  17. data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.html.erb +37 -0
  18. data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.jsx +58 -0
  19. data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.md +1 -0
  20. data/app/pb_kits/playbook/pb_time/docs/example.yml +2 -0
  21. data/app/pb_kits/playbook/pb_time/docs/index.js +1 -0
  22. data/app/pb_kits/playbook/pb_time/time.html.erb +26 -7
  23. data/app/pb_kits/playbook/pb_time/time.rb +2 -0
  24. data/app/pb_kits/playbook/pb_title/_title.scss +2 -1
  25. data/app/pb_kits/playbook/pb_title/_title.tsx +3 -2
  26. data/app/pb_kits/playbook/pb_title/title.rb +10 -3
  27. data/app/pb_kits/playbook/pb_title/title.test.js +3 -3
  28. data/dist/playbook-rails.js +51 -0
  29. data/lib/playbook/forms/builder/multi_level_select_field.rb +12 -0
  30. data/lib/playbook/forms/builder.rb +1 -0
  31. data/lib/playbook/version.rb +2 -2
  32. data/lib/playbook.rb +1 -2
  33. metadata +20 -41
  34. data/app/pb_kits/playbook/pb_docs/kit_api.html.erb +0 -311
  35. data/app/pb_kits/playbook/pb_docs/kit_api.rb +0 -149
  36. data/lib/playbook/markdown/helper.rb +0 -132
  37. data/lib/playbook/markdown.rb +0 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: f27b3e255fc8158201600b6221f2091e84ceb753c83d6d28a045ca256729ec05
4
- data.tar.gz: d2af8d464afa9225d3a3647dc83c2a241f208849978b39312d49f45b74415937
3
+ metadata.gz: 8a8af3ac72c11451f4be580781ae58f226b5fdf05d3303913cb5b34c56198c46
4
+ data.tar.gz: 709922c7bb6f54d2724b2a7d7908d35ff12d03f75e49a92ffa4256b6dd2dc9a9
5
5
  SHA512:
6
- metadata.gz: '018df9baaa8a9b1bc628873a71a2c1a5dde29e228be173511078a8f934cab375c7992f7bdd1b8e50523d401bd3554fb5f491f2fe98daf811c27e88c5ed6534a4'
7
- data.tar.gz: 30cf511832a2ce5021ed6658e76f89c5ecacd040538b67e169e41071eb6451969cc8e0fe71a6855e8a413ae1465837fd122ba26baa07a49788031c21e2c00744
6
+ metadata.gz: c120a0217bae14ba340572dff797a033cdecb6452bd6bc4ea51b86913b679aab65c5059e1de0de79cb0ba39d06ff20d1694dff33e2321123f7566dc50acbe9fb
7
+ data.tar.gz: 7c63e0e8014e3a80327dfec261c315851818253d28e3c3eae8d5eb93bbe4e0ed1946596467491e98cd90e91134cc9687c3c1c3c1ecff062dc05259c7ec9b0cdf
data/app/pb_kits/playbook/pb_date/_date.tsx CHANGED
@@ -19,6 +19,7 @@ type PbDateProps = {
19
19
  showDayOfWeek?: boolean;
20
20
  showIcon?: boolean;
21
21
  size?: "sm" | "md" | "lg";
22
+ unstyled?: boolean;
22
23
  value: string | Date;
23
24
  };
24
25
 
@@ -32,6 +33,7 @@ const PbDate = (props: PbDateProps) => {
32
33
  showDayOfWeek = false,
33
34
  showIcon = false,
34
35
  size = "md",
36
+ unstyled = false,
35
37
  value,
36
38
  } = props;
37
39
 
@@ -52,48 +54,100 @@ const PbDate = (props: PbDateProps) => {
52
54
  );
53
55
 
54
56
  return (
55
- <div {...ariaProps} {...dataProps} className={classes} id={id}>
56
- {size == "md" || size == "lg" ? (
57
- <Title size={4} tag="h4">
58
- {showIcon && (
59
- <Body className="pb_icon_kit_container" color="light" tag="span">
60
- <Icon fixedWidth icon="calendar-alt" />
61
- </Body>
62
- )}
63
-
64
- {showDayOfWeek && (
65
- <>
66
- {weekday}
67
- <Body color="light" tag="span" text=" • " />
68
- </>
69
- )}
70
-
71
- <span>
72
- {month} {day}
73
- </span>
74
- {currentYear != year && <span>{`, ${year}`}</span>}
75
- </Title>
76
- ) : (
77
- <>
78
- {showIcon && (
79
- <Caption className="pb_icon_kit_container" tag="span">
80
- <Icon fixedWidth icon="calendar-alt" size="sm" />
81
- </Caption>
82
- )}
83
-
84
- {showDayOfWeek && (
85
- <>
86
- <Caption tag="div">{weekday}</Caption>
87
- <Caption color="light" tag="div" text=" • " />
88
- </>
89
- )}
90
-
91
- <Caption tag="span">
92
- {month} {day}
93
- {currentYear != year && <>{`, ${year}`}</>}
94
- </Caption>
95
- </>
96
- )}
57
+ <div {...ariaProps}
58
+ {...dataProps}
59
+ className={classes}
60
+ id={id}
61
+ >
62
+ {unstyled
63
+ ? <>
64
+ {showIcon && (
65
+ <div>
66
+ <Icon fixedWidth
67
+ icon="calendar-alt"
68
+ />
69
+ </div>
70
+ )}
71
+
72
+ {showDayOfWeek && (
73
+ <>
74
+ <div>
75
+ {weekday}
76
+ </div>
77
+
78
+ <div>{"•"}</div>
79
+ </>
80
+ )}
81
+
82
+ <span>
83
+ <span>
84
+ {month} {day}
85
+ </span>
86
+
87
+ {currentYear != year && <span>{`, ${year}`}</span>}
88
+ </span>
89
+ </>
90
+ : size == "md" || size == "lg"
91
+ ? (
92
+ <Title size={4}
93
+ tag="h4"
94
+ >
95
+ {showIcon && (
96
+ <Body className="pb_icon_kit_container"
97
+ color="light"
98
+ tag="span"
99
+ >
100
+ <Icon fixedWidth
101
+ icon="calendar-alt"
102
+ />
103
+ </Body>
104
+ )}
105
+
106
+ {showDayOfWeek && (
107
+ <>
108
+ {weekday}
109
+ <Body color="light"
110
+ tag="span"
111
+ text=" • "
112
+ />
113
+ </>
114
+ )}
115
+
116
+ <span>
117
+ {month} {day}
118
+ </span>
119
+ {currentYear != year && <span>{`, ${year}`}</span>}
120
+ </Title>
121
+ )
122
+ : (
123
+ <>
124
+ {showIcon && (
125
+ <Caption className="pb_icon_kit_container"
126
+ tag="span"
127
+ >
128
+ <Icon fixedWidth
129
+ icon="calendar-alt"
130
+ size="sm"
131
+ />
132
+ </Caption>
133
+ )}
134
+
135
+ {showDayOfWeek && (
136
+ <>
137
+ <Caption tag="div">{weekday}</Caption>
138
+ <Caption color="light"
139
+ tag="div"
140
+ text=" • "
141
+ />
142
+ </>
143
+ )}
144
+
145
+ <Caption tag="span">
146
+ {month} {day}
147
+ {currentYear != year && <>{`, ${year}`}</>}
148
+ </Caption>
149
+ </>
150
+ )}
97
151
  </div>
98
152
  );
99
153
  };
data/app/pb_kits/playbook/pb_date/date.html.erb CHANGED
@@ -4,7 +4,28 @@
4
4
  class: object.classname,
5
5
  aria: object.aria) do %>
6
6
 
7
- <% if object.size == "md" %>
7
+ <% if object.unstyled %>
8
+ <!-- icon -->
9
+ <% if object.show_icon %>
10
+ <div><%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %></div>
11
+ <% end %>
12
+
13
+ <!-- day_of_week -->
14
+ <% if object.show_day_of_week %>
15
+ <div><%= object.day_of_week %></div>
16
+ <div>•</div>
17
+ <% end %>
18
+
19
+ <!-- month day, year -->
20
+ <%# if not current year %>
21
+ <% if object.year.to_s == DateTime.now.year.to_s %>
22
+ <span><%= "#{object.month} #{object.day}" %></span>
23
+ <%# if is current year %>
24
+ <% else %>
25
+ <span><%= "#{object.month} #{object.day}, #{object.year}" %></span>
26
+ <% end %>
27
+
28
+ <% elsif object.size == "md" || object.size == "lg" %>
8
29
  <!-- icon -->
9
30
  <% if object.show_icon %>
10
31
  <%= pb_rails("body", props: {
@@ -36,7 +57,6 @@
36
57
  <% end %>
37
58
 
38
59
  <% else %>
39
-
40
60
  <!-- icon -->
41
61
  <% if object.show_icon %>
42
62
  <%= pb_rails("caption", props: {
data/app/pb_kits/playbook/pb_date/date.rb CHANGED
@@ -15,6 +15,8 @@ module Playbook
15
15
  values: %w[lg md sm xs],
16
16
  default: "md"
17
17
  prop :timezone, default: "America/New_York"
18
+ prop :unstyled, type: Playbook::Props::Boolean,
19
+ default: false
18
20
 
19
21
  def classname
20
22
  generate_classname("pb_date_kit", alignment)
data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.html.erb ADDED
@@ -0,0 +1,30 @@
1
+ <%= pb_rails("caption", props: { size: "xs", text: "Example with no year" }) %>
2
+
3
+ <%= pb_rails("date", props: {
4
+ date: Date.today,
5
+ unstyled: true
6
+ }) %>
7
+
8
+ <br />
9
+
10
+ <%= pb_rails("caption", props: { size: "xs", text: "Example with wrapping typography kit" }) %>
11
+
12
+ <%= pb_rails("title", props: { size: 1 }) do %>
13
+ <%= pb_rails("date", props: {
14
+ date: "2012-08-02T15:49:29Z",
15
+ unstyled: true
16
+ }) %>
17
+ <% end %>
18
+
19
+ <br />
20
+
21
+ <%= pb_rails("caption", props: { size: "xs", text: "Example with icon + subcaption" }) %>
22
+
23
+ <%= pb_rails("caption", props: { size: "xs" }) do %>
24
+ <%= pb_rails("date", props: {
25
+ date: "2012-08-02T15:49:29Z",
26
+ show_icon: true,
27
+ unstyled: true,
28
+ show_day_of_week: true
29
+ }) %>
30
+ <% end %>
data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx ADDED
@@ -0,0 +1,47 @@
1
+ import React from 'react'
2
+ import { Caption, Date as FormattedDate, Title } from '../../'
3
+
4
+ const DateUnstyled = (props) => {
5
+ return (
6
+ <>
7
+ <Caption size="xs"
8
+ text="Basic unstyled example"
9
+ />
10
+ <FormattedDate
11
+ unstyled
12
+ value={new Date()}
13
+ {...props}
14
+ />
15
+
16
+ <br />
17
+
18
+ <Caption size="xs"
19
+ text="Example with wrapping typography kit"
20
+ />
21
+ <Title size={1}>
22
+ <FormattedDate
23
+ unstyled
24
+ value="1995-12-25"
25
+ {...props}
26
+ />
27
+ </Title>
28
+
29
+ <br />
30
+
31
+ <Caption size="xs"
32
+ text="Example with icon + subcaption"
33
+ />
34
+ <Caption size="xs">
35
+ <FormattedDate
36
+ showDayOfWeek
37
+ showIcon
38
+ unstyled
39
+ value="1995-12-25"
40
+ {...props}
41
+ />
42
+ </Caption>
43
+ </>
44
+ )
45
+ }
46
+
47
+ export default DateUnstyled
data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.md ADDED
@@ -0,0 +1 @@
1
+ For alternative typography styles, you can pass a boolean prop called `unstyled` to the `Date` kit and wrap it in any of our typography kits (`Title`, `Body`, `Caption`, etc.). This will allow the `Date` kit to inherit any of our typography styles.
data/app/pb_kits/playbook/pb_date/docs/example.yml CHANGED
@@ -1,14 +1,14 @@
1
1
  examples:
2
-
2
+
3
3
  rails:
4
4
  - date_default: Default
5
5
  - date_variants: Variants
6
6
  - date_alignment: Alignment
7
7
  - date_timezone: Timezones
8
-
9
-
8
+ - date_unstyled: Unstyled
9
+
10
10
  react:
11
11
  - date_default: Default
12
12
  - date_variants: Variants
13
13
  - date_alignment: Alignment
14
-
14
+ - date_unstyled: Unstyled
data/app/pb_kits/playbook/pb_date/docs/index.js CHANGED
@@ -1,3 +1,4 @@
1
1
  export { default as DateDefault } from './_date_default.jsx'
2
2
  export { default as DateVariants } from './_date_variants.jsx'
3
3
  export { default as DateAlignment } from './_date_alignment.jsx'
4
+ export { default as DateUnstyled } from './_date_unstyled.jsx'
data/app/pb_kits/playbook/pb_docs/kit_example.rb CHANGED
@@ -5,8 +5,6 @@
5
5
  module Playbook
6
6
  module PbDocs
7
7
  class KitExample < Playbook::KitBase
8
- include Playbook::Markdown::Helper
9
-
10
8
  prop :kit, type: Playbook::Props::String, required: true
11
9
  prop :example_title, type: Playbook::Props::String, required: true
12
10
  prop :example_key, type: Playbook::Props::String, required: true
data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx CHANGED
@@ -10,6 +10,7 @@ type MultiLevelSelectProps = {
10
10
  className?: string;
11
11
  data?: { [key: string]: string };
12
12
  id?: string;
13
+ name?: string;
13
14
  returnAllSelected?: boolean;
14
15
  treeData?: { [key: string]: string }[];
15
16
  onSelect?: (prop: { [key: string]: any }) => void;
@@ -21,6 +22,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
21
22
  className,
22
23
  data = {},
23
24
  id,
25
+ name,
24
26
  returnAllSelected = false,
25
27
  treeData,
26
28
  onSelect = () => {},
@@ -39,17 +41,23 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
39
41
  const [checkedData, setCheckedData] = useState([]);
40
42
 
41
43
  const onChange = (currentNode: { [key: string]: any }) => {
44
+ console.log("currentNode", currentNode)
42
45
  const updatedData = formattedData.map((item: any) => {
43
46
  if (item.id === currentNode._id) {
47
+ console.log("GETTING HERE --------- item", item)
44
48
  if (currentNode.checked) {
49
+ console.log("GETTING HERE --------- currentNode.checked", currentNode.checked)
45
50
  checkIt(item, selectedItems, setSelectedItems, false);
46
51
  } else {
47
52
  unCheckIt(item, selectedItems, setSelectedItems, false);
48
53
  }
49
54
  } else if (item.children) {
55
+ console.log("GETTING HERE --------- item.children", item.children)
50
56
  const foundItem = findItemById(item.children, currentNode._id);
51
57
  if (foundItem) {
58
+ console.log("GETTING HERE --------- foundItem", foundItem)
52
59
  if (currentNode.checked) {
60
+ console.log("GETTING HERE --------- currentNode.checked other one", currentNode.checked)
53
61
  checkIt(foundItem, selectedItems, setSelectedItems, false);
54
62
  if (currentNode._parent) {
55
63
  const parents = getParentAndAncestorsIds(currentNode._parent, formattedData)
@@ -73,10 +81,18 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
73
81
 
74
82
  return item;
75
83
  });
76
-
84
+ console.log("updatedData", updatedData)
77
85
  setFormattedData(updatedData);
78
86
  };
79
87
 
88
+ const updateHiddenInputValue = (value: any) => {
89
+ const hiddenInput = document.querySelector('input#'+id) as HTMLInputElement;
90
+ if (hiddenInput) {
91
+ hiddenInput.value = JSON.stringify(value);
92
+ }
93
+ };
94
+
95
+
80
96
  useEffect(() => {
81
97
  if (returnAllSelected) {
82
98
  const selected = selectedItems.filter(
@@ -95,6 +111,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
95
111
  if (el) {
96
112
  el.setAttribute("data-tree", JSON.stringify(checkedData));
97
113
  }
114
+ updateHiddenInputValue(checkedData);
98
115
  if (returnAllSelected) {
99
116
  onSelect(checkedData);
100
117
  }
@@ -121,6 +138,8 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
121
138
 
122
139
  return (
123
140
  <div {...ariaProps} {...dataProps} className={classes} id={id}>
141
+
142
+ <input type="hidden" id={id} name={name} value="" />
124
143
  {returnAllSelected ? (
125
144
  <MultiSelectHelper
126
145
  treeData={formattedData}
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb CHANGED
@@ -64,9 +64,9 @@
64
64
  }] %>
65
65
 
66
66
 
67
- <%= pb_rails("multi_level_select", props: {
68
- id: "default-multi-level-select",
69
- tree_data:treeData
70
- }) %>
67
+ <%= pb_rails("multi_level_select", props: {
68
+ id: "default-multi-level-select",
69
+ tree_data:treeData
70
+ }) %>
71
71
 
72
72
 
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb ADDED
@@ -0,0 +1,72 @@
1
+ <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
2
+
3
+ <% treeData = [{
4
+ label: "Power Home Remodeling",
5
+ value: "Power Home Remodeling",
6
+ id: "powerhome1",
7
+ expanded: true,
8
+ children: [
9
+ {
10
+ label: "People",
11
+ value: "People",
12
+ id: "people1",
13
+ children: [
14
+ {
15
+ label: "Talent Acquisition",
16
+ value: "Talent Acquisition",
17
+ id: "talent1",
18
+ },
19
+ {
20
+ label: "Business Affairs",
21
+ value: "Business Affairs",
22
+ id: "business1",
23
+ children: [
24
+ {
25
+ label: "Initiatives",
26
+ value: "Initiatives",
27
+ id: "initiative1",
28
+ },
29
+ {
30
+ label: "Learning & Development",
31
+ value: "Learning & Development",
32
+ id: "development1",
33
+ },
34
+ ],
35
+ },
36
+ {
37
+ label: "People Experience",
38
+ value: "People Experience",
39
+ id: "experience1",
40
+ },
41
+ ],
42
+ },
43
+ {
44
+ label: "Contact Center",
45
+ value: "Contact Center",
46
+ id: "contact1",
47
+ children: [
48
+ {
49
+ label: "Appointment Management",
50
+ value: "Appointment Management",
51
+ id: "appointment1",
52
+ },
53
+ {
54
+ label: "Customer Service",
55
+ value: "Customer Service",
56
+ id: "customer1",
57
+ },
58
+ {
59
+ label: "Energy",
60
+ value: "Energy",
61
+ id: "energy1",
62
+ },
63
+ ],
64
+ },
65
+ ],
66
+ }] %>
67
+
68
+ <%= form.multi_level_select :example, props: {id: "with-form-multi-level-select", tree_data: treeData, return_all_selected: true } %>
69
+ <%= form.actions do |action| %>
70
+ <%= action.button props: { type: "submit", text: "Submit", variant: "primary", margin_top: "lg" } %>
71
+ <% end %>
72
+ <% end %>
data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml CHANGED
@@ -2,6 +2,7 @@ examples:
2
2
  rails:
3
3
  - multi_level_select_default: Default
4
4
  - multi_level_select_return_all_selected: Return All Selected
5
+ - multi_level_select_with_form: With Form
5
6
 
6
7
  react:
7
8
  - multi_level_select_default: Default
data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb CHANGED
@@ -3,6 +3,8 @@
3
3
  module Playbook
4
4
  module PbMultiLevelSelect
5
5
  class MultiLevelSelect < Playbook::KitBase
6
+ prop :id
7
+ prop :name
6
8
  prop :tree_data, type: Playbook::Props::Array,
7
9
  default: []
8
10
  prop :return_all_selected, type: Playbook::Props::Boolean,
@@ -15,6 +17,7 @@ module Playbook
15
17
  def multi_level_select_options
16
18
  {
17
19
  id: id,
20
+ name: name,
18
21
  treeData: tree_data,
19
22
  returnAllSelected: return_all_selected,
20
23
  }
data/app/pb_kits/playbook/pb_time/_time.tsx CHANGED
@@ -20,6 +20,7 @@ type TimeProps = {
20
20
  size?: "md" | "sm";
21
21
  showTimezone?: boolean;
22
22
  timeZone?: string;
23
+ unstyled?: boolean;
23
24
  } & GlobalProps
24
25
 
25
26
  const Time = (props: TimeProps) => {
@@ -30,8 +31,10 @@ const Time = (props: TimeProps) => {
30
31
  showIcon,
31
32
  size,
32
33
  timeZone,
34
+ unstyled = false,
33
35
  showTimezone = true,
34
36
  } = props;
37
+
35
38
  const classes = classnames(
36
39
  buildCss("pb_time_kit", align, size),
37
40
  globalProps(props),
@@ -43,46 +46,79 @@ const Time = (props: TimeProps) => {
43
46
  return (
44
47
  <div className={classes}>
45
48
  {showIcon && (
46
- <>
47
- <Body color="light" tag="span">
48
- <Icon fixedWidth icon="clock" size={size === "md" ? "" : "sm"} />
49
- </Body>{" "}
50
- </>
51
- )}
52
-
53
- <time dateTime={date}>
54
- <span>
55
- {size === "md" ? (
56
- <>
57
- <Body
58
- className="pb_time"
59
- tag="span"
60
- text={dateTimestamp.toTimeWithMeridian()}
61
- />{" "}
62
- {showTimezone && (
63
- <Body
64
- color="light"
65
- tag="span"
66
- text={dateTimestamp.toTimezone()}
49
+ unstyled
50
+ ? (
51
+ <span>
52
+ <Icon fixedWidth
53
+ icon="clock"
67
54
  />
68
- )}
69
- </>
70
- ) : (
55
+ {" "}
56
+ </span>
57
+ )
58
+ : (
71
59
  <>
72
- <Caption
73
- color="light"
74
- tag="span"
75
- text={dateTimestamp.toTimeWithMeridian()}
76
- />{" "}
77
- {showTimezone && (
78
- <Caption
79
- color="light"
60
+ <Body color="light"
80
61
  tag="span"
81
- text={dateTimestamp.toTimezone()}
62
+ >
63
+ <Icon fixedWidth
64
+ icon="clock"
65
+ size={size === "md" ? "" : "sm"}
82
66
  />
83
- )}
67
+ {" "}
68
+ </Body>
84
69
  </>
85
- )}
70
+ )
71
+ )}
72
+
73
+ <time dateTime={date}>
74
+ <span>
75
+ {unstyled
76
+ ? (
77
+ <>
78
+ <span>
79
+ {dateTimestamp.toTimeWithMeridian()}
80
+ </span>
81
+ {" "}
82
+ {showTimezone && (
83
+ <span>
84
+ {dateTimestamp.toTimezone()}
85
+ </span>
86
+ )}
87
+ </>
88
+ )
89
+ : size === "md"
90
+ ? (
91
+ <>
92
+ <Body
93
+ className="pb_time"
94
+ tag="span"
95
+ text={dateTimestamp.toTimeWithMeridian()}
96
+ />{" "}
97
+ {showTimezone && (
98
+ <Body
99
+ color="light"
100
+ tag="span"
101
+ text={dateTimestamp.toTimezone()}
102
+ />
103
+ )}
104
+ </>
105
+ )
106
+ : (
107
+ <>
108
+ <Caption
109
+ color="light"
110
+ tag="span"
111
+ text={dateTimestamp.toTimeWithMeridian()}
112
+ />{" "}
113
+ {showTimezone && (
114
+ <Caption
115
+ color="light"
116
+ tag="span"
117
+ text={dateTimestamp.toTimezone()}
118
+ />
119
+ )}
120
+ </>
121
+ )}
86
122
  </span>
87
123
  </time>
88
124
  </div>