@cypress-design/vue-accordion 0.2.1 → 0.4.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.2 building for production...
+transforming...
+✓ 5 modules transformed.
+rendering chunks...
+computing gzip size...
+dist/index.es.mjs  4.56 kB │ gzip: 1.80 kB │ map: 262.64 kB
+dist/index.umd.js  4.29 kB │ gzip: 1.77 kB │ map: 262.39 kB
+✓ built in 5.16s
+$ 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

@@ -51,7 +51,7 @@
 </template>
 
 <script lang="ts" setup>
-import { CssClasses } from '../constants'
+import { CssClasses } from '@cypress-design/constants-accordion'
 import { DetailsAnimation } from '@cypress-design/details-animation'
 import { IconChevronDownSmall } from '@cypress-design/vue-icon'
 import {

package/AccordionVue.cy.tsx

@@ -23,7 +23,7 @@ describe('<Accordion/>', () => {
   }
 
   it('can be passed an icon as a prop', () => {
-    mount(Accordion, {
+    mount(Accordion as any, {
       props: {
         title: 'hi',
         icon: IconActionQuestionMarkCircle,
@@ -32,7 +32,7 @@ describe('<Accordion/>', () => {
   })
 
   it('can be passed an icon as an element', () => {
-    mount(Accordion, {
+    mount(Accordion as any, {
       slots,
       props: {
         title: 'hi',
@@ -41,7 +41,7 @@ describe('<Accordion/>', () => {
   })
 
   it('when passed both icon and iconEl, iconEl overrides icon', () => {
-    mount(Accordion, {
+    mount(Accordion as any, {
       icon: IconActionQuestionMarkCircle,
       slots,
       props: {

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @cypress-design/vue-accordion
 
+## 0.4.0
+
+### Minor Changes
+
+- [#196](https://github.com/cypress-io/cypress-design/pull/196) [`fc6d9e4`](https://github.com/cypress-io/cypress-design/commit/fc6d9e4fedcc01fa8e01b868b0fa66d8895c37d0) Thanks [@elevatebart](https://github.com/elevatebart)! - refactor: avoid constants relative imports
+
+### Patch Changes
+
+- Updated dependencies [[`fc6d9e4`](https://github.com/cypress-io/cypress-design/commit/fc6d9e4fedcc01fa8e01b868b0fa66d8895c37d0)]:
+  - @cypress-design/vue-icon@0.21.0
+
+## 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

package/ReadMe.md

@@ -1,10 +1,6 @@
 # Accordion
 
-## Summary
-
-Collapsible component with a header and a body.
-
-## install
+## Install
 
 ```bash
 npm install @cypress-design/vue-accordion
@@ -22,16 +18,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/Accordion.vue.d.ts

@@ -0,0 +1,93 @@
+import { FunctionalComponent, SVGAttributes } from 'vue';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Main indigo title.
+     * [NOTE] Its color and font can be customized using `titleClassName`.
+     */
+    title: string;
+    /**
+     * Second line in the heading.
+     */
+    description?: string | undefined;
+    /**
+     * Icon to be displayed on the left of the the heading. Overridden by the iconEl slot, if one is provided.
+     */
+    icon?: FunctionalComponent<SVGAttributes, {}> | undefined;
+    /**
+     * Should we add a vertical separator between the icon and the text.
+     */
+    separator?: boolean | undefined;
+    /**
+     * Change the font and color of the heading title
+     */
+    titleClassName?: string | undefined;
+    /**
+     * Change the font and color of the heading description
+     */
+    descriptionClassName?: string | undefined;
+    /**
+     * Additional classes to add to the header of the accordion
+     * > [NOTE] useful to change the background color of the header
+     */
+    headingClassName?: string | undefined;
+    /**
+     * When using content that needs ti be edge to edge,
+     * removes the content wrapper from the content.
+     */
+    fullWidthContent?: boolean | undefined;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Main indigo title.
+     * [NOTE] Its color and font can be customized using `titleClassName`.
+     */
+    title: string;
+    /**
+     * Second line in the heading.
+     */
+    description?: string | undefined;
+    /**
+     * Icon to be displayed on the left of the the heading. Overridden by the iconEl slot, if one is provided.
+     */
+    icon?: FunctionalComponent<SVGAttributes, {}> | undefined;
+    /**
+     * Should we add a vertical separator between the icon and the text.
+     */
+    separator?: boolean | undefined;
+    /**
+     * Change the font and color of the heading title
+     */
+    titleClassName?: string | undefined;
+    /**
+     * Change the font and color of the heading description
+     */
+    descriptionClassName?: string | undefined;
+    /**
+     * Additional classes to add to the header of the accordion
+     * > [NOTE] useful to change the background color of the header
+     */
+    headingClassName?: string | undefined;
+    /**
+     * When using content that needs ti be edge to edge,
+     * removes the content wrapper from the content.
+     */
+    fullWidthContent?: boolean | undefined;
+}>>>, {}>, {
+    iconEl: (_: {}) => any;
+    default: (_: {}) => any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=Accordion.vue.d.ts.map

package/dist/Accordion.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.vue.d.ts","sourceRoot":"","sources":["../Accordion.vue.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,mBAAmB,EACnB,aAAa,EAId,MAAM,KAAK,CAAA;;IAwDV;;;OAGG;WACI,MAAM;IACb;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;;OAGG;;;IAjCH;;;OAGG;WACI,MAAM;IACb;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;;OAGG;;;uBA2K0B,GAAG;wBACF,GAAG;;AAnQnC,wBAuRc;AACd,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAAE,MAAM,EAAE,CAAC,CAAA;KAAE,CAAA;CAAE,CAAC"}

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA"}

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";
@@ -20,22 +20,26 @@ const n = {
   compiledClasses: t,
   size: r,
   class: l,
-  interactiveColorsOnGroup: u,
-  ...p
+  interactiveColorsOnGroup: m,
+  ...d
 }) => {
-  const c = Object.keys(p).reduce((m, a) => (!B.includes(a) && a !== "name" && (m[a] = p[a]), 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"] }), l = {
-    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"/>'
+    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 (!l)
     throw Error(`Icon "chevron-down-small" is not available in size ${t}`);
@@ -58,75 +62,72 @@ const n = {
     fullWidthContent: { type: Boolean }
   },
   setup(e) {
-    const t = e, r = b(), l = x(null), u = x(null);
+    const t = e, r = b(), l = x(null), m = x(null);
     w(function() {
-      u.value && l.value && new D(u.value, l.value);
+      m.value && l.value && new D(m.value, l.value);
     });
-    const p = t.icon;
-    return (c, f) => {
-      var m, a;
-      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),
-              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,
-                  (a = e.descriptionClassName) != null ? a : 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: l,
-          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
 };
-
-/* <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
+
+/* <windicss-keep class="flex-grow pr-[16px] open:icon-dark-gray-500 icon-dark-gray-300"> */