playbook_ui 12.5.0.pre.alpha.phonerails1 → 12.6.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 +2 -0
- data/app/pb_kits/playbook/data/menu.yml +2 -1
- data/app/pb_kits/playbook/index.js +1 -0
- data/app/pb_kits/playbook/pb_button/_button_mixins.scss +2 -2
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss +1 -1
- data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx +72 -0
- data/app/pb_kits/playbook/pb_filter/Filter/{FilterBackground.jsx → FilterBackground.tsx} +12 -14
- data/app/pb_kits/playbook/pb_filter/Filter/{FilterDouble.jsx → FilterDouble.tsx} +7 -8
- data/app/pb_kits/playbook/pb_filter/Filter/{FilterSingle.jsx → FilterSingle.tsx} +25 -25
- data/app/pb_kits/playbook/pb_filter/Filter/{FiltersPopover.jsx → FiltersPopover.tsx} +13 -11
- data/app/pb_kits/playbook/pb_filter/Filter/{ResultsCount.jsx → ResultsCount.tsx} +39 -14
- data/app/pb_kits/playbook/pb_filter/Filter/{SortMenu.jsx → SortMenu.tsx} +6 -6
- data/app/pb_kits/playbook/pb_filter/Filter/{index.jsx → index.tsx} +17 -10
- data/app/pb_kits/playbook/pb_filter/{_filter.jsx → _filter.tsx} +0 -2
- data/app/pb_kits/playbook/pb_list/_list.tsx +2 -2
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss +86 -0
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +81 -0
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_select_helper.tsx +30 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +86 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md +3 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +6 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/helper_functions.ts +60 -0
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx +40 -0
- data/app/pb_kits/playbook/pb_person_contact/{_person_contact.jsx → _person_contact.tsx} +19 -22
- data/app/pb_kits/playbook/pb_person_contact/person_contact.test.js +112 -0
- data/app/pb_kits/playbook/pb_popover/_popover.tsx +33 -32
- data/app/pb_kits/playbook/playbook-doc.js +2 -0
- data/app/pb_kits/playbook/tokens/_animation-curves.scss +30 -30
- data/app/pb_kits/playbook/tokens/_border_radius.scss +15 -16
- data/app/pb_kits/playbook/tokens/_colors.scss +3 -1
- data/app/pb_kits/playbook/tokens/_display.scss +6 -6
- data/app/pb_kits/playbook/tokens/_line_height.scss +7 -7
- data/app/pb_kits/playbook/tokens/_opacity.scss +10 -10
- data/app/pb_kits/playbook/tokens/_positioning.scss +11 -11
- data/app/pb_kits/playbook/tokens/_screen_sizes.scss +10 -10
- data/app/pb_kits/playbook/tokens/_shadows.scss +4 -4
- data/app/pb_kits/playbook/tokens/_spacing.scss +6 -6
- data/app/pb_kits/playbook/tokens/_transition.scss +3 -3
- data/app/pb_kits/playbook/tokens/_typography.scss +35 -46
- data/lib/playbook/version.rb +1 -1
- metadata +24 -14
- data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx +0 -76
@@ -1,37 +1,37 @@
|
|
1
|
-
$bezier: cubic-bezier(.64, 0, .35, 1);
|
1
|
+
$bezier: cubic-bezier(.64, 0, .35, 1) !default;
|
2
2
|
// +transition-timing-function(cubic-bezier(0.7, 0, 0.3, 1))
|
3
3
|
|
4
4
|
/* Default Equations */
|
5
|
-
$linear: cubic-bezier(0.250, 0.250, 0.750, 0.750);
|
6
|
-
$ease: cubic-bezier(0.250, 0.100, 0.250, 1.000);
|
7
|
-
$easeIn: cubic-bezier(0.420, 0.000, 1.000, 1.000);
|
8
|
-
$easeOut: cubic-bezier(0.000, 0.000, 0.580, 1.000);
|
9
|
-
$easeInOut: cubic-bezier(0.420, 0.000, 0.580, 1.000);
|
5
|
+
$linear: cubic-bezier(0.250, 0.250, 0.750, 0.750) !default;
|
6
|
+
$ease: cubic-bezier(0.250, 0.100, 0.250, 1.000) !default;
|
7
|
+
$easeIn: cubic-bezier(0.420, 0.000, 1.000, 1.000) !default;
|
8
|
+
$easeOut: cubic-bezier(0.000, 0.000, 0.580, 1.000) !default;
|
9
|
+
$easeInOut: cubic-bezier(0.420, 0.000, 0.580, 1.000) !default;
|
10
10
|
|
11
11
|
/* Penner Equations (approximated) originally created by @robpenner */
|
12
|
-
$easeInQuad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
|
13
|
-
$easeInCubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
14
|
-
$easeInQuart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
|
15
|
-
$easeInQuint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
16
|
-
$easeInSine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
|
17
|
-
$easeInExpo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
|
18
|
-
$easeInCirc: cubic-bezier(0.600, 0.040, 0.980, 0.335);
|
19
|
-
$easeInBack: cubic-bezier(0.600, -0.280, 0.735, 0.045);
|
12
|
+
$easeInQuad: cubic-bezier(0.550, 0.085, 0.680, 0.530) !default;
|
13
|
+
$easeInCubic: cubic-bezier(0.550, 0.055, 0.675, 0.190) !default;
|
14
|
+
$easeInQuart: cubic-bezier(0.895, 0.030, 0.685, 0.220) !default;
|
15
|
+
$easeInQuint: cubic-bezier(0.755, 0.050, 0.855, 0.060) !default;
|
16
|
+
$easeInSine: cubic-bezier(0.470, 0.000, 0.745, 0.715) !default;
|
17
|
+
$easeInExpo: cubic-bezier(0.950, 0.050, 0.795, 0.035) !default;
|
18
|
+
$easeInCirc: cubic-bezier(0.600, 0.040, 0.980, 0.335) !default;
|
19
|
+
$easeInBack: cubic-bezier(0.600, -0.280, 0.735, 0.045) !default;
|
20
20
|
|
21
|
-
$easeOutQuad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
|
22
|
-
$easeOutCubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
23
|
-
$easeOutQuart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
|
24
|
-
$easeOutQuint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
|
25
|
-
$easeOutSine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
|
26
|
-
$easeOutExpo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
|
27
|
-
$easeOutCirc: cubic-bezier(0.075, 0.820, 0.165, 1.000);
|
28
|
-
$easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275);
|
21
|
+
$easeOutQuad: cubic-bezier(0.250, 0.460, 0.450, 0.940) !default;
|
22
|
+
$easeOutCubic: cubic-bezier(0.215, 0.610, 0.355, 1.000) !default;
|
23
|
+
$easeOutQuart: cubic-bezier(0.165, 0.840, 0.440, 1.000) !default;
|
24
|
+
$easeOutQuint: cubic-bezier(0.230, 1.000, 0.320, 1.000) !default;
|
25
|
+
$easeOutSine: cubic-bezier(0.390, 0.575, 0.565, 1.000) !default;
|
26
|
+
$easeOutExpo: cubic-bezier(0.190, 1.000, 0.220, 1.000) !default;
|
27
|
+
$easeOutCirc: cubic-bezier(0.075, 0.820, 0.165, 1.000) !default;
|
28
|
+
$easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275) !default;
|
29
29
|
|
30
|
-
$easeInOutQuad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
|
31
|
-
$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
32
|
-
$easeInOutQuart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
|
33
|
-
$easeInOutQuint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
34
|
-
$easeInOutSine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
|
35
|
-
$easeInOutExpo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
|
36
|
-
$easeInOutCirc: cubic-bezier(0.785, 0.135, 0.150, 0.860);
|
37
|
-
$easeInOutBack: cubic-bezier(0.680, -0.550, 0.265, 1.550);
|
30
|
+
$easeInOutQuad: cubic-bezier(0.455, 0.030, 0.515, 0.955) !default;
|
31
|
+
$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1.000) !default;
|
32
|
+
$easeInOutQuart: cubic-bezier(0.770, 0.000, 0.175, 1.000) !default;
|
33
|
+
$easeInOutQuint: cubic-bezier(0.860, 0.000, 0.070, 1.000) !default;
|
34
|
+
$easeInOutSine: cubic-bezier(0.445, 0.050, 0.550, 0.950) !default;
|
35
|
+
$easeInOutExpo: cubic-bezier(1.000, 0.000, 0.000, 1.000) !default;
|
36
|
+
$easeInOutCirc: cubic-bezier(0.785, 0.135, 0.150, 0.860) !default;
|
37
|
+
$easeInOutBack: cubic-bezier(0.680, -0.550, 0.265, 1.550) !default;
|
@@ -1,20 +1,19 @@
|
|
1
|
-
|
2
1
|
// Border Radius
|
3
|
-
$border_rad_lightest: 1px;
|
4
|
-
$border_rad_lighter: 2px;
|
5
|
-
$border_rad_light: 4px;
|
6
|
-
$border_rad_normal: 0;
|
7
|
-
$border_rad_heavy: 5px;
|
8
|
-
$border_rad_heavier: 6px;
|
9
|
-
$border_rad_heaviest: 7px;
|
10
|
-
$border_rad_mega: 1000px;
|
11
|
-
$border_radius_xs: 4px;
|
12
|
-
$border_radius_sm: 4px;
|
13
|
-
$border_radius_md: 6px;
|
14
|
-
$border_radius_lg: 8px;
|
15
|
-
$border_radius_xl: 16px;
|
16
|
-
$border_radius_rounded: 1000px;
|
17
|
-
$border_radius_none: 0;
|
2
|
+
$border_rad_lightest: 1px !default;
|
3
|
+
$border_rad_lighter: 2px !default;
|
4
|
+
$border_rad_light: 4px !default;
|
5
|
+
$border_rad_normal: 0 !default;
|
6
|
+
$border_rad_heavy: 5px !default;
|
7
|
+
$border_rad_heavier: 6px !default;
|
8
|
+
$border_rad_heaviest: 7px !default;
|
9
|
+
$border_rad_mega: 1000px !default;
|
10
|
+
$border_radius_xs: 4px !default;
|
11
|
+
$border_radius_sm: 4px !default;
|
12
|
+
$border_radius_md: 6px !default;
|
13
|
+
$border_radius_lg: 8px !default;
|
14
|
+
$border_radius_xl: 16px !default;
|
15
|
+
$border_radius_rounded: 1000px !default;
|
16
|
+
$border_radius_none: 0 !default;
|
18
17
|
$border_radius: (
|
19
18
|
lightest: $border_rad_lightest,
|
20
19
|
lighter: $border_rad_lighter,
|
@@ -11,7 +11,7 @@ $teal: #00C4D7 !default;
|
|
11
11
|
$red: #DA0014 !default;
|
12
12
|
$red_dark: #ff4a50 !default;
|
13
13
|
$yellow: #F9BB00 !default;
|
14
|
-
$green: #
|
14
|
+
$green: #1CA05C !default;
|
15
15
|
$orange: #FD804C !default;
|
16
16
|
$default: #93a8b8 !default;
|
17
17
|
$colors: (
|
@@ -75,6 +75,8 @@ $card_colors: (
|
|
75
75
|
);
|
76
76
|
|
77
77
|
$primary-action: $primary !default;
|
78
|
+
$secondary-action: rgba($primary_action, 0.05) !default;
|
79
|
+
|
78
80
|
$action_colors: (
|
79
81
|
primary_action: $primary-action
|
80
82
|
);
|
@@ -1,9 +1,9 @@
|
|
1
|
-
$display_inline: inline;
|
2
|
-
$display_block: block;
|
3
|
-
$display_inline_block: inline-block;
|
4
|
-
$display_flex: flex;
|
5
|
-
$display_none: none;
|
6
|
-
$display_inline_flex: inline-flex;
|
1
|
+
$display_inline: inline !default;
|
2
|
+
$display_block: block !default;
|
3
|
+
$display_inline_block: inline-block !default;
|
4
|
+
$display_flex: flex !default;
|
5
|
+
$display_none: none !default;
|
6
|
+
$display_inline_flex: inline-flex !default;
|
7
7
|
$displays: (
|
8
8
|
display_none: $display_none,
|
9
9
|
display_flex: $display_flex,
|
@@ -1,10 +1,10 @@
|
|
1
|
-
$lh_tightest: 1;
|
2
|
-
$lh_tighter: 1.2;
|
3
|
-
$lh_tight: 1.4;
|
4
|
-
$lh_normal: 1.5;
|
5
|
-
$lh_loose: 1.6;
|
6
|
-
$lh_looser: 1.8;
|
7
|
-
$lh_loosest: 2;
|
1
|
+
$lh_tightest: 1 !default;
|
2
|
+
$lh_tighter: 1.2 !default;
|
3
|
+
$lh_tight: 1.4 !default;
|
4
|
+
$lh_normal: 1.5 !default;
|
5
|
+
$lh_loose: 1.6 !default;
|
6
|
+
$lh_looser: 1.8 !default;
|
7
|
+
$lh_loosest: 2 !default;
|
8
8
|
$line_height: (
|
9
9
|
tightest: $lh_tightest,
|
10
10
|
tighter: $lh_tighter,
|
@@ -1,13 +1,13 @@
|
|
1
|
-
$opacity_1: .1;
|
2
|
-
$opacity_2: .2;
|
3
|
-
$opacity_3: .3;
|
4
|
-
$opacity_4: .4;
|
5
|
-
$opacity_5: .5;
|
6
|
-
$opacity_6: .6;
|
7
|
-
$opacity_7: .7;
|
8
|
-
$opacity_8: .8;
|
9
|
-
$opacity_9: .9;
|
10
|
-
$opacity_10: 1;
|
1
|
+
$opacity_1: .1 !default;
|
2
|
+
$opacity_2: .2 !default;
|
3
|
+
$opacity_3: .3 !default;
|
4
|
+
$opacity_4: .4 !default;
|
5
|
+
$opacity_5: .5 !default;
|
6
|
+
$opacity_6: .6 !default;
|
7
|
+
$opacity_7: .7 !default;
|
8
|
+
$opacity_8: .8 !default;
|
9
|
+
$opacity_9: .9 !default;
|
10
|
+
$opacity_10: 1 !default;
|
11
11
|
$opacity: (
|
12
12
|
opacity_1: $opacity_1,
|
13
13
|
opacity_2: $opacity_2,
|
@@ -1,14 +1,14 @@
|
|
1
1
|
// z_index variables
|
2
|
-
$z_1: 100;
|
3
|
-
$z_2: 200;
|
4
|
-
$z_3: 300;
|
5
|
-
$z_4: 400;
|
6
|
-
$z_5: 500;
|
7
|
-
$z_6: 600;
|
8
|
-
$z_7: 700;
|
9
|
-
$z_8: 800;
|
10
|
-
$z_9: 900;
|
11
|
-
$z_10: 1000;
|
2
|
+
$z_1: 100 !default;
|
3
|
+
$z_2: 200 !default;
|
4
|
+
$z_3: 300 !default;
|
5
|
+
$z_4: 400 !default;
|
6
|
+
$z_5: 500 !default;
|
7
|
+
$z_6: 600 !default;
|
8
|
+
$z_7: 700 !default;
|
9
|
+
$z_8: 800 !default;
|
10
|
+
$z_9: 900 !default;
|
11
|
+
$z_10: 1000 !default;
|
12
12
|
$z_index: (
|
13
13
|
zindex_1: $z_1,
|
14
14
|
zindex_2: $z_1,
|
@@ -26,7 +26,7 @@ $z_layers: (
|
|
26
26
|
"default": 0
|
27
27
|
);
|
28
28
|
|
29
|
-
$offscreen: -9999px;
|
29
|
+
$offscreen: -9999px !default;
|
30
30
|
|
31
31
|
@function z_index_for($layer) {
|
32
32
|
@if not map-has-key($z_layers, $layer) {
|
@@ -1,13 +1,13 @@
|
|
1
|
-
$screen-xs-min: 575px;
|
2
|
-
$screen-xs-max: $screen-xs-min - 1;
|
3
|
-
$screen-sm-min: 576px;
|
4
|
-
$screen-sm-max: $screen-sm-min - 1;
|
5
|
-
$screen-md-min: 768px;
|
6
|
-
$screen-md-max: $screen-md-min - 1;
|
7
|
-
$screen-lg-min: 992px;
|
8
|
-
$screen-lg-max: $screen-lg-min - 1;
|
9
|
-
$screen-xl-min: 1200px;
|
10
|
-
$screen-xl-max: $screen-xl-min - 1;
|
1
|
+
$screen-xs-min: 575px !default;
|
2
|
+
$screen-xs-max: $screen-xs-min - 1 !default;
|
3
|
+
$screen-sm-min: 576px !default;
|
4
|
+
$screen-sm-max: $screen-sm-min - 1 !default;
|
5
|
+
$screen-md-min: 768px !default;
|
6
|
+
$screen-md-max: $screen-md-min - 1 !default;
|
7
|
+
$screen-lg-min: 992px !default;
|
8
|
+
$screen-lg-max: $screen-lg-min - 1 !default;
|
9
|
+
$screen-xl-min: 1200px !default;
|
10
|
+
$screen-xl-max: $screen-xl-min - 1 !default;
|
11
11
|
|
12
12
|
$breakpoints: (
|
13
13
|
xs: $screen-xs-min,
|
@@ -1,10 +1,10 @@
|
|
1
1
|
@import "colors";
|
2
2
|
@import "opacity";
|
3
3
|
|
4
|
-
$shadow_none: 0 0 0 0 transparent;
|
5
|
-
$shadow_deep: 0 4px 10px 0 rgba($shadow, 0.16);
|
6
|
-
$shadow_deeper: 0 12px 28px 0 rgba($shadow, 0.18);
|
7
|
-
$shadow_deepest: 0 30px 38px 4px $shadow, 0 2px 14px 4px rgba($shadow, 0.1);
|
4
|
+
$shadow_none: 0 0 0 0 transparent !default;
|
5
|
+
$shadow_deep: 0 4px 10px 0 rgba($shadow, 0.16) !default;
|
6
|
+
$shadow_deeper: 0 12px 28px 0 rgba($shadow, 0.18) !default;
|
7
|
+
$shadow_deepest: 0 30px 38px 4px $shadow, 0 2px 14px 4px rgba($shadow, 0.1) !default;
|
8
8
|
$box_shadows: (
|
9
9
|
shadow_none: $shadow_none,
|
10
10
|
shadow_deep: $shadow_deep,
|
@@ -1,9 +1,9 @@
|
|
1
|
-
$space_xxs: 4px;
|
2
|
-
$space_xs: 8px;
|
3
|
-
$space_sm: 16px;
|
4
|
-
$space_md: 24px;
|
5
|
-
$space_lg: 32px;
|
6
|
-
$space_xl: 40px;
|
1
|
+
$space_xxs: 4px !default;
|
2
|
+
$space_xs: 8px !default;
|
3
|
+
$space_sm: 16px !default;
|
4
|
+
$space_md: 24px !default;
|
5
|
+
$space_lg: 32px !default;
|
6
|
+
$space_xl: 40px !default;
|
7
7
|
$spaces:(
|
8
8
|
space_xxs: $space_xxs,
|
9
9
|
space_xs: $space_xs,
|
@@ -1,3 +1,3 @@
|
|
1
|
-
$transition_default: 0.3s;
|
2
|
-
$transition_short: 0.15s;
|
3
|
-
$transition_cubic: 0.2s cubic-bezier(0.95, 0.05, 0.795, 0.035);
|
1
|
+
$transition_default: 0.3s !default;
|
2
|
+
$transition_short: 0.15s !default;
|
3
|
+
$transition_cubic: 0.2s cubic-bezier(0.95, 0.05, 0.795, 0.035) !default;
|
@@ -1,56 +1,45 @@
|
|
1
|
-
|
2
1
|
$font_family_base: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif !default;
|
3
2
|
|
4
|
-
|
5
3
|
/* CLEAN UP AND REMOVE */
|
6
|
-
$font_jumbo: 36px;
|
7
|
-
$font_largest: 32px;
|
8
|
-
$font_larger: 28px;
|
9
|
-
$font_large: 20px;
|
10
|
-
$font_base: 16px;
|
11
|
-
$font_default: $font_base;
|
12
|
-
$font_normal: $font_base;
|
13
|
-
$font_medium: $font_base;
|
14
|
-
$font_small: 14px;
|
15
|
-
$font_smaller: 12px;
|
16
|
-
$font_smallest: 11px;
|
17
|
-
|
18
|
-
|
19
|
-
$
|
20
|
-
$
|
21
|
-
$
|
22
|
-
$
|
23
|
-
$
|
24
|
-
$
|
25
|
-
$
|
26
|
-
$
|
27
|
-
$
|
28
|
-
$
|
29
|
-
$text_smallest: $font_smallest;
|
30
|
-
|
4
|
+
$font_jumbo: 36px !default;
|
5
|
+
$font_largest: 32px !default;
|
6
|
+
$font_larger: 28px !default;
|
7
|
+
$font_large: 20px !default;
|
8
|
+
$font_base: 16px !default;
|
9
|
+
$font_default: $font_base !default;
|
10
|
+
$font_normal: $font_base !default;
|
11
|
+
$font_medium: $font_base !default;
|
12
|
+
$font_small: 14px !default;
|
13
|
+
$font_smaller: 12px !default;
|
14
|
+
$font_smallest: 11px !default;
|
15
|
+
|
16
|
+
$text_jumbo: $font_jumbo !default;
|
17
|
+
$text_largest: $font_largest !default;
|
18
|
+
$text_larger: $font_larger !default;
|
19
|
+
$text_large: $font_large !default;
|
20
|
+
$text_base: $font_base !default;
|
21
|
+
$text_default: $font_base !default;
|
22
|
+
$text_normal: $font_base !default;
|
23
|
+
$text_medium: $font_base !default;
|
24
|
+
$text_small: $font_small !default;
|
25
|
+
$text_smaller: $font_smaller !default;
|
26
|
+
$text_smallest: $font_smallest !default;
|
31
27
|
|
32
28
|
/* Headings */
|
33
|
-
$heading_1: 46px;
|
34
|
-
$heading_2: 34px;
|
35
|
-
$heading_3: $font_larger;
|
36
|
-
$heading_4: $font_base;
|
37
|
-
|
38
|
-
|
39
|
-
|
29
|
+
$heading_1: 46px !default;
|
30
|
+
$heading_2: 34px !default;
|
31
|
+
$heading_3: $font_larger !default;
|
32
|
+
$heading_4: $font_base !default;
|
40
33
|
|
41
34
|
// Letter Spacing
|
42
|
-
$lspace_tightest: -.1em;
|
43
|
-
$lspace_tighter: -.07em;
|
44
|
-
$lspace_tight: -.01em;
|
45
|
-
$lspace_normal: 0;
|
46
|
-
$lspace_loose: .03em;
|
47
|
-
$lspace_looser: .07em;
|
48
|
-
$lspace_loosest: .1em;
|
49
|
-
$lspace_super_loosest: .2em;
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
35
|
+
$lspace_tightest: -.1em !default;
|
36
|
+
$lspace_tighter: -.07em !default;
|
37
|
+
$lspace_tight: -.01em !default;
|
38
|
+
$lspace_normal: 0 !default;
|
39
|
+
$lspace_loose: .03em !default;
|
40
|
+
$lspace_looser: .07em !default;
|
41
|
+
$lspace_loosest: .1em !default;
|
42
|
+
$lspace_super_loosest: .2em !default;
|
54
43
|
|
55
44
|
/* Standard Font Weights */
|
56
45
|
$bold: 600 !default;
|
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: 12.
|
4
|
+
version: 12.6.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: 2023-03-
|
12
|
+
date: 2023-03-03 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -910,16 +910,16 @@ files:
|
|
910
910
|
- app/pb_kits/playbook/pb_file_upload/docs/example.yml
|
911
911
|
- app/pb_kits/playbook/pb_file_upload/docs/index.js
|
912
912
|
- app/pb_kits/playbook/pb_file_upload/fileupload.test.js
|
913
|
-
- app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.
|
914
|
-
- app/pb_kits/playbook/pb_filter/Filter/FilterBackground.
|
915
|
-
- app/pb_kits/playbook/pb_filter/Filter/FilterDouble.
|
916
|
-
- app/pb_kits/playbook/pb_filter/Filter/FilterSingle.
|
917
|
-
- app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.
|
918
|
-
- app/pb_kits/playbook/pb_filter/Filter/ResultsCount.
|
919
|
-
- app/pb_kits/playbook/pb_filter/Filter/SortMenu.
|
920
|
-
- app/pb_kits/playbook/pb_filter/Filter/index.
|
921
|
-
- app/pb_kits/playbook/pb_filter/_filter.jsx
|
913
|
+
- app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx
|
914
|
+
- app/pb_kits/playbook/pb_filter/Filter/FilterBackground.tsx
|
915
|
+
- app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx
|
916
|
+
- app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx
|
917
|
+
- app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx
|
918
|
+
- app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx
|
919
|
+
- app/pb_kits/playbook/pb_filter/Filter/SortMenu.tsx
|
920
|
+
- app/pb_kits/playbook/pb_filter/Filter/index.tsx
|
922
921
|
- app/pb_kits/playbook/pb_filter/_filter.scss
|
922
|
+
- app/pb_kits/playbook/pb_filter/_filter.tsx
|
923
923
|
- app/pb_kits/playbook/pb_filter/docs/_description.md
|
924
924
|
- app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb
|
925
925
|
- app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx
|
@@ -1415,6 +1415,15 @@ files:
|
|
1415
1415
|
- app/pb_kits/playbook/pb_message/message.html.erb
|
1416
1416
|
- app/pb_kits/playbook/pb_message/message.rb
|
1417
1417
|
- app/pb_kits/playbook/pb_message/message.test.js
|
1418
|
+
- app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss
|
1419
|
+
- app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx
|
1420
|
+
- app/pb_kits/playbook/pb_multi_level_select/_multi_select_helper.tsx
|
1421
|
+
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx
|
1422
|
+
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md
|
1423
|
+
- app/pb_kits/playbook/pb_multi_level_select/docs/example.yml
|
1424
|
+
- app/pb_kits/playbook/pb_multi_level_select/docs/index.js
|
1425
|
+
- app/pb_kits/playbook/pb_multi_level_select/helper_functions.ts
|
1426
|
+
- app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx
|
1418
1427
|
- app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx
|
1419
1428
|
- app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
|
1420
1429
|
- app/pb_kits/playbook/pb_multiple_users/docs/_description.md
|
@@ -1540,8 +1549,8 @@ files:
|
|
1540
1549
|
- app/pb_kits/playbook/pb_person/person.html.erb
|
1541
1550
|
- app/pb_kits/playbook/pb_person/person.rb
|
1542
1551
|
- app/pb_kits/playbook/pb_person/person.test.js
|
1543
|
-
- app/pb_kits/playbook/pb_person_contact/_person_contact.jsx
|
1544
1552
|
- app/pb_kits/playbook/pb_person_contact/_person_contact.scss
|
1553
|
+
- app/pb_kits/playbook/pb_person_contact/_person_contact.tsx
|
1545
1554
|
- app/pb_kits/playbook/pb_person_contact/docs/_description.md
|
1546
1555
|
- app/pb_kits/playbook/pb_person_contact/docs/_footer.md
|
1547
1556
|
- app/pb_kits/playbook/pb_person_contact/docs/_person_contact_default.html.erb
|
@@ -1556,6 +1565,7 @@ files:
|
|
1556
1565
|
- app/pb_kits/playbook/pb_person_contact/docs/index.js
|
1557
1566
|
- app/pb_kits/playbook/pb_person_contact/person_contact.html.erb
|
1558
1567
|
- app/pb_kits/playbook/pb_person_contact/person_contact.rb
|
1568
|
+
- app/pb_kits/playbook/pb_person_contact/person_contact.test.js
|
1559
1569
|
- app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss
|
1560
1570
|
- app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx
|
1561
1571
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb
|
@@ -2431,9 +2441,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
2431
2441
|
version: '0'
|
2432
2442
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
2433
2443
|
requirements:
|
2434
|
-
- - "
|
2444
|
+
- - ">="
|
2435
2445
|
- !ruby/object:Gem::Version
|
2436
|
-
version:
|
2446
|
+
version: '0'
|
2437
2447
|
requirements: []
|
2438
2448
|
rubygems_version: 3.3.7
|
2439
2449
|
signing_key:
|
@@ -1,76 +0,0 @@
|
|
1
|
-
/* @flow */
|
2
|
-
|
3
|
-
import React from 'react'
|
4
|
-
import { isEmpty, map, omitBy } from 'lodash'
|
5
|
-
|
6
|
-
import Body from '../../pb_body/_body'
|
7
|
-
import Caption from '../../pb_caption/_caption'
|
8
|
-
import Title from '../../pb_title/_title'
|
9
|
-
|
10
|
-
export type FilterDescription = {
|
11
|
-
[key: string]: ?string | boolean,
|
12
|
-
}
|
13
|
-
|
14
|
-
export type CurrentFiltersProps = {
|
15
|
-
dark: boolean,
|
16
|
-
filters: FilterDescription,
|
17
|
-
}
|
18
|
-
|
19
|
-
const hiddenFilters = (value) => isEmpty(value) && value !== true
|
20
|
-
|
21
|
-
const CurrentFilters = ({ dark, filters }: CurrentFiltersProps) => {
|
22
|
-
const displayableFilters = omitBy(filters, hiddenFilters)
|
23
|
-
|
24
|
-
return (
|
25
|
-
<div className="maskContainer">
|
26
|
-
<If condition={isEmpty(filters)}>
|
27
|
-
<div className="filters">
|
28
|
-
<Body
|
29
|
-
color="light"
|
30
|
-
paddingLeft="xs"
|
31
|
-
size={4}
|
32
|
-
tag="h4"
|
33
|
-
text="No Filter Selected"
|
34
|
-
/>
|
35
|
-
</div>
|
36
|
-
</If>
|
37
|
-
<If condition={!isEmpty(filters)}>
|
38
|
-
<div className="filters">
|
39
|
-
<div className="left_gradient" />
|
40
|
-
{map(displayableFilters, (value, name) => (
|
41
|
-
<div
|
42
|
-
className="filter"
|
43
|
-
key={`filter-${name}`}
|
44
|
-
>
|
45
|
-
<Choose>
|
46
|
-
<When condition={value === true}>
|
47
|
-
<Title
|
48
|
-
dark={dark}
|
49
|
-
size={4}
|
50
|
-
tag="h4"
|
51
|
-
text={name}
|
52
|
-
/>
|
53
|
-
</When>
|
54
|
-
<Otherwise>
|
55
|
-
<Caption
|
56
|
-
dark={dark}
|
57
|
-
text={name}
|
58
|
-
/>
|
59
|
-
<Title
|
60
|
-
dark={dark}
|
61
|
-
size={4}
|
62
|
-
tag="h4"
|
63
|
-
text={value}
|
64
|
-
/>
|
65
|
-
</Otherwise>
|
66
|
-
</Choose>
|
67
|
-
</div>
|
68
|
-
))}
|
69
|
-
<div className="right_gradient" />
|
70
|
-
</div>
|
71
|
-
</If>
|
72
|
-
</div>
|
73
|
-
)
|
74
|
-
}
|
75
|
-
|
76
|
-
export default CurrentFilters
|