Merge pull request #11 from BQXBQX/dev-bqx

Dev bqx
NJUPT-SAST · Feb 6, 2024 · e97fe89 · e97fe89
2 parents e354706 + 460ceab
commit e97fe89
Show file tree

Hide file tree

Showing 12 changed files with 239 additions and 192 deletions.
diff --git a/packages/ui/lib/Button/Button.module.scss b/packages/ui/lib/Button/Button.module.scss
@@ -24,9 +24,14 @@
     color: var(--primary-color);
     border: 1px solid var(--primary-color);
   }
+  &.border {
+    border: solid 1px #f1f1f1;
+    background-color: var(--white-color);
+    color: var(--black-color);
+    font-weight: 500;
+  }
   &.ghost {
-    &:hover {
-      // background-color: #ffffffc4;
+    &:hover:not(.disabled) {
       filter: brightness(1);
       backdrop-filter: brightness(0.97);
     }
@@ -40,6 +45,7 @@
   &.disabled {
     filter: grayscale(1);
     cursor: not-allowed;
+    opacity: 0.4;
     &:hover {
       backdrop-filter: none;
     }

diff --git a/packages/ui/lib/Button/Button.stories.ts b/packages/ui/lib/Button/Button.stories.ts
@@ -12,7 +12,7 @@ const meta = {
   tags: ['autodocs'],
   argTypes: {
     color: {
-      options: ['primary', 'secondary', 'ghost', 'danger'],
+      options: ['primary', 'secondary', 'ghost', 'danger', 'border'],
       control: { type: 'select' },
     },
     size: {

diff --git a/packages/ui/lib/Button/Button.tsx b/packages/ui/lib/Button/Button.tsx
@@ -6,7 +6,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   /**
    * The color of the button.
    */
-  color?: 'primary' | 'secondary' | 'ghost' | 'danger';
+  color?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'border';
   /**
    * The size of the button.
    */
@@ -19,10 +19,17 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
    * If `true`, the button will be disabled.
    */
   disabled?: boolean;
+  /**
+   * className of the button
+   */
+  className?: string;
 }
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ color = 'primary', shadow = 'none', size = 'medium', disabled = false, ...rest }, ref) => {
+  (
+    { color = 'primary', shadow = 'none', size = 'medium', disabled = false, className, ...rest },
+    ref,
+  ) => {
     const btnClass = classnames(
       styles['base'],
       styles[color],
@@ -33,7 +40,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <button
         ref={ref}
-        className={btnClass}
+        className={`${btnClass} ${className}`}
         {...rest}
         disabled={disabled}
       />

diff --git a/packages/ui/lib/Pagination/Pagination.module.scss b/packages/ui/lib/Pagination/Pagination.module.scss
@@ -2,40 +2,48 @@
   display: flex;
   flex-direction: row;
   gap: 5px;
-  &.disabled {
-    .item {
-      opacity: 0.4 !important;
-      cursor: not-allowed !important;
-    }
-  }
-  .item {
-    height: 32px;
+  .pagination-item {
     width: 32px;
-    border-radius: 8px;
+    height: 32px;
     display: flex;
-    justify-content: center;
     align-items: center;
-    border: solid 1px #f1f1f1;
-    font-size: 13px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: none;
-    &:hover:not(&.more):not(&.active) {
-      background-color: #f1f1f1;
-      transition: all 0.2s ease-in-out;
-    }
-    &.active {
-      background-color: var(--primary-color);
-      color: var(--white-color);
-      transition: all 0.1s ease-in-out;
-    }
-    &.disabled {
-      opacity: 0.4;
-      cursor: not-allowed;
-    }
-    &.more:hover {
-      opacity: 0.6 !important;
-      transition: all 0.2s ease-in-out;
-    }
+    justify-content: center;
+    font-size: 13px !important;
   }
+  // &.disabled {
+  //   .item {
+  //     opacity: 0.4 !important;
+  //     cursor: not-allowed !important;
+  //   }
+  // }
+  // .item {
+  //   height: 32px;
+  //   width: 32px;
+  //   border-radius: 8px;
+  //   display: flex;
+  //   justify-content: center;
+  //   align-items: center;
+  //   border: solid 1px #f1f1f1;
+  //   font-size: 13px;
+  //   font-weight: 500;
+  //   cursor: pointer;
+  //   transition: none;
+  //   &:hover:not(&.more):not(&.active) {
+  //     background-color: #f1f1f1;
+  //     transition: all 0.2s ease-in-out;
+  //   }
+  //   &.active {
+  //     background-color: var(--primary-color);
+  //     color: var(--white-color);
+  //     transition: all 0.1s ease-in-out;
+  //   }
+  //   &.disabled {
+  //     opacity: 0.4;
+  //     cursor: not-allowed;
+  //   }
+  //   &.more:hover {
+  //     opacity: 0.6 !important;
+  //     transition: all 0.2s ease-in-out;
+  //   }
+  // }
 }
diff --git a/packages/ui/lib/Pagination/Pagination.stories.tsx b/packages/ui/lib/Pagination/Pagination.stories.tsx
@@ -25,7 +25,7 @@ const defaultProps: PaginationProps = {
   total: 80,
   pageSize: 10,
   activePage: undefined,
-  defaultActivePage: 1,
+  defaultActivePage: 4,
   onChange: test,
   disabled: false,
 };