playbook_ui_docs 14.11.0.pre.rc.5 → 14.11.0.pre.rc.6
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/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'
|