playbook_ui 7.15.1 → 7.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +2 -2
  3. data/app/pb_kits/playbook/pb_avatar/_avatar.html.erb +4 -6
  4. data/app/pb_kits/playbook/pb_avatar/_avatar.jsx +6 -2
  5. data/app/pb_kits/playbook/pb_avatar/avatar.rb +4 -0
  6. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.html.erb +5 -0
  7. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.jsx +41 -0
  8. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.md +2 -0
  9. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -0
  10. data/app/pb_kits/playbook/pb_avatar/docs/index.js +1 -0
  11. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx +1 -0
  12. data/app/pb_kits/playbook/pb_date_time/_date_time.jsx +2 -2
  13. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx +2 -2
  14. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx +5 -1
  15. data/app/pb_kits/playbook/pb_flex/_flex_item.jsx +4 -2
  16. data/app/pb_kits/playbook/pb_flex/_flex_item.scss +9 -0
  17. data/app/pb_kits/playbook/pb_flex/flex_item.rb +8 -1
  18. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.html.erb +4 -4
  19. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx +12 -1
  20. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.md +2 -1
  21. data/app/pb_kits/playbook/pb_gauge/docs/example.yml +4 -5
  22. data/app/pb_kits/playbook/pb_image/_image.html.erb +3 -1
  23. data/app/pb_kits/playbook/pb_image/_image.jsx +4 -1
  24. data/app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb +75 -0
  25. data/app/pb_kits/playbook/pb_image/docs/_custom_error_image.jsx +55 -0
  26. data/app/pb_kits/playbook/pb_image/docs/example.yml +2 -0
  27. data/app/pb_kits/playbook/pb_image/docs/index.js +1 -0
  28. data/app/pb_kits/playbook/pb_image/image.rb +2 -0
  29. data/app/pb_kits/playbook/pb_layout/_item.html.erb +6 -0
  30. data/app/pb_kits/playbook/pb_layout/_layout.jsx +19 -1
  31. data/app/pb_kits/playbook/pb_layout/_layout.scss +33 -1
  32. data/app/pb_kits/playbook/pb_layout/docs/_layout_collection_detail.jsx +1 -1
  33. data/app/pb_kits/playbook/pb_layout/docs/_layout_masonry.html.erb +48 -0
  34. data/app/pb_kits/playbook/pb_layout/docs/_layout_masonry.jsx +61 -0
  35. data/app/pb_kits/playbook/pb_layout/docs/example.yml +3 -0
  36. data/app/pb_kits/playbook/pb_layout/docs/index.js +1 -0
  37. data/app/pb_kits/playbook/pb_layout/item.rb +25 -0
  38. data/app/pb_kits/playbook/pb_layout/layout.rb +15 -15
  39. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.html.erb +1 -1
  40. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx +9 -2
  41. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +20 -1
  42. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_error.html.erb +36 -0
  43. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_error.jsx +58 -0
  44. data/app/pb_kits/playbook/pb_selectable_card/docs/example.yml +2 -0
  45. data/app/pb_kits/playbook/pb_selectable_card/docs/index.js +1 -0
  46. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb +11 -0
  47. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx +0 -1
  48. data/lib/playbook/version.rb +1 -1
  49. metadata +18 -6
data/app/pb_kits/playbook/pb_image/docs/_custom_error_image.jsx ADDED
@@ -0,0 +1,55 @@
1
+ import React from 'react'
2
+ import { Body, Image } from '../../'
3
+
4
+ const CustomErrorImage = (props) => {
5
+ return (
6
+ <>
7
+ <Body text="Handle when an image fails to load or a broken link is passed. This is not neccessary most of the time." />
8
+ <br />
9
+ <Body text="Alter the display when the image fails to load:" />
10
+ <Image
11
+ alt="This is the alt text!"
12
+ onError={(e) => e.target.style.color = 'red'}
13
+ rounded
14
+ size="xs"
15
+ url="not_a_valid_url"
16
+ {...props}
17
+ />
18
+ <br />
19
+ <br />
20
+ <Body text="Give it an error class:" />
21
+ <Image
22
+ alt="This is the alt text!"
23
+ onError={(e) => e.target.classList.add('image-error')}
24
+ rounded
25
+ size="sm"
26
+ url="not_a_valid_url"
27
+ {...props}
28
+ />
29
+ <br />
30
+ <br />
31
+ <Body text="Set an inline style" />
32
+ <Image
33
+ alt="This is the alt text!"
34
+ onError={(e) => e.target.style.outline = '1px solid red'}
35
+ rounded
36
+ size="md"
37
+ url="not_a_valid_url"
38
+ {...props}
39
+ />
40
+ <br />
41
+ <br />
42
+ <Body text="Hide it completely!" />
43
+ <Image
44
+ alt="This is the alt text!"
45
+ onError={(e) => e.target.style.display = 'none'}
46
+ rounded
47
+ size="md"
48
+ url="not_a_valid_url"
49
+ {...props}
50
+ />
51
+ </>
52
+ )
53
+ }
54
+
55
+ export default CustomErrorImage
data/app/pb_kits/playbook/pb_image/docs/example.yml CHANGED
@@ -2,6 +2,8 @@ examples:
2
2
  rails:
