@rabbitio/ui-kit 1.0.0-beta.43 → 1.0.0-beta.46

package/src/components/organisms/SwapForm/swap-form.module.scss

@@ -0,0 +1,120 @@
+@import "../../../../styles/index";
+
+// TODO: [dev] rename to .swap-dialog
+.swap-dialog-form {
+    width: 100%;
+
+    &-inputs {
+        position: relative;
+        z-index: 2;
+
+        &-separator {
+            height: 4px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            user-select: none;
+
+            img {
+                margin: -13px 0;
+            }
+
+            &:not(.disabled) {
+                @extend %hover-state;
+            }
+
+            &.disabled {
+                opacity: 0.7;
+            }
+        }
+    }
+
+    &-information-field {
+        z-index: 1;
+        background-color: SolidColor("lightsmoke");
+        margin-top: 4px;
+        border-radius: 0 0 8px 8px;
+        padding: 10px 20px;
+        position: relative;
+        text-align: left;
+
+        .semi-transparent {
+            opacity: 0.5;
+        }
+
+        p {
+            color: SolidColor("grey");
+
+            .interactable {
+                text-decoration: underline;
+                cursor: pointer;
+                transition: 0.3s;
+
+                @media (hover: hover) {
+                    &:hover {
+                        opacity: 0.7;
+                        transition: 0s;
+                    }
+                }
+
+                &:active {
+                    text-decoration: none;
+                }
+            }
+
+            .red {
+                color: SolidColor("red");
+            }
+        }
+
+        &::before {
+            z-index: 0;
+            content: "";
+            position: absolute;
+            left: 0;
+            bottom: calc(100% + 4px);
+
+            width: 100%;
+            height: 20px;
+            border-radius: 8px;
+            background-color: transparent;
+            box-shadow: 0px 0px 0px 4px $white, 0px 10px 0px 0px SolidColor("lightsmoke");
+        }
+    }
+
+    &-validation-text {
+        margin-top: Margin("5");
+    }
+
+    &-button-container {
+        &-consent-text {
+            text-align: end;
+            color: SolidColor("grey");
+            font-size: 13px;
+            font-style: italic;
+
+            @media (max-width: $phone-width) {
+                text-align: center;
+            }
+
+            &-link {
+                color: SolidColor("grey");
+                text-decoration: underline;
+
+                &:active {
+                    text-decoration: none;
+                }
+            }
+        }
+
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        margin-top: Margin("10");
+        gap: Margin("3");
+
+        @media (max-width: $phone-width) {
+            flex-direction: column-reverse;
+        }
+    }
+}

package/src/components/utils/textUtils.js

@@ -0,0 +1,18 @@
+import copy from "clipboard-copy";
+
+import { improveAndRethrow } from "../../common/errorUtils.js";
+
+/**
+ * Copies given text to clipboard inside browser.
+ *
+ * @param text - text to be copied
+ */
+export function copyBrowserTextToClipboard(text) {
+    try {
+        if (!copy(text)) {
+            throw new Error("Failed to execute copy command.");
+        }
+    } catch (e) {
+        improveAndRethrow(e, "saveTextToFile");
+    }
+}

package/src/constants/organisms/dialog/DialogStep/dialogStep.js

@@ -0,0 +1 @@
+export const DIALOG_STEP_CLASS = "dialog-step";

package/src/constants/organisms/dialog/dialog.js

@@ -0,0 +1,29 @@
+// If changed - update the prop configuration in the stories and related components.
+export const DIALOG_SIZES = {
+    small: {
+        width: "550px",
+        height: "650px",
+    },
+    regular: {
+        width: "600px",
+        height: "650px",
+    },
+    large: {
+        width: "700px",
+        height: "650px",
+    },
+    largePlus: {
+        width: "750px",
+        height: "650px",
+    },
+    largePlusPlus: {
+        width: "800px",
+        height: "650px",
+    },
+    extraLarge: {
+        width: "1000px",
+        height: "650px",
+    },
+};
+
+export const DIALOG_TRANSITION_STEP_DURATION = 200;

package/src/index.js

@@ -3,11 +3,31 @@ export { Button } from "./components/atoms/buttons/Button/Button.jsx";
 export { LoadingDots } from "./components/atoms/LoadingDots/LoadingDots.jsx";
 export { SupportChat } from "./components/atoms/SupportChat/SupportChat.jsx";
 export { AssetIcon } from "./components/atoms/AssetIcon/AssetIcon.jsx";
