Feat/update checkbox

src/components/Button/Button.tsx

@@ -80,7 +80,7 @@ const StyledButton = styled.button<StyledButtonProps>`
     css`
       color: ${Color.Primary};
       background: ${p.bg};
-      border: 2px solid ${Color.BorderGrey};
+      border: 2px solid ${Color.Primary};
       svg,
       path {
         fill: ${Color.Primary};

src/components/Checkbox/Checkbox.stories.tsx

@@ -18,6 +18,18 @@ export const Default: React.FunctionComponent = () => {
           This is a custom checkbox default style
         </Checkbox>
       </Column>
+      <Column>
+        <Checkbox
+          errorText="hasError"
+          id="checkbox-with-error"
+          name="checkbox-with-error"
+          value="checkbox-with-error"
+          hasError
+          onChange={action("clicked")}
+        >
+          Checkbox with Error
+        </Checkbox>
+      </Column>
       <Column>
         <Checkbox id="checkbox-disabled" name="disabled" value="disabled" disabled onChange={action("clicked")}>
           disabled

src/components/Checkbox/Checkbox.tsx

@@ -1,23 +1,33 @@
 import React, { FC } from "react";
 import styled from "styled-components";
 import { TickIcon } from "../Icon/Icons";
-import { Color } from "../../theme/util";
 import { Column } from "../../theme/custom-styled-components";
+import { Color } from "../../theme/util";
 
 const LABEL_SIZE = 24;
 const CHECKMARK_CLASSNAME = "checkmark";
 
 const LabelStyled = styled.label`
   position: relative;
+  display: flex;
+  align-items: center;
+  padding-left: ${LABEL_SIZE + 16}px;
   font-family: monospace;
-  padding-left: ${LABEL_SIZE + 10}px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   cursor: pointer;
 `;
 
+const ErrorText = styled.h1`
+  margin-top: 8px;
+  font-family: sans-serif;
+  font-size: 14px;
+  font-weight: normal;
+  color: ${Color.ErrorRed};
+`;
+
 /* Hide the browser's default checkbox */
 const InputStyled = styled.input`
   position: absolute;
@@ -43,13 +53,13 @@ const InputStyled = styled.input`
 
 const CheckmarkStyled = styled.span`
   position: absolute;
-  z-index: 1;
-  top: 0;
   left: 0;
-  width: ${LABEL_SIZE}px;
-  height: ${LABEL_SIZE}px;
+  top: -4px;
   display: flex;
   align-items: center;
+  width: ${LABEL_SIZE}px;
+  height: ${LABEL_SIZE}px;
+  z-index: 1;
   background-color: ${Color.BackgroundMain};
   border: 2px solid ${Color.Primary};
   border-radius: 5px;
@@ -62,13 +72,16 @@ const CheckmarkStyled = styled.span`
 
 export interface CheckboxProps {
   className?: string;
-  children: string | React.ReactNode;
+  children: string | React.ReactNode | Element;
   checked?: boolean;
   disabled?: boolean;
   id: string;
   name: string;
   value: string;
-  onChange?: () => void;
+  hasError?: boolean;
+  required?: boolean;
+  errorText?: string;
+  onChange: (value: any) => void;
 }
 
 export const Checkbox: FC<CheckboxProps> = ({
@@ -79,17 +92,32 @@ export const Checkbox: FC<CheckboxProps> = ({
   checked,
   name,
   value,
+  hasError = false,
+  errorText = "Input not valid",
+  required,
   disabled = false,
 }: CheckboxProps) => {
   return (
     <Column className={className}>
-      <LabelStyled htmlFor={id} onChange={onChange}>
-        <InputStyled checked={checked} disabled={disabled} id={id} name={name} type="checkbox" value={value} />
+      <LabelStyled htmlFor={id}>
+        <InputStyled
+          aria-invalid={hasError}
+          aria-required={required}
+          checked={checked}
+          disabled={disabled}
+          id={id}
+          name={name}
+          required={required}
+          type="checkbox"
+          value={value}
+          onChange={onChange}
+        />
         <CheckmarkStyled className={CHECKMARK_CLASSNAME}>
           <TickIcon />
         </CheckmarkStyled>
         {children}
       </LabelStyled>
+      {hasError && <ErrorText>{errorText}</ErrorText>}
     </Column>
   );
 };

src/components/Input/Input.tsx

@@ -71,7 +71,7 @@ const StyledInput = styled.input<StyledInputProps>`
   height: ${(p) => `${p.size}px`};
   width: 100%;
   padding: 16px;
-  border: 2px solid ${Color.BorderGrey};
+  border: 2px solid ${Color.Primary};
   border-radius: 7px;
   background: ${Color.BackgroundMain};
   font-size: 17px;

src/components/Select/Select.tsx

@@ -82,7 +82,7 @@ export const SelectComponent: FC<SelectComponentProps> = ({
       },
     ) => {
       const { width, size, hasDisabledUI } = state.selectProps;
-      const borderStyle = hasDisabledUI ? `2px solid ${Color.BorderDisabled}` : `2px solid ${Color.BorderGrey}`;
+      const borderStyle = hasDisabledUI ? `2px solid ${Color.BorderDisabled}` : `2px solid ${Color.Primary}`;
       return {
         ...provided,
         display: "flex",

src/theme/theme.ts

@@ -48,8 +48,7 @@ export default create({
   borders: {
     // 1px sometimes weren't showing up on Chrome- 'thin' is a fix
     // https://muffinman.io/fix-for-chrome-not-rendering-borders/
-    thin: `thin solid ${Color.BorderGrey}`,
-    primary: `1px solid ${Color.Primary}`,
+    primary: `thin solid ${Color.Primary}`,
     transparent: "thin solid transparent",
   },
   breakpoints,

src/theme/util.ts

@@ -11,14 +11,14 @@ export const lightenColor = (color: ColorType, alpha: number): chroma.Color => c
  */
 enum BaseColor {
   Amethyst = "#B566CC",
-  Bianca = "#FCFAF3",
+  EcruWhite = "#F8F6EC",
   Coral = "#FF884D",
   Dandelion = "#FFDD61",
   DodgerBlue = "#4DA3FF",
   Emerald = "#56D680",
   GableGreen = "#19323C",
   Persimmon = "#FF5C57",
-  Turquoise = "#30C7BE",
+  RobinsEggBlue = "#00C7BE",
   Pewter = "#949F9F",
   White = "#FFFFFF",
   Black = "#000000",
@@ -38,19 +38,18 @@ export const Color = {
   SecondaryOrange: BaseColor.Coral,
   SecondaryPurple: BaseColor.Amethyst,
   SecondaryRed: BaseColor.Persimmon,
-  SecondaryTeal: BaseColor.Turquoise,
+  SecondaryTeal: BaseColor.RobinsEggBlue,
   SecondaryYellow: BaseColor.Dandelion,
 
   TextPrimary: BaseColor.GableGreen,
-  TextInverted: BaseColor.Bianca,
+  TextInverted: BaseColor.EcruWhite,
   TextDisabled: lightenColor(BaseColor.Black, 0.6).css(),
 
-  BackgroundMain: BaseColor.Bianca,
+  BackgroundMain: BaseColor.EcruWhite,
   BackgroundDisabled: lightenColor(BaseColor.Black, 0.1).css(),
 
   ErrorRed: BaseColor.Valencia,
   DisabledGrey: BaseColor.Pewter,
-  BorderGrey: lightenColor(BaseColor.GableGreen, 0.5).css(),
   BorderDisabled: lightenColor(BaseColor.Black, 0.1).css(),
 };