@cypress-design/react-accordion 0.1.4 → 0.1.6
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/Accordion.tsx +8 -8
- package/CHANGELOG.md +12 -0
- package/dist/constants.d.ts.map +1 -1
- package/dist/index.es.mjs +8 -8
- package/dist/index.es.mjs.map +1 -1
- package/dist/index.umd.js +8 -8
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
package/Accordion.tsx
CHANGED
|
@@ -46,7 +46,7 @@ export const Accordion: React.FC<
|
|
|
46
46
|
headingClassName ?? CssClasses.summaryColor
|
|
47
47
|
)}
|
|
48
48
|
>
|
|
49
|
-
<
|
|
49
|
+
<span className={CssClasses.summaryDiv}>
|
|
50
50
|
{Boolean(iconEl) && <span className={CssClasses.icon}>{iconEl}</span>}
|
|
51
51
|
|
|
52
52
|
{Icon && !iconEl && <Icon className={CssClasses.icon} />}
|
|
@@ -54,31 +54,31 @@ export const Accordion: React.FC<
|
|
|
54
54
|
{(Icon || iconEl) && separator && (
|
|
55
55
|
<hr className={CssClasses.separator} />
|
|
56
56
|
)}
|
|
57
|
-
<
|
|
58
|
-
<
|
|
57
|
+
<span className="flex-grow pr-16px">
|
|
58
|
+
<span
|
|
59
59
|
className={clsx(
|
|
60
60
|
titleClassName ?? CssClasses.summaryTitleColor,
|
|
61
61
|
CssClasses.summaryTitle
|
|
62
62
|
)}
|
|
63
63
|
>
|
|
64
64
|
{title}
|
|
65
|
-
</
|
|
65
|
+
</span>
|
|
66
66
|
{description && (
|
|
67
|
-
<
|
|
67
|
+
<span
|
|
68
68
|
className={clsx(
|
|
69
69
|
CssClasses.summaryDescription,
|
|
70
70
|
descriptionClassName ?? CssClasses.summaryDescriptionColor
|
|
71
71
|
)}
|
|
72
72
|
>
|
|
73
73
|
{description}
|
|
74
|
-
</
|
|
74
|
+
</span>
|
|
75
75
|
)}
|
|
76
|
-
</
|
|
76
|
+
</span>
|
|
77
77
|
<IconChevronDownSmall
|
|
78
78
|
strokeColor="gray-300"
|
|
79
79
|
className={clsx('open:icon-dark-gray-500', CssClasses.chevron)}
|
|
80
80
|
/>
|
|
81
|
-
</
|
|
81
|
+
</span>
|
|
82
82
|
</summary>
|
|
83
83
|
<div ref={content} className={CssClasses.contentWrapper}>
|
|
84
84
|
{fullWidthContent ? (
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @cypress-design/react-accordion
|
|
2
2
|
|
|
3
|
+
## 0.1.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`34a646b`](https://github.com/cypress-io/cypress-design/commit/34a646bbb5ae613d3ede0f63ac62c8a6bf31dd82) Thanks [@elevatebart](https://github.com/elevatebart)! - replace div with spans inside summary for html5 validation
|
|
8
|
+
|
|
9
|
+
## 0.1.5
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`e590bdc`](https://github.com/cypress-io/cypress-design/commit/e590bdc4a1f076e00fd1c5d41c461880fbff53d1) Thanks [@elevatebart](https://github.com/elevatebart)! - ci: add changeset
|
|
14
|
+
|
|
3
15
|
## 0.1.4
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
package/dist/constants.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU;;;;;;;;;;;;;CActB,CAAA;AAED,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,CAAA;IACV;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED,eAAO,MAAM,SAAS,wFACiE,CAAA"}
|
package/dist/index.es.mjs
CHANGED
|
@@ -43,8 +43,8 @@ function __rest$1(s, e) {
|
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
var CssClasses = {
|
|
46
|
-
summary: 'details-none card open:rounded-b-none
|
|
47
|
-
summaryDiv: 'flex flex-row py-12px px-24px flex-nowrap items-center',
|
|
46
|
+
summary: 'details-none card open:rounded-b-none',
|
|
47
|
+
summaryDiv: 'flex flex-row py-12px px-24px flex-nowrap items-center min-h-63px',
|
|
48
48
|
summaryColor: 'bg-white',
|
|
49
49
|
summaryTitle: 'text-18px leading-28px font-medium',
|
|
50
50
|
summaryTitleColor: 'text-indigo-500',
|
|
@@ -98,7 +98,7 @@ function __rest(s, e) {
|
|
|
98
98
|
var compileReactIconProperties = function (_a) {
|
|
99
99
|
var body = _a.body, compiledClasses = _a.compiledClasses, size = _a.size, attributes = __rest(_a, ["body", "compiledClasses", "size"]);
|
|
100
100
|
var filteredAttributes = Object.keys(attributes).reduce(function (newAttributes, attrName) {
|
|
101
|
-
if (!ICON_COLOR_PROP_NAMES.includes(attrName)) {
|
|
101
|
+
if (!ICON_COLOR_PROP_NAMES.includes(attrName) && attrName !== 'name') {
|
|
102
102
|
newAttributes[attrName] =
|
|
103
103
|
attributes[attrName];
|
|
104
104
|
}
|
|
@@ -141,18 +141,18 @@ var Accordion = function (_a) {
|
|
|
141
141
|
}, []);
|
|
142
142
|
return (React.createElement("details", __assign$1({}, rest, { className: clsx(rest.className), ref: details }),
|
|
143
143
|
React.createElement("summary", { className: clsx(CssClasses.summary, headingClassName !== null && headingClassName !== void 0 ? headingClassName : CssClasses.summaryColor) },
|
|
144
|
-
React.createElement("
|
|
144
|
+
React.createElement("span", { className: CssClasses.summaryDiv },
|
|
145
145
|
Boolean(iconEl) && React.createElement("span", { className: CssClasses.icon }, iconEl),
|
|
146
146
|
Icon && !iconEl && React.createElement(Icon, { className: CssClasses.icon }),
|
|
147
147
|
(Icon || iconEl) && separator && (React.createElement("hr", { className: CssClasses.separator })),
|
|
148
|
-
React.createElement("
|
|
149
|
-
React.createElement("
|
|
150
|
-
description && (React.createElement("
|
|
148
|
+
React.createElement("span", { className: "flex-grow pr-16px" },
|
|
149
|
+
React.createElement("span", { className: clsx(titleClassName !== null && titleClassName !== void 0 ? titleClassName : CssClasses.summaryTitleColor, CssClasses.summaryTitle) }, title),
|
|
150
|
+
description && (React.createElement("span", { className: clsx(CssClasses.summaryDescription, descriptionClassName !== null && descriptionClassName !== void 0 ? descriptionClassName : CssClasses.summaryDescriptionColor) }, description))),
|
|
151
151
|
React.createElement(IconChevronDownSmall, { strokeColor: "gray-300", className: clsx('open:icon-dark-gray-500', CssClasses.chevron) }))),
|
|
152
152
|
React.createElement("div", { ref: content, className: CssClasses.contentWrapper }, fullWidthContent ? (React.createElement(React.Fragment, null, children)) : (React.createElement("div", { className: CssClasses.content }, children)))));
|
|
153
153
|
};
|
|
154
154
|
|
|
155
155
|
export { Accordion as default };
|
|
156
156
|
|
|
157
|
-
/* <windicss-keep class="flex-grow pr-16px open:icon-dark-gray-500 details-none card open:rounded-b-none
|
|
157
|
+
/* <windicss-keep class="flex-grow pr-16px open:icon-dark-gray-500 details-none card open:rounded-b-none flex flex-row py-12px px-24px flex-nowrap items-center min-h-63px bg-white text-18px leading-28px font-medium text-indigo-500 text-14px leading-20px font-normal text-gray-700 mr-24px flex-shrink-0 w-1px h-40px bg-gray-100 mr-16px transition transform rotate-0 open:rotate-180 border border-gray-100 rounded-b-md border-t-0 py-16px"> */
|
|
158
158
|
//# sourceMappingURL=index.es.mjs.map
|