@rabbitio/ui-kit 1.0.0-beta.8 → 1.0.0-beta.80

package/src/ui-kit/components/atoms/TwoLinesOfText/LinesOfText.jsx

@@ -0,0 +1,76 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import s from "./lines-of-text.module.scss";
+
+/**
+ * Renders up to three lines of text with configurable options for horizontal layout, text wrapping, and breaking.
+ * Optionally, displays a default text content centered vertically if provided.
+ *
+ * @component
+ * @param {Object} props - The props object.
+ * @param {string} props.firstLineText - Text for the first line.
+ * @param {string} props.secondLineText - Text for the second line.
+ * @param {string} props.thirdLineText - Text for the third line.
+ * @param {boolean} props.isHorizontal - If true, displays the text horizontally.
+ * @param {string} [props.defaultTextContent] - Default text content to display, centered vertically.
+ * @param {boolean} [props.isFirstLineTextReducible] - If true, the first line text can be reduced.
+ * @param {string} [props.firstLineNotReducibleSuffix] - Suffix to append to the first line text if not reducible.
+ * @param {boolean} [props.wrapFirstLine] - If true, allows the first line text to wrap.
+ * @param {boolean} [props.breakFirstLine] - If true, allows the first line text to break onto the next line.
+ */
+export const LinesOfText = ({
+    firstLineText = "",
+    secondLineText = "",
+    thirdLineText = "",
+    isHorizontal = false,
+    defaultTextContent = "",
+    isFirstLineTextReducible = false,
+    firstLineNotReducibleSuffix = "",
+    wrapFirstLine = false,
+    breakFirstLine = false,
+}) => {
+    return defaultTextContent ? (
+        <div className={s["centered-vertically"]}>{defaultTextContent}</div>
+    ) : (
+        <div className={isHorizontal ? s["horizontal"] : ""}>
+            <h5 className={s["first-line-text"]}>
+                <span
+                    className={`${isFirstLineTextReducible ? s["shorted"] : s["full-text"]} ${
+                        wrapFirstLine ? " " + s["wrap"] : ""
+                    } ${breakFirstLine ? " " + s["break"] : ""}`}
+                >
+                    {firstLineText}
+                </span>
+                {`\u00A0${firstLineNotReducibleSuffix}`}
+            </h5>
+            {isHorizontal ? <div className={"line"} /> : null}
+            {secondLineText ? <p className={s["second-line-text"]}>{secondLineText}</p> : null}
+            {thirdLineText ? <p className={s["second-line-text"]}>{thirdLineText}</p> : null}
+        </div>
+    );
+};
+
+LinesOfText.propTypes = {
+    firstLineText: PropTypes.string,
+    secondLineText: PropTypes.string,
+    thirdLineText: PropTypes.string,
+    isHorizontal: PropTypes.bool,
+    defaultTextContent: PropTypes.string,
+    isFirstLineTextReducible: PropTypes.bool,
+    firstLineNotReducibleSuffix: PropTypes.string,
+    wrapFirstLine: PropTypes.bool,
+    breakFirstLine: PropTypes.bool,
+};
+
+LinesOfText.defaultProps = {
+    firstLineText: "",
+    secondLineText: "",
+    thirdLineText: "",
+    isHorizontal: false,
+    defaultTextContent: "",
+    isFirstLineTextReducible: false,
+    firstLineNotReducibleSuffix: "",
+    wrapFirstLine: false,
+    breakFirstLine: false,
+};

package/src/ui-kit/components/atoms/TwoLinesOfText/lines-of-text.module.scss

