playbook_ui 5.5.1 → 6.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (68) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +0 -2
  3. data/app/pb_kits/playbook/data/menu.yml +0 -2
  4. data/app/pb_kits/playbook/index.js +0 -1
  5. data/app/pb_kits/playbook/packs/examples.js +0 -4
  6. data/app/pb_kits/playbook/pb_button/_button.jsx +2 -0
  7. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.html.erb +21 -11
  8. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss +10 -0
  9. data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +14 -0
  10. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb +26 -0
  11. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb +20 -0
  12. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb +22 -0
  13. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +5 -1
  14. data/app/pb_kits/playbook/pb_image/_image.html.erb +2 -1
  15. data/app/pb_kits/playbook/pb_image/_image.jsx +31 -8
  16. data/app/pb_kits/playbook/pb_image/docs/_default_image.jsx +3 -3
  17. data/app/pb_kits/playbook/pb_label_value/_label_value.html.erb +20 -2
  18. data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +109 -5
  19. data/app/pb_kits/playbook/pb_label_value/_label_value.scss +0 -10
  20. data/app/pb_kits/playbook/pb_label_value/docs/_description.md +3 -1
  21. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.html.erb +39 -0
  22. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.jsx +50 -0
  23. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.md +1 -0
  24. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_dark.html.erb +43 -0
  25. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_dark.jsx +54 -0
  26. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples.html.erb +72 -0
  27. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples.jsx +92 -0
  28. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples_dark.html.erb +80 -0
  29. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples_dark.jsx +101 -0
  30. data/app/pb_kits/playbook/pb_label_value/docs/example.yml +9 -0
  31. data/app/pb_kits/playbook/pb_label_value/docs/index.js +5 -0
  32. data/app/pb_kits/playbook/pb_label_value/label_value.rb +19 -2
  33. data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.jsx +5 -1
  34. data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss +12 -1
  35. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.html.erb +9 -0
  36. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.jsx +26 -0
  37. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.md +1 -0
  38. data/app/pb_kits/playbook/pb_progress_simple/docs/example.yml +2 -0
  39. data/app/pb_kits/playbook/pb_progress_simple/docs/index.js +2 -0
  40. data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb +8 -1
  41. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.html.erb +2 -2
  42. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx +24 -10
  43. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss +3 -1
  44. data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.rb +6 -0
  45. data/app/pb_kits/playbook/pb_title/_title.scss +3 -4
  46. data/app/pb_kits/playbook/pb_title/title.rb +2 -2
  47. data/app/pb_kits/playbook/plugins/pb_chart.js +49 -4
  48. data/lib/playbook/version.rb +1 -1
  49. metadata +18 -23
  50. data/app/pb_kits/playbook/pb_installer/_installer.html.erb +0 -16
  51. data/app/pb_kits/playbook/pb_installer/_installer.jsx +0 -54
  52. data/app/pb_kits/playbook/pb_installer/_installer.scss +0 -7
  53. data/app/pb_kits/playbook/pb_installer/docs/_installer_default.html.erb +0 -8
  54. data/app/pb_kits/playbook/pb_installer/docs/_installer_default.jsx +0 -16
  55. data/app/pb_kits/playbook/pb_installer/docs/example.yml +0 -9
  56. data/app/pb_kits/playbook/pb_installer/docs/index.js +0 -1
  57. data/app/pb_kits/playbook/pb_installer/installer.rb +0 -18
  58. data/app/pb_kits/playbook/pb_label_value/docs/index.html.erb +0 -25
  59. data/app/pb_kits/playbook/pb_logistic/_logistic.html.erb +0 -20
  60. data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +0 -111
  61. data/app/pb_kits/playbook/pb_logistic/_logistic.scss +0 -7
  62. data/app/pb_kits/playbook/pb_logistic/docs/_logistic_dark.html.erb +0 -27
  63. data/app/pb_kits/playbook/pb_logistic/docs/_logistic_dark.jsx +0 -39
  64. data/app/pb_kits/playbook/pb_logistic/docs/_logistic_default.html.erb +0 -24
  65. data/app/pb_kits/playbook/pb_logistic/docs/_logistic_default.jsx +0 -35
  66. data/app/pb_kits/playbook/pb_logistic/docs/example.yml +0 -11
  67. data/app/pb_kits/playbook/pb_logistic/docs/index.js +0 -2
  68. data/app/pb_kits/playbook/pb_logistic/logistic.rb +0 -31
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 7f4ee46775d0d56664c1a9aca3fe5524b0956af82b1067d79104529064855fae
4
- data.tar.gz: 0e36fa5454385af4d344c9cde205c4f9392695f0dbb6e3721eb4447b90871fcd
3
+ metadata.gz: 9700bd77dc615c8c117f7244a03bc5ebed4afe8d0d548de5f3e1ec419128feb1
4
+ data.tar.gz: c062567218f3b82cc8f073b4ff33a125ca6c9e1d9c42e7dc5dd6561e4264eb04
5
5
  SHA512:
