@cypress-design/vue-accordion 0.1.0 → 0.1.2

package/Accordion.rootstory.tsx

@@ -7,6 +7,7 @@ export default (options: AccordionStoryOptions = {}) => {
     title = 'Accordion Title',
     description = 'Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla.',
     icon = IconActionQuestionMarkCircle,
+    iconEl,
     separator = true,
     open = false,
     fullWidthContent = false,
@@ -24,11 +25,23 @@ export default (options: AccordionStoryOptions = {}) => {
         fullWidthContent={fullWidthContent}
         headingClassName={headingClassName}
       >
-        <p data-cy="content">
-          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio dolore
-          omnis nemo minus, sapiente magni laudantium eligendi modi deserunt ea
-          non iure consequatur sed id quidem! Ad.
-        </p>
+        {{
+          default: () => (
+            <p data-cy="content">
+              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio
+              dolore omnis nemo minus, sapiente magni laudantium eligendi modi
+              deserunt ea non iure consequatur sed id quidem! Ad.
+            </p>
+          ),
+          iconEl: iconEl
+            ? () => (
+                <IconActionQuestionMarkCircle
+                  strokeColor="red-600"
+                  fillColor="red-50"
+                />
+              )
+            : null,
+        }}
       </Accordion>
     </div>
   )

package/Accordion.stories.mdx

@@ -6,6 +6,7 @@ import { FIGMA_URL } from '../constants'
 import Accordion from './Accordion.vue'
 
 import AccordionStory from './Accordion.rootstory'
+import { IconActionQuestionMarkCircle } from '@cypress-design/vue-icon'
 
 <h1>Accordion<span className="text-lg font-normal"> - v{version}</span></h1>
 
@@ -101,6 +102,34 @@ import Accordion from '@cypress-design/vue-accordion'
 </Accordion>
 ```
 
+### Icon slot
+
+If you need classes or props for your icon, you can pass it in via the `iconEl` slot instead of the `icon` prop.
+
+<Canvas withSource="none">
+  <Story name="Icon slot">
+    {AccordionStory({iconEl: true})}
+  </Story>
+</Canvas>
+
+```html
+<Accordion
+  title="Accordion Title"
+  description="Vestibulum id ligula porta felis euismod semper. Nulla... "
+  separator
+  open
+>
+  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio dolore omnis
+  nemo minus, sapiente magni ...
+  <template #iconEl>
+    <IconActionQuestionMarkCircle
+      strokeColor="jade-600"
+      fillColor="jade-50"
+    />
+  </template>
+</Accordion>
+```
+
 <ArgsTable />
 
 <Description>

package/Accordion.vue

@@ -1,11 +1,17 @@
 <template>
   <details ref="details">
     <summary
-      class="flex items-center"
       :class="[CssClasses.summary, headingClassName ?? CssClasses.summaryColor]"
     >
-      <Icon v-if="props.icon" :class="CssClasses.icon" />
-      <hr v-if="props.icon && separator" :class="CssClasses.separator" />
+      <span :class="CssClasses.icon">
+        <slot name="iconEl">
+          <Icon />
+        </slot>
+      </span>
+      <hr
+        v-if="(props.icon || slots.iconEl) && separator"
+        :class="CssClasses.separator"
+      />
       <div class="flex-grow pr-16px">
         <div
           :class="[
@@ -45,12 +51,20 @@
 import { CssClasses } from '../constants'
 import { DetailsAnimation } from '@cypress-design/details-animation'
 import { IconChevronDownSmall } from '@cypress-design/vue-icon'
-import { FunctionalComponent, onMounted, ref, SVGAttributes } from 'vue'
+import {
+  FunctionalComponent,
+  SVGAttributes,
+  onMounted,
+  ref,
+  useSlots,
+} from 'vue'
+
+const slots = useSlots()
 
 const props = defineProps<{
   /**
    * Main indigo title.
-   * [NOTE] It's color and font can be customized using `titleClassName`.
+   * [NOTE] Its color and font can be customized using `titleClassName`.
    */
   title: string
   /**
@@ -58,7 +72,7 @@ const props = defineProps<{
    */
   description?: string
   /**
-   * Icon to be displayed on the left of the the heading.
+   * Icon to be displayed on the left of the the heading. Overridden by the iconEl slot, if one is provided.
    */
   icon?: FunctionalComponent<SVGAttributes>
   /**

package/AccordionVue.cy.tsx

@@ -2,10 +2,53 @@
 import { mount } from 'cypress/vue'
 import assertions from '../assertions'
 import AccordionStory from './Accordion.rootstory'
+import Accordion from './Accordion.vue'
+import { IconActionQuestionMarkCircle } from '@cypress-design/vue-icon'
 
 describe('<Accordion/>', () => {
   function mountStory(options: Parameters<typeof AccordionStory>[0] = {}) {
     mount(() => <AccordionStory {...options} />)
   }
   assertions(mountStory)
+
+  const slots = {
+    default: () => 'Content',
+    iconEl: () => (
+      <IconActionQuestionMarkCircle
+        data-cy="icon-element"
+        strokeColor="red-600"
+        fillColor="red-50"
+      />
+    ),
+  }
+
+  it('can be passed an icon as a prop', () => {
+    mount(Accordion, {
+      props: {
+        title: 'hi',
+        icon: IconActionQuestionMarkCircle,
+      },
+    }).get('summary svg')
+  })
+
+  it('can be passed an icon as an element', () => {
+    mount(Accordion, {
+      slots,
+      props: {
+        title: 'hi',
+      },
+    }).get('[data-cy=icon-element]')
+  })
+
+  it('when passed both icon and iconEl, iconEl overrides icon', () => {
+    mount(Accordion, {
+      icon: IconActionQuestionMarkCircle,
+      slots,
+      props: {
+        title: 'hi',
+      },
+    }).get('[data-cy=icon-element]')
+
+    cy.get('summary').find('svg').should('have.length', 2)
+  })
 })

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @cypress-design/vue-accordion
 
+## 0.1.2
+
+### Patch Changes
+
+- [`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)
+
+## 0.1.1
+
+### Patch Changes
+
+- [#133](https://github.com/cypress-io/cypress-design/pull/133) [`73250a9`](https://github.com/cypress-io/cypress-design/commit/73250a9d65a890e4be74009978214f49c64e9fce) Thanks [@elevatebart](https://github.com/elevatebart)! - remove duplicate classes on the summary
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/constants.d.ts

@@ -15,7 +15,7 @@ export declare const CssClasses: {
 export interface AccordionProps {
     /**
      * Main indigo title.
-     * > [NOTE] It's color and font can be customized using `titleClassName`.
+     * > [NOTE] Its color and font can be customized using `titleClassName`.
      */
     title: string;
     /**

package/dist/index.es.mjs

@@ -1,10 +1,10 @@
-import { h as g, defineComponent as v, ref as h, onMounted as b, openBlock as m, createElementBlock as d, createElementVNode as u, normalizeClass as s, unref as t, createBlock as N, createCommentVNode as y, toDisplayString as k, createVNode as w, renderSlot as x } from "vue";
+import { h as g, defineComponent as b, useSlots as w, ref as x, onMounted as N, openBlock as p, createElementBlock as y, createElementVNode as m, normalizeClass as r, unref as o, renderSlot as C, createVNode as h, createCommentVNode as k, toDisplayString as v } 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 O } from "@cypress-design/icon-registry";
-const o = {
+import { ICON_COLOR_PROP_NAMES as E } from "@cypress-design/icon-registry";
+const t = {
   details: "",
-  summary: "details-none min-h-65px py-12px card open:rounded-b-none px-24px flex items-center",
+  summary: "details-none min-h-65px py-12px card open:rounded-b-none px-24px flex flex-row flex-nowrap items-center",
   summaryColor: "bg-white",
   summaryTitle: "text-18px leading-28px font-medium",
   summaryTitleColor: "text-indigo-500",
@@ -15,36 +15,37 @@ const o = {
   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"
-}, B = ({
+}, O = ({
   body: e,
   compiledClasses: n,
-  size: r,
+  size: s,
   class: l,
-  interactiveColorsOnGroup: f,
-  ...a
+  interactiveColorsOnGroup: d,
+  ...u
 }) => {
-  const C = Object.keys(a).reduce((c, p) => (O.includes(p) || (c[p] = a[p]), c), {}), i = {
-    width: r,
-    height: r,
+  const i = Object.keys(u).reduce((c, a) => (E.includes(a) || (c[a] = u[a]), c), {}), f = {
+    width: s,
+    height: s,
+    viewBox: `0 0 ${s} ${s}`,
     fill: "none",
     innerHTML: e,
-    ...C
+    ...i
   };
-  return n.length && (i.class = n.join(" ")), i;
-}, T = (e) => {
-  const { sizeWithDefault: n, compiledClasses: r } = z.getComponentAttributes({ ...e, availableSizes: ["8", "16"] }), l = {
+  return n.length && (f.class = n.join(" ")), f;
+}, $ = (e) => {
+  const { sizeWithDefault: n, compiledClasses: s } = 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"/>'
   }[n];
   if (!l)
     throw Error(`Icon "chevron-down-small" is not available in size ${n}`);
-  return g("svg", B({
+  return g("svg", O({
     ...e,
     size: n,
     body: l,
-    compiledClasses: r
+    compiledClasses: s
   }));
-}, W = { class: "flex-grow pr-16px" }, S = /* @__PURE__ */ v({
+}, B = { class: "flex-grow pr-16px" }, j = /* @__PURE__ */ b({
   __name: "Accordion",
   props: {
     title: null,
@@ -57,58 +58,61 @@ const o = {
     fullWidthContent: { type: Boolean }
   },
   setup(e) {
-    const n = e, r = h(null), l = h(null);
-    b(function() {
-      l.value && r.value && new D(l.value, r.value);
+    const n = e, s = w(), l = x(null), d = x(null);
+    N(function() {
+      d.value && l.value && new D(d.value, l.value);
     });
-    const f = n.icon;
-    return (a, C) => {
-      var i, c;
-      return m(), d("details", {
+    const u = n.icon;
+    return (i, f) => {
+      var c, a;
+      return p(), y("details", {
         ref_key: "details",
-        ref: l
+        ref: d
       }, [
-        u("summary", {
-          class: s(["flex items-center", [t(o).summary, (i = e.headingClassName) != null ? i : t(o).summaryColor]])
+        m("summary", {
+          class: r([o(t).summary, (c = e.headingClassName) != null ? c : o(t).summaryColor])
         }, [
-          n.icon ? (m(), N(t(f), {
+          m("span", {
+            class: r(o(t).icon)
+          }, [
+            C(i.$slots, "iconEl", {}, () => [
+              h(o(u))
+            ])
+          ], 2),
+          (n.icon || o(s).iconEl) && e.separator ? (p(), y("hr", {
             key: 0,
-            class: s(t(o).icon)
-          }, null, 8, ["class"])) : y("", !0),
-          n.icon && e.separator ? (m(), d("hr", {
-            key: 1,
-            class: s(t(o).separator)
-          }, null, 2)) : y("", !0),
-          u("div", W, [
-            u("div", {
-              class: s([
-                e.titleClassName ? e.titleClassName : t(o).summaryTitleColor,
-                t(o).summaryTitle
+            class: r(o(t).separator)
+          }, null, 2)) : k("", !0),
+          m("div", B, [
+            m("div", {
+              class: r([
+                e.titleClassName ? e.titleClassName : o(t).summaryTitleColor,
+                o(t).summaryTitle
               ])
-            }, k(e.title), 3),
-            e.description ? (m(), d("div", {
+            }, v(e.title), 3),
+            e.description ? (p(), y("div", {
               key: 0,
-              class: s([
-                t(o).summaryDescription,
-                (c = e.descriptionClassName) != null ? c : t(o).summaryDescriptionColor
+              class: r([
+                o(t).summaryDescription,
+                (a = e.descriptionClassName) != null ? a : o(t).summaryDescriptionColor
               ])
-            }, k(e.description), 3)) : y("", !0)
+            }, v(e.description), 3)) : k("", !0)
           ]),
-          w(t(T), {
+          h(o($), {
             strokeColor: "gray-300",
-            class: s(["open:icon-dark-gray-500", t(o).chevron])
+            class: r(["open:icon-dark-gray-500", o(t).chevron])
           }, null, 8, ["class"])
         ], 2),
-        u("div", {
+        m("div", {
           ref_key: "content",
-          ref: r,
-          class: s(t(o).contentWrapper)
+          ref: l,
+          class: r(o(t).contentWrapper)
         }, [
-          e.fullWidthContent ? x(a.$slots, "default", { key: 0 }) : (m(), d("div", {
+          e.fullWidthContent ? C(i.$slots, "default", { key: 0 }) : (p(), y("div", {
             key: 1,
-            class: s(t(o).content)
+            class: r(o(t).content)
           }, [
-            x(a.$slots, "default")
+            C(i.$slots, "default")
           ], 2))
         ], 2)
       ], 512);
@@ -116,8 +120,8 @@ const o = {
   }
 });
 export {
-  S as default
+  j as default
 };
 
-/* <windicss-keep class="flex items-center flex-grow pr-16px open:icon-dark-gray-500 icon-dark-gray-300 details-none min-h-65px py-12px card open:rounded-b-none px-24px 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 icon-dark-gray-300 details-none min-h-65px py-12px card open:rounded-b-none px-24px flex flex-row flex-nowrap 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"> */
 //# sourceMappingURL=index.es.mjs.map