feat(core-components-skeleton): adds a new component

core-ds · Sep 15, 2020 · 11e6ce9 · 11e6ce9
1 parent 6459eb4
commit 11e6ce9
Show file tree

Hide file tree

Showing 9 changed files with 523 additions and 0 deletions.
diff --git a/packages/skeleton/package.json b/packages/skeleton/package.json
@@ -0,0 +1,19 @@
+{
+    "name": "@alfalab/core-components-skeleton",
+    "version": "1.0.0",
+    "description": "Skeleton component",
+    "keywords": [],
+    "license": "ISC",
+    "main": "dist/index.js",
+    "files": [
+        "dist"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "peerDependencies": {
+        "classnames": "^2.2.6",
+        "react": "^16.9.0",
+        "react-dom": "^16.9.0"
+    }
+}
diff --git a/packages/skeleton/src/Component.stories.mdx b/packages/skeleton/src/Component.stories.mdx
@@ -0,0 +1,88 @@
+import { text, boolean } from '@storybook/addon-knobs';
+import { Meta, Story, Preview, Props, Description, Title } from '@storybook/addon-docs/blocks';
+import { Container, Row, Col } from 'storybook/blocks/grid';
+
+import { Skeleton } from '.';
+import { name, version } from '../package.json';
+import { Typography } from '../../typography/src';
+import styles from './stories.module.css';
+
+<Meta title='Компоненты|Skeleton' component={Skeleton} />
+
+<Title>
+    Skeleton ({name}@{version})
+</Title>
+
+```tsx
+import { Skeleton } from '@alfalab/core-components-skeleton';
+```
+## Описание
+
+Компонент Skeleton.
+
+<Story name='Песочница'>
+    {React.createElement(() => {
+        return (
+            <Skeleton
+                visible={ boolean('visible', true) }
+                className={ text('className', '') }
+                dataTestId={ text('dataTestId', '') }
+                animate={ boolean('animate', true) }
+            >
+                <img
+                    width={ 150 }
+                    height={ 150 }
+                    alt="фижур"
+                    src="https://rawgit.com/alfa-laboratory/arui-feather/master/logo.svg"
+                />
+            </Skeleton>
+        );
+    })}
+</Story>
+
+<Props of={Skeleton} />
+
+## Использование
+<br/>
+- с контентом (border-radius: 60px)
+
+<Preview>
+    <Container>
+        <Skeleton
+            visible={true}
+            animate={true}
+            className={styles['example-1']}
+        >
+            Заголовок
+        </Skeleton>
+        <Skeleton
+            visible={true}
+            animate={true}
+            className={styles['example-1']}
+        >
+            Какой-то текст
+        </Skeleton>
+        <Skeleton
+            visible={true}
+            animate={true}
+            className={styles['example-1']}
+        >
+            <Typography.Text view='primary-large' tag='tag'>Какой-то текст</Typography.Text>
+        </Skeleton>
+    </Container>
+</Preview>
+
+<br/>
+- с заданными размерами
+
+<Preview>
+    <Container>
+        <div className={styles.wrapper}>
+            <Skeleton className={styles['example-2']} visible={true} />
+            <Skeleton className={styles['example-3']} visible={true} />
+            <Skeleton className={styles['example-4']} visible={true} />
+            <Skeleton className={styles['example-5']} visible={true} />
+            <Skeleton className={styles['example-6']} visible={true} />
+        </div>
+    </Container>
+</Preview>
diff --git a/packages/skeleton/src/Component.test.tsx b/packages/skeleton/src/Component.test.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { Skeleton } from '.';
+
+describe('Skeleton', () => {
+    describe('Snapshots tests', () => {
+        it('should display', () => {
+            expect(render(<Skeleton visible={true} />)).toMatchSnapshot();
+        });
+
+        it('should not display', () => {
+            expect(render(<Skeleton />)).toMatchSnapshot();
+        });
+
+        it('should use a children', () => {
+            const text = 'text';
+            expect(render(<Skeleton>{text}</Skeleton>)).toMatchSnapshot();
+        });
+    });
+
+    describe('Attributes tests', () => {
+        it('should set `data-test-id` atribute', () => {
+            const dataTestId = 'test-id';
+            const { container } = render(<Skeleton visible={true} dataTestId={dataTestId} />);
+
+            const testIdAttr = container.firstElementChild?.getAttribute('data-test-id');
+
+            expect(testIdAttr).toBe(dataTestId);
+        });
+    });
+
+    describe('Classes tests', () => {
+        it('should set `className` class', () => {
+            const className = 'test-class';
+            const { container } = render(<Skeleton visible={true} className={className} />);
+
+            expect(container.firstElementChild).toHaveClass(className);
+        });
+        it('should set `animate` class', () => {
+            const className = 'animate';
+            const { container } = render(<Skeleton visible={true} animate={true} />);
+
+            expect(container.firstElementChild).toHaveClass(className);
+        });
+    });
+});
diff --git a/packages/skeleton/src/Component.tsx b/packages/skeleton/src/Component.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import cn from 'classnames';
+
+import styles from './index.module.css';
+
+export type SkeletonProps = {
+    /**
+     * Флаг, явно задающий состояние, при котором контент закрывается прелоадером
+     */
+    visible?: boolean;
+    /**
+     * Флаг явного включения анимации скелета
+     */
+    animate?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+
+export const Skeleton: React.FC<SkeletonProps> = ({
+    visible,
+    animate = true,
+    className,
+    dataTestId,
+    children,
+}) => {
+    if (visible) {
+        return (
+            <div
+                className={cn(styles.component, { [styles.animate]: animate }, className)}
+                data-test-id={dataTestId}
+            >
+                {children}
+            </div>
+        );
+    }
+
+    return <React.Fragment>{children}</React.Fragment>;
+};
diff --git a/packages/skeleton/src/__snapshots__/Component.test.tsx.snap b/packages/skeleton/src/__snapshots__/Component.test.tsx.snap
@@ -0,0 +1,196 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Skeleton Snapshots tests should display 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="component animate"
+      />
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="component animate"
+    />
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`Skeleton Snapshots tests should not display 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div />
+  </body>,
+  "container": <div />,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`Skeleton Snapshots tests should use a children 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      text
+    </div>
+  </body>,
+  "container": <div>
+    text
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;