@rabbitio/ui-kit 1.0.0-alpha.2 → 1.0.0-alpha.4

package/stories/atoms/buttons/Button/Button.module.scss

@@ -1,212 +0,0 @@
-@import "../../../../styles/index";
-
-.button {
-    @extend %text-very-bold;
-    @extend %hover-state;
-    transition-property: all;
-    transition-duration: 0.1s;
-    font-size: 16px;
-    -webkit-border-radius: 200px;
-    -moz-border-radius: 200px;
-    border-radius: 200px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    text-decoration: none;
-    white-space: nowrap;
-    position: relative;
-    user-select: none;
-
-    &.disable {
-        &,
-        &:hover,
-        &:active {
-            background-color: LightColor("grey-20") !important;
-            color: SolidColor("grey") !important;
-            cursor: default !important;
-            box-shadow: none !important;
-        }
-    }
-
-    @media (max-width: $tablet-width) {
-        &.full-width-on-tablets {
-            max-width: 100%;
-            width: 100%;
-        }
-    }
-
-    @media (max-width: $phone-width) {
-        font-size: 14px;
-        &.full-width-on-mobiles {
-            max-width: 100%;
-            width: 100%;
-        }
-    }
-
-    &.xl {
-        height: 66px;
-        padding: 0 64px;
-        @media (max-width: $phone-width) {
-            height: 48px;
-            padding: 0;
-        }
-    }
-
-    &.lg {
-        font-size: 14px;
-        height: 48px;
-        padding: 0 48px;
-        @media (max-width: $phone-width) {
-            height: 40px;
-        }
-    }
-    &.md {
-        height: 40px;
-        font-size: 14px;
-        padding: 0 32px;
-    }
-    &.sm {
-        height: 35px;
-        font-size: 12px;
-        padding: 0 24px;
-
-        // This is somewhat of a hack, which should absolutely be refactored with a better layout
-        &.small-padding-on-small-mobiles {
-            @media (max-width: 415px) {
-                padding: 0 18px;
-            }
-        }
-    }
-
-    &.primary {
-        box-shadow: 0 20px 40px 0 rgba(11, 137, 143, 0.39);
-        background: SolidColor(tosca);
-        color: $white;
-    }
-
-    &.primary-bordered {
-        border: $buttonBorder;
-        color: SolidColor(tosca);
-        &:hover {
-            background-color: LightColor("tosca-20");
-            transition-duration: 0.02s;
-            opacity: 1;
-        }
-    }
-
-    &.primary-transparent {
-        background: LightColor(army-20);
-        color: SolidColor(tosca);
-    }
-
-    &.transparent {
-        background: LightColor(white-20);
-        color: $white;
-        box-shadow: 0 23px 30px 0 rgba(0, 102, 107, 0.39);
-    }
-
-    &.transparent-bordered {
-        border: $buttonBorderWhite;
-        color: $white;
-    }
-
-    &.transparent-without-shadow {
-        background: transparent;
-        border-color: transparent;
-        color: SolidColor(tosca);
-    }
-
-    &.white {
-        background: $white;
-        color: #39448e;
-        box-shadow: 0 20px 20px rgba(15, 24, 75, 0.2);
-    }
-
-    &-primary-dots-wrapper {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%) scale(1.15);
-        transition: all 0.1s $transitionEaseOut;
-        opacity: 0;
-
-        &.show {
-            opacity: 1;
-            transform: translate(-50%, -50%) scale(1);
-        }
-    }
-
-    &-success-icon {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        opacity: 0;
-        width: 20px;
-        height: 20px;
-        transform: translate(-50%, -50%) scale(1.4);
-        transition: all 0.1s $transitionEaseOut;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        &.show {
-            opacity: 1;
-            transform: translate(-50%, -50%) scale(1);
-        }
-
-        &::after {
-            content: " ";
-            display: inline-block;
-            transform: rotate(45deg);
-            height: 10px;
-            width: 5px;
-            border-bottom: 3px solid SolidColor(tosca);
-            border-right: 3px solid SolidColor(tosca);
-            margin-top: -4px;
-        }
-
-        &.transparent-bordered::after,
-        &.transparent::after,
-        &.primary::after {
-            border-color: $white;
-        }
-
-        &.primary-bordered::after,
-        &.primary-transparent::after,
-        &.transparent-without-shadow::after {
-            border-color: SolidColor(tosca);
-        }
-    }
-
-    &-text {
-        user-select: none;
-        transform: scale(1);
-        transition: all 0.1s $transitionEaseOut;
-        &.hide {
-            opacity: 0;
-            transform: scale(0.9);
-        }
-    }
-
-    .button-with-icon {
-        display: flex;
-        align-items: center;
-        transform: scale(1);
-        transition: all 0.1s $transitionEaseOut;
-
-        &.hide {
-            opacity: 0;
-            transform: scale(0.9);
-        }
-
-        &-text {
-            margin-left: Margin("3");
-        }
-
-        &.big-icon {
-            img {
-                height: 24px;
-            }
-        }
-    }
-}

