playbook_ui 13.6.0 → 13.7.0.pre.alpha.play845allkitsbytypes1231

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 7172374694713ed870dd3d7801aba460bca488288c56a3d1894ae76455e22500
4
- data.tar.gz: f3fd4ed95bcd7742f66dfeb9831777e9fed9a82fe258001f8b2f5a7dab3da54d
3
+ metadata.gz: f0b8cac5dd42eb708babe77ff84918647d9567e47c925f0f7fe504005022b6b3
4
+ data.tar.gz: 148f59c50932c96be2daced7de11300638a93eec93bbb7dbfcddd4f35d82e8da
5
5
  SHA512:
6
- metadata.gz: 24f343c6fa7004493b0f18478b3f493f6f6167cfce5a98eacd413d74958dfb204e12e4e53ec809d9e7811d81a611de33fecf95d2c5ae527092e36660beca7178
7
- data.tar.gz: 958ecce577a1c495085bdea636e656d67a6e805b45b635070d8d7713b623c9ccc09854662b08c06d2c5c21c5631d2370efc59b6596869f038afa73db32c83fca
6
+ metadata.gz: 4bcd59ed4bf47015e6b62143b732712c5088819f072b3e8867254bd5485351151207b0dfcaac93533034be7547fd7f8e46594d04bd87c41dcc33bbd028e65755
7
+ data.tar.gz: 2ba8e6f75b4922efaf1c5cb4ba5a9bba51f75310c77dc0193f21fda489eee4ffac71b51a0c7f97393d9caf795b0429bd12cacfe80089f87649ec183a4457876e
@@ -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
@@ -0,0 +1,4 @@
1
+ ##### Prop
2
+ `truncate` | **Type**: String | **Values**: "1" | "2" | "3" | "4" | "5"
3
+
4
+ The `truncate` prop truncates overflowing text up to a maximum of five rows and adds an ellipsis at the end.
@@ -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: 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
- // Once the transition is complete, remove the inline max-height so the content can scale responsively
7
- window.setTimeout(() => {
8
- elem.style.height = '';
9
- }, 300);
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
- export const hideElement = (elem:any) => {
13
- elem.style.height = elem.scrollHeight + 'px';
14
+ export const hideElement = (elem:any) => {
15
+ elem.style.height = elem.scrollHeight + 'px';
14
16
 
15
- window.setTimeout(() => {
16
- elem.style.height = '0';
17
- elem.style.paddingTop = '0';
18
- elem.style.paddingBottom = '0';
19
- }, 1);
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
- // When the transition is complete, hide it
22
- window.setTimeout(() => {
23
- elem.classList.remove('is-visible');
24
- }, 300);
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
 
@@ -31,8 +31,10 @@ const EditorButton = ({
31
31
  >
32
32
  <button
33
33
  className={classname}
34
- onClick={onclick}
35
34
  disabled={disable}
35
+ onClick={onclick}
36
+ role="button"
37
+ type="button"
36
38
  >
37
39
  <Flex
38
40
  align="center"
@@ -22,6 +22,8 @@ const popoverReference = (
22
22
  <button
23
23
  className="toolbar_button"
24
24
  onClick={handleTogglePopover}
25
+ role="button"
26
+ type="button"
25
27
  >
26
28
  <Flex
27
29
  align="center"
@@ -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
- @each $title_size_value in [1, 2, 3, 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; }
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 | '1' | '2' | '3' | '4' | '5',
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 ? `truncate_${truncate}` : null
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
- truncate_1: 1,
22
- truncate_2: 2,
23
- truncate_3: 3,
24
- truncate_4: 4,
25
- truncate_5: 5
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
@@ -0,0 +1,4 @@
1
+ ##### Prop
2
+ `truncate` | **Type**: String | **Values**: "1" | "2" | "3" | "4" | "5"
3
+
4
+ The `truncate` prop truncates overflowing text up to a maximum of five rows and adds an ellipsis at the end.
@@ -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'
@@ -33,7 +33,7 @@ module Playbook
33
33
  end
34
34
 
35
35
  def is_truncated
36
- truncate ? "truncate_#{truncate}" : nil
36
+ truncate ? "truncate-#{truncate}" : nil
37
37
  end
38
38
 
39
39
  def is_size_responsive