@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 CHANGED
@@ -46,7 +46,7 @@ export const Accordion: React.FC<
46
46
  headingClassName ?? CssClasses.summaryColor
47
47
  )}
48
48
  >
49
- <div className={CssClasses.summaryDiv}>
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
- <div className="flex-grow pr-16px">
58
- <div
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
- </div>
65
+ </span>
66
66
  {description && (
67
- <div
67
+ <span
68
68
  className={clsx(
69
69
  CssClasses.summaryDescription,
70
70
  descriptionClassName ?? CssClasses.summaryDescriptionColor
71
71
  )}
72
72
  >
73
73
  {description}
74
- </div>
74
+ </span>
75
75
  )}
76
- </div>
76
+ </span>
77
77
  <IconChevronDownSmall
78
78
  strokeColor="gray-300"
79
79
  className={clsx('open:icon-dark-gray-500', CssClasses.chevron)}
80
80
  />
81
- </div>
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
@@ -1 +1 @@
1
- {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU;;;;;;;;;;;;;CAatB,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"}
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 min-h-65px',
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("div", { className: CssClasses.summaryDiv },
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("div", { className: "flex-grow pr-16px" },
149
- React.createElement("div", { className: clsx(titleClassName !== null && titleClassName !== void 0 ? titleClassName : CssClasses.summaryTitleColor, CssClasses.summaryTitle) }, title),
150
- description && (React.createElement("div", { className: clsx(CssClasses.summaryDescription, descriptionClassName !== null && descriptionClassName !== void 0 ? descriptionClassName : CssClasses.summaryDescriptionColor) }, description))),
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 min-h-65px flex flex-row py-12px px-24px flex-nowrap items-center 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"> */
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