@conveyorhq/arrow-ds 1.52.0 → 1.53.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.52.0",
+  "version": "1.53.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

package/public/components/Accordion/Accordion.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { BoxProps } from "../Box";
 import { StackProps } from "../Stack";
+import { IconProps } from "../Icon";
 import type { AccordionOwnProps, AccordionItemOwnProps, AccordionDisclosureProps, AccordionGroupOwnProps } from "./types";
 export declare type AccordionGroupProps = AccordionGroupOwnProps & Pick<StackProps, "children" | "spacing" | "className">;
 export declare const AccordionGroup: ({ children, spacing, defaultValue, disableAnimation, className, ...rest }: AccordionGroupProps) => JSX.Element;
@@ -8,13 +9,18 @@ export declare type AccordionItemProps = AccordionItemOwnProps & BoxProps;
 export declare const AccordionItem: ({ value, defaultIsOpen: defaultIsOpenProp, children, className, ...rest }: AccordionItemProps) => JSX.Element;
 declare type AccordionButtonChildProps = Omit<AccordionDisclosureProps, "onToggle">;
 declare type AccordionButtonChildFunction = {
-    children(props: AccordionButtonChildProps): React.ReactNode;
+    children(props: AccordionButtonChildProps): React.ReactElement;
 };
 declare type AccordionButtonOwnProps = AccordionButtonChildFunction | {
     children: React.ReactNode;
 };
 export declare type AccordionButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & AccordionButtonOwnProps;
 export declare const AccordionButton: React.ForwardRefExoticComponent<AccordionButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare type AccordionIconProps = {
+    className?: string;
+    direction?: "up" | "down" | "left" | "right";
+} & Pick<IconProps, "color">;
+export declare const AccordionIcon: ({ className, direction, color, }: AccordionIconProps) => JSX.Element;
 export declare type AccordionContentProps = {
     children: React.ReactNode;
     maxHeight?: string;
@@ -28,6 +34,7 @@ export declare const Accordion: {
     Group: ({ children, spacing, defaultValue, disableAnimation, className, ...rest }: AccordionGroupProps) => JSX.Element;
     Item: ({ value, defaultIsOpen: defaultIsOpenProp, children, className, ...rest }: AccordionItemProps) => JSX.Element;
     Button: React.ForwardRefExoticComponent<AccordionButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    Icon: ({ className, direction, color, }: AccordionIconProps) => JSX.Element;
     Content: ({ children, maxHeight, style, className, ...rest }: AccordionContentProps) => JSX.Element;
 };
 export {};

package/public/components/Accordion/Accordion.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Accordion = exports.AccordionContent = exports.AccordionButton = exports.AccordionItem = exports.AccordionGroup = void 0;
+exports.Accordion = exports.AccordionContent = exports.AccordionIcon = exports.AccordionButton = exports.AccordionItem = exports.AccordionGroup = void 0;
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const renderprops_1 = require("react-spring/renderprops");
@@ -56,6 +56,7 @@ exports.AccordionButton = react_1.default.forwardRef((props, forwardedRef) => {
     const buttonRef = react_1.default.useRef(null);
     const ref = react_merge_refs_1.default([forwardedRef, buttonRef]);
     return (react_1.default.createElement("button", Object.assign({ ref: ref, type: "button", className: className, id: buttonId, "aria-controls": contentId, "aria-expanded": isOpen, "aria-disabled": disabled, disabled: disabled, onClick: (event) => {
+            event.stopPropagation();
             if (onClick) {
                 onClick(event);
             }
@@ -66,6 +67,16 @@ exports.AccordionButton = react_1.default.forwardRef((props, forwardedRef) => {
         ? children({ isOpen, onClose })
         : children));
 });
+const AccordionIcon = ({ className, direction = "down", color, }) => {
+    const icon = {
+        up: Icon_1.ICON_TYPE.CHEVRON_UP,
+        down: Icon_1.ICON_TYPE.CHEVRON_DOWN,
+        left: Icon_1.ICON_TYPE.CHEVRON_LEFT,
+        right: Icon_1.ICON_TYPE.CHEVRON_RIGHT,
+    };
+    return (react_1.default.createElement(Icon_1.Icon, { className: classnames_1.default([cn({ e: "icon" }), className]), "data-direction": direction, icon: icon[direction], color: color }));
+};
+exports.AccordionIcon = AccordionIcon;
 const AccordionContent = ({ children, maxHeight, style, className, ...rest }) => {
     const { disableAnimation } = context_1.useAccordionGroupContext();
     const { buttonId, contentId, defaultIsOpen, isOpen, } = context_1.useAccordionItemContext();
@@ -96,7 +107,7 @@ const Accordion = (props) => {
                     [cn({ e: "button", m: "isActive" })]: isActive,
                 }) },
                 react_1.default.createElement(Flex_1.Flex, { className: "items-center", as: "span" },
-                    iconSlot && (react_1.default.createElement(Box_1.Box, { className: classnames_1.default(cn({ e: "icon" })), as: "span" }, iconSlot)),
+                    iconSlot && (react_1.default.createElement(Box_1.Box, { className: classnames_1.default(cn({ e: "iconSlot" })), as: "span" }, iconSlot)),
                     title),
                 react_1.default.createElement(Icon_1.Icon, { icon: Icon_1.ICON_TYPE.CHEVRON_DOWN, className: cn({ e: "chevronIcon" }) }))),
         react_1.default.createElement(exports.AccordionContent, { className: cn({ e: "content" }), maxHeight: maxHeight },
@@ -106,4 +117,5 @@ exports.Accordion = Accordion;
 exports.Accordion.Group = exports.AccordionGroup;
 exports.Accordion.Item = exports.AccordionItem;
 exports.Accordion.Button = exports.AccordionButton;
+exports.Accordion.Icon = exports.AccordionIcon;
 exports.Accordion.Content = exports.AccordionContent;

package/public/css/styles.css

@@ -923,7 +923,7 @@ span.CodeMirror-selectedtext { background: none; }
   left: 8px;
 }
 
-.ads-Accordion-icon {
+.ads-Accordion-iconSlot {
   margin-right: 8px;
 }
 
@@ -996,6 +996,41 @@ span.CodeMirror-selectedtext { background: none; }
   padding-right: 32px;
 }
 
+.ads-Accordion-icon {
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+  transition-property: -webkit-transform;
+
+  transition-property: transform;
+
+  transition-property: transform, -webkit-transform;
+}
+
+.ads-Accordion--isOpen .ads-Accordion-icon[data-direction="up"] {
+  --tw-rotate: 180deg;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.ads-Accordion--isOpen .ads-Accordion-icon[data-direction="down"] {
+  --tw-rotate: -180deg;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.ads-Accordion--isOpen .ads-Accordion-icon[data-direction="left"] {
+  --tw-rotate: -90deg;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.ads-Accordion--isOpen .ads-Accordion-icon[data-direction="right"] {
+  --tw-rotate: 90deg;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .ads-Appbar {
   position: relative;
   display: flex;