playbook_ui_docs 14.11.0.pre.rc.5 → 14.11.0.pre.rc.6
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/pb_section_separator/docs/_section_separator_color.html.erb +10 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.jsx +42 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.md +3 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/index.js +1 -0
- data/dist/playbook-doc.js +1 -1
- metadata +4 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 6dc5e3aa29df8e7fa14e79be5842cf3e4525a60cf9e02d46387f957c0cb62da8
|
|
4
|
+
data.tar.gz: 9e8b5383ed5a6f2efb56f9cf1a049288565882f6569926885630ce46019611c1
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: e6fec0e55287a8ea48dded8a426f708ead7163e7e719832d70f523d09d4c617d61216bc2e53bd147a4df95cddee28c42b9a3a348b53df4264d7824f67403374c
|
|
7
|
+
data.tar.gz: 51324cd720345868135ba05784acd9e1f2b125879db6be6e3991fd8b10d05a88c976010f724a5817ddae33b0deef1b3eaec62e921dafb562af7d9b86a4975e3c
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<%= pb_rails("section_separator", props: { text: "Default Separator" }) %>
|
|
2
|
+
<%= pb_rails("section_separator", props: { color: "primary", text: "Primary Separator" }) %>
|
|
3
|
+
<%= pb_rails("section_separator", props: { color: "primary", line_style: "dashed", text: "Primary Dashed Separator" }) %>
|
|
4
|
+
<%= pb_rails("section_separator", props: { color: "primary" }) do %>
|
|
5
|
+
<%= pb_rails("flex", props: { padding: "xs" }) do %>
|
|
6
|
+
<%= pb_rails("icon", props: { color: "primary", icon: "arrow-down" }) %>
|
|
7
|
+
<%= pb_rails("detail", props: { text: "Children", size: "sm", color: "link" }) %>
|
|
8
|
+
<% end %>
|
|
9
|
+
<% end %>
|
|
10
|
+
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import { SectionSeparator, Flex, Detail, Icon } from "playbook-ui"
|
|
3
|
+
|
|
4
|
+
const children = (
|
|
5
|
+
<Flex padding="xs">
|
|
6
|
+
<Icon color="primary"
|
|
7
|
+
icon="arrow-down"
|
|
8
|
+
/>
|
|
9
|
+
<Detail
|
|
10
|
+
color="link"
|
|
11
|
+
size="sm"
|
|
12
|
+
text="Children"
|
|
13
|
+
/>
|
|
14
|
+
</Flex>
|
|
15
|
+
)
|
|
16
|
+
|
|
17
|
+
const SectionSeparatorColor = (props) => {
|
|
18
|
+
return (
|
|
19
|
+
<div>
|
|
20
|
+
<SectionSeparator text="Default Separator"
|
|
21
|
+
{...props}
|
|
22
|
+
/>
|
|
23
|
+
<SectionSeparator color="primary"
|
|
24
|
+
text="Primary Separator"
|
|
25
|
+
{...props}
|
|
26
|
+
/>
|
|
27
|
+
<SectionSeparator
|
|
28
|
+
color="primary"
|
|
29
|
+
lineStyle="dashed"
|
|
30
|
+
text="Primary Dashed Separator"
|
|
31
|
+
{...props}
|
|
32
|
+
/>
|
|
33
|
+
<SectionSeparator color="primary"
|
|
34
|
+
{...props}
|
|
35
|
+
>
|
|
36
|
+
{children}
|
|
37
|
+
</SectionSeparator>
|
|
38
|
+
</div>
|
|
39
|
+
)
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
export default SectionSeparatorColor
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
Pass "primary" to the `color` prop to change any section separator color.
|
|
2
|
+
|
|
3
|
+
**NOTE:** Passing `children` overrides any content provided via the `text` prop. The `color` prop does not affect the `text` prop's color, and the color of `children` is determined by the children's individual props. For greater control over text color customization, consider using a separator with `children`.
|
|
@@ -6,6 +6,7 @@ examples:
|
|
|
6
6
|
- section_separator_text: Text Separator
|
|
7
7
|
- section_separator_vertical: Vertical
|
|
8
8
|
- section_separator_children: Children
|
|
9
|
+
- section_separator_color: Color
|
|
9
10
|
|
|
10
11
|
react:
|
|
11
12
|
- section_separator_line: Line Separator
|
|
@@ -13,6 +14,7 @@ examples:
|
|
|
13
14
|
- section_separator_text: Text Separator
|
|
14
15
|
- section_separator_vertical: Vertical
|
|
15
16
|
- section_separator_children: Children
|
|
17
|
+
- section_separator_color: Color
|
|
16
18
|
|
|
17
19
|
swift:
|
|
18
20
|
- section_separator_line_swift: Line Separator
|
|
@@ -3,3 +3,4 @@ export { default as SectionSeparatorText } from './_section_separator_text.jsx'
|
|
|
3
3
|
export { default as SectionSeparatorVertical } from './_section_separator_vertical.jsx'
|
|
4
4
|
export { default as SectionSeparatorDashed } from './_section_separator_dashed.jsx'
|
|
5
5
|
export { default as SectionSeparatorChildren } from './_section_separator_children.jsx'
|
|
6
|
+
export { default as SectionSeparatorColor } from './_section_separator_color.jsx'
|