@cypress-design/react-accordion 0.1.1 → 0.1.3

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 (9) hide show
  1. package/Accordion.tsx +25 -23
  2. package/CHANGELOG.md +12 -0
  3. package/dist/constants.d.ts +1 -1
  4. package/dist/index.es.mjs +11 -10
  5. package/dist/index.es.mjs.map +1 -1
  6. package/dist/index.umd.js +11 -10
  7. package/dist/index.umd.js.map +1 -1
  8. package/dist/react/Accordion.d.ts.map +1 -1
  9. package/package.json +1 -1
package/Accordion.tsx CHANGED
@@ -46,37 +46,39 @@ export const Accordion: React.FC<
46
46
  headingClassName ?? CssClasses.summaryColor
47
47
  )}
48
48
  >
49
- {Boolean(iconEl) && <span className={CssClasses.icon}>{iconEl}</span>}
49
+ <div className={CssClasses.summaryDiv}>
50
+ {Boolean(iconEl) && <span className={CssClasses.icon}>{iconEl}</span>}
50
51
 
51
- {Icon && !iconEl && <Icon className={CssClasses.icon} />}
52
+ {Icon && !iconEl && <Icon className={CssClasses.icon} />}
52
53
 
53
- {(Icon || iconEl) && separator && (
54
- <hr className={CssClasses.separator} />
55
- )}
56
- <div className="flex-grow pr-16px">
57
- <div
58
- className={clsx(
59
- titleClassName ?? CssClasses.summaryTitleColor,
60
- CssClasses.summaryTitle
61
- )}
62
- >
63
- {title}
64
- </div>
65
- {description && (
54
+ {(Icon || iconEl) && separator && (
55
+ <hr className={CssClasses.separator} />
56
+ )}
57
+ <div className="flex-grow pr-16px">
66
58
  <div
67
59
  className={clsx(
68
- CssClasses.summaryDescription,
69
- descriptionClassName ?? CssClasses.summaryDescriptionColor
60
+ titleClassName ?? CssClasses.summaryTitleColor,
61
+ CssClasses.summaryTitle
70
62
  )}
71
63
  >
72
- {description}
64
+ {title}
73
65
  </div>
74
- )}
66
+ {description && (
67
+ <div
68
+ className={clsx(
69
+ CssClasses.summaryDescription,
70
+ descriptionClassName ?? CssClasses.summaryDescriptionColor
71
+ )}
72
+ >
73
+ {description}
74
+ </div>
75
+ )}
76
+ </div>
77
+ <IconChevronDownSmall
78
+ strokeColor="gray-300"
79
+ className={clsx('open:icon-dark-gray-500', CssClasses.chevron)}
80
+ />
75
81
  </div>
76
- <IconChevronDownSmall
77
- strokeColor="gray-300"
78
- className={clsx('open:icon-dark-gray-500', CssClasses.chevron)}
79
- />
80
82
  </summary>
81
83
  <div ref={content} className={CssClasses.contentWrapper}>
82
84
  {fullWidthContent ? (
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @cypress-design/react-accordion
2
2
 
3
+ ## 0.1.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [`6cece49`](https://github.com/cypress-io/cypress-design/commit/6cece49fc60db7046df81a3f77e9a696326e55a9) Thanks [@elevatebart](https://github.com/elevatebart)! - feat: adapt accordion to safari 14
8
+
9
+ ## 0.1.2
10
+
11
+ ### Patch Changes
12
+
13
+ - [`68718d5`](https://github.com/cypress-io/cypress-design/commit/68718d5b75ac8affec83d3af3c849c8288282aa3) Thanks [@elevatebart](https://github.com/elevatebart)! - add flex-nowrap to accomodate safari 14 (on percy)
14
+
3
15
  ## 0.1.1
4
16
 
5
17
  ### Patch Changes
package/dist/constants.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export declare const CssClasses: {
2
- details: string;
3
2
  summary: string;
3
+ summaryDiv: string;
4
4
  summaryColor: string;
5
5
  summaryTitle: string;
6
6
  summaryTitleColor: string;
package/dist/index.es.mjs CHANGED
@@ -43,8 +43,8 @@ function __rest$1(s, e) {
43
43
  }
44
44
 
45
45
  var CssClasses = {
46
- details: '',
47
- summary: 'details-none min-h-65px py-12px card open:rounded-b-none px-24px flex flex-row 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-65px',
48
48
  summaryColor: 'bg-white',
49
49
  summaryTitle: 'text-18px leading-28px font-medium',
50
50
  summaryTitleColor: 'text-indigo-500',
@@ -141,17 +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
- Boolean(iconEl) && React.createElement("span", { className: CssClasses.icon }, iconEl),
145
- Icon && !iconEl && React.createElement(Icon, { className: CssClasses.icon }),
146
- (Icon || iconEl) && separator && (React.createElement("hr", { className: CssClasses.separator })),
147
- React.createElement("div", { className: "flex-grow pr-16px" },
148
- React.createElement("div", { className: clsx(titleClassName !== null && titleClassName !== void 0 ? titleClassName : CssClasses.summaryTitleColor, CssClasses.summaryTitle) }, title),
149
- description && (React.createElement("div", { className: clsx(CssClasses.summaryDescription, descriptionClassName !== null && descriptionClassName !== void 0 ? descriptionClassName : CssClasses.summaryDescriptionColor) }, description))),
150
- React.createElement(IconChevronDownSmall, { strokeColor: "gray-300", className: clsx('open:icon-dark-gray-500', CssClasses.chevron) })),
144
+ React.createElement("div", { className: CssClasses.summaryDiv },
145
+ Boolean(iconEl) && React.createElement("span", { className: CssClasses.icon }, iconEl),
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))),
151
+ React.createElement(IconChevronDownSmall, { strokeColor: "gray-300", className: clsx('open:icon-dark-gray-500', CssClasses.chevron) }))),
151
152
  React.createElement("div", { ref: content, className: CssClasses.contentWrapper }, fullWidthContent ? (React.createElement(React.Fragment, null, children)) : (React.createElement("div", { className: CssClasses.content }, children)))));
152
153
  };
153
154
 
154
155
  export { Accordion as default };
155
156
 
156
- /* <windicss-keep class="flex-grow pr-16px open:icon-dark-gray-500 details-none min-h-65px py-12px card open:rounded-b-none px-24px flex flex-row 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-65px 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
158
  //# sourceMappingURL=index.es.mjs.map