📝 Form elements

src/components/Form/Card.tsx

@@ -1,26 +1,32 @@
 import styled from 'styled-components';
 
+// import Heading from 'components/Form/Heading';
 import colors from 'styles/colors';
 
-export const StyledCard = styled.section`
+export const Card = styled.section`
   background: ${colors.backgroundLighter};
   box-shadow: 4px 4px 0px ${colors.bgShadowColor};
   border-radius: 8px;
   padding: 1rem;
   margin: 1rem;
-  max-width: 24rem;
 `;
 
-interface CardProps {
-  children: React.ReactNode;
-};
+// interface CardProps {
+//   children: React.ReactNode;
+//   heading?: string,
+// };
 
-const Card = (props: CardProps): JSX.Element => {
-  const { children } = props;
-  return (
-    <StyledCard>{children}</StyledCard>
-  );
-}
+// const Card = (props: CardProps): JSX.Element => {
+//   const { children, heading } = props;
+//   return (
+//     <StyledCard>
+//       { heading &&
+//         <Heading as="h3" size="small" align="left" color={colors.primary}>{heading}</Heading>
+//       }
+//       {children}
+//     </StyledCard>
+//   );
+// }
 
 export default Card;
 

src/components/Form/Heading.tsx

@@ -1,23 +1,25 @@
 import styled from 'styled-components';
 import colors from 'styles/colors';
+import { TextSizes } from 'styles/typography';
 
 interface HeadingProps {
   as?: 'h1' | 'h2' | 'h3' | 'h4' | 'p';
   align?: 'left' | 'center' | 'right';
   color?: string;
-  size?: 'small' | 'medium' | 'large';
+  size?: 'xSmall' | 'small' | 'medium' | 'large';
   inline?: boolean;
   children: React.ReactNode;
 };
 
 const StyledHeading = styled.h1<HeadingProps>`
-  margin: 0.5rem;
+  margin: 0.5rem 0;
   text-shadow: 2px 2px 0px ${colors.bgShadowColor};
   ${props => {
     switch (props.size) {
-      case 'small': return 'font-size: 1rem;';
-      case 'medium': return 'font-size: 2rem;';
-      case 'large': return 'font-size: 3rem;';
+      case 'xSmall': return `font-size: ${TextSizes.small};`;
+      case 'small': return `font-size: ${TextSizes.medium};`;
+      case 'medium': return `font-size: ${TextSizes.large};`;
+      case 'large': return `font-size: ${TextSizes.xLarge};`;
     }
   }};
   ${props => {
@@ -31,7 +33,6 @@ const StyledHeading = styled.h1<HeadingProps>`
   ${props => props.inline ? 'display: inline;' : '' }
 `;
 
-
 const Heading = (props: HeadingProps): JSX.Element => {
   const { children, as, size, align, color, inline } = props;
   return (

src/components/Form/Input.tsx

@@ -10,6 +10,7 @@ interface Props {
   value: string,
   label?: string,
   placeholder?: string,
+  disabled?: boolean,
   size?: InputSize,
   orientation?: Orientation;
   handleChange: (nweVal: React.ChangeEvent<HTMLInputElement>) => void,
@@ -47,7 +48,7 @@ const StyledLabel = styled.label<StyledInputTypes>`
 
 const Input = (inputProps: Props): JSX.Element => {
 
-  const { id, value, label, placeholder, size, orientation, handleChange } = inputProps;
+  const { id, value, label, placeholder, disabled, size, orientation, handleChange } = inputProps;
 
   return (
   <InputContainer orientation={orientation}>
@@ -56,6 +57,7 @@ const Input = (inputProps: Props): JSX.Element => {
       id={id}
       value={value}
       placeholder={placeholder}
+      disabled={disabled}
       onChange={handleChange}
       inputSize={size}
     />