@cypress-design/react-accordion 1.0.0 → 1.0.1

package/dist/index.umd.js

@@ -2,8 +2,9 @@
 
 var React = require('react');
 var clsx = require('clsx');
+var constantsAccordion = require('@cypress-design/constants-accordion');
 var detailsAnimation = require('@cypress-design/details-animation');
-var iconsRegistry = require('@cypress-design/icon-registry');
+var reactIcon = require('@cypress-design/react-icon');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -23,67 +24,6 @@ function _interopNamespaceDefault(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-var iconsRegistry__namespace = /*#__PURE__*/_interopNamespaceDefault(iconsRegistry);
-
-/******************************************************************************
-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.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
-
-
-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;
-}
-
-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',
-    summaryDiv: 'flex flex-row py-[12px] px-[24px] flex-nowrap items-center min-h-[63px]',
-    summaryColor: 'bg-white',
-    summaryTitle: 'text-[18px] leading-[28px] font-medium',
-    summaryTitleColor: 'text-indigo-500 block',
-    summaryDescription: 'text-[14px] leading-[20px] font-normal block',
-    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.
@@ -130,72 +70,8 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var compileReactIconProperties = function (_a) {
-    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 (!iconsRegistry.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__namespace.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: 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);
-    }
-    if (compiledClasses.length) {
-        componentProps.className = compiledClasses.join(' ');
-    }
-    return componentProps;
-};
-
-function useIconProps(props, iconBodiesAndDefs, availableSizes, name) {
-    var interactiveColorsOnGroup = props.interactiveColorsOnGroup, cleanProps = __rest(props, ["interactiveColorsOnGroup"]);
-    var _a = iconsRegistry__namespace.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 \"".concat(name, "\" is not available in size ").concat(size));
-    }
-    return compileReactIconProperties(__assign(__assign({}, cleanProps), { name: name, size: size, body: body, defs: defs, compiledClasses: compiledClasses }));
-}
-var IconChevronDownSmall = function (props) { return React__namespace.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="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"]);
+    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(_a, ["title", "description", "icon", "iconEl", "separator", "children", "headingClassName", "titleClassName", "descriptionClassName", "fullWidthContent"]);
     var details = React__namespace.useRef(null);
     var content = React__namespace.useRef(null);
     React__namespace.useEffect(function () {
@@ -203,20 +79,20 @@ var Accordion = function (_a) {
             new detailsAnimation.DetailsAnimation(details.current, content.current);
         }
     }, []);
-    return (React__namespace.createElement("details", __assign$1({}, rest, { className: clsx(rest.className), ref: details }),
-        React__namespace.createElement("summary", { className: clsx(CssClasses.summary, headingClassName !== null && headingClassName !== void 0 ? headingClassName : CssClasses.summaryColor) },
-            React__namespace.createElement("span", { className: CssClasses.summaryDiv },
-                Boolean(iconEl) && React__namespace.createElement("span", { className: CssClasses.icon }, iconEl),
-                Icon && !iconEl && React__namespace.createElement(Icon, { className: CssClasses.icon }),
-                (Icon || iconEl) && separator && (React__namespace.createElement("span", { className: CssClasses.separator, role: "separator" })),
+    return (React__namespace.createElement("details", __assign({}, rest, { className: clsx(rest.className), ref: details }),
+        React__namespace.createElement("summary", { className: clsx(constantsAccordion.CssClasses.summary, headingClassName !== null && headingClassName !== void 0 ? headingClassName : constantsAccordion.CssClasses.summaryColor) },
+            React__namespace.createElement("span", { className: constantsAccordion.CssClasses.summaryDiv },
+                Boolean(iconEl) && React__namespace.createElement("span", { className: constantsAccordion.CssClasses.icon }, iconEl),
+                Icon && !iconEl && React__namespace.createElement(Icon, { className: constantsAccordion.CssClasses.icon }),
+                (Icon || iconEl) && separator && (React__namespace.createElement("span", { className: constantsAccordion.CssClasses.separator, role: "separator" })),
                 React__namespace.createElement("span", { className: "flex-grow grow pr-[16px]" },
-                    React__namespace.createElement("span", { className: clsx(titleClassName !== null && titleClassName !== void 0 ? titleClassName : CssClasses.summaryTitleColor, CssClasses.summaryTitle) }, title),
-                    description && (React__namespace.createElement("span", { className: clsx(CssClasses.summaryDescription, descriptionClassName !== null && descriptionClassName !== void 0 ? descriptionClassName : CssClasses.summaryDescriptionColor) }, description))),
-                React__namespace.createElement(IconChevronDownSmall, { strokeColor: "gray-300", className: clsx('open:icon-dark-gray-500', CssClasses.chevron) }))),
-        React__namespace.createElement("div", { ref: content, className: CssClasses.contentWrapper }, fullWidthContent ? (React__namespace.createElement(React__namespace.Fragment, null, children)) : (React__namespace.createElement("div", { className: CssClasses.content }, children)))));
+                    React__namespace.createElement("span", { className: clsx(titleClassName !== null && titleClassName !== void 0 ? titleClassName : constantsAccordion.CssClasses.summaryTitleColor, constantsAccordion.CssClasses.summaryTitle) }, title),
+                    description && (React__namespace.createElement("span", { className: clsx(constantsAccordion.CssClasses.summaryDescription, descriptionClassName !== null && descriptionClassName !== void 0 ? descriptionClassName : constantsAccordion.CssClasses.summaryDescriptionColor) }, description))),
+                React__namespace.createElement(reactIcon.IconChevronDownSmall, { strokeColor: "gray-300", className: clsx('open:icon-dark-gray-500', constantsAccordion.CssClasses.chevron) }))),
+        React__namespace.createElement("div", { ref: content, className: constantsAccordion.CssClasses.contentWrapper }, fullWidthContent ? (React__namespace.createElement(React__namespace.Fragment, null, children)) : (React__namespace.createElement("div", { className: constantsAccordion.CssClasses.content }, children)))));
 };
 
 module.exports = Accordion;
 //# sourceMappingURL=index.umd.js.map
 
-/* <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]"> */
+/* <wind-keep class="flex-grow grow pr-[16px] open:icon-dark-gray-500"> */