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 <[email protected]>

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
+```

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;

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} />;
 }

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}} />
+        </>
+    );
+}