@xaypay/tui 0.0.9 → 0.0.12

package/src/components/stepper/index.js

@@ -0,0 +1,45 @@
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import styles from "./stepper.module.css";
+
+export const Stepper = ({ className, onChange, stepLength, activeSteps }) => {
+  const classProps = classNames(className);
+  return (
+    <>
+      {(() => {
+        let steppers = [];
+        for (let step = 1; step <= stepLength; step++) {
+          steppers.push(
+            <div
+              className={classNames(
+                `${step <= activeSteps ? styles.activeRing : styles.bigRing}`
+              )}
+              key={step}
+            >
+              <div
+                className={classNames(
+                  `${
+                    step <= activeSteps
+                      ? styles.smallActiveRing
+                      : styles.smallRing
+                  }`
+                )}
+              >
+                {step <= activeSteps ? step : ""}
+              </div>
+            </div>
+          );
+        }
+        return steppers;
+      })()}
+    </>
+  );
+};
+
+Stepper.propTypes = {
+  className: PropTypes.string,
+  onChange: PropTypes.func,
+  stepLength: PropTypes.number,
+  activeSteps: PropTypes.number,
+};

package/src/components/stepper/stepper.module.css

@@ -0,0 +1,48 @@
+.bigRing {
+    width: 30px;
+    height: 30px;
+    border: 1px solid gray;
+    border-radius: 50%;
+    position: relative;
+    margin: 10px;
+    cursor:pointer;
+  }
+  
+  .smallRing {
+    position: absolute;
+    width: 50%;
+    height: 50%;
+    border-radius: 50%;
+    background-color: gray;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 12px;
+    color: white;
+    text-align: center;
+  }
+
+
+  .activeRing {
+    width: 30px;
+    height: 30px;
+    border: 1px solid blue;
+    border-radius: 50%;
+    position: relative;
+    margin: 10px;
+    cursor:pointer;
+  }
+
+  .smallActiveRing {
+    position: absolute;
+    width: 50%;
+    height: 50%;
+    border-radius: 50%;
+    background-color: blue;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 12px;
+    color: white;
+    text-align: center;
+  }

package/src/components/stepper/stepper.stories.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { Stepper } from "./index";
+export default {
+  component: Stepper,
+  title: "Components/Stepper",
+};
+
+const Template = ({ stepLength, activeSteps }) => {
+  return <Stepper stepLength={stepLength} activeSteps={activeSteps} />;
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  stepLength: 5,
+  activeSteps: 3,
+};

package/src/index.js

@@ -2,9 +2,10 @@ export * from './components/button';
 export * from './components/typography';
 export * from './components/autocomplate';
 export * from './components/checkbox';
-export * from './components/icon';
+export * from './components/icon/Icon';
 export * from './components/input';
 export * from './components/pagination';
 export * from './components/radio';
 export * from './components/captcha';
+export * from './components/stepper';
 // export * from './components/select';