groundfloor-react-ui 1.2.3 → 1.2.5

package/components/Modal/ModalComp.js

@@ -7,26 +7,6 @@ import defaultThemeColor from '../constants/defaultThemeColor';
 import getDefaultStyles from '../constants/utils';
 import { Icon } from '../Icon';
 
-const customStyles = {
-  overlay: {
-    zIndex: '999999',
-    backgroundColor: 'rgb(0 0 0 / 30%)'
-  },
-  content: {
-    borderColor: defaultThemeColor.border,
-    top: '50%',
-    left: '50%',
-    right: 'auto',
-    bottom: 'auto',
-    marginRight: '-50%',
-    padding: '0px',
-    transform: 'translate(-50%, -50%)',
-    minWidth: '40vw',
-    maxHeight: '85vh',
-    overflow: 'hidden',
-  },
-};
-
 const ModalClose = styled.button`
   //Set the styles from the default styles object
   ${({ theme, type }) => {
@@ -35,29 +15,19 @@ const ModalClose = styled.button`
   // custom styles
     ${({ customModalCloseStyle }) => customModalCloseStyle}
   //Set the styles from the default styles object
-    &:focus{
-      outline: none;
-      border: none;
-    }
+    &:focus {
+    outline: none;
+    border: none;
+  }
 `;
 
 const ModalHeader = styled.div`
-  .header-title {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-  }
-  .header-description {
-    margin-top: 5px;
-  }
-  h4 {
-    margin-bottom: 0;
-  }
+  margin-top: 10px;
+
   // custom styles
   ${({ customModalHeaderStyle }) => customModalHeaderStyle}
 `;
 const ModalBody = styled.div`
