playbook_ui 13.7.0.pre.alpha.play978makehighchartsadevdependencypoc1223 → 13.8.0.pre.alpha.PLAY962SingleSelect1246

Sign up to get free protection for your applications and to get access to all the features.
Files changed (31) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_currency/_currency.scss +35 -15
  3. data/app/pb_kits/playbook/pb_currency/_currency.tsx +44 -42
  4. data/app/pb_kits/playbook/pb_currency/currency.html.erb +11 -5
  5. data/app/pb_kits/playbook/pb_currency/currency.rb +10 -2
  6. data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.html.erb +14 -0
  7. data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.jsx +30 -0
  8. data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.md +1 -0
  9. data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb +2 -1
  10. data/app/pb_kits/playbook/pb_currency/docs/example.yml +2 -0
  11. data/app/pb_kits/playbook/pb_currency/docs/index.js +1 -0
  12. data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx +27 -22
  13. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss +2 -1
  14. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +234 -109
  15. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +6 -7
  16. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.jsx +1 -1
  17. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb +73 -0
  18. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx +87 -0
  19. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +3 -2
  20. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +2 -1
  21. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +7 -0
  22. data/app/pb_kits/playbook/pb_nav/_item.tsx +12 -9
  23. data/app/pb_kits/playbook/pb_nav/_nav_item.test.js +23 -1
  24. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +6 -0
  25. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +3 -0
  26. data/app/pb_kits/playbook/pb_nav/item.rb +7 -2
  27. data/app/pb_kits/playbook/pb_table/styles/_table_header.scss +9 -9
  28. data/app/pb_kits/playbook/pb_table/table_header.html.erb +10 -2
  29. data/dist/playbook-rails.js +7 -7
  30. data/lib/playbook/version.rb +2 -2
  31. metadata +7 -2
@@ -0,0 +1,87 @@
1
+ import React from "react";
2
+ import MultiLevelSelect from "../_multi_level_select";
3
+
4
+ const treeData = [
5
+ {
6
+ label: "Power Home Remodeling",
7
+ value: "Power Home Remodeling",
8
+ id: "powerhome2",
9
+ expanded: true,
10
+ children: [
11
+ {
12
+ label: "People",
13
+ value: "People",
14
+ id: "people2",
15
+ expanded: true,
16
+ children: [
17
+ {
18
+ label: "Talent Acquisition",
19
+ value: "Talent Acquisition",
20
+ id: "talent2",
21
+ },
22
+ {
23
+ label: "Business Affairs",
24
+ value: "Business Affairs",
25
+ id: "business2",
26
+ children: [
27
+ {
28
+ label: "Initiatives",
29
+ value: "Initiatives",
30
+ id: "initiative2",
31
+ },
32
+ {
33
+ label: "Learning & Development",
34
+ value: "Learning & Development",
35
+ id: "development2",
36
+ },
37
+ ],
38
+ },
39
+ {
40
+ label: "People Experience",
41
+ value: "People Experience",
42
+ id: "experience2",
43
+ },
44
+ ],
45
+ },
46
+ {
47
+ label: "Contact Center",
48
+ value: "Contact Center",
49
+ id: "contact2",
50
+ children: [
51
+ {
52
+ label: "Appointment Management",
53
+ value: "Appointment Management",
54
+ id: "appointment2",
55
+ },
56
+ {
57
+ label: "Customer Service",
58
+ value: "Customer Service",
59
+ id: "customer2",
60
+ },
61
+ {
62
+ label: "Energy",
63
+ value: "Energy",
64
+ id: "energy2",
65
+ },
66
+ ],
67
+ },
68
+ ],
69
+ },
70
+ ];
71
+
72
+ const MultiLevelSelectSingle = (props) => {
73
+ return (
74
+ <div>
75
+ <MultiLevelSelect
76
+ id="multiselect-single"
77
+ inputName="Power"
78
+ onSelect={(selectedNode) => console.log("Selected Node", selectedNode)}
79
+ treeData={treeData}
80
+ variant="single"
81
+ {...props}
82
+ />
83
+ </div>
84
+ )
85
+ };
86
+
87
+ export default MultiLevelSelectSingle;
@@ -1,12 +1,13 @@
1
1
  examples:
