groundfloor-react-ui 1.0.4 → 1.0.5

package/components/{Form → DesignComponent/StyledComponent}/StyledComponent.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-expressions */
 import styled from "styled-components";
 
 export const PageContent = styled.div`
@@ -21,7 +20,7 @@ export const StyledRowSearch = styled.div`
   width: 100%;
   padding: 25px;
   column-gap: 18px;
-  align-items: flex-start;
+  align-items: center;
   box-sizing: border-box;
   background: linear-gradient(
     0deg,
@@ -61,7 +60,7 @@ export const StyledRowSearch = styled.div`
 
   & label {
     font-size: 14px;
-    // padding-bottom: 10px;
+    padding-bottom: 10px;
     margin-bottom: 0;
   }
 
@@ -118,7 +117,7 @@ export const StyledClearSearch = styled.span`
 export const StyledCentralBar = styled.div`
   display: flex;
   flex-direction: column;
-  flex-grow: 1;
+  ${'' /* flex-grow: 1; */}
   max-width: 1340px;
   width: 100%;
   align-items: center;
@@ -204,8 +203,6 @@ export const ActionItem = styled.div`
 
 export const FormContainer = styled.div`
   position: relative;
-  padding: 25px;
-  z-index: 2;
   display: flex;
   width: 100%;
   column-gap: 18px;
@@ -217,8 +214,7 @@ export const FormContainer = styled.div`
     hsla(0, 0%, 100%, 0.5) 100%
   );
   border-radius: 6px;
-  // margin-bottom: 25px;
-
+  
   @media (max-width: 900px) {
     flex-wrap: wrap;
     height: fit-content;
@@ -251,7 +247,7 @@ export const FormContainer = styled.div`
 
   & label {
     font-size: 14px;
-    // padding-bottom: 10px;
+    padding-bottom: 10px;
     margin-bottom: 0;
   }
 
@@ -294,7 +290,7 @@ export const FormContainer = styled.div`
 `;
 
 export const FormWrapper = styled.form`
-  width: 100%;
+  width: 40vw;
   display: flex;
   justify-content: center;
   flex-direction: column;
@@ -303,21 +299,20 @@ export const FormWrapper = styled.form`
 
 export const SubmitButtonContainer = styled.div`
   display: flex;
-  justify-content: center;
-  
-  // custom styles
-    ${({ style }) => style}
+  justify-content: end;
 `;
 
 export const MultiColumnWrapper = styled.div`
   display: flex;
   justify-content: center;
   flex-direction: row;
-{/*align-items: center;*/}
+  align-items: flex-start;
   gap: 20px;
 `;
 
 export const MultiColumnDiv = styled.div`
-  width:50%;
-    width:  ${({ cols }) => { Math.floor(100 / cols) + '%' }};
+  width: 48;
+  max-width: 48%;
+  min-width: 48%;
+  
 `;

package/components/DesignComponent/StyledComponent/index.js

@@ -0,0 +1 @@
+export * from './StyledComponent';

package/components/DesignComponent/index.js

@@ -0,0 +1 @@
+export * from './StyledComponent';

package/components/Form/FormComponent.js

@@ -1,11 +1,11 @@
 import React, { Fragment } from 'react'
-import { FormContainer, FormWrapper, MultiColumnWrapper, MultiColumnDiv } from './StyledComponent';
 import defaultThemeColor from '../constants/defaultThemeColor'
 import { Header } from '../Header';
 import { Label } from '../Label';
 import { CheckBoxInput, DateSelect, DropdownSelect, DropzoneInput, NumericInput, RadioInput, SearchInput, SignatureInput, TextArea, TextInput, ToggleSwitch } from '../Inputs';
 import { Rating } from '../Rating';
 import { PrimaryButton, SecondaryButton, TinyButton } from '../Button';
+import { FormContainer, FormWrapper, MultiColumnDiv, MultiColumnWrapper } from '../DesignComponent';
 
 
 
@@ -34,7 +34,7 @@ export const FormComponent = ({ formData, ...props }) => {
               text={item.text}
               {...props}
               style={{ marginBottom: '7px' }}
-               />
+            />
           </MultiColumnDiv>
           <MultiColumnDiv>
             <pre>
@@ -48,7 +48,7 @@ export const FormComponent = ({ formData, ...props }) => {
   const label = (item) => {
     return (
       <Label
-      style={{ marginBottom: '7px' }}
+        style={{ marginBottom: '7px' }}
         {...item}
         {...props}
       />

package/components/Form/SubmitComponent.js

@@ -1,6 +1,6 @@
 import React, { Fragment, useState } from 'react'
 import { PrimaryButton, SecondaryButton } from '../Button';
-import { SubmitButtonContainer } from './StyledComponent';
+import { SubmitButtonContainer } from '../DesignComponent';
 
 
 export const SubmitComponent = ({ formData, onSubmit, onReset, style, ...props }) => {

package/components/Form/index.js

@@ -1,4 +1,3 @@
 export * from './FormComponent';
 export * from './HeaderComponent';
 export * from './SubmitComponent';
-export * from './StyledComponent';