playbook_ui 14.1.0 → 14.2.0.pre.alpha.PLAY15063618
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 +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +3 -3
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +1 -1
- data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss +2 -2
- data/app/pb_kits/playbook/pb_badge/_badge.scss +9 -0
- data/app/pb_kits/playbook/pb_badge/_badge.tsx +8 -3
- data/app/pb_kits/playbook/pb_badge/badge.rb +1 -1
- data/app/pb_kits/playbook/pb_badge/badge.test.js +17 -11
- data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.html.erb +13 -0
- data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.jsx +31 -12
- data/app/pb_kits/playbook/pb_button/_button.tsx +4 -1
- data/app/pb_kits/playbook/pb_button/button.html.erb +1 -1
- data/app/pb_kits/playbook/pb_button/button.rb +4 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss +1 -1
- data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +2 -2
- data/app/pb_kits/playbook/pb_dialog/_close_icon.tsx +5 -1
- data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +3 -1
- data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx +20 -1
- data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -1
- data/app/pb_kits/playbook/pb_dialog/dialog_header.rb +4 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx +1 -5
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx +46 -0
- data/app/pb_kits/playbook/pb_dialog/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_dialog/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_filter/filter.rb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -0
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +43 -25
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +6 -2
- data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +4 -4
- data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +4 -0
- data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.scss +3 -0
- data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx +72 -0
- data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +53 -0
- data/app/pb_kits/playbook/pb_gantt_chart/docs/example.yml +7 -0
- data/app/pb_kits/playbook/pb_gantt_chart/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_gantt_chart/gantt_chart.test.jsx +19 -0
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +0 -2
- data/app/pb_kits/playbook/pb_pagination/_pagination.scss +49 -13
- data/app/pb_kits/playbook/pb_pagination/_pagination.tsx +164 -0
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx +19 -0
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md +1 -0
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +62 -0
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md +1 -0
- data/app/pb_kits/playbook/pb_pagination/docs/data.js +23 -0
- data/app/pb_kits/playbook/pb_pagination/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_pagination/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +0 -7
- data/app/pb_kits/playbook/pb_popover/_popover.tsx +10 -5
- data/app/pb_kits/playbook/pb_rich_text_editor/_previewer_mixin.scss +132 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss +50 -76
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx +73 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_star_rating/index.js +78 -41
- data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +4 -2
- data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +17 -0
- data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_display.tsx +0 -2
- data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_interactive.tsx +0 -1
- data/app/pb_kits/playbook/pb_time/_time.tsx +12 -8
- data/app/pb_kits/playbook/pb_time/time.html.erb +3 -3
- data/app/pb_kits/playbook/pb_time/time.rb +4 -0
- data/app/pb_kits/playbook/tokens/_container.scss +21 -0
- data/app/pb_kits/playbook/utilities/_min_width.scss +45 -0
- data/app/pb_kits/playbook/utilities/globalPropNames.mjs +1 -0
- data/app/pb_kits/playbook/utilities/globalProps.ts +20 -3
- data/app/pb_kits/playbook/utilities/icons/allicons.tsx +59 -0
- data/app/pb_kits/playbook/utilities/icons/clock.svg +9 -0
- data/app/pb_kits/playbook/utilities/icons/spinner.svg +3 -0
- data/app/pb_kits/playbook/utilities/icons/times.svg +3 -0
- data/dist/chunks/_typeahead-Cq7RLPBA.js +22 -0
- data/dist/chunks/_weekday_stacked-Cykj5kLZ.js +45 -0
- data/dist/chunks/lazysizes-B7xYodB-.js +1 -0
- data/dist/chunks/{lib-BE0Z3F7x.js → lib-DErGXNy3.js} +2 -2
- data/dist/chunks/{pb_form_validation-TzZQ0Flx.js → pb_form_validation-BC6kh7Hu.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +4 -0
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/classnames.rb +1 -0
- data/lib/playbook/spacing.rb +31 -2
- data/lib/playbook/version.rb +2 -2
- metadata +35 -13
- data/dist/chunks/_typeahead-D6PRvP-1.js +0 -22
- data/dist/chunks/_weekday_stacked-DbdEuIzh.js +0 -45
- data/dist/chunks/lazysizes-DHz07jlL.js +0 -1
- /data/app/pb_kits/playbook/pb_pagination/docs/{_pagination_default.md → _pagination_default_rails.md} +0 -0
@@ -3,9 +3,10 @@
|
|
3
3
|
@import "../tokens/opacity";
|
4
4
|
@import "../tokens/shadows";
|
5
5
|
@import "../pb_avatar/avatar";
|
6
|
+
@import "../tokens/typography";
|
6
7
|
|
7
8
|
$selector: ".pb_form_pill";
|
8
|
-
$pb_form_pill_height:
|
9
|
+
$pb_form_pill_height: 27px;
|
9
10
|
$form_pill_colors: (
|
10
11
|
primary: map-get($status_color_text, "primary"),
|
11
12
|
neutral: map-get($status_color_text, "neutral"),
|
@@ -16,18 +17,24 @@ $form_pill_colors: (
|
|
16
17
|
display: inline-flex;
|
17
18
|
justify-content: center;
|
18
19
|
align-items: center;
|
19
|
-
padding: 0 calc($space-
|
20
|
+
padding: 0 calc($space-md/2);
|
20
21
|
height: $pb_form_pill_height;
|
21
22
|
border-radius: calc($pb_form_pill_height/2);
|
22
23
|
margin-bottom: 2px;
|
23
24
|
margin-top: 2px;
|
24
25
|
cursor: pointer;
|
26
|
+
.pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag{
|
27
|
+
font-size: $font_small !important;
|
28
|
+
}
|
25
29
|
@each $color_name, $color_value in $form_pill_colors {
|
26
30
|
&[class*=_#{$color_name}] {
|
27
31
|
background-color: mix($color_value, $card_light, 10%);
|
28
32
|
@if ($color_name == "neutral") {
|
29
33
|
background-color: $white;
|
30
34
|
border: 1px solid $border_light;
|
35
|
+
.pb_form_pill_icon {
|
36
|
+
color: $text_lt_default;
|
37
|
+
}
|
31
38
|
}
|
32
39
|
transition: background-color 0.2s ease;
|
33
40
|
box-shadow: none;
|
@@ -51,20 +58,18 @@ $form_pill_colors: (
|
|
51
58
|
@if ($color_name == "neutral") {
|
52
59
|
color: $text_lt_default;
|
53
60
|
}
|
54
|
-
padding
|
55
|
-
padding-right: calc($space-sm/2);
|
61
|
+
padding: 0 $space-xs;
|
56
62
|
}
|
57
63
|
#{$selector}_close {
|
58
64
|
color: $color_value;
|
59
|
-
padding-left: calc($space-sm/4);
|
60
|
-
padding-right: calc($space-sm/4);
|
61
65
|
display: flex;
|
62
66
|
align-items: center;
|
63
|
-
|
64
|
-
|
65
|
-
height: 27px;
|
66
|
-
border-radius: 70px;
|
67
|
+
height: 17px;
|
68
|
+
border-radius: calc(50%);
|
67
69
|
cursor: pointer;
|
70
|
+
@if ($color_name == "neutral") {
|
71
|
+
color: $text_lt_default;
|
72
|
+
}
|
68
73
|
&:hover {
|
69
74
|
background-color: mix($color_value, $card_light, 40%);
|
70
75
|
@if ($color_name == "neutral") {
|
@@ -74,7 +79,7 @@ $form_pill_colors: (
|
|
74
79
|
}
|
75
80
|
#{$selector}_tag {
|
76
81
|
color: $color_value;
|
77
|
-
padding
|
82
|
+
padding: 0 $space-xs;
|
78
83
|
@if ($color_name == "neutral") {
|
79
84
|
color: $text_lt_default;
|
80
85
|
}
|
@@ -92,24 +97,37 @@ $form_pill_colors: (
|
|
92
97
|
.pb_form_pill_icon {
|
93
98
|
height: 12px !important;
|
94
99
|
width: 12px !important;
|
100
|
+
padding-right: $space_xs;
|
101
|
+
+ .pb_form_pill_text, + .pb_form_pill_tag {
|
102
|
+
padding-left: 0;
|
103
|
+
}
|
95
104
|
}
|
96
105
|
&.small {
|
97
|
-
height:
|
98
|
-
|
106
|
+
height: 17px;
|
107
|
+
padding: 0 $space-xs;
|
99
108
|
.pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
|
100
|
-
font-size: $
|
101
|
-
font-weight: $regular;
|
109
|
+
font-size: $font_smallest !important;
|
102
110
|
}
|
103
111
|
.pb_form_pill_text, .pb_form_pill_tag {
|
104
112
|
line-height: 1.7;
|
105
|
-
padding
|
106
|
-
|
113
|
+
padding: 0 $space_xxs;
|
114
|
+
}
|
115
|
+
.pb_form_pill_close {
|
116
|
+
height: 10px;
|
117
|
+
border-radius: calc(50%);
|
107
118
|
}
|
108
|
-
[class^=pb_avatar_kit]
|
109
|
-
|
110
|
-
height:
|
111
|
-
|
112
|
-
|
119
|
+
[class^=pb_avatar_kit] .avatar_wrapper {
|
120
|
+
flex-basis: 16px;
|
121
|
+
height: 16px;
|
122
|
+
margin-top: 2px;
|
123
|
+
width: 16px;
|
124
|
+
&::before { line-height: 16.5px; }
|
125
|
+
}
|
126
|
+
.pb_form_pill_icon {
|
127
|
+
padding-right: $space_xxs;
|
128
|
+
+ .pb_form_pill_text, + .pb_form_pill_tag {
|
129
|
+
padding-left: 0;
|
130
|
+
}
|
113
131
|
}
|
114
132
|
}
|
115
133
|
&.dark {
|
@@ -118,7 +136,7 @@ $form_pill_colors: (
|
|
118
136
|
// Primary and Neutral are exceptions to the general rule in the handoff
|
119
137
|
&[class*=_#{$color_name}] {
|
120
138
|
// background-color: mix($color_value, $card_dark, 10%);
|
121
|
-
// .pb_form_pill_tag {
|
139
|
+
// .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
|
122
140
|
// color: $color_name;
|
123
141
|
// }
|
124
142
|
// .pb_form_pill_close {
|
@@ -136,7 +154,7 @@ $form_pill_colors: (
|
|
136
154
|
@if ($color_name == "neutral") {
|
137
155
|
background-color: transparent;
|
138
156
|
border: 1px solid $border_dark;
|
139
|
-
.pb_form_pill_text, .pb_form_pill_tag {
|
157
|
+
.pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
|
140
158
|
color: $text_dk_default;
|
141
159
|
}
|
142
160
|
.pb_form_pill_close {
|
@@ -157,7 +175,7 @@ $form_pill_colors: (
|
|
157
175
|
}
|
158
176
|
@if ($color_name == "primary") {
|
159
177
|
background-color: mix($active_dark, $card_dark, 10%);
|
160
|
-
.pb_form_pill_text, .pb_form_pill_tag {
|
178
|
+
.pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
|
161
179
|
color: $active_dark;
|
162
180
|
}
|
163
181
|
.pb_form_pill_close {
|
@@ -46,6 +46,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
|
|
46
46
|
} = props
|
47
47
|
|
48
48
|
const iconClass = icon ? "_icon" : ""
|
49
|
+
const closeIconSize = size === "small" ? "xs" : "sm"
|
49
50
|
const css = classnames(
|
50
51
|
`pb_form_pill_kit_${color}${iconClass}`,
|
51
52
|
globalProps(props),
|
@@ -69,7 +70,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
|
|
69
70
|
<Avatar
|
70
71
|
imageUrl={avatarUrl}
|
71
72
|
name={name}
|
72
|
-
size="
|
73
|
+
size="xxs"
|
73
74
|
status={null}
|
74
75
|
/>
|
75
76
|
<Title
|
@@ -84,7 +85,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
|
|
84
85
|
<Avatar
|
85
86
|
imageUrl={avatarUrl}
|
86
87
|
name={name}
|
87
|
-
size="
|
88
|
+
size="xxs"
|
88
89
|
status={null}
|
89
90
|
/>
|
90
91
|
<Title
|
@@ -94,6 +95,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
|
|
94
95
|
/>
|
95
96
|
<Icon
|
96
97
|
className="pb_form_pill_icon"
|
98
|
+
color={color}
|
97
99
|
icon={icon}
|
98
100
|
/>
|
99
101
|
</>
|
@@ -102,6 +104,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
|
|
102
104
|
<>
|
103
105
|
<Icon
|
104
106
|
className="pb_form_pill_icon"
|
107
|
+
color={color}
|
105
108
|
icon={icon}
|
106
109
|
/>
|
107
110
|
<Title
|
@@ -126,6 +129,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
|
|
126
129
|
<Icon
|
127
130
|
fixedWidth
|
128
131
|
icon="times"
|
132
|
+
size={closeIconSize}
|
129
133
|
/>
|
130
134
|
</div>
|
131
135
|
</div>
|
@@ -5,11 +5,11 @@ examples:
|
|
5
5
|
- form_pill_size: Form Pill Size
|
6
6
|
- form_pill_tag: Form Pill Tag
|
7
7
|
- form_pill_example: Example
|
8
|
-
|
8
|
+
- form_pill_icon: Form Pill Icon
|
9
9
|
|
10
10
|
react:
|
11
11
|
- form_pill_user: Form Pill User
|
12
12
|
- form_pill_size: Form Pill Size
|
13
13
|
- form_pill_tag: Form Pill Tag
|
14
14
|
- form_pill_example: Example
|
15
|
-
|
15
|
+
- form_pill_icon: Form Pill Icon
|
@@ -1,19 +1,19 @@
|
|
1
1
|
<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
|
2
2
|
<% if object.name.present? %>
|
3
|
-
<%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "
|
3
|
+
<%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xxs" }) %>
|
4
4
|
<%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
|
5
5
|
<% if object.icon.present? %>
|
6
|
-
<%= pb_rails("icon", props: { classname: "pb_form_pill_icon", icon: object.icon }) %>
|
6
|
+
<%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
|
7
7
|
<% end %>
|
8
8
|
<% elsif object.text.present? %>
|
9
9
|
<% if object.icon.present? %>
|
10
|
-
<%= pb_rails("icon", props: { classname: "pb_form_pill_icon", icon: object.icon }) %>
|
10
|
+
<%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
|
11
11
|
<% end %>
|
12
12
|
<% if object.text.present? %>
|
13
13
|
<%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
|
14
14
|
<% end %>
|
15
15
|
<% end %>
|
16
16
|
<%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
|
17
|
-
<%= pb_rails("icon", props: { icon: 'times'
|
17
|
+
<%= pb_rails("icon", props: { icon: 'times', fixed_width: true, size: object.close_icon_size }) %>
|
18
18
|
<% end %>
|
19
19
|
<% end %>
|
@@ -0,0 +1,72 @@
|
|
1
|
+
import React, { useState, useEffect } from "react";
|
2
|
+
import classnames from "classnames";
|
3
|
+
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
|
4
|
+
import { globalProps } from "../utilities/globalProps";
|
5
|
+
import HighchartsReact from "highcharts-react-official";
|
6
|
+
import Highcharts from "highcharts/highcharts-gantt";
|
7
|
+
|
8
|
+
import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
|
9
|
+
import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
|
10
|
+
|
11
|
+
type GanttChartProps = {
|
12
|
+
aria?: { [key: string]: string };
|
13
|
+
className?: string;
|
14
|
+
customOptions: Partial<Highcharts.Options>;
|
15
|
+
dark?: boolean;
|
16
|
+
data?: { [key: string]: string };
|
17
|
+
htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
|
18
|
+
id?: string;
|
19
|
+
};
|
20
|
+
|
21
|
+
const GanttChart = (props: GanttChartProps) => {
|
22
|
+
const {
|
23
|
+
aria = {},
|
24
|
+
className,
|
25
|
+
customOptions = {},
|
26
|
+
dark = false,
|
27
|
+
data = {},
|
28
|
+
htmlOptions = {},
|
29
|
+
id,
|
30
|
+
} = props;
|
31
|
+
|
32
|
+
const ariaProps = buildAriaProps(aria);
|
33
|
+
const dataProps = buildDataProps(data);
|
34
|
+
const htmlProps = buildHtmlProps(htmlOptions);
|
35
|
+
const classes = classnames(
|
36
|
+
buildCss("pb_gantt_chart"),
|
37
|
+
globalProps(props),
|
38
|
+
className
|
39
|
+
);
|
40
|
+
|
41
|
+
const [options, setOptions] = useState<Highcharts.Options | undefined>(customOptions);
|
42
|
+
|
43
|
+
useEffect(() => {
|
44
|
+
setOptions(customOptions);
|
45
|
+
}, [customOptions]);
|
46
|
+
|
47
|
+
const setupTheme = () => {
|
48
|
+
dark
|
49
|
+
? Highcharts.setOptions(highchartsDarkTheme)
|
50
|
+
: Highcharts.setOptions(highchartsTheme);
|
51
|
+
};
|
52
|
+
setupTheme();
|
53
|
+
|
54
|
+
return (
|
55
|
+
<div>
|
56
|
+
<HighchartsReact
|
57
|
+
constructorType={"ganttChart"}
|
58
|
+
containerProps={{
|
59
|
+
className: classnames(globalProps(props), classes),
|
60
|
+
id: id,
|
61
|
+
...ariaProps,
|
62
|
+
...dataProps,
|
63
|
+
...htmlProps,
|
64
|
+
}}
|
65
|
+
highcharts={Highcharts}
|
66
|
+
options={options}
|
67
|
+
/>
|
68
|
+
</div>
|
69
|
+
);
|
70
|
+
};
|
71
|
+
|
72
|
+
export default GanttChart;
|
@@ -0,0 +1,53 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { GanttChart } from "playbook-ui";
|
3
|
+
|
4
|
+
const mockOptions = {
|
5
|
+
title: {
|
6
|
+
text: "Simple Gantt Chart",
|
7
|
+
},
|
8
|
+
|
9
|
+
xAxis: [
|
10
|
+
{
|
11
|
+
min: Date.UTC(2014, 10, 17),
|
12
|
+
max: Date.UTC(2014, 10, 30),
|
13
|
+
},
|
14
|
+
],
|
15
|
+
|
16
|
+
series: [
|
17
|
+
{
|
18
|
+
name: "Project 1",
|
19
|
+
data: [
|
20
|
+
{
|
21
|
+
name: "Start prototype",
|
22
|
+
start: Date.UTC(2014, 10, 18),
|
23
|
+
end: Date.UTC(2014, 10, 25),
|
24
|
+
},
|
25
|
+
{
|
26
|
+
name: "Develop",
|
27
|
+
start: Date.UTC(2014, 10, 20),
|
28
|
+
end: Date.UTC(2014, 10, 25),
|
29
|
+
},
|
30
|
+
{
|
31
|
+
name: "Run acceptance tests",
|
32
|
+
start: Date.UTC(2014, 10, 23),
|
33
|
+
end: Date.UTC(2014, 10, 26),
|
34
|
+
},
|
35
|
+
{
|
36
|
+
name: "Test prototype",
|
37
|
+
start: Date.UTC(2014, 10, 27),
|
38
|
+
end: Date.UTC(2014, 10, 29),
|
39
|
+
},
|
40
|
+
],
|
41
|
+
},
|
42
|
+
],
|
43
|
+
};
|
44
|
+
|
45
|
+
const GanttChartDefault = (props) => (
|
46
|
+
<div>
|
47
|
+
<GanttChart customOptions={mockOptions}
|
48
|
+
{...props}
|
49
|
+
/>
|
50
|
+
</div>
|
51
|
+
);
|
52
|
+
|
53
|
+
export default GanttChartDefault;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default as GanttChartDefault } from './_gantt_chart_default.jsx'
|
@@ -0,0 +1,19 @@
|
|
1
|
+
// import { renderKit } from '../utilities/test-utils'
|
2
|
+
|
3
|
+
// import GanttChart from './_gantt_chart'
|
4
|
+
|
5
|
+
/* See these resources for more testing info:
|
6
|
+
- https://github.com/testing-library/jest-dom#usage for useage and examples
|
7
|
+
- https://jestjs.io/docs/en/using-matchers
|
8
|
+
*/
|
9
|
+
|
10
|
+
test('generated scaffold test - update me', () => {
|
11
|
+
// const props = {
|
12
|
+
// data: { testid: 'default' }
|
13
|
+
// }
|
14
|
+
|
15
|
+
|
16
|
+
// const kit = renderKit(GanttChart , props)
|
17
|
+
// expect(kit).toBeInTheDocument()
|
18
|
+
})
|
19
|
+
|
@@ -28,7 +28,7 @@ type IconProps = {
|
|
28
28
|
data?: {[key: string]: string},
|
29
29
|
fixedWidth?: boolean,
|
30
30
|
flip?: "horizontal" | "vertical" | "both" | "none",
|
31
|
-
icon
|
31
|
+
icon?: string | ReactSVGElement,
|
32
32
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
33
33
|
id?: string,
|
34
34
|
inverse?: boolean,
|
@@ -469,7 +469,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
469
469
|
<FormPill
|
470
470
|
key={index}
|
471
471
|
onClick={(event: any) => handlePillClose(event, item)}
|
472
|
-
size="small"
|
473
472
|
text={item.label}
|
474
473
|
/>
|
475
474
|
))
|
@@ -482,7 +481,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
482
481
|
<FormPill
|
483
482
|
key={index}
|
484
483
|
onClick={(event: any) => handlePillClose(event, item)}
|
485
|
-
size="small"
|
486
484
|
text={item.label}
|
487
485
|
/>
|
488
486
|
))
|
@@ -3,36 +3,45 @@
|
|
3
3
|
@import "../tokens/border_radius";
|
4
4
|
@import "../tokens/shadows";
|
5
5
|
|
6
|
+
|
6
7
|
$pagination_padding: 7px 13px 6px 13px;
|
7
8
|
$top_bottom_radius: 0px;
|
8
9
|
|
10
|
+
@mixin hover-state {
|
11
|
+
background-color: $active_light !important;
|
12
|
+
color: $primary;
|
13
|
+
border-radius: $border_rad_light;
|
14
|
+
}
|
15
|
+
|
9
16
|
.pb_pagination {
|
10
17
|
display: inline-block;
|
11
18
|
border-radius: $border_rad_light;
|
12
19
|
border: $border_rad_lightest solid $border_light;
|
13
20
|
background-color: $white;
|
14
|
-
padding: $
|
15
|
-
li {
|
21
|
+
padding: $space_xs 0px !important;
|
22
|
+
li, .pagination-number {
|
16
23
|
display: inline;
|
17
|
-
> a, li > span {
|
24
|
+
> a, li > span, .pagination-number {
|
18
25
|
padding: $pagination_padding;
|
19
26
|
text-decoration: none;
|
20
27
|
}}
|
21
|
-
li:first-child > a, li:first-child > span
|
28
|
+
li:first-child > a, li:first-child > span, .pagination-number, .pagination-left {
|
29
|
+
background-color: $white;
|
22
30
|
padding: $pagination_padding;
|
23
31
|
border-right: $border_rad_lightest solid $border_light;
|
24
32
|
z-index: 2;
|
25
33
|
border-top-right-radius: $top_bottom_radius;
|
26
34
|
border-bottom-right-radius: $top_bottom_radius;
|
35
|
+
cursor: pointer;
|
27
36
|
}
|
28
|
-
li:last-child > a, li:last-child > span {
|
37
|
+
li:last-child > a, li:last-child > span, .pagination-number, .pagination-right {
|
29
38
|
padding: $pagination_padding;
|
30
39
|
border-left: $border_rad_lightest solid $border_light;
|
31
40
|
z-index: 2;
|
32
41
|
border-top-left-radius: $top_bottom_radius;
|
33
42
|
border-bottom-left-radius: $top_bottom_radius;
|
34
43
|
}
|
35
|
-
a {
|
44
|
+
a, .pagination-number {
|
36
45
|
color: $text_lt_default;
|
37
46
|
font-size: $text_small;
|
38
47
|
font-weight: $regular;
|
@@ -40,9 +49,7 @@ $top_bottom_radius: 0px;
|
|
40
49
|
transition: all $transition_default ease-out;
|
41
50
|
|
42
51
|
&:hover {
|
43
|
-
|
44
|
-
color: $primary;
|
45
|
-
border-radius: $border_rad_light;
|
52
|
+
@include hover-state;
|
46
53
|
}
|
47
54
|
|
48
55
|
&:focus-visible {
|
@@ -52,8 +59,8 @@ $top_bottom_radius: 0px;
|
|
52
59
|
transition: none;
|
53
60
|
}
|
54
61
|
}
|
55
|
-
.active > span {
|
56
|
-
background-color: $primary;
|
62
|
+
.active > span, .pagination-number.active {
|
63
|
+
background-color: $primary !important;
|
57
64
|
border-radius: $border_rad_light;
|
58
65
|
color: #fff;
|
59
66
|
padding: $pagination_padding;
|
@@ -62,8 +69,37 @@ $top_bottom_radius: 0px;
|
|
62
69
|
font-weight: $bold;
|
63
70
|
font-size: $text_small;
|
64
71
|
}
|
65
|
-
.disabled
|
66
|
-
|
72
|
+
.disabled {
|
73
|
+
pointer-events: none;
|
74
|
+
opacity: 0.5;
|
75
|
+
color: grey;
|
76
|
+
|
77
|
+
& > span {
|
78
|
+
padding: $pagination_padding;
|
79
|
+
font-size: $text_small;
|
80
|
+
}
|
81
|
+
}
|
82
|
+
|
83
|
+
.pagination-right,
|
84
|
+
.pagination-left {
|
85
|
+
background-color: $white;
|
86
|
+
border-top: none;
|
87
|
+
border-bottom: none;
|
88
|
+
cursor: pointer;
|
89
|
+
padding: 7px 11px 6px;
|
67
90
|
font-size: $text_small;
|
91
|
+
|
92
|
+
&:hover {
|
93
|
+
@include hover-state;
|
94
|
+
}
|
95
|
+
}
|
96
|
+
.pagination-left {
|
97
|
+
border-left: none;
|
98
|
+
margin-right: $space_xxs;
|
99
|
+
}
|
100
|
+
|
101
|
+
.pagination-right {
|
102
|
+
border-right: none;
|
103
|
+
margin-left: $space_xxs;
|
68
104
|
}
|
69
105
|
}
|