3
3
  - default_image: Default
4
4
  - rounded_image: Rounded
5
+ - custom_error_image: Error Handling
5
6
  react:
6
7
  - default_image: Default
7
8
  - rounded_image: Rounded
9
+ - custom_error_image: Error Handling
data/app/pb_kits/playbook/pb_image/docs/index.js CHANGED
@@ -1,2 +1,3 @@
1
1
  export { default as DefaultImage } from './_default_image.jsx'
2
2
  export { default as RoundedImage } from './_rounded_image.jsx'
3
+ export { default as CustomErrorImage } from './_custom_error_image.jsx'
data/app/pb_kits/playbook/pb_image/image.rb CHANGED
@@ -8,6 +8,8 @@ module Playbook
8
8
  partial "pb_image/image"
9
9
 
10
10
  prop :alt
11
+ prop :on_error, type: Playbook::Props::String,
12
+ default: nil
11
13
  prop :rounded, type: Playbook::Props::Boolean,
12
14
  default: false
13
15
  prop :size, type: Playbook::Props::Enum,
data/app/pb_kits/playbook/pb_layout/_item.html.erb ADDED
@@ -0,0 +1,6 @@
1
+ <%= content_tag(:div,
2
+ id: object.id,
3
+ data: object.data,
4
+ class: object.classname) do %>
5
+ <%= capture(&object.children) %>
6
+ <% end %>
data/app/pb_kits/playbook/pb_layout/_layout.jsx CHANGED
@@ -19,7 +19,7 @@ type LayoutPropTypes = {
19
19
  size?: "xs" | "sm" | "md" | "base" | "lg" | "xl",
20
20
  variant?: "light" | "dark" | "gradient",
21
21
  transparent?: boolean,
22
- layout?: "sidebar" | "collection" | "kanban" | "content",
22
+ layout?: "sidebar" | "collection" | "kanban" | "content" | "masonry",
23
23
  }
24
24
 
