@rabbitio/ui-kit 1.0.0-alpha.8 → 1.0.0-alpha.9

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

@@ -0,0 +1,289 @@
+import React from "react";
+import { Button } from "./Button.jsx";
+import icon from "../../../assets/icons/transactions-icon.svg";
+
+// import { Button } from "./../../../../dist/web/index";
+// const Button = RabbitioUiKit.Button;
+
+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,4 @@
+// export { default as Button } from "./atoms/buttons/Button/Button.jsx";
+// export { default as LoadingDots } from "./atoms/LoadingDots/LoadingDots.jsx";
+export { Button } from "./atoms/buttons/Button/Button.jsx";
+export { LoadingDots } from "./atoms/LoadingDots/LoadingDots.jsx";