playbook_ui_docs 13.6.0.pre.alpha.tiptapreacthookformbug1210 → 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_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 +13 -7
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'
|
|
@@ -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'
|