@cypress-design/vue-accordion 0.1.0

package/Accordion.rootstory.tsx

@@ -0,0 +1,35 @@
+import { IconActionQuestionMarkCircle } from '@cypress-design/vue-icon'
+import type { AccordionStoryOptions } from '../assertions'
+import Accordion from './Accordion.vue'
+
+export default (options: AccordionStoryOptions = {}) => {
+  const {
+    title = 'Accordion Title',
+    description = 'Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla.',
+    icon = IconActionQuestionMarkCircle,
+    separator = true,
+    open = false,
+    fullWidthContent = false,
+    headingClassName,
+  } = options
+
+  return (
+    <div className="m-16px">
+      <Accordion
+        title={title}
+        separator={separator}
+        description={description}
+        icon={icon}
+        open={open}
+        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>
+      </Accordion>
+    </div>
+  )
+}

package/Accordion.stories.mdx

@@ -0,0 +1,109 @@
+import { ArgsTable, Canvas, Meta, Story, Description } from '@storybook/addon-docs'
+import { version } from "./package.json"
+import changelog from "./CHANGELOG.md?raw"
+import { FIGMA_URL } from '../constants'
+
+import Accordion from './Accordion.vue'
+
+import AccordionStory from './Accordion.rootstory'
+
+<h1>Accordion<span className="text-lg font-normal"> - v{version}</span></h1>
+
+<Meta title="Accordion" component={Accordion} parameters={{
+    design: {
+      type: "figma",
+      url: FIGMA_URL,
+    }
+  }} />
+
+  
+### Usage
+
+```tsx
+import Accordion from '@cypress-design/vue-accordion'
+```
+
+<Canvas withSource="none">
+  <Story name="Accordion">
+    {AccordionStory()}
+  </Story>
+</Canvas>
+
+```html
+<Accordion
+  :icon="IconActionQuestionMarkCircle"
+  title="Accordion Title"
+  description="Vestibulum id ligula porta felis euismod semper. Nulla... "
+  separator
+>
+  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio dolore omnis
+  nemo minus, sapiente magni ...
+</Accordion>
+```
+
+### Without separator
+
+<Canvas withSource="none">
+  <Story name="No Separator">
+    {AccordionStory({separator:false})}
+  </Story>
+</Canvas>
+
+```html
+<Accordion
+  :icon="IconActionQuestionMarkCircle"
+  title="Accordion Title"
+  description="Vestibulum id ligula porta felis euismod semper. Nulla... "
+>
+  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio dolore omnis
+  nemo minus, sapiente magni ...
+</Accordion>
+```
+
+### Without description
+
+<Canvas withSource="none">
+  <Story name="No Description">
+    {AccordionStory({description:null})}
+  </Story>
+</Canvas>
+
+```html
+<Accordion
+  :icon="IconActionQuestionMarkCircle"
+  title="Accordion Title"
+  separator
+  open
+>
+  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio dolore omnis
+  nemo minus, sapiente magni ...
+</Accordion>
+```
+
+### Open by default
+
+<Canvas withSource="none">
+  <Story name="Open">
+    {AccordionStory({open:true})}
+  </Story>
+</Canvas>
+
+```html
+<Accordion
+  :icon="IconActionQuestionMarkCircle"
+  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 ...
+</Accordion>
+```
+
+<ArgsTable />
+
+<Description>
+  {changelog.replace(/^# .+/, '## Changelog')}
+</Description>
+

package/Accordion.vue

@@ -0,0 +1,98 @@
+<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" />
+      <div class="flex-grow pr-16px">
+        <div
+          :class="[
+            titleClassName ? titleClassName : CssClasses.summaryTitleColor,
+            CssClasses.summaryTitle,
+          ]"
+        >
+          {{ title }}
+        </div>
+        <div
+          v-if="description"
+          :class="[
+            CssClasses.summaryDescription,
+            descriptionClassName ?? CssClasses.summaryDescriptionColor,
+          ]"
+        >
+          {{ description }}
+        </div>
+      </div>
+      <IconChevronDownSmall
+        strokeColor="gray-300"
+        class="open:icon-dark-gray-500"
+        :class="CssClasses.chevron"
+      />
+    </summary>
+    <div ref="content" :class="CssClasses.contentWrapper">
+      <!-- @slot expandable body of the collapsible accordion -->
+      <slot v-if="fullWidthContent" />
+      <div v-else :class="CssClasses.content">
+        <slot />
+      </div>
+    </div>
+  </details>
+</template>
+
+<script lang="ts" setup>
+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'
+
+const props = defineProps<{
+  /**
+   * Main indigo title.
+   * [NOTE] It's color and font can be customized using `titleClassName`.
+   */
+  title: string
+  /**
+   * Second line in the heading.
+   */
+  description?: string
+  /**
+   * Icon to be displayed on the left of the the heading.
+   */
+  icon?: FunctionalComponent<SVGAttributes>
+  /**
+   * Should we add a vertical separator between the icon and the text.
+   */
+  separator?: boolean
+  /**
+   * Change the font and color of the heading title
+   */
+  titleClassName?: string
+  /**
+   * Change the font and color of the heading description
+   */
+  descriptionClassName?: string
+  /**
+   * Additional classes to add to the header of the accordion
+   * > [NOTE] useful to change the background color of the header
+   */
+  headingClassName?: string
+  /**
+   * When using content that needs ti be edge to edge,
+   * removes the content wrapper from the content.
+   */
+  fullWidthContent?: boolean
+}>()
+
+const content = ref(null)
+const details = ref(null)
+
+onMounted(function () {
+  if (details.value && content.value) {
+    new DetailsAnimation(details.value, content.value)
+  }
+})
+
+const Icon = props.icon
+</script>

