playbook_ui 12.24.0 → 12.25.0.pre.alpha.PLAY818multilevelrebuild770

Sign up to get free protection for your applications and to get access to all the features.
Files changed (41) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_swift.md +82 -1
  3. data/app/pb_kits/playbook/pb_date/_date.tsx +96 -42
  4. data/app/pb_kits/playbook/pb_date/date.html.erb +22 -2
  5. data/app/pb_kits/playbook/pb_date/date.rb +2 -0
  6. data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.html.erb +30 -0
  7. data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx +47 -0
  8. data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.md +1 -0
  9. data/app/pb_kits/playbook/pb_date/docs/example.yml +4 -4
  10. data/app/pb_kits/playbook/pb_date/docs/index.js +1 -0
  11. data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +14 -13
  12. data/app/pb_kits/playbook/pb_docs/kit_example.rb +0 -2
  13. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +3 -2
  14. data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx +212 -0
  15. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss +53 -98
  16. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +340 -86
  17. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md +1 -1
  18. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb +1 -0
  19. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx +1 -1
  20. data/app/pb_kits/playbook/pb_time/_time.tsx +71 -35
  21. data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.html.erb +37 -0
  22. data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.jsx +58 -0
  23. data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.md +1 -0
  24. data/app/pb_kits/playbook/pb_time/docs/example.yml +2 -0
  25. data/app/pb_kits/playbook/pb_time/docs/index.js +1 -0
  26. data/app/pb_kits/playbook/pb_time/time.html.erb +26 -7
  27. data/app/pb_kits/playbook/pb_time/time.rb +2 -0
  28. data/app/pb_kits/playbook/pb_title/_title.scss +2 -1
  29. data/app/pb_kits/playbook/pb_title/_title.tsx +3 -2
  30. data/app/pb_kits/playbook/pb_title/title.rb +10 -3
  31. data/app/pb_kits/playbook/pb_title/title.test.js +3 -3
  32. data/dist/playbook-rails.js +51 -0
  33. data/lib/playbook/version.rb +2 -2
  34. data/lib/playbook.rb +1 -2
  35. metadata +19 -43
  36. data/app/pb_kits/playbook/pb_docs/kit_api.html.erb +0 -311
  37. data/app/pb_kits/playbook/pb_docs/kit_api.rb +0 -149
  38. data/app/pb_kits/playbook/pb_multi_level_select/_multi_select_helper.tsx +0 -31
  39. data/app/pb_kits/playbook/pb_multi_level_select/helper_functions.ts +0 -87
  40. data/lib/playbook/markdown/helper.rb +0 -132
  41. data/lib/playbook/markdown.rb +0 -3
@@ -0,0 +1,58 @@
1
+ import React from 'react'
2
+ import Time from '../_time'
3
+ import Caption from '../../pb_caption/_caption'
4
+ import Title from '../../pb_title/_title'
5
+
6
+ const TimeUnstyled = (props) => {
7
+ return (
8
+ <>
9
+ <Caption size="xs"
10
+ text="Basic unstyled example"
11
+ />
12
+ <Time
13
+ date={new Date()}
14
+ showIcon
15
+ showTimezone
16
+ timeZone="America/New_York"
17
+ unstyled
18
+ {...props}
19
+ />
20
+
21
+ <br />
22
+
23
+ <Caption size="xs"
24
+ text="Example with wrapping typography kit"
25
+ />
26
+ <Title size={1}>
27
+ <Time
28
+ date={new Date()}
29
+ showIcon
30
+ showTimezone
31
+ timeZone="America/New_York"
32
+ unstyled
33
+ {...props}
34
+ />
35
+ </Title>
36
+
37
+ <br />
38
+
39
+ <Caption size="xs"
40
+ text="Example with icon + subcaption"
41
+ />
42
+ <Caption size="xs">
43
+ <Time
44
+ date={new Date()}
45
+ showIcon
46
+ showTimezone
47
+ timeZone="America/New_York"
48
+ unstyled
49
+ {...props}
50
+ />
51
+ </Caption>
52
+
53
+ <br />
54
+ </>
55
+ )
56
+ }
57
+
58
+ export default TimeUnstyled
@@ -0,0 +1 @@
1
+ For alternative typography styles, you can pass a boolean prop called `unstyled` to the `Time` kit and wrap it in any of our typography kits (`Title`, `Body`, `Caption`, etc.). This will allow the `Time` kit to inherit any of our typography styles.
@@ -6,6 +6,7 @@ examples:
6
6
  - time_timestamp: Timestamp Values
7
7
  - time_timezone: Handling Timezones
8
8
  - time_align: Alignment
9
+ - time_unstyled: Unstyled
9
10
 
10
11
  react:
11
12
  - time_default: Default
@@ -13,3 +14,4 @@ examples:
13
14
  - time_timestamp: Timestamp Values
14
15
  - time_timezone: Handling Timezones
15
16
  - time_align: Alignment
17
+ - time_unstyled: Unstyled
@@ -3,3 +3,4 @@ export { default as TimeSizes } from './_time_sizes.jsx'
3
3
  export { default as TimeTimestamp } from './_time_timestamp.jsx'
4
4
  export { default as TimeAlign } from './_time_align.jsx'
5
5
  export { default as TimeTimezone } from './_time_timezone.jsx'
6
+ export { default as TimeUnstyled } from './_time_unstyled.jsx'
@@ -8,25 +8,44 @@
8
8
  size = "sm" if object.size == "xs"
9
9
  size = "md" if object.size == "lg"
10
10
  %>
