@cypress-design/react-accordion 0.1.0 → 0.1.2

package/Accordion.rootstory.tsx

@@ -8,6 +8,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,
@@ -19,7 +20,8 @@ export default (options: AccordionStoryOptions = {}) => {
       <Accordion
         title={title}
         description={description}
-        icon={icon}
+        icon={iconEl ? null : icon}
+        iconEl={iconEl}
         separator={separator}
         open={open}
         fullWidthContent={fullWidthContent}

package/Accordion.stories.mdx

@@ -6,6 +6,7 @@ import AccordionStory from './Accordion.rootstory'
 import { FIGMA_URL } from '../constants'
 
 import { Accordion } from './Accordion'
+import { IconActionQuestionMarkCircle } from '@cypress-design/react-icon'
 
 <h1>Accordion<span className="text-lg font-normal"> - v{version}</span></h1>
 
@@ -29,10 +30,10 @@ import Accordion from '@cypress-design/react-accordion'
 </Canvas>
 
 ```tsx
-<Accordion 
+<Accordion
   icon={IconActionQuestionMarkCircle}
-  title="Accordion Title" 
-  description="Vestibulum id ligula porta felis euismod semper. Nulla... " 
+  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 ...
@@ -65,8 +66,8 @@ import Accordion from '@cypress-design/react-accordion'
 ```tsx
 <Accordion
   icon={IconActionQuestionMarkCircle}
-  title="Accordion Title" 
-  description="Vestibulum id ligula porta felis euismod semper. Nulla... " 
+  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>
@@ -99,10 +100,34 @@ import Accordion from '@cypress-design/react-accordion'
 </Canvas>
 
 ```tsx
-<Accordion 
+<Accordion
   icon={IconActionQuestionMarkCircle}
-  title="Accordion Title" 
-  description="Vestibulum id ligula porta felis euismod semper. Nulla... " 
+  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>
+```
+
+### Icon as element
+
+If you need classes or props for your icon, you can pass it in as an element with props.
+
+<Canvas withSource="none">
+  <Story name="Icon as element">
+    <AccordionStory iconEl={<IconActionQuestionMarkCircle strokeColor="red-600" fillColor="red-50" />} />
+  </Story>
+</Canvas>
+
+```tsx
+<Accordion
+  iconEl={
+    <IconActionQuestionMarkCircle strokeColor="red-600" fillColor="red-50" />
+  }
+  title="Accordion Title"
+  description="Vestibulum id ligula porta felis euismod semper. Nulla... "
   separator
   open
 >

package/Accordion.tsx

@@ -6,7 +6,14 @@ import { DetailsAnimation } from '@cypress-design/details-animation'
 import { IconChevronDownSmall } from '@cypress-design/react-icon'
 
 export interface AccordionPropsReact extends AccordionProps {
+  /**
+   * Icon to be displayed on the left of the the heading. Overridden by the iconEl prop, if both are provided.
+   */
   icon?: React.FC<React.SVGProps<SVGSVGElement>>
+  /**
+   * Element to be displayed on the left of the the heading. Overrides the icon prop, if both are provided.
+   */
+  iconEl?: React.ReactNode
 }
 
 export const Accordion: React.FC<
@@ -15,6 +22,7 @@ export const Accordion: React.FC<
   title,
   description,
   icon: Icon,
+  iconEl,
   separator = false,
   children,
   headingClassName,
@@ -34,13 +42,17 @@ export const Accordion: React.FC<
     <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} />}
+        {Boolean(iconEl) && <span className={CssClasses.icon}>{iconEl}</span>}
+
+        {Icon && !iconEl && <Icon className={CssClasses.icon} />}
+
+        {(Icon || iconEl) && separator && (
+          <hr className={CssClasses.separator} />
+        )}
         <div className="flex-grow pr-16px">
           <div
             className={clsx(

package/AccordionReact.cy.tsx

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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @cypress-design/react-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

@@ -44,7 +44,7 @@ function __rest$1(s, e) {
 
 var CssClasses = {
     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',
@@ -104,7 +104,7 @@ var compileReactIconProperties = function (_a) {
         }
         return newAttributes;
     }, {});
-    var componentProps = __assign({ width: size, height: size, fill: 'none', dangerouslySetInnerHTML: {
+    var componentProps = __assign({ width: size, height: size, viewBox: "0 0 " + size + " " + size, fill: 'none', dangerouslySetInnerHTML: {
             __html: body
         } }, filteredAttributes);
     if (attributes.className) {
@@ -131,7 +131,7 @@ var IconChevronDownSmall = function (props) {
 /* <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 title = _a.title, description = _a.description, Icon = _a.icon, iconEl = _a.iconEl, _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", "iconEl", "separator", "children", "headingClassName", "titleClassName", "descriptionClassName", "fullWidthContent"]);
     var details = React.useRef(null);
     var content = React.useRef(null);
     React.useEffect(function () {
@@ -140,9 +140,10 @@ var Accordion = function (_a) {
         }
     }, []);
     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("summary", { className: clsx(CssClasses.summary, headingClassName !== null && headingClassName !== void 0 ? headingClassName : CssClasses.summaryColor) },
+            Boolean(iconEl) && React.createElement("span", { className: CssClasses.icon }, iconEl),
+            Icon && !iconEl && React.createElement(Icon, { className: CssClasses.icon }),
+            (Icon || iconEl) && 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))),
@@ -152,5 +153,5 @@ var Accordion = function (_a) {
 
 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"> */
+/* <windicss-keep class="flex-grow pr-16px open:icon-dark-gray-500 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