-
   //Set the styles from the default styles object
   ${({ theme, type }) => {
     return getDefaultStyles(theme, type);
@@ -69,7 +39,7 @@ const ModalBody = styled.div`
 const ContentWrapper = styled.div`
   max-height: 60vh;
   overflow-y: auto;
-`
+`;
 
 const ModalFooter = styled.div`
   //Set the styles from the default styles object
@@ -81,27 +51,23 @@ const ModalFooter = styled.div`
 `;
 
 const CommonDiv = styled.div`
-      padding: .5rem 3rem 0rem 3rem;
+  padding: 0.5rem 3rem 0rem 3rem;
 `;
 
 const HeaderWrapper = styled.div`
   position: sticky;
-  background-color: ${({ theme }) => theme.bgColor}; 
-  width: 100%; 
+  background-color: ${({ theme }) => theme.bgColor};
+  width: 100%;
   top: 0px;
-  border-bottom: 1px solid     ${({ theme }) => theme.border}
-
-`
-
+  border-bottom: 1px solid ${({ theme }) => theme.border};
+`;
 
 try {
-  Modal.setAppElement('#root')
-
+  Modal.setAppElement('#root');
 } catch (error) {
-  Modal.setAppElement('#__next')
+  Modal.setAppElement('#__next');
 }
 
-
 export const ModalComp = ({
   modalIsOpen,
   toggleModal,
@@ -113,10 +79,35 @@ export const ModalComp = ({
   customModalHeaderStyle,
   customModalBodyStyle,
   customModalFooterStyle,
+  customWidth,
+  customMinWidth,
+  customMaxWidth,
   ...props
 }) => {
   const activeTheme = useTheme() || defaultThemeColor;
 
+  const customStyles = {
+    overlay: {
+      zIndex: '999999',
+      backgroundColor: 'rgb(0 0 0 / 30%)',
+    },
+    content: {
+      borderColor: defaultThemeColor.border,
+      top: '50%',
+      left: '50%',
+      right: 'auto',
+      bottom: 'auto',
+      marginRight: '-50%',
+      padding: '0px',
+      transform: 'translate(-50%, -50%)',
+      minWidth: customMinWidth,
+      maxHeight: '85vh',
+      overflow: 'hidden',
+      width: customWidth && customWidth,
+      maxWidth: customMaxWidth && customMaxWidth,
+    },
+  };
+
   return (
     <Modal
       isOpen={modalIsOpen}
@@ -149,8 +140,7 @@ export const ModalComp = ({
           type={'modalComp-modal-body'}
           style={customModalBodyStyle}
         >
-          <CommonDiv>        {bodyContent}
-          </CommonDiv>
+          <CommonDiv> {bodyContent}</CommonDiv>
         </ModalBody>
 
         <ModalFooter
@@ -206,6 +196,7 @@ ModalComp.propTypes = {
    *	Modal Footer custom styles
    */
   customModalFooterStyle: PropTypes.object,
+  customMinWidth: PropTypes.string,
 };
 
 ModalComp.defaultProps = {
@@ -219,4 +210,7 @@ ModalComp.defaultProps = {
   customModalHeaderStyle: {},
   customModalBodyStyle: {},
   customModalFooterStyle: {},
+  customMinWidth: '40vw',
+  customWidth: '',
+  customMaxWidth: '',
 };

package/components/Overlay/Overlay.js

@@ -1,8 +1,8 @@
-import React from "react";
 import PropTypes from 'prop-types';
+import React from "react";
+import { usePopperTooltip } from 'react-popper-tooltip';
 import styled from 'styled-components';
 import defaultStyles from '../constants/defaultStyle';
-import { usePopperTooltip } from 'react-popper-tooltip';
 
 /**
  * Primary UI component for user interaction

package/components/Pagination/Pagination.js

@@ -10,24 +10,24 @@ const StyledPagination = styled.div`
 `;
 
 export const Pagination = ({ ...props }) => {
-    const activeTheme = useTheme() || defaultThemeColor;
+  const activeTheme = useTheme() || defaultThemeColor;
 
-    return (
-        <StyledPagination theme={activeTheme}>{props.children}</StyledPagination>
-    );
+  return (
+    <StyledPagination theme={activeTheme}>{props.children}</StyledPagination>
+  );
 };
 
 const Item = styled.div`
   font-size: 14px;
   color: ${({ selected, theme }) =>
-        selected ? theme.variant['primary-1'] : null};
+    selected ? theme.variant['primary-1'] : null};
 
   svg {
     width: 14px;
     height: 14px;
     path {
       fill: ${({ selected, theme }) =>
-        selected ? theme.variant['primary-1'] : theme.variant['neutral-2']};
+    selected ? theme.variant['primary-1'] : theme.variant['neutral-2']};
     }
   }
 
@@ -38,22 +38,22 @@ const Item = styled.div`
 `;
 
 Pagination.PageItem = function PageItem({ selected, ...props }) {
-    const activeTheme = useTheme() || defaultThemeColor;
+  const activeTheme = useTheme() || defaultThemeColor;
 
-    return (
-        <Item selected={selected} theme={activeTheme} {...props}>
-            {props.children}
-        </Item>
-    );
+  return (
+    <Item selected={selected} theme={activeTheme} {...props}>
+      {props.children}
+    </Item>
+  );
 };
 
 Pagination.PageItem.propTypes = {
-    /**
-     *	Is Page selected?
-     */
-    selected: PropTypes.bool,
+  /**
+   *	Is Page selected?
+   */
+  selected: PropTypes.bool,
 };
 
 Pagination.PageItem.defaultProps = {
-    selected: false,
+  selected: false,
 };

package/components/ProgressSteps/ProgressSteps.js

@@ -1,5 +1,5 @@
-import React from "react";
 import PropTypes from 'prop-types';
+import React from "react";
 import styled, { useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 

package/components/SecondaryLink/DarkSecondaryLink.js

@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import styled, { useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 

package/components/SecondaryLink/LightSecondaryLink.js

@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import styled, { useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 

package/components/SecondaryLink/index.js

@@ -1,3 +1,3 @@
-export * from './LightSecondaryLink';
 export * from './DarkSecondaryLink';
+export * from './LightSecondaryLink';
 

package/components/Sidebar/Sidebar.js

@@ -1,5 +1,5 @@
-import React from "react";
 import PropTypes from 'prop-types';
+import React from "react";
 import styled from 'styled-components';
 import defaultStyles from '../constants/defaultStyle';
 import getDefaultStyles from '../constants/utils';

package/components/Sidebar/index.js

@@ -1,3 +1,3 @@
-export * from './Sidebar';
 export * from './Navbar';
+export * from './Sidebar';
 

package/components/StatusChip/PrimaryStatusChip.js

@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import styled, { useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 

package/components/StatusChip/SecondaryStatusChip.js

@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import styled, { useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 

package/components/StatusChip/SlimPrimaryStatusChip.js

@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import styled, { useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 

package/components/StatusChip/SlimSecondaryStatusChip.js

@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import styled, { useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 

package/components/StatusCircle/StatusCircle.js

@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import styled, { useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';