@alfalab/core-components-list-header 3.0.13 → 3.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/Component.js +1 -1
  2. package/esm/Component.js +1 -1
  3. package/esm/index.css +4 -4
  4. package/index.css +4 -4
  5. package/modern/Component.js +1 -1
  6. package/modern/index.css +4 -4
  7. package/package.json +2 -2
  8. package/src/Component.tsx +53 -0
  9. package/src/index.module.css +18 -0
  10. package/src/index.ts +1 -0
package/Component.js CHANGED
@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
11
11
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
12
12
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
13
13
 
14
- var styles = {"component":"list-header__component_sfol8","description":"list-header__description_sfol8","filled":"list-header__filled_sfol8"};
14
+ var styles = {"component":"list-header__component_1e9qy","description":"list-header__description_1e9qy","filled":"list-header__filled_1e9qy"};
15
15
  require('./index.css')
16
16
 
17
17
  var ListHeader = function (_a) {
package/esm/Component.js CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import cn from 'classnames';
3
3
  import { Typography } from '@alfalab/core-components-typography/esm';
4
4
 
5
- var styles = {"component":"list-header__component_sfol8","description":"list-header__description_sfol8","filled":"list-header__filled_sfol8"};
5
+ var styles = {"component":"list-header__component_1e9qy","description":"list-header__description_1e9qy","filled":"list-header__filled_1e9qy"};
6
6
  require('./index.css')
7
7
 
8
8
  var ListHeader = function (_a) {
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 586n9 */
1
+ /* hash: 89ynl */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --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 @@
22
22
  } :root {
23
23
  } :root {
24
24
  --list-header-description-opacity: 0.6;
25
- } .list-header__component_sfol8 {
25
+ } .list-header__component_1e9qy {
26
26
  margin: var(--gap-xl) var(--gap-s-neg) var(--gap-m);
27
27
  padding: var(--gap-xs) var(--gap-s);
28
- } .list-header__description_sfol8 {
28
+ } .list-header__description_1e9qy {
29
29
  opacity: var(--list-header-description-opacity);
30
- } .list-header__filled_sfol8 {
30
+ } .list-header__filled_1e9qy {
31
31
  background-color: var(--color-light-specialbg-component);
32
32
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 586n9 */
1
+ /* hash: 89ynl */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --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 @@
22
22
  } :root {
23
23
  } :root {
24
24
  --list-header-description-opacity: 0.6;
25
- } .list-header__component_sfol8 {
25
+ } .list-header__component_1e9qy {
26
26
  margin: var(--gap-xl) var(--gap-s-neg) var(--gap-m);
27
27
  padding: var(--gap-xs) var(--gap-s);
28
- } .list-header__description_sfol8 {
28
+ } .list-header__description_1e9qy {
29
29
  opacity: var(--list-header-description-opacity);
30
- } .list-header__filled_sfol8 {
30
+ } .list-header__filled_1e9qy {
31
31
  background-color: var(--color-light-specialbg-component);
32
32
  }
package/modern/Component.js CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import cn from 'classnames';
3
3
  import { Typography } from '@alfalab/core-components-typography/modern';
4
4
 
5
- const styles = {"component":"list-header__component_sfol8","description":"list-header__description_sfol8","filled":"list-header__filled_sfol8"};
5
+ const styles = {"component":"list-header__component_1e9qy","description":"list-header__description_1e9qy","filled":"list-header__filled_1e9qy"};
6
6
  require('./index.css')
7
7
 
8
8
  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 CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 586n9 */
1
+ /* hash: 89ynl */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --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 @@
22
22
  } :root {
23
23
  } :root {
24
24
  --list-header-description-opacity: 0.6;
25
- } .list-header__component_sfol8 {
25
+ } .list-header__component_1e9qy {
26
26
  margin: var(--gap-xl) var(--gap-s-neg) var(--gap-m);
27
27
  padding: var(--gap-xs) var(--gap-s);
28
- } .list-header__description_sfol8 {
28
+ } .list-header__description_1e9qy {
29
29
  opacity: var(--list-header-description-opacity);
30
- } .list-header__filled_sfol8 {
30
+ } .list-header__filled_1e9qy {
31
31
  background-color: var(--color-light-specialbg-component);
32
32
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-list-header",
3
- "version": "3.0.13",
3
+ "version": "3.1.1",
4
4
  "description": "ListHeader component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -11,7 +11,7 @@
11
11
  "directory": "dist"
12
12
  },
13
13
  "dependencies": {
14
- "@alfalab/core-components-typography": "^3.2.2",
14
+ "@alfalab/core-components-typography": "^4.1.0",
15
15
  "classnames": "^2.3.1",
16
16
  "tslib": "^2.4.0"
17
17
  },
package/src/Component.tsx ADDED
@@ -0,0 +1,53 @@
1
+ import React from 'react';
2
+ import cn from 'classnames';
3
+
4
+ import { Typography } from '@alfalab/core-components-typography';
5
+
6
+ import styles from './index.module.css';
7
+
8
+ export type ListHeaderProps = {
9
+ /**
10
+ * Заголовок
11
+ */
12
+ title: string;
13
+
14
+ /**
15
+ * Дополнительное описание
16
+ */
17
+ description?: string;
18
+
19
+ /**
20
+ * Наличие фоновой подложки
21
+ */
22
+ filled?: boolean;
23
+
24
+ /**
25
+ * Дополнительный класс
26
+ */
27
+ className?: string;
28
+
29
+ /**
30
+ * Идентификатор для систем автоматизированного тестирования
31
+ */
32
+ dataTestId?: string;
33
+ };
34
+
35
+ export const ListHeader: React.FC<ListHeaderProps> = ({
36
+ title,
37
+ description,
38
+ filled = true,
39
+ className,
40
+ dataTestId,
41
+ }) => (
42
+ <div
43
+ data-test-id={dataTestId}
44
+ className={cn(styles.component, { [styles.filled]: filled }, className)}
45
+ >
46
+ <Typography.Text view='secondary-large'>{title}</Typography.Text>
47
+ {description && (
48
+ <Typography.Text view='secondary-large' className={cn(styles.description)}>
49
+ {`, ${description}`}
50
+ </Typography.Text>
51
+ )}
52
+ </div>
53
+ );
package/src/index.module.css ADDED
@@ -0,0 +1,18 @@
1
+ @import '@alfalab/core-components-themes/src/default.css';
2
+
3
+ :root {
4
+ --list-header-description-opacity: 0.6;
5
+ }
6
+
7
+ .component {
8
+ margin: var(--gap-xl) var(--gap-s-neg) var(--gap-m);
9
+ padding: var(--gap-xs) var(--gap-s);
10
+ }
11
+
12
+ .description {
13
+ opacity: var(--list-header-description-opacity);
14
+ }
15
+
16
+ .filled {
17
+ background-color: var(--color-light-specialbg-component);
18
+ }
package/src/index.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './Component';