2
2
  rails:
3
3
  - multi_level_select_default: Default
4
+ - multi_level_select_single: Single Select
4
5
  - multi_level_select_return_all_selected: Return All Selected
5
6
  - multi_level_select_selected_ids: Selected Ids
6
7
  - multi_level_select_with_form: With Form
7
-
8
+
8
9
  react:
9
10
  - multi_level_select_default: Default
11
+ - multi_level_select_single: Single Select
10
12
  - multi_level_select_return_all_selected: Return All Selected
11
13
  - multi_level_select_selected_ids: Selected Ids
12
-
@@ -1,3 +1,4 @@
1
1
  export { default as MultiLevelSelectDefault } from './_multi_level_select_default.jsx'
2
+ export { default as MultiLevelSelectSingle } from './_multi_level_select_single.jsx'
2
3
  export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
3
- export { default as MultiLevelSelectSelectedIds } from "./_multi_level_select_selected_ids.jsx"
4
+ export { default as MultiLevelSelectSelectedIds } from "./_multi_level_select_selected_ids.jsx"
@@ -14,6 +14,11 @@ module Playbook
14
14
  prop :input_display, type: Playbook::Props::Enum,
15
15
  values: %w[pills none],
16
16
  default: "pills"
17
+ prop :input_name, type: Playbook::Props::String,
18
+ default: ""
19
+ prop :variant, type: Playbook::Props::Enum,
20
+ values: %w[multi single],
21
+ default: "multi"
17
22
 
18
23
  def classname
19
24
  generate_classname("pb_multi_level_select")
@@ -27,6 +32,8 @@ module Playbook
27
32
  treeData: tree_data,
28
33
  returnAllSelected: return_all_selected,
29
34
  selectedIds: selected_ids,
35
+ input_name: input_name,
36
+ variant: variant,
30
37
  }
31
38
  end
32
39
  end
@@ -12,6 +12,7 @@ import { Spacing } from "../types";
12
12
 