@@ -0,0 +1,65 @@
+@use "../../../assets/styles/index" as *;
+
+.first-line-text {
+    display: flex;
+    font-weight: $bold;
+    white-space: nowrap;
+    // font-family: NunitoSans;
+    text-align: left;
+
+    .wrap {
+        white-space: normal;
+        word-wrap: break-word;
+    }
+
+    .break {
+        word-break: break-all;
+        white-space: break-spaces;
+    }
+
+    .full-text {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        gap: Margin("2");
+    }
+
+    .shorted {
+        word-wrap: unset;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        @media (max-width: $tablet-width) {
+            width: auto;
+        }
+    }
+}
+
+.horizontal {
+    display: flex;
+    align-items: center;
+
+    @media (max-width: $phone-width) {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .line {
+        width: 20px;
+        margin: 0 Margin("3");
+        text-align: left;
+        // font-family: NunitoSans;
+
+        @media (max-width: $phone-width) {
+            display: none;
+        }
+    }
+}
+
+.second-line-text {
+    color: SolidColor("grey");
+    white-space: nowrap;
+    text-align: left;
+    // font-family: NunitoSans;
+}

package/src/ui-kit/components/atoms/Validation/Validation.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import s from "./validation.module.scss";
+import SuccessfulValidationIcon from "../../../assets/wrappedImages/successfulValidationIcon.jsx";
+import FailedValidationIcon from "../../../assets/wrappedImages/failedValidationIcon.jsx";
+
+/**
+ * Simple validation message with an icon.
+ * It shows either a success or failure icon based on the isSuccessAlert prop.
+ *
+ * @param {Object} props - The component props.
+ * @param {string} props.text - The validation message text to display.
+ * @param {boolean} props.isSuccessAlert - Determines if the displayed alert is for a success (true) or failure (false).
+ */
+export const Validation = ({ text = "", isSuccessAlert }) => {
+    return (
+        <div className={s["validation"]}>
+            <div>
+                {isSuccessAlert ? (
+                    // <img src={successfulValidationIcon} alt="validation icon" />
+                    <SuccessfulValidationIcon />
+                ) : (
+                    // <img src={failedValidationIcon} alt="validation icon" />
+                    <FailedValidationIcon />
+                )}
+            </div>
+            <span className={s["validation-text"]}>{text}</span>
+        </div>
+    );
+};
+
+Validation.propTypes = {
+    text: PropTypes.string,
+    isSuccessAlert: PropTypes.bool.isRequired,
+};
+
+Validation.defaultProps = {
+    text: "",
+    isSuccessAlert: false,
+};

package/src/ui-kit/components/atoms/Validation/validation.module.scss

@@ -0,0 +1,15 @@
+@use "../../../assets/styles/index" as *;
+
+.validation {
+    display: flex;
+    align-items: center;
+    margin-top: Margin("3");
+
+    &-text {
+        text-align: left;
+        color: SolidColor("sky");
+        margin-left: Margin("2");
+        font-size: 14px;
+        @extend %text-semibold;
+    }
+}

package/{stories → src/ui-kit/components}/atoms/buttons/Button/Button.jsx

@@ -46,7 +46,7 @@ export const Button = ({
     icon = "",
     content = "",
     isDisabled = false,
-    setClickTrigger = (p) => {},
+    setClickTrigger = p => {},
     isFormSubmittingButton = false,
     bigIcon = false,
     checkmarkOnClick = false,
@@ -72,7 +72,7 @@ export const Button = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isLoading]);
 
-    const buttonClick = (e) => {
+    const buttonClick = e => {
         if (isLoading || isDisabled) {
             return false;
         }
@@ -84,7 +84,11 @@ export const Button = ({
             }, 2000);
         }
 
-        e.persist(); // Persisting React's SyntheticEvent to be able to use it in any async context
+        if (e?.persist) {
+            // Persisting React's SyntheticEvent to be able to use it in any async context
+            e.persist();
+        }
+
         !propagatePrimaryButtonClick && e.stopPropagation();
         if (loader) {
             setIsLoading(true);
@@ -99,77 +103,47 @@ export const Button = ({
         (fullWidthOnMobiles ? ` ${styles["full-width-on-mobiles"]}` : "") +
         (fullWidthOnTablets ? ` ${styles["full-width-on-tablets"]}` : "") +
         (isDisabled ? ` ${styles.disable}` : "") +
-        (smallPaddingOnSmallMobiles
-            ? ` ${styles["small-padding-on-small-mobiles"]}`
-            : "");
+        (smallPaddingOnSmallMobiles ? ` ${styles["small-padding-on-small-mobiles"]}` : "");
 
     return (
         <>
             {isFormSubmittingButton ? <input type="submit" hidden /> : null}
             {to ? (
-                <a
-                    className={classNames}
-                    onClick={(e) => handleError(buttonClick, e)}
-                    href={to}
-                    ref={buttonRef}
-                >
+                <a className={classNames} onClick={e => handleError(buttonClick, e)} href={to} ref={buttonRef}>
                     {icon ? (
-                        <div
-                            className={
-                                styles["button-with-icon"] +
-                                (bigIcon ? ` ${styles["big-icon"]}` : "")
-                            }
-                        >
-                            <img src={icon} alt="button icon" />
-                            <span className={styles["button-with-icon-text"]}>
-                                {content}
-                            </span>
+                        <div className={styles["button-with-icon"] + (bigIcon ? ` ${styles["big-icon"]}` : "")}>
+                            <img src={icon} alt="button icon" loading="lazy" />
+                            <span className={styles["button-with-icon-text"]}>{content}</span>
                         </div>
                     ) : (
                         content
                     )}
                 </a>
             ) : (
-                <div
-                    className={classNames}
-                    onClick={(e) => handleError(buttonClick, e)}
-                    ref={buttonRef}
-                >
+                <div className={classNames} onClick={e => handleError(buttonClick, e)} ref={buttonRef}>
                     <div
-                        className={`${styles["button-primary-dots-wrapper"]} ${
-                            isLoading && loader ? styles.show : ""
-                        }`}
+                        className={`${styles["button-primary-dots-wrapper"]} ${isLoading && loader ? styles.show : ""}`}
                     >
-                        {loader && isLoading ? (
-                            <LoadingDots isColored={mode === "white"} />
-                        ) : null}
+                        {loader && isLoading ? <LoadingDots isColored={mode === "white"} /> : null}
                     </div>
                     <div
-                        className={`${styles["button-success-icon"]} ${
-                            styles[mode]
-                        } ${isCheckShown ? styles["show"] : ""}`}
+                        className={`${styles["button-success-icon"]} ${styles[mode]} ${
+                            isCheckShown ? styles["show"] : ""
+                        }`}
                     ></div>
                     {icon ? (
                         <div
                             className={`${styles["button-with-icon"]} ${
-                                (isLoading && loader) ||
-                                (checkmarkOnClick && isCheckShown)
-                                    ? styles["hide"]
-                                    : ""
+                                (isLoading && loader) || (checkmarkOnClick && isCheckShown) ? styles["hide"] : ""
                             } ${bigIcon ? styles["big-icon"] : ""}`}
                         >
-                            <img src={icon} alt="button icon" />
-                            <span className={styles["button-with-icon-text"]}>
-                                {content}
-                            </span>
+                            <img src={icon} alt="button icon" loading="lazy" />
+                            <span className={styles["button-with-icon-text"]}>{content}</span>
                         </div>
                     ) : (
                         <span
                             className={`${styles["button-text"]} ${
-                                (isLoading && loader) ||
-                                (checkmarkOnClick && isCheckShown)
-                                    ? styles["hide"]
-                                    : ""
+                                (isLoading && loader) || (checkmarkOnClick && isCheckShown) ? styles["hide"] : ""
                             }`}
                         >
                             {content}
@@ -225,11 +199,11 @@ Button.defaultProps = {
     icon: "",
     content: "",
     isDisabled: false,
-    setClickTrigger: (p) => {},
+    setClickTrigger: p => {},
     isFormSubmittingButton: false,
     bigIcon: false,
     checkmarkOnClick: false,
     propagatePrimaryButtonClick: true,
     smallPaddingOnSmallMobiles: false,
-    handleError: (func) => func(),
+    handleError: func => func(),
 };

package/{stories → src/ui-kit/components}/atoms/buttons/Button/Button.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@use "../../../../assets/styles/index" as *;
 
 .button {
     @extend %text-very-bold;

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

@@ -0,0 +1,58 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import s from "./close.module.scss";
+
+import { useCallHandlingErrors } from "../../../../hooks/useCallHandlingErrors.js";
+
+export const CLOSE_COLORS = {
+    WHITE: "white",
+    DARK: "dark",
+    DARK_INVERT: "dark-invert",
+};
+
+/**
+ * A component for rendering a close icon that handles errors on click.
+ * This component uses an SVG to render the icon and allows customization
+ * through props for color, size, and the click event handling.
+ *
+ * @param {Object} props - The properties passed to the component.
+ * @param {string} props.color - The color theme of the close icon.
+ *   Should be one of the properties of CLOSE_COLORS.
+ * @param {Function} props.onClick - The function to call when the icon is clicked.
+ * @param {boolean} props.large - Whether the icon should be displayed in a larger size.
+ */
+export const Close = ({ color = CLOSE_COLORS.WHITE, onClick = () => {}, large = false }) => {
+    const callHandlingErrors = useCallHandlingErrors();
+
+    return (
+        <svg
+            className={s["close"] + " " + s[color] + (large ? " " + s["large"] : "")}
+            onClick={e => callHandlingErrors(onClick, e)}
+            style={{ cursor: "pointer" }}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox={`0 0 50 50`}
+            x="0px"
+            y="0px"
+        >
+            <path
+                d="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88
+                c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242
+                C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879
+                s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z"
+            />
+        </svg>
+    );
+};
+
+Close.propTypes = {
+    color: PropTypes.oneOf(Object.values(CLOSE_COLORS)),
+    onClick: PropTypes.func,
+    large: PropTypes.bool,
+};
+
+Close.defaultProps = {
+    color: CLOSE_COLORS.WHITE,
+    onClick: () => {},
+    large: false,
+};

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;
+        }
+    }
+}