@cypress-design/react-accordion 0.4.3 → 1.0.0

package/.turbo/turbo-build.log

@@ -2,5 +2,5 @@ $ yarn build:module && yarn build:types
 $ rollup -c ./rollup.config.mjs
 
 ./index.ts → ./dist/index.umd.js, ./dist/index.es.mjs...
-created ./dist/index.umd.js, ./dist/index.es.mjs in 24.5s
+created ./dist/index.umd.js, ./dist/index.es.mjs in 14.2s
 $ tsc --project ./tsconfig.build.json

package/Accordion.tsx

@@ -43,7 +43,7 @@ export const Accordion: React.FC<
       <summary
         className={clsx(
           CssClasses.summary,
-          headingClassName ?? CssClasses.summaryColor
+          headingClassName ?? CssClasses.summaryColor,
         )}
       >
         <span className={CssClasses.summaryDiv}>
@@ -58,7 +58,7 @@ export const Accordion: React.FC<
             <span
               className={clsx(
                 titleClassName ?? CssClasses.summaryTitleColor,
-                CssClasses.summaryTitle
+                CssClasses.summaryTitle,
               )}
             >
               {title}
@@ -67,7 +67,7 @@ export const Accordion: React.FC<
               <span
                 className={clsx(
                   CssClasses.summaryDescription,
-                  descriptionClassName ?? CssClasses.summaryDescriptionColor
+                  descriptionClassName ?? CssClasses.summaryDescriptionColor,
                 )}
               >
                 {description}

package/AccordionReact.cy.tsx

@@ -16,7 +16,7 @@ describe('Accordion', () => {
 
   it('can be passed an icon as a prop', () => {
     mount(
-      <Accordion title="hi" icon={IconActionQuestionMarkCircle}></Accordion>
+      <Accordion title="hi" icon={IconActionQuestionMarkCircle}></Accordion>,
     ).get('summary svg')
   })
 
@@ -31,7 +31,7 @@ describe('Accordion', () => {
             fillColor="red-50"
           />
         }
-      ></Accordion>
+      ></Accordion>,
     ).get('[data-cy=icon-element]')
   })
 
@@ -47,7 +47,7 @@ describe('Accordion', () => {
             fillColor="red-50"
           />
         }
-      ></Accordion>
+      ></Accordion>,
     ).get('[data-cy=icon-element]')
 
     cy.get('summary').find('svg').should('have.length', 2)

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @cypress-design/react-accordion
 
