@cypress-design/react-accordion 0.1.5 → 0.1.7

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 +9 -9
  2. package/CHANGELOG.md +12 -0
  3. package/dist/index.es.mjs +9 -9
  4. package/dist/index.es.mjs.map +1 -1
  5. package/dist/index.umd.js +9 -9
  6. package/dist/index.umd.js.map +1 -1
  7. package/package.json +1 -1
package/Accordion.tsx CHANGED
@@ -46,39 +46,39 @@ 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} />}
53
53
 
54
54
  {(Icon || iconEl) && separator && (
55
- <hr className={CssClasses.separator} />
55
+ <span 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.7
4
+
5
+ ### Patch Changes
6
+
7
+ - [`ff54d5c`](https://github.com/cypress-io/cypress-design/commit/ff54d5c098bec93083b9c2ecc84439a0d3878f56) Thanks [@elevatebart](https://github.com/elevatebart)! - fix hr into span
8
+
9
+ ## 0.1.6
10
+
11
+ ### Patch Changes
12
+
13
+ - [`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
14
+
3
15
  ## 0.1.5
4
16
 
5
17
  ### Patch Changes
package/dist/index.es.mjs CHANGED
@@ -47,8 +47,8 @@ var CssClasses = {
47
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
- summaryTitleColor: 'text-indigo-500',
51
- summaryDescription: 'text-14px leading-20px font-normal',
50
+ summaryTitleColor: 'text-indigo-500 block',
51
+ summaryDescription: 'text-14px leading-20px font-normal block',
52
52
  summaryDescriptionColor: 'text-gray-700',
53
53
  icon: 'mr-24px flex-shrink-0',
54
54
  separator: 'w-1px h-40px bg-gray-100 mr-16px',
@@ -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
- (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))),
147
+ (Icon || iconEl) && separator && (React.createElement("span", { className: CssClasses.separator })),
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 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"> */
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 block 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