+ {Array.from({ length: Number(stack) }).map((_, index) => (
+
0 && gapClass)}
+ key={index}
+ style={innerSizeStyle}
+ />
+ ))}
+
+ )
+}
+
+export default SkeletonLoading
diff --git a/playbook/app/pb_kits/playbook/pb_skeleton_loading/_skeleton_loading_mixins.scss b/playbook/app/pb_kits/playbook/pb_skeleton_loading/_skeleton_loading_mixins.scss
new file mode 100644
index 0000000000..2fe5d33376
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_skeleton_loading/_skeleton_loading_mixins.scss
@@ -0,0 +1,40 @@
+// Animation
+@keyframes wave {
+ 0% {
+ background-position: -468px 0;
+ }
+ 100% {
+ background-position: 468px 0;
+ }
+}
+
+// Shimmer animation and gradient mixin based on color
+@mixin skeleton-shimmer($color) {
+ background: $color;
+ background-color: $color;
+ background-image: linear-gradient(
+ to left,
+ $color 0%,
+ lighten($color, 1%) 50%,
+ lighten($color, 1%) 60%,
+ $color 80%,
+ $color 100%
+ );
+ background-repeat: no-repeat;
+ animation: wave 1.5s linear infinite forwards;
+}
+
+@mixin skeleton-shimmer-light($color) {
+ background: $color;
+ background-color: $color;
+ background-image: linear-gradient(
+ to left,
+ $color 0%,
+ darken($color, 1%) 50%,
+ darken($color, 1%) 60%,
+ $color 80%,
+ $color 100%
+ );
+ background-repeat: no-repeat;
+ animation: wave 1.5s linear infinite forwards;
+}
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.jsx b/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.jsx
new file mode 100644
index 0000000000..800685d00a
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.jsx
@@ -0,0 +1,51 @@
+import React from 'react'
+import { Flex, SkeletonLoading } from "playbook-ui"
+
+
+const SkeletonLoadingBorderRadius = (props) => (
+
+
+
+
+
+
+
+
+
+)
+
+export default SkeletonLoadingBorderRadius
diff --git a/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.md b/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.md
new file mode 100644
index 0000000000..52c493272c
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.md
@@ -0,0 +1 @@
+The `borderRadius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/visual_guidelines/border_radius) tokens, with `sm` as default.
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.jsx b/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.jsx
new file mode 100644
index 0000000000..82ad6d3323
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.jsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { Card, SkeletonLoading } from "playbook-ui"
+
+
+const SkeletonLoadingColor = (props) => (
+
+
+
+
+
+
+
+
+)
+
+export default SkeletonLoadingColor
diff --git a/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.md b/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.md
new file mode 100644
index 0000000000..1837383ba8
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.md
@@ -0,0 +1 @@
+The SkeletonLoading component has a default and a white `color` variant.
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.html.erb b/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.html.erb
new file mode 100644
index 0000000000..542c88de2a
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.html.erb
@@ -0,0 +1 @@
+<%= pb_rails("skeleton_loading") %>
diff --git a/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.jsx b/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.jsx
new file mode 100644
index 0000000000..71f7986e57
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { SkeletonLoading } from "playbook-ui"
+
+
+const SkeletonLoadingDefault = (props) => (
+
+
+
+)
+
+export default SkeletonLoadingDefault
diff --git a/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx b/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
new file mode 100644
index 0000000000..9760332ca3
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
@@ -0,0 +1,59 @@
+import React from 'react'
+import { Card, SkeletonLoading } from "playbook-ui"
+
+
+const SkeletonLoadingHeightWidth = (props) => (
+
+
+
+
+
+
+
+
+
+
+
+
+)
+
+export default SkeletonLoadingHeightWidth
diff --git a/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.md b/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.md
new file mode 100644
index 0000000000..12b931c066
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.md
@@ -0,0 +1,3 @@
+The `height` and `width` props accept pixel and percentage values. If using a percentage for `height`, the parent container must have a set height.
+
+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.
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.jsx b/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.jsx
new file mode 100644
index 0000000000..babb83e293
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.jsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { SkeletonLoading } from "playbook-ui"
+
+
+const SkeletonLoadingLayout = (props) => (
+
+
+
+
+)
+
+export default SkeletonLoadingLayout
diff --git a/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.md b/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.md
new file mode 100644
index 0000000000..11d2958cdc
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.md
@@ -0,0 +1,3 @@
+Use the `stack` and `gap` props in conjunction to layer multiple Skeleton loading bars on top of each other.
+
+`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.
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/example.yml b/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/example.yml
new file mode 100644
index 0000000000..df125288c6
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/example.yml
@@ -0,0 +1,13 @@
+examples:
+
+ rails:
+ # - skeleton_loading_default: Default
+
+
+ react:
+ - skeleton_loading_default: Default
+ - skeleton_loading_color: Color
+ - skeleton_loading_layout: Layout
+ - skeleton_loading_border_radius: Border Radius
+ - skeleton_loading_height_width: Height & Width
+
diff --git a/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/index.js b/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/index.js
new file mode 100644
index 0000000000..862e8b3742
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/index.js
@@ -0,0 +1,5 @@
+export { default as SkeletonLoadingDefault } from './_skeleton_loading_default.jsx'
+export { default as SkeletonLoadingColor } from './_skeleton_loading_color.jsx'
+export { default as SkeletonLoadingLayout } from './_skeleton_loading_layout.jsx'
+export { default as SkeletonLoadingBorderRadius } from './_skeleton_loading_border_radius.jsx'
+export { default as SkeletonLoadingHeightWidth } from './_skeleton_loading_height_width.jsx'
diff --git a/playbook/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.html.erb b/playbook/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.html.erb
new file mode 100644
index 0000000000..85230e2574
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.html.erb
@@ -0,0 +1,12 @@
+
+
+<%= pb_content_tag(
+ # :div,
+ # aria: object.aria,
+ # class: object.classname,
+ # data: object.data,
+ # id: object.id,
+ # **combined_html_options
+) do %>
+
SKELETON_LOADING CONTENT
+<% end %>
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.rb b/playbook/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.rb
new file mode 100644
index 0000000000..d91d02ea78
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.rb
@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Playbook
+ module PbSkeletonLoading
+ class SkeletonLoading < ::Playbook::KitBase
+ end
+ end
+end
diff --git a/playbook/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.test.jsx b/playbook/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.test.jsx
new file mode 100644
index 0000000000..57b7215622
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.test.jsx
@@ -0,0 +1,81 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { ensureAccessible } from '../utilities/test-utils'
+import { SkeletonLoading } from 'playbook-ui'
+
+/* See these resources for more testing info:
+ - https://github.com/testing-library/jest-dom#usage for useage and examples
+ - https://jestjs.io/docs/en/using-matchers
+*/
+
+describe('SkeletonLoading', () => {
+ const defaultProps = {
+ data: { testid: 'skeleton-loading' }
+ }
+
+ it('should be accessible', async () => {
+ ensureAccessible(SkeletonLoading, defaultProps)
+ })
+
+ it('renders with default props', () => {
+ const { container } = render(
)
+ const skeleton = screen.getByTestId('skeleton-loading')
+
+ expect(skeleton).toBeInTheDocument()
+ expect(skeleton).toHaveClass('pb_skeleton_loading')
+ expect(container.querySelectorAll('div[class*="border_radius_"]')).toHaveLength(1)
+ })
+
+ it('renders multiple skeleton items based on stack prop', () => {
+ const props = {
+ ...defaultProps,
+ stack: 3
+ }
+ const { container } = render(
)
+
+ expect(container.querySelectorAll('div[class*="border_radius_"]')).toHaveLength(3)
+ })
+
+ it('applies custom styles correctly', () => {
+ const props = {
+ ...defaultProps,
+ height: '24px',
+ width: '50%',
+ borderRadius: 'lg',
+ color: 'light',
+ dark: true
+ }
+ const { container } = render(
)
+ const skeletonItem = container.querySelector('div[class*="border_radius_"]')
+
+ expect(skeletonItem).toHaveClass('border_radius_lg')
+ expect(skeletonItem).toHaveClass('dark')
+ })
+
+ it('applies gap class to items after first one', () => {
+ const props = {
+ ...defaultProps,
+ stack: 3,
+ gap: 'md'
+ }
+ const { container } = render(
)
+ const skeletonItems = container.querySelectorAll('div[class*="border_radius_"]')
+
+ expect(skeletonItems[0]).not.toHaveClass('gap_md')
+ expect(skeletonItems[1]).toHaveClass('gap_md')
+ expect(skeletonItems[2]).toHaveClass('gap_md')
+ })
+
+ it('handles no gap properly', () => {
+ const props = {
+ ...defaultProps,
+ stack: 2,
+ gap: 'none'
+ }
+ const { container } = render(
)
+ const skeletonItems = container.querySelectorAll('div[class*="border_radius_"]')
+
+ expect(skeletonItems[0]).not.toHaveClass('gap_none')
+ expect(skeletonItems[1]).not.toHaveClass('gap_none')
+ })
+})
\ No newline at end of file
diff --git a/playbook/spec/pb_kits/playbook/kits/skeleton_loading_spec.rb b/playbook/spec/pb_kits/playbook/kits/skeleton_loading_spec.rb
new file mode 100644
index 0000000000..d755b171a2
--- /dev/null
+++ b/playbook/spec/pb_kits/playbook/kits/skeleton_loading_spec.rb
@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+# require_relative "../../../../app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading"
+
+# RSpec.describe Playbook::PbSkeleton_loading::Skeleton_loading do
+# subject { Playbook::PbSkeleton_loading::Skeleton_loading }
+
+# it { is_expected.to define_partial }
+
+# # Do not leave this file blank. Use other spec files for example tests.
+# end