playbook_ui 7.3.0.pre.alpha12 → 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 +3 -0
- data/app/pb_kits/playbook/data/menu.yml +2 -1
- data/app/pb_kits/playbook/index.js +2 -0
- 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_collapsible/_collapsible.html.erb +1 -1
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.jsx +50 -107
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +1 -1
- 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/docs/_collapsible_dark.html.erb +1 -1
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx +12 -10
- data/app/pb_kits/playbook/pb_collapsible/index.js +2 -2
- 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_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_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/lib/playbook/version.rb +2 -1
- metadata +60 -6
- data/app/assets/images/clark.jpg +0 -0
- data/app/assets/images/giant.jpg +0 -0
- data/app/pb_kits/playbook/pb_collapsible/useToggler.js +0 -10
@@ -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,134 +1,77 @@
|
|
1
1
|
/* @flow */
|
2
2
|
|
3
|
-
import classnames from
|
4
|
-
import {
|
5
|
-
import {
|
6
|
-
import
|
7
|
-
import
|
8
|
-
import
|
9
|
-
|
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({})
|
10
11
|
|
11
12
|
type CollapsibleProps = {
|
12
13
|
children: React.ChildrenArray<React.Element<typeof Main | Content>>,
|
13
14
|
aria?: object,
|
14
15
|
className?: string,
|
16
|
+
collapsed?: boolean,
|
15
17
|
data?: object,
|
16
18
|
id?: string,
|
17
|
-
}
|
18
|
-
|
19
|
-
type CollapsibleMainProps = {
|
20
|
-
children: array<React.ReactNode> | React.ReactNode,
|
21
|
-
className?: string,
|
22
|
-
padding?: string,
|
23
|
-
}
|
24
|
-
|
25
|
-
type CollapsibleContentProps = {
|
26
|
-
children: array<React.ReactNode> | React.ReactNode | string,
|
27
|
-
className?: string,
|
28
19
|
padding?: string,
|
29
20
|
}
|
30
21
|
|
31
|
-
const
|
32
|
-
const
|
33
|
-
const mainCSS = buildCss("pb_collapsible_main_kit")
|
34
|
-
const mainSpacing = globalProps(props, { padding })
|
22
|
+
const useCollapsible = (initial = false) => {
|
23
|
+
const [collapsed, setCollapsed] = useState(initial)
|
35
24
|
|
36
|
-
return
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
)
|
41
|
-
}
|
42
|
-
|
43
|
-
const Content = (props: CollapsibleContentProps) => {
|
44
|
-
const { children, className, padding = "md" } = props
|
45
|
-
const contentCSS = buildCss("pb_collapsible_content_kit")
|
46
|
-
const contentSpacing = globalProps(props, { padding })
|
47
|
-
|
48
|
-
return (
|
49
|
-
<div className={classnames(contentCSS, className, contentSpacing)}>
|
50
|
-
{children}
|
51
|
-
</div>
|
52
|
-
)
|
25
|
+
return [
|
26
|
+
collapsed,
|
27
|
+
() => setCollapsed((t) => !t),
|
28
|
+
]
|
53
29
|
}
|
54
30
|
|
55
|
-
const Collapsible = (
|
56
|
-
|
57
|
-
|
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
|
58
46
|
const ariaProps = buildAriaProps(aria)
|
59
47
|
const dataProps = buildDataProps(data)
|
60
48
|
const classes = classnames(
|
61
|
-
buildCss(
|
49
|
+
buildCss('pb_collapsible'),
|
62
50
|
className,
|
63
|
-
globalProps(props)
|
51
|
+
globalProps(props, { padding })
|
64
52
|
)
|
65
53
|
|
66
|
-
const [height, setHeight] = useState(0)
|
67
|
-
const toggleExpand = () => {
|
68
|
-
setHeight(height === 0 ? "auto" : 0)
|
69
|
-
}
|
70
|
-
|
71
|
-
const collapsibleChildren =
|
72
|
-
typeof children === "object" && children.length ? children : [children]
|
73
|
-
|
74
|
-
console.log("CollapsibleChildren:", collapsibleChildren)
|
75
|
-
|
76
|
-
const subComponentTags = (tagName) => {
|
77
|
-
console.log("TagName:", tagName)
|
78
|
-
return collapsibleChildren
|
79
|
-
.filter((c) => get(c, "type.displayName") === tagName)
|
80
|
-
.map((child, i) => {
|
81
|
-
console.log("the child:", child)
|
82
|
-
return React.cloneElement(child, {
|
83
|
-
key: `${tagName.toLowerCase()}-${i}`,
|
84
|
-
})
|
85
|
-
})
|
86
|
-
}
|
87
|
-
|
88
|
-
const renderChevron = (height) => {
|
89
|
-
const direction = height === 0 ? "down" : "up"
|
90
|
-
|
91
|
-
return (
|
92
|
-
<div key={direction} style={{ verticalAlign: "middle" }}>
|
93
|
-
<i className={`far fa-chevron-${direction} fa-fw`} />
|
94
|
-
</div>
|
95
|
-
)
|
96
|
-
}
|
97
|
-
|
98
|
-
const renderMain = () => {
|
99
|
-
const mainTags = subComponentTags("Main")
|
100
|
-
|
101
|
-
return (
|
102
|
-
<div onClick={toggleExpand}>
|
103
|
-
<Flex spacing='between' vertical='center'>
|
104
|
-
<FlexItem>{mainTags}</FlexItem>
|
105
|
-
<FlexItem>{renderChevron(height)}</FlexItem>
|
106
|
-
</Flex>
|
107
|
-
</div>
|
108
|
-
)
|
109
|
-
}
|
110
|
-
|
111
|
-
const renderContent = () => {
|
112
|
-
const nonMainChildren = collapsibleChildren.filter(
|
113
|
-
(child) => get(child, "type.displayName") !== "Main"
|
114
|
-
)
|
115
|
-
console.log("NonMainChildren:", nonMainChildren)
|
116
|
-
return (
|
117
|
-
<AnimateHeight duration={500} height={height} id='bottom-section'>
|
118
|
-
{nonMainChildren}
|
119
|
-
</AnimateHeight>
|
120
|
-
)
|
121
|
-
}
|
122
|
-
|
123
54
|
return (
|
124
|
-
<
|
125
|
-
|
126
|
-
|
127
|
-
|
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>
|
128
71
|
)
|
129
72
|
}
|
130
73
|
|
131
|
-
Collapsible.Main =
|
132
|
-
Collapsible.Content =
|
74
|
+
Collapsible.Main = CollapsibleMain
|
75
|
+
Collapsible.Content = CollapsibleContent
|
133
76
|
|
134
77
|
export default Collapsible
|
@@ -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
|