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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +0 -2
- data/app/pb_kits/playbook/data/menu.yml +0 -2
- data/app/pb_kits/playbook/index.js +0 -1
- data/app/pb_kits/playbook/packs/examples.js +0 -4
- data/app/pb_kits/playbook/pb_button/_button.jsx +2 -0
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.html.erb +21 -11
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss +10 -0
- data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +14 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb +26 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb +20 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb +22 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +5 -1
- data/app/pb_kits/playbook/pb_image/_image.html.erb +2 -1
- data/app/pb_kits/playbook/pb_image/_image.jsx +31 -8
- data/app/pb_kits/playbook/pb_image/docs/_default_image.jsx +3 -3
- data/app/pb_kits/playbook/pb_label_value/_label_value.html.erb +20 -2
- data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +109 -5
- data/app/pb_kits/playbook/pb_label_value/_label_value.scss +0 -10
- data/app/pb_kits/playbook/pb_label_value/docs/_description.md +3 -1
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.html.erb +39 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.jsx +50 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.md +1 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_dark.html.erb +43 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_dark.jsx +54 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples.html.erb +72 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples.jsx +92 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples_dark.html.erb +80 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples_dark.jsx +101 -0
- data/app/pb_kits/playbook/pb_label_value/docs/example.yml +9 -0
- data/app/pb_kits/playbook/pb_label_value/docs/index.js +5 -0
- data/app/pb_kits/playbook/pb_label_value/label_value.rb +19 -2
- data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.jsx +5 -1
- data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss +12 -1
- data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.html.erb +9 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.jsx +26 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.md +1 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb +8 -1
- data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.html.erb +2 -2
- data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx +24 -10
- data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss +3 -1
- data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.rb +6 -0
- data/app/pb_kits/playbook/pb_title/_title.scss +3 -4
- data/app/pb_kits/playbook/pb_title/title.rb +2 -2
- data/app/pb_kits/playbook/plugins/pb_chart.js +49 -4
- data/lib/playbook/version.rb +1 -1
- metadata +18 -23
- data/app/pb_kits/playbook/pb_installer/_installer.html.erb +0 -16
- data/app/pb_kits/playbook/pb_installer/_installer.jsx +0 -54
- data/app/pb_kits/playbook/pb_installer/_installer.scss +0 -7
- data/app/pb_kits/playbook/pb_installer/docs/_installer_default.html.erb +0 -8
- data/app/pb_kits/playbook/pb_installer/docs/_installer_default.jsx +0 -16
- data/app/pb_kits/playbook/pb_installer/docs/example.yml +0 -9
- data/app/pb_kits/playbook/pb_installer/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_installer/installer.rb +0 -18
- data/app/pb_kits/playbook/pb_label_value/docs/index.html.erb +0 -25
- data/app/pb_kits/playbook/pb_logistic/_logistic.html.erb +0 -20
- data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +0 -111
- data/app/pb_kits/playbook/pb_logistic/_logistic.scss +0 -7
- data/app/pb_kits/playbook/pb_logistic/docs/_logistic_dark.html.erb +0 -27
- data/app/pb_kits/playbook/pb_logistic/docs/_logistic_dark.jsx +0 -39
- data/app/pb_kits/playbook/pb_logistic/docs/_logistic_default.html.erb +0 -24
- data/app/pb_kits/playbook/pb_logistic/docs/_logistic_default.jsx +0 -35
- data/app/pb_kits/playbook/pb_logistic/docs/example.yml +0 -11
- data/app/pb_kits/playbook/pb_logistic/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_logistic/logistic.rb +0 -31
@@ -1,9 +1,45 @@
|
|
1
1
|
import Highcharts from 'highcharts'
|
2
2
|
|
3
3
|
import { highchartsTheme } from '../pb_dashboard/pbChartsLightTheme.js'
|
4
|
+
import colors from '../tokens/_colors.scss'
|
4
5
|
|
5
6
|
require('highcharts/modules/variable-pie')(Highcharts)
|
6
7
|
|
8
|
+
// Map Data Color String Props to our SCSS Variables
|
9
|
+
const mapColors = (array) => {
|
10
|
+
const newArray = array.map((item) => {
|
11
|
+
return item == 'data-1'
|
12
|
+
? `${colors.data_1}`
|
13
|
+
: item == 'data-2'
|
14
|
+
? `${colors.data_2}`
|
15
|
+
: item == 'data-3'
|
16
|
+
? `${colors.data_3}`
|
17
|
+
: item == 'data-4'
|
18
|
+
? `${colors.data_4}`
|
19
|
+
: item == 'data-5'
|
20
|
+
? `${colors.data_5}`
|
21
|
+
: item == 'data-6'
|
22
|
+
? `${colors.data_6}`
|
23
|
+
: item == 'data-7'
|
24
|
+
? `${colors.data_7}`
|
25
|
+
: item == 'data-8'
|
26
|
+
? `${colors.data_8}`
|
27
|
+
: ''
|
28
|
+
})
|
29
|
+
return newArray
|
30
|
+
}
|
31
|
+
|
32
|
+
// Adjust Circle Chart Block Kit Dimensions to Match the Chart for Centering
|
33
|
+
const alignBlockElement = (event) => {
|
34
|
+
const itemToMove = document.querySelector(`#wrapper-circle-chart-${event.target.renderTo.id} .pb_circle_chart_block`)
|
35
|
+
const chartContainer = document.querySelector(`#${event.target.renderTo.id}`)
|
36
|
+
if (itemToMove !== null) {
|
37
|
+
itemToMove.style.height = `${event.target.chartHeight}px`
|
38
|
+
itemToMove.style.width = `${event.target.chartWidth}px`;
|
39
|
+
(chartContainer.firstChild).before(itemToMove)
|
40
|
+
}
|
41
|
+
}
|
42
|
+
|
7
43
|
class pbChart {
|
8
44
|
defaults = {
|
9
45
|
callbackInitializeBefore: () => {},
|
@@ -30,24 +66,29 @@ class pbChart {
|
|
30
66
|
this.settings = this.extendDefaults(this.defaults, options)
|
31
67
|
|
32
68
|
if (this.options.type == 'variablepie' || this.options.type == 'pie'){
|
33
|
-
this.setupPieChart()
|
69
|
+
this.setupPieChart(options)
|
34
70
|
} else {
|
35
71
|
this.setupChart()
|
36
72
|
}
|
37
73
|
}
|
38
74
|
|
39
|
-
setupPieChart() {
|
75
|
+
setupPieChart(options) {
|
40
76
|
Highcharts.setOptions(highchartsTheme)
|
41
|
-
|
42
77
|
Highcharts.chart(this.defaults.id, {
|
43
78
|
title: {
|
44
79
|
text: this.defaults.title,
|
45
80
|
},
|
46
81
|
chart: {
|
47
82
|
type: this.defaults.type,
|
83
|
+
events: {
|
84
|
+
render: (event) => alignBlockElement(event),
|
85
|
+
redraw: (event) => alignBlockElement(event),
|
86
|
+
},
|
48
87
|
},
|
88
|
+
|
49
89
|
plotOptions: {
|
50
90
|
pie: {
|
91
|
+
colors: options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
|
51
92
|
dataLabels: {
|
52
93
|
enabled: this.defaults.dataLabels,
|
53
94
|
connectorShape: 'straight',
|
@@ -55,8 +96,10 @@ class pbChart {
|
|
55
96
|
format: this.defaults.dataLabelHtml,
|
56
97
|
},
|
57
98
|
showInLegend: this.defaults.showInLegend,
|
99
|
+
|
58
100
|
},
|
59
101
|
},
|
102
|
+
|
60
103
|
tooltip: {
|
61
104
|
headerFormat: this.defaults.headerFormat,
|
62
105
|
pointFormat: this.defaults.tooltipHtml,
|
@@ -65,10 +108,12 @@ class pbChart {
|
|
65
108
|
series: [{
|
66
109
|
minPointSize: this.defaults.minPointSize,
|
67
110
|
maxPointSize: this.defaults.maxPointSize,
|
68
|
-
innerSize: this.defaults.innerSize,
|
111
|
+
innerSize: options.borderWidth == 20 ? '100%' : this.defaults.innerSize,
|
69
112
|
data: this.defaults.chartData,
|
70
113
|
zMin: this.defaults.zMin,
|
71
114
|
startAngle: this.defaults.startAngle,
|
115
|
+
borderWidth: this.defaults.borderWidth,
|
116
|
+
borderColor: options.borderWidth == 20 ? null : this.defaults.innerSize,
|
72
117
|
}],
|
73
118
|
credits: false,
|
74
119
|
})
|
data/lib/playbook/version.rb
CHANGED
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:
|
4
|
+
version: 6.0.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: 2020-07-
|
12
|
+
date: 2020-07-30 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -591,8 +591,11 @@ files:
|
|
591
591
|
- app/pb_kits/playbook/pb_circle_chart/_circle_chart.html.erb
|
592
592
|
- app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss
|
593
593
|
- app/pb_kits/playbook/pb_circle_chart/circle_chart.rb
|
594
|
+
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb
|
595
|
+
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb
|
594
596
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb
|
595
597
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.html.erb
|
598
|
+
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb
|
596
599
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.html.erb
|
597
600
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.html.erb
|
598
601
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.html.erb
|
@@ -944,14 +947,6 @@ files:
|
|
944
947
|
- app/pb_kits/playbook/pb_image/docs/example.yml
|
945
948
|
- app/pb_kits/playbook/pb_image/docs/index.js
|
946
949
|
- app/pb_kits/playbook/pb_image/image.rb
|
947
|
-
- app/pb_kits/playbook/pb_installer/_installer.html.erb
|
948
|
-
- app/pb_kits/playbook/pb_installer/_installer.jsx
|
949
|
-
- app/pb_kits/playbook/pb_installer/_installer.scss
|
950
|
-
- app/pb_kits/playbook/pb_installer/docs/_installer_default.html.erb
|
951
|
-
- app/pb_kits/playbook/pb_installer/docs/_installer_default.jsx
|
952
|
-
- app/pb_kits/playbook/pb_installer/docs/example.yml
|
953
|
-
- app/pb_kits/playbook/pb_installer/docs/index.js
|
954
|
-
- app/pb_kits/playbook/pb_installer/installer.rb
|
955
950
|
- app/pb_kits/playbook/pb_kit/base.rb
|
956
951
|
- app/pb_kits/playbook/pb_kit/dateTime.js
|
957
952
|
- app/pb_kits/playbook/pb_kit/pb_date_time.rb
|
@@ -976,8 +971,16 @@ files:
|
|
976
971
|
- app/pb_kits/playbook/pb_label_value/docs/_label_value_default.html.erb
|
977
972
|
- app/pb_kits/playbook/pb_label_value/docs/_label_value_default.jsx
|
978
973
|
- app/pb_kits/playbook/pb_label_value/docs/_label_value_default.md
|
974
|
+
- app/pb_kits/playbook/pb_label_value/docs/_label_value_details.html.erb
|
975
|
+
- app/pb_kits/playbook/pb_label_value/docs/_label_value_details.jsx
|
976
|
+
- app/pb_kits/playbook/pb_label_value/docs/_label_value_details.md
|
977
|
+
- app/pb_kits/playbook/pb_label_value/docs/_label_value_details_dark.html.erb
|
978
|
+
- app/pb_kits/playbook/pb_label_value/docs/_label_value_details_dark.jsx
|
979
|
+
- app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples.html.erb
|
980
|
+
- app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples.jsx
|
981
|
+
- app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples_dark.html.erb
|
982
|
+
- app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples_dark.jsx
|
979
983
|
- app/pb_kits/playbook/pb_label_value/docs/example.yml
|
980
|
-
- app/pb_kits/playbook/pb_label_value/docs/index.html.erb
|
981
984
|
- app/pb_kits/playbook/pb_label_value/docs/index.js
|
982
985
|
- app/pb_kits/playbook/pb_label_value/label_value.rb
|
983
986
|
- app/pb_kits/playbook/pb_layout/_body.html.erb
|
@@ -1094,16 +1097,6 @@ files:
|
|
1094
1097
|
- app/pb_kits/playbook/pb_loading_inline/docs/example.yml
|
1095
1098
|
- app/pb_kits/playbook/pb_loading_inline/docs/index.js
|
1096
1099
|
- app/pb_kits/playbook/pb_loading_inline/loading_inline.rb
|
1097
|
-
- app/pb_kits/playbook/pb_logistic/_logistic.html.erb
|
1098
|
-
- app/pb_kits/playbook/pb_logistic/_logistic.jsx
|
1099
|
-
- app/pb_kits/playbook/pb_logistic/_logistic.scss
|
1100
|
-
- app/pb_kits/playbook/pb_logistic/docs/_logistic_dark.html.erb
|
1101
|
-
- app/pb_kits/playbook/pb_logistic/docs/_logistic_dark.jsx
|
1102
|
-
- app/pb_kits/playbook/pb_logistic/docs/_logistic_default.html.erb
|
1103
|
-
- app/pb_kits/playbook/pb_logistic/docs/_logistic_default.jsx
|
1104
|
-
- app/pb_kits/playbook/pb_logistic/docs/example.yml
|
1105
|
-
- app/pb_kits/playbook/pb_logistic/docs/index.js
|
1106
|
-
- app/pb_kits/playbook/pb_logistic/logistic.rb
|
1107
1100
|
- app/pb_kits/playbook/pb_message/_message.html.erb
|
1108
1101
|
- app/pb_kits/playbook/pb_message/_message.jsx
|
1109
1102
|
- app/pb_kits/playbook/pb_message/_message.scss
|
@@ -1257,6 +1250,9 @@ files:
|
|
1257
1250
|
- app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_muted.jsx
|
1258
1251
|
- app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_value.html.erb
|
1259
1252
|
- app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_value.jsx
|
1253
|
+
- app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.html.erb
|
1254
|
+
- app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.jsx
|
1255
|
+
- app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.md
|
1260
1256
|
- app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_width.html.erb
|
1261
1257
|
- app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_width.jsx
|
1262
1258
|
- app/pb_kits/playbook/pb_progress_simple/docs/example.yml
|
@@ -1820,8 +1816,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
1820
1816
|
- !ruby/object:Gem::Version
|
1821
1817
|
version: '0'
|
1822
1818
|
requirements: []
|
1823
|
-
|
1824
|
-
rubygems_version: 2.7.3
|
1819
|
+
rubygems_version: 3.1.4
|
1825
1820
|
signing_key:
|
1826
1821
|
specification_version: 4
|
1827
1822
|
summary: Playbook Design System
|
@@ -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,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 +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
|