package/AccordionVue.cy.tsx

@@ -0,0 +1,11 @@
+/// <reference types="cypress" />
+import { mount } from 'cypress/vue'
+import assertions from '../assertions'
+import AccordionStory from './Accordion.rootstory'
+
+describe('<Accordion/>', () => {
+  function mountStory(options: Parameters<typeof AccordionStory>[0] = {}) {
+    mount(() => <AccordionStory {...options} />)
+  }
+  assertions(mountStory)
+})

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @cypress-design/vue-accordion
+
+## 0.1.0
+
+### Minor Changes
+
+- [#74](https://github.com/cypress-io/cypress-design/pull/74) [`6d8b6fd`](https://github.com/cypress-io/cypress-design/commit/6d8b6fd763b0389d748884c35f4ff6dd73724977) Thanks [@elevatebart](https://github.com/elevatebart)! - create the first version of accordion
+
+### Patch Changes
+
+- Updated dependencies [[`6d8b6fd`](https://github.com/cypress-io/cypress-design/commit/6d8b6fd763b0389d748884c35f4ff6dd73724977)]:
+  - @cypress-design/details-animation@0.0.1

package/ReadMe.md

@@ -0,0 +1,37 @@
+# Accordion
+
+## Summary
+
+Collapsible component with a header and a body.
+
+## install
+
+```bash
+npm install @cypress-design/vue-accordion
+```
+
+or with yarn
+
+```bash
+yarn add @cypress-design/vue-accordion
+```
+
+## Usage
+
+```tsx
+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>
+```

package/dist/constants.d.ts

@@ -0,0 +1,53 @@
+export declare const CssClasses: {
+    details: string;
+    summary: string;
+    summaryColor: string;
+    summaryTitle: string;
+    summaryTitleColor: string;
+    summaryDescription: string;
+    summaryDescriptionColor: string;
+    icon: string;
+    separator: string;
+    chevron: string;
+    contentWrapper: string;
+    content: string;
+};
+export interface AccordionProps {
+    /**
+     * Main indigo title.
+     * > [NOTE] It's color and font can be customized using `titleClassName`.
+     */
+    title: string;
+    /**
+     * Second line in the heading.
+     */
+    description?: string;
+    /**
+     * Icon to be displayed on the left of the the heading.
+     */
+    icon?: any;
+    /**
+     * Should we add a vertical separator between the icon and the text.
+     */
+    separator?: boolean;
+    /**
+     * Change the font and color of the heading title
+     */
+    titleClassName?: string;
+    /**
+     * Change the font and color of the heading description
+     */
+    descriptionClassName?: string;
+    /**
+     * Additional classes to add to the header of the accordion
+     * > [NOTE] useful to change the background color of the header
+     */
+    headingClassName?: string;
+    /**
+     * When using content that needs ti be edge to edge,
+     * removes the content wrapper from the content.
+     */
+    fullWidthContent?: boolean;
+}
+export declare const FIGMA_URL = "https://www.figma.com/file/1WJ3GVQyMV5e7xVxPg3yID/Design-System?node-id=2232%3A3477";
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU;;;;;;;;;;;;;CActB,CAAA;AAED,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,CAAA;IACV;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED,eAAO,MAAM,SAAS,wFACiE,CAAA"}

package/dist/index.es.mjs

@@ -0,0 +1,123 @@
+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 { 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 = {
+  details: "",
+  summary: "details-none min-h-65px py-12px card open:rounded-b-none px-24px flex items-center",
+  summaryColor: "bg-white",
+  summaryTitle: "text-18px leading-28px font-medium",
+  summaryTitleColor: "text-indigo-500",
+  summaryDescription: "text-14px leading-20px font-normal",
+  summaryDescriptionColor: "text-gray-700",
+  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"
+}, B = ({
+  body: e,
+  compiledClasses: n,
+  size: r,
+  class: l,
+  interactiveColorsOnGroup: f,
+  ...a
+}) => {
+  const C = Object.keys(a).reduce((c, p) => (O.includes(p) || (c[p] = a[p]), c), {}), i = {
+    width: r,
+    height: r,
+    fill: "none",
+    innerHTML: e,
+    ...C
+  };
+  return n.length && (i.class = n.join(" ")), i;
+}, T = (e) => {
+  const { sizeWithDefault: n, 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"/>'
+  }[n];
+  if (!l)
+    throw Error(`Icon "chevron-down-small" is not available in size ${n}`);
+  return g("svg", B({
+    ...e,
+    size: n,
+    body: l,
+    compiledClasses: r
+  }));
+}, W = { class: "flex-grow pr-16px" }, S = /* @__PURE__ */ v({
+  __name: "Accordion",
+  props: {
+    title: null,
+    description: null,
+    icon: null,
+    separator: { type: Boolean },
+    titleClassName: null,
+    descriptionClassName: null,
+    headingClassName: null,
+    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 f = n.icon;
+    return (a, C) => {
+      var i, c;
+      return m(), d("details", {
+        ref_key: "details",
+        ref: l
+      }, [
+        u("summary", {
+          class: s(["flex items-center", [t(o).summary, (i = e.headingClassName) != null ? i : t(o).summaryColor]])
+        }, [
+          n.icon ? (m(), N(t(f), {
+            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
+              ])
+            }, k(e.title), 3),
+            e.description ? (m(), d("div", {
+              key: 0,
+              class: s([
+                t(o).summaryDescription,
+                (c = e.descriptionClassName) != null ? c : t(o).summaryDescriptionColor
+              ])
+            }, k(e.description), 3)) : y("", !0)
+          ]),
+          w(t(T), {
+            strokeColor: "gray-300",
+            class: s(["open:icon-dark-gray-500", t(o).chevron])
+          }, null, 8, ["class"])
+        ], 2),
+        u("div", {
+          ref_key: "content",
+          ref: r,
+          class: s(t(o).contentWrapper)
+        }, [
+          e.fullWidthContent ? x(a.$slots, "default", { key: 0 }) : (m(), d("div", {
+            key: 1,
+            class: s(t(o).content)
+          }, [
+            x(a.$slots, "default")
+          ], 2))
+        ], 2)
+      ], 512);
+    };
+  }
+});
+export {
+  S 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"> */
+//# sourceMappingURL=index.es.mjs.map