playbook_ui 7.15.1 → 7.16.0

Sign up to get free protection for your applications and to get access to all the features.
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>