6
- metadata.gz: c490cc3202290171c33bff9a68062bf888f0110c02189550eaeafa1f9b3f9e07c3e04ae9bad665aa78095cd5f8f8a9b2564b4dabb0d6b549b0ad11bd12d0c587
7
- data.tar.gz: 5ca5802c390a462833194cb94aaaeaf7dccd10e72174a1abc826b17f19b7c028dab3bb0c7c23c2038e458574f942f826e37a1b742949c376135723196309b565
6
+ metadata.gz: efea33e1f3ff87bad12881c940db6cfb32e36fb8892155449e993b816445df494f25f5af712b9710389301390ca42363ee76ecffe8602ac9ba23d0ab8bf72164
7
+ data.tar.gz: 386a4567b8677960ee19e95b18d7b968520336ac035a60865aba7ff88beb645390c63143fd7181a81b69a4a27519ae6c59cdfaec0159e8c97e2a6fa511658bd9
@@ -33,7 +33,6 @@
33
33
  @import 'pb_icon_circle/icon_circle';
34
34
  @import 'pb_icon_value/icon_value';
35
35
  @import 'pb_image/image';
36
- @import 'pb_installer/installer';
37
36
  @import 'pb_label_pill/label_pill';
38
37
  @import 'pb_label_value/label_value';
39
38
  @import 'pb_layout/layout';
@@ -41,7 +40,6 @@
41
40
  @import 'pb_line_graph/line_graph';
42
41
  @import 'pb_list/list';
43
42
  @import 'pb_loading_inline/loading_inline';
44
- @import 'pb_logistic/logistic';
45
43
  @import 'pb_message/message';
46
44
  @import 'pb_multiple_users/multiple_users';
47
45
  @import 'pb_multiple_users_stacked/multiple_users_stacked';
@@ -42,11 +42,9 @@ kits:
42
42
  - icon_circle
43
43
  - icon_value
44
44
  - image
45
- - installer
46
45
  - layout
47
46
  - list
48
47
  - loading_inline
49
- - logistic
50
48
  - multiple_users
51
49
  - multiple_users_stacked
52
50
  - nav
@@ -40,7 +40,6 @@ export LineGraph from './pb_line_graph/_line_graph.jsx'
40
40
  export List from './pb_list/_list.jsx'
41
41
  export ListItem from './pb_list/_list_item.jsx'
42
42
  export LoadingInline from './pb_loading_inline/_loading_inline.jsx'
43
- export Logistic from './pb_logistic/_logistic.jsx'
44
43
  export Message from './pb_message/_message.jsx'
45
44
  export MultipleUsers from './pb_multiple_users/_multiple_users.jsx'
46
45
  export MultipleUsersStacked from './pb_multiple_users_stacked/_multiple_users_stacked.jsx'
@@ -45,7 +45,6 @@ import * as Icon from 'pb_icon/docs'
45
45
  import * as IconCircle from 'pb_icon_circle/docs'
