playbook_ui 7.4.0.pre.alpha4 → 7.4.0.pre.alpha5
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/images/github-brands.svg +1 -0
- data/app/assets/images/landing-background.svg +36 -0
- data/app/assets/images/landing-image.svg +203 -0
- data/app/assets/images/{pb.logo.svg → pb-logo.svg} +2 -2
- data/app/assets/images/pb-white-logo.svg +15 -0
- data/app/pb_kits/playbook/_playbook.scss +4 -1
- data/app/pb_kits/playbook/data/menu.yml +3 -2
- data/app/pb_kits/playbook/index.js +3 -2
- data/app/pb_kits/playbook/pb_background/_background.html.erb +14 -0
- data/app/pb_kits/playbook/pb_background/_background.jsx +63 -0
- data/app/pb_kits/playbook/pb_background/_background.scss +35 -0
- data/app/pb_kits/playbook/pb_background/background.rb +35 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_dark.html.erb +3 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_dark.jsx +13 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_gradient.html.erb +3 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx +13 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_image.html.erb +13 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_image.jsx +30 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_light.html.erb +3 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx +13 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_white.html.erb +3 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_white.jsx +14 -0
- data/app/pb_kits/playbook/pb_background/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_background/docs/example.yml +15 -0
- data/app/pb_kits/playbook/pb_background/docs/index.js +6 -0
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb +2 -3
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx +1 -2
- data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +1 -4
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.html.erb +2 -5
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.html.erb +9 -0
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.jsx +77 -0
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +17 -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 +58 -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 +19 -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_date/_date.html.erb +64 -8
- data/app/pb_kits/playbook/pb_date/_date.jsx +115 -66
- data/app/pb_kits/playbook/pb_date/_date.scss +30 -0
- data/app/pb_kits/playbook/pb_date/date.rb +20 -9
- data/app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb +24 -0
- data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx +35 -0
- data/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb +21 -6
- data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +43 -12
- data/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb +27 -0
- data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx +43 -0
- data/app/pb_kits/playbook/pb_date/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_date/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb +19 -14
- data/app/pb_kits/playbook/pb_date_time/_date_time.html.erb +31 -0
- data/app/pb_kits/playbook/pb_date_time/_date_time.jsx +73 -0
- data/app/pb_kits/playbook/pb_date_time/_date_time.scss +26 -0
- data/app/pb_kits/playbook/pb_date_time/date_time.rb +29 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_align.html.erb +17 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_align.jsx +35 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.html.erb +20 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx +38 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size.html.erb +26 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size.jsx +75 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_date_time/docs/example.yml +11 -0
- data/app/pb_kits/playbook/pb_date_time/docs/index.js +3 -0
- data/app/pb_kits/playbook/pb_flex/_flex.jsx +1 -1
- data/app/pb_kits/playbook/pb_flex/_flex.scss +4 -0
- data/app/pb_kits/playbook/pb_flex/flex.rb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +52 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +19 -1
- data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb +1 -1
- data/app/pb_kits/playbook/pb_list/_list.jsx +2 -9
- data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx +3 -1
- data/app/pb_kits/playbook/pb_progress_step/_progress_step.scss +13 -4
- data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.html.erb +1 -1
- data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx +5 -7
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.html.erb +12 -0
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker_click_events.jsx +48 -0
- data/app/pb_kits/playbook/pb_progress_step/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_progress_step/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_progress_step/progress_step.rb +5 -3
- data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb +6 -0
- data/app/pb_kits/playbook/pb_radio/_radio.jsx +3 -0
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.html.erb +13 -1
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx +96 -20
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.scss +12 -1
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb +69 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx +91 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb +21 -1
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +31 -4
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb +14 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +27 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.html.erb +54 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.jsx +73 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb +59 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx +74 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.html.erb +177 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.jsx +209 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.html.erb +35 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx +51 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.html.erb +123 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.jsx +146 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/example.yml +14 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/index.js +7 -0
- data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +67 -1
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +46 -19
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +46 -10
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb +4 -4
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +3 -2
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +14 -2
- data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.jsx +20 -0
- data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx +8 -15
- data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx +1 -6
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb +10 -4
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md +20 -4
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +4 -0
- data/app/pb_kits/playbook/vendor.js +3 -0
- data/lib/playbook/version.rb +1 -1
- metadata +76 -21
- data/app/assets/images/clark.jpg +0 -0
- data/app/assets/images/giant.jpg +0 -0
- data/app/pb_kits/playbook/pb_selectable_list/_item.jsx +0 -90
- data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.html.erb +0 -11
- data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx +0 -47
- data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss +0 -17
- data/app/pb_kits/playbook/pb_selectable_list/_selectable_list_item.html.erb +0 -18
- data/app/pb_kits/playbook/pb_selectable_list/docs/_description.md +0 -3
- data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.html.erb +0 -44
- data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx +0 -44
- data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.html.erb +0 -44
- data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.jsx +0 -44
- data/app/pb_kits/playbook/pb_selectable_list/docs/example.yml +0 -12
- data/app/pb_kits/playbook/pb_selectable_list/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list.rb +0 -24
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb +0 -28
@@ -0,0 +1,35 @@
|
|
1
|
+
@import "../tokens/colors";
|
2
|
+
|
3
|
+
$background_colors: (
|
4
|
+
"gradient": linear-gradient(135deg, $gradient_start 0%, $gradient_end 100%),
|
5
|
+
"dark": $bg_dark,
|
6
|
+
"light": $bg_light,
|
7
|
+
"white": $white,
|
8
|
+
);
|
9
|
+
|
10
|
+
|
11
|
+
[class^=pb_background_kit] {
|
12
|
+
max-width: 100%;
|
13
|
+
max-height: 100%;
|
14
|
+
background-size: cover;
|
15
|
+
|
16
|
+
@each $name, $color in $background_colors {
|
17
|
+
&.pb_background_color_#{$name} {
|
18
|
+
background: $color;
|
19
|
+
}
|
20
|
+
};
|
21
|
+
|
22
|
+
.blur_up {
|
23
|
+
-webkit-filter: blur(6px);
|
24
|
+
filter: blur(6px);
|
25
|
+
transition: filter 550ms, -webkit-filter 550ms;
|
26
|
+
}
|
27
|
+
|
28
|
+
.blur_up.lazyloaded {
|
29
|
+
-webkit-filter: blur(0);
|
30
|
+
filter: blur(0);
|
31
|
+
}
|
32
|
+
|
33
|
+
|
34
|
+
|
35
|
+
}
|
@@ -0,0 +1,35 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Playbook
|
4
|
+
module PbBackground
|
5
|
+
class Background
|
6
|
+
include Playbook::Props
|
7
|
+
|
8
|
+
partial "pb_background/background"
|
9
|
+
|
10
|
+
prop :background_color, type: Playbook::Props::Enum,
|
11
|
+
values: %w[gradient dark light white],
|
12
|
+
default: "light"
|
13
|
+
prop :image_url
|
14
|
+
|
15
|
+
prop :tag, type: Playbook::Props::Enum,
|
16
|
+
values: %w[h1 h2 h3 h4 h5 h6 p div span],
|
17
|
+
default: "div"
|
18
|
+
|
19
|
+
|
20
|
+
def classname
|
21
|
+
generate_classname("pb_background_kit", image_classname, background_color_classname, separator: " ")
|
22
|
+
end
|
23
|
+
|
24
|
+
private
|
25
|
+
|
26
|
+
def image_classname
|
27
|
+
image_url.present? ? "lazyload blur_up" : ""
|
28
|
+
end
|
29
|
+
|
30
|
+
def background_color_classname
|
31
|
+
!image_url.present? ? "pb_background_color_#{background_color}" : ""
|
32
|
+
end
|
33
|
+
end
|
34
|
+
end
|
35
|
+
end
|
@@ -0,0 +1,13 @@
|
|
1
|
+
<%= pb_rails("background", props: { image_url: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", padding: "lg" }) do %>
|
2
|
+
<%= pb_rails("flex", props: { horizontal: "center", orientation: "column" }) do %>
|
3
|
+
<%= pb_rails("flex/flex_item") do %>
|
4
|
+
<%= pb_rails("title", props: { dark: true, size: 1, text: "Background Kit Image" })%>
|
5
|
+
<% end %>
|
6
|
+
<%= pb_rails("flex/flex_item", props: { padding: "lg" }) do %>
|
7
|
+
<%= pb_rails("card", props: { shadow: "deepest" }) do %>
|
8
|
+
We cannot seek achievement for ourselves and forget about progress and prosperity for our community... Our ambitions must be broad enough to include the aspirations and needs of others, for their sakes and for our own.
|
9
|
+
-Cesar Chavez
|
10
|
+
<% end %>
|
11
|
+
<% end %>
|
12
|
+
<% end %>
|
13
|
+
<% end %>
|
@@ -0,0 +1,30 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Background } from '../..'
|
3
|
+
import { Card, Flex, FlexItem, Title } from '../..'
|
4
|
+
|
5
|
+
const BackgroundImage = () => (
|
6
|
+
<div>
|
7
|
+
<Background imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80">
|
8
|
+
<Flex
|
9
|
+
orientation="column"
|
10
|
+
vertical="center"
|
11
|
+
>
|
12
|
+
<FlexItem>
|
13
|
+
<Title
|
14
|
+
dark
|
15
|
+
padding="lg"
|
16
|
+
size={1}
|
17
|
+
text="Background Kit Image"
|
18
|
+
/>
|
19
|
+
</FlexItem>
|
20
|
+
<FlexItem padding="lg">
|
21
|
+
<Card shadow="deepest">
|
22
|
+
{'We cannot seek achievement for ourselves and forget about progress and prosperity for our community... Our ambitions must be broad enough to include the aspirations and needs of others, for their sakes and for our own. - Cesar Chavez'}
|
23
|
+
</Card>
|
24
|
+
</FlexItem>
|
25
|
+
</Flex>
|
26
|
+
</Background>
|
27
|
+
</div>
|
28
|
+
)
|
29
|
+
|
30
|
+
export default BackgroundImage
|
@@ -0,0 +1 @@
|
|
1
|
+
The background kit is used for adding a background to a page or to any container. Instead of adding a custom class to give something a background, you can now wrap the elements in the background kit and use the `background_color` prop to assign its color. The colors that you can choose from for the `background_color` prop are: gradient, dark, light, and white.
|
@@ -0,0 +1,15 @@
|
|
1
|
+
examples:
|
2
|
+
|
3
|
+
rails:
|
4
|
+
- background_light: Light
|
5
|
+
- background_white: White
|
6
|
+
- background_dark: Dark
|
7
|
+
- background_gradient: Gradient
|
8
|
+
- background_image: Image
|
9
|
+
|
10
|
+
react:
|
11
|
+
- background_light: Light
|
12
|
+
- background_white: White
|
13
|
+
- background_dark: Dark
|
14
|
+
- background_gradient: Gradient
|
15
|
+
- background_image: Image
|
@@ -0,0 +1,6 @@
|
|
1
|
+
export { default as BackgroundLight } from './_background_light.jsx'
|
2
|
+
export { default as BackgroundWhite } from './_background_white.jsx'
|
3
|
+
export { default as BackgroundDark } from './_background_dark.jsx'
|
4
|
+
export { default as BackgroundGradient } from './_background_gradient.jsx'
|
5
|
+
export { default as BackgroundImage } from './_background_image.jsx'
|
6
|
+
|
@@ -1,11 +1,10 @@
|
|
1
1
|
<%= content_tag(:label, aria: object.aria,
|
2
2
|
id: object.id,
|
3
3
|
data: object.data,
|
4
|
-
class: object.classname
|
5
|
-
for: object.for_attribute ) do %>
|
4
|
+
class: object.classname) do %>
|
6
5
|
<% if object.children %>
|
7
6
|
<%= capture(&object.children) %>
|
8
|
-
<% else %>
|
7
|
+
<% else %>
|
9
8
|
<%= object.input %>
|
10
9
|
<% end %>
|
11
10
|
<span class="pb_checkbox_checkmark">
|
@@ -51,14 +51,13 @@ const Checkbox = (props: CheckboxProps) => {
|
|
51
51
|
{...ariaProps}
|
52
52
|
{...dataProps}
|
53
53
|
className={classes}
|
54
|
-
|
54
|
+
id={id}
|
55
55
|
>
|
56
56
|
<If condition={children}>
|
57
57
|
{children}
|
58
58
|
<Else />
|
59
59
|
<input
|
60
60
|
defaultChecked={checked}
|
61
|
-
id={id}
|
62
61
|
name={name}
|
63
62
|
onChange={onChange}
|
64
63
|
type="checkbox"
|
@@ -14,6 +14,7 @@ module Playbook
|
|
14
14
|
prop :text
|
15
15
|
prop :value
|
16
16
|
prop :name
|
17
|
+
|
17
18
|
prop :input_options, type: Playbook::Props::Hash,
|
18
19
|
default: {}
|
19
20
|
prop :required, type: Playbook::Props::Boolean,
|
@@ -33,10 +34,6 @@ module Playbook
|
|
33
34
|
check_box_tag(name, value, checked, input_options)
|
34
35
|
end
|
35
36
|
|
36
|
-
def for_attribute
|
37
|
-
input_options[:id]
|
38
|
-
end
|
39
|
-
|
40
37
|
def checkbox_label_status
|
41
38
|
error ? "negative" : nil
|
42
39
|
end
|
@@ -0,0 +1,77 @@
|
|
1
|
+
/* @flow */
|
2
|
+
|
3
|
+
import classnames from 'classnames'
|
4
|
+
import React, { useState } from 'react'
|
5
|
+
import { globalProps } from '../utilities/globalProps.js'
|
6
|
+
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
7
|
+
import CollapsibleContent from './child_kits/CollapsibleContent'
|
8
|
+
import CollapsibleMain from './child_kits/CollapsibleMain'
|
9
|
+
|
10
|
+
export const CollapsibleContext = React.createContext({})
|
11
|
+
|
12
|
+
type CollapsibleProps = {
|
13
|
+
children: React.ChildrenArray<React.Element<typeof Main | Content>>,
|
14
|
+
aria?: object,
|
15
|
+
className?: string,
|
16
|
+
collapsed?: boolean,
|
17
|
+
data?: object,
|
18
|
+
id?: string,
|
19
|
+
padding?: string,
|
20
|
+
}
|
21
|
+
|
22
|
+
const useCollapsible = (initial = false) => {
|
23
|
+
const [collapsed, setCollapsed] = useState(initial)
|
24
|
+
|
25
|
+
return [
|
26
|
+
collapsed,
|
27
|
+
() => setCollapsed((t) => !t),
|
28
|
+
]
|
29
|
+
}
|
30
|
+
|
31
|
+
const Collapsible = ({
|
32
|
+
aria = {},
|
33
|
+
className,
|
34
|
+
children = [],
|
35
|
+
collapsed = true,
|
36
|
+
data = {},
|
37
|
+
id,
|
38
|
+
padding = 'md',
|
39
|
+
...props
|
40
|
+
}: CollapsibleProps) => {
|
41
|
+
const [isCollapsed, collapse] = useCollapsible(collapsed)
|
42
|
+
const Main = React.Children.toArray(children).find((child) => child.type === CollapsibleMain)
|
43
|
+
const Content = React.Children.toArray(children).find((child) => child.type === CollapsibleContent)
|
44
|
+
const { children: mainChildren, ...mainProps } = Main.props
|
45
|
+
const { children: contentChildren, ...contentProps } = Content.props
|
46
|
+
const ariaProps = buildAriaProps(aria)
|
47
|
+
const dataProps = buildDataProps(data)
|
48
|
+
const classes = classnames(
|
49
|
+
buildCss('pb_collapsible'),
|
50
|
+
className,
|
51
|
+
globalProps(props, { padding })
|
52
|
+
)
|
53
|
+
|
54
|
+
return (
|
55
|
+
<CollapsibleContext.Provider value={{ collapsed: isCollapsed, collapse }}>
|
56
|
+
<div
|
57
|
+
{...ariaProps}
|
58
|
+
{...dataProps}
|
59
|
+
className={classes}
|
60
|
+
id={id}
|
61
|
+
>
|
62
|
+
<CollapsibleMain {...mainProps}>
|
63
|
+
{mainChildren}
|
64
|
+
</CollapsibleMain>
|
65
|
+
|
66
|
+
<CollapsibleContent {...contentProps}>
|
67
|
+
{contentChildren}
|
68
|
+
</CollapsibleContent>
|
69
|
+
</div>
|
70
|
+
</CollapsibleContext.Provider>
|
71
|
+
)
|
72
|
+
}
|
73
|
+
|
74
|
+
Collapsible.Main = CollapsibleMain
|
75
|
+
Collapsible.Content = CollapsibleContent
|
76
|
+
|
77
|
+
export default Collapsible
|
@@ -0,0 +1,17 @@
|
|
1
|
+
|
2
|
+
[class^=pb_collapsible_kit] {
|
3
|
+
|
4
|
+
.toggle-content {
|
5
|
+
display: none;
|
6
|
+
height: 0;
|
7
|
+
padding-bottom: 0 !important;
|
8
|
+
padding-top: 0 !important;
|
9
|
+
overflow: hidden;
|
10
|
+
transition: height 300ms, padding 300ms ease-in-out;
|
11
|
+
}
|
12
|
+
|
13
|
+
.toggle-content.is-visible {
|
14
|
+
display: block;
|
15
|
+
height: auto;
|
16
|
+
}
|
17
|
+
}
|
@@ -0,0 +1,40 @@
|
|
1
|
+
/* @flow */
|
2
|
+
|
3
|
+
import classnames from 'classnames'
|
4
|
+
import React, { useContext } from 'react'
|
5
|
+
import AnimateHeight from 'react-animate-height'
|
6
|
+
import { buildCss } from '../../utilities/props'
|
7
|
+
import { globalProps } from '../../utilities/globalProps.js'
|
8
|
+
|
9
|
+
import { CollapsibleContext } from '../_collapsible.jsx'
|
10
|
+
|
11
|
+
type CollapsibleContentProps = {
|
12
|
+
children: array<React.ReactNode> | React.ReactNode | string,
|
13
|
+
className?: string,
|
14
|
+
padding?: string,
|
15
|
+
}
|
16
|
+
|
17
|
+
const CollapsibleContent = ({
|
18
|
+
children,
|
19
|
+
className,
|
20
|
+
padding = 'md',
|
21
|
+
...props
|
22
|
+
}: CollapsibleContentProps) => {
|
23
|
+
const context = useContext(CollapsibleContext)
|
24
|
+
const contentCSS = buildCss('pb_collapsible_content_kit')
|
25
|
+
const contentSpacing = globalProps(props, { padding })
|
26
|
+
|
27
|
+
return (
|
28
|
+
<div className={classnames(contentCSS, className, contentSpacing)}>
|
29
|
+
<AnimateHeight
|
30
|
+
duration={300}
|
31
|
+
height={context.collapsed ? 0 : 'auto'}
|
32
|
+
id="bottom-section"
|
33
|
+
>
|
34
|
+
{children}
|
35
|
+
</AnimateHeight>
|
36
|
+
</div>
|
37
|
+
)
|
38
|
+
}
|
39
|
+
|
40
|
+
export default CollapsibleContent
|
@@ -0,0 +1,58 @@
|
|
1
|
+
/* @flow */
|
2
|
+
|
3
|
+
import classnames from 'classnames'
|
4
|
+
import { Flex, FlexItem } from '../../'
|
5
|
+
import React, { useContext } from 'react'
|
6
|
+
import { buildCss } from '../../utilities/props'
|
7
|
+
import { globalProps } from '../../utilities/globalProps.js'
|
8
|
+
import { CollapsibleContext } from '../_collapsible.jsx'
|
9
|
+
|
10
|
+
type CollapsibleMainProps = {
|
11
|
+
children: array<React.ReactNode> | React.ReactNode,
|
12
|
+
className?: string,
|
13
|
+
padding?: string,
|
14
|
+
}
|
15
|
+
|
16
|
+
type IconProps = {
|
17
|
+
collapsed: boolean
|
18
|
+
}
|
19
|
+
|
20
|
+
const Icon = ({ collapsed }: IconProps) => {
|
21
|
+
const direction = collapsed ? 'down' : 'up'
|
22
|
+
|
23
|
+
return (
|
24
|
+
<div
|
25
|
+
key={direction}
|
26
|
+
style={{ verticalAlign: 'middle' }}
|
27
|
+
>
|
28
|
+
<i className={`far fa-chevron-${direction} fa-fw`} />
|
29
|
+
</div>
|
30
|
+
)
|
31
|
+
}
|
32
|
+
|
33
|
+
const CollapsibleMain = ({
|
34
|
+
children,
|
35
|
+
className,
|
36
|
+
padding = 'md',
|
37
|
+
...props
|
38
|
+
}: CollapsibleMainProps) => {
|
39
|
+
const context = useContext(CollapsibleContext)
|
40
|
+
const mainCSS = buildCss('pb_collapsible_main_kit')
|
41
|
+
const mainSpacing = globalProps(props, { padding })
|
42
|
+
|
43
|
+
return (
|
44
|
+
<div className={classnames(mainCSS, className, mainSpacing)}>
|
45
|
+
<div onClick={() => context.collapse()}>
|
46
|
+
<Flex
|
47
|
+
spacing="between"
|
48
|
+
vertical="center"
|
49
|
+
>
|
50
|
+
<FlexItem>{children}</FlexItem>
|
51
|
+
<FlexItem><Icon collapsed={context.collapsed} /></FlexItem>
|
52
|
+
</Flex>
|
53
|
+
</div>
|
54
|
+
</div>
|
55
|
+
)
|
56
|
+
}
|
57
|
+
|
58
|
+
export default CollapsibleMain
|