playbook_ui_docs 13.29.0.pre.alpha.testingcollapsibleissue3052 → 13.30.0.pre.alpha.PLAY1328fixtimelinekitglobalpropsreact3096

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 (25) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.html.erb +58 -0
  3. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx +68 -0
  4. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +2 -0
  5. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
  6. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx +1 -1
  7. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md +1 -1
  8. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx +8 -7
  9. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.md +1 -0
  10. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx +13 -32
  11. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.md +3 -0
  12. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx +5 -5
  13. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md +1 -1
  14. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx +5 -5
  15. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.jsx +40 -0
  16. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md +7 -0
  17. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx +36 -0
  18. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.md +5 -0
  19. data/app/pb_kits/playbook/pb_overlay/docs/example.yml +4 -0
  20. data/app/pb_kits/playbook/pb_overlay/docs/index.js +2 -0
  21. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.html.erb +32 -33
  22. data/dist/app/components/playbook/pb_docs/kit_example.rb +19 -3
  23. data/dist/menu.yml +5 -1
  24. data/dist/playbook-doc.js +9 -9
  25. metadata +12 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 3989a7998287dbfdeb6f70a5350de16e07f58a24a708d7960d90509bde13d460
4
- data.tar.gz: 26d31983c514bea9c5c4556ea867235c422ed3c62f12d084a993f8eaff6f3a7e
3
+ metadata.gz: '05813b97210befb8bf5db329609990ff637f48a7defa0b0cb9a8f61ceaf68cd5'
4
+ data.tar.gz: 25da023059632ffbb44140ba1e24799de56d0c3dc198513c3f25cdfa98e0fd1f
5
5
  SHA512:
6
- metadata.gz: 3d3bddef7c00879f999a9daf00eb7f60122c7cb41ba786457c2c3221a316ce8114990b03f31d9f92554a85d48f44b07eb6434fdc95bf45dae536f69966c1cf8d
7
- data.tar.gz: 1eef88d2153999d0601102f50ec09771a16b395f4f10a552643a410fabfd7070cb24ce1bd02a9525d37dad36371613f978dfdc1075bb31a58173a9f6338eb9dc
6
+ metadata.gz: 8517a60878e5668d21cae27692409fb51350aa132a02263d96e47f2a0c141463a4dfac9962c1dcaee88f4592ab23400dc8ec97aafde94bfc4a792debfd2d1b40
7
+ data.tar.gz: 2e9fec1a843f16c91034368c8c0f2cb3b242b32d10f27d7043cb476f5b11c869405cd19d7362b66cf5225ceb8458337b7be0f4bcd6368267944483edb062f6b5
@@ -0,0 +1,58 @@
1
+ <% bar_graph_options = {
2
+ customOptions: {
3
+ chart: {
4
+ type: 'bar'
5
+ },
6
+ title: {
7
+ text: 'Historic World Population by Region',
8
+ align: 'left'
9
+ },
10
+ subtitle: {
11
+ text: 'Source: <a ' +
12
+ 'href="https://en.wikipedia.org/wiki/List_of_continents_and_continental_subregions_by_population"' +
13
+ 'target="_blank">Wikipedia.org</a>',
14
+ align: 'left'
15
+ },
16
+ xAxis: {
17
+ categories: ['Africa', 'America', 'Asia', 'Europe'],
18
+ lineWidth: 0
19
+ },
20
+ yAxis: {
21
+ min: 0,
22
+ title: {
23
+ text: 'Population (millions)',
24
+ align: 'high'
25
+ },
26
+ labels: {
27
+ overflow: 'justify'
28
+ },
29
+ },
30
+ tooltip: {
31
+ valueSuffix: ' millions'
32
+ },
33
+ plotOptions: {
34
+ bar: {
35
+ dataLabels: {
36
+ enabled: true
37
+ },
38
+ groupPadding: 0.1
39
+ }
40
+ },
41
+ series: [{
42
+ name: 'Year 1990',
43
+ data: [631, 727, 3202, 721]
44
+ }, {
45
+ name: 'Year 2000',
46
+ data: [814, 841, 3714, 726]
47
+ }, {
48
+ name: 'Year 2018',
49
+ data: [1276, 1007, 4561, 746]
50
+ }]
51
+ }
52
+ } %>
53
+
54
+ <%= pb_rails("bar_graph", props: {
55
+ id: "bar-horizontal",
56
+ y_axis_min: 0,
57
+ custom_options: bar_graph_options,
58
+ }) %>
@@ -0,0 +1,68 @@
1
+ import React from 'react'
2
+
3
+ import BarGraph from '../_bar_graph'
4
+
5
+
6
+ const barGraphOptions = {
7
+ chart: {
8
+ type: 'bar'
9
+ },
10
+ title: {
11
+ text: 'Historic World Population by Region',
12
+ align: 'left'
13
+ },
14
+ subtitle: {
15
+ text: 'Source: <a ' +
16
+ 'href="https://en.wikipedia.org/wiki/List_of_continents_and_continental_subregions_by_population"' +
17
+ 'target="_blank">Wikipedia.org</a>',
18
+ align: 'left'
19
+ },
20
+ xAxis: {
21
+ categories: ['Africa', 'America', 'Asia', 'Europe'],
22
+ lineWidth: 0
23
+ },
24
+ yAxis: {
25
+ min: 0,
26
+ title: {
27
+ text: 'Population (millions)',
28
+ align: 'high'
29
+ },
30
+ labels: {
31
+ overflow: 'justify'
32
+ },
33
+ },
34
+ tooltip: {
35
+ valueSuffix: ' millions'
36
+ },
37
+ plotOptions: {
38
+ bar: {
39
+ dataLabels: {
40
+ enabled: true
41
+ },
42
+ groupPadding: 0.1
43
+ }
44
+ },
45
+ series: [{
46
+ name: 'Year 1990',
47
+ data: [631, 727, 3202, 721]
48
+ }, {
49
+ name: 'Year 2000',
50
+ data: [814, 841, 3714, 726]
51
+ }, {
52
+ name: 'Year 2018',
53
+ data: [1276, 1007, 4561, 746]
54
+ }]
55
+ }
56
+
57
+ const BarGraphHorizontal = (props) => (
58
+ <div>
59
+ <BarGraph
60
+ customOptions={barGraphOptions}
61
+ id="bar-horizontal"
62
+ yAxisMin={0}
63
+ {...props}
64
+ />
65
+ </div>
66
+ )
67
+
68
+ export default BarGraphHorizontal
@@ -12,6 +12,7 @@ examples:
12
12
  - bar_graph_stacked: Stacked