46
46
  import * as IconValue from 'pb_icon_value/docs'
47
47
  import * as Image from 'pb_image/docs'
48
- import * as Installer from 'pb_installer/docs'
49
48
  import * as LabelPill from 'pb_label_pill/docs'
50
49
  import * as LabelValue from 'pb_label_value/docs'
51
50
  import * as Layout from 'pb_layout/docs'
@@ -53,7 +52,6 @@ import * as Legend from 'pb_legend/docs'
53
52
  import * as LineGraph from 'pb_line_graph/docs'
54
53
  import * as List from 'pb_list/docs'
55
54
  import * as LoadingInline from 'pb_loading_inline/docs'
56
- import * as Logistic from 'pb_logistic/docs'
57
55
  import * as Message from 'pb_message/docs'
58
56
  import * as MultipleUsers from 'pb_multiple_users/docs'
59
57
  import * as MultipleUsersStacked from 'pb_multiple_users_stacked/docs'
@@ -125,7 +123,6 @@ WebpackerReact.setup({
125
123
  ...IconCircle,
126
124
  ...IconValue,
127
125
  ...Image,
128
- ...Installer,
129
126
  ...LabelPill,
130
127
  ...LabelValue,
131
128
  ...Layout,
@@ -133,7 +130,6 @@ WebpackerReact.setup({
133
130
  ...LineGraph,
134
131
  ...List,
135
132
  ...LoadingInline,
136
- ...Logistic,
137
133
  ...Message,
138
134
  ...MultipleUsers,
139
135
  ...MultipleUsersStacked,
@@ -72,6 +72,7 @@ const Button = (props: ButtonPropTypes) => {
72
72
  const {
73
73
  children,
74
74
  className,
75
+ disabled,
75
76
  icon = null,
76
77
  id,
77
78
  loading = false,
@@ -120,6 +121,7 @@ const Button = (props: ButtonPropTypes) => {
120
121
  <button
121
122
  {...buttonAria}
122
123
  className={css}
124
+ disabled={disabled}
123
125
  id={id}
124
126
  onClick={onClick}
125
127
  type={htmlType}
@@ -1,12 +1,22 @@
1
- <%= content_tag(:div, "",
2
- aria: object.aria,
3
- id: object.id,
4
- data: object.data,
5
- class: object.classname) %>
6
- <% content_for :pb_js do %>
7
- <%= javascript_tag do %>
8
- window.addEventListener('DOMContentLoaded', function() {
9
- new pbChart('.selector', <%= object.chart_options %>)
10
- })
1
+ <div id="wrapper-circle-chart-<%= object.id %>">
2
+ <%= content_tag(:div, "",
3
+ aria: object.aria,
4
+ id: object.id,
5
+ data: object.data,
6
+ class: object.classname) do %>
7
+ <% content_for :pb_js do %>
8
+ <%= javascript_tag do %>
9
+ window.addEventListener('DOMContentLoaded', function() {
10
+ new pbChart('.selector', <%= object.chart_options %>)
11
+
12
+ });
13
+ <% end %>
14
+ <% end %>
11
15
  <% end %>
12
- <% end %>
16
+
17
+ <% if object.children %>
18
+ <div class="pb_circle_chart_block">
19
+ <%= capture(&object.children) %>
20
+ </div>
21
+ <% end %>
22
+ </div>
@@ -4,3 +4,13 @@
4
4
  .pb_circle_chart {
5
5
 
6
6
  }
7
+
8
+ .pb_circle_chart_block {
9
+ position:absolute;
10
+ display: flex;
11
+ justify-content: center;
12
+ align-items: center;
13
+ z-index: 1;
14
+ text-align: center;
15
+ pointer-events: none;
16
+ }
@@ -29,6 +29,10 @@ module Playbook
29
29
  prop :use_html, type: Playbook::Props::Boolean, default: false
30
30
  prop :legend, type: Playbook::Props::Boolean, default: false
31
31
  prop :title, default: ''
32
+ prop :rounded, type: Playbook::Props::Boolean, default: false
33
+ prop :colors, type: Playbook::Props::Array,
34
+ default: []
35
+
32
36
 
33
37
  def chart_type
34
38
  style == "variablepie" ? "variablepie" : "pie"
@@ -50,12 +54,22 @@ module Playbook
50
54
  when "md"
51
55
  "50%"
52
56
  end
57
+ end
58
+
59
+ def rounded_border_width
60
+ rounded ? 20 : nil
61
+ end
53
62
 
63
+ def rounded_border_color
64
+ rounded == true ? 'null' : nil
54
65
  end
55
66
 
56
67
  def chart_options
57
68
  {
58
69
  id: id,
70
+ colors: colors,
71
+ borderColor: rounded_border_color,
72
+ borderWidth: rounded_border_width,
59
73
  chartData: chart_data_formatted,
60
74
  title: title,
61
75
  type: chart_type,
@@ -0,0 +1,26 @@
1
+ <% data_51 = [{
2
+ name: 'Waiting for Calls',
3
+ value: 41,
4
+ },
5
+ {
6
+ name: 'On Call',
7
+ value: 49,
8
+ },
9
+ {
10
+ name: 'After call',
11
+ value: 10,
12
+ }
13
+ ] %>
14
+
15
+ <br><br>
16
+
17
+ <%= pb_rails("circle_chart", props: {
18
+ chart_data: data_51,
19
+ id: "with-a-block-2",
20
+ rounded: true,
21
+ }) do %>
22
+ <%= pb_rails('title', props: {text: "83", size: 1, tag: 'div'}) %>
23
+ <% end %>
24
+
25
+
26
+
@@ -0,0 +1,20 @@
1
+ <% data_set = [{
2
+ name: 'Waiting for Calls',
3
+ value: 41,
4
+ },
5
+ {
6
+ name: 'On Call',
7
+ value: 49,
8
+ },
9
+ {
10
+ name: 'After call',
11
+ value: 10,
12
+ }
13
+ ] %>
14
+
15
+
16
+ <%= pb_rails("circle_chart", props: {
17
+ chart_data: data_set,
18
+ id: "default-test-colors",
19
+ colors: ['data-6', 'data-4', 'data-2']
20
+ }) %>
@@ -0,0 +1,22 @@
1
+ <% data_rounded = [{
2
+ name: 'Waiting for Calls',
3
+ value: 20,
4
+ },
5
+ {
6
+ name: 'On Call',
7
+ value: 49,
8
+ },
9
+ {
10
+ name: 'After call',
11
+ value: 10,
12
+ }
13
+ ] %>
14
+
15
+
16
+ <%= pb_rails("circle_chart", props: {
17
+ chart_data: data_rounded,
18
+ id: "default-test-rounded",
19
+ inner_size: "lg",
20
+ rounded: true,
21
+
22
+ }) %>
@@ -2,8 +2,12 @@ examples:
2
2
 
3
3
  rails:
4
4
  - circle_chart_default: Default Style
5
+ - circle_chart_rounded: Rounded Corners
6
+ - circle_chart_block: Accepts Any Block
7
+ - circle_chart_colors: Color Overrides
5
8
  - circle_chart_with_labels: Data Labels
6
9
  - circle_chart_with_legend_kit: Legend
7
10
  - circle_chart_with_title: Title
8
- - circle_chart_inner_sizes: Inner Circle Size Options
11
+ - circle_chart_inner_sizes: Inner Circle Size Options
12
+
9
13
 
@@ -3,4 +3,5 @@
3
3
  data: object.data.merge(src: object.url),
4
4
  class: object.classname,
5
5
  aria: object.aria,
6
- alt: object.alt) %>
6
+ src: object.url,
7
+ alt: object.alt) %>
@@ -2,21 +2,44 @@
2
2
 
3
3
  import React from 'react'
4
4
  import classnames from 'classnames'
5
+ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
5
6
  import { spacing } from '../utilities/spacing.js'
6
7
 
7
8
  type ImageProps = {
8
- url: string,
9
- alt?: string,
9
+ alt?: String,
10
+ aria?: object,
11
+ className?: String,
12
+ data?: object,
13
+ id?: String,
14
+ url: String,
10
15
  }
11
16
 
12
17
  const Image = (props: ImageProps) => {
13
- const { alt = '', url = '' } = props
18
+ const {
19
+ alt = '',
20
+ aria = {},
21
+ className,
22
+ data = {},
23
+ id,
24
+ url = '',
25
+ } = props
26
+
27
+ const ariaProps = buildAriaProps(aria)
28
+ const classes = classnames(buildCss('pb_image lazyload blur_up'), className, spacing(props))
29
+ const dataProps = buildDataProps(data)
30
+
14
31
  return (
15
- <img
16
- alt={alt}
17
- className={classnames('pb_image_kit lazyload blur_up', spacing(props))}
18
- data-src={url}
19
- />
32
+ <div>
33
+ <img
34
+ {...ariaProps}
35
+ {...dataProps}
36
+ alt={alt}
37
+ className={classes}
38
+ data-src={url}
39
+ id={id}
40
+ src={url}
41
+ />
42
+ </div>
20
43
  )
21
44
  }
22
45
 
@@ -3,9 +3,9 @@ import { Image } from '../../'
3
3
 
4
4
  const DefaultImage = () => {
5
5
  return (
6
- <div>
7
- <Image url="https://unsplash.it/500/400/?image=634" />
8
- </div>
6
+ <Image
7
+ url="https://unsplash.it/500/400/?image=634"
8
+ />
9
9
  )
10
10
  }
11
11
 
@@ -3,6 +3,24 @@
3
3
  id: object.id,
4
4
  data: object.data,
5
5
  class: object.classname) do %>
6
- <%= pb_rails("caption", props: { text: object.label }) %>
7
- <%= pb_rails("body", props: { text: object.value }) %>
6
+ <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>
7
+ <% if object.variant == "details" %>
8
+ <%= pb_rails("flex", props: {inline: true, vertical: "center"}) do %>
9
+ <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
10
+ <%= pb_rails("icon", props: { icon: object.icon, fixed_width: true, margin_right: "xs", }) if object.icon.present? %>
11
+ <% end %>
12
+ <%= pb_rails("body", props: { text: object.description, color: "light", margin_right: "xs", dark: object.dark }) if object.description.present? %>
13
+ <% if object.active %>
14
+ <%= pb_rails("flex", props: {inline: true, vertical: "center"}) do %>
15
+ <%= pb_rails("title", props: { text: object.title, tag: "h4", size: 4, variant: "link", dark: object.dark }) if object.title.present? %>
16
+ <%= pb_rails("title", props: { text: object.date_element, tag: "span", size: 4, margin_left: "xs", variant: "link", dark: object.dark }) if object.date.present? %>
17
+ <% end %>
18
+ <% else %>
19
+ <%= pb_rails("title", props: { text: object.title, tag: "h4", size: 4, dark: object.dark }) if object.title.present? %>
20
+ <%= pb_rails("title", props: { text: object.date_element, tag: "span", size: 4, margin_left: "xs", dark: object.dark }) if object.date.present? %>
21
+ <% end %>
22
+ <% end %>
23
+ <% else %>
24
+ <%= pb_rails("body", props: { text: object.value, dark: object.dark }) if object.value.present? %>
25
+ <% end %>
8
26
  <% end %>
@@ -2,8 +2,9 @@
2
2
 
3
3
  import React from 'react'
4
4
  import classnames from 'classnames'
5
+ import DateTime from '../pb_kit/dateTime.js'
5
6
  import { buildAriaProps, buildDataProps } from '../utilities/props'
6
- import { Body, Caption } from '../'
7
+ import { Body, Caption, Flex, Icon, Title } from '../'
7
8
  import { spacing } from '../utilities/spacing.js'
8
9
 
9
10
  type LabelValueProps = {
@@ -13,21 +14,42 @@ type LabelValueProps = {
13
14
  data?: object,
14
15
  id?: String,
15
16
  label: String,
16
- value: String,
17
+ value?: String,
18
+ variant?: "default" | "details",
19
+ icon?: String,
20
+ description?: String,
21
+ title?: String,
22
+ date?: Date,
23
+ active?: Boolean
24
+ }
25
+
26
+ const dateString = (value: DateTime) => {
27
+ const month = value.toMonthNum()
28
+ const day = value.toDay()
29
+
30
+ return ` · ${month}/${day}`
17
31
  }
18
32
 
19
33
  const LabelValue = (props: LabelValueProps) => {
20
34
  const {
35
+ active = false,
21
36
  aria = {},
22
37
  className,
23
38
  dark = false,
24
39
  data = {},
40
+ date,
41
+ description,
42
+ icon,
25
43
  id,
26
44
  label,
27
- value } = props
45
+ title,
46
+ value,
47
+ variant = 'default',
48
+ } = props
28
49
 
29
50
  const ariaProps = buildAriaProps(aria)
30
51
  const dataProps = buildDataProps(data)
52
+ const formattedDate = new DateTime({ value: date })
31
53
  const themeStyle = dark === true ? '_dark' : ''
32
54
  const css = classnames(
33
55
  ['pb_label_value_kit' + themeStyle, className],
@@ -39,10 +61,92 @@ const LabelValue = (props: LabelValueProps) => {
39
61
  {...ariaProps}
40
62
  {...dataProps}
41
63
  className={css}
64
+ dark={dark}
65
+ description={description}
66
+ icon={icon}
42
67
  id={id}
68
+ title={title}
43
69
  >
44
- <Caption text={label} />
45
- <Body text={value} />
70
+ <Caption
71
+ dark={dark}
72
+ text={label}
73
+ />
74
+ <If condition={variant === 'details'}>
75
+ <Flex
76
+ inline
77
+ vertical="center"
78
+ >
79
+ <If condition={icon}>
80
+ <Body
81
+ color="light"
82
+ dark={dark}
83
+ marginRight="xs"
84
+ >
85
+ <Icon
86
+ dark={dark}
87
+ fixedWidth
88
+ icon={icon}
89
+ />
90
+ </Body>
91
+ </If>
92
+ <If condition={description}>
93
+ <Body
94
+ color="light"
95
+ dark={dark}
96
+ marginRight="xs"
97
+ text={description}
98
+ />
99
+ </If>
100
+ <Choose>
101
+ <When condition={active === true}>
102
+ <Flex
103
+ inline
104
+ vertical="center"
105
+ >
106
+ <If condition={title}>
107
+ <Title
108
+ dark={dark}
109
+ size={4}
110
+ text={title}
111
+ variant="link"
112
+ />
113
+ </If>
114
+ <If condition={date}>
115
+ <Title
116
+ dark={dark}
117
+ marginLeft="xs"
118
+ size={4}
119
+ text={' ' + dateString(formattedDate)}
120
+ variant="link"
121
+ />
122
+ </If>
123
+ </Flex>
124
+ </When>
125
+ <Otherwise>
126
+ <If condition={title}>
127
+ <Title
128
+ dark={dark}
129
+ size={4}
130
+ text={title}
131
+ />
132
+ </If>
133
+ <If condition={date}>
134
+ <Title
135
+ dark={dark}
136
+ marginLeft="xs"
137
+ size={4}
138
+ text={' ' + dateString(formattedDate)}
139
+ />
140
+ </If>
141
+ </Otherwise>
142
+ </Choose>
143
+ </Flex>
144
+ <Else />
145
+ <Body
146
+ dark={dark}
147
+ text={value}
148
+ />
149
+ </If>
46
150
  </div>
47
151
  )
48
152
  }