11
- <% if size == "md" %>
11
+
12
+ <% if object.unstyled %>
13
+ <% if object.show_icon %>
14
+ <span>
15
+ <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
16
+ </span>
17
+ <% end %>
18
+
19
+ <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
20
+ <span><%= object.format_time_string %></span>
21
+ <% if object.show_timezone %>
22
+ <span><%= object.pb_date_time.to_timezone.upcase %></span>
23
+ <% end %>
24
+ <% end %>
25
+
26
+ <% elsif size == "md" %>
12
27
  <% if object.show_icon %>
13
28
  <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
14
29
  <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
15
30
  <% end %>
16
31
  <% end %>
17
- <%= pb_rails("body", props: { tag: "span", text: object.format_time_string, classname: "pb_time" }) %>
18
- <% if object.show_timezone %>
19
- <%= pb_rails("body", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase }) %>
32
+
33
+ <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
34
+ <%= pb_rails("body", props: { tag: "span", text: object.format_time_string, classname: "pb_time" }) %>
35
+ <% if object.show_timezone %>
36
+ <%= pb_rails("body", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase }) %>
37
+ <% end %>
20
38
  <% end %>
39
+
21
40
  <% else %>
22
41
  <% if object.show_icon %>
23
42
  <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
24
43
  <%= pb_rails("icon", props: { icon: "clock", fixed_width: true, size: "sm" }) %>
25
44
  <% end %>
26
45
  <% end %>
27
-
28
- <%= pb_rails("caption", props: { color: "light", tag: "span", text: object.format_time_string }) do %>
29
- <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
46
+
47
+ <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
48
+ <%= pb_rails("caption", props: { color: "light", tag: "span", text: object.format_time_string }) do %>
30
49
  <%= object.format_time_string %>
31
50
  <% if object.show_timezone %>
32
51
  <span class="pb_time_timezone">
@@ -15,6 +15,8 @@ module Playbook
15
15
  default: false
16
16
  prop :show_timezone, type: Playbook::Props::Boolean,
17
17
  default: true
18
+ prop :unstyled, type: Playbook::Props::Boolean,
19
+ default: false
18
20
 
19
21
  def classname
20
22
  # convert deprecated prop values
@@ -18,6 +18,7 @@
18
18
  &[class*=_3] {
19
19
  @include pb_title_3;
20
20
  @include title_colors;
21
+ @include pb_title_bold;
21
22
  }
22
23
 
23
24
  &[class*=_4] {
@@ -29,7 +30,7 @@
29
30
  @include pb_title_dark;
30
31
  }
31
32
 
32
- &[class*=_thin] {
33
+ &[class*=thin] {
33
34
  @include pb_title_thin;
34
35
  }
35
36
  }
@@ -21,13 +21,13 @@ const Title = (props: TitleProps): React.ReactElement => {
21
21
  if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
22
22
  const {
23
23
  aria = {},
24
- bold = true,
25
24
  children,
26
25
  className,
27
26
  color,
28
27
  data = {},
29
28
  id,
30
29
  size = 3,
30
+ bold = size === 3 ? false : true,
31
31
  tag = 'h3',
32
32
  text,
33
33
  variant = null,
@@ -35,9 +35,10 @@ const Title = (props: TitleProps): React.ReactElement => {
35
35
 
36
36
  const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
37
37
  const dataProps: {[key: string]: string | number} = buildDataProps(data)
38
+
38
39
  const getBold = bold ? '' : 'thin'
39
40
  const classes = classnames(
40
- buildCss('pb_title_kit', `size_${size}`, variant, color, getBold),
41
+ buildCss("pb_title_kit", `size_${size}`, variant, color) + ` ${getBold}`,
41
42
  globalProps(props),
42
43
  className
43
44
  )
@@ -17,14 +17,21 @@ module Playbook
17
17
  values: [nil, "link"],
18
18
  default: nil,
19
19
  deprecated: true
20
- prop :bold, type: Playbook::Props::Boolean, default: true
20
+
21
+ def initialize(props)
22
+ props[:bold] = [1, 2, 4].include?(props[:size]) unless props.key?(:bold)
23
+ props[:bold] = false if props[:size].nil? && !props.key?(:bold)
24
+ super(props)
25
+ end
26
+
27
+ prop :bold, type: Playbook::Props::Boolean
21
28
 
22
29
  def classname
23
- generate_classname("pb_title_kit", size, variant, color, is_bold)
30
+ generate_classname("pb_title_kit", size, variant, color) + is_bold
24
31
  end
25
32
 
26
33
  def is_bold
27
- bold ? nil : "thin"
34
+ bold ? "" : " thin"
28
35
  end
29
36
  end
30
37
  end
@@ -12,7 +12,7 @@ test('returns namespaced class name', () => {
12
12
  )
13
13
 
14
14
  const kit = screen.getByTestId('primary-test')
15
- expect(kit).toHaveClass('pb_title_kit_size_3')
15
+ expect(kit).toHaveClass('pb_title_kit_size_3 thin')
16
16
  })
17
17
 
18
18
  test('with thin font weight', () => {
@@ -25,7 +25,7 @@ test('with thin font weight', () => {
25
25
  )
26
26
 
27
27
  const kit = screen.getByTestId('primary-test')
28
- expect(kit).toHaveClass('pb_title_kit_size_3_thin')
28
+ expect(kit).toHaveClass('pb_title_kit_size_3 thin')
29
29
  })
30
30
 
31
31
  test('with colors', () => {
@@ -38,5 +38,5 @@ test('with colors', () => {
38
38
  )
39
39
 
40
40
  const kit = screen.getByTestId('primary-test')
41
- expect(kit).toHaveClass('pb_title_kit_size_3_success')
41
+ expect(kit).toHaveClass('pb_title_kit_size_3_success thin')
42
42
  })