playbook_ui 10.18.1 → 10.19.0.pre.popover.alpha1
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/pb_body/_body.jsx +1 -1
- data/app/pb_kits/playbook/pb_body/_body_mixins.scss +2 -1
- data/app/pb_kits/playbook/pb_body/body.rb +1 -1
- data/app/pb_kits/playbook/pb_body/body.test.js +29 -0
- data/app/pb_kits/playbook/pb_body/docs/_body_light.html.erb +5 -0
- data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx +5 -0
- data/app/pb_kits/playbook/pb_body/docs/_body_light.md +6 -0
- data/app/pb_kits/playbook/pb_caption/_caption.jsx +6 -6
- data/app/pb_kits/playbook/pb_caption/_caption.scss +6 -17
- data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +13 -3
- data/app/pb_kits/playbook/pb_caption/caption.rb +3 -5
- data/app/pb_kits/playbook/pb_caption/caption.test.js +29 -0
- data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.html.erb +3 -0
- data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.jsx +25 -0
- data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.md +6 -0
- data/app/pb_kits/playbook/pb_caption/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_caption/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_nav/_bold_mixin.scss +22 -0
- data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +17 -1
- data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +9 -2
- data/app/pb_kits/playbook/pb_nav/docs/_bold_horizontal_nav.html.erb +6 -0
- data/app/pb_kits/playbook/pb_nav/docs/_bold_horizontal_nav.jsx +39 -0
- data/app/pb_kits/playbook/pb_nav/docs/_bold_vertical_nav.html.erb +6 -0
- data/app/pb_kits/playbook/pb_nav/docs/_bold_vertical_nav.jsx +39 -0
- data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav.html.erb +1 -1
- data/app/pb_kits/playbook/pb_nav/docs/_subtle_nav.html.erb +1 -1
- data/app/pb_kits/playbook/pb_nav/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_nav/nav.rb +1 -1
- data/app/pb_kits/playbook/pb_popover/_popover.jsx +2 -4
- data/app/pb_kits/playbook/pb_popover/docs/_popover_close.html.erb +7 -7
- data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.jsx +3 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx +1 -0
- data/app/pb_kits/playbook/pb_popover/index.js +4 -9
- data/app/pb_kits/playbook/pb_popover/popover.html.erb +1 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.scss +63 -14
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb +21 -2
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +12 -3
- data/app/pb_kits/playbook/pb_title/_title.jsx +6 -4
- data/app/pb_kits/playbook/pb_title/_title.scss +5 -5
- data/app/pb_kits/playbook/pb_title/_title_mixin.scss +17 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_colors.html.erb +4 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_colors.jsx +37 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_colors.md +6 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_light.md +3 -0
- data/app/pb_kits/playbook/pb_title/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_title/docs/index.js +1 -1
- data/app/pb_kits/playbook/pb_title/title.rb +5 -4
- data/app/pb_kits/playbook/pb_title/title.test.js +29 -0
- data/app/pb_kits/playbook/utilities/_line_height.scss +11 -0
- data/app/pb_kits/playbook/utilities/globalProps.js +7 -1
- data/lib/playbook/classnames.rb +1 -0
- data/lib/playbook/kit_base.rb +2 -0
- data/lib/playbook/line_height.rb +29 -0
- data/lib/playbook/version.rb +2 -2
- metadata +22 -13
- data/app/pb_kits/playbook/pb_caption/docs/_caption_example.html.erb +0 -3
- data/app/pb_kits/playbook/pb_caption/docs/_caption_example.jsx +0 -27
- data/app/pb_kits/playbook/pb_caption/docs/_caption_example.md +0 -1
- data/app/pb_kits/playbook/pb_caption/docs/_caption_variants.html.erb +0 -1
- data/app/pb_kits/playbook/pb_caption/docs/_caption_variants.jsx +0 -17
- data/app/pb_kits/playbook/pb_caption/docs/_caption_variants.md +0 -3
- data/app/pb_kits/playbook/pb_title/docs/_title_variants.html.erb +0 -1
- data/app/pb_kits/playbook/pb_title/docs/_title_variants.jsx +0 -19
- data/app/pb_kits/playbook/pb_title/docs/_title_variants.md +0 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: '090e97cafaabff3f06f58cca0ce4a1416d09f6baea9f828e51c93059f279f292'
|
4
|
+
data.tar.gz: 580359a862a8567240f9759e2ab80b708688d528ddc054789e6f658352cc21e1
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 85c349d66339b000e6d7cb9077621b9e8d40852538d6e9eb7111947fabd0df9e11b3d2448a67609727c9fb915393ddf903140f43375be0947d5d749ffb6fb85a
|
7
|
+
data.tar.gz: b3774dfcbf0315c3b2fde5e145e7e0e33c3ceb23e5371aa01120ccca6f7294e7883e1f19c89dc73cdc3af2664d7b3484f0d9de5835119e862424902ee153bbc9
|
@@ -12,7 +12,7 @@ type BodyProps = {
|
|
12
12
|
aria?: object,
|
13
13
|
className?: string,
|
14
14
|
children?: array<React.ReactChild>,
|
15
|
-
color?: 'default' | 'light' | 'lighter',
|
15
|
+
color?: 'default' | 'light' | 'lighter' | 'link',
|
16
16
|
dark?: boolean,
|
17
17
|
data?: object,
|
18
18
|
highlightedText?: array<string>,
|
@@ -6,6 +6,7 @@ $pb_body_colors: (
|
|
6
6
|
default: $text_lt_default,
|
7
7
|
light: $text_lt_light,
|
8
8
|
lighter: $text_lt_lighter,
|
9
|
+
link: $primary,
|
9
10
|
);
|
10
11
|
|
11
12
|
$pb_dark_body_colors: (
|
@@ -63,4 +64,4 @@ $pb_body_status: (
|
|
63
64
|
|
64
65
|
@mixin pb_body_positive {
|
65
66
|
@include pb_body($success);
|
66
|
-
}
|
67
|
+
}
|
@@ -4,7 +4,7 @@ module Playbook
|
|
4
4
|
module PbBody
|
5
5
|
class Body < Playbook::KitBase
|
6
6
|
prop :color, type: Playbook::Props::Enum,
|
7
|
-
values: %w[default light lighter],
|
7
|
+
values: %w[default light lighter link],
|
8
8
|
default: "default"
|
9
9
|
prop :status, type: Playbook::Props::Enum,
|
10
10
|
values: %w[neutral negative positive],
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { render, screen } from '../utilities/test-utils'
|
3
|
+
|
4
|
+
import Body from './_body'
|
5
|
+
|
6
|
+
test('returns namespaced class name', () => {
|
7
|
+
render(
|
8
|
+
<Body
|
9
|
+
data={{ testid: 'primary-test' }}
|
10
|
+
text="Test colors"
|
11
|
+
/>
|
12
|
+
)
|
13
|
+
|
14
|
+
const kit = screen.getByTestId('primary-test')
|
15
|
+
expect(kit).toHaveClass('pb_body_kit')
|
16
|
+
})
|
17
|
+
|
18
|
+
test('with colors', () => {
|
19
|
+
render(
|
20
|
+
<Body
|
21
|
+
color="success"
|
22
|
+
data={{ testid: 'primary-test' }}
|
23
|
+
text="Test colors"
|
24
|
+
/>
|
25
|
+
)
|
26
|
+
|
27
|
+
const kit = screen.getByTestId('primary-test')
|
28
|
+
expect(kit).toHaveClass('pb_body_kit_success')
|
29
|
+
})
|
@@ -0,0 +1,6 @@
|
|
1
|
+
##### Prop
|
2
|
+
This kit uses `default` color by default, and can be replaced with colors below:
|
3
|
+
|
4
|
+
* `light` `lighter` `success` `error` `link`
|
5
|
+
|
6
|
+
- These colors are not for standard usage. You can use the color prop to make fixes if colors are not appearing properly, but consult your UX team members if you are deciding to implement it
|
@@ -3,33 +3,33 @@
|
|
3
3
|
import React from 'react'
|
4
4
|
import classnames from 'classnames'
|
5
5
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
6
|
-
import { globalProps } from '../utilities/globalProps.js'
|
6
|
+
import { deprecatedProps, globalProps } from '../utilities/globalProps.js'
|
7
7
|
|
8
8
|
type CaptionProps = {
|
9
9
|
aria?: object,
|
10
|
-
className?: string,
|
11
10
|
children: array<React.ReactNode> | React.ReactNode,
|
11
|
+
className?: string,
|
12
|
+
color?: "default" | "light" | "lighter" | "success" | "error" | "link",
|
12
13
|
data?: object,
|
13
14
|
id?: string,
|
14
15
|
size?: "xs" | "sm" | "md" | "lg" | "xl",
|
15
16
|
tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "caption",
|
16
17
|
text?: string,
|
17
18
|
variant?: null | "link",
|
18
|
-
color?: "default" | "link" | "light",
|
19
19
|
};
|
20
20
|
|
21
21
|
const Caption = (props: CaptionProps) => {
|
22
|
+
if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
|
22
23
|
const {
|
23
24
|
aria = {},
|
24
|
-
className,
|
25
25
|
children,
|
26
|
+
className,
|
26
27
|
color,
|
27
28
|
data = {},
|
28
29
|
id,
|
29
30
|
size = 'md',
|
30
31
|
tag = 'div',
|
31
32
|
text,
|
32
|
-
variant = null,
|
33
33
|
} = props
|
34
34
|
const tagOptions = [
|
35
35
|
'h1',
|
@@ -48,7 +48,7 @@ const Caption = (props: CaptionProps) => {
|
|
48
48
|
const ariaProps = buildAriaProps(aria)
|
49
49
|
const dataProps = buildDataProps(data)
|
50
50
|
const css = classnames(
|
51
|
-
buildCss('pb_caption_kit', size,
|
51
|
+
buildCss('pb_caption_kit', size, color),
|
52
52
|
globalProps(props),
|
53
53
|
className,
|
54
54
|
)
|
@@ -10,26 +10,15 @@
|
|
10
10
|
|
11
11
|
&[class^="pb_caption_kit_xs"] {
|
12
12
|
@include caption_xs;
|
13
|
-
&[class*="_link"] {
|
14
|
-
color: $primary;}
|
15
13
|
}
|
16
14
|
|
17
|
-
|
18
|
-
color: $text_lt_light;
|
19
|
-
}
|
20
|
-
|
21
|
-
&[class*="default"] {
|
22
|
-
color: $text_lt_default;
|
23
|
-
}
|
24
|
-
|
25
|
-
&[class*="link"] {
|
26
|
-
color: $primary;
|
27
|
-
}
|
15
|
+
@include pb_caption_kit_colors;
|
28
16
|
|
29
|
-
|
30
|
-
@
|
31
|
-
|
32
|
-
|
17
|
+
&.dark {
|
18
|
+
@include caption_dark;
|
19
|
+
@each $name, $color in $pb_dark_caption_colors {
|
20
|
+
&[class*="_#{$name}"] {
|
21
|
+
color: $color;
|
33
22
|
}
|
34
23
|
}
|
35
24
|
}
|
@@ -4,13 +4,16 @@
|
|
4
4
|
$pb_caption_colors: (
|
5
5
|
default: $text_lt_default,
|
6
6
|
light: $text_lt_light,
|
7
|
-
link: $primary
|
7
|
+
link: $primary,
|
8
|
+
lighter: $text_lt_lighter,
|
9
|
+
success: $success,
|
10
|
+
error: $error,
|
8
11
|
);
|
9
12
|
|
10
13
|
$pb_dark_caption_colors: (
|
11
|
-
default:
|
14
|
+
default: $text_dk_default,
|
12
15
|
light: $text_dk_light,
|
13
|
-
link: $primary
|
16
|
+
link: $primary,
|
14
17
|
);
|
15
18
|
|
16
19
|
|
@@ -39,3 +42,10 @@ $pb_dark_caption_colors: (
|
|
39
42
|
@mixin caption_dark {
|
40
43
|
color: $text_dk_light;
|
41
44
|
}
|
45
|
+
@mixin pb_caption_kit_colors {
|
46
|
+
@each $name, $color in $pb_caption_colors {
|
47
|
+
&[class*="#{$name}"] {
|
48
|
+
color: $color
|
49
|
+
}
|
50
|
+
}
|
51
|
+
}
|
@@ -10,16 +10,14 @@ module Playbook
|
|
10
10
|
values: %w[h1 h2 h3 h4 h5 h6 p span div caption],
|
11
11
|
default: "div"
|
12
12
|
prop :text
|
13
|
-
prop :variant,
|
14
|
-
values: [nil, "link"],
|
15
|
-
default: nil
|
13
|
+
prop :variant, deprecated: true
|
16
14
|
|
17
15
|
prop :color, type: Playbook::Props::Enum,
|
18
|
-
values: [nil, "light", "
|
16
|
+
values: [nil, "default", "light", "lighter", "success", "error", "link"],
|
19
17
|
default: nil
|
20
18
|
|
21
19
|
def classname
|
22
|
-
generate_classname("pb_caption_kit", size,
|
20
|
+
generate_classname("pb_caption_kit", size, color)
|
23
21
|
end
|
24
22
|
end
|
25
23
|
end
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { render, screen } from '../utilities/test-utils'
|
3
|
+
|
4
|
+
import Caption from './_caption'
|
5
|
+
|
6
|
+
test('returns namespaced class name', () => {
|
7
|
+
render(
|
8
|
+
<Caption
|
9
|
+
data={{ testid: 'primary-test' }}
|
10
|
+
text="Test colors"
|
11
|
+
/>
|
12
|
+
)
|
13
|
+
|
14
|
+
const kit = screen.getByTestId('primary-test')
|
15
|
+
expect(kit).toHaveClass('pb_caption_kit_md')
|
16
|
+
})
|
17
|
+
|
18
|
+
test('with colors', () => {
|
19
|
+
render(
|
20
|
+
<Caption
|
21
|
+
color="success"
|
22
|
+
data={{ testid: 'primary-test' }}
|
23
|
+
text="Test colors"
|
24
|
+
/>
|
25
|
+
)
|
26
|
+
|
27
|
+
const kit = screen.getByTestId('primary-test')
|
28
|
+
expect(kit).toHaveClass('pb_caption_kit_md_success')
|
29
|
+
})
|
@@ -0,0 +1,25 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Caption } from '../../'
|
3
|
+
|
4
|
+
const CaptionColors = (props) => {
|
5
|
+
return (
|
6
|
+
<div>
|
7
|
+
<Caption
|
8
|
+
text="Test colors"
|
9
|
+
{...props}
|
10
|
+
/>
|
11
|
+
<Caption
|
12
|
+
color="success"
|
13
|
+
text="Test colors"
|
14
|
+
{...props}
|
15
|
+
/>
|
16
|
+
<Caption
|
17
|
+
color="link"
|
18
|
+
text="Test colors"
|
19
|
+
{...props}
|
20
|
+
/>
|
21
|
+
</div>
|
22
|
+
)
|
23
|
+
}
|
24
|
+
|
25
|
+
export default CaptionColors
|
@@ -0,0 +1,6 @@
|
|
1
|
+
##### Prop
|
2
|
+
Caption kit will use `light` color by default. Other available colors are:
|
3
|
+
|
4
|
+
* `default` `lighter` `success` `error` `link`
|
5
|
+
|
6
|
+
- These colors are not for standard usage. You can use the color prop to make fixes if colors are not appearing properly, but consult your UX team members if you are deciding to implement it
|
@@ -2,9 +2,9 @@ examples:
|
|
2
2
|
rails:
|
3
3
|
- caption_light: Default
|
4
4
|
- caption_block: Block
|
5
|
-
-
|
5
|
+
- caption_colors: Colors
|
6
6
|
|
7
7
|
react:
|
8
8
|
- caption_light: Default
|
9
9
|
- caption_block: Block
|
10
|
-
-
|
10
|
+
- caption_colors: Colors
|
@@ -1,4 +1,3 @@
|
|
1
1
|
export { default as CaptionLight } from './_caption_light.jsx'
|
2
|
-
export { default as
|
2
|
+
export { default as CaptionColors } from './_caption_colors.jsx'
|
3
3
|
export { default as CaptionBlock } from './_caption_block.jsx'
|
4
|
-
export { default as CaptionExample } from './_caption_example.jsx'
|
@@ -0,0 +1,22 @@
|
|
1
|
+
@mixin bold {
|
2
|
+
@include subtle;
|
3
|
+
|
4
|
+
[class*=pb_nav_list_kit_item] {
|
5
|
+
&[class*=_active] [class*=_link] {
|
6
|
+
background-color: $primary;
|
7
|
+
color: $white;
|
8
|
+
box-shadow: $shadow_deep;
|
9
|
+
@media (hover:hover) {
|
10
|
+
&:hover {
|
11
|
+
background-color: darken($primary, 4%);
|
12
|
+
[class*=_text],[class*=_icon] {
|
13
|
+
color: $white;
|
14
|
+
}
|
15
|
+
}
|
16
|
+
}
|
17
|
+
[class*=_text],[class*=_icon] {
|
18
|
+
font-weight: $bolder;
|
19
|
+
}
|
20
|
+
}
|
21
|
+
}
|
22
|
+
}
|
@@ -3,6 +3,8 @@
|
|
3
3
|
@import "../tokens/animation-curves";
|
4
4
|
@import "../tokens/typography";
|
5
5
|
@import "./subtle_mixin";
|
6
|
+
@import "./bold_mixin";
|
7
|
+
@import "../tokens/shadows";
|
6
8
|
|
7
9
|
$selector: ".pb_nav_list";
|
8
10
|
|
@@ -92,7 +94,21 @@ $selector: ".pb_nav_list";
|
|
92
94
|
}
|
93
95
|
}
|
94
96
|
}
|
95
|
-
|
97
|
+
|
98
|
+
// Bold Variant
|
99
|
+
&[class*=_bold] {
|
100
|
+
@include bold;
|
101
|
+
// Horizontal Overrides
|
102
|
+
[class*=pb_nav_list_kit_item] {
|
103
|
+
margin: 0;
|
104
|
+
}
|
105
|
+
[class*=_active] {
|
106
|
+
[class*=_text] {
|
107
|
+
color: $white;
|
108
|
+
}
|
109
|
+
}
|
110
|
+
}
|
111
|
+
|
96
112
|
&[class*=dark]{
|
97
113
|
[class*=pb_nav_list_kit_item]{
|
98
114
|
[class*=_link]{
|
@@ -6,6 +6,8 @@
|
|
6
6
|
@import "../tokens/titles";
|
7
7
|
@import "../pb_body/body_mixins";
|
8
8
|
@import "./subtle_mixin";
|
9
|
+
@import "./bold_mixin";
|
10
|
+
@import "../tokens/shadows";
|
9
11
|
|
10
12
|
$selector: ".pb_nav_list";
|
11
13
|
|
@@ -87,12 +89,17 @@ $selector: ".pb_nav_list";
|
|
87
89
|
}
|
88
90
|
|
89
91
|
// Subtle Variant
|
90
|
-
&[class*=_subtle]
|
92
|
+
&[class*=_subtle] {
|
91
93
|
@include subtle;
|
92
94
|
}
|
93
95
|
|
96
|
+
// Bold Variant
|
97
|
+
&[class*=_bold] {
|
98
|
+
@include bold;
|
99
|
+
}
|
100
|
+
|
94
101
|
// Show Highlight
|
95
|
-
&[class*=_highlight]
|
102
|
+
&[class*=_highlight] {
|
96
103
|
[class*=_active] {
|
97
104
|
background-color: $active_light;
|
98
105
|
}
|
@@ -0,0 +1,6 @@
|
|
1
|
+
<%= pb_rails("nav", props: { orientation: "horizontal", variant: "bold" }) do %>
|
2
|
+
<%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
|
3
|
+
<%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
|
4
|
+
<%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>
|
5
|
+
<%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
|
6
|
+
<% end %>
|
@@ -0,0 +1,39 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
|
3
|
+
import Nav from '../_nav'
|
4
|
+
import NavItem from '../_item'
|
5
|
+
|
6
|
+
const BoldHorizontalNav = (props) => {
|
7
|
+
return (
|
8
|
+
<Nav
|
9
|
+
link="#"
|
10
|
+
orientation="horizontal"
|
11
|
+
variant="bold"
|
12
|
+
{...props}
|
13
|
+
>
|
14
|
+
<NavItem
|
15
|
+
link="#"
|
16
|
+
text="About"
|
17
|
+
{...props}
|
18
|
+
/>
|
19
|
+
<NavItem
|
20
|
+
active
|
21
|
+
link="#"
|
22
|
+
text="Case Studies"
|
23
|
+
{...props}
|
24
|
+
/>
|
25
|
+
<NavItem
|
26
|
+
link="#"
|
27
|
+
text="Service"
|
28
|
+
{...props}
|
29
|
+
/>
|
30
|
+
<NavItem
|
31
|
+
link="#"
|
32
|
+
text="Contacts"
|
33
|
+
{...props}
|
34
|
+
/>
|
35
|
+
</Nav>
|
36
|
+
)
|
37
|
+
}
|
38
|
+
|
39
|
+
export default BoldHorizontalNav
|
@@ -0,0 +1,6 @@
|
|
1
|
+
<%= pb_rails("nav", props: { orientation: "vertical", variant: "bold" }) do %>
|
2
|
+
<%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
|
3
|
+
<%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
|
4
|
+
<%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>
|
5
|
+
<%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
|
6
|
+
<% end %>
|
@@ -0,0 +1,39 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
|
3
|
+
import Nav from '../_nav'
|
4
|
+
import NavItem from '../_item'
|
5
|
+
|
6
|
+
const BoldVerticalNav = (props) => {
|
7
|
+
return (
|
8
|
+
<Nav
|
9
|
+
link="#"
|
10
|
+
orientation="vertical"
|
11
|
+
variant="bold"
|
12
|
+
{...props}
|
13
|
+
>
|
14
|
+
<NavItem
|
15
|
+
link="#"
|
16
|
+
text="About"
|
17
|
+
{...props}
|
18
|
+
/>
|
19
|
+
<NavItem
|
20
|
+
active
|
21
|
+
link="#"
|
22
|
+
text="Case Studies"
|
23
|
+
{...props}
|
24
|
+
/>
|
25
|
+
<NavItem
|
26
|
+
link="#"
|
27
|
+
text="Service"
|
28
|
+
{...props}
|
29
|
+
/>
|
30
|
+
<NavItem
|
31
|
+
link="#"
|
32
|
+
text="Contacts"
|
33
|
+
{...props}
|
34
|
+
/>
|
35
|
+
</Nav>
|
36
|
+
)
|
37
|
+
}
|
38
|
+
|
39
|
+
export default BoldVerticalNav
|
@@ -1,4 +1,4 @@
|
|
1
|
-
<%= pb_rails("nav", props: { orientation: "horizontal"}) do %>
|
1
|
+
<%= pb_rails("nav", props: { orientation: "horizontal" }) do %>
|
2
2
|
<%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
|
3
3
|
<%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
|
4
4
|
<%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>
|
@@ -1,4 +1,4 @@
|
|
1
|
-
<%= pb_rails("nav", props: {variant: "subtle"}) do %>
|
1
|
+
<%= pb_rails("nav", props: { variant: "subtle" }) do %>
|
2
2
|
<%= pb_rails("nav/item", props: { text: "Overview", link: "#" }) %>
|
3
3
|
<%= pb_rails("nav/item", props: { text: "Albums", link: "#", active: true }) %>
|
4
4
|
<%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#" }) %>
|
@@ -8,8 +8,10 @@ examples:
|
|
8
8
|
- subtle_nav: Subtle Variant
|
9
9
|
- subtle_with_icons_nav: Subtle With Icons
|
10
10
|
- subtle_no_highlight_nav: Subtle No Highlight
|
11
|
+
- bold_vertical_nav: Bold Variant
|
11
12
|
- horizontal_nav: Horizontal Nav
|
12
13
|
- subtle_horizontal_nav: Subtle Horizontal Nav
|
14
|
+
- bold_horizontal_nav: Bold Horizontal Nav
|
13
15
|
- block_nav: Block
|
14
16
|
- block_no_title_nav: Without Title
|
15
17
|
- new_tab: Open in a New Tab
|
@@ -23,8 +25,10 @@ examples:
|
|
23
25
|
- subtle_nav: Subtle Variant
|
24
26
|
- subtle_with_icons_nav: Subtle With Icons
|
25
27
|
- subtle_no_highlight_nav: Subtle No Highlight
|
28
|
+
- bold_vertical_nav: Bold Variant
|
26
29
|
- horizontal_nav: Horizontal Nav
|
27
30
|
- subtle_horizontal_nav: Subtle Horizontal Nav
|
31
|
+
- bold_horizontal_nav: Bold Horizontal Nav
|
28
32
|
- block_nav: Block
|
29
33
|
- block_no_title_nav: Without Title
|
30
34
|
- new_tab: Open in a New Tab
|
@@ -11,3 +11,5 @@ export { default as WithIconsNav } from './_with_icons_nav.jsx'
|
|
11
11
|
export { default as SubtleWithIconsNav } from './_subtle_with_icons_nav.jsx'
|
12
12
|
export { default as WithImgNav } from './_with_img_nav.jsx'
|
13
13
|
export { default as NewTab } from './_new_tab.jsx'
|
14
|
+
export { default as BoldHorizontalNav } from './_bold_horizontal_nav.jsx'
|
15
|
+
export { default as BoldVerticalNav } from './_bold_vertical_nav.jsx'
|
@@ -9,7 +9,7 @@ module Playbook
|
|
9
9
|
values: %w[vertical horizontal],
|
10
10
|
default: "vertical"
|
11
11
|
prop :variant, type: Playbook::Props::Enum,
|
12
|
-
values: %w[normal subtle],
|
12
|
+
values: %w[normal subtle bold],
|
13
13
|
default: "normal"
|
14
14
|
prop :highlight, type: Playbook::Props::Boolean, default: true
|
15
15
|
prop :borderless, type: Playbook::Props::Boolean, default: false
|
@@ -150,16 +150,14 @@ export default class PbReactPopover extends React.Component<PbPopoverProps> {
|
|
150
150
|
const targetIsReference =
|
151
151
|
target.closest('.pb_popover_reference_wrapper') !== null
|
152
152
|
|
153
|
-
if (targetIsReference) return
|
154
|
-
|
155
153
|
switch (closeOnClick) {
|
156
154
|
case 'outside':
|
157
|
-
if (!targetIsPopover) {
|
155
|
+
if (!targetIsPopover || targetIsReference) {
|
158
156
|
shouldClosePopover(true)
|
159
157
|
}
|
160
158
|
break
|
161
159
|
case 'inside':
|
162
|
-
if (targetIsPopover) {
|
160
|
+
if (targetIsPopover || targetIsReference) {
|
163
161
|
shouldClosePopover(true)
|
164
162
|
}
|
165
163
|
break
|
@@ -1,23 +1,23 @@
|
|
1
1
|
<%= pb_rails("flex", props: {classname: "flex-container", spacing: "between"}) do %>
|
2
2
|
<span>
|
3
|
-
<%= pb_rails("button", props: { text: "Click Inside", variant: "secondary", id:
|
3
|
+
<%= pb_rails("button", props: { text: "Click Inside", variant: "secondary", id: "inside-popover-1" }) %>
|
4
4
|
<%= pb_rails("popover", props: {
|
5
5
|
close_on_click: "inside",
|
6
6
|
trigger_element_id: "inside-popover-1",
|
7
7
|
tooltip_id: "inside-tooltip-1",
|
8
|
-
position:
|
8
|
+
position: "bottom",
|
9
9
|
offset: true
|
10
10
|
}) do %>
|
11
11
|
Click on me!
|
12
12
|
<% end %>
|
13
13
|
</span>
|
14
14
|
<span>
|
15
|
-
<%= pb_rails("button", props: { text: "Click Outside", variant: "secondary", id:
|
15
|
+
<%= pb_rails("button", props: { text: "Click Outside", variant: "secondary", id: "outside-popover-1" }) %>
|
16
16
|
<%= pb_rails("popover", props: {
|
17
17
|
close_on_click: "outside",
|
18
18
|
trigger_element_id: "outside-popover-1",
|
19
19
|
tooltip_id: "outside-tooltip-1",
|
20
|
-
position:
|
20
|
+
position: "left",
|
21
21
|
offset: true
|
22
22
|
}) do %>
|
23
23
|
Click anywhere but me!
|
@@ -27,16 +27,16 @@
|
|
27
27
|
<%= pb_rails("button", props: {
|
28
28
|
text: "Click Anywhere",
|
29
29
|
variant: "secondary",
|
30
|
-
id:
|
30
|
+
id: "any-popover-1"
|
31
31
|
}) %>
|
32
32
|
<%= pb_rails("popover", props: {
|
33
33
|
close_on_click: "any",
|
34
34
|
trigger_element_id: "any-popover-1",
|
35
35
|
tooltip_id: "any-tooltip-1",
|
36
|
-
position:
|
36
|
+
position: "top",
|
37
37
|
offset: true
|
38
38
|
}) do %>
|
39
39
|
Click anything!
|
40
40
|
<% end %>
|
41
41
|
</span>
|
42
|
-
<% end %>
|
42
|
+
<% end %>
|