feat: [BB-191] Feature** Fields and Soil Stage 2 (#192)

* primary changes

* format

* configured button to accept children

* format?

* organized logic

* format

* last commit for the day, scratch again tomorrow

* ugh

* scratched earlier work, simpler workflow with dividers

* removed fieldsInfo

* forgot to save

* remoevd setField hook

* fixed some bugs, finished styling

* Removed formik and values, don't need it anymore

* Added id for fields

* switched button types for add and next

* format

* separated into components, formik stays the same

* forgot to save

* imported StyledButtonGroupContainer

* changed h4 into h2

* set initial values to empty for second adding new field

* format

* cleanup

* deploy again

* removed comment deploy

* button styling consistency fixed

* format

* Created a function for buttonSizes using switch

* format

* error message style defined

* format

* minor revision done, ready for another review

* format

frontend/src/Commons/Button/Button.style.ts

@@ -1,31 +1,32 @@
 import styled from '@emotion/styled';
 import * as tokens from '@bcgov/design-tokens/js';
 import screenSizes from '@Constants/ScreenSize';
+import ComponentText from '@Constants/ComponentText';
+import getButtonSize from './ButtonSizeConstant';
 
 type StyledButtonProps = {
   size: string;
-  type: string;
   disabled: boolean;
+  radius: string;
+  actions: string;
 };
 
 const StyledButton = styled.button<StyledButtonProps>`
   display: flex;
   align-items: center;
   justify-content: center;
-  max-height: ${(props) => (props.size === 'sm' ? '27px' : props.size === 'md' ? '25px' : '40px')};
+  max-height: 42px;
   height: 100%;
   width: 100%;
-  max-width: ${(props) => (props.size === 'sm' ? '52px' : props.size === 'md' ? '200px' : '300px')};
-  background-color: ${(props) => (props.type === 'button' || props.type === 'submit'
+  max-width: ${(props) => getButtonSize(props.size, ComponentText.ISMOBILE)};
+  background-color: ${(props) => (props.actions === 'primary'
     ? tokens.surfaceColorPrimaryButtonDefault
     : tokens.surfaceColorSecondaryButtonDefault)};
-  color: ${(props) => (props.type === 'button' || props.type === 'submit'
+  color: ${(props) => (props.actions === 'primary'
     ? tokens.typographyColorPrimaryInvert
-    : tokens.typographyColorPrimary)};
-  border-radius: 8px;
-  border: ${(props) => (props.type === 'button' || props.type === 'submit'
-    ? 0
-    : `1px solid ${tokens.surfaceColorBorderMedium}`)};
+    : tokens.typographyColorSecondary)};
+  border-radius: ${(props) => props.radius};
+  border: ${(props) => (props.actions === 'primary' ? 0 : `1px solid ${tokens.surfaceColorBorderMedium}`)};
   padding: 20px 30px;
   font-family: ${tokens.typographyFontFamiliesBcSans};
   font-weight: ${tokens.typographyFontWeightsBold};
@@ -35,9 +36,14 @@ const StyledButton = styled.button<StyledButtonProps>`
   }
 
   @media (min-width: ${screenSizes.desktop}) {
-    max-height: ${(props) => (props.size === 'sm' ? '27px' : props.size === 'md' ? '25px' : '40px')};
-    max-width: ${(props) => (props.size === 'sm' ? '52px' : props.size === 'md' ? '200px' : '300px')};
+    max-width: ${(props) => getButtonSize(props.size, ComponentText.ISDESKTOP)};
   }
 `;
 
-export default StyledButton;
+const StyledChildrenContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+
+export { StyledButton, StyledChildrenContainer };

frontend/src/Commons/Button/Button.tsx

@@ -1,6 +1,8 @@
-import StyledButton from './Button.style';
+import React from 'react';
+import { StyledButton, StyledChildrenContainer } from './Button.style';
 
 type ButtonSizes = 'sm' | 'md' | 'lg';
+type ButtonActions = 'primary' | 'secondary';
 type ButtonTypes = 'button' | 'submit' | 'reset' | undefined;
 
 type ButtonProps = {
@@ -9,14 +11,20 @@ type ButtonProps = {
   size?: ButtonSizes;
   disabled?: boolean;
   type?: ButtonTypes;
+  radius?: string;
+  actions?: ButtonActions;
+  children?: React.ReactNode;
 };
 
 const Button = ({
   handleClick,
   text,
   size = 'md',
   disabled = false,
+  radius = '8px',
   type = 'button',
+  actions = 'primary',
+  children,
 }: ButtonProps) => {
   const handleClickWrapper = () => {
     if (handleClick) {
@@ -31,8 +39,13 @@ const Button = ({
       onClick={handleClickWrapper}
       value=""
       type={type}
+      radius={radius}
+      actions={actions}
     >
-      {text}
+      <StyledChildrenContainer>
+        {children}
+        {text}
+      </StyledChildrenContainer>
     </StyledButton>
   );
 };

frontend/src/Commons/Button/ButtonSizeConstant.ts

@@ -0,0 +1,21 @@
+const getButtonSize = (size: string, isDesktop: boolean): string => {
+  let buttonSize;
+
+  switch (size) {
+    case 'sm':
+      buttonSize = '62px';
+      break;
+    case 'md':
+      buttonSize = '178px';
+      break;
+    case 'lg':
+      buttonSize = isDesktop ? '483px' : '327px';
+      break;
+    default:
+      buttonSize = '100%';
+      break;
+  }
+
+  return buttonSize;
+};
+export default getButtonSize;

frontend/src/Commons/CustomLink/CustomLink.style.ts

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 import * as tokens from '@bcgov/design-tokens/js';
 import screenSizes from '@Constants/ScreenSize';
+import getButtonSize from '@Commons/Button/ButtonSizeConstant';
 
 type StyledLinkProps = {
   size: string;
@@ -10,18 +11,21 @@ const StyledLinkContainer = styled.div<StyledLinkProps>`
   display: flex;
   align-items: center;
   justify-content: center;