package/stories/atoms/buttons/Button/Button.stories.jsx

@@ -1,286 +0,0 @@
-import React from "react";
-import Button from "./Button.jsx";
-import icon from "../../../assets/icons/transactions-icon.svg";
-
-const sizes = ["xl", "lg", "md", "sm"];
-const modes = [
-    "transparent",
-    "white",
-    "primary",
-    "primary-bordered",
-    "primary-transparent",
-    "transparent-bordered",
-    "transparent-without-shadow",
-];
-
-export default {
-    title: "Button",
-    component: Button,
-    parameters: {
-        viewport: {
-            defaultViewport: "reset",
-        },
-        backgrounds: {
-            default: "dark",
-        },
-    },
-    argTypes: {
-        size: {
-            control: { type: "select", options: sizes },
-        },
-        content: { control: "text" },
-        className: { table: { disable: true } },
-        onClick: { table: { disable: true } },
-        to: { table: { disable: true } },
-        icon: { table: { disable: true } },
-        setClickTrigger: { table: { disable: true } },
-        isFormSubmittingButton: { table: { disable: true } },
-        propagatePrimaryButtonClick: { table: { disable: true } },
-        handleError: { table: { disable: true } },
-    },
-    tags: ["autodocs"],
-};
-
-const ModeStory = ({ mode }) => (
-    <>
-        {sizes.map((size) => (
-            <div key={size} style={{ marginBottom: "10px" }}>
-                <Button
-                    size={size}
-                    mode={mode}
-                    content={`${
-                        mode.charAt(0).toUpperCase() + mode.slice(1)
-                    } ${size.toUpperCase()} Button`}
-                />
-            </div>
-        ))}
-    </>
-);
-
-const Template = (args) => <Button {...args} />;
-
-export const Default = Template.bind({});
-Default.args = { content: "Button" };
-
-export const Transparent = () => <ModeStory mode="transparent" />;
-
-export const White = () => <ModeStory mode="white" />;
-
-export const Primary = () => <ModeStory mode="primary" />;
-
-export const PrimaryBordered = () => <ModeStory mode="primary-bordered" />;
-
-export const PrimaryTransparent = () => (
-    <ModeStory mode="primary-transparent" />
-);
-
-export const TransparentBordered = () => (
-    <ModeStory mode="transparent-bordered" />
-);
-
-export const TransparentWithoutShadow = () => (
-    <ModeStory mode="transparent-without-shadow" />
-);
-
-// TODO: [dev] requires fix
-// export const LinkButton = () => (
-//     <>
-//         <h3>Link Button</h3>
-//         {sizes.map((size) => (
-//             <div key={size} style={{ marginBottom: "10px" }}>
-//                 <Button
-//                     size={size}
-//                     mode="primary"
-//                     content={`Link ${size.toUpperCase()} Button`}
-//                     to="/example-path"
-//                 />
-//             </div>
-//         ))}
-//     </>
-// );
-
-export const LoadingButton = () => (
-    <>
-        <h3>Loading Button</h3>
-        {sizes.map((size) => (
-            <div key={size} style={{ marginBottom: "10px" }}>
-                <Button
-                    size={size}
-                    mode="primary"
-                    content={`Loading ${size.toUpperCase()} Button`}
-                    loader={true}
-                    loading={true}
-                />
-            </div>
-        ))}
-    </>
-);
-
-export const IconButton = () => (
-    <>
-        <h3>Button with Icon</h3>
-        {modes.map((mode) => (
-            <div key={mode} style={{ marginBottom: "20px" }}>
-                <h4>Mode: {mode.charAt(0).toUpperCase() + mode.slice(1)}</h4>
-                {sizes.map((size) => (
-                    <div key={size} style={{ marginBottom: "10px" }}>
-                        <Button
-                            size={size}
-                            mode={mode}
-                            icon={icon}
-                            content={`${
-                                mode.charAt(0).toUpperCase() + mode.slice(1)
-                            } ${size.toUpperCase()} Button with Icon`}
-                        />
-                    </div>
-                ))}
-            </div>
-        ))}
-    </>
-);
-
-export const DisabledButton = () => (
-    <>
-        <h3>Disabled Button</h3>
-        {sizes.map((size) => (
-            <div
-                key={size}
-                style={{
-                    marginBottom: "10px",
-                    display: "flex",
-                    justifyContent: "space-between",
-                }}
-            >
-                <Button
-                    size={size}
-                    mode={"primary"}
-                    content={`${size.toUpperCase()} Button`}
-                    isDisabled={true}
-                />
-                <div style={{ marginRight: "10px" }} />
-                <Button
-                    size={size}
-                    mode={"primary"}
-                    icon={icon}
-                    content={`${size.toUpperCase()} Button with Icon`}
-                    isDisabled={true}
-                />
-            </div>
-        ))}
-    </>
-);
-
-export const CheckmarkOnClickButton = () => (
-    <>
-        <h3>Button with Checkmark on Click</h3>
-        {modes.map((mode) => (
-            <div key={mode} style={{ marginBottom: "10px" }}>
-                <Button
-                    size={"xl"}
-                    mode={mode}
-                    content={`${
-                        mode.charAt(0).toUpperCase() + mode.slice(1)
-                    } XL Button`}
-                    checkmarkOnClick={true}
-                    loader={false}
-                />
-            </div>
-        ))}
-    </>
-);
-
-export const BigIconButton = () => (
-    <>
-        <h3>Button with Big Icon</h3>
-        {modes.map((mode) => (
-            <div key={mode} style={{ marginBottom: "20px" }}>
-                <h4>Mode: {mode.charAt(0).toUpperCase() + mode.slice(1)}</h4>
-                {sizes.map((size) => (
-                    <div key={size} style={{ marginBottom: "10px" }}>
-                        <Button
-                            size={size}
-                            mode={mode}
-                            icon={icon}
-                            content={`${
-                                mode.charAt(0).toUpperCase() + mode.slice(1)
-                            } ${size.toUpperCase()} Button with Big Icon`}
-                            bigIcon={true}
-                        />
-                    </div>
-                ))}
-            </div>
-        ))}
-    </>
-);
-
-export const FullWidthOnMobiles = () => (
-    <>
-        <h3>Full Width on Mobiles</h3>
-        {modes.map((mode) => (
-            <div key={mode} style={{ marginBottom: "10px" }}>
-                <Button
-                    mode={mode}
-                    content={`Full Width Mobile ${
-                        mode.charAt(0).toUpperCase() + mode.slice(1)
-                    } Button`}
-                    fullWidthOnMobiles={true}
-                />
-            </div>
-        ))}
-    </>
-);
-FullWidthOnMobiles.parameters = {
-    viewport: {
-        defaultViewport: "iphone14promax",
-    },
-};
-
-export const FullWidthOnTablets = () => (
-    <>
-        <h3>Full Width on Tablets</h3>
-        {modes.map((mode) => (
-            <div key={mode} style={{ marginBottom: "10px" }}>
-                <Button
-                    mode={mode}
-                    content={`Full Width Tablet ${
-                        mode.charAt(0).toUpperCase() + mode.slice(1)
-                    } Button`}
-                    fullWidthOnTablets={true}
-                />
-            </div>
-        ))}
-    </>
-);
-FullWidthOnTablets.parameters = {
-    viewport: {
-        defaultViewport: "ipad",
-    },
-};
-
-export const SmallPaddingOnSmallMobilesButton = () => (
-    <>
-        <h3>Button with Small Padding on Small Mobiles</h3>
-        {modes.map((mode) => (
-            <div key={mode} style={{ marginBottom: "20px" }}>
-                <h4>Mode: {mode.charAt(0).toUpperCase() + mode.slice(1)}</h4>
-                {sizes.map((size) => (
-                    <div key={size} style={{ marginBottom: "10px" }}>
-                        <Button
-                            size={size}
-                            mode={mode}
-                            content={`${
-                                mode.charAt(0).toUpperCase() + mode.slice(1)
-                            } ${size.toUpperCase()} Button`}
-                            smallPaddingOnSmallMobiles={true}
-                        />
-                    </div>
-                ))}
-            </div>
-        ))}
-    </>
-);
-SmallPaddingOnSmallMobilesButton.parameters = {
-    viewport: {
-        defaultViewport: "iphone14",
-    },
-};

package/stories/index.js

@@ -1,2 +0,0 @@
-export { default as Button } from "./atoms/buttons/Button/Button";
-export { default as LoadingDots } from "./atoms/LoadingDots/LoadingDots";