playbook_ui 7.1.1 → 7.3.0.pre.alpha3
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 +1 -0
- data/app/pb_kits/playbook/data/menu.yml +1 -0
- data/app/pb_kits/playbook/index.js +1 -0
- data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +2 -1
- data/app/pb_kits/playbook/pb_body/body.rb +1 -1
- data/app/pb_kits/playbook/pb_caption/_caption.html.erb +7 -5
- data/app/pb_kits/playbook/pb_caption/docs/_caption_block.html.erb +11 -0
- data/app/pb_kits/playbook/pb_caption/docs/_caption_block.jsx +28 -0
- data/app/pb_kits/playbook/pb_caption/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_caption/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx +1 -1
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.html.erb +9 -0
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.jsx +142 -0
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +17 -0
- data/app/pb_kits/playbook/pb_collapsible/child_kits/_collapsible_content.html.erb +7 -0
- data/app/pb_kits/playbook/pb_collapsible/child_kits/_collapsible_main.html.erb +16 -0
- data/app/pb_kits/playbook/pb_collapsible/collapsible.rb +15 -0
- data/app/pb_kits/playbook/pb_collapsible/collapsible_content.rb +21 -0
- data/app/pb_kits/playbook/pb_collapsible/collapsible_main.rb +24 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_dark.html.erb +10 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_dark.jsx +17 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.html.erb +10 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx +17 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +9 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_collapsible/index.js +82 -0
- data/app/pb_kits/playbook/pb_gauge/_gauge.jsx +1 -1
- data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +2 -1
- data/app/pb_kits/playbook/pb_nav/_item.html.erb +3 -0
- data/app/pb_kits/playbook/pb_nav/_item.jsx +14 -1
- data/app/pb_kits/playbook/pb_nav/_nav.jsx +3 -0
- data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +22 -3
- data/app/pb_kits/playbook/pb_nav/docs/_borderless_nav.html.erb +6 -0
- data/app/pb_kits/playbook/pb_nav/docs/_borderless_nav.jsx +29 -0
- data/app/pb_kits/playbook/pb_nav/docs/_with_img_nav.html.erb +7 -0
- data/app/pb_kits/playbook/pb_nav/docs/_with_img_nav.jsx +42 -0
- data/app/pb_kits/playbook/pb_nav/docs/_with_img_nav.md +1 -0
- data/app/pb_kits/playbook/pb_nav/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_nav/item.rb +1 -0
- data/app/pb_kits/playbook/pb_nav/nav.rb +6 -1
- data/app/pb_kits/playbook/pb_pill/_pill.scss +1 -0
- data/app/pb_kits/playbook/pb_section_separator/_section_separator.jsx +1 -3
- data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +26 -47
- data/app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss +32 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.jsx +6 -2
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx +2 -1
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.jsx +2 -1
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.jsx +9 -3
- data/app/pb_kits/playbook/pb_section_separator/section_separator.rb +1 -1
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.html.erb +4 -4
- data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_options.html.erb +16 -0
- data/app/pb_kits/playbook/pb_selectable_card/docs/example.yml +3 -2
- data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb +16 -9
- data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.html.erb +3 -2
- data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_options.html.erb +16 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/docs/example.yml +4 -3
- data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb +3 -0
- data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.html.erb +3 -3
- data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_options.html.erb +15 -0
- data/app/pb_kits/playbook/pb_selectable_icon/docs/example.yml +3 -2
- data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb +10 -0
- data/app/pb_kits/playbook/pb_time/_time.html.erb +17 -20
- data/app/pb_kits/playbook/pb_time/_time.jsx +40 -27
- data/app/pb_kits/playbook/pb_time/_time.scss +4 -24
- data/app/pb_kits/playbook/pb_time/docs/_time_align.jsx +4 -1
- data/app/pb_kits/playbook/pb_time/docs/_time_default.html.erb +11 -11
- data/app/pb_kits/playbook/pb_time/docs/_time_default.jsx +13 -1
- data/app/pb_kits/playbook/pb_time/docs/_time_sizes.jsx +4 -1
- data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.jsx +3 -1
- data/app/pb_kits/playbook/pb_time/docs/_time_timezone.jsx +7 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb +3 -2
- data/app/pb_kits/playbook/props.rb +1 -1
- data/app/pb_kits/playbook/props/base.rb +6 -4
- data/app/pb_kits/playbook/vendor.js +3 -0
- data/lib/playbook/version.rb +1 -1
- metadata +30 -4
@@ -0,0 +1,17 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Collapsible } from '../..'
|
3
|
+
|
4
|
+
const CollapsibleDefault = () => (
|
5
|
+
<div>
|
6
|
+
<Collapsible>
|
7
|
+
<Collapsible.Main>
|
8
|
+
<div>{'Main Section'}</div>
|
9
|
+
</Collapsible.Main>
|
10
|
+
<Collapsible.Content>
|
11
|
+
<div>{'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.'}</div>
|
12
|
+
</Collapsible.Content>
|
13
|
+
</Collapsible>
|
14
|
+
</div>
|
15
|
+
)
|
16
|
+
|
17
|
+
export default CollapsibleDefault
|
@@ -0,0 +1,82 @@
|
|
1
|
+
import PbEnhancedElement from '../pb_enhanced_element'
|
2
|
+
|
3
|
+
const MAIN_SELECTOR = '[data-collapsible-main]'
|
4
|
+
const CONTENT_SELECTOR = '[data-collapsible-content]'
|
5
|
+
const DOWN_ARROW_SELECTOR = '.fa-chevron-down'
|
6
|
+
const UP_ARROW_SELECTOR = '.fa-chevron-up'
|
7
|
+
|
8
|
+
export default class PbCollapsible extends PbEnhancedElement {
|
9
|
+
static get selector() {
|
10
|
+
return MAIN_SELECTOR
|
11
|
+
}
|
12
|
+
|
13
|
+
connect() {
|
14
|
+
this.element.addEventListener('click', () => {
|
15
|
+
this.toggle(this.target)
|
16
|
+
})
|
17
|
+
this.displayDownArrow()
|
18
|
+
}
|
19
|
+
|
20
|
+
get target() {
|
21
|
+
return this.element.parentNode.querySelector(CONTENT_SELECTOR)
|
22
|
+
}
|
23
|
+
|
24
|
+
// Show an element
|
25
|
+
show(elem) {
|
26
|
+
// Get the natural height of the element
|
27
|
+
const getHeight = () => {
|
28
|
+
elem.style.display = 'block' // Make it visible
|
29
|
+
const height = elem.scrollHeight + 'px' // Get it's height
|
30
|
+
elem.style.display = '' // Hide it again
|
31
|
+
return height
|
32
|
+
}
|
33
|
+
|
34
|
+
const height = getHeight() // Get the natural height
|
35
|
+
elem.classList.add('is-visible') // Make the element visible
|
36
|
+
elem.style.height = height // Update the max-height
|
37
|
+
|
38
|
+
// Once the transition is complete, remove the inline max-height so the content can scale responsively
|
39
|
+
window.setTimeout(() => {
|
40
|
+
elem.style.height = ''
|
41
|
+
}, 500)
|
42
|
+
}
|
43
|
+
// Hide an element
|
44
|
+
hide(elem) {
|
45
|
+
// Give the element a height to change from
|
46
|
+
elem.style.height = elem.scrollHeight + 'px'
|
47
|
+
// Set the height back to 0
|
48
|
+
window.setTimeout(() => {
|
49
|
+
elem.style.height = '0'
|
50
|
+
elem.style.paddingTop = '0'
|
51
|
+
elem.style.paddingBottom = '0'
|
52
|
+
}, 1)
|
53
|
+
|
54
|
+
// When the transition is complete, hide it
|
55
|
+
window.setTimeout(() => {
|
56
|
+
elem.classList.remove('is-visible')
|
57
|
+
}, 500)
|
58
|
+
}
|
59
|
+
|
60
|
+
// Toggle element visibility
|
61
|
+
toggle(elem) {
|
62
|
+
// If the element is visible, hide it
|
63
|
+
if (elem.classList.contains('is-visible')) {
|
64
|
+
this.hide(elem)
|
65
|
+
this.displayDownArrow()
|
66
|
+
return
|
67
|
+
}
|
68
|
+
// Otherwise, show it
|
69
|
+
this.show(elem)
|
70
|
+
this.displayUpArrow()
|
71
|
+
}
|
72
|
+
|
73
|
+
displayDownArrow() {
|
74
|
+
this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'inline-block'
|
75
|
+
this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'none'
|
76
|
+
}
|
77
|
+
|
78
|
+
displayUpArrow() {
|
79
|
+
this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'inline-block'
|
80
|
+
this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'none'
|
81
|
+
}
|
82
|
+
}
|
@@ -88,7 +88,7 @@ const Gauge = (props: GaugeProps) => {
|
|
88
88
|
useEffect(() => {
|
89
89
|
if (componentDidMount.current) {
|
90
90
|
Highcharts.charts.forEach((chart) => {
|
91
|
-
if (chart.renderTo.id === id) {
|
91
|
+
if (chart && chart.renderTo.id === id) {
|
92
92
|
chart.series[0].setData([chartData[0].value])
|
93
93
|
chart.series[0].data[0].name = chartData[0].name
|
94
94
|
}
|
@@ -16,7 +16,7 @@ module Playbook
|
|
16
16
|
prop :subtitle
|
17
17
|
prop :title
|
18
18
|
prop :x_axis_categories, type: Playbook::Props::Array,
|
19
|
-
|
19
|
+
default: []
|
20
20
|
prop :y_axis_min, type: Playbook::Props::Numeric
|
21
21
|
prop :y_axis_max, type: Playbook::Props::Numeric
|
22
22
|
prop :legend, type: Playbook::Props::Boolean,
|
@@ -32,6 +32,7 @@ module Playbook
|
|
32
32
|
def chart_options
|
33
33
|
{
|
34
34
|
id: id,
|
35
|
+
className: classname,
|
35
36
|
chartData: chart_data,
|
36
37
|
type: chart_type,
|
37
38
|
title: title,
|
@@ -5,6 +5,9 @@
|
|
5
5
|
id: object.id) do %>
|
6
6
|
<%= content_tag(object.tag,
|
7
7
|
object.link ? object.link_options : object.options) do %>
|
8
|
+
<% if object.image_url %>
|
9
|
+
<%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
|
10
|
+
<% end %>
|
8
11
|
<% if object.icon_left %>
|
9
12
|
<%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
|
10
13
|
<% end %>
|
@@ -2,7 +2,7 @@
|
|
2
2
|
|
3
3
|
import React from 'react'
|
4
4
|
import classnames from 'classnames'
|
5
|
-
import { Icon } from '../'
|
5
|
+
import { Icon, Image } from '../'
|
6
6
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
7
7
|
import { globalProps } from '../utilities/globalProps.js'
|
8
8
|
|
@@ -15,6 +15,7 @@ type NavItemProps = {
|
|
15
15
|
iconLeft: string,
|
16
16
|
iconRight: string,
|
17
17
|
id?: string,
|
18
|
+
imageUrl: String,
|
18
19
|
link: string,
|
19
20
|
onClick?: EventHandler,
|
20
21
|
text: string,
|
@@ -30,6 +31,7 @@ const NavItem = (props: NavItemProps) => {
|
|
30
31
|
iconLeft,
|
31
32
|
iconRight,
|
32
33
|
id,
|
34
|
+
imageUrl,
|
33
35
|
link,
|
34
36
|
onClick = () => {},
|
35
37
|
text = '',
|
@@ -53,6 +55,17 @@ const NavItem = (props: NavItemProps) => {
|
|
53
55
|
href={link}
|
54
56
|
onClick={onClick}
|
55
57
|
>
|
58
|
+
<If condition={imageUrl}>
|
59
|
+
<div
|
60
|
+
className="pb_nav_list_item_icon_section"
|
61
|
+
key={imageUrl}
|
62
|
+
>
|
63
|
+
<Image
|
64
|
+
className="pb_nav_img_wrapper"
|
65
|
+
url={imageUrl}
|
66
|
+
/>
|
67
|
+
</div>
|
68
|
+
</If>
|
56
69
|
<If condition={iconLeft}>
|
57
70
|
<div
|
58
71
|
className="pb_nav_list_item_icon_section"
|
@@ -8,6 +8,7 @@ import { globalProps } from '../utilities/globalProps.js'
|
|
8
8
|
|
9
9
|
type NavProps = {
|
10
10
|
aria?: object,
|
11
|
+
borderless?: boolean,
|
11
12
|
children?: React.Node,
|
12
13
|
className?: string | array<string>,
|
13
14
|
data?: object,
|
@@ -22,6 +23,7 @@ type NavProps = {
|
|
22
23
|
const Nav = (props: NavProps) => {
|
23
24
|
const {
|
24
25
|
aria = {},
|
26
|
+
borderless = false,
|
25
27
|
children,
|
26
28
|
className,
|
27
29
|
data = {},
|
@@ -39,6 +41,7 @@ const Nav = (props: NavProps) => {
|
|
39
41
|
const cardCss = classnames(
|
40
42
|
buildCss('pb_nav_list', variant, orientation, {
|
41
43
|
highlight: highlight,
|
44
|
+
borderless: borderless,
|
42
45
|
}),
|
43
46
|
globalProps(props),
|
44
47
|
className
|
@@ -40,7 +40,7 @@ $selector: ".pb_nav_list";
|
|
40
40
|
text-decoration: none;
|
41
41
|
display: flex;
|
42
42
|
align-items: center;
|
43
|
-
padding: $space_sm $
|
43
|
+
padding: $space_sm $space_sm $space_sm ($space_sm - 3px);
|
44
44
|
border: 0 solid transparent;
|
45
45
|
border-width: 0 0 0 3px;
|
46
46
|
transition-property: color, border-color, background-color;
|
@@ -59,7 +59,7 @@ $selector: ".pb_nav_list";
|
|
59
59
|
}
|
60
60
|
[class*=_icon_left] {
|
61
61
|
font-size: $font_large;
|
62
|
-
margin-right: $
|
62
|
+
margin-right: $space_xs;
|
63
63
|
color: $text_lt_lighter;
|
64
64
|
}
|
65
65
|
[class*=_icon_right] {
|
@@ -69,10 +69,14 @@ $selector: ".pb_nav_list";
|
|
69
69
|
}
|
70
70
|
[class*=_text] {
|
71
71
|
font-size: $font_base;
|
72
|
-
font-weight: $bold;
|
73
72
|
color: $text_lt_default;
|
74
73
|
flex: 1;
|
75
74
|
}
|
75
|
+
[class*=_img_left] {
|
76
|
+
margin-right: $space_xs;
|
77
|
+
height: 20px;
|
78
|
+
width: 25px;
|
79
|
+
}
|
76
80
|
}
|
77
81
|
&:last-child {
|
78
82
|
border-bottom: 0;
|
@@ -167,4 +171,19 @@ $selector: ".pb_nav_list";
|
|
167
171
|
}
|
168
172
|
}
|
169
173
|
|
174
|
+
//Borderless
|
175
|
+
&[class*=_borderless] {
|
176
|
+
[class*=pb_nav_list_kit_item] {
|
177
|
+
list-style: none;
|
178
|
+
border-bottom: 0;
|
179
|
+
}
|
180
|
+
}
|
181
|
+
|
182
|
+
}
|
183
|
+
|
184
|
+
//Image Wrapper
|
185
|
+
.pb_nav_img_wrapper {
|
186
|
+
width: 24px;
|
187
|
+
height: 24px;
|
188
|
+
margin-right: $space_xs;
|
170
189
|
}
|
@@ -0,0 +1,6 @@
|
|
1
|
+
<%= pb_rails("nav", props: {borderless: true}) do %>
|
2
|
+
<%= pb_rails("nav/item", props: { text: "Photos", link: "#" }) %>
|
3
|
+
<%= pb_rails("nav/item", props: { text: "Music", link: "#" }) %>
|
4
|
+
<%= pb_rails("nav/item", props: { text: "Video", link: "#", active: true }) %>
|
5
|
+
<%= pb_rails("nav/item", props: { text: "Files", link: "#" }) %>
|
6
|
+
<% end %>
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Nav } from '../../'
|
3
|
+
import NavItem from '../_item.jsx'
|
4
|
+
|
5
|
+
const BorderlessNav = () => {
|
6
|
+
return (
|
7
|
+
<Nav borderless>
|
8
|
+
<NavItem
|
9
|
+
active
|
10
|
+
link="#"
|
11
|
+
text="All Categories"
|
12
|
+
/>
|
13
|
+
<NavItem
|
14
|
+
link="#"
|
15
|
+
text="Food"
|
16
|
+
/>
|
17
|
+
<NavItem
|
18
|
+
link="#"
|
19
|
+
text="Digital"
|
20
|
+
/>
|
21
|
+
<NavItem
|
22
|
+
link="#"
|
23
|
+
text="Design Art"
|
24
|
+
/>
|
25
|
+
</Nav>
|
26
|
+
)
|
27
|
+
}
|
28
|
+
|
29
|
+
export default BorderlessNav
|
@@ -0,0 +1,7 @@
|
|
1
|
+
<%= pb_rails("nav", props: {title: "Browse", link: "#"}) do %>
|
2
|
+
<%= pb_rails("nav/item", props: { image_url: "https://upload.wikimedia.org/wikipedia/commons/0/00/Apple_News_icon_%28macOS%29.png", text: "News Feed" }) %>
|
3
|
+
<%= pb_rails("nav/item", props: { image_url: "https://p7.hiclipart.com/preview/928/339/723/messages-iphone-apple-imessage-iphone-thumbnail.jpg", link: "#", text: "Messages", active: true }) %>
|
4
|
+
<%= pb_rails("nav/item", props: { image_url: "https://www.clipartmax.com/png/middle/103-1038653_circle-icons-calendar-svg-event-icon.png", icon_right: "angle-down", link: "#", text: "Events" }) %>
|
5
|
+
<%= pb_rails("nav/item", props: { image_url: "https://www.pngitem.com/pimgs/m/228-2289227_find-friends-icon-png-image-iphone-find-my.png", link: "#", text: "Friends" }) %>
|
6
|
+
<%= pb_rails("nav/item", props: { image_url: "https://img.favpng.com/18/5/20/blue-human-behavior-silhouette-area-communication-png-favpng-wLT3QYknSwc68uu9GAUHGS5FY_t.jpg", icon_right: "angle-down", link: "#", text: "Groups" }) %>
|
7
|
+
<% end %>
|
@@ -0,0 +1,42 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Nav } from '../../'
|
3
|
+
import NavItem from '../_item.jsx'
|
4
|
+
|
5
|
+
const WithImageNav = () => {
|
6
|
+
return (
|
7
|
+
<Nav
|
8
|
+
link="#"
|
9
|
+
title="Browse"
|
10
|
+
>
|
11
|
+
<NavItem
|
12
|
+
imageUrl="https://upload.wikimedia.org/wikipedia/commons/0/00/Apple_News_icon_%28macOS%29.png"
|
13
|
+
text="News Feed"
|
14
|
+
/>
|
15
|
+
<NavItem
|
16
|
+
active
|
17
|
+
imageUrl="https://p7.hiclipart.com/preview/928/339/723/messages-iphone-apple-imessage-iphone-thumbnail.jpg"
|
18
|
+
link="#"
|
19
|
+
text="Messages"
|
20
|
+
/>
|
21
|
+
<NavItem
|
22
|
+
iconRight="angle-down"
|
23
|
+
imageUrl="https://www.clipartmax.com/png/middle/103-1038653_circle-icons-calendar-svg-event-icon.png"
|
24
|
+
link="#"
|
25
|
+
text="Events"
|
26
|
+
/>
|
27
|
+
<NavItem
|
28
|
+
imageUrl="https://www.pngitem.com/pimgs/m/228-2289227_find-friends-icon-png-image-iphone-find-my.png"
|
29
|
+
link="#"
|
30
|
+
text="Friends"
|
31
|
+
/>
|
32
|
+
<NavItem
|
33
|
+
iconRight="angle-down"
|
34
|
+
imageUrl="https://img.favpng.com/18/5/20/blue-human-behavior-silhouette-area-communication-png-favpng-wLT3QYknSwc68uu9GAUHGS5FY_t.jpg"
|
35
|
+
link="#"
|
36
|
+
text="Groups"
|
37
|
+
/>
|
38
|
+
</Nav>
|
39
|
+
)
|
40
|
+
}
|
41
|
+
|
42
|
+
export default WithImageNav
|
@@ -0,0 +1 @@
|
|
1
|
+
Icon used needs to be square. Icon size is 24px by 24px.
|
@@ -2,7 +2,9 @@ examples:
|
|
2
2
|
rails:
|
3
3
|
- default_nav: Default
|
4
4
|
- with_icons_nav: With Icons
|
5
|
+
- with_img_nav: With Custom Icon
|
5
6
|
- no_highlight_nav: No Highlight
|
7
|
+
- borderless_nav: No Borders
|
6
8
|
- subtle_nav: Subtle Variant
|
7
9
|
- subtle_with_icons_nav: Subtle With Icons
|
8
10
|
- subtle_no_highlight_nav: Subtle No Highlight
|
@@ -13,10 +15,13 @@ examples:
|
|
13
15
|
react:
|
14
16
|
- default_nav: Default
|
15
17
|
- with_icons_nav: With Icons
|
18
|
+
- with_img_nav: With Custom Icon
|
16
19
|
- no_highlight_nav: No Highlight
|
20
|
+
- borderless_nav: No Borders
|
17
21
|
- subtle_nav: Subtle Variant
|
18
22
|
- subtle_with_icons_nav: Subtle With Icons
|
19
23
|
- subtle_no_highlight_nav: Subtle No Highlight
|
20
24
|
- horizontal_nav: Horizontal Nav
|
21
25
|
- block_nav: Block
|
22
26
|
- block_no_title_nav: Without Title
|
27
|
+
|
@@ -3,7 +3,9 @@ export { default as HorizontalNav } from './_horizontal_nav.jsx'
|
|
3
3
|
export { default as BlockNav } from './_block_nav.jsx'
|
4
4
|
export { default as BlockNoTitleNav } from './_block_no_title_nav.jsx'
|
5
5
|
export { default as NoHighlightNav } from './_no_highlight_nav.jsx'
|
6
|
+
export { default as BorderlessNav } from './_borderless_nav.jsx'
|
6
7
|
export { default as SubtleNav } from './_subtle_nav.jsx'
|
7
8
|
export { default as SubtleNoHighlightNav } from './_subtle_no_highlight_nav.jsx'
|
8
9
|
export { default as WithIconsNav } from './_with_icons_nav.jsx'
|
9
10
|
export { default as SubtleWithIconsNav } from './_subtle_with_icons_nav.jsx'
|
11
|
+
export { default as WithImgNav } from './_with_img_nav.jsx'
|
@@ -17,14 +17,19 @@ module Playbook
|
|
17
17
|
values: %w[normal subtle],
|
18
18
|
default: "normal"
|
19
19
|
prop :highlight, type: Playbook::Props::Boolean, default: true
|
20
|
+
prop :borderless, type: Playbook::Props::Boolean, default: false
|
20
21
|
|
21
22
|
def classname
|
22
|
-
generate_classname("pb_nav_list", variant, orientation, highlight_class)
|
23
|
+
generate_classname("pb_nav_list", variant, orientation, highlight_class, borderless_class)
|
23
24
|
end
|
24
25
|
|
25
26
|
def highlight_class
|
26
27
|
highlight ? "highlight" : nil
|
27
28
|
end
|
29
|
+
|
30
|
+
def borderless_class
|
31
|
+
borderless ? "borderless" : nil
|
32
|
+
end
|
28
33
|
end
|
29
34
|
end
|
30
35
|
end
|
@@ -20,17 +20,15 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
|
|
20
20
|
const {
|
21
21
|
aria = {},
|
22
22
|
className,
|
23
|
-
dark = false,
|
24
23
|
data = {},
|
25
24
|
id,
|
26
25
|
orientation = 'horizontal',
|
27
26
|
text,
|
28
27
|
variant = 'card',
|
29
28
|
} = props
|
30
|
-
const themeStyle = dark === true ? '_dark' : ''
|
31
29
|
const ariaProps = buildAriaProps(aria)
|
32
30
|
const dataProps = buildDataProps(data)
|
33
|
-
const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation
|
31
|
+
const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation), globalProps(props), className)
|
34
32
|
|
35
33
|
return (
|
36
34
|
|