Merge pull request #2 from pangolindex/feat/init

pangolindex · Nov 2, 2021 · e46ead4 · e46ead4
2 parents b2be54e + 0013576
commit e46ead4
Show file tree

Hide file tree

Showing 13 changed files with 107 additions and 43 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pangolindex/components",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "engines": {

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -3,12 +3,22 @@ import { IconAfter, IconBefore, Root } from './styles';
 import { ButtonProps } from './types';
 
 const Button: React.FC<ButtonProps> = (props) => {
-  const { iconBefore, children, iconAfter, ...rest } = props;
+  const { iconBefore, children, iconAfter, loading, loadingText, ...rest } = props;
   return (
     <Root {...rest}>
-      {iconBefore && <IconBefore>{iconBefore}</IconBefore>}
-      {children}
-      {iconAfter && <IconAfter>{iconAfter}</IconAfter>}
+      {loading ? (
+        loadingText ? (
+          loadingText
+        ) : (
+          'Loading...'
+        )
+      ) : (
+        <>
+          {iconBefore && <IconBefore>{iconBefore}</IconBefore>}
+          {children}
+          {iconAfter && <IconAfter>{iconAfter}</IconAfter>}
+        </>
+      )}
     </Root>
   );
 };

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';
 
@@ -33,6 +34,23 @@ const Plain = (props: ButtonProps) =>
     align-items: center;
   `;
 
+const Disable = (props: ButtonProps) =>
+  (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%')};
@@ -48,17 +66,17 @@ export const Root = styled.button<ButtonProps>`
   justify-content: center;
   flex-wrap: nowrap;
   align-items: center;
-  cursor: pointer;
+  cursor: ${(props) => (props?.isDisabled ? 'auto' : 'pointer')};
+  pointer-events: ${(props) => (props?.isDisabled ? 'none' : 'all')};
   position: relative;
   z-index: 1;
-  &:disabled {
-    cursor: auto;
-  }
 
   ${Primary}
   ${Secondary}
   ${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';
+  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/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -23,7 +23,7 @@ const Checkbox: React.FC<CheckboxProps> = (props) => {
       <OuterSquare size={size as number}>
         <InnerSquare selected={internalChekced} size={size as number} />
       </OuterSquare>
-      {Boolean(label) && <Label>{label}</Label>}
+      {Boolean(label) && <Label color="text1">{label}</Label>}
     </Root>
   );
 };

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,19 +28,19 @@ 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 ? '20px' : '15px')};
+    top: ${({ progressDot }) => (progressDot ? '21px' : '15px')};
     left: -50%;
     z-index: 2;
   }
   &:after {
     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 ? '20px' : '15px')};
+    top: ${({ progressDot }) => (progressDot ? '21px' : '15px')};
     left: 50%;
     z-index: ${({ completed }) => (completed ? 3 : 2)};
   }
@@ -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,19 +71,18 @@ 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 }>`
-position: relative;
-z-index: 5;
-display: flex;
-justify-content: center;
-align-items: center;
-width: 10px;
-height: 10px;
-border-radius: 50%;
-background: ${({ completed, active }) => (completed || active ? '#fff' : '#717171')};
-margin-top: 17px;
-}
+  position: relative;
+  z-index: 5;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  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,17 +5,42 @@ 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>
-      <Box display="flex" justifyContent="space-between">
-        {label && <Text>{label}</Text>}
+      <Box display="flex" justifyContent={label ? 'space-between' : 'flex-end'}>
+        {label && <Text color="text4">{label}</Text>}
         {addonLabel && addonLabel}
       </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/styles.tsx b/src/components/TextInput/styles.tsx
@@ -11,15 +11,18 @@ export const InputWrapper = styled(Box)`
   display: flex;
   position: relative;
   box-sizing: border-box;
-  background-color: ${({ theme }) => theme.bg3};
-  color: ${({ theme }) => theme.text1};
+  background-color: ${({ theme }) => theme.bg6};
+  color: ${({ theme }) => theme.text4};
 `;
 export const StyledInput = styled.input<TextInputProps>`
   flex: 1;
   border: 1px solid transparent;
-  background-color: ${({ theme }) => theme.bg3};
-  color: ${({ theme }) => theme.text1};
+  font-size: ${(props) => (props?.fontSize ? `${props?.fontSize}px` : '18px')};
+  background-color: ${({ theme }) => theme.bg6};
+  color: ${({ theme }) => theme.text4};
   outline: none;
+  width: 100%;
+  padding: 0;
 `;
 export const AddonAfter = styled(Box)`
   position: relative;

diff --git a/src/components/TextInput/types.tsx b/src/components/TextInput/types.tsx
@@ -17,4 +17,6 @@ export type TextInputProps = Omit<React.HTMLProps<HTMLInputElement>, 'accept' |
   label?: string;
   addonLabel?: React.ReactNode | null;
   id?: string;
+  fontSize?: number;
+  isNumeric?: boolean;
 };
diff --git a/src/theme/index.tsx b/src/theme/index.tsx
@@ -35,13 +35,16 @@ export const defaultColors: Colors = {
   text3: '#888D9B',
   text4: '#C3C5CB',
   text5: '#EDEEF2',
+  text6: '#111111',
 
   // backgrounds / greys
   bg1: '#FFFFFF',
   bg2: '#F7F8FA',
   bg3: '#EDEEF2',
   bg4: '#CED0D9',
   bg5: '#888D9B',
+  bg6: '#1C1C1C',
+  bg7: '#2C2D33',
 
   //specialty colors
   modalBG: 'rgba(0,0,0,0.3)',

diff --git a/src/theme/styled.ts b/src/theme/styled.ts
@@ -12,13 +12,16 @@ export interface Colors {
   text3: Color;
   text4: Color;
   text5: Color;
+  text6: Color;
 
   // backgrounds / greys
   bg1: Color;
   bg2: Color;
   bg3: Color;
   bg4: Color;
   bg5: Color;
+  bg6: Color;
+  bg7: Color;
 
   modalBG: Color;
   advancedBG: Color;