playbook_ui 5.5.1.pre.alpha4 → 6.0.1.pre.alpha4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (92) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +1 -2
  3. data/app/pb_kits/playbook/data/menu.yml +1 -2
  4. data/app/pb_kits/playbook/index.js +2 -1
  5. data/app/pb_kits/playbook/packs/examples.js +2 -4
  6. data/app/pb_kits/playbook/pb_button/_button.jsx +2 -0
  7. data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb +38 -0
  8. data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +101 -0
  9. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +846 -0
  10. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +41 -0
  11. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +91 -0
  12. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb +1 -0
  13. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx +12 -0
  14. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +24 -0
  15. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +30 -0
  16. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb +43 -0
  17. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx +48 -0
  18. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +4 -0
  19. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +13 -0
  20. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb +19 -0
  21. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx +25 -0
  22. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.html.erb +4 -0
  23. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.jsx +13 -0
  24. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb +14 -0
  25. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.jsx +22 -0
  26. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +4 -0
  27. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +13 -0
  28. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +23 -0
  29. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +8 -0
  30. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +2 -1
  31. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +2 -1
  32. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -0
  33. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +3 -1
  34. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb +3 -1
  35. data/app/pb_kits/playbook/pb_form/form_builder.rb +1 -0
  36. data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +41 -0
  37. data/app/pb_kits/playbook/pb_image/_image.html.erb +2 -1
  38. data/app/pb_kits/playbook/pb_image/_image.jsx +31 -8
  39. data/app/pb_kits/playbook/pb_image/docs/_default_image.jsx +3 -3
  40. data/app/pb_kits/playbook/pb_label_value/_label_value.html.erb +20 -2
  41. data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +109 -5
  42. data/app/pb_kits/playbook/pb_label_value/_label_value.scss +0 -10
  43. data/app/pb_kits/playbook/pb_label_value/docs/_description.md +3 -1
  44. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.html.erb +39 -0
  45. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.jsx +50 -0
  46. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.md +1 -0
  47. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_dark.html.erb +43 -0
  48. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_dark.jsx +54 -0
  49. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples.html.erb +72 -0
  50. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples.jsx +92 -0
  51. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples_dark.html.erb +80 -0
  52. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples_dark.jsx +101 -0
  53. data/app/pb_kits/playbook/pb_label_value/docs/example.yml +9 -0
  54. data/app/pb_kits/playbook/pb_label_value/docs/index.js +5 -0
  55. data/app/pb_kits/playbook/pb_label_value/label_value.rb +19 -2
  56. data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.jsx +5 -1
  57. data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss +12 -1
  58. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.html.erb +9 -0
  59. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.jsx +26 -0
  60. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.md +1 -0
  61. data/app/pb_kits/playbook/pb_progress_simple/docs/example.yml +2 -0
  62. data/app/pb_kits/playbook/pb_progress_simple/docs/index.js +2 -0
  63. data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb +8 -1
  64. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.html.erb +2 -2
  65. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx +24 -10
  66. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss +3 -1
  67. data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.rb +6 -0
  68. data/app/pb_kits/playbook/pb_title/_title.scss +3 -4
  69. data/app/pb_kits/playbook/pb_title/title.rb +2 -2
  70. data/app/pb_kits/playbook/plugins/pb_chart.js +13 -19
  71. data/app/pb_kits/playbook/vendor.js +6 -0
  72. data/lib/playbook/version.rb +1 -1
  73. metadata +38 -21
  74. data/app/pb_kits/playbook/pb_installer/_installer.html.erb +0 -16
  75. data/app/pb_kits/playbook/pb_installer/_installer.jsx +0 -54
  76. data/app/pb_kits/playbook/pb_installer/_installer.scss +0 -7
  77. data/app/pb_kits/playbook/pb_installer/docs/_installer_default.html.erb +0 -8
  78. data/app/pb_kits/playbook/pb_installer/docs/_installer_default.jsx +0 -16
  79. data/app/pb_kits/playbook/pb_installer/docs/example.yml +0 -9
  80. data/app/pb_kits/playbook/pb_installer/docs/index.js +0 -1
  81. data/app/pb_kits/playbook/pb_installer/installer.rb +0 -18
  82. data/app/pb_kits/playbook/pb_label_value/docs/index.html.erb +0 -25
  83. data/app/pb_kits/playbook/pb_logistic/_logistic.html.erb +0 -20
  84. data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +0 -111
  85. data/app/pb_kits/playbook/pb_logistic/_logistic.scss +0 -7
  86. data/app/pb_kits/playbook/pb_logistic/docs/_logistic_dark.html.erb +0 -27
  87. data/app/pb_kits/playbook/pb_logistic/docs/_logistic_dark.jsx +0 -39
  88. data/app/pb_kits/playbook/pb_logistic/docs/_logistic_default.html.erb +0 -24
  89. data/app/pb_kits/playbook/pb_logistic/docs/_logistic_default.jsx +0 -35
  90. data/app/pb_kits/playbook/pb_logistic/docs/example.yml +0 -11
  91. data/app/pb_kits/playbook/pb_logistic/docs/index.js +0 -2
  92. data/app/pb_kits/playbook/pb_logistic/logistic.rb +0 -31
