playbook_ui 14.11.0.pre.rc.7 → 14.11.0.pre.rc.8
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_skeleton_loading/_skeleton_loading.scss +2 -2
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_description.md +3 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.html.erb +9 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_rails.md +1 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.html.erb +7 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.html.erb +119 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx +10 -2
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.html.erb +15 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx +6 -2
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width_rails.md +3 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.html.erb +3 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.html.erb +63 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.jsx +11 -3
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/example.yml +7 -2
- data/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.html.erb +8 -12
- data/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.rb +48 -1
- data/dist/menu.yml +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +12 -3
- /data/app/pb_kits/playbook/pb_skeleton_loading/docs/{_skeleton_loading_border_radius.md → _skeleton_loading_border_radius_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_skeleton_loading/docs/{_skeleton_loading_height_width.md → _skeleton_loading_height_width_react.md} +0 -0
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 6cdd4fe59f0cd9c9bb6fdf8b9483d93556d3c755fb1c60f2ee1e157b8bd44da2
|
|
4
|
+
data.tar.gz: 43be89b4b77863b582d36e7e8e8067cfeffe33ba2fcc437688d9229b1e8753de
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: c32c0e2052ba650765e58318cf4413777019547c6ea0bbb6af01efa67555fa05aee5bc96f31fdcd4a988efd12a52ee53df1d4b6646433237a3fe7ff7316ffdb7
|
|
7
|
+
data.tar.gz: 70507ffdcbc63b986e6a3b5ce6b43a66fe11e70d39526126dae3c7ab2ba4c1b2cfb32c44031d971c31a91ebccdc7e707fae43ad0d056142e212b520531578813
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
The Skeleton Loading kit can be used an intermediate loading state to give users a visual indication that content is loading.
|
|
2
|
+
|
|
3
|
+
**Please Note**: this kit is not meant to be integrated interally within other Playbook kits as a loading prop; rather, it can be used to create a composite of the section/kit/page with loading intermediataries, as demonstrated in the the "example component" doc examples.
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<%= pb_rails("flex", props: { justify: "evenly" }) do %>
|
|
2
|
+
<%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "50px", width: "100px"}) %>
|
|
3
|
+
<%= pb_rails("skeleton_loading", props: { border_radius: "xl", height: "50px", width: "100px"}) %>
|
|
4
|
+
<%= pb_rails("skeleton_loading", props: { border_radius: "lg", height: "50px", width: "100px"}) %>
|
|
5
|
+
<%= pb_rails("skeleton_loading", props: { border_radius: "md", height: "50px", width: "100px"}) %>
|
|
6
|
+
<%= pb_rails("skeleton_loading", props: { height: "50px", width: "100px"}) %>
|
|
7
|
+
<%= pb_rails("skeleton_loading", props: { border_radius: "xs", height: "50px", width: "100px"}) %>
|
|
8
|
+
<%= pb_rails("skeleton_loading", props: { border_radius: "none", height: "50px", width: "100px"}) %>
|
|
9
|
+
<% end %>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
The `border_radius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/visual_guidelines/border_radius) tokens, with `sm` as default.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<%= pb_rails("skeleton_loading") %>
|
|
1
|
+
<%= pb_rails("skeleton_loading") %>
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
<%= pb_rails("button", props: { id: "toggle-filter-button", margin_bottom: "md", text: "Show Filter", variant: "secondary" }) %>
|
|
2
|
+
|
|
3
|
+
<div id="skeleton-loading-filter-content">
|
|
4
|
+
<%= pb_rails("card", props: { margin_bottom: "lg" }) do %>
|
|
5
|
+
<%= pb_rails("flex", props: { align_items: "center", justify: "between", orientation: "row" }) do %>
|
|
6
|
+
<%= pb_rails("flex", props: { align_items: "center", justify: "start", orientation: "row" }) do %>
|
|
7
|
+
<%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "40px", margin_right: "sm", width: "40px" }) %>
|
|
8
|
+
<%= pb_rails("skeleton_loading", props: { height: "16px", margin_right: "md", width: "80px" }) %>
|
|
9
|
+
<% end %>
|
|
10
|
+
<%= pb_rails("flex", props: { align_items: "center", justify: "end", orientation: "row" }) do %>
|
|
11
|
+
<%= pb_rails("skeleton_loading", props: { height: "18px", width: "120px" }) %>
|
|
12
|
+
<% end %>
|
|
13
|
+
<% end %>
|
|
14
|
+
<% end %>
|
|
15
|
+
|
|
16
|
+
<%= pb_rails("skeleton_loading", props: { height: "127px", width: "100%" }) %>
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
<div id="filter-content" style="display: none;">
|
|
20
|
+
<%= pb_rails("filter", props: {
|
|
21
|
+
margin_bottom: "xl",
|
|
22
|
+
min_width: "360px",
|
|
23
|
+
id: "2",
|
|
24
|
+
filters: [
|
|
25
|
+
{ name: "name", value: "John Wick" }
|
|
26
|
+
],
|
|
27
|
+
sort_menu: [
|
|
28
|
+
{ item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
|
|
29
|
+
{ item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
|
|
30
|
+
{ item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
|
|
31
|
+
],
|
|
32
|
+
results: 546,
|
|
33
|
+
template: "single"
|
|
34
|
+
}) do %>
|
|
35
|
+
<% example_collection = [
|
|
36
|
+
OpenStruct.new(name: "USA", value: 1),
|
|
37
|
+
OpenStruct.new(name: "Canada", value: 2),
|
|
38
|
+
OpenStruct.new(name: "Brazil", value: 3),
|
|
39
|
+
OpenStruct.new(name: "Philippines", value: 4),
|
|
40
|
+
OpenStruct.new(name: "A galaxy far far away...", value: 5)
|
|
41
|
+
] %>
|
|
42
|
+
|
|
43
|
+
<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
|
|
44
|
+
<%= form.text_field :example_text_field, props: { label: true } %>
|
|
45
|
+
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
|
|
46
|
+
|
|
47
|
+
<%= form.actions do |action| %>
|
|
48
|
+
<%= action.submit props: {
|
|
49
|
+
text: "Apply",
|
|
50
|
+
data: {
|
|
51
|
+
disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
|
|
52
|
+
},}%>
|
|
53
|
+
<%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
|
|
54
|
+
<% end %>
|
|
55
|
+
<% end %>
|
|
56
|
+
<% end %>
|
|
57
|
+
|
|
58
|
+
<%= pb_rails("filter", props: {
|
|
59
|
+
min_width: "360px",
|
|
60
|
+
id: "1",
|
|
61
|
+
filters: [
|
|
62
|
+
{ name: "name", value: "John Wick" },
|
|
63
|
+
{ name: "city", value: "San Francisco"}
|
|
64
|
+
],
|
|
65
|
+
sort_menu: [
|
|
66
|
+
{ item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
|
|
67
|
+
{ item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
|
|
68
|
+
{ item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
|
|
69
|
+
],
|
|
70
|
+
template: "default",
|
|
71
|
+
results: 1,
|
|
72
|
+
}) do %>
|
|
73
|
+
<% example_collection = [
|
|
74
|
+
OpenStruct.new(name: "USA", value: 1),
|
|
75
|
+
OpenStruct.new(name: "Canada", value: 2),
|
|
76
|
+
OpenStruct.new(name: "Brazil", value: 3),
|
|
77
|
+
OpenStruct.new(name: "Philippines", value: 4),
|
|
78
|
+
OpenStruct.new(name: "A galaxy far far away...", value: 5)
|
|
79
|
+
] %>
|
|
80
|
+
<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
|
|
81
|
+
<%= form.text_field :example_text_field, props: { label: true } %>
|
|
82
|
+
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
|
|
83
|
+
|
|
84
|
+
<%= form.actions do |action| %>
|
|
85
|
+
<%= action.submit props: {
|
|
86
|
+
text: "Apply",
|
|
87
|
+
data: {
|
|
88
|
+
disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
|
|
89
|
+
},}%>
|
|
90
|
+
<%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
|
|
91
|
+
<% end %>
|
|
92
|
+
<% end %>
|
|
93
|
+
<% end %>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
<script>
|
|
97
|
+
document.addEventListener("DOMContentLoaded", function() {
|
|
98
|
+
const toggleButton = document.getElementById('toggle-filter-button')
|
|
99
|
+
const skeletonFilterContentDiv = document.getElementById('skeleton-loading-filter-content')
|
|
100
|
+
const filterContentDiv = document.getElementById('filter-content')
|
|
101
|
+
const secondFilterContentDiv = document.getElementById('second-filter-content')
|
|
102
|
+
|
|
103
|
+
let isLoading = true
|
|
104
|
+
|
|
105
|
+
toggleButton.addEventListener('click', function() {
|
|
106
|
+
isLoading = !isLoading
|
|
107
|
+
|
|
108
|
+
if (isLoading) {
|
|
109
|
+
skeletonFilterContentDiv.style.display = 'block'
|
|
110
|
+
filterContentDiv.style.display = 'none'
|
|
111
|
+
toggleButton.textContent = 'Show Filter'
|
|
112
|
+
} else {
|
|
113
|
+
skeletonFilterContentDiv.style.display = 'none'
|
|
114
|
+
filterContentDiv.style.display = 'block'
|
|
115
|
+
toggleButton.textContent = 'Show Skeleton Loading'
|
|
116
|
+
}
|
|
117
|
+
})
|
|
118
|
+
})
|
|
119
|
+
</script>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
2
|
import { Button, Card, Filter, Flex, Select, SkeletonLoading, TextInput } from "playbook-ui";
|
|
3
3
|
|
|
4
4
|
const SortingChangeCallback = (sortOptions) => {
|
|
@@ -6,7 +6,8 @@ const SortingChangeCallback = (sortOptions) => {
|
|
|
6
6
|
}
|
|
7
7
|
|
|
8
8
|
const SkeletonLoadingFilter = (props) => {
|
|
9
|
-
const isLoading = true
|
|
9
|
+
const [isLoading, setIsLoading] = useState(true)
|
|
10
|
+
const toggleLoading = () => setIsLoading((prev) => !prev)
|
|
10
11
|
|
|
11
12
|
const options = [
|
|
12
13
|
{ value: 'USA' },
|
|
@@ -18,6 +19,13 @@ const SkeletonLoadingFilter = (props) => {
|
|
|
18
19
|
|
|
19
20
|
return (
|
|
20
21
|
<div>
|
|
22
|
+
<Button
|
|
23
|
+
marginBottom="md"
|
|
24
|
+
onClick={toggleLoading}
|
|
25
|
+
variant="secondary"
|
|
26
|
+
>
|
|
27
|
+
{isLoading ? "Show Filter" : "Show Skeleton Loading"}
|
|
28
|
+
</Button>
|
|
21
29
|
<div>
|
|
22
30
|
{isLoading ? (
|
|
23
31
|
<Card
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<%= pb_rails("skeleton_loading", props: { height: "100px", width: "50%" }) %>
|
|
2
|
+
|
|
3
|
+
<%= pb_rails("skeleton_loading", props: { gap: "md", height: "20px", margin_y: "md", stack: 3, width: "50px" }) %>
|
|
4
|
+
|
|
5
|
+
<%= pb_rails("card", props: { height: "200px", margin_bottom: "md", padding: "none", width: "100%" }) do %>
|
|
6
|
+
<%= pb_rails("skeleton_loading", props: { border_radius: "md", gap: "xl", height: "50%", width: "300px" }) %>
|
|
7
|
+
<% end %>
|
|
8
|
+
|
|
9
|
+
<%= pb_rails("card", props: { height: "200px", margin_bottom: "md", padding: "none", width: "100%" }) do %>
|
|
10
|
+
<%= pb_rails("skeleton_loading", props: { border_radius: "md", gap: "xl", height: "30%", stack: 2, width: "70%" }) %>
|
|
11
|
+
<% end %>
|
|
12
|
+
|
|
13
|
+
<%= pb_rails("skeleton_loading", props: { height: "150px", margin_y: "md", width: "150px" }) %>
|
|
14
|
+
|
|
15
|
+
<%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "150px", width: "150px" }) %>
|
|
@@ -17,9 +17,11 @@ const SkeletonLoadingHeightWidth = (props) => (
|
|
|
17
17
|
width="50px"
|
|
18
18
|
{...props}
|
|
19
19
|
/>
|
|
20
|
-
<Card
|
|
20
|
+
<Card
|
|
21
|
+
height='200px'
|
|
21
22
|
marginBottom="md"
|
|
22
23
|
padding="none"
|
|
24
|
+
width='100%'
|
|
23
25
|
{...props}
|
|
24
26
|
>
|
|
25
27
|
<SkeletonLoading
|
|
@@ -30,8 +32,10 @@ const SkeletonLoadingHeightWidth = (props) => (
|
|
|
30
32
|
{...props}
|
|
31
33
|
/>
|
|
32
34
|
</Card>
|
|
33
|
-
<Card
|
|
35
|
+
<Card
|
|
36
|
+
height='200px'
|
|
34
37
|
padding="none"
|
|
38
|
+
width='100%'
|
|
35
39
|
{...props}
|
|
36
40
|
>
|
|
37
41
|
<SkeletonLoading
|
|
@@ -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` border_radius will make a square a circle. If using percentages to make a square, your parent container must also be a square.
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
<%= pb_rails("button", props: { id: "toggle-user-button", margin_bottom: "md", text: "Show User", variant: "secondary" }) %>
|
|
2
|
+
|
|
3
|
+
<div id="skeleton-loading-user-content">
|
|
4
|
+
<%= pb_rails("flex", props: { align_items: "center" }) do %>
|
|
5
|
+
<%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "38px", padding_right: "sm", width: "38px"}) %>
|
|
6
|
+
<%= pb_rails("skeleton_loading", props: { gap: "xxs", height: "18px", stack: 2, width: "161px"}) %>
|
|
7
|
+
<% end %>
|
|
8
|
+
<%= pb_rails("flex", props: { align_items: "start", padding_top: "md" }) do %>
|
|
9
|
+
<%= pb_rails("flex", props: { align_items: "center", flex_direction: "column" }) do %>
|
|
10
|
+
<%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "100px", padding_bottom: "xs", width: "100px"}) %>
|
|
11
|
+
<%= pb_rails("skeleton_loading", props: { height: "32px", padding_bottom: "xxs", width: "144px"}) %>
|
|
12
|
+
<%= pb_rails("skeleton_loading", props: { height: "21px", width: "164px"}) %>
|
|
13
|
+
<% end %>
|
|
14
|
+
<% end %>
|
|
15
|
+
</div>
|
|
16
|
+
|
|
17
|
+
<div id="user-content" style="display: none;">
|
|
18
|
+
<div>
|
|
19
|
+
<%= pb_rails("user", props: {
|
|
20
|
+
name: "Anna Black",
|
|
21
|
+
title: "Remodeling Consultant",
|
|
22
|
+
orientation: "horizontal",
|
|
23
|
+
align: "left",
|
|
24
|
+
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
|
|
25
|
+
}) %>
|
|
26
|
+
</div>
|
|
27
|
+
<div>
|
|
28
|
+
<%= pb_rails("flex", props: { align_items: "start", padding_top: "md" }) do %>
|
|
29
|
+
<%= pb_rails("user", props: {
|
|
30
|
+
name: "Anna Black",
|
|
31
|
+
title: "Remodeling Consultant",
|
|
32
|
+
orientation: "vertical",
|
|
33
|
+
align: "center",
|
|
34
|
+
size: "lg",
|
|
35
|
+
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
|
|
36
|
+
}) %>
|
|
37
|
+
<% end %>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
<script>
|
|
42
|
+
document.addEventListener("DOMContentLoaded", function() {
|
|
43
|
+
const toggleButton = document.getElementById('toggle-user-button')
|
|
44
|
+
const skeletonUserContentDiv = document.getElementById('skeleton-loading-user-content')
|
|
45
|
+
const userContentDiv = document.getElementById('user-content')
|
|
46
|
+
|
|
47
|
+
let isLoading = true
|
|
48
|
+
|
|
49
|
+
toggleButton.addEventListener('click', function() {
|
|
50
|
+
isLoading = !isLoading
|
|
51
|
+
|
|
52
|
+
if (isLoading) {
|
|
53
|
+
skeletonUserContentDiv.style.display = 'block'
|
|
54
|
+
userContentDiv.style.display = 'none'
|
|
55
|
+
toggleButton.textContent = 'Show User'
|
|
56
|
+
} else {
|
|
57
|
+
skeletonUserContentDiv.style.display = 'none'
|
|
58
|
+
userContentDiv.style.display = 'block'
|
|
59
|
+
toggleButton.textContent = 'Show Skeleton Loading'
|
|
60
|
+
}
|
|
61
|
+
})
|
|
62
|
+
})
|
|
63
|
+
</script>
|
|
@@ -1,11 +1,19 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Flex, SkeletonLoading, User } from "playbook-ui";
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import { Button, Flex, SkeletonLoading, User } from "playbook-ui";
|
|
3
3
|
|
|
4
4
|
const SkeletonLoadingUser = (props) => {
|
|
5
|
-
const isLoading = true
|
|
5
|
+
const [isLoading, setIsLoading] = useState(true)
|
|
6
|
+
const toggleLoading = () => setIsLoading((prev) => !prev)
|
|
6
7
|
|
|
7
8
|
return (
|
|
8
9
|
<div>
|
|
10
|
+
<Button
|
|
11
|
+
marginBottom="md"
|
|
12
|
+
onClick={toggleLoading}
|
|
13
|
+
variant="secondary"
|
|
14
|
+
>
|
|
15
|
+
{isLoading ? "Show User" : "Show Skeleton Loading"}
|
|
16
|
+
</Button>
|
|
9
17
|
<div>
|
|
10
18
|
{isLoading ? (
|
|
11
19
|
<Flex alignItems="center">
|
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
examples:
|
|
2
2
|
|
|
3
3
|
rails:
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
- skeleton_loading_default: Default
|
|
5
|
+
- skeleton_loading_color: Color
|
|
6
|
+
- skeleton_loading_layout: Layout
|
|
7
|
+
- skeleton_loading_border_radius: Border Radius
|
|
8
|
+
- skeleton_loading_height_width: Height & Width
|
|
9
|
+
- skeleton_loading_user: User Component Example
|
|
10
|
+
- skeleton_loading_filter: Filter Component Example
|
|
6
11
|
|
|
7
12
|
react:
|
|
8
13
|
- skeleton_loading_default: Default
|
|
@@ -1,12 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
# **combined_html_options
|
|
10
|
-
) do %>
|
|
11
|
-
<span>SKELETON_LOADING CONTENT</span>
|
|
12
|
-
<% end %>
|
|
1
|
+
<%= pb_content_tag do %>
|
|
2
|
+
<% stack.times do |index| %>
|
|
3
|
+
<div
|
|
4
|
+
class="<%= item_classname(index) %>"
|
|
5
|
+
style="<%= item_inline_styles %>"
|
|
6
|
+
></div>
|
|
7
|
+
<% end %>
|
|
8
|
+
<% end %>
|
|
@@ -2,7 +2,54 @@
|
|
|
2
2
|
|
|
3
3
|
module Playbook
|
|
4
4
|
module PbSkeletonLoading
|
|
5
|
-
class SkeletonLoading <
|
|
5
|
+
class SkeletonLoading < Playbook::KitBase
|
|
6
|
+
prop :height, type: Playbook::Props::String,
|
|
7
|
+
default: "16px"
|
|
8
|
+
prop :width, type: Playbook::Props::String,
|
|
9
|
+
default: "100%"
|
|
10
|
+
prop :border_radius, type: Playbook::Props::Enum,
|
|
11
|
+
values: %w[none xs sm md lg xl rounded],
|
|
12
|
+
default: "sm"
|
|
13
|
+
prop :gap, type: Playbook::Props::Enum,
|
|
14
|
+
values: %w[none xxs xs sm md lg xl xxl],
|
|
15
|
+
default: "xxs"
|
|
16
|
+
prop :stack, type: Playbook::Props::Number,
|
|
17
|
+
default: 1
|
|
18
|
+
prop :color, type: Playbook::Props::Enum,
|
|
19
|
+
values: %w[default white],
|
|
20
|
+
default: "default"
|
|
21
|
+
prop :dark, type: Playbook::Props::Boolean,
|
|
22
|
+
default: false
|
|
23
|
+
|
|
24
|
+
def classname
|
|
25
|
+
generate_classname("pb_skeleton_loading")
|
|
26
|
+
end
|
|
27
|
+
|
|
28
|
+
def global_inline_props
|
|
29
|
+
{}
|
|
30
|
+
end
|
|
31
|
+
|
|
32
|
+
def item_classname(index = nil)
|
|
33
|
+
classes = [
|
|
34
|
+
"pb_skeleton_loading_item",
|
|
35
|
+
"border_radius_#{border_radius}",
|
|
36
|
+
"color_#{color}",
|
|
37
|
+
("dark" if dark),
|
|
38
|
+
gap_class(index),
|
|
39
|
+
]
|
|
40
|
+
classes.compact.join(" ")
|
|
41
|
+
end
|
|
42
|
+
|
|
43
|
+
def item_inline_styles
|
|
44
|
+
styles = []
|
|
45
|
+
styles << "height: #{height}"
|
|
46
|
+
styles << "width: #{width}"
|
|
47
|
+
styles.join("; ")
|
|
48
|
+
end
|
|
49
|
+
|
|
50
|
+
def gap_class(index = nil)
|
|
51
|
+
stack > 1 && index.to_i.positive? && gap != "none" ? "gap_#{gap}" : nil
|
|
52
|
+
end
|
|
6
53
|
end
|
|
7
54
|
end
|
|
8
55
|
end
|