playbook_ui 12.36.0.pre.alpha.svgiconmethods1059 → 12.37.0.pre.alpha.PLAY951collapsiblenav31062

Sign up to get free protection for your applications and to get access to all the features.
Files changed (42) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +2 -1
  3. data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +6 -0
  4. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +15 -13
  5. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +25 -8
  6. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +1 -1
  7. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx +2 -2
  8. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx +2 -2
  9. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +11 -4
  10. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.md +1 -1
  11. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx +5 -5
  12. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx +75 -0
  13. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.md +3 -0
  14. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +7 -6
  15. data/app/pb_kits/playbook/pb_collapsible/docs/index.js +2 -1
  16. data/app/pb_kits/playbook/pb_collapsible/useCollapsible.tsx +14 -0
  17. data/app/pb_kits/playbook/pb_icon/docs/_icon_animate.html.erb +0 -1
  18. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +0 -2
  19. data/app/pb_kits/playbook/pb_icon/docs/example.yml +9 -10
  20. data/app/pb_kits/playbook/pb_icon/icon.html.erb +3 -3
  21. data/app/pb_kits/playbook/pb_icon/icon.rb +0 -17
  22. data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +149 -3
  23. data/app/pb_kits/playbook/pb_nav/_item.tsx +45 -10
  24. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +6 -6
  25. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +5 -4
  26. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md +1 -0
  27. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx +57 -0
  28. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.md +1 -0
  29. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb +23 -0
  30. data/app/pb_kits/playbook/pb_nav/docs/{_collapsible_nav_custom_icons.jsx → _collapsible_nav_emphasize.jsx} +9 -9
  31. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md +1 -0
  32. data/app/pb_kits/playbook/pb_nav/docs/example.yml +5 -3
  33. data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -1
  34. data/app/pb_kits/playbook/pb_nav/item.html.erb +5 -4
  35. data/app/pb_kits/playbook/pb_nav/item.rb +21 -2
  36. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_options.html.erb +12 -0
  37. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +1 -0
  38. data/app/pb_kits/playbook/pb_text_input/text_input.rb +1 -1
  39. data/dist/playbook-rails.js +7 -7
  40. data/lib/playbook/version.rb +2 -2
  41. metadata +12 -4
  42. data/app/pb_kits/playbook/pb_icon/docs/_icon_svg.html.erb +0 -4
@@ -11,43 +11,71 @@ import Collapsible from '../pb_collapsible/_collapsible'
11
11
  type NavItemProps = {
12
12
  active?: boolean,
13
13
  aria?: { [key: string]: string },
14
+ bold?: boolean,
15
+ emphasized?: boolean,
14
16
  children?: React.ReactNode[] | React.ReactNode,
15
17
  className?: string,
16
18
  collapsible?: boolean,
17
19
  data?: object,
20
+ dark?: boolean,
18
21
  iconLeft?: string,
19
22
  iconRight?: string | string[],
23
+ onIconRightClick?: () => void,
24
+ onIconLeftClick?: () => void,
20
25
  id?: string,
21
26
  imageUrl?: string,
22
27
  link?: string,
23
- onClick?: React.MouseEventHandler<HTMLElement>,
28
+ onClick?: () => void,
24
29
  target?: '_blank' | '_self' | '_parent' | '_top',
25
30
  text: string,
31
+ collapsibleTrail?: boolean,
32
+ collapsed?: boolean
26
33
  } & GlobalProps
27
34
 
