@purpurds/accordion 5.8.1 → 5.9.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/dist/LICENSE.txt +3 -3
- package/dist/accordion-item.d.ts +2 -2
- package/dist/accordion-item.d.ts.map +1 -1
- package/dist/accordion.cjs.js +4 -4
- package/dist/accordion.cjs.js.map +1 -1
- package/dist/accordion.d.ts +1 -1
- package/dist/accordion.es.js +179 -176
- package/dist/accordion.es.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +5 -5
- package/src/accordion-item.module.scss +4 -3
- package/src/accordion-item.tsx +48 -41
- package/src/accordion.module.scss +3 -1
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._purpur-
|
|
1
|
+
._purpur-accordion_u887g_1{container:accordion/inline-size}._purpur-accordion_u887g_1 ._purpur-accordion__title_u887g_4{margin-bottom:var(--purpur-spacing-300);color:var(--purpur-color-text-default)}@container accordion (min-width: 600px){._purpur-accordion_u887g_1 ._purpur-accordion__title_u887g_4{margin-bottom:var(--purpur-spacing-400)}}._purpur-accordion--negative_u887g_13{background-color:var(--purpur-color-purple-900)}._purpur-accordion--negative_u887g_13 ._purpur-accordion__title_u887g_4{color:var(--purpur-color-text-default-negative)}._purpur-accordion-item_aukzj_1{overflow:hidden;border-bottom:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak)}._purpur-accordion-item_aukzj_1:nth-of-type(1){border-top:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak)}._purpur-accordion-item__header_aukzj_8{display:flex}._purpur-accordion-item__trigger_aukzj_11{border:none;padding:0;width:100%;text-align:left;font-family:inherit;font-size:inherit;font-weight:inherit;color:inherit;line-height:inherit;background-color:transparent;transition:background-color var(--purpur-motion-duration-150) ease;display:flex;align-items:center;justify-content:space-between;column-gap:var(--purpur-spacing-100);padding:var(--purpur-spacing-200) var(--purpur-spacing-200) var(--purpur-spacing-200) 0;cursor:pointer;outline:none}@container accordion (min-width: 600px){._purpur-accordion-item__trigger_aukzj_11{padding:var(--purpur-spacing-300) var(--purpur-spacing-300) var(--purpur-spacing-300) 0}}@container accordion (min-width: 1024px){._purpur-accordion-item__trigger_aukzj_11{padding:var(--purpur-spacing-400) var(--purpur-spacing-300) var(--purpur-spacing-400) 0}}._purpur-accordion-item__content_aukzj_41{overflow:hidden}._purpur-accordion-item__content_aukzj_41[data-state=open]{animation:_slideDown_aukzj_1 var(--purpur-motion-duration-150) ease-in-out}._purpur-accordion-item__content_aukzj_41[data-state=closed]{animation:_slideUp_aukzj_1 var(--purpur-motion-duration-150) ease-in-out}._purpur-accordion-item__contentText_aukzj_50{padding:var(--purpur-spacing-200) 0;max-width:calc(var(--purpur-spacing-1200) / .16)}._purpur-accordion-item__icon_aukzj_54{flex-shrink:0;height:var(--purpur-spacing-300);width:var(--purpur-spacing-300);transition:transform var(--purpur-motion-duration-150) ease-in-out}._purpur-accordion-item__trigger_aukzj_11[data-state=open]>._purpur-accordion-item__icon_aukzj_54{transform:rotate(180deg)}._purpur-accordion-item_aukzj_1:has(:focus-visible){outline:none;box-shadow:0 0 0 var(--purpur-border-width-sm) var(--purpur-color-border-interactive-focus)}._purpur-accordion-item_aukzj_1 ._purpur-accordion-item__title_aukzj_67{max-width:100%}._purpur-accordion-item_aukzj_1 ._purpur-accordion-item__title_aukzj_67,._purpur-accordion-item__icon_aukzj_54{color:var(--purpur-color-text-interactive-primary)}._purpur-accordion-item__trigger_aukzj_11:hover{background-color:var(--purpur-color-background-interactive-transparent-hover)}._purpur-accordion-item__trigger_aukzj_11:hover ._purpur-accordion-item__title_aukzj_67,._purpur-accordion-item__trigger_aukzj_11:hover__icon{color:var(--purpur-color-text-interactive-primary-hover)}._purpur-accordion-item__trigger_aukzj_11:active{background-color:var(--purpur-color-background-interactive-transparent-active)}._purpur-accordion-item__trigger_aukzj_11:active ._purpur-accordion-item__title_aukzj_67,._purpur-accordion-item__trigger_aukzj_11:active__icon{color:var(--purpur-color-text-interactive-primary-active)}._purpur-accordion-item__contentText_aukzj_50 p{color:var(--purpur-color-text-default)}._purpur-accordion-item--negative_aukzj_88{border-bottom:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak-negative)}._purpur-accordion-item--negative_aukzj_88:nth-of-type(1){border-top:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak-negative)}._purpur-accordion-item--negative_aukzj_88 ._purpur-accordion-item__title_aukzj_67,._purpur-accordion-item--negative_aukzj_88 ._purpur-accordion-item__icon_aukzj_54{color:var(--purpur-color-text-interactive-primary-negative)}._purpur-accordion-item--negative_aukzj_88 ._purpur-accordion-item__trigger_aukzj_11:hover{background-color:var(--purpur-color-background-interactive-transparent-negative-hover)}._purpur-accordion-item--negative_aukzj_88 ._purpur-accordion-item__trigger_aukzj_11:hover ._purpur-accordion-item__title_aukzj_67,._purpur-accordion-item--negative_aukzj_88 ._purpur-accordion-item__trigger_aukzj_11:hover ._purpur-accordion-item__icon_aukzj_54{color:var(--purpur-color-border-interactive-primary-negative-hover)}._purpur-accordion-item--negative_aukzj_88 ._purpur-accordion-item__trigger_aukzj_11:active{background-color:var(--purpur-color-background-interactive-transparent-negative-active)}._purpur-accordion-item--negative_aukzj_88 ._purpur-accordion-item__trigger_aukzj_11:active ._purpur-accordion-item__title_aukzj_67,._purpur-accordion-item--negative_aukzj_88 ._purpur-accordion-item__trigger_aukzj_11:active ._purpur-accordion-item__icon_aukzj_54{color:var(--purpur-color-border-interactive-primary-negative-active)}._purpur-accordion-item--negative_aukzj_88 ._purpur-accordion-item__contentText_aukzj_50 p{color:var(--purpur-color-text-default-negative)}@keyframes _slideDown_aukzj_1{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes _slideUp_aukzj_1{0%{height:var(--radix-accordion-content-height)}to{height:0}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purpurds/accordion",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.9.0",
|
|
4
4
|
"license": "AGPL-3.0-only",
|
|
5
5
|
"main": "./dist/accordion.cjs.js",
|
|
6
6
|
"types": "./dist/accordion.d.ts",
|
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"classnames": "~2.5.0",
|
|
18
18
|
"@radix-ui/react-accordion": "~1.1.2",
|
|
19
|
-
"@purpurds/
|
|
20
|
-
"@purpurds/
|
|
21
|
-
"@purpurds/
|
|
22
|
-
"@purpurds/
|
|
19
|
+
"@purpurds/heading": "5.9.0",
|
|
20
|
+
"@purpurds/icon": "5.9.0",
|
|
21
|
+
"@purpurds/tokens": "5.9.0",
|
|
22
|
+
"@purpurds/paragraph": "5.9.0"
|
|
23
23
|
},
|
|
24
24
|
"devDependencies": {
|
|
25
25
|
"@rushstack/eslint-patch": "~1.10.0",
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
border: none;
|
|
18
18
|
padding: 0;
|
|
19
19
|
width: 100%;
|
|
20
|
+
text-align: left;
|
|
20
21
|
font-family: inherit;
|
|
21
22
|
font-size: inherit;
|
|
22
23
|
font-weight: inherit;
|
|
@@ -27,15 +28,16 @@
|
|
|
27
28
|
display: flex;
|
|
28
29
|
align-items: center;
|
|
29
30
|
justify-content: space-between;
|
|
31
|
+
column-gap: var(--purpur-spacing-100);
|
|
30
32
|
padding: var(--purpur-spacing-200) var(--purpur-spacing-200) var(--purpur-spacing-200) 0;
|
|
31
33
|
cursor: pointer;
|
|
32
34
|
outline: none;
|
|
33
35
|
|
|
34
|
-
@
|
|
36
|
+
@container accordion (min-width: #{$purpur-breakpoint-md}) {
|
|
35
37
|
padding: var(--purpur-spacing-300) var(--purpur-spacing-300) var(--purpur-spacing-300) 0;
|
|
36
38
|
}
|
|
37
39
|
|
|
38
|
-
@
|
|
40
|
+
@container accordion (min-width: #{$purpur-breakpoint-lg}) {
|
|
39
41
|
padding: var(--purpur-spacing-400) var(--purpur-spacing-300) var(--purpur-spacing-400) 0;
|
|
40
42
|
}
|
|
41
43
|
}
|
|
@@ -75,7 +77,6 @@
|
|
|
75
77
|
|
|
76
78
|
#{$root}__title {
|
|
77
79
|
max-width: 100%;
|
|
78
|
-
text-align: left;
|
|
79
80
|
}
|
|
80
81
|
|
|
81
82
|
#{$root}__title,
|
package/src/accordion-item.tsx
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import type { ForwardedRef, ReactNode } from "react";
|
|
2
|
+
import React, { forwardRef } from "react";
|
|
2
3
|
import type { HeadingTagType } from "@purpurds/heading";
|
|
3
4
|
import { Heading } from "@purpurds/heading";
|
|
4
5
|
import { IconChevronDown } from "@purpurds/icon";
|
|
@@ -43,45 +44,51 @@ export type AccordionItemProps = {
|
|
|
43
44
|
onClick?: (event: AccordionItemOnClickEvent) => void;
|
|
44
45
|
};
|
|
45
46
|
|
|
46
|
-
export const AccordionItem = (
|
|
47
|
-
|
|
48
|
-
className,
|
|
49
|
-
title,
|
|
50
|
-
titleTag = "h3",
|
|
51
|
-
negative,
|
|
52
|
-
onClick,
|
|
53
|
-
...props
|
|
54
|
-
}: AccordionItemProps) => {
|
|
55
|
-
const classes = cx([
|
|
56
|
-
className,
|
|
57
|
-
rootClassName,
|
|
47
|
+
export const AccordionItem = forwardRef(
|
|
48
|
+
(
|
|
58
49
|
{
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
50
|
+
children,
|
|
51
|
+
className,
|
|
52
|
+
title,
|
|
53
|
+
titleTag = "h3",
|
|
54
|
+
negative,
|
|
55
|
+
onClick,
|
|
56
|
+
...props
|
|
57
|
+
}: AccordionItemProps,
|
|
58
|
+
ref: ForwardedRef<HTMLButtonElement>
|
|
59
|
+
) => {
|
|
60
|
+
const classes = cx([
|
|
61
|
+
className,
|
|
62
|
+
rootClassName,
|
|
63
|
+
{
|
|
64
|
+
[`${rootClassName}--negative`]: negative,
|
|
65
|
+
},
|
|
66
|
+
]);
|
|
62
67
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
<
|
|
78
|
-
{
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
68
|
+
return (
|
|
69
|
+
<RadixAccordion.Item className={classes} value={title} {...props}>
|
|
70
|
+
<RadixAccordion.Header className={cx(`${rootClassName}__header`)} asChild>
|
|
71
|
+
<Heading tag={titleTag} variant="title-100" className={cx(`${rootClassName}__title`)}>
|
|
72
|
+
<RadixAccordion.Trigger
|
|
73
|
+
ref={ref}
|
|
74
|
+
onClick={onClick}
|
|
75
|
+
className={cx(`${rootClassName}__trigger`, className)}
|
|
76
|
+
>
|
|
77
|
+
{title}
|
|
78
|
+
<IconChevronDown size="md" className={cx(`${rootClassName}__icon`)} aria-hidden />
|
|
79
|
+
</RadixAccordion.Trigger>
|
|
80
|
+
</Heading>
|
|
81
|
+
</RadixAccordion.Header>
|
|
82
|
+
<RadixAccordion.Content className={cx(`${rootClassName}__content`, className)}>
|
|
83
|
+
<div className={cx(`${rootClassName}__contentText`)}>
|
|
84
|
+
{typeof children === "string" ? (
|
|
85
|
+
<Paragraph variant="paragraph-200">{children}</Paragraph>
|
|
86
|
+
) : (
|
|
87
|
+
children
|
|
88
|
+
)}
|
|
89
|
+
</div>
|
|
90
|
+
</RadixAccordion.Content>
|
|
91
|
+
</RadixAccordion.Item>
|
|
92
|
+
);
|
|
93
|
+
}
|
|
94
|
+
);
|
|
@@ -3,11 +3,13 @@
|
|
|
3
3
|
.purpur-accordion {
|
|
4
4
|
$root: &;
|
|
5
5
|
|
|
6
|
+
container: accordion / inline-size;
|
|
7
|
+
|
|
6
8
|
#{$root}__title {
|
|
7
9
|
margin-bottom: var(--purpur-spacing-300);
|
|
8
10
|
color: var(--purpur-color-text-default);
|
|
9
11
|
|
|
10
|
-
@
|
|
12
|
+
@container accordion (min-width: #{$purpur-breakpoint-md}) {
|
|
11
13
|
margin-bottom: var(--purpur-spacing-400);
|
|
12
14
|
}
|
|
13
15
|
}
|