From bfbde83d327a1ed9e1420a2ade9e4095e242c593 Mon Sep 17 00:00:00 2001
From: Leon <31146334+ierehon1905@users.noreply.github.com>
Date: Fri, 25 Mar 2022 15:44:45 +0400
Subject: [PATCH] feat(Skeleton): inline styles (#116)

* feat: inline styles for skeleton + showcase

* docs: readme development

* fix: skeleton nice wave z-index

Co-authored-by: Leon Minasyan <leon-minasyan@yandex-team.ru>
---
 README.md                                          |  8 ++++++++
 src/components/Skeleton/Skeleton.scss              |  1 +
 src/components/Skeleton/Skeleton.tsx               | 11 +++++------
 .../Skeleton/__stories__/SkeletonShowcase.tsx      | 14 +++++++++++++-
 4 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index eb107b821d..20fff98aa1 100644
--- a/README.md
+++ b/README.md
@@ -16,3 +16,11 @@ import {Button} from '@yandex-cloud/uikit';
 
 const SubmitButton = <Button view="action" size="l" />;
 ```
+
+## Development
+
+To start the dev storybook
+
+```shell
+npm run start
+```
diff --git a/src/components/Skeleton/Skeleton.scss b/src/components/Skeleton/Skeleton.scss
index aa448747c5..65f880ca23 100644
--- a/src/components/Skeleton/Skeleton.scss
+++ b/src/components/Skeleton/Skeleton.scss
@@ -5,6 +5,7 @@ $block: '.#{$ns}skeleton';
 #{$block} {
     display: inline-block;
     position: relative;
+    z-index: 0;
     width: 100%;
     border-radius: 5px;
     overflow: hidden;
diff --git a/src/components/Skeleton/Skeleton.tsx b/src/components/Skeleton/Skeleton.tsx
index d9fba408cb..8881f25d58 100644
--- a/src/components/Skeleton/Skeleton.tsx
+++ b/src/components/Skeleton/Skeleton.tsx
@@ -1,14 +1,13 @@
-import React from 'react';
+import React, {HTMLAttributes} from 'react';
 import {block} from '../utils/cn';
 
 import './Skeleton.scss';
 
 const b = block('skeleton');
 
-export interface SkeletonProps {
-    className?: string;
-}
+export interface SkeletonProps
+    extends Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'style'> {}
 
-export function Skeleton({className}: SkeletonProps) {
-    return <div className={b(null, className)} />;
+export function Skeleton({className, style}: SkeletonProps) {
+    return <div className={b(null, className)} style={style} />;
 }
diff --git a/src/components/Skeleton/__stories__/SkeletonShowcase.tsx b/src/components/Skeleton/__stories__/SkeletonShowcase.tsx
index 5ebc98e2c0..a3deceabb9 100644
--- a/src/components/Skeleton/__stories__/SkeletonShowcase.tsx
+++ b/src/components/Skeleton/__stories__/SkeletonShowcase.tsx
@@ -40,7 +40,7 @@ const persons = [
     {name: 'Al Coholic', info: 'Somewhere', info2: 'DevOps'},
 ];
 
-export function SkeletonShowcase() {
+function SkeletonListShowcase() {
     const [listVisible, setListVisible] = React.useState(false);
     return (
         <div className={b()}>
@@ -60,3 +60,15 @@ export function SkeletonShowcase() {
         </div>
     );
 }
+
+export function SkeletonShowcase() {
+    return (
+        <>
+            <h1>Skeleton</h1>
+            <h2>List</h2>
+            <SkeletonListShowcase />
+            <h2>Styled with inline prop</h2>
+            <Skeleton style={{height: 100, width: 200}} />
+        </>
+    );
+}