28
35
  const NavItem = (props: NavItemProps) => {
29
36
  const {
30
37
  active = false,
31
38
  aria = {},
39
+ bold,
40
+ emphasized,
32
41
  children,
33
42
  className,
34
43
  collapsible,
35
44
  data = {},
45
+ dark = false,
36
46
  iconLeft,
37
47
  iconRight,
48
+ onIconRightClick,
49
+ onIconLeftClick,
38
50
  id,
39
51
  imageUrl,
40
52
  link,
41
53
  onClick = () => { },
42
54
  target = '_self',
43
55
  text = '',
56
+ collapsibleTrail,
57
+ collapsed
44
58
  } = props
45
59
 
46
60
  const Tag = link ? 'a' : 'div'
47
61
  const activeClass = active === true ? 'active' : ''
62
+ const collapsibleTrailClass = collapsible && collapsibleTrail ? 'collapsible_trail' : ''
63
+ const boldClass = collapsible && bold ? 'bold' : ''
64
+ const emphasizedClass = collapsible && emphasized ? 'emphasized' : ''
48
65
  const ariaProps = buildAriaProps(aria)
49
66
  const dataProps = buildDataProps(data)
50
- const classes = classnames(buildCss('pb_nav_list_kit_item', activeClass), globalProps(props), className)
67
+ const classes = classnames(buildCss('pb_nav_list_kit_item', activeClass),
68
+ collapsible ? buildCss('pb_collapsible_nav_item', activeClass, collapsibleTrailClass, boldClass, emphasizedClass) : '',
69
+ globalProps(props),
70
+ className)
71
+
72
+
73
+ const handleIconClick = (e:any) => {
74
+ if (onIconLeftClick) {
75
+ e.stopPropagation();
76
+ onIconLeftClick()
77
+ }
78
+ }
51
79
 
52
80
  return (
53
81
  <li
@@ -58,18 +86,24 @@ const NavItem = (props: NavItemProps) => {
58
86
  >
59
87
  {
60
88
  collapsible ? (
61
- <Collapsible icon={iconRight ? iconRight : ['plus','minus']} iconSize="xs">
62
- <Collapsible.Main>
89
+ <Collapsible icon={iconRight ? iconRight : ['plus','minus']}
90
+ iconSize="xs"
91
+ id={id}
92
+ collapsed={collapsed}
93
+ onIconClick={onIconRightClick}
94
+ onClick={onClick}
95
+ >
96
+ <Collapsible.Main dark={dark}>
63
97
  <Tag
64
- className="pb_nav_list_item_link"
98
+ className="pb_nav_list_item_link_collapsible"
65
99
  href={link}
66
- onClick={onClick}
67
100
  target={target}
68
101
  >
69
102
  {imageUrl &&
70
103
  <div
71
- className="pb_nav_list_item_icon_section"
104
+ className="pb_nav_list_item_icon_section_collapsible"
72
105
  key={imageUrl}
106
+ onClick={(e)=>handleIconClick(e)}
73
107
  >
74
108
  <Image
75
109
  className="pb_nav_img_wrapper"
@@ -80,17 +114,18 @@ const NavItem = (props: NavItemProps) => {
80
114
 
81
115
  {iconLeft &&
82
116
  <div
83
- className="pb_nav_list_item_icon_section"
117
+ className="pb_nav_list_item_icon_section_collapsible"
84
118
  key={iconLeft}
119
+ onClick={(e)=>handleIconClick(e)}
85
120
  >
86
121
  <Icon
87
- className="pb_nav_list_item_icon_left"
122
+ className="pb_nav_list_item_icon_left_collapsible"
88
123
  fixedWidth
89
124
  icon={iconLeft}
90
125
  />
91
126
  </div>
92
127
  }
93
- <span className="pb_nav_list_item_text">
128
+ <span className="pb_nav_list_item_text_collapsible">
94
129
  {text}
95
130
  </span>
96
131
  </Tag>
@@ -29,12 +29,6 @@
29
29
  flex: 1;
30
30
  font-weight: $regular;
31
31
  }
32
- }
33
- &[class*=_active] [class*=_link] {
34
- @include pb_title_4;
35
- color: $primary;
36
- letter-spacing: normal;
37
- }
38
32
  &:hover {
39
33
  background-color: rgba($primary, 0.03);
40
34
  [class*=_icon] {
@@ -44,5 +38,11 @@
44
38
  color: $primary;
45
39
  }
46
40
  }
41
+ }
42
+ &[class*=_active] [class*=_link] {
43
+ @include pb_title_4;
44
+ color: $primary;
45
+ letter-spacing: normal;
46
+ }
47
47
  }
48
48
  }
@@ -1,7 +1,5 @@
1
1
  import React from "react";
2
-
3
- import Nav from "../_nav";
4
- import NavItem from "../_item";
2
+ import { Nav, NavItem } from '../..'
5
3
 
6
4
  const CollapsibleNav = (props) => {
7
5
  return (
@@ -9,6 +7,7 @@ const CollapsibleNav = (props) => {
9
7
  <NavItem
10
8
  collapsible
11
9
  iconLeft="city"
10
+ iconRight={["plus", "minus"]}
12
11
  link="#"
13
12
  text="Overview"
14
13
  {...props}
@@ -33,6 +32,7 @@ const CollapsibleNav = (props) => {
33
32
  active
34
33
  collapsible
35
34
  iconLeft="theater-masks"
35
+ iconRight={["plus", "minus"]}
36
36
  link="#"
37
37
  text="Albums"
38
38
  {...props}
@@ -56,6 +56,7 @@ const CollapsibleNav = (props) => {
56
56
  <NavItem
57
57
  collapsible
58
58
  iconLeft="city"
59
+ iconRight={["plus", "minus"]}
59
60
  link="#"
60
61
  text="Similar Artists"
61
62
  {...props}
@@ -80,4 +81,4 @@ const CollapsibleNav = (props) => {
80
81
  );
81
82
  };
82
83
 
83
- export default CollapsibleNav;
84
+ export default CollapsibleNav
@@ -0,0 +1 @@
1
+ The `collapsible` prop allows users to create a nested, collapsible nav. Pass `collapsible` to NavItem and nest as many more NavItems as needed as children for that NavItem to see this in action.
@@ -0,0 +1,57 @@
1
+ import React from "react"
2
+ import { Nav, NavItem, useCollapsible } from "../.."
3
+
4
+ const CollapsibleNavCustom = (props) => {
5
+ const navItems = ["Overview", "Albums", "Similar Artists"]
6
+ // eslint-disable-next-line react-hooks/rules-of-hooks
7
+ const collapsibles = navItems.map(() => useCollapsible(true))
8
+
9
+ const handleMainClick = (index) => {
10
+ collapsibles.forEach(([, , setCollapsed], idx) => {
11
+ if (idx === index) {
12
+ setCollapsed(false)
13
+ } else {
14
+ setCollapsed(true)
15
+ }
16
+ })
17
+ }
18
+
19
+ return (
20
+ <>
21
+ <Nav variant='subtle'>
22
+ {navItems.map((text, index) => {
23
+ const [collapsed] = collapsibles[index]
24
+ return (
25
+ <NavItem
26
+ collapsed={collapsed}
27
+ collapsible
28
+ emphasized
29
+ iconLeft="chevron-down"
30
+ id={`collapsible-nav-item-${index + 1}`}
31
+ key={index}
32
+ link="#"
33
+ onClick={() => handleMainClick(index)}
34
+ text={text}
35
+ {...props}
36
+ >
37
+ <NavItem link="#"
38
+ text="City"
39
+ {...props}
40
+ />
41
+ <NavItem link="#"
42
+ text="People"
43
+ {...props}
44
+ />
45
+ <NavItem link="#"
46
+ text="Business"
47
+ {...props}
48
+ />
49
+ </NavItem>
50
+ );
51
+ })}
52
+ </Nav>
53
+ </>
54
+ )
55
+ }
56
+
57
+ export default CollapsibleNavCustom
@@ -0,0 +1 @@
1
+ The collapsible nav kit uses our Collapsible kit under the hood and as such the `useCollapsible` hook can be used to achieve custom toggling of the collapsible nav. To do this, you must import and declare the `useCollapsible` hook and pass it's state to the `collapsed` prop. See our code example below to see how this can be done.
@@ -0,0 +1,23 @@
1
+ <%= pb_rails("nav", props: { variant: "subtle" }) do %>
2
+ <%= pb_rails("nav/item", props: { text: "Overview", link: "#", emphasized: true, collapsible: true, icon_left:"city" }) do %>
3
+ <%= pb_rails("nav", props: { variant: "subtle" }) do %>
4
+ <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
5
+ <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
6
+ <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
7
+ <% end %>
8
+ <% end %>
9
+ <%= pb_rails("nav/item", props: { text: "Albums", link: "#", emphasized: true, collapsible: true, icon_left: "theater-masks" }) do %>
10
+ <%= pb_rails("nav", props: { variant: "subtle" }) do %>
11
+ <%= pb_rails("nav/item", props: { text: "Entertainment", link: "#" }) %>
12
+ <%= pb_rails("nav/item", props: { text: "Food", link: "#" }) %>
13
+ <%= pb_rails("nav/item", props: { text: "Style", link: "#" }) %>
14
+ <% end %>
15
+ <% end %>
16
+ <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", emphasized: true, collapsible: true, icon_left: "city" }) do %>
17
+ <%= pb_rails("nav", props: { variant: "subtle" }) do %>
18
+ <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
19
+ <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
20
+ <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
21
+ <% end %>
22
+ <% end %>
23
+ <% end %>
@@ -1,15 +1,14 @@
1
1
  import React from "react";
2
+ import { Nav, NavItem } from '../..'
2
3
 
3
- import Nav from "../_nav";
4
- import NavItem from "../_item";
5
-
6
- const CollapsibleNavCustomIcons = (props) => {
4
+ const CollapsibleNavEmphasize = (props) => {
7
5
  return (
8
6
  <Nav variant="subtle">
9
7
  <NavItem
10
8
  collapsible
9
+ emphasized
11
10
  iconLeft="city"
12
- iconRight={["chevron-down", "chevron-up"]}
11
+ iconRight={["plus", "minus"]}
13
12
  link="#"
14
13
  text="Overview"
15
14
  {...props}
@@ -31,10 +30,10 @@ const CollapsibleNavCustomIcons = (props) => {
31
30
  />
32
31
  </NavItem>
33
32
  <NavItem
34
- active
35
33
  collapsible
34
+ emphasized
36
35
  iconLeft="theater-masks"
37
- iconRight={["chevron-down", "chevron-up"]}
36
+ iconRight={["plus", "minus"]}
38
37
  link="#"
39
38
  text="Albums"
40
39
  {...props}
@@ -57,8 +56,9 @@ const CollapsibleNavCustomIcons = (props) => {
57
56
  </NavItem>
58
57
  <NavItem
59
58
  collapsible
59
+ emphasized
60
60
  iconLeft="city"
61
- iconRight={["chevron-down", "chevron-up"]}
61
+ iconRight={["plus", "minus"]}
62
62
  link="#"
63
63
  text="Similar Artists"
64
64
  {...props}
@@ -83,4 +83,4 @@ const CollapsibleNavCustomIcons = (props) => {
83
83
  );
84
84
  };
85
85
 
86
- export default CollapsibleNavCustomIcons;
86
+ export default CollapsibleNavEmphasize;
@@ -0,0 +1 @@
1
+ The `emphasized` prop can be passed to NavItem for a more emphasized look for the collapsible Nav.
@@ -7,7 +7,8 @@ examples:
7
7
  - borderless_nav: No Borders
8
8
  - subtle_nav: Subtle Variant
9
9
  - subtle_with_icons_nav: Subtle With Icons
10
- # - collapsible_nav: Subtle With Collapsible
10
+ - collapsible_nav: Collapsible Nav
11
+ - collapsible_nav_emphasize: Collapsible Nav with Emphasize Styling
11
12
  - subtle_no_highlight_nav: Subtle No Highlight
12
13
  - bold_vertical_nav: Bold Variant
13
14
  - horizontal_nav: Horizontal Nav
@@ -25,8 +26,9 @@ examples:
25
26
  - borderless_nav: No Borders
26
27
  - subtle_nav: Subtle Variant
27
28
  - subtle_with_icons_nav: Subtle With Icons
28
- # - collapsible_nav: Subtle With Collapsible
29
- # - collapsible_nav_custom_icons: Subtle With Collapsible (Custom Toggle Icons)
29
+ - collapsible_nav: Collapsible Nav
30
+ - collapsible_nav_emphasize: Collapsible Nav with Emphasize Styling
31
+ - collapsible_nav_custom: Collapsible Nav With Custom Toggling
30
32
  - subtle_no_highlight_nav: Subtle No Highlight
31
33
  - bold_vertical_nav: Bold Variant
32
34
  - horizontal_nav: Horizontal Nav
@@ -14,4 +14,5 @@ export { default as NewTab } from './_new_tab.jsx'
14
14
  export { default as BoldHorizontalNav } from './_bold_horizontal_nav.jsx'
15
15
  export { default as BoldVerticalNav } from './_bold_vertical_nav.jsx'
16
16
  export { default as CollapsibleNav } from './_collapsible_nav.jsx'
17
- export { default as CollapsibleNavCustomIcons } from './_collapsible_nav_custom_icons.jsx'
17
+ export { default as CollapsibleNavCustom } from './_collapsible_nav_custom.jsx'
18
+ export { default as CollapsibleNavEmphasize } from "./_collapsible_nav_emphasize.jsx"
@@ -2,19 +2,20 @@
2
2
  aria: object.aria,
3
3
  class: object.classname,
4
4
  data: object.data,
5
+ dark: object.dark,
5
6
  id: object.id) do %>
6
7
  <% if object.collapsible %>
7
8
  <%= pb_rails("collapsible", props: { name: "collapsible-nav-example" }) do %>
8
- <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs" }) do %>
9
+ <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark }) do %>
9
10
  <%= content_tag(object.tag,
10
11
  object.link ? object.link_options : object.options) do %>
11
12
  <% if object.image_url %>
12
- <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
13
+ <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
13
14
  <% end %>
14
15
  <% if object.icon_left %>
15
- <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
16
+ <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left_collapsible", fixed_width: true}) %>
16
17
  <% end %>
17
- <span class="pb_nav_list_item_text">
18
+ <span class="pb_nav_list_item_text_collapsible">
18
19
  <%= object.text %>
19
20
  </span>
20
21
  <% end %>
@@ -4,9 +4,12 @@ module Playbook
4
4
  module PbNav
5
5
  class Item < Playbook::KitBase
6
6
  prop :active, type: Playbook::Props::Boolean, default: false
7
+ prop :bold, type: Playbook::Props::Boolean, default: false
7
8
  prop :collapsible, type: Playbook::Props::Boolean, default: false
9
+ prop :emphasized, type: Playbook::Props::Boolean, default: false
8
10
  prop :link
9
11
  prop :text
12
+ prop :collapsible_trail, type: Playbook::Props::Boolean, default: false
10
13
  prop :icon_left
11
14
  prop :icon_right
12
15
  prop :image_url
@@ -14,7 +17,11 @@ module Playbook
14
17
  values: %w[_blank _self _parent _top],
15
18
  default: "_self"
16
19
  def classname
17
- generate_classname("pb_nav_list_kit_item", active_class)
20
+ if collapsible
21
+ "pb_collapsible_nav_item #{generate_classname('pb_nav_list_kit_item', active_class, bold_class, collapsible_trail_class, emphasized_class)}"
22
+ else
23
+ generate_classname("pb_nav_list_kit_item", active_class)
24
+ end
18
25
  end
19
26
 
20
27
  def tag
@@ -23,7 +30,7 @@ module Playbook
23
30
 
24
31
  def options
25
32
  {
26
- class: "pb_nav_list_item_link",
33
+ class: collapsible ? "pb_nav_list_item_link_collapsible" : "pb_nav_list_item_link",
27
34
  }.compact
28
35
  end
29
36
 
@@ -43,6 +50,18 @@ module Playbook
43
50
  def active_class
44
51
  active ? "active" : nil
45
52
  end
53
+
54
+ def bold_class
55
+ bold ? "bold" : nil
56
+ end
57
+
58
+ def collapsible_trail_class
59
+ collapsible_trail ? "collapsible_trail" : nil
60
+ end
61
+
62
+ def emphasized_class
63
+ emphasized ? "emphasized" : nil
64
+ end
46
65
  end
47
66
  end
48
67
  end
@@ -0,0 +1,12 @@
1
+ <%= pb_rails("text_input", props: {
2
+ placeholder: "Placeholder",
3
+ input_options: {
4
+ id: "testing-one-time-code",
5
+ autocomplete: "one-time-code",
6
+ name:"auth-token",
7
+ inputmode:"numeric",
8
+ pattern:"[0-9]*",
9
+ type: "text"
10
+ }
11
+ }) %>
12
+
@@ -7,6 +7,7 @@ examples:
7
7
  - text_input_add_on: Add On
8
8
  - text_input_inline: Inline
9
9
  - text_input_no_label: No Label
10
+ - text_input_options: Input Options
10
11
  react:
11
12
  - text_input_default: Default
12
13
  - text_input_error: With Error
@@ -60,7 +60,7 @@ module Playbook
60
60
  required: required,
61
61
  type: type,
62
62
  value: value,
63
- }
63
+ }.merge(input_options)
64
64
  end
65
65
 
66
66
  def validation_message