@@ -1,16 +0,0 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname) do %>
5
- <%= pb_rails("body", props: {color: "light" }) do %>
6
- <%= pb_rails("caption", props: { text: "Installer" }) %>
7
- <%= pb_rails("icon", props: { icon: "truck", fixed_width: true }) %>
8
- <% if object.link %>
9
- <%= link_to object.link, class: "pb_installer_kit_links" do %>
10
- <%= pb_rails("title", props: { text: object.project_name, tag: "span", size: 4 }) %>
11
- <% end %>
12
- <% else %>
13
- <%= pb_rails("title", props: { text: object.project_name, tag: "span", size: 4 }) %>
14
- <% end %>
15
- <% end %>
16
- <% end %>
@@ -1,54 +0,0 @@
1
- /* @flow */
2
-
3
- import React from 'react'
4
- import classnames from 'classnames'
5
- import { Body, Caption, Icon, Title } from '../'
6
-
7
- const renderProjectName = (link, projectName) => {
8
- if (link) {
9
- return (
10
- <a
11
- className="pb_installer_kit_links"
12
- href={link}
13
- >
14
- <Title
15
- size={4}
16
- tag="span"
17
- text={projectName}
18
- />
19
- </a>
20
- )
21
- }
22
-
23
- return (
24
- <Title
25
- size={4}
26
- tag="span"
27
- text={projectName}
28
- />
29
- )
30
- }
31
-
32
- type InstallerProps = {
33
- link?: String,
34
- projectName: String,
35
- }
36
-
37
- const Installer = ({
38
- link,
39
- projectName,
40
- }: InstallerProps) => (
41
- <div className={classnames('pb_installer_kit')}>
42
- <Body color="light">
43
- <Caption text="Installer" />
44
- <Icon
45
- fixedwidth
46
- icon="truck"
47
- />
48
- {' '}
49
- {renderProjectName(link, projectName)}
50
- </Body>
51
- </div>
52
- )
53
-
54
- export default Installer
@@ -1,7 +0,0 @@
1
- [class^=pb_installer_kit] {
2
- .pb_installer_kit_links {
3
- span {
4
- color: $data_1;
5
- }
6
- }
7
- }
@@ -1,8 +0,0 @@
1
- <%= pb_rails("installer", props: {
2
- project_name: "JD Installations LLC"
3
- }) %>
4
- <br /><br />
5
- <%= pb_rails("installer", props: {
6
- link: "#",
7
- project_name: "JD Installations LLC"
8
- }) %>
@@ -1,16 +0,0 @@
1
- import React from 'react'
2
- import Installer from '../_installer.jsx'
3
-
4
- const InstallerDefault = () => (
5
- <div>
6
- <Installer projectName="JD Installations LLC" />
7
- <br />
8
- <br />
9
- <Installer
10
- link="#"
11
- projectName="JD Installations LLC"
12
- />
13
- </div>
14
- )
15
-
16
- export default InstallerDefault
@@ -1,9 +0,0 @@
1
- examples:
2
-
3
- rails:
4
- - installer_default: Default
5
-
6
-
7
- react:
8
- - installer_default: Default
9
-
@@ -1 +0,0 @@
1
- export { default as InstallerDefault } from './_installer_default.jsx'
@@ -1,18 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Playbook
4
- module PbInstaller
5
- class Installer
6
- include Playbook::Props
7
-
8
- partial "pb_installer/installer"
9
-
10
- prop :link
11
- prop :project_name
12
-
13
- def classname
14
- generate_classname("pb_installer_kit")
15
- end
16
- end
17
- end
18
- end
@@ -1,25 +0,0 @@
1
- <div class="container-fluid mt-5">
2
- <%= render partial: 'partials/filter-search' %>
3
- <%= pb_rails("table", props: { size: "md"} ) do %>
4
- <div class="mt-5">
5
- <thead>
6
- <tr>
7
- <th>Backlog Item</th>
8
- <th>Deployment</th>
9
- <th>Assignees</th>
10
- <th class="text-nowrap">Ready for Review</th>
11
- <th>Review Status</th>
12
- </tr>
13
- </thead>
14
- <tbody>
15
- <%= render partial: 'partials/item1' %>
16
- <%= render partial: 'partials/item2' %>
17
- <%= render partial: 'partials/item3' %>
18
-
19
- </tbody>
20
- </div>
21
- <% end %>
22
- </div>
23
-
24
-
25
- <%= render partial: 'partials/modal' %>
@@ -1,20 +0,0 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- id: object.id,
4
- data: object.data,
5
- class: object.classname) do %>
6
- <%= pb_rails("body", props: {color: "light" }) do %>
7
- <%= pb_rails("caption", props: { text: "Project" }) %>
8
- <%= pb_rails("icon", props: { icon: "home", fixed_width: true }) %>
9
- <%= object.project_number%>
10
- <% if object.link %>
11
- <%= link_to object.link, class: "pb_logistic_kit_links" do %>
12
- <%= pb_rails("title", props: { text: object.project_name, tag: "span", size: 4, dark: object.dark }) %>
13
- <%= pb_rails("title", props: { text: object.date_element, tag: "span", size: 4, dark: object.dark }) if object.date.present? %>
14
- <% end %>
15
- <% else %>
16
- <%= pb_rails("title", props: { text: object.project_name, tag: "span", size: 4, dark: object.dark }) %>
17
- <%= pb_rails("title", props: { text: object.date_element, tag: "span", size: 4, dark: object.dark} ) if object.date.present? %>
18
- <% end %>
19
- <% end %>
20
- <% end %>
@@ -1,111 +0,0 @@
1
- /* @flow */
2
-
3
- import React from 'react'
4
- import classnames from 'classnames'
5
- import DateTime from '../pb_kit/dateTime.js'
6
- import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
7
- import { Body, Caption, Icon, Title } from '../'
8
- import { spacing } from '../utilities/spacing.js'
9
-
10
- const dateString = (value: DateTime) => {
11
- const month = value.toMonthNum()
12
- const day = value.toDay()
13
-
14
- return ` · ${month}/${day}`
15
- }
16
-
17
- type LogisticProps = {
18
- aria?: object,
19
- className?: String,
20
- dark?: Boolean,
21
- data?: object,
22
- date: String,
23
- id?: String,
24
- link?: String,
25
- projectName?: String,
26
- projectNumber?: Number,
27
- }
28
-
29
- const Logistic = (props: LogisticProps) => {
30
- const { aria = {},
31
- className,
32
- dark = false,
33
- data = {},
34
- date,
35
- id,
36
- link,
37
- projectName,
38
- projectNumber } = props
39
-
40
- const ariaProps = buildAriaProps(aria)
41
- const dataProps = buildDataProps(data)
42
- const formattedDate = new DateTime({ value: date })
43
- const classes = classnames(buildCss('pb_logistic_kit', { dark: dark }), className, spacing(props))
44
-
45
- return (
46
- <div
47
- {...ariaProps}
48
- {...dataProps}
49
- className={classes}
50
- id={id}
51
- >
52
- <Body color="light">
53
- <Caption text="Project" />
54
- <Icon
55
- fixedWidth
56
- icon="home"
57
- />
58
-
59
- {` ${projectNumber}`}
60
-
61
- <Choose>
62
- <When condition={link}>
63
- <a
64
- className="pb_logistic_kit_links"
65
- href={link}
66
- >
67
- <Choose>
68
- <When condition={date}>
69
- <Title
70
- size={4}
71
- tag="span"
72
- text={' ' + projectName + dateString(formattedDate)}
73
- />
74
- </When>
75
- <Otherwise>
76
- <Title
77
- size={4}
78
- tag="span"
79
- text={' ' + projectName}
80
- />
81
- </Otherwise>
82
- </Choose>
83
- </a>
84
- </When>
85
- <Otherwise>
86
- <Choose>
87
- <When condition={date}>
88
- <Title
89
- dark={dark}
90
- size={4}
91
- tag="span"
92
- text={' ' + projectName + dateString(formattedDate)}
93
- />
94
- </When>
95
- <Otherwise>
96
- <Title
97
- dark={dark}
98
- size={4}
99
- tag="span"
100
- text={' ' + projectName}
101
- />
102
- </Otherwise>
103
- </Choose>
104
- </Otherwise>
105
- </Choose>
106
- </Body>
107
- </div>
108
- )
109
- }
110
-
111
- export default Logistic
@@ -1,7 +0,0 @@
1
- [class^=pb_logistic_kit] {
2
- .pb_logistic_kit_links {
3
- span {
4
- color: $data_1;
5
- }
6
- }
7
- }
@@ -1,27 +0,0 @@
1
- <%= pb_rails("logistic", props: {
2
- project_name: "Jefferson-Smith",
3
- project_number: "33-12345",
4
- date: Date.new(2019, 11, 18),
5
- link: "#",
6
- dark: true
7
- }) %>
8
- <br/><br/>
9
- <%= pb_rails("logistic", props: {
10
- project_name: "Jefferson-Smith",
11
- project_number: "33-12345",
12
- date: Date.new(2019, 11, 18),
13
- dark: true
14
- }) %>
15
- <br/><br/>
16
- <%= pb_rails("logistic", props: {
17
- project_name: "Jefferson-Smith",
18
- project_number: "33-12345",
19
- link: "#",
20
- dark: true
21
- }) %>
22
- <br/><br/>
23
- <%= pb_rails("logistic", props: {
24
- project_name: "Jefferson-Smith",
25
- project_number: "33-12345",
26
- dark: true
27
- }) %>
@@ -1,39 +0,0 @@
1
- import React from 'react'
2
- import { Logistic } from '../../'
3
-
4
- const LogisticDark = () => (
5
- <div>
6
- <Logistic
7
- dark
8
- date={new Date('18 Nov 2019')}
9
- link="#"
10
- projectName="Jefferson-Smith"
11
- projectNumber="33-12345"
12
- />
13
- <br />
14
- <br />
15
- <Logistic
16
- dark
17
- date={new Date('18 Nov 2019')}
18
- projectName="Jefferson-Smith"
19
- projectNumber="33-12345"
20
- />
21
- <br />
22
- <br />
23
- <Logistic
24
- dark
25
- link="#"
26
- projectName="Jefferson-Smith"
27
- projectNumber="33-12345"
28
- />
29
- <br />
30
- <br />
31
- <Logistic
32
- dark
33
- projectName="Jefferson-Smith"
34
- projectNumber="33-12345"
35
- />
36
- </div>
37
- )
38
-
39
- export default LogisticDark
@@ -1,24 +0,0 @@
1
- <%= pb_rails("logistic", props: {
2
- project_name: "Jefferson-Smith",
3
- project_number: "33-12345",
4
- date: Date.new(2019, 11, 18),
5
- link: "#"
6
- }) %>
7
- <br/><br/>
8
- <%= pb_rails("logistic", props: {
9
- project_name: "Jefferson-Smith",
10
- project_number: "33-12345",
11
- date: Date.new(2019, 11, 18),
12
- }) %>
13
- <br/><br/>
14
- <%= pb_rails("logistic", props: {
15
- project_name: "Jefferson-Smith",
16
- project_number: "33-12345",
17
- link: "#"
18
- }) %>
19
- <br/><br/>
20
- <%= pb_rails("logistic", props: {
21
- project_name: "Jefferson-Smith",
22
- project_number: "33-12345",
23
- }) %>
24
-
@@ -1,35 +0,0 @@
1
- import React from 'react'
2
- import { Logistic } from '../../'
3
-
4
- const LogisticDefault = () => (
5
- <div>
6
- <Logistic
7
- date={new Date('18 Nov 2019')}
8
- link="#"
9
- projectName="Jefferson-Smith"
10
- projectNumber="33-12345"
11
- />
12
- <br />
13
- <br />
14
- <Logistic
15
- date={new Date('18 Nov 2019')}
16
- projectName="Jefferson-Smith"
17
- projectNumber="33-12345"
18
- />
19
- <br />
20
- <br />
21
- <Logistic
22
- link="#"
23
- projectName="Jefferson-Smith"
24
- projectNumber="33-12345"
25
- />
26
- <br />
27
- <br />
28
- <Logistic
29
- projectName="Jefferson-Smith"
30
- projectNumber="33-12345"
31
- />
32
- </div>
33
- )
34
-
35
- export default LogisticDefault
@@ -1,11 +0,0 @@
1
- examples:
2
-
3
- rails:
4
- - logistic_default: Default
5
- - logistic_dark: Dark
6
-
7
-
8
- react:
9
- - logistic_default: Default
10
- - logistic_dark: Dark
11
-