+## 1.0.0
+
+### Major Changes
+
+- [`63fb4d9`](https://github.com/cypress-io/cypress-design/commit/63fb4d9e60f6c56c563d17e3b983d0ebd25e0e87) Thanks [@elevatebart](https://github.com/elevatebart)! - Create 1.0
+
+### Patch Changes
+
+- Updated dependencies [[`63fb4d9`](https://github.com/cypress-io/cypress-design/commit/63fb4d9e60f6c56c563d17e3b983d0ebd25e0e87)]:
+  - @cypress-design/constants-accordion@1.0.0
+  - @cypress-design/react-icon@1.0.0
+  - @cypress-design/details-animation@1.0.0
+
+## 0.4.4
+
+### Patch Changes
+
+- [#245](https://github.com/cypress-io/cypress-design/pull/245) [`d52d023`](https://github.com/cypress-io/cypress-design/commit/d52d02301bb851d514661a8c258d0c4ae5baf171) Thanks [@elevatebart](https://github.com/elevatebart)! - use tailwind to rollup classes in the final package
+
+- Updated dependencies [[`d52d023`](https://github.com/cypress-io/cypress-design/commit/d52d02301bb851d514661a8c258d0c4ae5baf171)]:
+  - @cypress-design/react-icon@0.22.1
+
 ## 0.4.3
 
 ### Patch Changes

package/dist/index.es.mjs

@@ -18,7 +18,7 @@ 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.
 ***************************************************************************** */
-/* global Reflect, Promise */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
 
 var __assign$1 = function() {
@@ -42,7 +42,12 @@ function __rest$1(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 const CssClasses = {
     summary: 'details-none card open:rounded-b-none',
@@ -73,7 +78,7 @@ 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.
 ***************************************************************************** */
-/* global Reflect, Promise */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
 
 var __assign = function() {
@@ -97,20 +102,47 @@ function __rest(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 var compileReactIconProperties = function (_a) {
-    var body = _a.body, compiledClasses = _a.compiledClasses, size = _a.size, attributes = __rest(_a, ["body", "compiledClasses", "size"]);
+    var body = _a.body, defs = _a.defs, compiledClasses = _a.compiledClasses, size = _a.size, name = _a.name, alt = _a.alt, attributes = __rest(_a, ["body", "defs", "compiledClasses", "size", "name", "alt"]);
     var filteredAttributes = Object.keys(attributes).reduce(function (newAttributes, attrName) {
-        if (!ICON_COLOR_PROP_NAMES.includes(attrName) && attrName !== 'name') {
+        if (!ICON_COLOR_PROP_NAMES.includes(attrName) &&
+            attrName !== 'name') {
+            // @ts-expect-error the ky of React's SVGProps is too broad and
+            // breaks here. Since we do not need to check for it. We keep the expect error
             newAttributes[attrName] =
                 attributes[attrName];
         }
         return newAttributes;
     }, {});
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(function () {
+        var iconFileId = "".concat(name, "_").concat(size);
+        if (defs) {
+            if (document.querySelector("[data-cy-svg-defs=\"".concat(iconFileId, "\"]"))) {
+                return;
+            }
+            var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            svgElement.setAttribute('data-cy-svg-defs', iconFileId);
+            svgElement.setAttribute('width', '0');
+            svgElement.setAttribute('height', '0');
+            svgElement.innerHTML = defs;
+            document.body.appendChild(svgElement);
+        }
+    }, [defs, name, size]);
     var componentProps = __assign({ width: size, height: size, viewBox: "0 0 ".concat(size, " ").concat(size), fill: 'none', dangerouslySetInnerHTML: {
-            __html: body,
-        } }, filteredAttributes);
+            __html: alt
+                ? "<title>".concat(alt.replace(/[><]/g, function (s) {
+                    return s === '>' ? '&gt;' : '&lt;';
+                }), "</title>").concat(body)
+                : body,
+        }, className: undefined }, filteredAttributes);
     if (attributes.className) {
         compiledClasses.push(attributes.className);
     }
@@ -119,21 +151,27 @@ var compileReactIconProperties = function (_a) {
     }
     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 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\"/>"
-    };
-    var body = iconBodies[size];
+
+function useIconProps(props, iconBodiesAndDefs, availableSizes, name) {
+    var interactiveColorsOnGroup = props.interactiveColorsOnGroup, cleanProps = __rest(props, ["interactiveColorsOnGroup"]);
+    var _a = iconsRegistry.getComponentAttributes(__assign(__assign({}, cleanProps), { availableSizes: availableSizes, interactiveColorsOnGroup: interactiveColorsOnGroup })), size = _a.sizeWithDefault, compiledClasses = _a.compiledClasses;
+    var _b = iconBodiesAndDefs[size] || {}, body = _b.body, defs = _b.defs;
     if (!body) {
-        throw Error("Icon \"chevron-down-small\" is not available in size ".concat(size));
+        throw Error("Icon \"".concat(name, "\" is not available in size ").concat(size));
     }
-    return React.createElement('svg', compileReactIconProperties(__assign(__assign({}, props), { size: size, body: body, compiledClasses: compiledClasses })));
-};
+    return compileReactIconProperties(__assign(__assign({}, cleanProps), { name: name, size: size, body: body, defs: defs, compiledClasses: compiledClasses }));
+}
+var IconChevronDownSmall = function (props) { return React.createElement('svg', useIconProps(props, {
+    "8": {
+        "body": "<path d=\"m1 2.5 3 3 3-3\" stroke=\"currentColor\" class=\"icon-dark\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
+    },
+    "16": {
+        "body": "<path d=\"m4 6 4 4 4-4\" stroke=\"currentColor\" class=\"icon-dark\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
+    }
+}, ["8", "16"], "chevron-down-small")); };
 
 
-/* <wind-keep class=""> */
+/* <wind-keep class="filter icon-light-secondary icon-dark-secondary"> */
 
 var Accordion = function (_a) {
     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"]);
@@ -160,4 +198,4 @@ var Accordion = function (_a) {
 export { Accordion as default };
 //# sourceMappingURL=index.es.mjs.map
 
-/* <wind-keep class="flex-grow pr-[16px] open:icon-dark-gray-500 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]"> */
+/* <wind-keep class="flex-grow grow pr-[16px] open:icon-dark-gray-500 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]"> */