13
13
  type NavItemProps = {
14
14
  active?: boolean;
15
+ highlighted_border?: boolean;
15
16
  aria?: { [key: string]: string };
16
17
  fontWeight?: "regular" | "bold" | "bolder";
17
18
  children?: React.ReactNode[] | React.ReactNode;
@@ -44,7 +45,7 @@ type NavItemProps = {
44
45
  } & GlobalProps;
45
46
 
46
47
  const NavItem = (props: NavItemProps) => {
47
-
48
+
48
49
  const fontWeightDefault = (orientation: string, variant: string) => {
49
50
  return orientation === "horizontal" && variant === "subtle"
50
51
  ? "regular"
@@ -55,6 +56,7 @@ const NavItem = (props: NavItemProps) => {
55
56
 
56
57
  const {
57
58
  active = false,
59
+ highlighted_border = true,
58
60
  aria = {},
59
61
  orientation,
60
62
  variant,
@@ -97,7 +99,7 @@ const NavItem = (props: NavItemProps) => {
97
99
  marginY,
98
100
  };
99
101
 
100
- //separate margin props and padding props in itemSpacing object
102
+ //separate margin props and padding props in itemSpacing object
101
103
  const filterItemSpacing = (obj: { [key: string]: string }) => {
102
104
  const filteredPadding: { [key: string]: string } = {};
103
105
  const filteredMargin: { [key: string]: string } = {};
@@ -114,7 +116,7 @@ const filterItemSpacing = (obj: { [key: string]: string }) => {
114
116
  //deconstruct itemSpacing
115
117
  const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
116
118
 
117
- //if itemSpacing has margin props, apply those, if margin global props passed to navItem itself, navItem props take precendence
119
+ //if itemSpacing has margin props, apply those, if margin global props passed to navItem itself, navItem props take precendence
118
120
  const finalItemSpacing = {
119
121
  ...(filteredMargin || {}),
120
122
  ...Object.entries(spacingMarginProps).reduce((acc: any, [prop, value]) => {
@@ -138,19 +140,20 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
138
140
 
139
141
  const Tag = link ? "a" : "div";
140
142
  const activeClass = active === true ? "active" : "";
143
+ const highlightedBorderClass = active === true && highlighted_border === false ? "highlighted_border_none" : "";
141
144
  const collapsibleTrailClass = collapsible && collapsibleTrail ? "collapsible_trail" : "";
142
145
 
143
146
  const fontSizeMapping = {
144
147
  "small": "font_size_small",
145
148
  "normal": "font_size_normal"
146
149
  };
147
-
150
+
148
151
  const fontWeightMapping = {
149
152
  "bold": "font_bold",
150
153
  "bolder": "font_bolder",
151
154
  "regular": "font_regular"
152
155
  };
153
-
156
+
154
157
  const fontSizeClass = fontSizeMapping[fontSize];
155
158
  const fontWeightClass = fontWeightMapping[fontWeight];
156
159
 
@@ -162,9 +165,9 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
162
165
  );
163
166
 
164
167
  const classes = classnames(
165
- buildCss("pb_nav_list_kit_item", activeClass),
168
+ buildCss("pb_nav_list_kit_item", activeClass, highlightedBorderClass),
166
169
  collapsible
167
- ? buildCss("pb_collapsible_nav_item", activeClass)
170
+ ? buildCss("pb_collapsible_nav_item", activeClass, highlightedBorderClass)
168
171
  : "",
169
172
  fontSizeClass,
170
173
  fontWeightClass,
@@ -192,7 +195,7 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
192
195
  return child;
193
196
  });
194
197
 
195
- const collapsibleClasses = buildCss("collapsible_nav_wrapper", activeClass, collapsibleTrailClass)
198
+ const collapsibleClasses = buildCss("collapsible_nav_wrapper", activeClass, highlightedBorderClass, collapsibleTrailClass)
196
199
 
197
200
  return (
198
201
  <>
@@ -207,7 +210,7 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
207
210
  onIconClick={onIconRightClick}
208
211
  onClick={onClick}
209
212
  >
210
- <Collapsible.Main
213
+ <Collapsible.Main
211
214
  className={globalProps({ ...finalItemSpacing })}
212
215
  dark={dark}>
213
216
  <Tag
@@ -6,6 +6,8 @@ import NavItem from './_item'
6
6
 
7
7
  const navTestId = 'nav'
8
8
  const itemTestId = 'item'
9
+ const activeTestBorderlessId = 'activeborderless'
10
+ const activeTestBorderId = 'active'
9
11
  const navClassName = 'custom-class-name-nav'
10
12
  const itemClassName = 'custom-class-name-item'
11
13
  const navTitle = 'Menu'
@@ -35,6 +37,14 @@ const NavDefault = (props) => {
35
37
  />
36
38
  <NavItem
37
39
  active
40
+ data={{ testid: activeTestBorderId }}
41
+ link="#"
42
+ text="Video"
43
+ />
44
+ <NavItem
45
+ active
46
+ data={{ testid: activeTestBorderlessId }}
47
+ highlighted_border={false}
38
48
  link="#"
39
49
  text="Video"
40
50
  />
@@ -70,6 +80,18 @@ test('should render title', () => {
70
80
  expect(kit).toBeInTheDocument()
71
81
  })
72
82
 
83
+ test('should have a left border', () => {
84
+ render(<NavDefault iconRight="angle-down" />)
85
+ const kit = screen.getByTestId(activeTestBorderId)
86
+ expect(kit).toContainHTML('pb_nav_list_kit_item_active')
87
+ })
88
+
89
+ test('should not have a left border', () => {
90
+ render(<NavDefault iconRight="angle-down" />)
91
+ const kit = screen.getByTestId(activeTestBorderlessId)
92
+ expect(kit).toContainHTML('pb_nav_list_kit_item_active_highlighted_border_none')
93
+ })
94
+
73
95
  test('should have a right icon', () => {
74
96
  render(<NavDefault iconRight="angle-down" />)
75
97
  const kit = screen.getByTestId(itemTestId)
@@ -80,4 +102,4 @@ test('should have a left icon', () => {
80
102
  render(<NavDefault iconLeft="users-class" />)
81
103
  const kit = screen.getByTestId(itemTestId)
82
104
  expect(kit).toContainHTML('<i class="pb_icon_kit far fa-fw fa-users-class pb_nav_list_item_icon_left" />')
83
- })
105
+ })
@@ -41,5 +41,11 @@
41
41
  color: $primary;
42
42
  letter-spacing: normal;
43
43
  }
44
+ &[class*="dark"] {
45
+ [class*="_item_text"],
46
+ [class*="_item_icon"] {
47
+ color: $white !important;
48
+ }
49
+ }
44
50
  }
45
51
  }
@@ -22,6 +22,9 @@ $selector: ".pb_nav_list";
22
22
  border-bottom: 1px solid $border_light;
23
23
  &[class*="_active"] {
24
24
  border-left-color: $primary !important;
25
+ &[class*="_highlighted_border_none"] {
26
+ border-left-width: 0px !important;
27
+ }
25
28
  [class*="_item_icon"] {
26
29
  color: $primary !important;
27
30
  }
@@ -10,6 +10,7 @@ module Playbook
10
10
  prop :font_weight, type: Playbook::Props::Enum,
11
11
  values: %w[bold regular bolder],
12
12
  default: "regular"
13
+ prop :highlighted_border, type: Playbook::Props::Boolean, default: true
13
14
  prop :collapsible, type: Playbook::Props::Boolean, default: false
14
15
  prop :link
15
16
  prop :text
@@ -22,9 +23,9 @@ module Playbook
22
23
  default: "_self"
23
24
  def classname
24
25
  if collapsible
25
- "#{generate_classname('pb_nav_list_kit_item', active_class)} #{generate_classname('pb_collapsible_nav_item', active_class, collapsible_trail_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link_collapsible"
26
+ "#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{generate_classname('pb_collapsible_nav_item', active_class, collapsible_trail_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link_collapsible"
26
27
  else
27
- "#{generate_classname('pb_nav_list_kit_item', active_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link"
28
+ "#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link"
28
29
  end
29
30
  end
30
31
 
@@ -96,6 +97,10 @@ module Playbook
96
97
  active ? "active" : nil
97
98
  end
98
99
 
100
+ def highlighted_border_class
101
+ !highlighted_border && active ? "highlighted_border_none" : nil
102
+ end
103
+
99
104
  def font_weight_class
100
105
  case font_weight
101
106
  when "bold"
@@ -24,6 +24,7 @@ $text_align_values: (
24
24
  .pb_th_link:hover {
25
25
  background-color: rgba($primary, 0.03);
26
26
  color: $primary !important;
27
+ border-radius: $border_radius_md;
27
28
  }
28
29
 
29
30
  .pb_th_link, .pb_th_nolink{
@@ -38,13 +39,12 @@ $text_align_values: (
38
39
  }
39
40
  }
40
41
 
41
- [class*="pb_table_header_dropdown"][class*="_vertical"] {
42
- &[class*="_normal"] {
43
- [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
44
- &[class*="_link"] {
45
- border-left-width: 0px;
46
- background-color: #fff !important;
47
- }
48
- }
49
- }
42
+ .header_last_item {
43
+ border-bottom-left-radius: $border_radius_md;
44
+ border-bottom-right-radius: $border_radius_md;
45
+ }
46
+
47
+ .header_first_item {
48
+ border-top-left-radius: $border_radius_md;
49
+ border-top-right-radius: $border_radius_md;
50
50
  }
@@ -28,8 +28,16 @@
28
28
  position: object.placement ,
29
29
  padding: 'none'}) do %>
30
30
  <%= pb_rails("nav", props: {classname: "pb_table_header_dropdown"}) do %>
31
- <% object.sort_menu.each do |item| %>
32
- <%= pb_rails("nav/item", props: { text: item[:item], link: item[:link], icon_right: sort_icon(item[:direction], item[:active]), active: item[:active] }) %>
31
+ <% object.sort_menu.each_with_index do |item, index| %>
32
+ <%= pb_rails("nav/item", props: {
33
+ text: item[:item],
34
+ link: item[:link],
35
+ highlighted_border: false,
36
+ padding: "xs",
37
+ icon_right: sort_icon(item[:direction], item[:active]),
38
+ active: item[:active],
39
+ classname: "header_nav_item #{'header_first_item' if index == 0} #{'header_last_item' if index == object.sort_menu.size - 1}"
40
+ }) %>
33
41
  <% end %>
34
42
  <% end %>
35
43
  <% end %>