playbook_ui 12.6.0.pre.alpha.menuyml1 → 12.6.0.pre.alpha.sectionseparator1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|