groundfloor-react-ui 1.0.5 → 1.0.8

package/assets/icons/file-icon.svg

@@ -0,0 +1 @@
+<svg id="b2bc64ed-393d-4e15-8787-df9ec8050d97" data-name="ae65933b-c6e6-4b40-868c-58201eab117d" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.4 24"><defs><style>.bb405ea1-9d39-4705-a069-9048c97b4cda{fill:#2e56f4;}.accb9cd8-805e-4c9f-9b46-25d8ccc4d9c0{isolation:isolate;font-size:9.07px;fill:#fff;font-family:AvertaCY-Extrabold, Averta CY;font-weight:800;letter-spacing:0.04em;}</style></defs><path class="bb405ea1-9d39-4705-a069-9048c97b4cda" d="M20.1,8.5h-.6V5.6h0c0-.2-.1-.3-.1-.4L14.6,0H2.8a.9.9,0,0,0-.9.9h0V8.5H1.3A1.3,1.3,0,0,0,0,9.8H0v7a1.3,1.3,0,0,0,1.2,1.4h.7v4.9a.9.9,0,0,0,.9.9H18.5a1,1,0,0,0,1-.8h0v-5h.6a1.3,1.3,0,0,0,1.3-1.3h0v-7a1.3,1.3,0,0,0-1.3-1.3ZM18.5,22.8H2.8V18.2H18.5Zm0-14.3H2.8V.7h11V5.6c.1.3.3.5.5.4h4.2Z"/><text class="accb9cd8-805e-4c9f-9b46-25d8ccc4d9c0" transform="translate(0.8 16.6)">FILE</text></svg>

package/components/Button/PrimaryButton.js

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled, { useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
-// import { Loader } from '../Loaders';
-import getDefaultStyles, { hexToRGB } from "../constants/utils";
+import { Loader } from '../Loaders';
+import getDefaultStyles, { hexToRGB } from '../constants/utils';
 
 /**
  * Primary UI component for user interaction
@@ -12,61 +12,85 @@ import getDefaultStyles, { hexToRGB } from "../constants/utils";
 const sizes = {
     sm: {
         fontSize: '14px',
-        padding: '5px 15px'
+        padding: '5px 15px',
     },
     md: {
         fontSize: '16px',
-        padding: '5.5px 15px'
+        padding: '5.5px 15px',
     },
     lg: {
         fontSize: '18px',
-        padding: '8px 20px'
+        padding: '8px 20px',
     },
-}
+};
 
-const buttonDisabledBg = ({ theme, variant }) => hexToRGB(theme.variant[variant], 0.6);
+const buttonDisabledBg = ({ theme, variant }) =>
+    hexToRGB(theme.variant[variant], 0.6);
 const fontColor = defaultThemeColor.bgColor;
 
 const StyledButton = styled.button`
-    background: ${({ theme, variant }) => theme.variant[variant]};
+  background: ${({ theme, variant }) => theme.variant[variant]};
+  color: ${fontColor};
+  padding: ${({ size }) => sizes[size].padding};
+  border: 1px solid ${({ theme, variant }) => theme.variant[variant]};
+  border-radius: 5px;
+  font-size: ${({ size }) => sizes[size].fontSize};
+  display: flex;
+  align-items: center;
+  width: ${({ block }) => (block ? '100%' : 'auto')};
+  cursor: pointer;
+  line-height: 18px;
+  &:disabled {
     color: ${fontColor};
-    padding: ${({ size }) => sizes[size].padding};
-    border: 1px solid ${({ theme, variant }) => theme.variant[variant]};
-    border-radius: 5px;
-    font-size: ${({ size }) => sizes[size].fontSize};
-    display: flex;
-    align-items: center;
-    width: ${({ block }) => block ? '100%' : 'auto'};
-    cursor: pointer;
-    line-height: 18px;
-    &:disabled {
-      color: ${fontColor};
-      background: ${buttonDisabledBg};
-        border: 1px solid ${buttonDisabledBg};
-        cursor: not-allowed;
-    }
+    background: ${buttonDisabledBg};
+    border: 1px solid ${buttonDisabledBg};
+    cursor: not-allowed;
+  }
 
-    //Set the styles from the default styles object
-    ${({ theme, defaultStyle }) => {
+  //Set the styles from the default styles object
+  ${({ theme, defaultStyle }) => {
         return getDefaultStyles(theme, defaultStyle);
     }}
-`;
-// console.log(fontColor)
 
-export const PrimaryButton = ({ block, size, style, variant, disabled, isLoading, type, ...props }) => {
+  // custom styles
+  ${({ btnStyle }) => btnStyle}
+`;
 
+export const PrimaryButton = ({
+    btnStyle,
+    block,
+    size,
+    style,
+    variant,
+    disabled,
+    isLoading,
+    type,
+    ...props
+}) => {
     return (
         <StyledButton
             block={block}
             variant={variant}
-            defaultStyle="button"
+            defaultStyle='button'
             type={type}
             style={style}
             size={size}
             disabled={disabled}
+            btnStyle={btnStyle}
             {...props}
         >
-            {/* {isLoading && <div style={{ paddingRight: '10px', marginTop: '6px' }}><Loader customStyles={{ 'background-color': fontColor }} size={16} /></div>} */}
+            {isLoading && (
+                <div
+                    style={{
+                        paddingRight: '10px',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }}
+                >
+                    <Loader customStyles={{ 'background-color': fontColor }} size={16} />
+                </div>
+            )}
             {props.children}
         </StyledButton>
     );
