playbook_ui 8.0.0.pre.alpha1 → 8.1.0
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 +8 -7
- 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_card/card_header.rb +7 -7
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.jsx +84 -0
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +15 -0
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.jsx +40 -0
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.jsx +59 -0
- data/app/pb_kits/playbook/pb_collapsible/collapsible.html.erb +7 -0
- data/app/pb_kits/playbook/pb_collapsible/collapsible.rb +11 -0
- data/app/pb_kits/playbook/pb_collapsible/collapsible.test.js +50 -0
- data/app/pb_kits/playbook/pb_collapsible/collapsible_content.html.erb +7 -0
- data/app/pb_kits/playbook/pb_collapsible/collapsible_content.rb +17 -0
- data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +16 -0
- data/app/pb_kits/playbook/pb_collapsible/collapsible_main.rb +15 -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 +19 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +9 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_collapsible/index.js +79 -0
- data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.jsx +6 -2
- data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb +1 -1
- data/app/pb_kits/playbook/pb_docs/kit_api.html.erb +12 -0
- data/app/pb_kits/playbook/pb_docs/kit_api.rb +19 -0
- data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +28 -0
- data/app/pb_kits/playbook/pb_docs/kit_example.rb +46 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +2 -2
- data/app/pb_kits/playbook/pb_form/form.rb +11 -2
- data/app/pb_kits/playbook/pb_form/form_builder.rb +1 -1
- data/app/pb_kits/playbook/pb_form/form_builder/action_area.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/form_with.html.erb +7 -14
- data/app/pb_kits/playbook/pb_form/form_with.rb +13 -6
- data/app/pb_kits/playbook/pb_nav/_item.jsx +2 -0
- data/app/pb_kits/playbook/pb_nav/_nav.jsx +2 -2
- data/app/pb_kits/playbook/pb_nav/item.html.erb +2 -2
- data/app/pb_kits/playbook/pb_nav/nav.html.erb +1 -1
- data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.jsx +1 -1
- data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss +5 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.html.erb +5 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.jsx +7 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.md +1 -1
- data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb +1 -1
- data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx +43 -26
- data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.scss +18 -0
- data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.html.erb +18 -5
- data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.jsx +10 -5
- data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb +7 -3
- data/app/pb_kits/playbook/pb_time_stacked/time_stacked.rb +8 -30
- data/app/pb_kits/playbook/pb_time_stacked/time_stacked.test.js +33 -0
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +4 -3
- data/app/pb_kits/playbook/vendor.js +3 -0
- data/lib/playbook.rb +13 -8
- data/lib/playbook/markdown.rb +4 -0
- data/lib/playbook/markdown/helper.rb +153 -0
- data/lib/playbook/pb_doc_helper.rb +89 -0
- data/lib/playbook/props/base.rb +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +34 -10
- data/app/controllers/playbook/application_controller.rb +0 -14
- data/app/helpers/playbook/application_helper.rb +0 -30
- data/app/helpers/playbook/pb_doc_helper.rb +0 -210
- data/app/helpers/playbook/pb_sample_helper.rb +0 -64
- data/app/helpers/playbook/redcarpet_helper.rb +0 -151
- data/app/pb_kits/playbook/pb_form/form.html.erb +0 -7
@@ -0,0 +1 @@
|
|
1
|
+
export { default as CollapsibleDefault } from './_collapsible_default.jsx'
|
@@ -0,0 +1,79 @@
|
|
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.toggleElement(this.target)
|
16
|
+
})
|
17
|
+
this.displayDownArrow()
|
18
|
+
}
|
19
|
+
|
20
|
+
get target() {
|
21
|
+
return this.element.parentNode.querySelector(CONTENT_SELECTOR)
|
22
|
+
}
|
23
|
+
|
24
|
+
showElement(elem) {
|
25
|
+
// Get the natural height of the element
|
26
|
+
const getHeight = () => {
|
27
|
+
elem.style.display = 'block'
|
28
|
+
const height = elem.scrollHeight + 'px' // Get it's height
|
29
|
+
elem.style.display = '' // Hide it again
|
30
|
+
return height
|
31
|
+
}
|
32
|
+
|
33
|
+
const height = getHeight()
|
34
|
+
elem.classList.add('is-visible')
|
35
|
+
elem.style.height = height // Update the max-height
|
36
|
+
|
37
|
+
// Once the transition is complete, remove the inline max-height so the content can scale responsively
|
38
|
+
window.setTimeout(() => {
|
39
|
+
elem.style.height = ''
|
40
|
+
}, 300)
|
41
|
+
}
|
42
|
+
|
43
|
+
hideElement(elem) {
|
44
|
+
// Give the element a height to change from
|
45
|
+
elem.style.height = elem.scrollHeight + 'px'
|
46
|
+
|
47
|
+
window.setTimeout(() => {
|
48
|
+
elem.style.height = '0'
|
49
|
+
elem.style.paddingTop = '0'
|
50
|
+
elem.style.paddingBottom = '0'
|
51
|
+
}, 1)
|
52
|
+
|
53
|
+
// When the transition is complete, hide it
|
54
|
+
window.setTimeout(() => {
|
55
|
+
elem.classList.remove('is-visible')
|
56
|
+
}, 300)
|
57
|
+
}
|
58
|
+
|
59
|
+
toggleElement(elem) {
|
60
|
+
if (elem.classList.contains('is-visible')) {
|
61
|
+
this.hideElement(elem)
|
62
|
+
this.displayDownArrow()
|
63
|
+
return
|
64
|
+
}
|
65
|
+
// Otherwise, show it
|
66
|
+
this.showElement(elem)
|
67
|
+
this.displayUpArrow()
|
68
|
+
}
|
69
|
+
|
70
|
+
displayDownArrow() {
|
71
|
+
this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'inline-block'
|
72
|
+
this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'none'
|
73
|
+
}
|
74
|
+
|
75
|
+
displayUpArrow() {
|
76
|
+
this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'inline-block'
|
77
|
+
this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'none'
|
78
|
+
}
|
79
|
+
}
|
@@ -2,6 +2,7 @@
|
|
2
2
|
|
3
3
|
import React from 'react'
|
4
4
|
import { DateStacked, Flex, FlexItem, TimeStacked } from '../'
|
5
|
+
import { buildDataProps } from '../utilities/props'
|
5
6
|
import { globalProps } from '../utilities/globalProps.js'
|
6
7
|
|
7
8
|
type DateTimeStackedProps = {
|
@@ -12,12 +13,15 @@ type DateTimeStackedProps = {
|
|
12
13
|
}
|
13
14
|
|
14
15
|
const DateTimeStacked = (props: DateTimeStackedProps) => {
|
15
|
-
const { date, dark } = props
|
16
|
+
const { date, data = {}, dark } = props,
|
17
|
+
dataProps = buildDataProps(data)
|
18
|
+
|
16
19
|
return (
|
17
20
|
<Flex
|
18
21
|
className={globalProps(props)}
|
19
22
|
orientation="row"
|
20
23
|
vertical="center"
|
24
|
+
{...dataProps}
|
21
25
|
>
|
22
26
|
<FlexItem>
|
23
27
|
<DateStacked
|
@@ -32,8 +36,8 @@ const DateTimeStacked = (props: DateTimeStackedProps) => {
|
|
32
36
|
<TimeStacked
|
33
37
|
className="pb_date_time_stacked_kit"
|
34
38
|
dark={dark}
|
35
|
-
date={date}
|
36
39
|
tag="caption"
|
40
|
+
time={date}
|
37
41
|
/>
|
38
42
|
</FlexItem>
|
39
43
|
</Flex>
|
@@ -7,7 +7,7 @@
|
|
7
7
|
<%= pb_rails("date_stacked", props: { align: "right", date: object.date, reverse: true, size: "sm", dark: object.dark }) %>
|
8
8
|
<% end %>
|
9
9
|
<%= pb_rails("flex/flex_item") do %>
|
10
|
-
<%= pb_rails("time_stacked", props: { classname: "pb_date_time_stacked_kit",
|
10
|
+
<%= pb_rails("time_stacked", props: { classname: "pb_date_time_stacked_kit", time: object.date, tag: "caption" }) %>
|
11
11
|
<% end %>
|
12
12
|
<% end %>
|
13
13
|
<% end %>
|
@@ -0,0 +1,12 @@
|
|
1
|
+
<div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
|
2
|
+
<%= pb_rails("title", props: { text: "Available Props", size: 3, margin_bottom: "sm" }) %>
|
3
|
+
<%= pb_rails("card", props: { padding: "none" }) do %>
|
4
|
+
<%= pb_rails("list", props: { xpadding: true }) do %>
|
5
|
+
<% kit_props.each do |key, _def| %>
|
6
|
+
<%= pb_rails("list/item") do %>
|
7
|
+
<%= key %>
|
8
|
+
<% end %>
|
9
|
+
<% end %>
|
10
|
+
<% end %>
|
11
|
+
<% end %>
|
12
|
+
</div>
|
@@ -0,0 +1,19 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Playbook
|
4
|
+
module PbDocs
|
5
|
+
class KitApi < Playbook::KitBase
|
6
|
+
prop :kit, type: Playbook::Props::String, required: true
|
7
|
+
|
8
|
+
def kit_props
|
9
|
+
kit_class.props
|
10
|
+
end
|
11
|
+
|
12
|
+
private
|
13
|
+
|
14
|
+
def kit_class
|
15
|
+
@kit_class ||= Playbook::KitResolver.resolve(kit.to_s)
|
16
|
+
end
|
17
|
+
end
|
18
|
+
end
|
19
|
+
end
|
@@ -0,0 +1,28 @@
|
|
1
|
+
<%= pb_rails("card", props: { classname: "pb--doc", padding: "none", dark: dark }) do %>
|
2
|
+
<div class="pb--kit-example">
|
3
|
+
<%= pb_rails("caption", props: { text: example_title }) %>
|
4
|
+
<br />
|
5
|
+
<%= example %>
|
6
|
+
<br>
|
7
|
+
</div>
|
8
|
+
|
9
|
+
<% if show_code %>
|
10
|
+
<div class="markdown pb--kit-example-markdown <%= dark ? "dark" : "" %>">
|
11
|
+
<%= markdown(description) %>
|
12
|
+
</div>
|
13
|
+
<div id="code-wrapper">
|
14
|
+
<div class="pb--codeControls">
|
15
|
+
<ul>
|
16
|
+
<li>
|
17
|
+
<a href="#" id="toggle-open" data-toggle="code_example">Code Example</a>
|
18
|
+
</li>
|
19
|
+
</ul>
|
20
|
+
</div>
|
21
|
+
<div class="pb--codeCopy" data-action="toggle" data-togglable="code_example" style="display: none" >
|
22
|
+
<%= pb_rails("section_separator", props: { dark: dark })%>
|
23
|
+
<a href="#" id="toggle-close" data-toggle="false" class="pb--close-toggle">Close</a>
|
24
|
+
<pre class="highlight"><%= raw rouge(source, highlighter) %></pre>
|
25
|
+
</div>
|
26
|
+
</div>
|
27
|
+
<% end %>
|
28
|
+
<% end %>
|
@@ -0,0 +1,46 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Playbook
|
4
|
+
module PbDocs
|
5
|
+
class KitExample < Playbook::KitBase
|
6
|
+
include Playbook::Markdown::Helper
|
7
|
+
|
8
|
+
prop :kit, type: Playbook::Props::String, required: true
|
9
|
+
prop :example_title, type: Playbook::Props::String, required: true
|
10
|
+
prop :example_key, type: Playbook::Props::String, required: true
|
11
|
+
prop :show_code, type: Playbook::Props::Boolean, default: true
|
12
|
+
prop :type, type: Playbook::Props::Enum, values: %w[rails react], default: "rails"
|
13
|
+
prop :dark, type: Playbook::Props::Boolean, default: false
|
14
|
+
|
15
|
+
def example
|
16
|
+
if type == "rails"
|
17
|
+
render inline: source
|
18
|
+
elsif type == "react"
|
19
|
+
react_component example_key.camelize, { dark: dark }
|
20
|
+
end
|
21
|
+
end
|
22
|
+
|
23
|
+
def description
|
24
|
+
@description ||= read_kit_file("_#{example_key}.md")
|
25
|
+
end
|
26
|
+
|
27
|
+
def highlighter
|
28
|
+
type.eql?("rails") ? "erb" : "react"
|
29
|
+
end
|
30
|
+
|
31
|
+
def source
|
32
|
+
@source ||= begin
|
33
|
+
extension = type == "react" ? "jsx" : "html.erb"
|
34
|
+
read_kit_file("_#{example_key}.#{extension}")
|
35
|
+
end
|
36
|
+
end
|
37
|
+
|
38
|
+
private
|
39
|
+
|
40
|
+
def read_kit_file(*args)
|
41
|
+
path = ::Playbook.kit_path(kit, "docs", *args)
|
42
|
+
path.exist? ? path.read : ""
|
43
|
+
end
|
44
|
+
end
|
45
|
+
end
|
46
|
+
end
|
@@ -13,8 +13,8 @@
|
|
13
13
|
]
|
14
14
|
%>
|
15
15
|
|
16
|
-
<%= pb_rails("form", props: {
|
17
|
-
|
16
|
+
<%= pb_rails("form/form_with", props: {
|
17
|
+
scope: :example, method: :get, url: "",
|
18
18
|
validate: true
|
19
19
|
}) do |form| %>
|
20
20
|
<%= form.text_field :example_text_field, props: { label: true, required: true } %>
|
@@ -19,8 +19,17 @@ module Playbook
|
|
19
19
|
end
|
20
20
|
end
|
21
21
|
|
22
|
-
def render_in(view_context, &
|
23
|
-
|
22
|
+
def render_in(view_context, &block)
|
23
|
+
form_kit.render_in(view_context, &block)
|
24
|
+
end
|
25
|
+
|
26
|
+
private
|
27
|
+
|
28
|
+
def form_kit
|
29
|
+
@form_system ||= begin
|
30
|
+
::Playbook::KitResolver.resolve("form/#{form_system}")
|
31
|
+
.new(options: form_system_options, validate: validate, children: children)
|
32
|
+
end
|
24
33
|
end
|
25
34
|
end
|
26
35
|
end
|
@@ -21,7 +21,7 @@ module Playbook
|
|
21
21
|
prepend(DatePickerField)
|
22
22
|
|
23
23
|
def actions(&block)
|
24
|
-
@template.render_component ActionArea.new(submit_default_value: submit_default_value
|
24
|
+
@template.render_component ActionArea.new(submit_default_value: submit_default_value, children: block)
|
25
25
|
end
|
26
26
|
end
|
27
27
|
end
|
@@ -1,18 +1,11 @@
|
|
1
|
-
<%= form_with(
|
2
|
-
aria: aria,
|
3
|
-
class: classname,
|
4
|
-
data: data,
|
5
|
-
builder: form_builder,
|
6
|
-
**options) do |form| %>
|
7
|
-
<% instance_exec form, &children %>
|
1
|
+
<%= form_with(form_options, &method(:render_form)) %>
|
8
2
|
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
<% end %>
|
3
|
+
<% if validate %>
|
4
|
+
<% content_for :pb_js do %>
|
5
|
+
<%= javascript_tag do %>
|
6
|
+
window.addEventListener('DOMContentLoaded', function() {
|
7
|
+
PbFormValidation.start()
|
8
|
+
})
|
16
9
|
<% end %>
|
17
10
|
<% end %>
|
18
11
|
<% end %>
|
@@ -14,16 +14,23 @@ module Playbook
|
|
14
14
|
prop(:data).merge("pb-form-validation" => validate)
|
15
15
|
end
|
16
16
|
|
17
|
-
def
|
18
|
-
{
|
17
|
+
def form_options
|
18
|
+
{
|
19
|
+
url: "",
|
20
|
+
id: id,
|
21
|
+
aria: aria,
|
22
|
+
class: classname,
|
23
|
+
data: data,
|
24
|
+
builder: ::Playbook::PbForm::FormWith::FormBuilder,
|
25
|
+
}.merge(options)
|
19
26
|
end
|
20
27
|
|
21
|
-
def
|
22
|
-
|
28
|
+
def render_form(builder)
|
29
|
+
view_context.capture(builder, &children)
|
23
30
|
end
|
24
31
|
|
25
|
-
def
|
26
|
-
|
32
|
+
def classname
|
33
|
+
[generate_classname("pb-form"), options[:class]].join(" ")
|
27
34
|
end
|
28
35
|
|
29
36
|
def render_in(view_context, &_block)
|
@@ -75,6 +75,7 @@ const NavItem = (props: NavItemProps) => {
|
|
75
75
|
key={iconLeft}
|
76
76
|
>
|
77
77
|
<Icon
|
78
|
+
aria={{ label: iconLeft }}
|
78
79
|
className="pb_nav_list_item_icon_left"
|
79
80
|
fixedWidth
|
80
81
|
icon={iconLeft}
|
@@ -90,6 +91,7 @@ const NavItem = (props: NavItemProps) => {
|
|
90
91
|
key={iconRight}
|
91
92
|
>
|
92
93
|
<Icon
|
94
|
+
aria={{ label: iconRight }}
|
93
95
|
className="pb_nav_list_item_icon_right"
|
94
96
|
fixedWidth
|
95
97
|
icon={iconRight}
|
@@ -48,7 +48,7 @@ const Nav = (props: NavProps) => {
|
|
48
48
|
)
|
49
49
|
|
50
50
|
return (
|
51
|
-
<
|
51
|
+
<nav
|
52
52
|
{...ariaProps}
|
53
53
|
{...dataProps}
|
54
54
|
className={cardCss}
|
@@ -69,7 +69,7 @@ const Nav = (props: NavProps) => {
|
|
69
69
|
</div>
|
70
70
|
</If>
|
71
71
|
<ul>{children}</ul>
|
72
|
-
</
|
72
|
+
</nav>
|
73
73
|
)
|
74
74
|
}
|
75
75
|
|
@@ -9,13 +9,13 @@
|
|
9
9
|
<%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
|
10
10
|
<% end %>
|
11
11
|
<% if object.icon_left %>
|
12
|
-
<%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
|
12
|
+
<%= pb_rails("icon", props: { aria: { label: object.icon_left }, icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
|
13
13
|
<% end %>
|
14
14
|
<span class="pb_nav_list_item_text">
|
15
15
|
<%= object.text %><%= content.presence %>
|
16
16
|
</span>
|
17
17
|
<% if object.icon_right %>
|
18
|
-
<%= pb_rails("icon", props: { icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>
|
18
|
+
<%= pb_rails("icon", props: { aria: { label: object.icon_right }, icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>
|
19
19
|
<% end %>
|
20
20
|
<% end %>
|
21
21
|
<% end %>
|