@snack-uikit/accordion 0.4.1 → 0.5.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.
- package/CHANGELOG.md +23 -0
- package/README.md +16 -17
- package/dist/components/AccordionPrimary/AccordionPrimary.d.ts +0 -3
- package/dist/components/AccordionPrimary/AccordionPrimary.js +0 -2
- package/dist/components/AccordionSecondary/AccordionSecondary.d.ts +0 -3
- package/dist/components/AccordionSecondary/AccordionSecondary.js +0 -2
- package/dist/components/CollapseBlockPrimary/CollapseBlockPrimary.js +1 -1
- package/dist/components/CollapseBlockSecondary/CollapseBlockSecondary.js +1 -1
- package/dist/constants.d.ts +4 -0
- package/dist/constants.js +4 -0
- package/dist/helperComponents/Accordion/Accordion.js +2 -2
- package/dist/helperComponents/CollapseBlockHeader/CollapseBlockHeader.js +1 -1
- package/dist/helperComponents/CollapseBlockHeaderContainer/CollapseBlockHeaderContainer.js +1 -1
- package/dist/helperComponents/CollapseBlockPrivate/CollapseBlockPrivate.js +1 -1
- package/dist/types.d.ts +3 -3
- package/package.json +9 -9
- package/src/components/AccordionPrimary/AccordionPrimary.tsx +0 -4
- package/src/components/AccordionSecondary/AccordionSecondary.tsx +0 -4
- package/src/constants.ts +4 -0
- package/src/helperComponents/Accordion/Accordion.tsx +1 -1
- package/src/helperComponents/CollapseBlockHeader/CollapseBlockHeader.tsx +1 -1
- package/src/helperComponents/CollapseBlockHeaderContainer/CollapseBlockHeaderContainer.tsx +1 -1
- package/src/types.ts +4 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,29 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## 0.5.1 (2023-12-14)
|
|
7
|
+
|
|
8
|
+
### Only dependencies have been changed
|
|
9
|
+
* [@snack-uikit/icons@0.19.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/icons/CHANGELOG.md)
|
|
10
|
+
* [@snack-uikit/toggles@0.9.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/toggles/CHANGELOG.md)
|
|
11
|
+
* [@snack-uikit/tooltip@0.10.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/tooltip/CHANGELOG.md)
|
|
12
|
+
* [@snack-uikit/truncate-string@0.4.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/truncate-string/CHANGELOG.md)
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
# 0.5.0 (2023-12-14)
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
### BREAKING CHANGES
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
* **FF-3729:** replace enum with unions ([910db4a](https://github.com/cloud-ru-tech/snack-uikit/commit/910db4aa8231ccbc58e538e5c5c1f461b1dec275))
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
6
29
|
## 0.4.1 (2023-12-06)
|
|
7
30
|
|
|
8
31
|
### Only dependencies have been changed
|
package/README.md
CHANGED
|
@@ -7,25 +7,24 @@
|
|
|
7
7
|
|
|
8
8
|
## Example
|
|
9
9
|
|
|
10
|
-
```
|
|
10
|
+
```tsx
|
|
11
|
+
import { AccordionPrimary } from '@snack-uikit/accordion'
|
|
11
12
|
|
|
12
|
-
|
|
13
|
+
function Example() {
|
|
13
14
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
// ...some actions
|
|
15
|
+
// ...some actions
|
|
17
16
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
17
|
+
return (
|
|
18
|
+
<AccordionPrimary >
|
|
19
|
+
<AccordionPrimary.CollapseBlock title={title} description={description} actions={actions}>
|
|
20
|
+
<Content />
|
|
21
|
+
</AccordionPrimary.CollapseBlock>
|
|
23
22
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
23
|
+
<AccordionPrimary.CollapseBlock title={title} description={description} actions={actions}>
|
|
24
|
+
<Content />
|
|
25
|
+
</AccordionPrimary.CollapseBlock>
|
|
26
|
+
</AccordionPrimary>
|
|
27
|
+
)}
|
|
29
28
|
```
|
|
30
29
|
|
|
31
30
|
|
|
@@ -41,7 +40,7 @@
|
|
|
41
40
|
| expandedDefault | `string \| string[]` | - | Начальное состояние |
|
|
42
41
|
| expanded | `string \| string[]` | - | Controlled состояние |
|
|
43
42
|
| onExpandedChange | `((value: string) => void) \| ((value: string[]) => void)` | - | Controlled обработчик измения состояния |
|
|
44
|
-
| selectionMode |
|
|
43
|
+
| selectionMode | "single" \| "multiple" | - | Режим работы аккордиона |
|
|
45
44
|
## AccordionSecondary
|
|
46
45
|
### Props
|
|
47
46
|
| name | type | default value | description |
|
|
@@ -51,7 +50,7 @@
|
|
|
51
50
|
| expandedDefault | `string \| string[]` | - | Начальное состояние |
|
|
52
51
|
| expanded | `string \| string[]` | - | Controlled состояние |
|
|
53
52
|
| onExpandedChange | `((value: string) => void) \| ((value: string[]) => void)` | - | Controlled обработчик измения состояния |
|
|
54
|
-
| selectionMode |
|
|
53
|
+
| selectionMode | "single" \| "multiple" | - | Режим работы аккордиона |
|
|
55
54
|
|
|
56
55
|
|
|
57
56
|
[//]: DOCUMENTATION_SECTION_END
|
|
@@ -1,5 +1,2 @@
|
|
|
1
1
|
import { AccordionProps } from '../../types';
|
|
2
2
|
export declare function AccordionPrimary({ className, ...rest }: AccordionProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
-
export declare namespace AccordionPrimary {
|
|
4
|
-
var selectionModes: typeof import("@snack-uikit/toggles/dist/constants").SelectionMode;
|
|
5
|
-
}
|
|
@@ -11,11 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
13
|
import cn from 'classnames';
|
|
14
|
-
import { ToggleGroup } from '@snack-uikit/toggles';
|
|
15
14
|
import { Accordion } from '../../helperComponents';
|
|
16
15
|
import styles from './styles.module.css';
|
|
17
16
|
export function AccordionPrimary(_a) {
|
|
18
17
|
var { className } = _a, rest = __rest(_a, ["className"]);
|
|
19
18
|
return _jsx(Accordion, Object.assign({ className: cn(styles.accordionPrimary, className) }, rest));
|
|
20
19
|
}
|
|
21
|
-
AccordionPrimary.selectionModes = ToggleGroup.selectionModes;
|
|
@@ -1,5 +1,2 @@
|
|
|
1
1
|
import { AccordionProps } from '../../types';
|
|
2
2
|
export declare function AccordionSecondary({ className, ...rest }: AccordionProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
-
export declare namespace AccordionSecondary {
|
|
4
|
-
var selectionModes: typeof import("@snack-uikit/toggles/dist/constants").SelectionMode;
|
|
5
|
-
}
|
|
@@ -11,11 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
13
|
import cn from 'classnames';
|
|
14
|
-
import { ToggleGroup } from '@snack-uikit/toggles';
|
|
15
14
|
import { Accordion } from '../../helperComponents';
|
|
16
15
|
import styles from './styles.module.css';
|
|
17
16
|
export function AccordionSecondary(_a) {
|
|
18
17
|
var { className } = _a, rest = __rest(_a, ["className"]);
|
|
19
18
|
return _jsx(Accordion, Object.assign({ className: cn(styles.accordionSecondary, className) }, rest));
|
|
20
19
|
}
|
|
21
|
-
AccordionSecondary.selectionModes = ToggleGroup.selectionModes;
|
|
@@ -18,5 +18,5 @@ import styles from './styles.module.css';
|
|
|
18
18
|
export function CollapseBlockPrimary(_a) {
|
|
19
19
|
var { id, header, children, actions, className } = _a, rest = __rest(_a, ["id", "header", "children", "actions", "className"]);
|
|
20
20
|
const { isChecked: isExpanded, handleClick: handleExpandedChange } = useToggleGroup({ value: id });
|
|
21
|
-
return (_jsx(CollapseBlockPrivate, Object.assign({ className: cn(styles.container, className), header: _jsx(CollapseBlockHeaderContainer,
|
|
21
|
+
return (_jsx(CollapseBlockPrivate, Object.assign({ className: cn(styles.container, className), header: _jsx(CollapseBlockHeaderContainer, { expanded: isExpanded, toggleExpanded: handleExpandedChange, actions: actions, children: header }), expanded: isExpanded }, extractSupportProps(rest), { children: children })));
|
|
22
22
|
}
|
|
@@ -18,5 +18,5 @@ import styles from './styles.module.css';
|
|
|
18
18
|
export function CollapseBlockSecondary(_a) {
|
|
19
19
|
var { header, children, id, actions, className } = _a, rest = __rest(_a, ["header", "children", "id", "actions", "className"]);
|
|
20
20
|
const { isChecked: isExpanded, handleClick: handleExpandedChange } = useToggleGroup({ value: id });
|
|
21
|
-
return (_jsx(CollapseBlockPrivate, Object.assign({ className: cn(styles.container, className), header: _jsx(CollapseBlockHeaderContainer,
|
|
21
|
+
return (_jsx(CollapseBlockPrivate, Object.assign({ className: cn(styles.container, className), header: _jsx(CollapseBlockHeaderContainer, { expanded: isExpanded, toggleExpanded: handleExpandedChange, actions: actions, children: header }), expanded: isExpanded }, extractSupportProps(rest), { children: children })));
|
|
22
22
|
}
|
|
@@ -13,9 +13,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
13
13
|
import { ToggleGroup } from '@snack-uikit/toggles';
|
|
14
14
|
import { extractSupportProps } from '@snack-uikit/utils';
|
|
15
15
|
export function Accordion(_a) {
|
|
16
|
-
var { children, expanded, onExpandedChange, expandedDefault, selectionMode =
|
|
16
|
+
var { children, expanded, onExpandedChange, expandedDefault, selectionMode = 'single', className } = _a, rest = __rest(_a, ["children", "expanded", "onExpandedChange", "expandedDefault", "selectionMode", "className"]);
|
|
17
17
|
return (
|
|
18
18
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
19
19
|
// @ts-ignore
|
|
20
|
-
_jsx(ToggleGroup,
|
|
20
|
+
_jsx(ToggleGroup, { value: expanded, defaultValue: expandedDefault, onChange: onExpandedChange, selectionMode: selectionMode, children: _jsx("div", Object.assign({ className: className }, extractSupportProps(rest), { children: children })) }));
|
|
21
21
|
}
|
|
@@ -5,5 +5,5 @@ import { Typography } from '@snack-uikit/typography';
|
|
|
5
5
|
import { TEST_IDS } from '../../testIds';
|
|
6
6
|
import styles from './styles.module.css';
|
|
7
7
|
export function CollapseBlockHeader({ title, description, tip }) {
|
|
8
|
-
return (_jsxs(_Fragment, { children: [_jsxs("div",
|
|
8
|
+
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.headline, children: [_jsx(Typography.SansTitleM, { className: styles.title, "data-test-id": TEST_IDS.title, children: _jsx(TruncateString, { text: title, maxLines: 1 }) }), tip && _jsx(QuestionTooltip, { size: 's', tip: tip, triggerDataTestId: TEST_IDS.tooltip })] }), description && (_jsx(Typography.SansBodyM, { className: styles.subtitle, "data-test-id": TEST_IDS.description, children: _jsx(TruncateString, { text: description, maxLines: 2 }) }))] }));
|
|
9
9
|
}
|
|
@@ -17,5 +17,5 @@ export function CollapseBlockHeaderContainer({ children, toggleExpanded, expande
|
|
|
17
17
|
}, [functionLayoutRef]);
|
|
18
18
|
return (
|
|
19
19
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
20
|
-
_jsxs("div",
|
|
20
|
+
_jsxs("div", { className: styles.header, "data-test-id": TEST_IDS.header, onClick: toggleExpanded, children: [_jsx("div", { className: styles.text, style: { '--width': width }, children: children }), _jsxs("div", { className: styles.functionLayout, ref: functionLayoutRef, children: [actions, _jsx(ButtonFunction, { className: styles.button, "data-expanded": expanded || undefined, icon: _jsx(ChevronDownSVG, {}), size: 'xs', "data-test-id": TEST_IDS.chevron })] })] }));
|
|
21
21
|
}
|
|
@@ -18,5 +18,5 @@ export function CollapseBlockPrivate(_a) {
|
|
|
18
18
|
var { children, expanded, className, header } = _a, rest = __rest(_a, ["children", "expanded", "className", "header"]);
|
|
19
19
|
return (_jsxs("div", Object.assign({ className: cn(styles.accordion, className),
|
|
20
20
|
// eslint-disable-next-line jsx-a11y/aria-role
|
|
21
|
-
role: 'accordion', "aria-expanded": expanded }, extractSupportProps(rest), { children: [header, _jsx("div",
|
|
21
|
+
role: 'accordion', "aria-expanded": expanded }, extractSupportProps(rest), { children: [header, _jsx("div", { className: styles.contentWrapper, "aria-hidden": !expanded, "data-test-id": TEST_IDS.content, children: _jsx("div", { className: styles.content, "data-content": true, children: children }) })] })));
|
|
22
22
|
}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ReactElement, ReactNode } from 'react';
|
|
2
|
-
import { ToggleGroup } from '@snack-uikit/toggles';
|
|
3
2
|
import { WithSupportProps } from '@snack-uikit/utils';
|
|
3
|
+
import { SELECTION_MODE } from './constants';
|
|
4
4
|
export type CollapseBlockProps = WithSupportProps<{
|
|
5
5
|
/** Уникальный id блока */
|
|
6
6
|
id: string;
|
|
@@ -26,7 +26,7 @@ export type AccordionProps = WithSupportProps<{
|
|
|
26
26
|
/** Controlled обработчик измения состояния */
|
|
27
27
|
onExpandedChange?(value: (string | undefined) | string): void;
|
|
28
28
|
/** Режим работы аккордиона */
|
|
29
|
-
selectionMode?: typeof
|
|
29
|
+
selectionMode?: typeof SELECTION_MODE.Single;
|
|
30
30
|
} | {
|
|
31
31
|
/** Начальное состояние */
|
|
32
32
|
expandedDefault?: string[];
|
|
@@ -35,5 +35,5 @@ export type AccordionProps = WithSupportProps<{
|
|
|
35
35
|
/** Controlled обработчик измения состояния */
|
|
36
36
|
onExpandedChange?(value: (string[] | undefined) | string[]): void;
|
|
37
37
|
/** Режим работы аккордиона */
|
|
38
|
-
selectionMode: typeof
|
|
38
|
+
selectionMode: typeof SELECTION_MODE.Multiple;
|
|
39
39
|
});
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Accordion",
|
|
7
|
-
"version": "0.
|
|
7
|
+
"version": "0.5.1",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -32,14 +32,14 @@
|
|
|
32
32
|
"license": "Apache-2.0",
|
|
33
33
|
"scripts": {},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@snack-uikit/button": "0.
|
|
36
|
-
"@snack-uikit/icons": "0.19.
|
|
37
|
-
"@snack-uikit/toggles": "0.
|
|
38
|
-
"@snack-uikit/tooltip": "0.
|
|
39
|
-
"@snack-uikit/truncate-string": "0.
|
|
40
|
-
"@snack-uikit/typography": "0.
|
|
41
|
-
"@snack-uikit/utils": "3.
|
|
35
|
+
"@snack-uikit/button": "0.15.0",
|
|
36
|
+
"@snack-uikit/icons": "0.19.1",
|
|
37
|
+
"@snack-uikit/toggles": "0.9.1",
|
|
38
|
+
"@snack-uikit/tooltip": "0.10.1",
|
|
39
|
+
"@snack-uikit/truncate-string": "0.4.1",
|
|
40
|
+
"@snack-uikit/typography": "0.6.0",
|
|
41
|
+
"@snack-uikit/utils": "3.2.0",
|
|
42
42
|
"classnames": "2.3.2"
|
|
43
43
|
},
|
|
44
|
-
"gitHead": "
|
|
44
|
+
"gitHead": "62f43bf0cbfd611d0b746117400f67096b1790f6"
|
|
45
45
|
}
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import cn from 'classnames';
|
|
2
2
|
|
|
3
|
-
import { ToggleGroup } from '@snack-uikit/toggles';
|
|
4
|
-
|
|
5
3
|
import { Accordion } from '../../helperComponents';
|
|
6
4
|
import { AccordionProps } from '../../types';
|
|
7
5
|
import styles from './styles.module.scss';
|
|
@@ -9,5 +7,3 @@ import styles from './styles.module.scss';
|
|
|
9
7
|
export function AccordionPrimary({ className, ...rest }: AccordionProps) {
|
|
10
8
|
return <Accordion className={cn(styles.accordionPrimary, className)} {...rest} />;
|
|
11
9
|
}
|
|
12
|
-
|
|
13
|
-
AccordionPrimary.selectionModes = ToggleGroup.selectionModes;
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import cn from 'classnames';
|
|
2
2
|
|
|
3
|
-
import { ToggleGroup } from '@snack-uikit/toggles';
|
|
4
|
-
|
|
5
3
|
import { Accordion } from '../../helperComponents';
|
|
6
4
|
import { AccordionProps } from '../../types';
|
|
7
5
|
import styles from './styles.module.scss';
|
|
@@ -9,5 +7,3 @@ import styles from './styles.module.scss';
|
|
|
9
7
|
export function AccordionSecondary({ className, ...rest }: AccordionProps) {
|
|
10
8
|
return <Accordion className={cn(styles.accordionSecondary, className)} {...rest} />;
|
|
11
9
|
}
|
|
12
|
-
|
|
13
|
-
AccordionSecondary.selectionModes = ToggleGroup.selectionModes;
|
package/src/constants.ts
ADDED
|
@@ -22,7 +22,7 @@ export function CollapseBlockHeader({ title, description, tip }: CollapseBlockHe
|
|
|
22
22
|
<TruncateString text={title} maxLines={1} />
|
|
23
23
|
</Typography.SansTitleM>
|
|
24
24
|
|
|
25
|
-
{tip && <QuestionTooltip size=
|
|
25
|
+
{tip && <QuestionTooltip size='s' tip={tip} triggerDataTestId={TEST_IDS.tooltip} />}
|
|
26
26
|
</div>
|
|
27
27
|
|
|
28
28
|
{description && (
|
package/src/types.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { ReactElement, ReactNode } from 'react';
|
|
2
2
|
|
|
3
|
-
import { ToggleGroup } from '@snack-uikit/toggles';
|
|
4
3
|
import { WithSupportProps } from '@snack-uikit/utils';
|
|
5
4
|
|
|
5
|
+
import { SELECTION_MODE } from './constants';
|
|
6
|
+
|
|
6
7
|
export type CollapseBlockProps = WithSupportProps<{
|
|
7
8
|
/** Уникальный id блока */
|
|
8
9
|
id: string;
|
|
@@ -31,7 +32,7 @@ export type AccordionProps = WithSupportProps<{
|
|
|
31
32
|
/** Controlled обработчик измения состояния */
|
|
32
33
|
onExpandedChange?(value: (string | undefined) | string): void;
|
|
33
34
|
/** Режим работы аккордиона */
|
|
34
|
-
selectionMode?: typeof
|
|
35
|
+
selectionMode?: typeof SELECTION_MODE.Single;
|
|
35
36
|
}
|
|
36
37
|
| {
|
|
37
38
|
/** Начальное состояние */
|
|
@@ -41,6 +42,6 @@ export type AccordionProps = WithSupportProps<{
|
|
|
41
42
|
/** Controlled обработчик измения состояния */
|
|
42
43
|
onExpandedChange?(value: (string[] | undefined) | string[]): void;
|
|
43
44
|
/** Режим работы аккордиона */
|
|
44
|
-
selectionMode: typeof
|
|
45
|
+
selectionMode: typeof SELECTION_MODE.Multiple;
|
|
45
46
|
}
|
|
46
47
|
);
|