diff --git a/src/components/Form/Button.tsx b/src/components/Form/Button.tsx index 03348c8..c3c7da1 100644 --- a/src/components/Form/Button.tsx +++ b/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` @@ -31,16 +33,19 @@ const StyledButton = styled.button` ${(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 ( null) } size={size} bgColor={bgColor} fgColor={fgColor} + styles={styles} + title={title?.toString()} > {children} diff --git a/src/components/Form/Card.tsx b/src/components/Form/Card.tsx index e5f188a..43c24e1 100644 --- a/src/components/Form/Card.tsx +++ b/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 ( - + + { actionButtons && actionButtons } { heading && {heading} } {children} diff --git a/src/components/Form/Row.tsx b/src/components/Form/Row.tsx index 77e434b..f64f350 100644 --- a/src/components/Form/Row.tsx +++ b/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 ( -
+
- {lbl} - {val} + {lbl} + {val} { rowList &&