Cleanup and refactors part 3

src/shared-components/accordion/style.ts

@@ -45,7 +45,7 @@ export const AccordionBox = styled.div<{
       ? `
     opacity: 0.4;
     background-color: ${COLORS.disabled};
-    border-color: ${COLORS.purple30};
+    border-color: ${COLORS.primaryTint3};
   `
       : ''};
 `;

src/shared-components/accordion/thumbnails/index.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 
 import {
@@ -57,8 +56,4 @@ const Thumbnails = ({ photoSrcs }: ThumbnailsProps) => {
   return <Container>{renderThumbnails()}</Container>;
 };
 
-Thumbnails.propTypes = {
-  photoSrcs: PropTypes.arrayOf(PropTypes.string).isRequired,
-};
-
 export default Thumbnails;

src/shared-components/accordion/thumbnails/style.ts

@@ -35,7 +35,7 @@ export const ThumbnailImage = styled.img`
 
 export const MultiplesContainer = styled.div`
   ${thumbnailBase}
-  background-color: ${COLORS.purple15};
+  background-color: ${COLORS.defaultBorder};
 `;
 
 export const MultiplesText = styled.div`

src/shared-components/button/components/roundButton/index.tsx

@@ -39,7 +39,7 @@ type RoundButtonProps = {
    * When loading, onClick function execution is disallowed
    */
   isLoading?: boolean;
-  loading?: boolean | undefined;
+  loading?: boolean;
   onClick?: () => void;
   /**
    * Color that will override existing text, icon, and loading colors (except when disabled is true)

src/shared-components/button/constants.ts

@@ -3,8 +3,8 @@ import { COLORS } from '../../constants';
 // TODO: potentially break out these pairings to the color constants file
 export const textColorsAssociatedWithColors = {
   [COLORS.primary]: {
-    tint1: COLORS.purple85,
-    tint2: COLORS.purple70,
+    tint1: COLORS.primaryTint1,
+    tint2: COLORS.primaryTint2,
   },
   [COLORS.secondary]: {
     tint1: COLORS.lavender80,

src/shared-components/button/index.tsx

@@ -46,7 +46,7 @@ type ButtonProps = {
    * When loading, onClick function execution is disallowed
    */
   isLoading?: boolean;
-  loading?: boolean | undefined;
+  loading?: boolean;
   onClick: () => void;
   /**
    * Color that will override existing text, icon, and loading colors for the button (except when disabled is true)

src/shared-components/button/shared-components/loader/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-import { COLORS, COLORS_PROP_TYPES } from '../../../../constants';
+import { COLORS } from '../../../../constants';
 import ButtonLoader from './style';
 import { ButtonTypeWithAction } from '../..';
 
@@ -41,20 +40,4 @@ const Loader = ({
   </ButtonLoader>
 );
 
-Loader.propTypes = {
-  buttonColor: COLORS_PROP_TYPES,
-  buttonType: PropTypes.oneOf([
-    'primary',
-    'secondary',
-    'tertiary',
-    'quaternary',
-    'action',
-  ]),
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  isFullWidth: PropTypes.bool,
-  isLoading: PropTypes.bool,
-  textColor: PropTypes.string,
-};
-
 export default Loader;

src/shared-components/button/test.tsx

@@ -24,15 +24,15 @@ describe('<Button />', () => {
     it('renders with adjustable color', () => {
       const button = mount(
         <Button
-          buttonColor={COLORS.statusRed}
+          buttonColor={COLORS.error}
           onClick={() => undefined}
           id="red-button"
         >
           Button Text
         </Button>,
       );
 
-      expect(button.prop('buttonColor')).toEqual(COLORS.statusRed);
+      expect(button.prop('buttonColor')).toEqual(COLORS.error);
     });
   });
 

src/shared-components/callout/index.tsx

@@ -39,10 +39,10 @@ export const Callout = ({
   </CalloutContainer>
 );
 
+Callout.Container = ParentContainer;
+
 Callout.propTypes = {
   children: PropTypes.node.isRequired,
   color: PropTypes.string,
   icon: PropTypes.node,
 };
-
-Callout.Container = ParentContainer;

src/shared-components/carousel/arrow/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { RoundButton } from '../../button';
 import ArrowLeftIcon from '../../../svgs/icons/arrow-left-icon.svg';
@@ -47,12 +46,4 @@ const Arrow = ({
   );
 };
 
-Arrow.propTypes = {
-  bottomRightAlignedArrows: PropTypes.bool,
-  disabled: PropTypes.bool,
-  next: PropTypes.bool,
-  onClick: PropTypes.func,
-  prev: PropTypes.bool,
-};
-
 export default Arrow;

src/shared-components/carousel/style.ts

@@ -14,7 +14,7 @@ export const Card = styled.div`
 const primaryStyles = css`
   .slick-dots {
     li {
-      background-color: ${COLORS.purple};
+      background-color: ${COLORS.primary};
     }
   }
 `;

