@cypress-design/vue-accordion 0.2.0 → 0.3.0

package/.turbo/turbo-build.log

@@ -0,0 +1,13 @@
+$ yarn build:module && yarn build:types
+$ yarn vite build
+$ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vite build
+vite v4.2.1 building for production...
+transforming...
+✓ 5 modules transformed.
+rendering chunks...
+computing gzip size...
+dist/index.es.mjs  4.96 kB │ gzip: 1.84 kB │ map: 263.66 kB
+dist/index.umd.js  4.69 kB │ gzip: 1.81 kB │ map: 263.42 kB
+✓ built in 5.84s
+$ yarn vue-tsc --project ./tsconfig.build.json
+$ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vue-tsc --project ./tsconfig.build.json

package/Accordion.vue

@@ -12,7 +12,7 @@
         <span
           v-if="(props.icon || slots.iconEl) && separator"
           :class="CssClasses.separator"
-          aria-role="separator"
+          role="separator"
         />
         <span class="flex-grow pr-[16px]">
           <span

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @cypress-design/vue-accordion
 
+## 0.3.0
+
+### Minor Changes
+
+- [#178](https://github.com/cypress-io/cypress-design/pull/178) [`d0de778`](https://github.com/cypress-io/cypress-design/commit/d0de77843adb87d8f4804219c6dca8f45b15c650) Thanks [@elevatebart](https://github.com/elevatebart)! - deliver new docs and improved components
+
+### Patch Changes
+
+- Updated dependencies [[`18399c7`](https://github.com/cypress-io/cypress-design/commit/18399c72a52288c67af0935384430d4e4cd24251), [`d0de778`](https://github.com/cypress-io/cypress-design/commit/d0de77843adb87d8f4804219c6dca8f45b15c650)]:
+  - @cypress-design/vue-icon@0.20.0
+  - @cypress-design/details-animation@0.1.0
+
+## 0.2.1
+
+### Patch Changes
+
+- [`c798320`](https://github.com/cypress-io/cypress-design/commit/c798320236ec41a43eb74be80f407781e980aaf0) Thanks [@elevatebart](https://github.com/elevatebart)! - fix the aria-role of accordion separator
+
 ## 0.2.0
 
 ### Minor Changes

package/ReadMe.md

@@ -4,7 +4,7 @@
 
 Collapsible component with a header and a body.
 
-## install
+## Install
 
 ```bash
 npm install @cypress-design/vue-accordion
@@ -22,16 +22,22 @@ yarn add @cypress-design/vue-accordion
 import Accordion from '@cypress-design/vue-accordion'
 ```
 
-```vue
-<Accordion
-  :icon="IconActionQuestionMarkCircle"
-  title="Accordion Title"
-  description="Vestibulum id ligula porta felis euismod semper. Nulla... "
-  separator
-  open
-  fullWidthContent
->
-  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio dolore omnis
-  nemo minus, sapiente magni ...
-</Accordion>
+```vue live
+<script lang="ts" setup>
+import { IconActionQuestionMarkCircle } from '@cypress-design/vue-icon'
+</script>
+
+<template>
+  <Accordion
+    :icon="IconActionQuestionMarkCircle"
+    title="Accordion Title"
+    description="Vestibulum id ligula porta felis euismod semper. Nulla... "
+    separator
+    open
+    fullWidthContent
+  >
+    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio dolore omnis
+    nemo minus, sapiente magni ...
+  </Accordion>
+</template>
 ```

package/dist/index.es.mjs

@@ -1,4 +1,4 @@
-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 { h as g, defineComponent as v, useSlots as b, ref as x, onMounted as w, openBlock as c, createElementBlock as p, createElementVNode as a, normalizeClass as s, unref as o, renderSlot as f, createBlock as N, createCommentVNode as C, 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";
@@ -19,30 +19,34 @@ const n = {
   body: e,
   compiledClasses: t,
   size: r,
-  class: a,
-  interactiveColorsOnGroup: u,
-  ...p
+  class: l,
+  interactiveColorsOnGroup: m,
+  ...d
 }) => {
-  const c = Object.keys(p).reduce((m, l) => (!B.includes(l) && l !== "name" && (m[l] = p[l]), m), {}), f = {
+  const i = Object.keys(d).reduce(
+    (k, u) => (!B.includes(u) && u !== "name" && (k[u] = d[u]), k),
+    {}
+  ), y = {
     width: r,
     height: r,
     viewBox: `0 0 ${r} ${r}`,
     fill: "none",
     innerHTML: e,
-    ...c
+    ...i
+    // add all standard attributes back to the svg tag
   };
-  return t.length && (f.class = t.join(" ")), f;
+  return t.length && (y.class = t.join(" ")), y;
 }, O = (e) => {
-  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"/>'
+  const { sizeWithDefault: t, compiledClasses: r } = z.getComponentAttributes({ ...e, availableSizes: ["8", "16"] }), l = {
+    8: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 2.5 3 3 3-3" class="icon-dark"/>',
+    16: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m4 6 4 4 4-4" class="icon-dark"/>'
   }[t];
-  if (!a)
+  if (!l)
     throw Error(`Icon "chevron-down-small" is not available in size ${t}`);
   return g("svg", E({
     ...e,
     size: t,
-    body: a,
+    body: l,
     compiledClasses: r
   }));
 }, S = { class: "flex-grow pr-[16px]" }, A = /* @__PURE__ */ v({
@@ -58,75 +62,72 @@ const n = {
     fullWidthContent: { type: Boolean }
   },
   setup(e) {
-    const t = e, r = b(), a = x(null), u = x(null);
+    const t = e, r = b(), l = x(null), m = x(null);
     w(function() {
-      u.value && a.value && new D(u.value, a.value);
+      m.value && l.value && new D(m.value, l.value);
     });
-    const p = t.icon;
-    return (c, f) => {
-      var m, l;
-      return d(), y("details", {
-        ref_key: "$details",
-        ref: u
+    const d = t.icon;
+    return (i, y) => (c(), p("details", {
+      ref_key: "$details",
+      ref: m
+    }, [
+      a("summary", {
+        class: s([o(n).summary, e.headingClassName ?? o(n).summaryColor])
       }, [
-        i("summary", {
-          class: s([o(n).summary, (m = e.headingClassName) != null ? m : o(n).summaryColor])
+        a("span", {
+          class: s(o(n).summaryDiv)
         }, [
-          i("span", {
-            class: s(o(n).summaryDiv)
+          a("span", {
+            class: s(o(n).icon)
           }, [
-            i("span", {
-              class: s(o(n).icon)
-            }, [
-              C(c.$slots, "iconEl", {}, () => [
-                t.icon ? (d(), N(o(p), { key: 0 })) : k("", !0)
+            f(i.$slots, "iconEl", {}, () => [
+              t.icon ? (c(), N(o(d), { key: 0 })) : C("", !0)
+            ])
+          ], 2),
+          (t.icon || o(r).iconEl) && e.separator ? (c(), p("span", {
+            key: 0,
+            class: s(o(n).separator),
+            role: "separator"
+          }, null, 2)) : C("", !0),
+          a("span", S, [
+            a("span", {
+              class: s([
+                e.titleClassName ? e.titleClassName : o(n).summaryTitleColor,
+                o(n).summaryTitle
               ])
-            ], 2),
-            (t.icon || o(r).iconEl) && e.separator ? (d(), y("span", {
+            }, h(e.title), 3),
+            e.description ? (c(), p("span", {
               key: 0,
-              class: s(o(n).separator),
-              "aria-role": "separator"
-            }, null, 2)) : k("", !0),
-            i("span", S, [
-              i("span", {
-                class: s([
-                  e.titleClassName ? e.titleClassName : o(n).summaryTitleColor,
-                  o(n).summaryTitle
-                ])
-              }, h(e.title), 3),
-              e.description ? (d(), y("span", {
-                key: 0,
-                class: s([
-                  o(n).summaryDescription,
-                  (l = e.descriptionClassName) != null ? l : o(n).summaryDescriptionColor
-                ])
-              }, h(e.description), 3)) : k("", !0)
-            ]),
-            $(o(O), {
-              strokeColor: "gray-300",
-              class: s(["open:icon-dark-gray-500", o(n).chevron])
-            }, null, 8, ["class"])
-          ], 2)
-        ], 2),
-        i("div", {
-          ref_key: "$content",
-          ref: a,
-          class: s(o(n).contentWrapper)
-        }, [
-          e.fullWidthContent ? C(c.$slots, "default", { key: 0 }) : (d(), y("div", {
-            key: 1,
-            class: s(o(n).content)
-          }, [
-            C(c.$slots, "default")
-          ], 2))
+              class: s([
+                o(n).summaryDescription,
+                e.descriptionClassName ?? o(n).summaryDescriptionColor
+              ])
+            }, h(e.description), 3)) : C("", !0)
+          ]),
+          $(o(O), {
+            strokeColor: "gray-300",
+            class: s(["open:icon-dark-gray-500", o(n).chevron])
+          }, null, 8, ["class"])
         ], 2)
-      ], 512);
-    };
+      ], 2),
+      a("div", {
+        ref_key: "$content",
+        ref: l,
+        class: s(o(n).contentWrapper)
+      }, [
+        e.fullWidthContent ? f(i.$slots, "default", { key: 0 }) : (c(), p("div", {
+          key: 1,
+          class: s(o(n).content)
+        }, [
+          f(i.$slots, "default")
+        ], 2))
+      ], 2)
+    ], 512));
   }
 });
 export {
   A as default
 };
+//# sourceMappingURL=index.es.mjs.map
 
 /* <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