Merge branch 'feat/init' of github.com:pangolindex/components into fe…

…at/init
pangolindex · Nov 2, 2021 · e44c186 · e44c186
2 parents f96fdfc + 2155d0d
commit e44c186
Show file tree

Hide file tree

Showing 10 changed files with 63 additions and 18 deletions.
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -3,11 +3,15 @@ import { IconAfter, IconBefore, Root } from './styles';
 import { ButtonProps } from './types';
 
 const Button: React.FC<ButtonProps> = (props) => {
-  const { iconBefore, children, iconAfter, loading, ...rest } = props;
+  const { iconBefore, children, iconAfter, loading, loadingText, ...rest } = props;
   return (
     <Root {...rest}>
       {loading ? (
-        'Loading...'
+        loadingText ? (
+          loadingText
+        ) : (
+          'Loading...'
+        )
       ) : (
         <>
           {iconBefore && <IconBefore>{iconBefore}</IconBefore>}

diff --git a/src/components/Button/styles.tsx b/src/components/Button/styles.tsx
@@ -1,3 +1,4 @@
+import { lighten } from 'polished';
 import styled, { css } from 'styled-components';
 import { ButtonProps } from './types';
 
@@ -34,12 +35,22 @@ const Plain = (props: ButtonProps) =>
   `;
 
 const Disable = (props: ButtonProps) =>
-  props.isDisabled &&
+  (props.isDisabled || props.loading) &&
   css`
     background-color: ${({ theme }) => theme.bg4};
     color: ${({ theme }) => theme.text3};
   `;
 
+const Confirmed = (props: ButtonProps) =>
+  props.variant === 'confirm' &&
+  css`
+    background-color: ${({ theme }) => lighten(0.5, theme.green1)};
+    color: ${({ theme }) => theme.green1};
+    border: 1px solid ${({ theme }) => theme.green1};
+    opacity: 50%;
+    cursor: auto;
+  `;
+
 export const Root = styled.button<ButtonProps>`
   padding: ${(props) => (props?.padding ? props?.padding : '18px')};
   width: ${({ width }) => (width ? width : '100%')};
@@ -65,6 +76,7 @@ export const Root = styled.button<ButtonProps>`
   ${Outline}
   ${Plain}
   ${Disable}
+  ${Confirmed}
 
   > * {
     user-select: none;

diff --git a/src/components/Button/types.tsx b/src/components/Button/types.tsx
@@ -8,7 +8,7 @@ export type ButtonProps = {
   /** type of the button */
   type?: 'button' | 'submit';
   /** varient of the button */
-  variant: 'primary' | 'secondary' | 'outline' | 'plain' | 'disable';
+  variant: 'primary' | 'secondary' | 'outline' | 'plain' | 'confirm';
   /** icon before the button text **/
   iconBefore?: React.ReactNode | null;
   /** icon after the button text **/
@@ -26,6 +26,7 @@ export type ButtonProps = {
   loading?: boolean;
   /** loading icon **/
   loadingIcon?: React.ReactNode;
+  loadingText?: string;
   padding?: string;
   borderRadius?: string;
 };
diff --git a/src/components/Steps/Step.tsx b/src/components/Steps/Step.tsx
@@ -3,7 +3,7 @@ import { IconDot, StepCounter, StepItem, StepName } from './styles';
 import { StepProps } from './types';
 
 const Step: React.FC<StepProps> = (props) => {
-  const { active, completed, stepNumber, disabled, title, progressDot, stepIndex, onStepClick } = props;
+  const { active, completed, stepNumber, disabled, title, progressDot } = props;
 
   const renderIconNode = () => {
     let iconNode;
@@ -21,12 +21,12 @@ const Step: React.FC<StepProps> = (props) => {
     return iconNode;
   };
 
-  const onClick: React.MouseEventHandler<HTMLDivElement> = () => {
-    onStepClick && onStepClick(stepIndex || 0);
-  };
+  // const onClick: React.MouseEventHandler<HTMLDivElement> = () => {
+  //   onStepClick && onStepClick(stepIndex || 0);
+  // };
 
   return (
-    <StepItem completed={completed} active={active} onClick={onClick} disabled={disabled} progressDot={progressDot}>
+    <StepItem completed={completed} active={active} disabled={disabled} progressDot={progressDot}>
       {renderIconNode()}
       {active && <StepName> {title}</StepName>}
     </StepItem>

diff --git a/src/components/Steps/styles.tsx b/src/components/Steps/styles.tsx
@@ -28,7 +28,7 @@ export const StepItem = styled.div<{
   &:before {
     position: absolute;
     content: '';
-    border-bottom: 2px solid #717171;
+    border-bottom: ${({ theme }) => `2px solid ${theme.bg5}`};
     width: 100%;
     top: ${({ progressDot }) => (progressDot ? '21px' : '15px')};
     left: -50%;
@@ -38,7 +38,7 @@ export const StepItem = styled.div<{
     position: absolute;
     content: '';
     border-bottom: 2px solid;
-    border-bottom-color: ${({ completed }) => (completed ? '#fff' : '#717171')};
+    border-bottom-color: ${({ completed, theme }) => (completed ? theme.primary1 : theme.bg5)};
     width: 100%;
     top: ${({ progressDot }) => (progressDot ? '21px' : '15px')};
     left: 50%;
@@ -61,8 +61,8 @@ export const StepCounter = styled.div<{ completed?: boolean; active?: boolean }>
   width: 30px;
   height: 30px;
   border-radius: 50%;
-  background: ${({ completed, active }) => (completed || active ? '#fff' : '#717171')};
-  color: ${({ completed, active }) => (completed || active ? '#111111' : '#fff')};
+  background: ${({ completed, active, theme }) => (completed || active ? theme.primary1 : theme.bg5)};
+  color: ${({ completed, active, theme }) => (completed || active ? theme.text6 : theme.white)};
   margin-bottom: 6px;
 `;
 
@@ -71,7 +71,7 @@ export const StepName = styled('div')`
   display: flex;
   justify-content: space-between;
   margin-bottom: 20px;
-  color: #fff;
+  color: ${({ theme }) => theme.text4};
 `;
 
 export const IconDot = styled.div<{ completed?: boolean; active?: boolean }>`
@@ -83,7 +83,7 @@ align-items: center;
 width: 10px;
 height: 10px;
 border-radius: 50%;
-background: ${({ completed, active }) => (completed || active ? '#fff' : '#717171')};
+background: ${({ completed, active, theme }) => (completed || active ? theme.primary1 : theme.bg5)};
 margin-top: 17px;
 }
 `;
diff --git a/src/components/Steps/types.tsx b/src/components/Steps/types.tsx
@@ -9,7 +9,7 @@ export interface StepsProps {
 }
 
 export interface StepProps {
-  onStepClick?: (index: number) => void;
+  // onStepClick?: (index: number) => void;
   disabled?: boolean;
   title?: React.ReactNode;
   completed?: boolean;

diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
@@ -5,7 +5,19 @@ import { AddonAfter, AddonBefore, ErrorText, InputWrapper, StyledInput } from '.
 import { TextInputProps } from './types';
 
 const TextInput: React.FC<TextInputProps> = (props) => {
-  const { label, addonLabel, addonAfter, addonBefore, error, showErrorMessage = true, ...rest } = props;
+  const {
+    label,
+    addonLabel,
+    addonAfter,
+    addonBefore,
+    error,
+    showErrorMessage = true,
+    onChange,
+    isNumeric,
+    ...rest
+  } = props;
+
+  const inputRegex = new RegExp(`^\\d+\\.?\\d*$`);
 
   return (
     <Box>
@@ -15,7 +27,20 @@ const TextInput: React.FC<TextInputProps> = (props) => {
       </Box>
       <InputWrapper>
         {addonBefore && <AddonBefore>{addonBefore}</AddonBefore>}
-        <StyledInput {...(rest as any)} />
+        <StyledInput
+          {...(rest as any)}
+          onChange={(e) => {
+            const value = e.target.value;
+
+            if (isNumeric && !!value) {
+              if (inputRegex.test(value)) {
+                onChange && onChange(value);
+              }
+            } else {
+              onChange && onChange(value);
+            }
+          }}
+        />
         {addonAfter && <AddonAfter>{addonAfter}</AddonAfter>}
       </InputWrapper>
       {showErrorMessage && <ErrorText>{error}</ErrorText>}

diff --git a/src/components/TextInput/types.tsx b/src/components/TextInput/types.tsx
@@ -18,4 +18,5 @@ export type TextInputProps = Omit<React.HTMLProps<HTMLInputElement>, 'accept' |
   addonLabel?: React.ReactNode | null;
   id?: string;
   fontSize?: number;
+  isNumeric?: boolean;
 };
diff --git a/src/theme/index.tsx b/src/theme/index.tsx
@@ -35,6 +35,7 @@ export const defaultColors: Colors = {
   text3: '#888D9B',
   text4: '#C3C5CB',
   text5: '#EDEEF2',
+  text6: '#111111',
 
   // backgrounds / greys
   bg1: '#FFFFFF',

diff --git a/src/theme/styled.ts b/src/theme/styled.ts
@@ -12,6 +12,7 @@ export interface Colors {
   text3: Color;
   text4: Color;
   text5: Color;
+  text6: Color;
 
   // backgrounds / greys
   bg1: Color;