Makes form components more customizable for easier reuse

src/components/Form/Button.tsx

@@ -8,6 +8,8 @@ interface ButtonProps {
   size?: InputSize,
   bgColor?: string,
   fgColor?: string,
+  styles?: string,
+  title?: string,
 };
 
 const StyledButton = styled.button<ButtonProps>`
@@ -31,16 +33,19 @@ const StyledButton = styled.button<ButtonProps>`
   ${(props) => props.fgColor ?
     `color: ${props.fgColor};` : `color: ${colors.background};`
   }
+  ${props => props.styles}
 `;
 
 const Button = (props: ButtonProps): JSX.Element => {
-  const { children, size, bgColor, fgColor, onClick } = props;
+  const { children, size, bgColor, fgColor, onClick, styles, title } = props;
   return (
     <StyledButton
       onClick={onClick || (() => null) }
       size={size}
       bgColor={bgColor}
       fgColor={fgColor}
+      styles={styles}
+      title={title?.toString()}
       >
       {children}
     </StyledButton>

src/components/Form/Card.tsx

@@ -3,24 +3,30 @@ import styled from 'styled-components';
 import ErrorBoundary from 'components/misc/ErrorBoundary';
 import Heading from 'components/Form/Heading';
 import colors from 'styles/colors';
+import { ReactNode } from 'react';
 
-export const StyledCard = styled.section`
+export const StyledCard = styled.section<{ styles?: string}>`
   background: ${colors.backgroundLighter};
   box-shadow: 4px 4px 0px ${colors.bgShadowColor};
   border-radius: 8px;
   padding: 1rem;
+  position: relative;
+  ${props => props.styles}
 `;
 
 interface CardProps {
   children: React.ReactNode;
   heading?: string,
+  styles?: string;
+  actionButtons?: ReactNode | undefined;
 };
 
 export const Card = (props: CardProps): JSX.Element => {
-  const { children, heading } = props;
+  const { children, heading, styles, actionButtons } = props;
   return (
     <ErrorBoundary title={heading}>
-      <StyledCard>
+      <StyledCard styles={styles}>
+        { actionButtons && actionButtons }
         { heading && <Heading as="h3" align="left" color={colors.primary}>{heading}</Heading> }
         {children}
       </StyledCard>

src/components/Form/Row.tsx

@@ -10,6 +10,7 @@ export interface RowProps {
   children?: ReactNode,
   rowList?: RowProps[],
   title?: string,
+  open?: boolean,
 }
 
 export const StyledRow = styled.div`
@@ -79,12 +80,12 @@ const copyToClipboard = (text: string) => {
 }
 
 export const ExpandableRow = (props: RowProps) => {
-  const { lbl, val, title, rowList } = props;
+  const { lbl, val, title, rowList, open } = props;
   return (
-    <Details>
+    <Details open={open}>
       <StyledExpandableRow key={`${lbl}-${val}`}>
-        <span className="lbl" title={title}>{lbl}</span>
+        <span className="lbl" title={title?.toString()}>{lbl}</span>
-        <span className="val" title={val}>{val}</span>
+        <span className="val" title={val?.toString()}>{val}</span>
       </StyledExpandableRow>
       { rowList &&
         <SubRowList>