@sats-group/ui-lib 75.6.0 → 75.8.0
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.
package/package.json
CHANGED
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sats-group/ui-lib",
|
|
3
|
-
"version": "75.
|
|
3
|
+
"version": "75.8.0",
|
|
4
4
|
"description": "SATS web user interface library",
|
|
5
5
|
"engines": {
|
|
6
6
|
"node": "^18 || ^20",
|
|
7
7
|
"npm": "^8 || ^9 || ^10"
|
|
8
8
|
},
|
|
9
9
|
"scripts": {
|
|
10
|
-
"build": "run-s clean logos typecheck colour",
|
|
10
|
+
"build": "run-s clean logos typecheck colour components",
|
|
11
11
|
"clean": "node rimraf.mjs",
|
|
12
12
|
"colour": "node codegen/colours.mjs",
|
|
13
|
+
"components": "node codegen/components.mjs",
|
|
13
14
|
"dev": "npm run dev --workspace=site",
|
|
14
15
|
"lint": "eslint",
|
|
15
16
|
"lint:ci": "eslint --max-warnings 0",
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
export const names = [
|
|
2
|
+
'badge',
|
|
3
|
+
'banner',
|
|
4
|
+
'bomb',
|
|
5
|
+
'button',
|
|
6
|
+
'checkbox',
|
|
7
|
+
'chip',
|
|
8
|
+
'chip-selected',
|
|
9
|
+
'collapse',
|
|
10
|
+
'confirmation',
|
|
11
|
+
'context-menu',
|
|
12
|
+
'cropped-image',
|
|
13
|
+
'dropdown-list',
|
|
14
|
+
'expander',
|
|
15
|
+
'filter',
|
|
16
|
+
'filter-wrapper',
|
|
17
|
+
'flag',
|
|
18
|
+
'form-content',
|
|
19
|
+
'hidden-input',
|
|
20
|
+
'link',
|
|
21
|
+
'link-button',
|
|
22
|
+
'link-card',
|
|
23
|
+
'message',
|
|
24
|
+
'message-field',
|
|
25
|
+
'modal',
|
|
26
|
+
'progress-bar',
|
|
27
|
+
'radio',
|
|
28
|
+
'scale-bar',
|
|
29
|
+
'search',
|
|
30
|
+
'select',
|
|
31
|
+
'select-option',
|
|
32
|
+
'tag',
|
|
33
|
+
'text',
|
|
34
|
+
'text-area',
|
|
35
|
+
'text-input',
|
|
36
|
+
'toggle',
|
|
37
|
+
'toolbox',
|
|
38
|
+
'visually-button',
|
|
39
|
+
'visually-hidden',
|
|
40
|
+
];
|
|
41
|
+
|
|
42
|
+
export const selectors = [
|
|
43
|
+
'.badge',
|
|
44
|
+
'.banner',
|
|
45
|
+
'.bomb',
|
|
46
|
+
'.button',
|
|
47
|
+
'.checkbox',
|
|
48
|
+
'.chip',
|
|
49
|
+
'.chip-selected',
|
|
50
|
+
'.collapse',
|
|
51
|
+
'.confirmation',
|
|
52
|
+
'.context-menu',
|
|
53
|
+
'.cropped-image',
|
|
54
|
+
'.dropdown-list',
|
|
55
|
+
'.expander',
|
|
56
|
+
'.filter',
|
|
57
|
+
'.filter-wrapper',
|
|
58
|
+
'.flag',
|
|
59
|
+
'.form-content',
|
|
60
|
+
'.hidden-input',
|
|
61
|
+
'.link',
|
|
62
|
+
'.link-button',
|
|
63
|
+
'.link-card',
|
|
64
|
+
'.message',
|
|
65
|
+
'.message-field',
|
|
66
|
+
'.modal',
|
|
67
|
+
'.progress-bar',
|
|
68
|
+
'.radio',
|
|
69
|
+
'.scale-bar',
|
|
70
|
+
'.search',
|
|
71
|
+
'.select',
|
|
72
|
+
'.select-option',
|
|
73
|
+
'.tag',
|
|
74
|
+
'.text',
|
|
75
|
+
'.text-area',
|
|
76
|
+
'.text-input',
|
|
77
|
+
'.toggle',
|
|
78
|
+
'.toolbox',
|
|
79
|
+
'.visually-button',
|
|
80
|
+
'.visually-hidden',
|
|
81
|
+
];
|
|
@@ -71,7 +71,11 @@
|
|
|
71
71
|
border-top: 1px solid light.$ge-divider-default;
|
|
72
72
|
display: grid;
|
|
73
73
|
gap: spacing.$m;
|
|
74
|
-
padding: 20px;
|
|
74
|
+
padding: 20px;
|
|
75
|
+
|
|
76
|
+
&--list {
|
|
77
|
+
padding: 0;
|
|
78
|
+
}
|
|
75
79
|
|
|
76
80
|
@media (min-resolution: 2dppx) {
|
|
77
81
|
border-bottom-width: 0.5px;
|
|
@@ -5,7 +5,7 @@ import ArrowDown from '../icons/24/arrow-down';
|
|
|
5
5
|
import LinkButton from '../link-button';
|
|
6
6
|
import Text from '../text';
|
|
7
7
|
|
|
8
|
-
import type
|
|
8
|
+
import { type Expander as Props } from './expander.types';
|
|
9
9
|
import Badge from '../badge';
|
|
10
10
|
import { Types } from '../badge/badge.types';
|
|
11
11
|
import Link from '../link';
|
|
@@ -15,6 +15,7 @@ const ExpanderListItem: React.FC<
|
|
|
15
15
|
React.PropsWithChildren<Props<unknown>['items'][number]['listItemProps']>
|
|
16
16
|
> = ({
|
|
17
17
|
actions,
|
|
18
|
+
contentType = 'article',
|
|
18
19
|
defaultOpen = false,
|
|
19
20
|
faq,
|
|
20
21
|
icon,
|
|
@@ -74,7 +75,9 @@ const ExpanderListItem: React.FC<
|
|
|
74
75
|
>
|
|
75
76
|
<Collapse isOpen={isOpen}>
|
|
76
77
|
<div
|
|
77
|
-
className=
|
|
78
|
+
className={cn('expander__content', {
|
|
79
|
+
[`expander__content--${contentType}`]: contentType,
|
|
80
|
+
})}
|
|
78
81
|
itemScope={faq ? faq : undefined}
|
|
79
82
|
itemProp={faq ? 'acceptedAnswer' : undefined}
|
|
80
83
|
itemType={faq ? 'https://schema.org/Answer' : undefined}
|
|
@@ -2,9 +2,16 @@ import type { ReactNode } from 'react';
|
|
|
2
2
|
|
|
3
3
|
import type { Link } from '../link/link.types';
|
|
4
4
|
import type { LinkButton } from '../link-button/link-button.types';
|
|
5
|
+
import { ObjectValues } from '../types';
|
|
6
|
+
|
|
7
|
+
export const contentTypes = {
|
|
8
|
+
article: 'article',
|
|
9
|
+
list: 'list',
|
|
10
|
+
} as const;
|
|
5
11
|
|
|
6
12
|
type ExpanderListItem = {
|
|
7
13
|
actions: LinkButton[];
|
|
14
|
+
contentType?: ObjectValues<typeof contentTypes>;
|
|
8
15
|
defaultOpen?: boolean;
|
|
9
16
|
faq?: boolean;
|
|
10
17
|
icon?: ReactNode;
|