@purpurds/accordion 5.6.0 → 5.7.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 +7 -3
- package/dist/accordion-item.d.ts.map +1 -1
- package/dist/accordion.cjs.js +5 -5
- package/dist/accordion.cjs.js.map +1 -1
- package/dist/accordion.d.ts +7 -3
- package/dist/accordion.d.ts.map +1 -1
- package/dist/accordion.es.js +216 -212
- 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 +12 -5
- package/src/accordion-item.tsx +15 -22
- package/src/accordion.tsx +19 -8
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._purpur-accordion__title_1ower_1{margin-bottom:var(--purpur-spacing-300);color:var(--purpur-color-text-default)}@media screen and (min-width: 600px){._purpur-accordion__title_1ower_1{margin-bottom:var(--purpur-spacing-400)}}._purpur-accordion--negative_1ower_10{background-color:var(--purpur-color-purple-900)}._purpur-accordion--negative_1ower_10 ._purpur-accordion__title_1ower_1{color:var(--purpur-color-text-default-negative)}._purpur-accordion-
|
|
1
|
+
._purpur-accordion__title_1ower_1{margin-bottom:var(--purpur-spacing-300);color:var(--purpur-color-text-default)}@media screen and (min-width: 600px){._purpur-accordion__title_1ower_1{margin-bottom:var(--purpur-spacing-400)}}._purpur-accordion--negative_1ower_10{background-color:var(--purpur-color-purple-900)}._purpur-accordion--negative_1ower_10 ._purpur-accordion__title_1ower_1{color:var(--purpur-color-text-default-negative)}._purpur-accordion-item_1vvn6_1{overflow:hidden;border-bottom:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak)}._purpur-accordion-item_1vvn6_1:nth-of-type(1){border-top:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak)}._purpur-accordion-item__header_1vvn6_8{display:flex}._purpur-accordion-item__trigger_1vvn6_11{border:none;padding:0;width:100%;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;padding:var(--purpur-spacing-200) var(--purpur-spacing-200) var(--purpur-spacing-200) 0;cursor:pointer;outline:none}@media screen and (min-width: 600px){._purpur-accordion-item__trigger_1vvn6_11{padding:var(--purpur-spacing-300) var(--purpur-spacing-300) var(--purpur-spacing-300) 0}}@media screen and (min-width: 1024px){._purpur-accordion-item__trigger_1vvn6_11{padding:var(--purpur-spacing-400) var(--purpur-spacing-300) var(--purpur-spacing-400) 0}}._purpur-accordion-item__content_1vvn6_39{overflow:hidden}._purpur-accordion-item__content_1vvn6_39[data-state=open]{animation:_slideDown_1vvn6_1 var(--purpur-motion-duration-150) ease-in-out}._purpur-accordion-item__content_1vvn6_39[data-state=closed]{animation:_slideUp_1vvn6_1 var(--purpur-motion-duration-150) ease-in-out}._purpur-accordion-item__contentText_1vvn6_48{padding:var(--purpur-spacing-200) 0;max-width:37.5rem}._purpur-accordion-item__icon_1vvn6_52{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_1vvn6_11[data-state=open]>._purpur-accordion-item__icon_1vvn6_52{transform:rotate(180deg)}._purpur-accordion-item_1vvn6_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__title_1vvn6_65{text-align:left}._purpur-accordion-item_1vvn6_1 ._purpur-accordion-item__title_1vvn6_65,._purpur-accordion-item__icon_1vvn6_52{color:var(--purpur-color-text-interactive-primary)}._purpur-accordion-item__trigger_1vvn6_11:hover{background-color:var(--purpur-color-background-interactive-transparent-hover)}._purpur-accordion-item__trigger_1vvn6_11:hover ._purpur-accordion-item__title_1vvn6_65,._purpur-accordion-item__trigger_1vvn6_11:hover__icon{color:var(--purpur-color-text-interactive-primary-hover)}._purpur-accordion-item__trigger_1vvn6_11:active{background-color:var(--purpur-color-background-interactive-transparent-active)}._purpur-accordion-item__trigger_1vvn6_11:active ._purpur-accordion-item__title_1vvn6_65,._purpur-accordion-item__trigger_1vvn6_11:active__icon{color:var(--purpur-color-text-interactive-primary-active)}._purpur-accordion-item__contentText_1vvn6_48 p{color:var(--purpur-color-text-default)}._purpur-accordion-item--negative_1vvn6_86{border-bottom:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak-negative)}._purpur-accordion-item--negative_1vvn6_86:nth-of-type(1){border-top:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak-negative)}._purpur-accordion-item--negative_1vvn6_86 ._purpur-accordion-item__title_1vvn6_65,._purpur-accordion-item--negative_1vvn6_86 ._purpur-accordion-item__icon_1vvn6_52{color:var(--purpur-color-text-interactive-primary-negative)}._purpur-accordion-item--negative_1vvn6_86 ._purpur-accordion-item__trigger_1vvn6_11:hover{background-color:var(--purpur-color-background-interactive-transparent-negative-hover)}._purpur-accordion-item--negative_1vvn6_86 ._purpur-accordion-item__trigger_1vvn6_11:hover ._purpur-accordion-item__title_1vvn6_65,._purpur-accordion-item--negative_1vvn6_86 ._purpur-accordion-item__trigger_1vvn6_11:hover ._purpur-accordion-item__icon_1vvn6_52{color:var(--purpur-color-border-interactive-primary-negative-hover)}._purpur-accordion-item--negative_1vvn6_86 ._purpur-accordion-item__trigger_1vvn6_11:active{background-color:var(--purpur-color-background-interactive-transparent-negative-active)}._purpur-accordion-item--negative_1vvn6_86 ._purpur-accordion-item__trigger_1vvn6_11:active ._purpur-accordion-item__title_1vvn6_65,._purpur-accordion-item--negative_1vvn6_86 ._purpur-accordion-item__trigger_1vvn6_11:active ._purpur-accordion-item__icon_1vvn6_52{color:var(--purpur-color-border-interactive-primary-negative-active)}._purpur-accordion-item--negative_1vvn6_86 ._purpur-accordion-item__contentText_1vvn6_48 p{color:var(--purpur-color-text-default-negative)}@keyframes _slideDown_1vvn6_1{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes _slideUp_1vvn6_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.7.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/tokens": "5.
|
|
20
|
-
"@purpurds/
|
|
21
|
-
"@purpurds/icon": "5.
|
|
22
|
-
"@purpurds/
|
|
19
|
+
"@purpurds/tokens": "5.7.0",
|
|
20
|
+
"@purpurds/paragraph": "5.7.0",
|
|
21
|
+
"@purpurds/icon": "5.7.0",
|
|
22
|
+
"@purpurds/heading": "5.7.0"
|
|
23
23
|
},
|
|
24
24
|
"devDependencies": {
|
|
25
25
|
"@rushstack/eslint-patch": "~1.10.0",
|
|
@@ -18,6 +18,10 @@
|
|
|
18
18
|
padding: 0;
|
|
19
19
|
width: 100%;
|
|
20
20
|
font-family: inherit;
|
|
21
|
+
font-size: inherit;
|
|
22
|
+
font-weight: inherit;
|
|
23
|
+
color: inherit;
|
|
24
|
+
line-height: inherit;
|
|
21
25
|
background-color: transparent;
|
|
22
26
|
transition: background-color var(--purpur-motion-duration-150) ease;
|
|
23
27
|
display: flex;
|
|
@@ -54,12 +58,13 @@
|
|
|
54
58
|
}
|
|
55
59
|
|
|
56
60
|
&__icon {
|
|
61
|
+
flex-shrink: 0;
|
|
57
62
|
height: var(--purpur-spacing-300);
|
|
58
63
|
width: var(--purpur-spacing-300);
|
|
59
64
|
transition: transform var(--purpur-motion-duration-150) ease-in-out;
|
|
60
65
|
}
|
|
61
66
|
|
|
62
|
-
&__trigger[data-state="open"]
|
|
67
|
+
&__trigger[data-state="open"]>&__icon {
|
|
63
68
|
transform: rotate(180deg);
|
|
64
69
|
}
|
|
65
70
|
|
|
@@ -72,7 +77,7 @@
|
|
|
72
77
|
text-align: left;
|
|
73
78
|
}
|
|
74
79
|
|
|
75
|
-
|
|
80
|
+
#{$root}__title,
|
|
76
81
|
&__icon {
|
|
77
82
|
color: var(--purpur-color-text-interactive-primary);
|
|
78
83
|
}
|
|
@@ -80,7 +85,7 @@
|
|
|
80
85
|
&__trigger:hover {
|
|
81
86
|
background-color: var(--purpur-color-background-interactive-transparent-hover);
|
|
82
87
|
|
|
83
|
-
|
|
88
|
+
#{$root}__title,
|
|
84
89
|
&__icon {
|
|
85
90
|
color: var(--purpur-color-text-interactive-primary-hover);
|
|
86
91
|
}
|
|
@@ -89,7 +94,7 @@
|
|
|
89
94
|
&__trigger:active {
|
|
90
95
|
background-color: var(--purpur-color-background-interactive-transparent-active);
|
|
91
96
|
|
|
92
|
-
|
|
97
|
+
#{$root}__title,
|
|
93
98
|
&__icon {
|
|
94
99
|
color: var(--purpur-color-text-interactive-primary-active);
|
|
95
100
|
}
|
|
@@ -139,6 +144,7 @@
|
|
|
139
144
|
from {
|
|
140
145
|
height: 0;
|
|
141
146
|
}
|
|
147
|
+
|
|
142
148
|
to {
|
|
143
149
|
height: var(--radix-accordion-content-height);
|
|
144
150
|
}
|
|
@@ -148,7 +154,8 @@
|
|
|
148
154
|
from {
|
|
149
155
|
height: var(--radix-accordion-content-height);
|
|
150
156
|
}
|
|
157
|
+
|
|
151
158
|
to {
|
|
152
159
|
height: 0;
|
|
153
160
|
}
|
|
154
|
-
}
|
|
161
|
+
}
|
package/src/accordion-item.tsx
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { ReactNode } from "react";
|
|
2
|
+
import type { HeadingTagType } from "@purpurds/heading";
|
|
2
3
|
import { Heading } from "@purpurds/heading";
|
|
3
4
|
import { IconChevronDown } from "@purpurds/icon";
|
|
4
5
|
import { Paragraph } from "@purpurds/paragraph";
|
|
@@ -23,6 +24,10 @@ export type AccordionItemProps = {
|
|
|
23
24
|
* Title of the accordion item
|
|
24
25
|
* */
|
|
25
26
|
title: string;
|
|
27
|
+
/**
|
|
28
|
+
* This is the heading tag used for the accordion item title. Defaults to h3.
|
|
29
|
+
*/
|
|
30
|
+
titleTag?: HeadingTagType;
|
|
26
31
|
/**
|
|
27
32
|
* Value is used to identify the accordion. By default title is used for that purpose. If there are identical titles in the accordion, then value should be defined.
|
|
28
33
|
* */
|
|
@@ -42,6 +47,7 @@ export const AccordionItem = ({
|
|
|
42
47
|
children,
|
|
43
48
|
className,
|
|
44
49
|
title,
|
|
50
|
+
titleTag = "h3",
|
|
45
51
|
negative,
|
|
46
52
|
onClick,
|
|
47
53
|
...props
|
|
@@ -57,15 +63,15 @@ export const AccordionItem = ({
|
|
|
57
63
|
return (
|
|
58
64
|
<RadixAccordion.Item className={classes} value={title} {...props}>
|
|
59
65
|
<RadixAccordion.Header className={cx(`${rootClassName}__header`)} asChild>
|
|
60
|
-
<
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
66
|
+
<Heading tag={titleTag} variant="title-100" className={cx(`${rootClassName}__title`)}>
|
|
67
|
+
<RadixAccordion.Trigger
|
|
68
|
+
onClick={onClick}
|
|
69
|
+
className={cx(`${rootClassName}__trigger`, className)}
|
|
70
|
+
>
|
|
65
71
|
{title}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
</
|
|
72
|
+
<IconChevronDown size="md" className={cx(`${rootClassName}__icon`)} aria-hidden />
|
|
73
|
+
</RadixAccordion.Trigger>
|
|
74
|
+
</Heading>
|
|
69
75
|
</RadixAccordion.Header>
|
|
70
76
|
<RadixAccordion.Content className={cx(`${rootClassName}__content`, className)}>
|
|
71
77
|
<div className={cx(`${rootClassName}__contentText`)}>
|
|
@@ -79,16 +85,3 @@ export const AccordionItem = ({
|
|
|
79
85
|
</RadixAccordion.Item>
|
|
80
86
|
);
|
|
81
87
|
};
|
|
82
|
-
|
|
83
|
-
export const isAccordionItem = (
|
|
84
|
-
child:
|
|
85
|
-
| ReactElement
|
|
86
|
-
| Iterable<ReactNode>
|
|
87
|
-
| ReactPortal
|
|
88
|
-
| string
|
|
89
|
-
| number
|
|
90
|
-
| boolean
|
|
91
|
-
| null
|
|
92
|
-
| undefined
|
|
93
|
-
): child is ReactElement<AccordionItemProps> =>
|
|
94
|
-
isValidElement<AccordionItemProps>(child) && child?.type === AccordionItem;
|
package/src/accordion.tsx
CHANGED
|
@@ -1,10 +1,16 @@
|
|
|
1
|
-
import React, {
|
|
2
|
-
|
|
1
|
+
import React, {
|
|
2
|
+
Children,
|
|
3
|
+
cloneElement,
|
|
4
|
+
JSXElementConstructor,
|
|
5
|
+
ReactElement,
|
|
6
|
+
ReactNode,
|
|
7
|
+
} from "react";
|
|
8
|
+
import { Heading, HeadingTagType, TitleVariantType } from "@purpurds/heading";
|
|
3
9
|
import * as RadixAccordion from "@radix-ui/react-accordion";
|
|
4
10
|
import c from "classnames/bind";
|
|
5
11
|
|
|
6
12
|
import styles from "./accordion.module.scss";
|
|
7
|
-
import { AccordionItem
|
|
13
|
+
import { AccordionItem } from "./accordion-item";
|
|
8
14
|
|
|
9
15
|
const cx = c.bind(styles);
|
|
10
16
|
|
|
@@ -22,6 +28,10 @@ export type AccordionProps = {
|
|
|
22
28
|
* Title of the accordion
|
|
23
29
|
* */
|
|
24
30
|
title?: string;
|
|
31
|
+
/**
|
|
32
|
+
* This is the heading tag used for the accordion title. Defaults to h2.
|
|
33
|
+
*/
|
|
34
|
+
titleTag?: HeadingTagType;
|
|
25
35
|
/**
|
|
26
36
|
* Different variant of sizing the title
|
|
27
37
|
* */
|
|
@@ -34,6 +44,7 @@ export const Accordion = ({
|
|
|
34
44
|
className,
|
|
35
45
|
negative = false,
|
|
36
46
|
title,
|
|
47
|
+
titleTag = "h2",
|
|
37
48
|
titleVariant = "title-300",
|
|
38
49
|
}: AccordionProps) => {
|
|
39
50
|
const classes = cx([
|
|
@@ -46,16 +57,16 @@ export const Accordion = ({
|
|
|
46
57
|
|
|
47
58
|
const renderChildren = () =>
|
|
48
59
|
Children.map(children, (child) => {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
60
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
61
|
+
return cloneElement(child as ReactElement<any, string | JSXElementConstructor<any>>, {
|
|
62
|
+
negative,
|
|
63
|
+
});
|
|
53
64
|
});
|
|
54
65
|
|
|
55
66
|
return (
|
|
56
67
|
<RadixAccordion.Root className={classes} type="multiple" data-testid={dataTestId}>
|
|
57
68
|
{title ? (
|
|
58
|
-
<Heading tag=
|
|
69
|
+
<Heading tag={titleTag} variant={titleVariant} className={cx(`${rootClassName}__title`)}>
|
|
59
70
|
{title}
|
|
60
71
|
</Heading>
|
|
61
72
|
) : null}
|