@rabbitio/ui-kit 1.0.0-alpha.1

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

@@ -0,0 +1,212 @@
+@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.js

@@ -0,0 +1,286 @@
+import React from "react";
+import Button from "./Button.js";
+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

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

package/styles/_functions.scss

@@ -0,0 +1,15 @@
+@function SolidColor($color) {
+    @return map_get($solidColor, $color);
+}
+
+@function LightColor($color) {
+    @return map_get($lightColor, $color);
+}
+
+@function Margin($marginSize) {
+    @return map_get($margin-sizes, $marginSize);
+}
+
+@function Padding($paddingSize) {
+    @return map_get($padding-sizes, $paddingSize);
+}