@rabbitio/ui-kit 1.0.0-beta.9 → 1.0.0-beta.91

package/src/ui-kit/components/atoms/buttons/Close/close.module.scss

@@ -0,0 +1,75 @@
+@use "../../../../assets/styles/index" as *;
+
+.close {
+    width: 24px;
+    height: 24px;
+    padding: 6px;
+    border-radius: 100%;
+    background-color: LightColor("grey-20");
+    opacity: 0.5;
+    transition: 0.2s all ease;
+    cursor: pointer;
+    box-sizing: border-box;
+
+    &.large {
+        width: 48px;
+        height: 48px;
+        padding: 16px;
+
+        @media (max-width: $tablet-width) {
+            width: 36px;
+            height: 36px;
+            padding: 12px;
+        }
+    }
+
+    &.white {
+        path {
+            fill: white;
+            background-color: none;
+        }
+    }
+
+    &.dark-invert {
+        opacity: 0.5;
+        background-color: SolidColor("grey");
+
+        @media (hover: hover) {
+            &:hover {
+                opacity: 1;
+                transition: opacity 0.03s ease;
+            }
+        }
+
+        &:active {
+            opacity: 1;
+            transition: opacity 0.03s ease;
+        }
+
+        path {
+            fill: SolidColor("lightsmoke");
+        }
+    }
+
+    &.dark {
+        box-shadow: $shadowOutlineStatic;
+
+        @media (hover: hover) {
+            &:hover {
+                opacity: 1;
+                transition: opacity 0.03s ease;
+                box-shadow: $shadowOutlineHover;
+            }
+        }
+
+        &:active {
+            opacity: 1;
+            transition: opacity 0.03s ease;
+            box-shadow: $shadowOutlineHover;
+        }
+
+        path {
+            fill: SolidColor("darkBlue");
+        }
+    }
+}

package/src/ui-kit/components/atoms/buttons/LinkButton/LinkButton.jsx