25
25
  type LayoutSideProps = {
@@ -32,6 +32,12 @@ type LayoutBodyProps = {
32
32
  className?: string,
33
33
  }
34
34
 
35
+ type LayoutItemProps = {
36
+ children: array<React.ReactNode> | React.ReactNode,
37
+ className?: string,
38
+ size?: "sm" | "md" | "lg"
39
+ }
40
+
35
41
  type LayoutHeaderProps = {
36
42
  children: array<React.ReactNode> | React.ReactNode,
37
43
  className?: string,
@@ -62,6 +68,17 @@ const Body = (props: LayoutBodyProps) => {
62
68
  )
63
69
  }
64
70
 
71
+ // Item component
72
+ const Item = (props: LayoutItemProps) => {
73
+ const { children, className, size = 'sm' } = props
74
+ const sizeClass = `size_${size}`
75
+ return (
76
+ <div className={classnames('layout_item', sizeClass, globalProps(props), className)}>
77
+ {children}
78
+ </div>
79
+ )
80
+ }
81
+
65
82
  // Header component
66
83
  const Header = (props: LayoutHeaderProps) => {
67
84
  const { children, className } = props
@@ -159,6 +176,7 @@ const Layout = (props: LayoutPropTypes) => {
159
176
 
160
177
  Layout.Side = Side
161
178
  Layout.Body = Body
179
+ Layout.Item = Item
162
180
  Layout.Header = Header
163
181
  Layout.Footer = Footer
164
182
 
data/app/pb_kits/playbook/pb_layout/_layout.scss CHANGED
@@ -25,12 +25,44 @@ $card-border-radius: $border_rad_lightest;
25
25
  @media screen and (max-width: $screen-md-min) {
26
26
  grid-template-columns: repeat(2, 1fr);
27
27
  }
28
- @media screen and (max-width: $screen-xs-min) {
28
+ @media screen and (max-width: $screen-xs-min) {
29
29
  grid-template-columns: repeat(1, 1fr);
30
30
  }
31
31
  }
32
32
  }
33
33
 
34
+ &[class*=_masonry] {
35
+ div.layout_body {
36
+ display: grid;
37
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
38
+ grid-gap: 10px;
39
+ grid-auto-rows: minmax(180px, auto);
40
+ grid-auto-flow: dense;
41
+ padding: 10px;
42
+
43
+ .size_md {
44
+ grid-column-end: span 2;
45
+ grid-row-end: span 2;
46
+ }
47
+
48
+ .size_lg {
49
+ grid-column-end: span 3;
50
+ grid-row-end: span 4;
51
+ }
52
+
53
+ @media screen and (max-width: $screen-lg-min) {
54
+ grid-template-columns: repeat(3, 1fr);
55
+ }
56
+
57
+ div.layout_item, * {
58
+ display: flex;
59
+ img {
60
+ max-width: 100%;
61
+ }
62
+ }
63
+ }
64
+ }
65
+
34
66
  &[class*=_collection_detail]{
35
67
  display: grid;
36
68
  width: 100%;
data/app/pb_kits/playbook/pb_layout/docs/_layout_collection_detail.jsx CHANGED
@@ -3,7 +3,7 @@ import { Card, Layout, Nav, NavItem } from '../../'
3
3
  const Cards = ({ n }) => {
4
4
  const cards = []
5
5
  for (let i = 0; i < n; ++i) {
6
- cards.push(<Card>{'Card content'}</Card>)
6
+ cards.push(<Card key={i}>{'Card content'}</Card>)
7
7
  }
8
8
  return (cards)
9
9
  }
data/app/pb_kits/playbook/pb_layout/docs/_layout_masonry.html.erb ADDED
@@ -0,0 +1,48 @@
1
+ <%= pb_rails("layout", props: {layout: "masonry"}) do %>
2
+ <%= pb_rails("layout/body") do %>
3
+
4
+ <%= pb_rails("layout/item") do %>
5
+ <%= pb_rails("image", props: { url: "https://unsplash.it/500/400/?image=634" }) %>
6
+ <% end %>
7
+ <%= pb_rails("layout/item") do %>
8
+ <%= pb_rails("image", props: { url: "https://images.unsplash.com/photo-1611932084285-4fc50bfb7102?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMnx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" }) %>
9
+ <% end %>
10
+ <%= pb_rails("layout/item", props: { size: "md" }) do %>
11
+ <%= pb_rails("image", props: { url: "https://images.unsplash.com/photo-1611934529218-748707e1d066?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2307&q=80" }) %>
12
+ <% end %>
13
+ <%= pb_rails("layout/item", props: { size: "md" }) do %>
14
+ <%= pb_rails("image", props: { url: "https://images.unsplash.com/photo-1611927263897-c2f1156bc760?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyMHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" }) %>
15
+ <% end %>
16
+ <%= pb_rails("layout/item", props: { size: "lg"}) do %>
17
+ <%= pb_rails("image", props: { url: "https://images.unsplash.com/photo-1606851685679-2a35cfdd62d6?ixid=MXwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" }) %>
18
+ <% end %>
19
+ <%= pb_rails("layout/item", props: { size: "md" }) do %>
20
+ <%= pb_rails("image", props: { url: "https://images.unsplash.com/photo-1612144349227-1555ef8f2467?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzM3x8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" }) %>
21
+ <% end %>
22
+ <%= pb_rails("layout/item") do %>
23
+ <%= pb_rails("image", props: { url: "https://unsplash.it/500/400/?image=634" }) %>
24
+ <% end %>
25
+ <%= pb_rails("layout/item") do %>
26
+ <%= pb_rails("image", props: { url: "https://images.unsplash.com/photo-1611932084285-4fc50bfb7102?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMnx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" }) %>
27
+ <% end %>
28
+ <%= pb_rails("layout/item", props: { size: "md" }) do %>
29
+ <%= pb_rails("image", props: { url: "https://images.unsplash.com/photo-1611934529218-748707e1d066?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2307&q=80" }) %>
30
+ <% end %>
31
+ <%= pb_rails("layout/item") do %>
32
+ <%= pb_rails("image", props: { url: "https://unsplash.it/500/400/?image=634" }) %>
33
+ <% end %>
34
+ <%= pb_rails("layout/item", props: { size: "md" }) do %>
35
+ <%= pb_rails("image", props: { url: "https://images.unsplash.com/photo-1606851685679-2a35cfdd62d6?ixid=MXwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" }) %>
36
+ <% end %>
37
+ <%= pb_rails("layout/item") do %>
38
+ <%= pb_rails("image", props: { url: "https://images.unsplash.com/photo-1612123912968-5f6e964e8ea5?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0N3x8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" }) %>
39
+ <% end %>
40
+ <%= pb_rails("layout/item") do %>
41
+ <%= pb_rails("image", props: { url: "https://images.unsplash.com/photo-1612092172331-d788286028d5?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3Mnx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" }) %>
42
+ <% end %>
43
+ <%= pb_rails("layout/item") do %>
44
+ <%= pb_rails("image", props: { url: "https://unsplash.it/500/400/?image=634" }) %>
45
+ <% end %>
46
+
47
+ <% end %>
48
+ <% end %>
data/app/pb_kits/playbook/pb_layout/docs/_layout_masonry.jsx ADDED
@@ -0,0 +1,61 @@
1
+ import React from 'react'
2
+ import { Image, Layout } from '../../'
3
+
4
+ const LayoutMasonry = (props) => {
5
+ return (
6
+ <Layout
7
+ layout="masonry"
8
+ {...props}
9
+ >
10
+ <Layout.Body>
11
+ <Layout.Item>
12
+ <Image
13
+ url="https://images.unsplash.com/photo-1611932084285-4fc50bfb7102?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMnx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
14
+ />
15
+ </Layout.Item>
16
+ <Layout.Item size="md">
17
+ <Image
18
+ url="https://images.unsplash.com/photo-1611934529218-748707e1d066?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2307&q=80"
19
+ />
20
+ </Layout.Item>
21
+ <Layout.Item>
22
+ <Image
23
+ url="https://images.unsplash.com/photo-1611927263897-c2f1156bc760?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyMHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
24
+ />
25
+ </Layout.Item>
26
+ <Layout.Item size="lg">
27
+ <Image
28
+ url="https://images.unsplash.com/photo-1611927263897-c2f1156bc760?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyMHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
29
+ />
30
+ </Layout.Item>
31
+ <Layout.Item>
32
+ <Image
33
+ url="https://images.unsplash.com/photo-1606851685679-2a35cfdd62d6?ixid=MXwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
34
+ />
35
+ </Layout.Item>
36
+ <Layout.Item size="md">
37
+ <Image
38
+ url="https://images.unsplash.com/photo-1612092172331-d788286028d5?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3Mnx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
39
+ />
40
+ </Layout.Item>
41
+ <Layout.Item>
42
+ <Image
43
+ url="https://images.unsplash.com/photo-1612123912968-5f6e964e8ea5?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0N3x8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
44
+ />
45
+ </Layout.Item>
46
+ <Layout.Item size="md">
47
+ <Image
48
+ url="https://images.unsplash.com/photo-1606851685679-2a35cfdd62d6?ixid=MXwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
49
+ />
50
+ </Layout.Item>
51
+ <Layout.Item>
52
+ <Image
53
+ url="https://unsplash.it/500/400/?image=634"
54
+ />
55
+ </Layout.Item>
56
+ </Layout.Body>
57
+ </Layout>
58
+ )
59
+ }
60
+
61
+ export default LayoutMasonry
data/app/pb_kits/playbook/pb_layout/docs/example.yml CHANGED
@@ -7,6 +7,7 @@ examples:
7
7
  - layout_collection_detail: Collection Detail Layout
8
8
  - layout_kanban: Kanban Layout
9
9
  - layout_content: Content Layout
10
+ - layout_masonry: Masonry Layout
10
11
 
11
12
  react:
12
13
  - layout_colors: Colors
@@ -16,3 +17,5 @@ examples:
16
17
  - layout_collection_detail: Collection Detail Layout
17
18
  - layout_kanban: Kanban Layout
18
19
  - layout_content: Content Layout
20
+ - layout_masonry: Masonry Layout
21
+
data/app/pb_kits/playbook/pb_layout/docs/index.js CHANGED
@@ -6,4 +6,5 @@ export { default as LayoutKanban } from './_layout_kanban.jsx'
6
6
  export { default as LayoutKanbanResponsive } from './_layout_kanban_responsive.jsx'
7
7
  export { default as LayoutCollectionDetail } from './_layout_collection_detail.jsx'
8
8
  export { default as LayoutContent } from './_layout_content.jsx'
9
+ export { default as LayoutMasonry } from './_layout_masonry.jsx'
9
10
 
data/app/pb_kits/playbook/pb_layout/item.rb ADDED
@@ -0,0 +1,25 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module PbLayout
5
+ class Item
6
+ include Playbook::Props
7
+
8
+ partial "pb_layout/item"
9
+
10
+ prop :size, type: Playbook::Props::Enum,
11
+ values: %w[sm md lg],
12
+ default: "sm"
13
+
14
+ def classname
15
+ generate_classname("layout_item") + size_class
16
+ end
17
+
18
+ private
19
+
20
+ def size_class
21
+ " size_#{size}"
22
+ end
23
+ end
24
+ end
25
+ end
data/app/pb_kits/playbook/pb_layout/layout.rb CHANGED
@@ -22,25 +22,25 @@ module Playbook
22
22
  values: %w[light dark gradient],
23
23
  default: "light"
24
24
  prop :layout, type: Playbook::Props::Enum,
25
- values: %w[sidebar collection collection_detail kanban content],
26
- default: "sidebar"
27
-
28
-
25
+ values: %w[sidebar collection collection_detail kanban content masonry],
26
+ default: "sidebar"
29
27
  prop :responsive, type: Playbook::Props::Boolean, default: false
30
28
 
31
29
  def classname
32
30
  case layout
33
- when "collection"
34
- generate_classname("pb_layout_kit", layout)
35
- when "kanban"
36
- generate_classname("pb_layout_kit", layout, responsive_class)
37
- when "collection_detail"
38
- generate_classname("pb_layout_kit", layout )
39
- when "content"
40
- generate_classname("pb_layout_kit", layout)
41
- else
42
- first_class = generate_classname("pb_layout_kit_sidebar","size_#{size}", position, variant, transparent_class)
43
- [first_class, full_class, collapse_class].reject(&:empty?).join(" ")
31
+ when "collection"
32
+ generate_classname("pb_layout_kit", layout)
33
+ when "kanban"
34
+ generate_classname("pb_layout_kit", layout, responsive_class)
35
+ when "collection_detail"
36
+ generate_classname("pb_layout_kit", layout)
37
+ when "content"
38
+ generate_classname("pb_layout_kit", layout)
39
+ when "masonry"
40
+ generate_classname("pb_layout_kit", layout)
41
+ else
42
+ first_class = generate_classname("pb_layout_kit_sidebar", "size_#{size}", position, variant, transparent_class)
43
+ [first_class, full_class, collapse_class].reject(&:empty?).join(" ")
44
44
  end
45
45
  end
46
46
 
data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.html.erb CHANGED
@@ -24,7 +24,7 @@
24
24
  <% end %>
25
25
  <% end %>
26
26
  <div class="separator"></div>
27
- <%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
27
+ <%= pb_rails("card/card_body", props: { padding: "sm", status: object.status }) do %>
28
28
  <% if object.children.nil? %>
29
29
  <%= pb_rails("body", props: { text: object.text }) %>
30
30
  <% else %>
data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx CHANGED
@@ -23,6 +23,7 @@ type SelectableCardProps = {
23
23
  dark?: boolean,
24
24
  data: object,
25
25
  disabled?: boolean,
26
+ error?: boolean,
26
27
  icon?: boolean,
27
28
  id?: string,
28
29
  inputId?: string,
@@ -42,6 +43,7 @@ const SelectableCard = ({
42
43
  dark = false,
43
44
  data = {},
44
45
  disabled = false,
46
+ error = false,
45
47
  icon = false,
46
48
  inputId = null,
47
49
  multi = true,
@@ -56,9 +58,12 @@ const SelectableCard = ({
56
58
  const dataProps = buildDataProps(data)
57
59
 
58
60
  const classes = classnames(buildCss('pb_selectable_card_kit',
59
- { 'checked': checked,
61
+ {
62
+ 'checked': checked,
60
63
  'disabled': disabled,
61
- 'enabled': !disabled }),
64
+ 'enabled': !disabled,
65
+ }),
66
+ { error },
62
67
  dark ? 'dark' : '',
63
68
  className
64
69
  )
@@ -124,6 +129,7 @@ const SelectableCard = ({
124
129
  checked={checked}
125
130
  disabled={disabled}
126
131
  onClick={handleClick}
132
+ readOnly
127
133
  type={inputType}
128
134
  />
129
135
  </Input>
@@ -132,6 +138,7 @@ const SelectableCard = ({
132
138
  <Card.Body
133
139
  dark={dark}
134
140
  padding="sm"
141
+ status={error ? 'negative' : null}
135
142
  >
136
143
  {text || children}
137
144
  </Card.Body>