@alfalab/core-components-list-header 3.0.12 → 3.1.0

package/Component.js

@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"list-header__component_u00xm","description":"list-header__description_u00xm","filled":"list-header__filled_u00xm"};
+var styles = {"component":"list-header__component_jw48a","description":"list-header__description_jw48a","filled":"list-header__filled_jw48a"};
 require('./index.css')
 
 var ListHeader = function (_a) {

package/esm/Component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { Typography } from '@alfalab/core-components-typography/esm';
 
-var styles = {"component":"list-header__component_u00xm","description":"list-header__description_u00xm","filled":"list-header__filled_u00xm"};
+var styles = {"component":"list-header__component_jw48a","description":"list-header__description_jw48a","filled":"list-header__filled_jw48a"};
 require('./index.css')
 
 var ListHeader = function (_a) {

package/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1ij16 */
+/* hash: gnxpo */
 :root {
 } /* deprecated */ :root {
     --color-light-specialbg-component: rgba(11, 31, 53, 0.07); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -22,11 +22,11 @@
 } :root {
 } :root {
     --list-header-description-opacity: 0.6;
-} .list-header__component_u00xm {
+} .list-header__component_jw48a {
     margin: var(--gap-xl) var(--gap-s-neg) var(--gap-m);
     padding: var(--gap-xs) var(--gap-s);
-} .list-header__description_u00xm {
+} .list-header__description_jw48a {
     opacity: var(--list-header-description-opacity);
-} .list-header__filled_u00xm {
+} .list-header__filled_jw48a {
     background-color: var(--color-light-specialbg-component);
 }

package/index.css

@@ -1,4 +1,4 @@
-/* hash: 1ij16 */
+/* hash: gnxpo */
 :root {
 } /* deprecated */ :root {
     --color-light-specialbg-component: rgba(11, 31, 53, 0.07); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -22,11 +22,11 @@
 } :root {
 } :root {
     --list-header-description-opacity: 0.6;
-} .list-header__component_u00xm {
+} .list-header__component_jw48a {
     margin: var(--gap-xl) var(--gap-s-neg) var(--gap-m);
     padding: var(--gap-xs) var(--gap-s);
-} .list-header__description_u00xm {
+} .list-header__description_jw48a {
     opacity: var(--list-header-description-opacity);
-} .list-header__filled_u00xm {
+} .list-header__filled_jw48a {
     background-color: var(--color-light-specialbg-component);
 }

package/modern/Component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { Typography } from '@alfalab/core-components-typography/modern';
 
-const styles = {"component":"list-header__component_u00xm","description":"list-header__description_u00xm","filled":"list-header__filled_u00xm"};
+const styles = {"component":"list-header__component_jw48a","description":"list-header__description_jw48a","filled":"list-header__filled_jw48a"};
 require('./index.css')
 
 const ListHeader = ({ title, description, filled = true, className, dataTestId, }) => (React.createElement("div", { "data-test-id": dataTestId, className: cn(styles.component, { [styles.filled]: filled }, className) },

package/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1ij16 */
+/* hash: gnxpo */
 :root {
 } /* deprecated */ :root {
     --color-light-specialbg-component: rgba(11, 31, 53, 0.07); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -22,11 +22,11 @@
 } :root {
 } :root {
     --list-header-description-opacity: 0.6;
-} .list-header__component_u00xm {
+} .list-header__component_jw48a {
     margin: var(--gap-xl) var(--gap-s-neg) var(--gap-m);
     padding: var(--gap-xs) var(--gap-s);
-} .list-header__description_u00xm {
+} .list-header__description_jw48a {
     opacity: var(--list-header-description-opacity);
-} .list-header__filled_u00xm {
+} .list-header__filled_jw48a {
     background-color: var(--color-light-specialbg-component);
 }

package/package.json

@@ -1,20 +1,17 @@
 {
     "name": "@alfalab/core-components-list-header",
-    "version": "3.0.12",
+    "version": "3.1.0",
     "description": "ListHeader component",
     "keywords": [],
     "license": "MIT",
     "main": "index.js",
     "module": "./esm/index.js",
-    "scripts": {
-        "postinstall": "node -e \"if (require('fs').existsSync('./send-stats.js')){require('./send-stats.js')} \""
-    },
     "publishConfig": {
         "access": "public",
         "directory": "dist"
     },
     "dependencies": {
-        "@alfalab/core-components-typography": "^3.2.1",
+        "@alfalab/core-components-typography": "^4.0.0",
         "classnames": "^2.3.1",
         "tslib": "^2.4.0"
     },

package/src/Component.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import cn from 'classnames';
+
+import { Typography } from '@alfalab/core-components-typography';
+
+import styles from './index.module.css';
+
+export type ListHeaderProps = {
+    /**
+     * Заголовок
+     */
+    title: string;
+
+    /**
+     * Дополнительное описание
+     */
+    description?: string;
+
+    /**
+     * Наличие фоновой подложки
+     */
+    filled?: boolean;
+
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+
+export const ListHeader: React.FC<ListHeaderProps> = ({
+    title,
+    description,
+    filled = true,
+    className,
+    dataTestId,
+}) => (
+    <div
+        data-test-id={dataTestId}
+        className={cn(styles.component, { [styles.filled]: filled }, className)}
+    >
+        <Typography.Text view='secondary-large'>{title}</Typography.Text>
+        {description && (
+            <Typography.Text view='secondary-large' className={cn(styles.description)}>
+                {`, ${description}`}
+            </Typography.Text>
+        )}
+    </div>
+);

package/src/index.module.css

@@ -0,0 +1,18 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+:root {
+    --list-header-description-opacity: 0.6;
+}
+
+.component {
+    margin: var(--gap-xl) var(--gap-s-neg) var(--gap-m);
+    padding: var(--gap-xs) var(--gap-s);
+}
+
+.description {
+    opacity: var(--list-header-description-opacity);
+}
+
+.filled {
+    background-color: var(--color-light-specialbg-component);
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './Component';

package/send-stats.js

@@ -1,82 +0,0 @@
-const http = require('http');
-const fs = require('fs');
-const { promisify } = require('util');
-const path = require('path');
-
-const readFile = promisify(fs.readFile);
-
-async function main() {
-    const remoteHost = process.env.NIS_HOST || 'digital';
-    const remotePort = process.env.NIS_PORT || 80;
-    const remotePath = process.env.NIS_PATH || '/npm-install-stats/api/install-stats';
-
-    try {
-        const [_, node, os, arch] =
-            /node\/v(\d+\.\d+\.\d+) (\w+) (\w+)/.exec(process.env.npm_config_user_agent) || [];
-        const [__, npm] = /npm\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
-        const [___, yarn] = /yarn\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
-
-        let ownPackageJson, packageJson;
-
-        try {
-            const result = await Promise.all([
-                readFile(path.join(process.cwd(), 'package.json'), 'utf-8'),
-                readFile(path.join(process.cwd(), '../../../package.json'), 'utf-8'),
-            ]);
-
-            ownPackageJson = JSON.parse(result[0]);
-            packageJson = JSON.parse(result[1]);
-        } catch (err) {
-            ownPackageJson = '';
-            packageJson = '';
-        }
-
-        const data = {
-            node,
-            npm,
-            yarn,
-            os,
-            arch,
-            ownPackageJson: JSON.stringify(ownPackageJson),
-            packageJson: JSON.stringify(packageJson),
-        };
-
-        const body = JSON.stringify(data);
-
-        const options = {
-            host: remoteHost,
-            port: remotePort,
-            path: remotePath,
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'Content-Length': body.length,
-            },
-        };
-
-        return new Promise((resolve, reject) => {
-            const req = http.request(options, (res) => {
-                res.on('end', () => {
-                    resolve();
-                });
-            });
-
-            req.on('error', () => {
-                reject();
-            });
-
-            req.write(body);
-            req.end();
-        });
-    } catch (error) {
-        throw error;
-    }
-}
-
-main()
-    .then(() => {
-        process.exit(0);
-    })
-    .catch(() => {
-        process.exit(0);
-    });