13
13
  - bar_graph_negative_numbers: Negative Numbers
14
14
  - bar_graph_secondary_y_axis: Secondary Y-Axis
15
+ - bar_graph_horizontal: Custom Options From Highcharts
15
16
 
16
17
 
17
18
  react:
@@ -26,3 +27,4 @@ examples:
26
27
  - bar_graph_stacked: Stacked
27
28
  - bar_graph_negative_numbers: Negative Numbers
28
29
  - bar_graph_secondary_y_axis: Secondary Y-Axis
30
+ - bar_graph_horizontal: Custom Options From Highcharts
@@ -9,3 +9,4 @@ export { default as BarGraphCustom } from './_bar_graph_custom.jsx'
9
9
  export { default as BarGraphStacked } from './_bar_graph_stacked.jsx'
10
10
  export { default as BarGraphNegativeNumbers } from './_bar_graph_negative_numbers.jsx'
11
11
  export { default as BarGraphSecondaryYAxis } from './_bar_graph_secondary_y_axis.jsx'
12
+ export { default as BarGraphHorizontal } from './_bar_graph_horizontal.jsx'
@@ -27,7 +27,7 @@ const DraggableDefault = (props) => {
27
27
  return (
28
28
  <>
29
29
  <DraggableProvider initialItems={data}
30
- onChange={(items) => setInitialState(items)}
30
+ onReorder={(items) => setInitialState(items)}
31
31
  >
32
32
  <Draggable.Container {...props}>
33
33
  <SelectableList variant="checkbox">
@@ -1,4 +1,4 @@
1
- To use the Draggable kit, you must use the DraggableProvider and pass in `initialItems`. The `onChange` is a function that returns the data as it changes as items are reordered. Use this to manage state as shown.
1
+ To use the Draggable kit, you must use the DraggableProvider and pass in `initialItems`. The `onReorder` is a function that returns the data as it changes as items are reordered. Use this to manage state as shown.
2
2
 
3
3
  The `Draggable.Container` specifies the container within which items can be dropped.
4
4
  The `Draggable.Item` specifies the items that can be dragged and dropped. `Draggable.Item` requires `id` to be passed in as shown.
@@ -18,7 +18,7 @@ const containers = ["To Do", "In Progress", "Done"];
18
18
  // Initial items to be dragged
19
19
  const data = [
20
20
  {
21
- id: "1",
21
+ id: "11",
22
22
  container: "To Do",
23
23
  title: "Task 1",
24
24
  description: "Bug fixes",
@@ -26,7 +26,7 @@ const data = [
26
26
  assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
27
27
  },
28
28
  {
29
- id: "2",
29
+ id: "12",
30
30
  container: "To Do",
31
31
  title: "Task 2",
32
32
  description: "Documentation",
@@ -34,7 +34,7 @@ const data = [
34
34
  assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
35
35
  },
36
36
  {
37
- id: "3",
37
+ id: "13",
38
38
  container: "In Progress",
39
39
  title: "Task 3",
40
40
  description: "Add a variant",
@@ -42,7 +42,7 @@ const data = [
42
42
  assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
43
43
  },
44
44
  {
45
- id: "4",
45
+ id: "14",
46
46
  container: "To Do",
47
47
  title: "Task 4",
48
48
  description: "Add jest tests",
@@ -50,7 +50,7 @@ const data = [
50
50
  assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
51
51
  },
52
52
  {
53
- id: "5",
53
+ id: "15",
54
54
  container: "Done",
55
55
  title: "Task 5",
56
56
  description: "Alpha testing",
@@ -58,7 +58,7 @@ const data = [
58
58
  assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
59
59
  },
60
60
  {
61
- id: "6",
61
+ id: "16",
62
62
  container: "In Progress",
63
63
  title: "Task 6",
64
64
  description: "Release",
@@ -83,7 +83,7 @@ const DraggableMultipleContainer = (props) => {
83
83
 
84
84
  return (
85
85
  <DraggableProvider initialItems={data}
86
- onChange={(items) => setInitialState(items)}
86
+ onReorder={(items) => setInitialState(items)}
87
87
  >
88
88
  <Flex
89
89
  justifyContent="center"
@@ -92,6 +92,7 @@ const DraggableMultipleContainer = (props) => {
92
92
  {containers?.map((container) => (
93
93
  <Draggable.Container
94
94
  container={container}
95
+ htmlOptions={{style:{ width: "200px", height: "70vh"}}}
95
96
  key={container}
96
97
  padding="sm"
97
98
  >
@@ -0,0 +1 @@
1
+ The Draggable kit can also be used to achieve more complex, multiple container functionality as shown here. This complex usage requires the full subcomponent structure.
@@ -13,15 +13,15 @@ import {
13
13
  // Initial items to be dragged
14
14
  const data = [
15
15
  {
16
- id: "1",
16
+ id: "21",
17
17
  text: "Joe Black",
18
18
  },
19
19
  {
20
- id: "2",
20
+ id: "22",
21
21
  text: "Nancy White",
22
22
  },
23
23
  {
24
- id: "3",
24
+ id: "23",
25
25
  text: "Bill Green",
26
26
  },
27
27
  ];
@@ -32,52 +32,34 @@ const DraggableWithCards = (props) => {
32
32
  return (
33
33
  <DraggableProvider
34
34
  initialItems={data}
35
- onChange={(items) => setInitialState(items)}
35
+ onReorder={(items) => setInitialState(items)}
36
36
  >
37
37
  <Draggable.Container {...props}>
38
38
  {initialState.map(({ id, text }) => (
39
- <Draggable.Item id={id}
40
- key={id}
41
- >
42
39
  <Card
43
- highlight={{ position: "side", color: "primary" }}
40
+ draggableItem
41
+ highlight={{ color: "primary", position: "side" }}
42
+ id={id}
43
+ key={id}
44
44
  marginBottom="xs"
45
+ padding="xs"
45
46
  >
46
47
  <Flex alignItems="stretch"
47
48
  flexDirection="column"
48
- >
49
+ >
49
50
  <Flex gap="xs">
50
51
  <Title size={4}
51
52
  text={text}
52
- />
53
+ />
53
54
  <Badge
54
55
  text="35-12345"
55
56
  variant="primary"
56
- />
57
+ />
57
58
  </Flex>
58
-
59
- <Flex
60
- gap="sm"
61
- spacing="between"
62
- >
63
- <Caption
64
- size="xs"
65
- text="8:00A"
66
- />
67
- <Flex gap="xxs">
68
59
  <Caption
69
60
  size="xs"
70
- text="Township Name"
71
- />
72
- <Caption size="xs"
73
- text="•"
61
+ text="8:00A • Township Name • 90210"
74
62
  />
75
- <Caption size="xs"
76
- text="90210"
77
- />
78
- </Flex>
79
- </Flex>
80
-
81
63
  <Flex gap="xxs"
82
64
  spacing="between"
83
65
  >
@@ -109,7 +91,6 @@ const DraggableWithCards = (props) => {
109
91
  </Flex>
110
92
  </Flex>
111
93
  </Card>
112
- </Draggable.Item>
113
94
  ))}
114
95
  </Draggable.Container>
115
96
  </DraggableProvider>
@@ -0,0 +1,3 @@
1
+ For a simplified version of the Draggable API for the Card kit, You can use the the Card kit as the Draggable Item by using the `draggableItem` prop on Card. The dragHandle is added by default but this can be opted out off by setting `dragHandle` to false on the Card kit.
2
+
3
+ The dev must manage state as shown and pass in id to the Card for dragging to work.
@@ -4,19 +4,19 @@ import { DraggableProvider, List, ListItem } from "../../";
4
4
  // Initial items to be dragged
5
5
  const data = [
6
6
  {
7
- id: "1",
7
+ id: "31",
8
8
  text: "Philadelphia",
9
9
  },
10
10
  {
11
- id: "2",
11
+ id: "32",
12
12
  text: "New Jersey",
13
13
  },
14
14
  {
15
- id: "3",
15
+ id: "33",
16
16
  text: "Maryland",
17
17
  },
18
18
  {
19
- id: "4",
19
+ id: "34",
20
20
  text: "Connecticut",
21
21
  },
22
22
  ];
@@ -28,7 +28,7 @@ const DraggableWithList = (props) => {
28
28
  return (
29
29
  <>
30
30
  <DraggableProvider initialItems={data}
31
- onChange={(items) => setInitialState(items)}
31
+ onReorder={(items) => setInitialState(items)}
32
32
  >
33
33
  <List draggable
34
34
  {...props}
@@ -1 +1 @@
1
- For a simplified version of the Draggable API fro the List kit, use the DraggableProvider to wrap the List use the `draggable` prop on List. The dev must manage state as shown and pass in id to the ListItem.
1
+ For a simplified version of the Draggable API for the List kit, use the DraggableProvider to wrap the List kit and use the `draggable` prop on List. The dev must manage state as shown and pass in id to the ListItem for dragging to work.
@@ -4,19 +4,19 @@ import { SelectableList, DraggableProvider } from "../../";
4
4
  // Initial items to be dragged
5
5
  const data = [
6
6
  {
7
- id: "1",
7
+ id: "41",
8
8
  text: "Task 1",
9
9
  },
10
10
  {
11
- id: "2",
11
+ id: "42",
12
12
  text: "Task 2",
13
13
  },
14
14
  {
15
- id: "3",
15
+ id: "43",
16
16
  text: "Task 3",
17
17
  },
18
18
  {
19
- id: "4",
19
+ id: "44",
20
20
  text: "Task 4",
21
21
  },
22
22
  ];
@@ -27,7 +27,7 @@ const DraggableWithSelectableList = (props) => {
27
27
  return (
28
28
  <>
29
29
  <DraggableProvider initialItems={data}
30
- onChange={(items) => setInitialState(items)}
30
+ onReorder={(items) => setInitialState(items)}
31
31
  >
32
32
  <SelectableList draggable
33
33
  variant="checkbox"
@@ -0,0 +1,40 @@
1
+ import React from 'react'
2
+ import {
3
+ Overlay,
4
+ Table,
5
+ } from '../..'
6
+
7
+ const TableExample = () => {
8
+ return (
9
+ <Table size="sm">
10
+ <thead>
11
+ <tr>
12
+ <th>{'Column 1'}</th>
13
+ <th>{'Column 2'}</th>
14
+ <th>{'Column 3'}</th>
15
+ <th>{'Column 4'}</th>
16
+ <th>{'Column 5'}</th>
17
+ </tr>
18
+ </thead>
19
+ <tbody>
20
+ {Array.from({ length: 7 }, (_, index) => (
21
+ <tr key={index}>
22
+ {Array.from({ length: 5 }, (_, columnIndex) => (
23
+ <td key={columnIndex}>{`Value ${columnIndex + 1}`}</td>
24
+ ))}
25
+ </tr>
26
+ ))}
27
+ </tbody>
28
+ </Table>
29
+ )
30
+ }
31
+
32
+ const OverlayDefault = () => (
33
+ <>
34
+ <Overlay>
35
+ <TableExample />
36
+ </Overlay>
37
+ </>
38
+ )
39
+
40
+ export default OverlayDefault
@@ -0,0 +1,7 @@
1
+ Overlays require a `color`, which sets the "start" (opaque) color of a gradient mask. Because this overlay is intended to reveal underlying content, the "end" color is fixed to transparent.
2
+
3
+ The optional `layout` prop accepts a `position` and a `size` as a key:value pair object.
4
+
5
+ The `position` key accepts `top`, `bottom`, `y` (for both top and bottom) `right`, `left`, or `x` (for both left and right), which sets the side(s) where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
6
+
7
+ The `size` value accepts our [spacing tokens](https://playbook.powerapp.cloud/visual_guidelines/spacing) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay. By default, `size` is set to `full` (100%) so that your overlay covers the entire container with a smooth fade from `color` at its starting edge, fading to transparent and ending at the containers opposite edge.
@@ -0,0 +1,36 @@
1
+ import React from 'react'
2
+ import {
3
+ Overlay,
4
+ Card,
5
+ Flex,
6
+ FlexItem,
7
+ } from '../..'
8
+
9
+ const InlineCardsExample = () => {
10
+ return (
11
+ <Flex
12
+ columnGap="lg"
13
+ orientation="row"
14
+ overflowX="auto"
15
+ >
16
+ {Array.from({ length: 15 }, (_, index) => (
17
+ <FlexItem key={index}>
18
+ <Card>{"Card Content"}</Card>
19
+ </FlexItem>
20
+ ))}
21
+ </Flex>
22
+ )
23
+ }
24
+
25
+ const OverlayMultiDirectional = () => (
26
+ <>
27
+ <Overlay
28
+ color="card_light"
29
+ layout={{"x": "xl"}}
30
+ >
31
+ <InlineCardsExample />
32
+ </Overlay>
33
+ </>
34
+ )
35
+
36
+ export default OverlayMultiDirectional
@@ -0,0 +1,5 @@
1
+ Optionally, you can pass multi-directional options (`x` or `y`) to the `position` key, which creates multiple overlays.
2
+
3
+ Your `color` is still applied as the starting edge to both overlays, and each mask will fade to transparent moving toward its opposite edge, ending at the `size` value you set.
4
+
5
+ NOTE: Multi-directional overlays share the available container space, so passing `full` or a percentage string greater than 50% to a multi-directional overlay will cause your masks to overlap at the midline of your container. As a best practice, we do not recommend exceeding a percentage size of 25% when using multi-directional overlays.
@@ -0,0 +1,4 @@
1
+ examples:
2
+ react:
3
+ - overlay_default: Default
4
+ - overlay_multi_directional: Multi-directional
@@ -0,0 +1,2 @@
1
+ export { default as OverlayDefault } from './_overlay_default.jsx'
2
+ export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'
@@ -1,34 +1,33 @@
1
- <%= pb_rails("table") do %>
2
- <thead>
3
- <tr>
4
- <th>Column 1</th>
5
- <th>Column 2</th>
6
- <th>Column 3</th>
7
- <th align="center">Rating</th>
8
- <th align="right">Money</th>
9
- </tr>
10
- </thead>
11
- <tbody>
12
- <tr>
13
- <td>Value 1</td>
14
- <td>Value 2</td>
15
- <td>Value 3</td>
16
- <td align="center">3</td>
17
- <td align="right">$57.32</td>
18
- </tr>
19
- <tr>
20
- <td>Value 1</td>
21
- <td>Value 2</td>
22
- <td>Value 3</td>
23
- <td align="center">2</td>
24
- <td align="right">$5,657.08</td>
25
- </tr>
26
- <tr>
27
- <td>Value 1</td>
28
- <td>Value 2</td>
29
- <td>Value 3</td>
30
- <td align="center">4</td>
31
- <td align="right">$358.77</td>
32
- </tr>
33
- </tbody>
1
+ <%= pb_rails("table") do %> <%= pb_rails("table/table_head") do %>
2
+ <%= pb_rails("table/table_row") do %>
3
+ <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
4
+ <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
5
+ <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
6
+ <%= pb_rails("table/table_header", props: { text: "Rating", text_align: "center" }) %>
7
+ <%= pb_rails("table/table_header", props: { text: "Money", text_align: "right" }) %>
8
+ <% end %>
9
+ <% end %>
10
+ <%= pb_rails("table/table_body") do %>
11
+ <%= pb_rails("table/table_row") do %>
12
+ <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
13
+ <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
14
+ <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
15
+ <%= pb_rails("table/table_cell", props: { text: "3", text_align: "center" }) %>
16
+ <%= pb_rails("table/table_cell", props: { text: "$57.32", text_align: "right" }) %>
17
+ <% end %>
18
+ <%= pb_rails("table/table_row") do %>
19
+ <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
20
+ <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
21
+ <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
22
+ <%= pb_rails("table/table_cell", props: { text: "2", text_align: "center" }) %>
23
+ <%= pb_rails("table/table_cell", props: { text: "$5,657.08", text_align: "right" }) %>
24
+ <% end %>
25
+ <%= pb_rails("table/table_row") do %>
26
+ <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
27
+ <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
28
+ <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
29
+ <%= pb_rails("table/table_cell", props: { text: "4", text_align: "center" }) %>
30
+ <%= pb_rails("table/table_cell", props: { text: "$358.77", text_align: "right" }) %>
31
+ <% end %>
32
+ <% end %>
34
33
  <% end %>
@@ -67,9 +67,25 @@ module Playbook
67
67
  stringified_code.gsub(" {...props}", "")
68
68
  end
69
69
 
70
- def read_kit_file(folder, *args)
71
- path = ::Playbook.kit_path(kit, folder, *args)
72
- path.exist? ? path.read : ""
70
+ def read_kit_file(folder, file_name)
71
+ name_array = file_name.split(".")
72
+ path = ::Playbook.kit_path(kit, folder, file_name)
73
+ if name_array[1] != "md"
74
+ (path.exist? ? path.read : "")
75
+ else
76
+ if path.exist?
77
+ path.read
78
+ elsif type == "rails"
79
+ name_array[0] += "_rails"
80
+ file_name = name_array.join(".")
81
+ path = ::Playbook.kit_path(kit, folder, file_name)
82
+ elsif type == "react"
83
+ name_array[0] += "_react"
84
+ file_name = name_array.join(".")
85
+ path = ::Playbook.kit_path(kit, folder, file_name)
86
+ end
87
+ (path.exist? ? path.read : "")
88
+ end
73
89
  end
74
90
  end
75
91
  end
data/dist/menu.yml CHANGED
@@ -352,6 +352,9 @@ kits:
352
352
  platforms: *web
353
353
  description:
354
354
  status: "stable"
355
+ - name: "overlay"
356
+ platforms: *react_only
357
+ status: "beta"
355
358
  - name: "draggable"
356
359
  platforms: *react_only
357
360
  description:
@@ -467,4 +470,5 @@ kits:
467
470
  status: "stable"
468
471
  - name: "user"
469
472
  platforms: *web
470
- description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
473
+ description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
474
+ status: "stable"