@cypress-design/react-accordion 0.1.6 → 0.2.0

package/Accordion.rootstory.tsx

@@ -16,7 +16,7 @@ export default (options: AccordionStoryOptions = {}) => {
     ...rest
   } = options
   return (
-    <div className="m-16px">
+    <div className="m-[16px]">
       <Accordion
         title={title}
         description={description}

package/Accordion.tsx

@@ -52,9 +52,9 @@ export const Accordion: React.FC<
           {Icon && !iconEl && <Icon className={CssClasses.icon} />}
 
           {(Icon || iconEl) && separator && (
-            <hr className={CssClasses.separator} />
+            <span className={CssClasses.separator} aria-role="separator" />
           )}
-          <span className="flex-grow pr-16px">
+          <span className="flex-grow pr-[16px]">
             <span
               className={clsx(
                 titleClassName ?? CssClasses.summaryTitleColor,

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @cypress-design/react-accordion
 
+## 0.2.0
+
+### Minor Changes
+
+- [#151](https://github.com/cypress-io/cypress-design/pull/151) [`8b0e735`](https://github.com/cypress-io/cypress-design/commit/8b0e7356eb64a6b3583d3486dda8ecbb11c34cca) Thanks [@elevatebart](https://github.com/elevatebart)! - refactor: use clases compatible with both windi and tailwind
+
+### Patch Changes
+
+- Updated dependencies [[`106b61a`](https://github.com/cypress-io/cypress-design/commit/106b61a97888f956a4c9d235fde5efb4243e1445), [`7b4f416`](https://github.com/cypress-io/cypress-design/commit/7b4f4162a0d150aa8cab7ec239faebb58c39464d)]:
+  - @cypress-design/react-icon@0.17.0
+
+## 0.1.7
+
+### Patch Changes
+
+- [`ff54d5c`](https://github.com/cypress-io/cypress-design/commit/ff54d5c098bec93083b9c2ecc84439a0d3878f56) Thanks [@elevatebart](https://github.com/elevatebart)! - fix hr into span
+
 ## 0.1.6
 
 ### Patch Changes

package/dist/index.es.mjs

@@ -44,17 +44,17 @@ function __rest$1(s, e) {
 
 var CssClasses = {
     summary: 'details-none card open:rounded-b-none',
-    summaryDiv: 'flex flex-row py-12px px-24px flex-nowrap items-center min-h-63px',
+    summaryDiv: 'flex flex-row py-[12px] px-[24px] flex-nowrap items-center min-h-[63px]',
     summaryColor: 'bg-white',
-    summaryTitle: 'text-18px leading-28px font-medium',
-    summaryTitleColor: 'text-indigo-500',
-    summaryDescription: 'text-14px leading-20px font-normal',
+    summaryTitle: 'text-[18px] leading-[28px] font-medium',
+    summaryTitleColor: 'text-indigo-500 block',
+    summaryDescription: 'text-[14px] leading-[20px] font-normal block',
     summaryDescriptionColor: 'text-gray-700',
-    icon: 'mr-24px flex-shrink-0',
-    separator: 'w-1px h-40px bg-gray-100 mr-16px',
+    icon: 'mr-[24px] flex-shrink-0',
+    separator: 'w-[1px] h-[40px] bg-gray-100 mr-[16px]',
     chevron: 'flex-shrink-0 transition transform rotate-0 open:rotate-180',
     contentWrapper: 'border border-gray-100 rounded-b-md border-t-0',
-    content: 'px-24px py-16px'
+    content: 'px-[24px] py-[16px]'
 };
 
 /******************************************************************************
@@ -144,8 +144,8 @@ var Accordion = function (_a) {
             React.createElement("span", { className: CssClasses.summaryDiv },
                 Boolean(iconEl) && React.createElement("span", { className: CssClasses.icon }, iconEl),
                 Icon && !iconEl && React.createElement(Icon, { className: CssClasses.icon }),
-                (Icon || iconEl) && separator && (React.createElement("hr", { className: CssClasses.separator })),
-                React.createElement("span", { className: "flex-grow pr-16px" },
+                (Icon || iconEl) && separator && (React.createElement("span", { className: CssClasses.separator, "aria-role": "separator" })),
+                React.createElement("span", { className: "flex-grow pr-[16px]" },
                     React.createElement("span", { className: clsx(titleClassName !== null && titleClassName !== void 0 ? titleClassName : CssClasses.summaryTitleColor, CssClasses.summaryTitle) }, title),
                     description && (React.createElement("span", { className: clsx(CssClasses.summaryDescription, descriptionClassName !== null && descriptionClassName !== void 0 ? descriptionClassName : CssClasses.summaryDescriptionColor) }, description))),
                 React.createElement(IconChevronDownSmall, { strokeColor: "gray-300", className: clsx('open:icon-dark-gray-500', CssClasses.chevron) }))),
@@ -154,5 +154,5 @@ var Accordion = function (_a) {
 
 export { Accordion as default };
 
-/* <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"> */
+/* <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]"> */
 //# sourceMappingURL=index.es.mjs.map