@@ -102,14 +126,18 @@ PrimaryButton.propTypes = {
      */
     theme: PropTypes.object,
     /**
-    * Type of the btn i.e: button or submit etc.
-    */
+     * Type of the btn i.e: button or submit etc.
+     */
     type: PropTypes.string,
+    /**
+     * custome style of button
+     */
+    btnStyle: PropTypes.object,
 };
 
 StyledButton.defaultProps = {
     theme: defaultThemeColor,
-}
+};
 
 PrimaryButton.defaultProps = {
     theme: defaultThemeColor,
@@ -119,4 +147,5 @@ PrimaryButton.defaultProps = {
     disabled: false,
     size: 'md',
     onClick: undefined,
-};
+    btnStyle: {},
+};

package/components/Button/SecondaryButton.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import styled, { useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 import getDefaultStyles from '../constants/utils';
+import { Loader } from '../Loaders';
 
 /**
  * Secondary UI component for user interaction
@@ -10,60 +11,87 @@ import getDefaultStyles from '../constants/utils';
 
 const sizes = {
     sm: {
-        fontSize: '14px',
-        padding: '5px 15px'
+        fontSize: '14',
+        padding: '5px 15px',
     },
     md: {
-        fontSize: '16px',
-        padding: '5.5px 15px'
+        fontSize: '16',
+        padding: '5.5px 15px',
     },
     lg: {
-        fontSize: '18px',
-        padding: '8px 20px'
+        fontSize: '18',
+        padding: '8px 20px',
     },
-}
+};
 
 const buttonDisabledBg = '#BBC4CF';
+const fontColor = defaultThemeColor.primary['primary-1'];
 
 const StyledButton = styled.button`
-    color: ${({ theme, variant }) => theme.variant[variant]};
-    background: ${({ theme }) => theme.bgColor};
-    padding: ${({ size }) => sizes[size].padding};
-    border: 1px solid ${({ theme, variant }) => theme.variant[variant]};
-    font-size: ${({ size }) => sizes[size].fontSize};
-    border-radius: 5px;
-    display: flex;
-    align-items: center;
-    width: ${({ block }) => block ? '100%' : 'auto'};
-    cursor: pointer;
-    line-height: 18px;
-    &:disabled {
-        color: #929EAC;
-        border: 1px solid ${buttonDisabledBg};
-        cursor: not-allowed;
-    }
+  color: ${({ theme, variant }) => theme.variant[variant]};
+  background: ${({ theme }) => theme.bgColor};
+  padding: ${({ size }) => sizes[size].padding};
+  border: 1px solid ${({ theme, variant }) => theme.variant[variant]};
+  font-size: ${({ size }) => sizes[size].fontSize};
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  width: ${({ block }) => (block ? '100%' : 'auto')};
+  cursor: pointer;
+  line-height: 18px;
+  &:disabled {
+    color: #929eac;
+    border: 1px solid ${buttonDisabledBg};
+    cursor: not-allowed;
+  }
 
-    //Set the styles from the default styles object
-    ${({ theme, defaultStyle }) => {
+  //Set the styles from the default styles object
+  ${({ theme, defaultStyle }) => {
         return getDefaultStyles(theme, defaultStyle);
     }}
+  // custom styles
+    ${({ btnStyle }) => btnStyle}
 `;
 
-export const SecondaryButton = ({ block, size, style, variant, disabled, type, ...props }) => {
+export const SecondaryButton = ({
+    btnStyle,
+    isLoading,
+    block,
+    size,
+    style,
+    variant,
+    disabled,
+    type,
+    ...props
+}) => {
     const theme = useTheme() || defaultThemeColor;
 
     return (
         <StyledButton
             block={block}
             variant={variant}
-            defaultStyle="button"
+            defaultStyle='button'
             style={style}
             size={size}
             disabled={disabled}
             type={type}
+            btnStyle={btnStyle}
+            isLoading={isLoading}
             {...props}
         >
-            {props.children}
+            {isLoading && (
+                <div
+                    style={{
+                        paddingRight: '10px',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }}
+                >
+                    <Loader customStyles={{ 'background-color': fontColor }} size={16} />
+                </div>
+            )}
+            {props.children}{' '}
         </StyledButton>
     );
 };
@@ -94,14 +122,18 @@ SecondaryButton.propTypes = {
      */
     theme: PropTypes.object,
     /**
-    * Type of the btn i.e: button or submit etc.
-    */
+     * Type of the btn i.e: button or submit etc.
+     */
     type: PropTypes.string,
+    /**
+     * custome style of button
+     */
+    btnStyle: PropTypes.object,
 };
 
 StyledButton.defaultProps = {
     theme: defaultThemeColor,
-}
+};
 
 SecondaryButton.defaultProps = {
     theme: defaultThemeColor,
@@ -110,4 +142,5 @@ SecondaryButton.defaultProps = {
     disabled: false,
     size: 'md',
     onClick: undefined,
+    btnStyle: {},
 };