src/shared-components/chip/style.ts

@@ -14,7 +14,7 @@ export const ChipText = styled.span`
 `;
 
 const defaultStyle = css`
-  background-color: ${COLORS.purple10};
+  background-color: ${COLORS.disabled};
   ${ChipText} {
     color: ${COLORS.primary};
   }

src/shared-components/container/style.ts

@@ -74,7 +74,7 @@ export const Image = styled.img`
 type StyledContainer = StyledComponent<
   DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
   {
-    type?: 'clickable' | 'message' | undefined;
+    type?: 'clickable' | 'message';
   },
   any
 >;

src/shared-components/dropdown/desktopDropdown.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { css } from '@emotion/core';
 import useResetFocus from 'src/utils/accessibility/useResetFocus';
 
@@ -19,9 +18,11 @@ import { OptionType } from './index';
 type DesktopDropdownProps = {
   borderRadius: string;
   closeDropdown: () => void;
-  currentOption: OptionType;
+  currentOption?: OptionType;
   isOpen: boolean;
-  onOptionClick: (event: any) => void;
+  onOptionClick: (
+    event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>,
+  ) => void;
   onSelectClick: () => void;
   options: OptionType[];
   optionsContainerMaxHeight: string;
@@ -50,7 +51,7 @@ export const DesktopDropdown = ({
     }
   };
 
-  const handleOptionKeydown = (event: React.KeyboardEvent) => {
+  const handleOptionKeydown = (event: React.KeyboardEvent<HTMLLIElement>) => {
     // This allows users to select an option via the enter key
     if (event.key === 'Enter') {
       onOptionClick(event);
@@ -126,37 +127,3 @@ export const DesktopDropdown = ({
     </OffClickWrapper>
   );
 };
-
-DesktopDropdown.defaultProps = {
-  value: undefined,
-  options: [{ value: null, label: '' }],
-  currentOption: { value: null, label: '' },
-  textAlign: 'left',
-  isOpen: false,
-};
-
-DesktopDropdown.propTypes = {
-  borderRadius: PropTypes.string.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  value: PropTypes.any,
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      // eslint-disable-next-line react/forbid-prop-types
-      value: PropTypes.any,
-      label: PropTypes.string,
-      disabled: PropTypes.bool,
-    }),
-  ),
-  textAlign: PropTypes.oneOf(['left', 'center']),
-  currentOption: PropTypes.shape({
-    // eslint-disable-next-line react/forbid-prop-types
-    value: PropTypes.any,
-    label: PropTypes.string,
-    disabled: PropTypes.bool,
-  }),
-  closeDropdown: PropTypes.func.isRequired,
-  onOptionClick: PropTypes.func.isRequired,
-  onSelectClick: PropTypes.func.isRequired,
-  isOpen: PropTypes.bool,
-  optionsContainerMaxHeight: PropTypes.string.isRequired,
-};

src/shared-components/dropdown/index.tsx

@@ -6,15 +6,15 @@ import { DesktopDropdown } from './desktopDropdown';
 import allowNullPropType from '../../utils/allowNullPropType';
 
 export type OptionType = {
-  /**
-   * The option indentifier
-   */
-  value: string | undefined;
+  disabled?: boolean;
   /**
    * The text to be displayed for the option
    */
   label: string;
-  disabled?: boolean;
+  /**
+   * The option indentifier
+   */
+  value?: string;
 };
 
 type DropdownProps = {
@@ -30,7 +30,7 @@ type DropdownProps = {
   optionsContainerMaxHeight?: string;
   textAlign?: 'left' | 'center';
   /**
-   * The currently selected option. Can mount as `null`
+   * The currently selected option. Can mount as `undefined`
    */
   value?: string;
 };
@@ -42,7 +42,7 @@ type DropdownProps = {
 export const Dropdown = ({
   borderRadius = '4px',
   onChange,
-  options,
+  options = [{ value: undefined, label: '' }],
   optionsContainerMaxHeight = '250px',
   textAlign = 'left',
   value,
@@ -68,7 +68,9 @@ export const Dropdown = ({
     closeDropdown();
   };
 
-  const onOptionClick = (event: React.MouseEvent<HTMLLIElement>) => {
+  const onOptionClick = (
+    event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>,
+  ) => {
     const target = event.currentTarget;
     if (target.hasAttribute('disabled')) {
       return;
@@ -84,10 +86,10 @@ export const Dropdown = ({
     return (
       <MobileDropdown
         borderRadius={borderRadius}
-        value={value}
+        onSelectChange={onSelectChange}
         options={options}
         textAlign={textAlign}
-        onSelectChange={onSelectChange}
+        value={value}
       />
     );
   }
@@ -112,17 +114,17 @@ export const Dropdown = ({
 
 Dropdown.propTypes = {
   borderRadius: PropTypes.string,
-  value: allowNullPropType(
-    PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  ),
+  onChange: PropTypes.func.isRequired,
   options: PropTypes.arrayOf(
     PropTypes.shape({
       value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
       label: PropTypes.string,
       disabled: PropTypes.bool,
     }),
   ).isRequired,
-  textAlign: PropTypes.oneOf(['left', 'center']),
-  onChange: PropTypes.func.isRequired,
   optionsContainerMaxHeight: PropTypes.string,
+  textAlign: PropTypes.oneOf(['left', 'center']),
+  value: allowNullPropType(
+    PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  ),
 };

src/shared-components/dropdown/mobileDropdown.tsx

@@ -1,17 +1,16 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import ChevronIcon from '../../svgs/icons/chevron-icon.svg';
 import { DropdownContainer, dropdownInputStyle, IconContainer } from './style';
 
-import { OptionType } from './index';
+import { OptionType } from '.';
 
 type MobileDropdownProps = {
   borderRadius: string;
   onSelectChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
   options: OptionType[];
-  textAlign?: 'left' | 'center';
-  value?: string | number | undefined;
+  textAlign: 'left' | 'center';
+  value?: string | number;
 };
 
 /**
@@ -22,8 +21,8 @@ type MobileDropdownProps = {
 export const MobileDropdown = ({
   borderRadius,
   onSelectChange,
-  options = [{ value: undefined, label: '' }],
-  textAlign = 'left',
+  options,
+  textAlign,
   value,
 }: MobileDropdownProps) => (
   <DropdownContainer textAlign={textAlign}>
@@ -57,17 +56,3 @@ export const MobileDropdown = ({
     </IconContainer>
   </DropdownContainer>
 );
-
-MobileDropdown.propTypes = {
-  borderRadius: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-      label: PropTypes.string,
-      disabled: PropTypes.bool,
-    }),
-  ),
-  textAlign: PropTypes.oneOf(['left', 'center']),
-  onSelectChange: PropTypes.func,
-};

src/shared-components/dropdown/style.ts

@@ -53,7 +53,7 @@ export const dropdownInputStyle = ({
     border: 1px solid ${COLORS.border};
     ${dropdownBorderRadius};
 
-    color: ${COLORS.purple85};
+    color: ${COLORS.primaryTint1};
     line-height: ${SPACER.x4large};
     overflow: hidden;
     text-overflow: ellipsis;
@@ -158,7 +158,7 @@ export const DropdownOption = styled.li<{
   selected: boolean;
   disabled: boolean;
 }>`
-  color: ${COLORS.purple85};
+  color: ${COLORS.primaryTint1};
   min-height: ${SPACER.x4large};
 
   background-color: ${COLORS.white};