@cypress-design/react-accordion 0.1.0

package/dist/index.umd.js

@@ -0,0 +1,181 @@
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var detailsAnimation = require('@cypress-design/details-animation');
+var iconsRegistry = require('@cypress-design/icon-registry');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
+var iconsRegistry__namespace = /*#__PURE__*/_interopNamespace(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.
+***************************************************************************** */
+
+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 (!iconsRegistry.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__namespace.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__namespace.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__namespace.useRef(null);
+    var content = React__namespace.useRef(null);
+    React__namespace.useEffect(function () {
+        if (details.current && content.current) {
+            new detailsAnimation.DetailsAnimation(details.current, content.current);
+        }
+    }, []);
+    return (React__namespace.createElement("details", __assign$1({}, rest, { className: clsx__default["default"](rest.className), ref: details }),
+        React__namespace.createElement("summary", { className: clsx__default["default"]('flex items-center', CssClasses.summary, headingClassName !== null && headingClassName !== void 0 ? headingClassName : CssClasses.summaryColor) },
+            Icon && React__namespace.createElement(Icon, { className: CssClasses.icon }),
+            Icon && separator && React__namespace.createElement("hr", { className: CssClasses.separator }),
+            React__namespace.createElement("div", { className: "flex-grow pr-16px" },
+                React__namespace.createElement("div", { className: clsx__default["default"](titleClassName !== null && titleClassName !== void 0 ? titleClassName : CssClasses.summaryTitleColor, CssClasses.summaryTitle) }, title),
+                description && (React__namespace.createElement("div", { className: clsx__default["default"](CssClasses.summaryDescription, descriptionClassName !== null && descriptionClassName !== void 0 ? descriptionClassName : CssClasses.summaryDescriptionColor) }, description))),
+            React__namespace.createElement(IconChevronDownSmall, { strokeColor: "gray-300", className: clsx__default["default"]('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)))));
+};
+
+module.exports = Accordion;
+
+/* <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.umd.js.map