Merge pull request #101 from subquery/feat/tag

feat: more components update

components/common/card/Card.tsx

@@ -36,6 +36,10 @@ export interface CardProps extends AntCardProps {
   customDropdown?: React.ReactNode;
   action?: Button;
 }
+
+/**
+ * @deprecated
+ */
 export const Card: React.FC<React.PropsWithChildren<CardProps>> = ({
   title,
   titleTooltip,

components/common/index.tsx

@@ -32,6 +32,8 @@ export { default as TextInput } from './textInput';
 export { default as Toast } from './toast';
 export { Typography } from './typography';
 export { default as SubqlCheckbox } from './checkbox';
+export { SubqlCard } from './subqlCard';
+export { SubqlTabs } from './subqlTabs';
 export * from './notification';
 export type { IGraphiQL } from './GraphiQL';
 export { default as SubqlProvider } from './provider';

components/common/progressBar/ProgressBar.less

@@ -0,0 +1,19 @@
+.subql-progress {
+
+  .ant-progress-bg {
+    background-color: var(--sq-blue600);
+  }
+
+  &.ant-progress-status-success {
+    .ant-progress-bg {
+      background-color: var(--sq-blue600);
+    }
+    .ant-progress-text {
+      display: none;
+    }
+
+    .ant-progress-outer {
+      padding-inline-end: 0;
+    }
+  } 
+}

components/common/progressBar/ProgressBar.tsx

@@ -4,26 +4,12 @@
 import * as React from 'react';
 import { Progress, ProgressProps } from 'antd';
 import clsx from 'clsx';
+import { useBem } from 'components/utilities/useBem';
+import './ProgressBar.less';
 
-export interface ProgressBarPros extends ProgressProps {
-  progress: number;
-  className?: string;
-  grayTheme?: boolean;
-}
+export type ProgressBarPros = ProgressProps;
 
-export const ProgressBar: React.FC<ProgressBarPros> = ({ grayTheme, progress, className, ...props }) => {
-  const sortedProgress = progress <= 1 ? progress * 100 : progress;
-  const trailColor = grayTheme ? '#DFE3E8' : undefined;
-  const strokeColor = grayTheme ? 'rgba(67, 136, 221, 0.4)' : undefined;
-
-  return (
-    <Progress
-      percent={sortedProgress}
-      status="active"
-      trailColor={trailColor}
-      strokeColor={strokeColor}
-      className={clsx(grayTheme && 'grayProgressStyle', className)}
-      {...props}
-    />
-  );
+export const SubqlProgress: React.FC<ProgressBarPros> = ({ ...props }) => {
+  const bem = useBem('subql-progress');
+  return <Progress {...props} className={clsx(bem(), props.className)}></Progress>;
 };

components/common/spinner/Spinner.tsx

@@ -16,8 +16,8 @@ const Spinner: React.FC<Props> = ({ size, color, className }) => {
       ? {
           height: size,
           width: size,
-          'border-color': color,
-          'border-right-color': 'transparent',
+          borderColor: color,
+          borderRightColor: 'transparent',
         }
       : undefined;
 

components/common/steps/Steps.less

@@ -0,0 +1,33 @@
+.subql-steps {
+  font-family: var(--sq-font-family);
+
+  .ant-steps-item-process {
+    .ant-steps-item-icon {
+      background-color: var(--sq-blue600);
+      border-color: var(--sq-blue600);
+    }
+  }
+
+  .ant-steps-item-finish {
+    .ant-steps-item-icon {
+      background-color: transparent;
+      border-color: var(--sq-blue600);
+    }
+  }
+
+  .ant-steps-item-wait {
+    .ant-steps-item-icon {
+      background-color: transparent;
+      border-color: var(--sq-gray400);
+      .ant-steps-icon {
+        color: var(--sq-gray400);
+      }
+    }
+
+    .ant-steps-item-content {
+      .ant-steps-item-title.ant-steps-item-title.ant-steps-item-title {
+        color: var(--sq-gray600);
+      }
+    }
+  }
+}

components/common/steps/Steps.tsx

@@ -3,15 +3,17 @@
 
 import * as React from 'react';
 import { Steps as AntSteps, StepsProps as AntStepsProps, StepProps } from 'antd';
-import styles from './Steps.module.css';
 import clsx from 'clsx';
+import { useBem } from 'components/utilities/useBem';
+import './Steps.less';
 
 export interface StepsProps extends AntStepsProps {
   steps: Array<StepProps>;
 }
 export const Steps: React.FC<React.PropsWithChildren<StepsProps>> = ({ steps, ...props }) => {
+  const bem = useBem('subql-steps');
   return (
-    <AntSteps size="small" {...props} className={clsx(styles.steps, props.className)}>
+    <AntSteps size="small" {...props} className={clsx(bem(), props.className)}>
       {steps?.map((stepProps, idx) => (
         <AntSteps.Step {...stepProps} key={idx}></AntSteps.Step>
       ))}

components/common/subqlCard/index.ts

@@ -0,0 +1,4 @@
+// Copyright 2020-2022 SubQuery Pte Ltd authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './subqlCard';

components/common/subqlCard/subqlCard.less

@@ -0,0 +1,39 @@
+.subql-card {
+  border-radius: 8px;
+  border: 1px solid rgba(223, 227, 232, 0.6);
+  background: #fff;
+  box-shadow: 0px 1px 8px 0px rgba(67, 136, 221, 0.12);
+  flex-shrink: 0;
+  font-family: var(--sq-font-family);
+  .ant-card-head {
+    padding: 20px;
+    padding-bottom: 12px;
+    border-bottom: none;
+
+    &-title {
+      padding: 0;
+    }
+  }
+
+  .ant-card-body {
+    padding: 20px;
+    padding-top: 12px;
+  }
+
+  &--split {
+    width: 100%;
+    height: 1px;
+    background: var(--sq-gray300);
+    transform: translateY(-12px);
+  }
+
+  &--withoutBody {
+    .ant-card-head {
+      padding-bottom: 20px;
+    }
+
+    .ant-card-body {
+      display: none;
+    }
+  }
+}

components/common/subqlCard/subqlCard.tsx

@@ -0,0 +1,59 @@
+// Copyright 2020-2022 SubQuery Pte Ltd authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { FC } from 'react';
+import { BsInfoCircle } from 'react-icons/bs';
+import { Typography } from '@subql/components';
+import { Card, CardProps, Tooltip } from 'antd';
+import clsx from 'clsx';
+import { isString } from 'lodash-es';
+
+import './subqlCard.less';
+import { useBem } from 'components/utilities/useBem';
+
+interface SubqlCardProps extends CardProps {
+  title?: React.ReactNode;
+  titleExtra?: React.ReactNode;
+  tooltip?: React.ReactNode;
+  children?: React.ReactNode;
+  width?: number;
+  style?: React.CSSProperties;
+}
+
+export const SubqlCard: FC<SubqlCardProps> = ({
+  children,
+  title,
+  titleExtra,
+  tooltip,
+  width,
+  style,
+  className,
+  ...rest
+}) => {
+  const bem = useBem('subql-card');
+  return (
+    <Card
+      {...rest}
+      className={clsx(bem({ withoutBody: !children ? 'withoutBody' : undefined }), className)}
+      title={
+        <div className="col-flex">
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            {isString(title) ? <Typography>{title}</Typography> : title}
+            {tooltip ? (
+              <Tooltip title={tooltip}>
+                <BsInfoCircle style={{ color: 'var(--sq-gray500)', fontSize: 14, marginLeft: 8 }}></BsInfoCircle>
+              </Tooltip>
+            ) : (
+              ''
+            )}
+          </div>
+          <div style={{ marginTop: 12 }}>{titleExtra}</div>
+        </div>
+      }
+      style={{ width: width ? `${width}px` : 'auto', ...style }}
+    >
+      {children && <div className={clsx(bem(['split']))}></div>}
+      {children}
+    </Card>
+  );
+};

components/common/subqlTabs/index.ts

@@ -0,0 +1,4 @@
+// Copyright 2020-2022 SubQuery Pte Ltd authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './subqlTabs';

components/common/subqlTabs/subqlTabs.less

@@ -0,0 +1,21 @@
+.subql-tabs {
+  .ant-tabs-tab {
+    color: var(--sq-gray500);
+    font-size: 18px;
+
+    & + .ant-tabs-tab {
+      margin: 0 0 0 24px;
+    }
+
+    &-btn {
+      display: inline-flex;
+      align-items: center;
+    }    
+  }
+  .ant-tabs-ink-bar {
+    background: var(--sq-blue600);
+  }
+  .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+    color: var(--sq-gray900);
+  }
+}