playbook_ui 13.6.0 → 13.7.0.pre.alpha.play978makehighchartsadevdependencypoc1223
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_collapsible/_helper_functions.ts +26 -22
- data/app/pb_kits/playbook/pb_collapsible/index.js +4 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx +3 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx +2 -0
- data/app/pb_kits/playbook/pb_title/_title.scss +15 -14
- data/app/pb_kits/playbook/pb_title/_title.tsx +3 -3
- data/app/pb_kits/playbook/pb_title/_title_mixin.scss +6 -6
- 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/app/pb_kits/playbook/pb_title/title.rb +1 -1
- data/dist/playbook-rails.js +7 -7
- data/lib/playbook/version.rb +2 -2
- 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: 3af73a271b14120c123a4d4e31f6b89a82d00a40bdff0e18a614f98713f513da
|
|
4
|
+
data.tar.gz: 5ae66cfb76da4695f1c782453139f09730b2f5cfb8a8f8713fa0c3b81aa2ce8a
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ee3cbba5e1bd7ec6d247d90775f5c231f2523e6ad7b685be4fcca0413b802df399e1dacabf4953cc4b5e505e3a82e7bdf98ce8a0f3e4f23a4d6c8c1e222f2c70
|
|
7
|
+
data.tar.gz: 22cd11e1fc810be00b8bce763c90fa22502475b9ed0ed120b53e0b15c6862ce71cc77b79042490950a87c567d95864d559cc16be5995adf89dca617206e66555
|
|
@@ -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'
|
|
@@ -1,25 +1,29 @@
|
|
|
1
|
-
export const showElement = (elem:
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
export const showElement = (elem:any) => {
|
|
2
|
+
elem.style.display = 'block';
|
|
3
|
+
const height = elem.scrollHeight + 'px'; // Get its height
|
|
4
|
+
elem.style.height = height; // Update the max-height
|
|
5
|
+
elem.classList.add('is-visible');
|
|
6
|
+
elem.style.overflow = "hidden"
|
|
7
|
+
// Once the transition is complete, remove the inline max-height so the content can scale responsively
|
|
8
|
+
window.setTimeout(() => {
|
|
9
|
+
elem.style.height = '';
|
|
10
|
+
elem.style.overflow = "visible"
|
|
11
|
+
}, 300);
|
|
12
|
+
};
|
|
11
13
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
+
export const hideElement = (elem:any) => {
|
|
15
|
+
elem.style.height = elem.scrollHeight + 'px';
|
|
14
16
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
17
|
+
window.setTimeout(() => {
|
|
18
|
+
elem.style.height = '0';
|
|
19
|
+
elem.style.paddingTop = '0';
|
|
20
|
+
elem.style.paddingBottom = '0';
|
|
21
|
+
elem.style.overflow = "hidden"
|
|
22
|
+
}, 1);
|
|
20
23
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
};
|
|
24
|
+
// When the transition is complete, hide it
|
|
25
|
+
window.setTimeout(() => {
|
|
26
|
+
elem.classList.remove('is-visible');
|
|
27
|
+
elem.style.overflow = ""
|
|
28
|
+
}, 300);
|
|
29
|
+
};
|
|
@@ -33,10 +33,12 @@ export default class PbCollapsible extends PbEnhancedElement {
|
|
|
33
33
|
const height = getHeight()
|
|
34
34
|
elem.classList.add('is-visible')
|
|
35
35
|
elem.style.height = height // Update the max-height
|
|
36
|
+
elem.style.overflow = "hidden"
|
|
36
37
|
|
|
37
38
|
// Once the transition is complete, remove the inline max-height so the content can scale responsively
|
|
38
39
|
window.setTimeout(() => {
|
|
39
40
|
elem.style.height = ''
|
|
41
|
+
elem.style.overflow = "visible"
|
|
40
42
|
}, 300)
|
|
41
43
|
}
|
|
42
44
|
|
|
@@ -48,11 +50,13 @@ export default class PbCollapsible extends PbEnhancedElement {
|
|
|
48
50
|
elem.style.height = '0'
|
|
49
51
|
elem.style.paddingTop = '0'
|
|
50
52
|
elem.style.paddingBottom = '0'
|
|
53
|
+
elem.style.overflow = "hidden"
|
|
51
54
|
}, 1)
|
|
52
55
|
|
|
53
56
|
// When the transition is complete, hide it
|
|
54
57
|
window.setTimeout(() => {
|
|
55
58
|
elem.classList.remove('is-visible')
|
|
59
|
+
elem.style.overflow = ""
|
|
56
60
|
}, 300)
|
|
57
61
|
}
|
|
58
62
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
@import "../tokens/screen_sizes";
|
|
4
4
|
@import './title_mixin';
|
|
5
5
|
|
|
6
|
-
[class^=pb_title_kit]{
|
|
6
|
+
[class^=pb_title_kit] {
|
|
7
7
|
&[class*=_1] {
|
|
8
8
|
@include pb_title_1;
|
|
9
9
|
@include title_colors;
|
|
@@ -36,22 +36,23 @@
|
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
@each $size, $size_value in $breakpoints_grid {
|
|
39
|
-
@
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
39
|
+
@for $title_size_value from 1 through 4 {
|
|
40
|
+
$min_size: map-get($size_value, "min");
|
|
41
|
+
$max_size: map-get($size_value, "max");
|
|
42
|
+
&[class*=_#{$size}_#{$title_size_value}] {
|
|
43
|
+
@include break_on($min_size, $max_size) {
|
|
44
|
+
@if $title_size_value == 1 { @include pb_title_1; }
|
|
45
|
+
@else if $title_size_value == 2 { @include pb_title_2; }
|
|
46
|
+
@else if $title_size_value == 3 { @include pb_title_3; }
|
|
47
|
+
@else if $title_size_value == 4 { @include pb_title_4; }
|
|
48
|
+
@include title_colors;
|
|
49
|
+
@include title_truncate;
|
|
50
|
+
@if $title_size_value != 4 { @include pb_title_bold; }
|
|
52
51
|
}
|
|
52
|
+
}
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
|
+
|
|
55
56
|
&.dark {
|
|
56
57
|
@include pb_title_dark;
|
|
57
58
|
}
|
|
@@ -17,7 +17,7 @@ type TitleProps = {
|
|
|
17
17
|
size?: SizeType | SizeResponsiveType,
|
|
18
18
|
tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
|
|
19
19
|
text?: string,
|
|
20
|
-
truncate?: null |
|
|
20
|
+
truncate?: null | "1" | "2" | "3" | "4" | "5",
|
|
21
21
|
variant?: null | "link",
|
|
22
22
|
} & GlobalProps
|
|
23
23
|
|
|
@@ -41,12 +41,12 @@ const Title = (props: TitleProps): React.ReactElement => {
|
|
|
41
41
|
const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
|
|
42
42
|
const dataProps: {[key: string]: string | number} = buildDataProps(data)
|
|
43
43
|
const getBold = bold ? '' : 'thin'
|
|
44
|
-
const isTruncated = truncate ? `
|
|
44
|
+
const isTruncated = truncate ? `truncate-${truncate}` : null
|
|
45
45
|
const isSizeNumberOrString = typeof size === "number" || typeof size === "string"
|
|
46
46
|
|
|
47
47
|
const buildResponsiveSizeCss = () => {
|
|
48
48
|
let css = ''
|
|
49
|
-
|
|
49
|
+
|
|
50
50
|
if (!isSizeNumberOrString) {
|
|
51
51
|
Object.entries(size).forEach((sizeObj) => {
|
|
52
52
|
css += `pb_title_kit_${sizeObj[0]}_${sizeObj[1]} `
|
|
@@ -18,11 +18,11 @@ $pb_title_colors: (
|
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
$pb_title_truncate: (
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
21
|
+
truncate-1: 1,
|
|
22
|
+
truncate-2: 2,
|
|
23
|
+
truncate-3: 3,
|
|
24
|
+
truncate-4: 4,
|
|
25
|
+
truncate-5: 5
|
|
26
26
|
);
|
|
27
27
|
|
|
28
28
|
@mixin title_truncate {
|
|
@@ -31,7 +31,7 @@ $pb_title_truncate: (
|
|
|
31
31
|
overflow: hidden;
|
|
32
32
|
display: -webkit-box;
|
|
33
33
|
-webkit-line-clamp: $number;
|
|
34
|
-
-webkit-box-orient: vertical;
|
|
34
|
+
-webkit-box-orient: vertical;
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
}
|
|
@@ -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'
|