@cypress-design/react-accordion 0.1.0

package/Accordion.rootstory.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react'
+import { IconActionQuestionMarkCircle } from '@cypress-design/react-icon'
+import { AccordionStoryOptions } from '../assertions'
+import Accordion from './Accordion'
+
+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,
+    ...rest
+  } = options
+  return (
+    <div className="m-16px">
+      <Accordion
+        title={title}
+        description={description}
+        icon={icon}
+        separator={separator}
+        open={open}
+        fullWidthContent={fullWidthContent}
+        headingClassName={headingClassName}
+        {...rest}
+      >
+        <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,117 @@
+import { ArgsTable, Canvas, Meta, Story, Description } from '@storybook/addon-docs'
+import { version } from "./package.json"
+import changelog from "./CHANGELOG.md"
+import readMe from "./ReadMe.md"
+import AccordionStory from './Accordion.rootstory'
+import { FIGMA_URL } from '../constants'
+
+import { Accordion } from './Accordion'
+
+<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/react-accordion'
+```
+
+<Canvas withSource="none">
+  <Story name="Accordion">
+    <AccordionStory />
+  </Story>
+</Canvas>
+
+```tsx
+<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>
+```
+
+### Minimal
+
+<Canvas withSource="none">
+  <Story name="Minimal">
+    <AccordionStory description={null} icon={null} />
+  </Story>
+</Canvas>
+
+
+```tsx
+<Accordion title="Accordion Title">
+  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>
+
+```tsx
+<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>
+
+```tsx
+<Accordion
+  icon={IconActionQuestionMarkCircle}
+  title="Accordion Title"
+  separator
+>
+  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 />
+  </Story>
+</Canvas>
+
+```tsx
+<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.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react'
+import clsx from 'clsx'
+import { CssClasses } from '../constants'
+import type { AccordionProps } from '../constants'
+import { DetailsAnimation } from '@cypress-design/details-animation'
+import { IconChevronDownSmall } from '@cypress-design/react-icon'
+
+export interface AccordionPropsReact extends AccordionProps {
+  icon?: React.FC<React.SVGProps<SVGSVGElement>>
+}
+
+export const Accordion: React.FC<
+  AccordionPropsReact & React.HTMLProps<HTMLDetailsElement>
+> = ({
+  title,
+  description,
+  icon: Icon,
+  separator = false,
+  children,
+  headingClassName,
+  titleClassName,
+  descriptionClassName,
+  fullWidthContent,
+  ...rest
+}) => {
+  const details = React.useRef(null)
+  const content = React.useRef(null)
+  React.useEffect(() => {
+    if (details.current && content.current) {
+      new DetailsAnimation(details.current, content.current)
+    }
+  }, [])
+  return (
+    <details {...rest} className={clsx(rest.className)} ref={details}>
+      <summary
+        className={clsx(
+          'flex items-center',
+          CssClasses.summary,
+          headingClassName ?? CssClasses.summaryColor
+        )}
+      >
+        {Icon && <Icon className={CssClasses.icon} />}
+        {Icon && separator && <hr className={CssClasses.separator} />}
+        <div className="flex-grow pr-16px">
+          <div
+            className={clsx(
+              titleClassName ?? CssClasses.summaryTitleColor,
+              CssClasses.summaryTitle
+            )}
+          >
+            {title}
+          </div>
+          {description && (
+            <div
+              className={clsx(
+                CssClasses.summaryDescription,
+                descriptionClassName ?? CssClasses.summaryDescriptionColor
+              )}
+            >
+              {description}
+            </div>
+          )}
+        </div>
+        <IconChevronDownSmall
+          strokeColor="gray-300"
+          className={clsx('open:icon-dark-gray-500', CssClasses.chevron)}
+        />
+      </summary>
+      <div ref={content} className={CssClasses.contentWrapper}>
+        {fullWidthContent ? (
+          <>{children}</>
+        ) : (
+          <div className={CssClasses.content}>{children}</div>
+        )}
+      </div>
+    </details>
+  )
+}
+
+export default Accordion

package/AccordionReact.cy.tsx

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

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @cypress-design/react-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/react-accordion
+```
+
+or with yarn
+
+```bash
+yarn add @cypress-design/react-accordion
+```
+
+## Usage
+
+```tsx
+import Accordion from '@cypress-design/react-accordion'
+```
+
+```tsx
+<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/css-modules.d.ts

@@ -0,0 +1,4 @@
+declare module '*.scss' {
+  const value: Record<string, string>
+  export default value
+}

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,156 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import { DetailsAnimation } from '@cypress-design/details-animation';
+import * as iconsRegistry from '@cypress-design/icon-registry';
+import { ICON_COLOR_PROP_NAMES } from '@cypress-design/icon-registry';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign$1 = function() {
+    __assign$1 = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$1.apply(this, arguments);
+};
+
+function __rest$1(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+var CssClasses = {
+    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'
+};
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+var compileReactIconProperties = function (_a) {
+    var body = _a.body, compiledClasses = _a.compiledClasses, size = _a.size, attributes = __rest(_a, ["body", "compiledClasses", "size"]);
+    var filteredAttributes = Object.keys(attributes).reduce(function (newAttributes, attrName) {
+        if (!ICON_COLOR_PROP_NAMES.includes(attrName)) {
+            newAttributes[attrName] =
+                attributes[attrName];
+        }
+        return newAttributes;
+    }, {});
+    var componentProps = __assign({ width: size, height: size, fill: 'none', dangerouslySetInnerHTML: {
+            __html: body
+        } }, filteredAttributes);
+    if (attributes.className) {
+        compiledClasses.push(attributes.className);
+    }
+    if (compiledClasses.length) {
+        componentProps.className = compiledClasses.join(' ');
+    }
+    return componentProps;
+};
+var IconChevronDownSmall = function (props) {
+    var _a = iconsRegistry.getComponentAttributes(__assign(__assign({}, props), { availableSizes: ["8", "16"] })), size = _a.sizeWithDefault, compiledClasses = _a.compiledClasses;
+    var iconBodies = {
+        "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\"/>"
+    };
+    var body = iconBodies[size];
+    if (!body) {
+        throw Error("Icon \"chevron-down-small\" is not available in size " + size);
+    }
+    return React.createElement('svg', compileReactIconProperties(__assign(__assign({}, props), { size: size, body: body, compiledClasses: compiledClasses })));
+};
+
+/* <windicss-keep class=""> */
+
+var Accordion = function (_a) {
+    var title = _a.title, description = _a.description, Icon = _a.icon, _b = _a.separator, separator = _b === void 0 ? false : _b, children = _a.children, headingClassName = _a.headingClassName, titleClassName = _a.titleClassName, descriptionClassName = _a.descriptionClassName, fullWidthContent = _a.fullWidthContent, rest = __rest$1(_a, ["title", "description", "icon", "separator", "children", "headingClassName", "titleClassName", "descriptionClassName", "fullWidthContent"]);
+    var details = React.useRef(null);
+    var content = React.useRef(null);
+    React.useEffect(function () {
+        if (details.current && content.current) {
+            new DetailsAnimation(details.current, content.current);
+        }
+    }, []);
+    return (React.createElement("details", __assign$1({}, rest, { className: clsx(rest.className), ref: details }),
+        React.createElement("summary", { className: clsx('flex items-center', CssClasses.summary, headingClassName !== null && headingClassName !== void 0 ? headingClassName : CssClasses.summaryColor) },
+            Icon && React.createElement(Icon, { className: CssClasses.icon }),
+            Icon && separator && React.createElement("hr", { className: CssClasses.separator }),
+            React.createElement("div", { className: "flex-grow pr-16px" },
+                React.createElement("div", { className: clsx(titleClassName !== null && titleClassName !== void 0 ? titleClassName : CssClasses.summaryTitleColor, CssClasses.summaryTitle) }, title),
+                description && (React.createElement("div", { className: clsx(CssClasses.summaryDescription, descriptionClassName !== null && descriptionClassName !== void 0 ? descriptionClassName : CssClasses.summaryDescriptionColor) }, description))),
+            React.createElement(IconChevronDownSmall, { strokeColor: "gray-300", className: clsx('open:icon-dark-gray-500', CssClasses.chevron) })),
+        React.createElement("div", { ref: content, className: CssClasses.contentWrapper }, fullWidthContent ? (React.createElement(React.Fragment, null, children)) : (React.createElement("div", { className: CssClasses.content }, children)))));
+};
+
+export { Accordion as default };
+
+/* <windicss-keep class="flex items-center flex-grow pr-16px open:icon-dark-gray-500 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