+export { LinkButton } from "./components/atoms/buttons/LinkButton/LinkButton.jsx";
+export { DialogButtons } from "./components/organisms/Dialog/DialogButtons/DialogButtons.jsx";
+export { BackgroundTitle } from "./components/atoms/BackgroundTitle/BackgroundTitle.jsx";
+export {
+    Close,
+    CLOSE_COLORS,
+} from "./components/atoms/buttons/Close/Close.jsx";
+export { Validation } from "./components/atoms/Validation/Validation.jsx";
+export { Dialog } from "./components/organisms/Dialog/Dialog.jsx";
+export { DialogStep } from "./components/organisms/Dialog/DialogStep/DialogStep.jsx";
+export { AssetSelection } from "./components/atoms/AssetSelection/AssetSelection.jsx";
+export {
+    Tooltip,
+    TOOLTIP_POSITIONS,
+} from "./components/atoms/Tooltip/Tooltip.jsx";
+export { NoticeIcon } from "./components/atoms/NoticeIcon/NoticeIcon.jsx";
+export { TitleBox } from "./components/atoms/TitleBox/TitleBox.jsx";
+export { AmountInput } from "./components/molecules/AmountInput/AmountInput.jsx";
+export { SwapForm } from "./components/organisms/SwapForm/SwapForm.jsx";
 
 export { useCallHandlingErrors } from "./components/hooks/useCallHandlingErrors.js";
 export { useReferredState } from "./components/hooks/useReferredState.js";
 export { handleClickOutside } from "./components/utils/uiUtils.js";
 export { InputValuesProviders } from "./components/utils/inputValueProviders.js";
+export { copyBrowserTextToClipboard } from "./components/utils/textUtils.js";
 
 export { saveQueryParameterAndValues } from "./components/utils/urlQueryUtils.js";
 export { removeQueryParameterAndValues } from "./components/utils/urlQueryUtils.js";
@@ -34,7 +54,7 @@ export { AxiosAdapter } from "./common/adapters/axiosAdapter.js";
 export { EmailsApi } from "./common/utils/emailAPI.js";
 export { IpAddressProvider } from "./common/external-apis/ipAddressProviders.js";
 
-// Robust data retriever service and related APIs
+// Robust data retriever service and related APIs (to be extracted later to dedicated lib)
 export { CacheAndConcurrentRequestsResolver } from "./robustExteranlApiCallerService/cacheAndConcurrentRequestsResolver.js";
 export { CachedRobustExternalApiCallerService } from "./robustExteranlApiCallerService/cachedRobustExternalApiCallerService.js";
 export { CancelProcessing } from "./robustExteranlApiCallerService/cancelProcessing.js";

package/stories/stubs/exampleContent.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+export const exampleContent = (
+    <div
+        style={{
+            width: "100%",
+            height: "300px",
+            borderRadius: "16px",
+            background: "#eee",
+            color: "#bbb",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            fontSize: "12px",
+            fontFamily: "monospace",
+        }}
+    >
+        Example content
+    </div>
+);

package/styles/index.scss

@@ -1,7 +1,9 @@
 @import "variables";
 @import "global-classes";
 @import "placeholder";
+@import "_mixins";
 
+// TODO: [feature, high] Uncomment fonts after adding a new packaging tool. task_id=7375fa84ccab4d66b9e3a177a41f7e26
 @font-face {
     //src: url("fonts/NunitoSans-ExtraBold.ttf");
     //font-family: "NunitoSans";
@@ -17,17 +19,17 @@
 @font-face {
     //src: url("fonts/NunitoSans-SemiBold.ttf");
     //font-family: "NunitoSans";
-    font-weight: 600;
+    font-weight: $semi-bold;
 }
 
 @font-face {
     //src: url("fonts/NunitoSans-Regular.ttf");
     //font-family: "NunitoSans";
-    font-weight: 400;
+    font-weight: $medium;
 }
 
 @font-face {
     //src: url("fonts/NunitoSans-Light.ttf");
     //font-family: "NunitoSans";
-    font-weight: 300;
+    font-weight: $regular;
 }