playbook_ui_docs 13.5.0 → 13.7.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/pb_body/docs/_body_truncate.html.erb +12 -0
- data/app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx +50 -0
- data/app/pb_kits/playbook/pb_body/docs/_body_truncate.md +4 -0
- data/app/pb_kits/playbook/pb_body/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_body/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_header.html.erb +31 -27
- data/app/pb_kits/playbook/pb_table/docs/_table_header.md +8 -1
- data/app/pb_kits/playbook/pb_title/docs/_title_truncate.html.erb +12 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx +53 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_truncate.md +4 -0
- data/app/pb_kits/playbook/pb_title/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_title/docs/index.js +1 -0
- data/dist/playbook-doc.js +7 -7
- metadata +8 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: c7e862ec645c6b76451d3f8127ef9e87f9a499ba3bd3af9bf13412a1d5311be8
|
|
4
|
+
data.tar.gz: 60a9f13d48cee8f5916cd4a08d69cd13f8d6e8f99495eaa6cad280903e29f360
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: b85be70b302b4dbe88c77a9938ff322a23dd085b114efb7cfd794323dde1f55464b6e632cf071d2832ae84d462ce4fe0f124fee89a50db6a882df99f3d403edc
|
|
7
|
+
data.tar.gz: 163ae9fafa8641a3e6b1cc7082d2ef1f1df6f67bc43854280a2ccfb63ed1ed92427477205c654eee2af00511ead83f1bf4d72f4c33304669d034331e39e1266b
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<% lorem = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, minus. Nisi beatae voluptatum labore sequi. Nemo accusantium corrupti, reiciendis magnam tenetur perferendis esse pariatur voluptas eaque hic vel rem nihil quidem dolorum ex dolor, libero ullam placeat, sapiente eos. Cumque obcaecati dignissimos molestiae, minima quibusdam sint maxime libero accusantium animi quis quia maiores enim ipsum, esse, modi laudantium illum error!" %>
|
|
2
|
+
|
|
3
|
+
<%= pb_rails("flex", props: { orientation: "column", max_width: "md" }) do %>
|
|
4
|
+
<%= pb_rails("caption", props: { text: "After first row" }) %>
|
|
5
|
+
<%= pb_rails("body", props: { text: lorem, truncate: "1", margin_bottom: "md" }) %>
|
|
6
|
+
|
|
7
|
+
<%= pb_rails("caption", props: { text: "After second row" }) %>
|
|
8
|
+
<%= pb_rails("body", props: { text: lorem, truncate: "2", margin_bottom: "md" }) %>
|
|
9
|
+
|
|
10
|
+
<%= pb_rails("caption", props: { text: "After third row" }) %>
|
|
11
|
+
<%= pb_rails("body", props: { text: lorem, truncate: "3" }) %>
|
|
12
|
+
<% end %>
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
import Body from '../_body';
|
|
4
|
+
import Caption from '../../pb_caption/_caption'
|
|
5
|
+
import Flex from '../../pb_flex/_flex'
|
|
6
|
+
|
|
7
|
+
const BodyTruncate = (props) => {
|
|
8
|
+
const lorem = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, minus. Nisi beatae voluptatum labore sequi. Nemo accusantium corrupti, reiciendis magnam tenetur perferendis esse pariatur voluptas eaque hic vel rem nihil quidem dolorum ex dolor, libero ullam placeat, sapiente eos. Cumque obcaecati dignissimos molestiae, minima quibusdam sint maxime libero accusantium animi quis quia maiores enim ipsum, esse, modi laudantium illum error!"
|
|
9
|
+
|
|
10
|
+
return (
|
|
11
|
+
<Flex
|
|
12
|
+
maxWidth="md"
|
|
13
|
+
orientation="column"
|
|
14
|
+
>
|
|
15
|
+
<Caption
|
|
16
|
+
text="After first row"
|
|
17
|
+
{...props}
|
|
18
|
+
/>
|
|
19
|
+
<Body
|
|
20
|
+
marginBottom="md"
|
|
21
|
+
text={lorem}
|
|
22
|
+
truncate="1"
|
|
23
|
+
{...props}
|
|
24
|
+
/>
|
|
25
|
+
|
|
26
|
+
<Caption
|
|
27
|
+
text="After second row"
|
|
28
|
+
{...props}
|
|
29
|
+
/>
|
|
30
|
+
<Body
|
|
31
|
+
marginBottom="md"
|
|
32
|
+
text={lorem}
|
|
33
|
+
truncate="2"
|
|
34
|
+
{...props}
|
|
35
|
+
/>
|
|
36
|
+
|
|
37
|
+
<Caption
|
|
38
|
+
text="After third row"
|
|
39
|
+
{...props}
|
|
40
|
+
/>
|
|
41
|
+
<Body
|
|
42
|
+
text={lorem}
|
|
43
|
+
truncate="3"
|
|
44
|
+
{...props}
|
|
45
|
+
/>
|
|
46
|
+
</Flex>
|
|
47
|
+
)
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
export default BodyTruncate
|
|
@@ -4,8 +4,11 @@ examples:
|
|
|
4
4
|
- body_block: Block
|
|
5
5
|
- body_articles: Best settings for articles
|
|
6
6
|
- body_styled: Styled tags
|
|
7
|
+
- body_truncate: Truncate
|
|
8
|
+
|
|
7
9
|
react:
|
|
8
10
|
- body_light: Default
|
|
9
11
|
- body_block: Block
|
|
10
12
|
- body_articles: Best settings for articles
|
|
11
13
|
- body_styled: Styled tags
|
|
14
|
+
- body_truncate: Truncate
|
|
@@ -2,3 +2,4 @@ export { default as BodyLight } from './_body_light.jsx'
|
|
|
2
2
|
export { default as BodyBlock } from './_body_block.jsx'
|
|
3
3
|
export { default as BodyStyled } from './_body_styled.jsx'
|
|
4
4
|
export { default as BodyArticles } from './_body_articles.jsx'
|
|
5
|
+
export { default as BodyTruncate } from './_body_truncate.jsx'
|
|
@@ -2,27 +2,31 @@
|
|
|
2
2
|
<thead>
|
|
3
3
|
<tr>
|
|
4
4
|
<%= pb_rails("table/table_header", props: {
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
text: "Territory",
|
|
6
|
+
id: "territory",
|
|
7
7
|
sort_menu: [
|
|
8
|
-
{ item: "
|
|
9
|
-
{ item: "
|
|
8
|
+
{ item: "Territory", link: "?sort=territory_desc", active: params["sort"] == "territory_desc", direction: "desc" },
|
|
9
|
+
{ item: "Territory", link: "?sort=territory_asc", active: params["sort"] == "territory_asc", direction: "asc" }
|
|
10
10
|
],
|
|
11
11
|
}) %>
|
|
12
12
|
<%= pb_rails("table/table_header", props: {
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
id: "name",
|
|
14
|
+
text: "Full Name",
|
|
15
|
+
colspan: 2,
|
|
15
16
|
sort_menu: [
|
|
16
|
-
{ item: "
|
|
17
|
-
{ item: "
|
|
17
|
+
{ item: "First Name Descending", link: "?sort=firstname_desc", active: params["sort"] == "firstname_desc", direction: "desc" },
|
|
18
|
+
{ item: "First Name Ascending", link: "?sort=firstname_asc", active: params["sort"] == "firstname_asc", direction: "asc" },
|
|
19
|
+
{ item: "Last Name Descending", link: "?sort=lastname_desc", active: params["sort"] == "lastname_desc", direction: "desc" },
|
|
20
|
+
{ item: "Last Name Ascending", link: "?sort=lastname_asc", active: params["sort"] == "lastname_asc", direction: "asc" }
|
|
18
21
|
],
|
|
19
22
|
}) %>
|
|
20
23
|
<%= pb_rails("table/table_header", props: {
|
|
21
|
-
text: "
|
|
22
|
-
id: "
|
|
24
|
+
text: "Age",
|
|
25
|
+
id: "age",
|
|
26
|
+
sort_dropdown: true,
|
|
23
27
|
sort_menu: [
|
|
24
|
-
{ item: "
|
|
25
|
-
{ item: "
|
|
28
|
+
{ item: "Age Descending", link: "?sort=age_desc", active: params["sort"] == "age_desc", direction: "desc" },
|
|
29
|
+
{ item: "Age Ascending", link: "?sort=age_asc", active: params["sort"] == "age_asc", direction: "asc" }
|
|
26
30
|
],
|
|
27
31
|
}) %>
|
|
28
32
|
<%= pb_rails("table/table_header", props: { text: "Job Title" }) %>
|
|
@@ -30,25 +34,25 @@
|
|
|
30
34
|
</thead>
|
|
31
35
|
<tbody>
|
|
32
36
|
<tr>
|
|
33
|
-
<td>
|
|
34
|
-
<td>Name
|
|
35
|
-
<td>
|
|
36
|
-
<td>
|
|
37
|
-
<td>
|
|
37
|
+
<td>Ter 1</td>
|
|
38
|
+
<td>First Name 1</td>
|
|
39
|
+
<td>Last Name 1</td>
|
|
40
|
+
<td>Age 1</td>
|
|
41
|
+
<td>Job 1</td>
|
|
38
42
|
</tr>
|
|
39
43
|
<tr>
|
|
40
|
-
<td>
|
|
41
|
-
<td>Name 2</td>
|
|
42
|
-
<td>
|
|
43
|
-
<td>
|
|
44
|
-
<td>
|
|
44
|
+
<td>Ter 2</td>
|
|
45
|
+
<td>First Name 2</td>
|
|
46
|
+
<td>Last Name 2</td>
|
|
47
|
+
<td>Age 2</td>
|
|
48
|
+
<td>Job 2</td>
|
|
45
49
|
</tr>
|
|
46
50
|
<tr>
|
|
47
|
-
<td>
|
|
48
|
-
<td>Name
|
|
49
|
-
<td>
|
|
50
|
-
<td>
|
|
51
|
-
<td>
|
|
51
|
+
<td>Ter 3</td>
|
|
52
|
+
<td>First Name 3</td>
|
|
53
|
+
<td>Last Name 3</td>
|
|
54
|
+
<td>Age 3</td>
|
|
55
|
+
<td>Job 3</td>
|
|
52
56
|
</tr>
|
|
53
57
|
</tbody>
|
|
54
58
|
<% end %>
|
|
@@ -1 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
The `table_header` subcomponent creates `<th>` elements and optionally accepts:
|
|
2
|
+
|
|
3
|
+
* `colspan` (number) for setting column span
|
|
4
|
+
* `sort_menu` accepts sort options as an array of `item` objects.
|
|
5
|
+
presence of `sort_menu` enables the sort link within the header
|
|
6
|
+
* `sort_dropdown` (boolean) optionally declares that (true) clicking a header's sort link opens a dropdown of sort options, or (false) each sort link click cycles through available sort_menu items in the order they are passed
|
|
7
|
+
* passing a valid `colspan` will render sort options within a dropdown by default, without requiring `sort_dropdown` explicitly. Alternatively, the default sort dropdown can be prevented on headers with `colspan` by setting `sort_dropdown: false`, which reverts the column to sorting to multi-click default (each click of the sort link cycles through the available sort_menu items in the order they are passed)
|
|
8
|
+
* `id` (string) is required for headers that have a dropdown (for popover reference); otherwise they are optional
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<% lorem = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, minus. Nisi beatae voluptatum labore sequi. Nemo accusantium corrupti, reiciendis magnam tenetur perferendis esse pariatur voluptas eaque hic vel rem nihil quidem dolorum ex dolor, libero ullam placeat, sapiente eos. Cumque obcaecati dignissimos molestiae, minima quibusdam sint maxime libero accusantium animi quis quia maiores enim ipsum, esse, modi laudantium illum error!" %>
|
|
2
|
+
|
|
3
|
+
<%= pb_rails("flex", props: { orientation: "column", max_width: "md" }) do %>
|
|
4
|
+
<%= pb_rails("caption", props: { text: "After first row" }) %>
|
|
5
|
+
<%= pb_rails("title", props: { text: lorem, truncate: "1", size: 4, margin_bottom: "md" }) %>
|
|
6
|
+
|
|
7
|
+
<%= pb_rails("caption", props: { text: "After second row" }) %>
|
|
8
|
+
<%= pb_rails("title", props: { text: lorem, truncate: "2", size: 4, margin_bottom: "md" }) %>
|
|
9
|
+
|
|
10
|
+
<%= pb_rails("caption", props: { text: "After third row" }) %>
|
|
11
|
+
<%= pb_rails("title", props: { text: lorem, truncate: "3", size: 4 }) %>
|
|
12
|
+
<% end %>
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
import Title from '../_title';
|
|
4
|
+
import Caption from '../../pb_caption/_caption'
|
|
5
|
+
import Flex from '../../pb_flex/_flex'
|
|
6
|
+
|
|
7
|
+
const TitleTruncate = (props) => {
|
|
8
|
+
const lorem = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, minus. Nisi beatae voluptatum labore sequi. Nemo accusantium corrupti, reiciendis magnam tenetur perferendis esse pariatur voluptas eaque hic vel rem nihil quidem dolorum ex dolor, libero ullam placeat, sapiente eos. Cumque obcaecati dignissimos molestiae, minima quibusdam sint maxime libero accusantium animi quis quia maiores enim ipsum, esse, modi laudantium illum error!"
|
|
9
|
+
|
|
10
|
+
return (
|
|
11
|
+
<Flex
|
|
12
|
+
maxWidth="md"
|
|
13
|
+
orientation="column"
|
|
14
|
+
>
|
|
15
|
+
<Caption
|
|
16
|
+
text="After first row"
|
|
17
|
+
{...props}
|
|
18
|
+
/>
|
|
19
|
+
<Title
|
|
20
|
+
marginBottom="md"
|
|
21
|
+
size={4}
|
|
22
|
+
text={lorem}
|
|
23
|
+
truncate="1"
|
|
24
|
+
{...props}
|
|
25
|
+
/>
|
|
26
|
+
|
|
27
|
+
<Caption
|
|
28
|
+
text="After second row"
|
|
29
|
+
{...props}
|
|
30
|
+
/>
|
|
31
|
+
<Title
|
|
32
|
+
marginBottom="md"
|
|
33
|
+
size={4}
|
|
34
|
+
text={lorem}
|
|
35
|
+
truncate="2"
|
|
36
|
+
{...props}
|
|
37
|
+
/>
|
|
38
|
+
|
|
39
|
+
<Caption
|
|
40
|
+
text="After third row"
|
|
41
|
+
{...props}
|
|
42
|
+
/>
|
|
43
|
+
<Title
|
|
44
|
+
size={4}
|
|
45
|
+
text={lorem}
|
|
46
|
+
truncate="3"
|
|
47
|
+
{...props}
|
|
48
|
+
/>
|
|
49
|
+
</Flex>
|
|
50
|
+
)
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
export default TitleTruncate
|
|
@@ -4,9 +4,11 @@ examples:
|
|
|
4
4
|
- title_light_weight: Light Weight UI
|
|
5
5
|
- title_colors: Colors
|
|
6
6
|
- title_responsive: Responsive
|
|
7
|
+
- title_truncate: Truncate
|
|
7
8
|
|
|
8
9
|
react:
|
|
9
10
|
- title_default: Default UI
|
|
10
11
|
- title_light_weight: Light Weight UI
|
|
11
12
|
- title_colors: Colors
|
|
12
13
|
- title_responsive: Responsive
|
|
14
|
+
- title_truncate: Truncate
|
|
@@ -2,3 +2,4 @@ export { default as TitleDefault } from './_title_default.jsx'
|
|
|
2
2
|
export { default as TitleLightWeight } from './_title_light_weight.jsx'
|
|
3
3
|
export { default as TitleColors } from './_title_colors.jsx'
|
|
4
4
|
export { default as TitleResponsive } from './_title_responsive.jsx'
|
|
5
|
+
export { default as TitleTruncate } from './_title_truncate.jsx'
|