@@ -0,0 +1,112 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+
+import { useCallHandlingErrors } from "../../../../hooks/useCallHandlingErrors.js";
+
+import s from "./link-button.module.scss";
+import { LoadingDots } from "../../LoadingDots/LoadingDots.jsx";
+
+export const ICON_ROTATE_OPTIONS = {
+    rotate0: "0deg",
+    rotate90: "90deg",
+    rotate180: "180deg",
+    rotate270: "270deg",
+};
+
+/**
+ * LinkButton renders a clickable button which can optionally display an icon and loading animation.
+ * It can also be styled to be colored or disabled. This button supports rotating the icon according to specified degrees.
+ *
+ * @component
+ * @param {Object} props - Properties passed down to the component.
+ * @param {Function} props.onClick - Callback function triggered on button click. It should handle any post-click logic like resetting loading state.
+ * @param {boolean} props.isDisabled - If true, the button will be disabled and non-interactable.
+ * @param {boolean} props.isLoadable - If true, the button will display a loading indicator upon being clicked.
+ * @param {string} props.content - Text content displayed on the button.
+ * @param {boolean} props.isColored - If true, applies additional styling to the button.
+ * @param {string} props.icon - URL of an icon image to be displayed on the button.
+ * @param {string} props.iconRotate - Rotation angle for the icon. Valid values are defined in `ICON_ROTATE_OPTIONS`.
+ * @param {Object} props.IconComponent - Icon component, if SVG is imported directly.
+ *
+ * @returns {JSX.Element} A React component that renders a clickable and optionally loadable and icon-displaying button.
+ */
+export const LinkButton = ({
+    onClick = resetButtonLoader => {},
+    isDisabled = false,
+    isLoadable = false,
+    content = "",
+    isColored = true,
+    icon,
+    iconRotate,
+    IconComponent,
+}) => {
+    const callHandlingErrors = useCallHandlingErrors();
+
+    const [isLoading, setIsLoading] = useState(false);
+    const [processedIconRotation, setProcessedIconRotation] = useState(null);
+
+    const handleClick = () => {
+        callHandlingErrors(() => {
+            if (!isDisabled) {
+                if (isLoadable) {
+                    setIsLoading(true);
+                }
+                // TODO: [bug, moderate] Click can be called when there isLoading=true task_id=a15979a4ca2042b29dfd1d128a16c281
+                onClick(() => setIsLoading(false));
+            }
+        });
+    };
+
+    useEffect(() => {
+        if (iconRotate && Object.keys(ICON_ROTATE_OPTIONS).find(key => ICON_ROTATE_OPTIONS[key] === iconRotate))
+            setProcessedIconRotation(iconRotate);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [iconRotate]);
+
+    return isLoading ? (
+        <LoadingDots isColored={true} />
+    ) : (
+        <div
+            className={
+                s["link-button"] +
+                ` ${
+                    processedIconRotation && processedIconRotation !== ICON_ROTATE_OPTIONS.rotate0
+                        ? " " + s["icon-rotate-" + processedIconRotation]
+                        : ""
+                } ${isDisabled ? " " + s["disabled"] : ""}`
+            }
+            onClick={handleClick}
+        >
+            {icon ? <img src={icon} alt="link button alt" loading="lazy" /> : null}
+            {IconComponent ? <IconComponent /> : null}
+            <p
+                className={
+                    s["link-button-text"] + ` ${isColored ? s["colored"] : ""} ${isDisabled ? s["disabled"] : ""}`
+                }
+            >
+                {content}
+            </p>
+        </div>
+    );
+};
+
+LinkButton.propTypes = {
+    onClick: PropTypes.func,
+    isDisabled: PropTypes.bool,
+    isLoadable: PropTypes.bool,
+    content: PropTypes.string,
+    icon: PropTypes.string,
+    isColored: PropTypes.bool,
+    iconRotate: PropTypes.oneOf(Object.values(ICON_ROTATE_OPTIONS)),
+    IconComponent: PropTypes.elementType,
+};
+
+LinkButton.defaultProps = {
+    onClick: resetButtonLoader => {},
+    isDisabled: false,
+    isLoadable: false,
+    content: "",
+    icon: undefined,
+    isColored: true,
+    iconRotate: ICON_ROTATE_OPTIONS.rotate0,
+};

package/src/ui-kit/components/atoms/buttons/LinkButton/link-button.module.scss

@@ -0,0 +1,49 @@
+@use "../../../../assets/styles/index" as *;
+
+.link-button {
+    display: flex;
+    align-items: center;
+
+    &:not(.disabled) {
+        @extend %hover-state;
+    }
+
+    &.icon-rotate-90deg img,
+    &.icon-rotate-90deg svg {
+        transform: rotate(90deg);
+    }
+    &.icon-rotate-180deg img,
+    &.icon-rotate-180deg svg {
+        transform: rotate(180deg);
+    }
+    &.icon-rotate-270deg img,
+    &.icon-rotate-270deg svg {
+        transform: rotate(270deg);
+    }
+
+    img,
+    svg {
+        margin-left: -3px;
+        margin-right: Margin("1");
+    }
+
+    &-text {
+        @extend %text-bold;
+        font-size: 14px;
+        color: $white;
+        text-decoration: none;
+        text-align: center;
+        line-height: 14px;
+        // padding-bottom: 1px;
+        margin: 0;
+
+        &.colored {
+            color: SolidColor("tosca");
+        }
+
+        &.disabled {
+            color: SolidColor("grey");
+            cursor: default;
+        }
+    }
+}

package/src/ui-kit/components/atoms/buttons/RadioButtonWithText/RadioButtonWithText.jsx

@@ -0,0 +1,110 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+
+import s from "./radio-button-with-text.module.scss";
+
+import { useCallHandlingErrors } from "../../../../hooks/useCallHandlingErrors.js";
+
+import { Tooltip } from "../../Tooltip/Tooltip.jsx";
+import { LoadingDots } from "../../LoadingDots/LoadingDots.jsx";
+
+/**
+ * RadioButtonWithText component with a label and optional tooltip.
+ *
+ * @component
+ * @param {string} [text=""] - The text to display next to the radio button.
+ * @param {function} onStateChange - Callback function triggered when the state of the radio button changes.
+ * @param {boolean} [isSwitchedOn=false] - Whether the radio button is switched on.
+ * @param {boolean} [isDisabled=false] - Whether the radio button is disabled.
+ * @param {string} [tooltipText=""] - Text to display in the tooltip when hovering over the component.
+ * @param {string} [id=""] - The id of the radio button.
+ */
+export const RadioButtonWithText = ({
+    text = "",
+    onStateChange,
+    isSwitchedOn = false,
+    isDisabled = false,
+    tooltipText = "",
+    id = "",
+}) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [showTooltipTimeoutId, setShowTooltipTimeoutId] = useState(-1);
+
+    const handleError = useCallHandlingErrors();
+
+    function handleChange() {
+        if (!isLoading && !isDisabled) {
+            setIsLoading(true);
+            handleError(() => onStateChange(() => setIsLoading(false)));
+        }
+    }
+
+    const onMouseEnter = () => {
+        if (tooltipText) {
+            setShowTooltipTimeoutId(setTimeout(() => setShowTooltip(true), 700));
+        }
+    };
+
+    const onMouseLeave = () => {
+        if (tooltipText) {
+            setShowTooltip(false);
+            clearTimeout(showTooltipTimeoutId);
+            setShowTooltipTimeoutId(null);
+        }
+    };
+
+    return (
+        <div className={s["radio-button-with-text-container"]}>
+            <label
+                htmlFor={"radio-button-with-text-" + id}
+                className={[
+                    s["radio-button-with-text"],
+                    isSwitchedOn ? s["selected"] : "",
+                    isLoading ? s["hide"] : "",
+                    isDisabled ? s["disabled"] : "",
+                ].join(" ")}
+                onMouseEnter={e => handleError(onMouseEnter, e)}
+                onMouseLeave={e => handleError(onMouseLeave, e)}
+            >
+                {tooltipText && showTooltip ? (
+                    <div>
+                        {/*TODO: [bug, critical] click is still propagated*/}
+                        <Tooltip showTooltip={showTooltip} handleClick={() => setShowTooltip(false)}>
+                            {tooltipText}
+                        </Tooltip>
+                    </div>
+                ) : null}
+                <div className={s["radio-button-with-text-dots"] + (isLoading ? s["show"] : "")}>
+                    <LoadingDots />
+                </div>
+                <div className={s["radio-button-with-text-content"] + " " + (false ? s["hide"] : "")}>
+                    <input
+                        id={"radio-button-with-text-" + id}
+                        type="checkbox"
+                        value={isSwitchedOn}
+                        onChange={handleChange}
+                    />
+                    <span className={s["radio-button-with-text-wrapper"]}>{text}</span>
+                </div>
+            </label>
+        </div>
+    );
+};
+
+RadioButtonWithText.propTypes = {
+    text: PropTypes.string,
+    onStateChange: PropTypes.func,
+    isSwitchedOn: PropTypes.bool,
+    isDisabled: PropTypes.bool,
+    tooltipText: PropTypes.string,
+    id: PropTypes.string,
+};
+
+RadioButtonWithText.defaultProps = {
+    text: "",
+    isSwitchedOn: false,
+    isDisabled: false,
+    tooltipText: "",
+    id: "",
+};

