SUR-255 Implement Skeleton component

[JelenaTakac]

Description

Skeleton Component Documentation

Description

The Skeleton component can be used as an alternative loading indicator to the spinner by mimicking the content that will be loaded such as text, images, or video.

Props

variant

• Type: string
• Default: "rectengular"
• Description: Defines the style variant of the skeleton. Options include:
  • "rectengular"
  • "circular"

className

• Type: string
• Description: Additional custom classes to be added to the skeleton component, allowing for further customization with Tailwind CSS.

Usage

Basic Example

import { Skeleton } from '@bsf/force-ui';

const App = () => (
    <div>
        {/* Rectangular skeleton representing a text block */}
        <Skeleton variant="rectangular" className="w-full h-4" />
        {/* Circular skeleton representing an avatar */}
        <Skeleton variant="circular" className="w-10 h-10 " />
        {/* Rectangular skeleton representing a image or video*/}
        <Skeleton variant="rectangular" className="w-64 h-12" />
    </div>
);

export default App;

Screenshots

Types of changes

How has this been tested?

Checklist:

• My code is tested
• My code passes the PHPCS tests
• I've created the npm build.
• My code follows accessibility standards
• My code has proper inline documentation
• I've included any necessary tests
• I've included developer documentation
• I've added proper labels to this pull request