@cypress-design/react-accordion 0.1.5 → 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.
Files changed (7) hide show
  1. package/Accordion.tsx +8 -8
  2. package/CHANGELOG.md +6 -0
  3. package/dist/index.es.mjs +5 -5
  4. package/dist/index.es.mjs.map +1 -1
  5. package/dist/index.umd.js +5 -5
  6. package/dist/index.umd.js.map +1 -1
  7. 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
- <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,11 @@
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
+
3
9
  ## 0.1.5
4
10
 
5
11
  ### Patch Changes
package/dist/index.es.mjs CHANGED
@@ -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,13 +141,13 @@ 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
  };