-  height: ${(props) => (props.size === 'sm' ? '27px' : props.size === 'md' ? '25px' : '40px')};
-  width: ${(props) => (props.size === 'sm' ? '52px' : props.size === 'md' ? '200px' : '300px')};
+  height: 100%;
+  width: 100%;
+  max-height: 42px;
+  max-width: ${(props) => getButtonSize(props.size, false)};
   background-color: ${tokens.surfaceColorPrimaryButtonDefault};
   color: ${tokens.typographyColorPrimaryInvert};
   border-radius: 8px;
   border: ${`1px solid ${tokens.surfaceColorBorderMedium}`};
   font-family: ${tokens.typographyFontFamiliesBcSans};
   font-weight: ${tokens.typographyFontWeightsBold};
-
+  padding: 20px 30px;
   @media (min-width: ${screenSizes.desktop}) {
-    max-height: ${(props) => (props.size === 'sm' ? '27px' : props.size === 'md' ? '25px' : '40px')};
-    max-width: ${(props) => (props.size === 'sm' ? '52px' : props.size === 'md' ? '200px' : '300px')};
+    height: 100%;
+    max-width: ${(props) => getButtonSize(props.size, true)};
+    width: 100%;
   }
   a {
     display: flex;

frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsAndSoil.style.ts

@@ -1,11 +1,7 @@
 /**
- *
- * THIS IS A SKELETON!
- * THIS IS STILL TO BE IMPLEMENTED!
- *
  * @desc Styling with BC Design Tokens and Emotion for
- *       Farm Information Input Module
- * @author @GDamaso
+ *       Field and Soil Input Module
+ * @author @Kcaparas
  */
 import styled from '@emotion/styled';
 import screenSizes from '@Constants/ScreenSize';
@@ -44,28 +40,4 @@ const StyledTextAreaContainer = styled.div`
   }
 `;
 
-const StyledButtonGroupContainer = styled.div`
-  margin-top: -10px;
-  display: flex;
-  flex-direction: row;
-  gap: 20px;
-`;
-
-const StyledListContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  gap: 20px;
-`;
-const StyledListItem = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-`;
-
-export {
-  StyledFarmInfo,
-  StyledTextAreaContainer,
-  StyledButtonGroupContainer,
-  StyledListContainer,
-  StyledListItem,
-};
+export { StyledFarmInfo, StyledTextAreaContainer };