playbook_ui 12.6.0.pre.alpha.menuyml1 → 12.6.0.pre.alpha.sectionseparator1
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/data/menu.yml +110 -0
- data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +1 -1
- data/app/pb_kits/playbook/pb_nav/_nav.jsx +3 -0
- data/app/pb_kits/playbook/pb_nav/nav.html.erb +1 -1
- data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +16 -24
- data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +2 -1
- data/app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss +0 -7
- data/app/pb_kits/playbook/pb_section_separator/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_section_separator/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb +3 -1
- data/lib/playbook/pb_doc_helper.rb +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +2 -3
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.html.erb +0 -1
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.jsx +0 -14
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 54b4b391e78f2f58e670391168634c536434667a6e53d4ae31e803f738ee5a1d
|
|
4
|
+
data.tar.gz: 871163ff18b7cc73cd8591158fbff9aedb2cbfa647c95a68e5921ccd319fede0
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 4ab7c44f1c8cdd068026bedde9b01b656e4b209bf0997ff539857867c5d5a1cd591a153084716f983b8749d643ecf8a747fde4b05600260e0312b3d02e004d7a
|
|
7
|
+
data.tar.gz: 918ca1022a5c4c4ea45436892b8fc5608b10bf06a3d0fbcb495b5f2e8f63bb2ff144b15e039eec1bd6d1ea433680c398a5324829b1f31a5afd619273c7a75271
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
kits:
|
|
2
|
+
- avatars:
|
|
3
|
+
- avatar
|
|
4
|
+
- avatar_action_button
|
|
5
|
+
- multiple_users
|
|
6
|
+
- multiple_users_stacked
|
|
7
|
+
- user
|
|
8
|
+
- background
|
|
9
|
+
- bread_crumbs
|
|
10
|
+
- buttons:
|
|
11
|
+
- button
|
|
12
|
+
- button_toolbar
|
|
13
|
+
- circle_icon_button
|
|
14
|
+
- card
|
|
15
|
+
- collapsible
|
|
16
|
+
- charts_and_graphs:
|
|
17
|
+
- bar_graph
|
|
18
|
+
- circle_chart
|
|
19
|
+
- distribution_bar
|
|
20
|
+
- gauge
|
|
21
|
+
- legend
|
|
22
|
+
- line_graph
|
|
23
|
+
- treemap_chart
|
|
24
|
+
- dialog
|
|
25
|
+
- filter
|
|
26
|
+
- fixed_confirmation_toast
|
|
27
|
+
- forms:
|
|
28
|
+
- checkbox
|
|
29
|
+
- date_picker
|
|
30
|
+
- file_upload
|
|
31
|
+
- form
|
|
32
|
+
- form_group
|
|
33
|
+
- form_pill
|
|
34
|
+
- passphrase
|
|
35
|
+
- phone_number_input
|
|
36
|
+
- radio
|
|
37
|
+
- rich_text_editor
|
|
38
|
+
- select
|
|
39
|
+
- selectable_card
|
|
40
|
+
- selectable_card_icon
|
|
41
|
+
- selectable_icon
|
|
42
|
+
- selectable_list
|
|
43
|
+
- text_input
|
|
44
|
+
- textarea
|
|
45
|
+
- toggle
|
|
46
|
+
- typeahead
|
|
47
|
+
- highlight
|
|
48
|
+
- icon
|
|
49
|
+
- icon_circle
|
|
50
|
+
- icon_stat_value
|
|
51
|
+
- icon_value
|
|
52
|
+
- image
|
|
53
|
+
- layouts:
|
|
54
|
+
- flex
|
|
55
|
+
- layout
|
|
56
|
+
- lightbox
|
|
57
|
+
- list
|
|
58
|
+
- loading_inline
|
|
59
|
+
- map
|
|
60
|
+
- multi_level_select
|
|
61
|
+
- nav
|
|
62
|
+
- tags:
|
|
63
|
+
- badge
|
|
64
|
+
- hashtag
|
|
65
|
+
- pill
|
|
66
|
+
- pagination
|
|
67
|
+
- popover
|
|
68
|
+
- progress:
|
|
69
|
+
- progress_pills
|
|
70
|
+
- progress_simple
|
|
71
|
+
- progress_step
|
|
72
|
+
- section_separator
|
|
73
|
+
- star_rating
|
|
74
|
+
- table
|
|
75
|
+
- timeline
|
|
76
|
+
- time_and_date:
|
|
77
|
+
- date
|
|
78
|
+
- date_range_inline
|
|
79
|
+
- date_range_stacked
|
|
80
|
+
- date_stacked
|
|
81
|
+
- date_time
|
|
82
|
+
- date_time_stacked
|
|
83
|
+
- date_year_stacked
|
|
84
|
+
- time
|
|
85
|
+
- time_range_inline
|
|
86
|
+
- time_stacked
|
|
87
|
+
- timestamp
|
|
88
|
+
- weekday_stacked
|
|
89
|
+
- tooltip
|
|
90
|
+
- typography:
|
|
91
|
+
- body
|
|
92
|
+
- caption
|
|
93
|
+
- title
|
|
94
|
+
- typography_patterns:
|
|
95
|
+
- contact
|
|
96
|
+
- currency
|
|
97
|
+
- dashboard_value
|
|
98
|
+
- home_address_street
|
|
99
|
+
- label_pill
|
|
100
|
+
- label_value
|
|
101
|
+
- message
|
|
102
|
+
- person
|
|
103
|
+
- person_contact
|
|
104
|
+
- source
|
|
105
|
+
- stat_change
|
|
106
|
+
- stat_value
|
|
107
|
+
- title_count
|
|
108
|
+
- title_detail
|
|
109
|
+
- user_badge
|
|
110
|
+
- walkthrough
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<%= pb_rails("card", props: { classname: "pb--doc", padding: "none", dark: dark }) do %>
|
|
2
2
|
<div class="pb--kit-example">
|
|
3
|
-
<%= pb_rails("caption", props: { text: example_title }) %>
|
|
3
|
+
<%= pb_rails("caption", props: { text: example_title, dark: dark }) %>
|
|
4
4
|
<br />
|
|
5
5
|
<%= example %>
|
|
6
6
|
<br>
|
|
@@ -14,6 +14,7 @@ type NavProps = {
|
|
|
14
14
|
children?: React.Node,
|
|
15
15
|
className?: string | array<string>,
|
|
16
16
|
data?: object,
|
|
17
|
+
dark?: boolean,
|
|
17
18
|
highlight?: boolean,
|
|
18
19
|
id?: string,
|
|
19
20
|
onClick?: EventHandler,
|
|
@@ -29,6 +30,7 @@ const Nav = (props: NavProps) => {
|
|
|
29
30
|
children,
|
|
30
31
|
className,
|
|
31
32
|
data = {},
|
|
33
|
+
dark = false,
|
|
32
34
|
highlight = true,
|
|
33
35
|
id,
|
|
34
36
|
link = '#',
|
|
@@ -64,6 +66,7 @@ const Nav = (props: NavProps) => {
|
|
|
64
66
|
onClick={onClick}
|
|
65
67
|
>
|
|
66
68
|
<Caption
|
|
69
|
+
dark={dark}
|
|
67
70
|
size="md"
|
|
68
71
|
text={`${title}`}
|
|
69
72
|
/>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<% if object.title %>
|
|
7
7
|
<%= content_tag(:div, class: "pb_nav_list_title") do %>
|
|
8
8
|
<%= content_tag(:a, class: "pb_nav_list_item_link_text", href: object.link) do %>
|
|
9
|
-
<%= pb_rails("caption", props: { text: object.title }) %>
|
|
9
|
+
<%= pb_rails("caption", props: { text: object.title, dark: dark }) %>
|
|
10
10
|
<% end %>
|
|
11
11
|
<% end %>
|
|
12
12
|
<% end %>
|
|
@@ -18,19 +18,21 @@ $section_colors_dark: (
|
|
|
18
18
|
justify-content: center;
|
|
19
19
|
align-items: center;
|
|
20
20
|
position: relative;
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
}
|
|
21
|
+
span {
|
|
22
|
+
padding: 0 $space_xs;
|
|
23
|
+
display: flex;
|
|
24
|
+
}
|
|
25
|
+
&::before {
|
|
26
|
+
content: "";
|
|
27
|
+
height: 1px;
|
|
28
|
+
flex: 1;
|
|
29
|
+
@include section_separator_horizontal;
|
|
31
30
|
}
|
|
32
31
|
&::after {
|
|
33
|
-
|
|
32
|
+
content: "";
|
|
33
|
+
height: 1px;
|
|
34
|
+
flex: 1;
|
|
35
|
+
@include section_separator_horizontal;
|
|
34
36
|
}
|
|
35
37
|
&[class*=_horizontal] {
|
|
36
38
|
justify-content: center;
|
|
@@ -46,23 +48,13 @@ $section_colors_dark: (
|
|
|
46
48
|
// Dark =========================
|
|
47
49
|
|
|
48
50
|
&.dark {
|
|
49
|
-
&::
|
|
51
|
+
&::before {
|
|
50
52
|
@include section_separator_horizontal(true);
|
|
51
53
|
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
span {
|
|
55
|
-
display: inline-block;
|
|
56
|
-
padding: 0 $space_xs;
|
|
57
|
-
background: #{$color_value};
|
|
58
|
-
position: relative;
|
|
59
|
-
z-index: 1;
|
|
60
|
-
}
|
|
61
|
-
}
|
|
54
|
+
&::after {
|
|
55
|
+
@include section_separator_horizontal(true);
|
|
62
56
|
}
|
|
63
57
|
&[class*=_vertical] {
|
|
64
|
-
margin-left: $space_xs;
|
|
65
|
-
margin-right: $space_xs;
|
|
66
58
|
&::after {
|
|
67
59
|
@include section_separator_vertical(true);
|
|
68
60
|
}
|
|
@@ -25,6 +25,7 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
|
|
|
25
25
|
id,
|
|
26
26
|
orientation = 'horizontal',
|
|
27
27
|
text,
|
|
28
|
+
dark = false,
|
|
28
29
|
variant = 'card',
|
|
29
30
|
} = props
|
|
30
31
|
const ariaProps = buildAriaProps(aria)
|
|
@@ -42,7 +43,7 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
|
|
|
42
43
|
{
|
|
43
44
|
text && (
|
|
44
45
|
<span>
|
|
45
|
-
<Caption text={text} />
|
|
46
|
+
<Caption text={text} dark={dark}/>
|
|
46
47
|
</span>
|
|
47
48
|
)
|
|
48
49
|
}
|
|
@@ -3,12 +3,10 @@ examples:
|
|
|
3
3
|
rails:
|
|
4
4
|
- section_separator_text: Text Separator
|
|
5
5
|
- section_separator_line: Line Separator
|
|
6
|
-
- section_separator_text_background: Background Variant
|
|
7
6
|
- section_separator_vertical: Vertical
|
|
8
7
|
|
|
9
8
|
|
|
10
9
|
react:
|
|
11
10
|
- section_separator_text: Text Separator
|
|
12
11
|
- section_separator_line: Line Separator
|
|
13
|
-
- section_separator_text_background: Background Variant
|
|
14
12
|
- section_separator_vertical: Vertical
|
|
@@ -1,4 +1,3 @@
|
|
|
1
1
|
export { default as SectionSeparatorLine } from './_section_separator_line.jsx'
|
|
2
2
|
export { default as SectionSeparatorText } from './_section_separator_text.jsx'
|
|
3
|
-
export { default as SectionSeparatorTextBackground } from './_section_separator_text_background.jsx'
|
|
4
3
|
export { default as SectionSeparatorVertical } from './_section_separator_vertical.jsx'
|
|
@@ -4,7 +4,9 @@
|
|
|
4
4
|
data: object.data,
|
|
5
5
|
class: object.classname) do %>
|
|
6
6
|
<% if object.orientation === 'horizontal' %>
|
|
7
|
-
|
|
7
|
+
<% if object.text %>
|
|
8
|
+
<span><%= pb_rails("caption", props: { text: object.text }) %></span>
|
|
9
|
+
<%end%>
|
|
8
10
|
<% end %>
|
|
9
11
|
<% if object.orientation === 'vertical' %>
|
|
10
12
|
<%= pb_rails("flex", props: { orientation: "column"}) do %>
|
|
@@ -45,7 +45,7 @@ module Playbook
|
|
|
45
45
|
|
|
46
46
|
# rubocop:disable Naming/AccessorMethodName
|
|
47
47
|
def get_kits
|
|
48
|
-
menu = YAML.load_file(
|
|
48
|
+
menu = YAML.load_file(Playbook::Engine.root.join("app/pb_kits/playbook/data/menu.yml"))
|
|
49
49
|
menu["kits"]
|
|
50
50
|
end
|
|
51
51
|
# rubocop:enable Naming/AccessorMethodName
|
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.6.0.pre.alpha.
|
|
4
|
+
version: 12.6.0.pre.alpha.sectionseparator1
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -294,6 +294,7 @@ files:
|
|
|
294
294
|
- Rakefile
|
|
295
295
|
- app/pb_kits/playbook/_playbook.scss
|
|
296
296
|
- app/pb_kits/playbook/_reset.scss
|
|
297
|
+
- app/pb_kits/playbook/data/menu.yml
|
|
297
298
|
- app/pb_kits/playbook/index.js
|
|
298
299
|
- app/pb_kits/playbook/pb_avatar/_avatar.scss
|
|
299
300
|
- app/pb_kits/playbook/pb_avatar/_avatar.tsx
|
|
@@ -1728,8 +1729,6 @@ files:
|
|
|
1728
1729
|
- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.jsx
|
|
1729
1730
|
- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.html.erb
|
|
1730
1731
|
- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx
|
|
1731
|
-
- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.html.erb
|
|
1732
|
-
- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.jsx
|
|
1733
1732
|
- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.html.erb
|
|
1734
1733
|
- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.jsx
|
|
1735
1734
|
- app/pb_kits/playbook/pb_section_separator/docs/example.yml
|
data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.html.erb
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<%= pb_rails("section_separator", props: { text: "Title Separator", variant: "background"}) %>
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { SectionSeparator } from '../../'
|
|
3
|
-
|
|
4
|
-
const SectionSeparatorTextBackground = (props) => {
|
|
5
|
-
return (
|
|
6
|
-
<SectionSeparator
|
|
7
|
-
{...props}
|
|
8
|
-
text="Title Separator"
|
|
9
|
-
variant="background"
|
|
10
|
-
/>
|
|
11
|
-
)
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
export default SectionSeparatorTextBackground
|