playbook_ui 2.9.9 → 3.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 +10 -4
- data/app/pb_kits/playbook/index.js +10 -0
- data/app/pb_kits/playbook/kits/pb_circle_icon_button.js +4 -0
- data/app/pb_kits/playbook/kits/pb_select.js +4 -0
- data/app/pb_kits/playbook/kits/pb_selectable_card.js +4 -0
- data/app/pb_kits/playbook/kits/pb_textarea.js +4 -0
- data/app/pb_kits/playbook/packs/examples.js +8 -0
- data/app/pb_kits/playbook/packs/kits.js +4 -2
- data/app/pb_kits/playbook/pb_avatar/_avatar.jsx +1 -1
- data/app/pb_kits/playbook/pb_body/_body_mixins.scss +3 -0
- data/app/pb_kits/playbook/pb_button/_button.jsx +4 -0
- data/app/pb_kits/playbook/pb_card/_card.scss +50 -17
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.html.erb +10 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx +30 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss +32 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb +22 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_dark.html.erb +29 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_dark.jsx +38 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.html.erb +25 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.jsx +34 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml +9 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.html.erb +1 -1
- data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.rb +4 -0
- data/app/pb_kits/playbook/pb_date/_date.jsx +51 -17
- data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +10 -2
- data/app/pb_kits/playbook/pb_form/_form.scss +11 -0
- data/app/pb_kits/playbook/pb_form/_form_form_with.html.erb +3 -0
- data/app/pb_kits/playbook/pb_form/_form_simple_form.html.erb +3 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +14 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +36 -0
- data/app/pb_kits/playbook/pb_form/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_form/form.rb +28 -0
- data/app/pb_kits/playbook/pb_form/form/form_with_form.rb +38 -0
- data/app/pb_kits/playbook/pb_form/form/simple_form_form.rb +45 -0
- data/app/pb_kits/playbook/pb_form/form_builder.rb +23 -0
- data/app/pb_kits/playbook/pb_form/form_builder/action_area.rb +40 -0
- data/app/pb_kits/playbook/pb_form/form_builder/form_with_form_builder.rb +11 -0
- data/app/pb_kits/playbook/pb_form/form_builder/simple_form_builder.rb +25 -0
- data/app/pb_kits/playbook/pb_form/form_builder/text_input_builder.rb +22 -0
- data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.jsx +19 -14
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.jsx +19 -0
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_default.jsx +5 -4
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_size.jsx +16 -0
- data/app/pb_kits/playbook/pb_icon_circle/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_icon_circle/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_kit/dateTime.js +4 -0
- data/app/pb_kits/playbook/pb_layout/_layout.jsx +50 -48
- data/app/pb_kits/playbook/pb_layout/_layout.scss +8 -12
- data/app/pb_kits/playbook/pb_layout/_layout_mixin.scss +6 -0
- data/app/pb_kits/playbook/pb_layout/docs/_layout_colors.html.erb +24 -0
- data/app/pb_kits/playbook/pb_layout/docs/_layout_default.jsx +15 -0
- data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes.html.erb +32 -0
- data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes_dark.html.erb +32 -0
- data/app/pb_kits/playbook/pb_layout/docs/_layout_transparent.html.erb +8 -0
- data/app/pb_kits/playbook/pb_layout/docs/example.yml +5 -11
- data/app/pb_kits/playbook/pb_layout/docs/index.js +1 -1
- data/app/pb_kits/playbook/pb_layout/layout.rb +5 -7
- data/app/pb_kits/playbook/pb_message/_message.jsx +68 -11
- data/app/pb_kits/playbook/pb_message/docs/_message_default.jsx +59 -2
- data/app/pb_kits/playbook/pb_section_separator/_section_separator.jsx +23 -16
- data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +15 -6
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.jsx +10 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx +10 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.html.erb +1 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.jsx +12 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/example.yml +4 -2
- data/app/pb_kits/playbook/pb_section_separator/docs/index.js +3 -1
- data/app/pb_kits/playbook/pb_section_separator/section_separator.rb +4 -1
- data/app/pb_kits/playbook/pb_select/_select.html.erb +33 -0
- data/app/pb_kits/playbook/pb_select/_select.jsx +110 -0
- data/app/pb_kits/playbook/pb_select/_select.scss +50 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_blank.html.erb +19 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_blank.jsx +30 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_custom_select.html.erb +8 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_custom_select.jsx +19 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_dark.html.erb +24 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_dark.jsx +31 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_default.html.erb +23 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_default.jsx +30 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_disabled.html.erb +19 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_disabled.jsx +30 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_disabled_options.html.erb +33 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_disabled_options.jsx +44 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_required.html.erb +17 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_required.jsx +28 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_value_text_same.html.erb +18 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_value_text_same.jsx +29 -0
- data/app/pb_kits/playbook/pb_select/docs/example.yml +22 -0
- data/app/pb_kits/playbook/pb_select/docs/index.js +8 -0
- data/app/pb_kits/playbook/pb_select/docs/nitro_theme.gemspec +41 -0
- data/app/pb_kits/playbook/pb_select/select.rb +60 -0
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.html.erb +25 -0
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx +97 -0
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +87 -0
- data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_block.html.erb +25 -0
- data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_block.jsx +48 -0
- data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_dark.html.erb +45 -0
- data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_dark.jsx +68 -0
- data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.html.erb +39 -0
- data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.jsx +67 -0
- data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.html.erb +30 -0
- data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.jsx +54 -0
- data/app/pb_kits/playbook/pb_selectable_card/docs/example.yml +13 -0
- data/app/pb_kits/playbook/pb_selectable_card/docs/index.js +4 -0
- data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb +51 -0
- data/app/pb_kits/playbook/pb_stat_value/_stat_value.html.erb +1 -1
- data/app/pb_kits/playbook/pb_stat_value/stat_value.rb +5 -0
- data/app/pb_kits/playbook/pb_text_input/_text_input.html.erb +13 -9
- data/app/pb_kits/playbook/pb_text_input/_text_input.jsx +12 -6
- data/app/pb_kits/playbook/pb_text_input/_text_input.scss +44 -44
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +68 -12
- data/app/pb_kits/playbook/pb_textarea/_textarea.html.erb +20 -0
- data/app/pb_kits/playbook/pb_textarea/_textarea.jsx +54 -0
- data/app/pb_kits/playbook/pb_textarea/_textarea.scss +31 -0
- data/app/pb_kits/playbook/pb_textarea/_textarea_mixin.scss +51 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_custom.html.erb +3 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_custom.jsx +16 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_dark.html.erb +9 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_dark.jsx +21 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb +9 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx +21 -0
- data/app/pb_kits/playbook/pb_textarea/docs/example.yml +15 -0
- data/app/pb_kits/playbook/pb_textarea/docs/index.js +3 -0
- data/app/pb_kits/playbook/pb_textarea/textarea.rb +30 -0
- data/app/pb_kits/playbook/pb_title/_title_mixin.scss +3 -1
- data/app/pb_kits/playbook/pb_user/_user.html.erb +3 -1
- data/app/pb_kits/playbook/pb_user/_user.jsx +76 -16
- data/app/pb_kits/playbook/pb_user/docs/_user_default.jsx +42 -1
- data/app/pb_kits/playbook/pb_user/docs/_user_size.jsx +31 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_text_only.jsx +24 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_vertical_size.jsx +37 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_with_territory.html.erb +40 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_with_territory.jsx +57 -0
- data/app/pb_kits/playbook/pb_user/docs/example.yml +8 -0
- data/app/pb_kits/playbook/pb_user/docs/index.js +5 -0
- data/app/pb_kits/playbook/pb_user/user.rb +12 -1
- data/app/pb_kits/playbook/props.rb +11 -3
- data/app/pb_kits/playbook/tokens/_colors.scss +16 -0
- data/app/pb_kits/playbook/tokens/_transition.scss +1 -0
- data/lib/playbook/version.rb +1 -1
- metadata +117 -15
- data/app/pb_kits/playbook/pb_layout/docs/_layout_lg.html.erb +0 -4
- data/app/pb_kits/playbook/pb_layout/docs/_layout_lg_dark.html.erb +0 -4
- data/app/pb_kits/playbook/pb_layout/docs/_layout_md.html.erb +0 -4
- data/app/pb_kits/playbook/pb_layout/docs/_layout_md_dark.html.erb +0 -4
- data/app/pb_kits/playbook/pb_layout/docs/_layout_sm.html.erb +0 -4
- data/app/pb_kits/playbook/pb_layout/docs/_layout_sm_dark.html.erb +0 -4
- data/app/pb_kits/playbook/pb_layout/docs/_layout_xl.html.erb +0 -4
- data/app/pb_kits/playbook/pb_layout/docs/_layout_xl_dark.html.erb +0 -4
- data/app/pb_kits/playbook/pb_layout/docs/_layout_xs.html.erb +0 -4
- data/app/pb_kits/playbook/pb_layout/docs/_layout_xs.jsx +0 -15
- data/app/pb_kits/playbook/pb_layout/docs/_layout_xs_dark.html.erb +0 -4
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_default.jsx +0 -10
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: a5c588c16151accc6e7e39a6cc6ab93d458fd77d8be2c0af8f2aac9159362473
|
4
|
+
data.tar.gz: 5ab3e3623095f1c32f8fa173186364df352733cda08867438c994b3bfd418eb0
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 3ea382d89bcec99c3440ccac5dbae6028127e9e48ac08e7d6884a090c611cdb788903eb1b0aac554f832c19074f6775c8e95d27d71cd70fdca7759fc11d55b41
|
7
|
+
data.tar.gz: 22c10a616f5eaebc260a94ac11c3564002802168200b002c94a45e6d374b57be3a291e78e129e3710d3b99c62a2b9ffb22551c1f9b390a56dd935dfde7128936
|
@@ -1,11 +1,13 @@
|
|
1
|
-
@import 'pb_avatar/avatar';
|
2
|
-
@import 'pb_badge/badge';
|
3
|
-
@import 'pb_bar_graph/bar_graph';
|
4
1
|
@import "pb_body/body";
|
5
2
|
@import "pb_button/button";
|
6
3
|
@import "pb_caption/caption";
|
7
4
|
@import "pb_card/card";
|
5
|
+
@import "pb_title/title";
|
6
|
+
@import 'pb_avatar/avatar';
|
7
|
+
@import 'pb_badge/badge';
|
8
|
+
@import 'pb_bar_graph/bar_graph';
|
8
9
|
@import 'pb_checkbox/checkbox';
|
10
|
+
@import 'pb_circle_icon_button/circle_icon_button';
|
9
11
|
@import 'pb_contact/contact';
|
10
12
|
@import 'pb_currency/currency';
|
11
13
|
@import 'pb_dashboard_value/dashboard_value';
|
@@ -15,6 +17,7 @@
|
|
15
17
|
@import 'pb_date_year_stacked/date_year_stacked';
|
16
18
|
@import 'pb_distribution_bar/distribution_bar';
|
17
19
|
@import 'pb_fixed_confirmation_toast/fixed_confirmation_toast';
|
20
|
+
@import 'pb_form/form';
|
18
21
|
@import 'pb_hashtag/hashtag';
|
19
22
|
@import 'pb_home_address_street/home_address_street';
|
20
23
|
@import 'pb_icon/icon';
|
@@ -29,6 +32,7 @@
|
|
29
32
|
@import 'pb_loading_inline/loading_inline';
|
30
33
|
@import 'pb_message/message';
|
31
34
|
@import 'pb_multiple_users/multiple_users';
|
35
|
+
@import 'pb_multiple_users/multiple_users';
|
32
36
|
@import 'pb_nav/nav';
|
33
37
|
@import 'pb_online_status/online_status';
|
34
38
|
@import 'pb_person/person';
|
@@ -37,15 +41,17 @@
|
|
37
41
|
@import 'pb_progress_pills/progress_pills';
|
38
42
|
@import 'pb_progress_simple/progress_simple';
|
39
43
|
@import 'pb_section_separator/section_separator';
|
44
|
+
@import 'pb_select/select';
|
45
|
+
@import 'pb_selectable_card/selectable_card';
|
40
46
|
@import 'pb_source/source';
|
41
47
|
@import 'pb_star_rating/star_rating';
|
42
48
|
@import 'pb_stat_change/stat_change';
|
43
49
|
@import 'pb_stat_value/stat_value';
|
44
50
|
@import 'pb_table/table';
|
45
51
|
@import 'pb_text_input/text_input';
|
52
|
+
@import 'pb_textarea/textarea';
|
46
53
|
@import 'pb_time/time';
|
47
54
|
@import 'pb_timestamp/timestamp';
|
48
|
-
@import "pb_title/title";
|
49
55
|
@import 'pb_title_count/title_count';
|
50
56
|
@import 'pb_title_detail/title_detail';
|
51
57
|
@import 'pb_toggle/toggle';
|
@@ -7,9 +7,11 @@ import Button from "./pb_button/_button.jsx"
|
|
7
7
|
import Caption from "./pb_caption/_caption.jsx"
|
8
8
|
import Card from "./pb_card/_card.jsx"
|
9
9
|
import Checkbox from "./pb_checkbox/_checkbox.jsx"
|
10
|
+
import CircleIconButton from "./pb_circle_icon_button/_circle_icon_button.jsx"
|
10
11
|
import Contact from "./pb_contact/_contact.jsx"
|
11
12
|
import Currency from "./pb_currency/_currency.jsx"
|
12
13
|
import DashboardValue from "./pb_dashboard_value/_dashboard_value.jsx"
|
14
|
+
import Date from "./pb_date/_date.jsx"
|
13
15
|
import DateRangeInline from "./pb_date_range_inline/_date_range_inline.jsx"
|
14
16
|
import DateYearStacked from "./pb_date_year_stacked/_date_year_stacked.jsx"
|
15
17
|
import DistributionBar from "./pb_distribution_bar/_distribution_bar.jsx"
|
@@ -37,11 +39,14 @@ import Pill from "./pb_pill/_pill.jsx"
|
|
37
39
|
import ProgressPills from "./pb_progress_pills/_progress_pills.jsx"
|
38
40
|
import ProgressSimple from "./pb_progress_simple/_progress_simple.jsx"
|
39
41
|
import SectionSeparator from "./pb_section_separator/_section_separator.jsx"
|
42
|
+
import Select from "./pb_select/_select.jsx"
|
43
|
+
import SelectableCard from "./pb_selectable_card/_selectable_card.jsx"
|
40
44
|
import Source from "./pb_source/_source.jsx"
|
41
45
|
import StarRating from "./pb_star_rating/_star_rating.jsx"
|
42
46
|
import StatChange from "./pb_stat_change/_stat_change.jsx"
|
43
47
|
import StatValue from "./pb_stat_value/_stat_value.jsx"
|
44
48
|
import Table from "./pb_table/_table.jsx"
|
49
|
+
import Textarea from "./pb_textarea/_textarea.jsx"
|
45
50
|
import TextInput from "./pb_text_input/_text_input.jsx"
|
46
51
|
import Time from "./pb_time/_time.jsx"
|
47
52
|
import TimeStamp from "./pb_timestamp/_timestamp.jsx"
|
@@ -71,12 +76,14 @@ export {
|
|
71
76
|
Caption,
|
72
77
|
Card,
|
73
78
|
Checkbox,
|
79
|
+
CircleIconButton,
|
74
80
|
commonSettings,
|
75
81
|
Contact,
|
76
82
|
Currency,
|
77
83
|
DashboardValue,
|
78
84
|
dashboardValueSettings,
|
79
85
|
dataColors,
|
86
|
+
Date,
|
80
87
|
DateRangeInline,
|
81
88
|
DateYearStacked,
|
82
89
|
DistributionBar,
|
@@ -106,11 +113,14 @@ export {
|
|
106
113
|
ProgressPills,
|
107
114
|
ProgressSimple,
|
108
115
|
SectionSeparator,
|
116
|
+
Select,
|
117
|
+
SelectableCard,
|
109
118
|
Source,
|
110
119
|
StarRating,
|
111
120
|
StatChange,
|
112
121
|
StatValue,
|
113
122
|
Table,
|
123
|
+
Textarea,
|
114
124
|
TextInput,
|
115
125
|
Time,
|
116
126
|
TimeStamp,
|
@@ -20,6 +20,7 @@ import * as button from "pb_button/docs";
|
|
20
20
|
import * as caption from "pb_caption/docs";
|
21
21
|
import * as card from "pb_card/docs";
|
22
22
|
import * as Checkbox from "pb_checkbox/docs";
|
23
|
+
import * as CircleIconButton from "pb_circle_icon_button/docs";
|
23
24
|
import * as Contact from "pb_contact/docs";
|
24
25
|
import * as Currency from "pb_currency/docs";
|
25
26
|
import * as DashboardValue from "pb_dashboard_value/docs";
|
@@ -51,11 +52,14 @@ import * as Pill from "pb_pill/docs";
|
|
51
52
|
import * as ProgressPills from "pb_progress_pills/docs";
|
52
53
|
import * as ProgressSimple from "pb_progress_simple/docs";
|
53
54
|
import * as SectionSeparator from "pb_section_separator/docs";
|
55
|
+
import * as Select from "pb_select/docs";
|
56
|
+
import * as SelectableCard from "pb_selectable_card/docs";
|
54
57
|
import * as Source from "pb_source/docs";
|
55
58
|
import * as StarRating from "pb_star_rating/docs";
|
56
59
|
import * as StatChange from "pb_stat_change/docs";
|
57
60
|
import * as StatValue from "pb_stat_value/docs";
|
58
61
|
import * as table from "pb_table/docs";
|
62
|
+
import * as Textarea from "pb_textarea/docs";
|
59
63
|
import * as TextInput from "pb_text_input/docs";
|
60
64
|
import * as Time from "pb_time/docs";
|
61
65
|
import * as Timestamp from "pb_timestamp/docs";
|
@@ -74,6 +78,7 @@ WebpackerReact.setup (button);
|
|
74
78
|
WebpackerReact.setup (caption);
|
75
79
|
WebpackerReact.setup (card);
|
76
80
|
WebpackerReact.setup (Checkbox);
|
81
|
+
WebpackerReact.setup (CircleIconButton);
|
77
82
|
WebpackerReact.setup (Contact);
|
78
83
|
WebpackerReact.setup (Currency);
|
79
84
|
WebpackerReact.setup (DashboardValue);
|
@@ -105,11 +110,14 @@ WebpackerReact.setup (Pill);
|
|
105
110
|
WebpackerReact.setup (ProgressPills);
|
106
111
|
WebpackerReact.setup (ProgressSimple);
|
107
112
|
WebpackerReact.setup (SectionSeparator);
|
113
|
+
WebpackerReact.setup (Select);
|
114
|
+
WebpackerReact.setup (SelectableCard);
|
108
115
|
WebpackerReact.setup (Source);
|
109
116
|
WebpackerReact.setup (StarRating);
|
110
117
|
WebpackerReact.setup (StatChange);
|
111
118
|
WebpackerReact.setup (StatValue);
|
112
119
|
WebpackerReact.setup (table);
|
120
|
+
WebpackerReact.setup (Textarea);
|
113
121
|
WebpackerReact.setup (TextInput);
|
114
122
|
WebpackerReact.setup (Time);
|
115
123
|
WebpackerReact.setup (Timestamp);
|
@@ -6,6 +6,7 @@ import "../kits/pb_button.js";
|
|
6
6
|
import "../kits/pb_caption.js";
|
7
7
|
import "../kits/pb_card.js";
|
8
8
|
import "../kits/pb_checkbox.js";
|
9
|
+
import "../kits/pb_circle_icon_button.js";
|
9
10
|
import "../kits/pb_contact.js";
|
10
11
|
import "../kits/pb_currency.js";
|
11
12
|
import "../kits/pb_dashboard_value.js";
|
@@ -36,12 +37,15 @@ import "../kits/pb_pill.js";
|
|
36
37
|
import "../kits/pb_progress_pills.js";
|
37
38
|
import "../kits/pb_progress_simple.js";
|
38
39
|
import "../kits/pb_section_separator.js";
|
40
|
+
import "../kits/pb_select.js";
|
41
|
+
import "../kits/pb_selectable_card.js";
|
39
42
|
import "../kits/pb_source.js";
|
40
43
|
import "../kits/pb_star_rating.js";
|
41
44
|
import "../kits/pb_stat_change.js";
|
42
45
|
import "../kits/pb_stat_value.js";
|
43
46
|
import "../kits/pb_table.js";
|
44
47
|
import "../kits/pb_text_input.js";
|
48
|
+
import "../kits/pb_textarea.js";
|
45
49
|
import "../kits/pb_time.js";
|
46
50
|
import "../kits/pb_timestamp.js";
|
47
51
|
import "../kits/pb_title.js";
|
@@ -50,5 +54,3 @@ import "../kits/pb_title_detail.js";
|
|
50
54
|
import "../kits/pb_toggle.js";
|
51
55
|
import "../kits/pb_user.js";
|
52
56
|
import "../kits/pb_user_badge.js";
|
53
|
-
|
54
|
-
|
@@ -21,8 +21,11 @@ $pb_body_status: (
|
|
21
21
|
line-height: $lh_tight;
|
22
22
|
color: $color;
|
23
23
|
font-size: $text_default;
|
24
|
+
font-weight: $regular;
|
25
|
+
font-family: $font-family-base;
|
24
26
|
}
|
25
27
|
|
28
|
+
|
26
29
|
// Colors ======================
|
27
30
|
@mixin pb_body_light {
|
28
31
|
@include pb_body($text_lt_light);
|
@@ -15,6 +15,7 @@ type ButtonPropTypes = {
|
|
15
15
|
fixedWidth?: Boolean,
|
16
16
|
fullWidth?: Boolean,
|
17
17
|
icon?: String,
|
18
|
+
id?: String,
|
18
19
|
loading?: Boolean,
|
19
20
|
newWindow?: Boolean,
|
20
21
|
onClick?: EventHandler,
|
@@ -68,6 +69,7 @@ const Button = (props: ButtonPropTypes) => {
|
|
68
69
|
children,
|
69
70
|
className,
|
70
71
|
icon = null,
|
72
|
+
id,
|
71
73
|
loading = false,
|
72
74
|
onClick = () => {},
|
73
75
|
link = null,
|
@@ -98,6 +100,7 @@ const Button = (props: ButtonPropTypes) => {
|
|
98
100
|
{...buttonAria}
|
99
101
|
className={css}
|
100
102
|
href={link}
|
103
|
+
id={id}
|
101
104
|
target={newWindow ? '_blank' : null}>
|
102
105
|
<If condition={loading}>{loadingIcon}</If>
|
103
106
|
{content}
|
@@ -106,6 +109,7 @@ const Button = (props: ButtonPropTypes) => {
|
|
106
109
|
<button
|
107
110
|
{...buttonAria}
|
108
111
|
className={css}
|
112
|
+
id={id}
|
109
113
|
onClick={onClick}
|
110
114
|
type={htmlType}
|
111
115
|
value={value}>
|
@@ -2,6 +2,8 @@
|
|
2
2
|
@import "../tokens/border_radius";
|
3
3
|
@import "../tokens/shadows";
|
4
4
|
@import "../tokens/colors";
|
5
|
+
@import "../tokens/transition";
|
6
|
+
@import "../tokens/animation-curves";
|
5
7
|
@import "child_kits/card_body";
|
6
8
|
|
7
9
|
$pb_card_border_width: 1px;
|
@@ -9,21 +11,63 @@ $pb_card_border_radius: $border_rad_heavier;
|
|
9
11
|
$pb_card_highlight_colors: map-merge($status_colors, $product_colors);
|
10
12
|
$pb_card_highlight_size: 4px;
|
11
13
|
|
12
|
-
|
14
|
+
@mixin pb_card_selected($border_color: $primary) {
|
15
|
+
border-color: $border_color;
|
16
|
+
border-width: $pb_card_border_width * 2;
|
17
|
+
}
|
18
|
+
|
19
|
+
@mixin pb_card_selected_dark {
|
20
|
+
@include pb_card_selected($primary_action);
|
21
|
+
}
|
22
|
+
|
23
|
+
@mixin pb_card($background: $card_light, $border_color: $border_light) {
|
13
24
|
position: relative;
|
14
25
|
display: flex;
|
15
26
|
flex-direction: column;
|
16
27
|
min-width: 0;
|
17
28
|
word-wrap: break-word;
|
18
|
-
background-color: $
|
29
|
+
background-color: $background;
|
19
30
|
background-clip: border-box;
|
20
|
-
border: $pb_card_border_width
|
31
|
+
border-width: $pb_card_border_width;
|
32
|
+
border-style: solid;
|
33
|
+
border-color: $border_color;
|
21
34
|
border-radius: $pb_card_border_radius;
|
22
|
-
transition: all
|
35
|
+
transition-property: all;
|
36
|
+
transition-duration: $transition_short;
|
37
|
+
transition-timing-function: $easeIn;
|
38
|
+
|
39
|
+
@each $name, $shadow in $box_shadows {
|
40
|
+
&[class*=_#{$name}] {
|
41
|
+
box-shadow: $shadow;
|
42
|
+
}
|
43
|
+
}
|
44
|
+
}
|
45
|
+
|
46
|
+
@mixin pb_card_dark {
|
47
|
+
@include pb_card($card_dark, $border_dark);
|
48
|
+
}
|
49
|
+
|
50
|
+
@mixin pb_card_highlight($width, $height, $background){
|
51
|
+
content: "";
|
52
|
+
position: absolute;
|
53
|
+
top: 0;
|
54
|
+
left: 0;
|
55
|
+
width: $width;
|
56
|
+
height: $height;
|
57
|
+
background: $background;
|
58
|
+
z-index: 10;
|
59
|
+
}
|
60
|
+
|
61
|
+
[class^=pb_card_kit] {
|
62
|
+
@include pb_card;
|
23
63
|
|
24
64
|
&[class*=_selected] {
|
25
|
-
|
26
|
-
|
65
|
+
@include pb_card_selected;
|
66
|
+
}
|
67
|
+
&[class*=_dark] {
|
68
|
+
&[class*=_selected] {
|
69
|
+
@include pb_card_selected_dark;
|
70
|
+
}
|
27
71
|
}
|
28
72
|
|
29
73
|
@each $name, $shadow in $box_shadows {
|
@@ -32,17 +76,6 @@ $pb_card_highlight_size: 4px;
|
|
32
76
|
}
|
33
77
|
}
|
34
78
|
|
35
|
-
@mixin pb_card_highlight($width, $height, $background){
|
36
|
-
content: "";
|
37
|
-
position: absolute;
|
38
|
-
top: 0;
|
39
|
-
left: 0;
|
40
|
-
width: $width;
|
41
|
-
height: $height;
|
42
|
-
background: $background;
|
43
|
-
z-index: 10;
|
44
|
-
}
|
45
|
-
|
46
79
|
&[class*=_highlight] {
|
47
80
|
overflow: hidden;
|
48
81
|
}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
<%= content_tag(:div,
|
2
|
+
id: object.id,
|
3
|
+
data: object.data,
|
4
|
+
class: object.classname) do %>
|
5
|
+
|
6
|
+
<%= pb_rails("button", props: {variant: object.variant, disabled: object.disabled, dark: object.dark}) do %>
|
7
|
+
<%= pb_rails("icon", props: {icon: object.icon, fixed_width: true, dark: object.dark}) %>
|
8
|
+
<% end %>
|
9
|
+
|
10
|
+
<% end %>
|
@@ -0,0 +1,30 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import {Button, Icon} from "../"
|
3
|
+
|
4
|
+
type CircleIconButtonProps = {
|
5
|
+
variant?: 'primary' | 'secondary' | 'link',
|
6
|
+
disabled?: Boolean,
|
7
|
+
dark?: Boolean,
|
8
|
+
className?: String,
|
9
|
+
icon: String,
|
10
|
+
id?: String,
|
11
|
+
};
|
12
|
+
|
13
|
+
const CircleIconButton = (props: CircleIconButtonProps) => {
|
14
|
+
const {
|
15
|
+
variant,
|
16
|
+
disabled,
|
17
|
+
icon,
|
18
|
+
dark
|
19
|
+
} = props
|
20
|
+
|
21
|
+
return (
|
22
|
+
<div className={'pb_circle_icon_button_kit'}>
|
23
|
+
<Button text={null} variant={variant} disabled={disabled} dark={dark}>
|
24
|
+
<Icon fixedWidth icon={icon} />
|
25
|
+
</Button>
|
26
|
+
</div>
|
27
|
+
);
|
28
|
+
}
|
29
|
+
|
30
|
+
export default CircleIconButton;
|
@@ -0,0 +1,32 @@
|
|
1
|
+
@import "../pb_button/button";
|
2
|
+
@import "../pb_button/button_mixins";
|
3
|
+
|
4
|
+
$pb_button_styles: [
|
5
|
+
"primary",
|
6
|
+
"secondary",
|
7
|
+
"link",
|
8
|
+
];
|
9
|
+
|
10
|
+
@mixin pb_circle_icon_button {
|
11
|
+
position: relative;
|
12
|
+
display: flex;
|
13
|
+
justify-content: center;
|
14
|
+
align-items: center;
|
15
|
+
flex-shrink: 0;
|
16
|
+
flex-grow: 0;
|
17
|
+
width: $pb_button_size;
|
18
|
+
height: $pb_button_size;
|
19
|
+
border-radius: $pb_button_size/2;
|
20
|
+
line-height: $pb_button_size;
|
21
|
+
flex-basis: $pb_button_size;
|
22
|
+
min-width: $pb_button_size;
|
23
|
+
padding: 0;
|
24
|
+
}
|
25
|
+
|
26
|
+
[class^=pb_circle_icon_button_kit] {
|
27
|
+
@each $style in $pb_button_styles {
|
28
|
+
[class^=pb_button_kit][class*=_#{$style}] {
|
29
|
+
@include pb_circle_icon_button;
|
30
|
+
}
|
31
|
+
}
|
32
|
+
}
|