Feat(web): Introduce Skeleton component #DS-1625

[katerinarehorkova]

Description

• New component Skeleton
• only web package implementation

Additional context

Issue reference

https://jira.almacareer.tech/browse/DS-1625

[netlify]

✅ Deploy Preview for spirit-design-system-storybook canceled.

Name	Link
🔨 Latest commit	22afb17
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system-storybook/deploys/67933ba88861d30008473454

[netlify]

✅ Deploy Preview for spirit-design-system ready!

Name	Link
🔨 Latest commit	22afb17
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system/deploys/67933ba85b68b90008436616
😎 Deploy Preview	https://deploy-preview-1863--spirit-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 96 (no change from production) Accessibility: 91 (no change from production) Best Practices: 100 (no change from production) SEO: 91 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[literat]

suggestion (blocking): I think this will be Heading and the class name will be Skeleton--heading. Because we have a Heading component and the same is the token name. https://spirit-design-system.netlify.app/packages/web/src/scss/helpers/typography/

[literat]

Okay, you have heading in the CSS, so it is not correct only in the examples.

[literat]

👏 Great, nice first PR and contribution to the Spirit Design System 🎉

When I switch the demo to the "Light on brand" theme, the animation and color are missing. I think that this should be the same as the default. But not sure. @crishpeen