package/src/ui-kit/components/atoms/buttons/RadioButtonWithText/radio-button-with-text.module.scss

@@ -0,0 +1,86 @@
+@use "../../../../assets/styles/index" as *;
+
+.radio-button-with-text-container {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    width: 57px;
+    height: 30px;
+}
+
+.radio-button-with-text {
+    height: 30px;
+    padding: Padding("1") 14px Padding("1") 43px;
+    position: relative;
+    background-color: SolidColor("smoke");
+    border-radius: 100px;
+    transition: 0.2s background-color $transitionEaseOut;
+    cursor: pointer;
+
+    &.selected {
+        background-color: SolidColor("tosca");
+        padding: Padding("1") 43px Padding("1") 14px;
+
+        &:before {
+            transform: translateX(27px);
+        }
+    }
+
+    &.disabled {
+        opacity: 0.6;
+        cursor: default !important;
+    }
+
+    &.hide {
+        &:before {
+            content: none;
+        }
+    }
+
+    &:before {
+        content: "";
+        width: 26px;
+        height: 26px;
+        border-radius: 50%;
+        background-color: $white;
+        position: absolute;
+        left: 2px;
+        top: 2px;
+        transform: translateX(0px);
+        transition: 0.2s transform $transitionEaseOut;
+    }
+
+    input {
+        display: none;
+    }
+
+    &-wrapper {
+        color: $white;
+        font-weight: $bold;
+        font-size: 12px;
+        line-height: 22px;
+        white-space: nowrap;
+    }
+
+    &-content {
+        margin-top: -1px;
+
+        &.hide {
+            opacity: 0;
+        }
+    }
+
+    &-dots {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        opacity: 0;
+        z-index: -1;
+
+        &.show {
+            opacity: 1;
+            z-index: 0;
+        }
+    }
+}