@cypress-design/vue-accordion 0.1.7 → 0.2.0

package/Accordion.rootstory.tsx

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

package/Accordion.vue

@@ -6,14 +6,15 @@
       <span :class="CssClasses.summaryDiv">
         <span :class="CssClasses.icon">
           <slot name="iconEl">
-            <Icon />
+            <Icon v-if="props.icon" />
           </slot>
         </span>
         <span
           v-if="(props.icon || slots.iconEl) && separator"
           :class="CssClasses.separator"
+          aria-role="separator"
         />
-        <span class="flex-grow pr-16px">
+        <span class="flex-grow pr-[16px]">
           <span
             :class="[
               titleClassName ? titleClassName : CssClasses.summaryTitleColor,

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @cypress-design/vue-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/vue-icon@0.18.0
+
+## 0.1.8
+
+### Patch Changes
+
+- [`6ec15ab`](https://github.com/cypress-io/cypress-design/commit/6ec15ab28355dac5cb0fbc55397f192a3fd68e19) Thanks [@elevatebart](https://github.com/elevatebart)! - avoid warnings on accordions when no icon
+
 ## 0.1.7
 
 ### Patch Changes

package/dist/index.es.mjs

@@ -1,29 +1,29 @@
-import { h as v, defineComponent as b, useSlots as w, ref as x, onMounted as N, openBlock as p, createElementBlock as y, createElementVNode as i, normalizeClass as t, unref as o, renderSlot as C, createVNode as k, createCommentVNode as h, toDisplayString as g } from "vue";
-import { DetailsAnimation as $ } from "@cypress-design/details-animation";
-import * as D from "@cypress-design/icon-registry";
-import { ICON_COLOR_PROP_NAMES as z } from "@cypress-design/icon-registry";
+import { h as g, defineComponent as v, useSlots as b, ref as x, onMounted as w, openBlock as d, createElementBlock as y, createElementVNode as i, normalizeClass as s, unref as o, renderSlot as C, createBlock as N, createCommentVNode as k, toDisplayString as h, createVNode as $ } from "vue";
+import { DetailsAnimation as D } from "@cypress-design/details-animation";
+import * as z from "@cypress-design/icon-registry";
+import { ICON_COLOR_PROP_NAMES as B } from "@cypress-design/icon-registry";
 const n = {
   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",
+  summaryTitle: "text-[18px] leading-[28px] font-medium",
   summaryTitleColor: "text-indigo-500 block",
-  summaryDescription: "text-14px leading-20px font-normal 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]"
 }, E = ({
   body: e,
-  compiledClasses: s,
+  compiledClasses: t,
   size: r,
-  class: l,
-  interactiveColorsOnGroup: d,
-  ...u
+  class: a,
+  interactiveColorsOnGroup: u,
+  ...p
 }) => {
-  const c = Object.keys(u).reduce((m, a) => (!z.includes(a) && a !== "name" && (m[a] = u[a]), m), {}), f = {
+  const c = Object.keys(p).reduce((m, l) => (!B.includes(l) && l !== "name" && (m[l] = p[l]), m), {}), f = {
     width: r,
     height: r,
     viewBox: `0 0 ${r} ${r}`,
@@ -31,21 +31,21 @@ const n = {
     innerHTML: e,
     ...c
   };
-  return s.length && (f.class = s.join(" ")), f;
+  return t.length && (f.class = t.join(" ")), f;
 }, O = (e) => {
-  const { sizeWithDefault: s, compiledClasses: r } = D.getComponentAttributes({ ...e, availableSizes: ["8", "16"] }), l = {
+  const { sizeWithDefault: t, compiledClasses: r } = z.getComponentAttributes({ ...e, availableSizes: ["8", "16"] }), a = {
     8: '<path d="m1 2.5 3 3 3-3" stroke="currentColor" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
     16: '<path d="m4 6 4 4 4-4" stroke="currentColor" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
-  }[s];
-  if (!l)
-    throw Error(`Icon "chevron-down-small" is not available in size ${s}`);
-  return v("svg", E({
+  }[t];
+  if (!a)
+    throw Error(`Icon "chevron-down-small" is not available in size ${t}`);
+  return g("svg", E({
     ...e,
-    size: s,
-    body: l,
+    size: t,
+    body: a,
     compiledClasses: r
   }));
-}, B = { class: "flex-grow pr-16px" }, j = /* @__PURE__ */ b({
+}, S = { class: "flex-grow pr-[16px]" }, A = /* @__PURE__ */ v({
   __name: "Accordion",
   props: {
     title: null,
@@ -58,63 +58,64 @@ const n = {
     fullWidthContent: { type: Boolean }
   },
   setup(e) {
-    const s = e, r = w(), l = x(null), d = x(null);
-    N(function() {
-      d.value && l.value && new $(d.value, l.value);
+    const t = e, r = b(), a = x(null), u = x(null);
+    w(function() {
+      u.value && a.value && new D(u.value, a.value);
     });
-    const u = s.icon;
+    const p = t.icon;
     return (c, f) => {
-      var m, a;
-      return p(), y("details", {
+      var m, l;
+      return d(), y("details", {
         ref_key: "$details",
-        ref: d
+        ref: u
       }, [
         i("summary", {
-          class: t([o(n).summary, (m = e.headingClassName) != null ? m : o(n).summaryColor])
+          class: s([o(n).summary, (m = e.headingClassName) != null ? m : o(n).summaryColor])
         }, [
           i("span", {
-            class: t(o(n).summaryDiv)
+            class: s(o(n).summaryDiv)
           }, [
             i("span", {
-              class: t(o(n).icon)
+              class: s(o(n).icon)
             }, [
               C(c.$slots, "iconEl", {}, () => [
-                k(o(u))
+                t.icon ? (d(), N(o(p), { key: 0 })) : k("", !0)
               ])
             ], 2),
-            (s.icon || o(r).iconEl) && e.separator ? (p(), y("span", {
+            (t.icon || o(r).iconEl) && e.separator ? (d(), y("span", {
               key: 0,
-              class: t(o(n).separator)
-            }, null, 2)) : h("", !0),
-            i("span", B, [
+              class: s(o(n).separator),
+              "aria-role": "separator"
+            }, null, 2)) : k("", !0),
+            i("span", S, [
               i("span", {
-                class: t([
+                class: s([
                   e.titleClassName ? e.titleClassName : o(n).summaryTitleColor,
                   o(n).summaryTitle
                 ])
-              }, g(e.title), 3),
-              e.description ? (p(), y("span", {
+              }, h(e.title), 3),
+              e.description ? (d(), y("span", {
                 key: 0,
-                class: t([
+                class: s([
                   o(n).summaryDescription,
-                  (a = e.descriptionClassName) != null ? a : o(n).summaryDescriptionColor
+                  (l = e.descriptionClassName) != null ? l : o(n).summaryDescriptionColor
                 ])
-              }, g(e.description), 3)) : h("", !0)
+              }, h(e.description), 3)) : k("", !0)
             ]),
-            k(o(O), {
+            $(o(O), {
               strokeColor: "gray-300",
-              class: t(["open:icon-dark-gray-500", o(n).chevron])
+              class: s(["open:icon-dark-gray-500", o(n).chevron])
             }, null, 8, ["class"])
           ], 2)
         ], 2),
         i("div", {
           ref_key: "$content",
-          ref: l,
-          class: t(o(n).contentWrapper)
+          ref: a,
+          class: s(o(n).contentWrapper)
         }, [
-          e.fullWidthContent ? C(c.$slots, "default", { key: 0 }) : (p(), y("div", {
+          e.fullWidthContent ? C(c.$slots, "default", { key: 0 }) : (d(), y("div", {
             key: 1,
-            class: t(o(n).content)
+            class: s(o(n).content)
           }, [
             C(c.$slots, "default")
           ], 2))
@@ -124,8 +125,8 @@ const n = {
   }
 });
 export {
-  j as default
+  A as default
 };
 
-/* <windicss-keep class="flex-grow pr-16px open:icon-dark-gray-500 icon-dark-gray-300 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"> */
+/* <windicss-keep class="flex-grow pr-[16px] open:icon-dark-gray-500 icon-dark-gray-300 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