playbook_ui_docs 14.6.2.pre.alpha.PLAY15814384 → 14.7.0.pre.alpha.dependabotnpmandyarnintltelinput24704448
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx +13 -2
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.jsx +51 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.md +1 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.jsx +26 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.md +1 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.html.erb +1 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.jsx +11 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx +59 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.md +3 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.jsx +20 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.md +3 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/example.yml +13 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/index.js +5 -0
- data/dist/playbook-doc.js +1 -1
- metadata +14 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 30181417412eb7372d02e962c441f225ddcb4db7bd79b5b40813af29f4949be2
|
|
4
|
+
data.tar.gz: f0f56de520da7535beb82f6c0654524f58e296eef470f5ce51e4ee651705b0ab
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 7cf79e4413330b2eb88d9645db377cf9e72327ee7cf51a699da1050abb9f2577b9135dd4e4645fe6b15c36eb7cc789af77cffc9df3f9d6a0124b5b691b3ce675
|
|
7
|
+
data.tar.gz: 428f949b9f3bfdba4cfea5f79bca0def74ce88359c54041c057302aab243ab280a202b64aab69a2c022e819359dd7cc5914dbb35a20cd5b3f36da6d7d21c2223
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react"
|
|
2
|
-
import { AdvancedTable, Pill, Body, Flex, Detail, Caption } from "playbook-ui"
|
|
2
|
+
import { AdvancedTable, Pill, Body, Flex, Detail, Caption, Badge, Title } from "playbook-ui"
|
|
3
3
|
import MOCK_DATA from "./advanced_table_mock_data.json"
|
|
4
4
|
|
|
5
5
|
const AdvancedTableCustomCell = (props) => {
|
|
@@ -8,7 +8,18 @@ const AdvancedTableCustomCell = (props) => {
|
|
|
8
8
|
accessor: "year",
|
|
9
9
|
label: "Year",
|
|
10
10
|
cellAccessors: ["quarter", "month", "day"],
|
|
11
|
-
|
|
11
|
+
customRenderer: (row, value) => (
|
|
12
|
+
<Flex>
|
|
13
|
+
<Title size={4}
|
|
14
|
+
text={value}
|
|
15
|
+
/>
|
|
16
|
+
<Badge dark
|
|
17
|
+
marginLeft="xxs"
|
|
18
|
+
text={row.original.newEnrollments > 20 ? "High" : "Low"}
|
|
19
|
+
variant="neutral"
|
|
20
|
+
/>
|
|
21
|
+
</Flex>
|
|
22
|
+
),
|
|
12
23
|
},
|
|
13
24
|
{
|
|
14
25
|
accessor: "newEnrollments",
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Flex, SkeletonLoading } from "playbook-ui"
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
const SkeletonLoadingBorderRadius = (props) => (
|
|
6
|
+
<Flex justify="evenly">
|
|
7
|
+
<SkeletonLoading
|
|
8
|
+
borderRadius="rounded"
|
|
9
|
+
height="50px"
|
|
10
|
+
width="100px"
|
|
11
|
+
{...props}
|
|
12
|
+
/>
|
|
13
|
+
<SkeletonLoading
|
|
14
|
+
borderRadius="xl"
|
|
15
|
+
height="50px"
|
|
16
|
+
width="100px"
|
|
17
|
+
{...props}
|
|
18
|
+
/>
|
|
19
|
+
<SkeletonLoading
|
|
20
|
+
borderRadius="lg"
|
|
21
|
+
height="50px"
|
|
22
|
+
width="100px"
|
|
23
|
+
{...props}
|
|
24
|
+
/>
|
|
25
|
+
<SkeletonLoading
|
|
26
|
+
borderRadius="md"
|
|
27
|
+
height="50px"
|
|
28
|
+
width="100px"
|
|
29
|
+
{...props}
|
|
30
|
+
/>
|
|
31
|
+
<SkeletonLoading
|
|
32
|
+
height="50px"
|
|
33
|
+
width="100px"
|
|
34
|
+
{...props}
|
|
35
|
+
/>
|
|
36
|
+
<SkeletonLoading
|
|
37
|
+
borderRadius="xs"
|
|
38
|
+
height="50px"
|
|
39
|
+
width="100px"
|
|
40
|
+
{...props}
|
|
41
|
+
/>
|
|
42
|
+
<SkeletonLoading
|
|
43
|
+
borderRadius="none"
|
|
44
|
+
height="50px"
|
|
45
|
+
width="100px"
|
|
46
|
+
{...props}
|
|
47
|
+
/>
|
|
48
|
+
</Flex>
|
|
49
|
+
)
|
|
50
|
+
|
|
51
|
+
export default SkeletonLoadingBorderRadius
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
The `borderRadius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/visual_guidelines/border_radius) tokens, with `sm` as default.
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Card, SkeletonLoading } from "playbook-ui"
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
const SkeletonLoadingColor = (props) => (
|
|
6
|
+
<div>
|
|
7
|
+
<Card
|
|
8
|
+
borderNone
|
|
9
|
+
{...props}
|
|
10
|
+
>
|
|
11
|
+
<SkeletonLoading {...props}/>
|
|
12
|
+
</Card>
|
|
13
|
+
<Card
|
|
14
|
+
background="light"
|
|
15
|
+
borderNone
|
|
16
|
+
{...props}
|
|
17
|
+
>
|
|
18
|
+
<SkeletonLoading
|
|
19
|
+
color="white"
|
|
20
|
+
{...props}
|
|
21
|
+
/>
|
|
22
|
+
</Card>
|
|
23
|
+
</div>
|
|
24
|
+
)
|
|
25
|
+
|
|
26
|
+
export default SkeletonLoadingColor
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
The SkeletonLoading component has a default and a white `color` variant.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<%= pb_rails("skeleton_loading") %>
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Card, SkeletonLoading } from "playbook-ui"
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
const SkeletonLoadingHeightWidth = (props) => (
|
|
6
|
+
<div>
|
|
7
|
+
<SkeletonLoading
|
|
8
|
+
height="100px"
|
|
9
|
+
width="50%"
|
|
10
|
+
{...props}
|
|
11
|
+
/>
|
|
12
|
+
<SkeletonLoading
|
|
13
|
+
gap="md"
|
|
14
|
+
height="20px"
|
|
15
|
+
marginY="md"
|
|
16
|
+
stack="3"
|
|
17
|
+
width="50px"
|
|
18
|
+
{...props}
|
|
19
|
+
/>
|
|
20
|
+
<Card htmlOptions={{ style: { height: '200px', width: '100%' }}}
|
|
21
|
+
marginBottom="md"
|
|
22
|
+
padding="none"
|
|
23
|
+
>
|
|
24
|
+
<SkeletonLoading
|
|
25
|
+
borderRadius="md"
|
|
26
|
+
gap="xl"
|
|
27
|
+
height="50%"
|
|
28
|
+
width="300px"
|
|
29
|
+
{...props}
|
|
30
|
+
/>
|
|
31
|
+
</Card>
|
|
32
|
+
<Card htmlOptions={{ style: { height: '200px', width: '100%' }}}
|
|
33
|
+
padding="none"
|
|
34
|
+
>
|
|
35
|
+
<SkeletonLoading
|
|
36
|
+
borderRadius="md"
|
|
37
|
+
gap="xl"
|
|
38
|
+
height="30%"
|
|
39
|
+
stack="2"
|
|
40
|
+
width="70%"
|
|
41
|
+
{...props}
|
|
42
|
+
/>
|
|
43
|
+
</Card>
|
|
44
|
+
<SkeletonLoading
|
|
45
|
+
height="150px"
|
|
46
|
+
marginY="md"
|
|
47
|
+
width="150px"
|
|
48
|
+
{...props}
|
|
49
|
+
/>
|
|
50
|
+
<SkeletonLoading
|
|
51
|
+
borderRadius="rounded"
|
|
52
|
+
height="150px"
|
|
53
|
+
width="150px"
|
|
54
|
+
{...props}
|
|
55
|
+
/>
|
|
56
|
+
</div>
|
|
57
|
+
)
|
|
58
|
+
|
|
59
|
+
export default SkeletonLoadingHeightWidth
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
The `height` and `width` props accept pixel and percentage values. If using a percentage for `height`, the parent container must have a set height.
|
|
2
|
+
|
|
3
|
+
Set the `height` and `width` props to the same value to make a square. A `rounded` borderRadius will make a square a circle. If using percentages to make a square, your parent container must also be a square.
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { SkeletonLoading } from "playbook-ui"
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
const SkeletonLoadingLayout = (props) => (
|
|
6
|
+
<div>
|
|
7
|
+
<SkeletonLoading
|
|
8
|
+
stack="5"
|
|
9
|
+
{...props}
|
|
10
|
+
/>
|
|
11
|
+
<SkeletonLoading
|
|
12
|
+
gap="md"
|
|
13
|
+
paddingTop="xl"
|
|
14
|
+
stack="3"
|
|
15
|
+
{...props}
|
|
16
|
+
/>
|
|
17
|
+
</div>
|
|
18
|
+
)
|
|
19
|
+
|
|
20
|
+
export default SkeletonLoadingLayout
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
Use the `stack` and `gap` props in conjunction to layer multiple Skeleton loading bars on top of each other.
|
|
2
|
+
|
|
3
|
+
`stack` accepts a number that correlates to the number of rows (1 is default), and `gap` accepts a portion of our [spacing props](https://playbook.powerapp.cloud/visual_guidelines/spacing) (`xxs` as default, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`) to set the pixel distance between each row. `gap` will not do anything if there is no corresponding `stack` prop set.
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
examples:
|
|
2
|
+
|
|
3
|
+
rails:
|
|
4
|
+
# - skeleton_loading_default: Default
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
react:
|
|
8
|
+
- skeleton_loading_default: Default
|
|
9
|
+
- skeleton_loading_color: Color
|
|
10
|
+
- skeleton_loading_layout: Layout
|
|
11
|
+
- skeleton_loading_border_radius: Border Radius
|
|
12
|
+
- skeleton_loading_height_width: Height & Width
|
|
13
|
+
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { default as SkeletonLoadingDefault } from './_skeleton_loading_default.jsx'
|
|
2
|
+
export { default as SkeletonLoadingColor } from './_skeleton_loading_color.jsx'
|
|
3
|
+
export { default as SkeletonLoadingLayout } from './_skeleton_loading_layout.jsx'
|
|
4
|
+
export { default as SkeletonLoadingBorderRadius } from './_skeleton_loading_border_radius.jsx'
|
|
5
|
+
export { default as SkeletonLoadingHeightWidth } from './_skeleton_loading_height_width.jsx'
|