Resolves #29 match colors, spacing, typography to design system (#48)

* match colors, spacing, typography to design system * boo * fix tests
hack4impact-uiuc · May 14, 2020 · ec6ff99 · ec6ff99 · vercel · May 14, 2020
1 parent 981ea51
commit ec6ff99
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 113 deletions.
diff --git a/src/__tests__/Link.js b/src/__tests__/Link.js
@@ -92,8 +92,8 @@ describe('Link', () => {
     expect(renderJSON(<Link as="button">APPLY</Link>)).toMatchSnapshot();
 
     const { container } = render(<Link as="button" />);
-    expect(container.firstChild).toHaveStyle(`font-family: ${theme.buttons.font}`);
-    expect(container.firstChild).toHaveStyle(`font-size: ${theme.buttons.fontSize}`);
-    expect(container.firstChild).toHaveStyle(`letter-spacing: ${theme.buttons.letterSpacing}`);
+    expect(container.firstChild).toHaveStyle(`font-family: ${theme.typography.button.fontFamily}`);
+    expect(container.firstChild).toHaveStyle(`font-size: ${theme.typography.button.fontSize}`);
+    expect(container.firstChild).toHaveStyle(`letter-spacing: ${theme.typography.button.letterSpacing}`);
   });
 });
diff --git a/src/__tests__/Text.js b/src/__tests__/Text.js
@@ -91,10 +91,6 @@ describe('Text types', () => {
     expect(container.firstChild).toHaveStyle(`line-height: ${theme.typography.body.lineHeight}`);
   });
 
-  it('renders "hero" properly', () => {
-    expect(renderJSON(<Text type="hero">Hello</Text>)).toMatchSnapshot();
-  });
-
   it('renders "overline" properly', () => {
     expect(renderJSON(<Text type="overline">Hello</Text>)).toMatchSnapshot();
   });

diff --git a/src/__tests__/__snapshots__/Card.js.snap b/src/__tests__/__snapshots__/Card.js.snap
@@ -21,21 +21,22 @@ exports[`Card renders a <div> 1`] = `
 
 exports[`Card renders entire card properly 1`] = `
 .c8 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  overflow: hidden;
+  border-radius: 13px;
   font-family: Chivo;
-  font-weight: 700;
-  font-size: 14px;
+  font-weight: 700px;
   -webkit-letter-spacing: 2px;
   -moz-letter-spacing: 2px;
   -ms-letter-spacing: 2px;
   letter-spacing: 2px;
+  font-size: 14px;
   line-height: 20px;
-  text-transform: uppercase;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  overflow: hidden;
-  border-radius: 13px;
-  padding: 0px 32px;
-  height: 40px;
+  padding: 12px 16px;
+  display: inline-block;
+  text-align: center;
+  vertical-align: middle;
   background: #155DA1;
   border: none;
   color: #FFFFFF;
@@ -93,10 +94,10 @@ exports[`Card renders entire card properly 1`] = `
   font-family: HKGrotesk;
   font-weight: 400px;
   font-size: 20px;
-  -webkit-letter-spacing: 0.5px;
-  -moz-letter-spacing: 0.5px;
-  -ms-letter-spacing: 0.5px;
-  letter-spacing: 0.5px;
+  -webkit-letter-spacing: 1px;
+  -moz-letter-spacing: 1px;
+  -ms-letter-spacing: 1px;
+  letter-spacing: 1px;
   line-height: 28px;
   color: #0A162A;
   margin-top: 8px;
@@ -168,6 +169,7 @@ exports[`Card renders entire card properly 1`] = `
     >
       <button
         className="c8"
+        type="medium"
       >
         Apply
       </button>

diff --git a/src/__tests__/__snapshots__/Tag.js.snap b/src/__tests__/__snapshots__/Tag.js.snap
@@ -24,7 +24,6 @@ exports[`Tag Colors renders blue dark 1`] = `
   padding: 0px 8px;
   height: 28px;
   background: #0E4E8A;
-  background-color: #0E4E8A;
 }
 
 <div
@@ -58,7 +57,6 @@ exports[`Tag Colors renders blue light 1`] = `
   padding: 0px 8px;
   height: 28px;
   background: #3E87CD;
-  background-color: #3E87CD;
 }
 
 <div
@@ -92,7 +90,6 @@ exports[`Tag Colors renders blue primary 1`] = `
   padding: 0px 8px;
   height: 28px;
   background: #155DA1;
-  background-color: #155DA1;
 }
 
 <div
@@ -126,7 +123,6 @@ exports[`Tag Colors renders green dark 1`] = `
   padding: 0px 8px;
   height: 28px;
   background: #256830;
-  background-color: #256830;
 }
 
 <div
@@ -160,7 +156,6 @@ exports[`Tag Colors renders green light 1`] = `
   padding: 0px 8px;
   height: 28px;
   background: #90E19E;
-  background-color: #90E19E;
 }
 
 <div
@@ -194,7 +189,6 @@ exports[`Tag Colors renders green primary 1`] = `
   padding: 0px 8px;
   height: 28px;
   background: #4C9859;
-  background-color: #4C9859;
 }
 
 <div
@@ -227,8 +221,7 @@ exports[`Tag Colors renders grey dark 1`] = `
   align-items: center;
   padding: 0px 8px;
   height: 28px;
-  background: #155DA1;
-  background-color: #155DA1;
+  background: #46494F;
 }
 
 <div
@@ -261,8 +254,7 @@ exports[`Tag Colors renders grey light 1`] = `
   align-items: center;
   padding: 0px 8px;
   height: 28px;
-  background: #EBEEF2;
-  background-color: #EBEEF2;
+  background: #8B9199;
 }
 
 <div
@@ -296,7 +288,6 @@ exports[`Tag Colors renders grey primary 1`] = `
   padding: 0px 8px;
   height: 28px;
   background: #666B72;
-  background-color: #666B72;
 }
 
 <div
@@ -330,7 +321,6 @@ exports[`Tag Colors renders indigo dark 1`] = `
   padding: 0px 8px;
   height: 28px;
   background: #253E68;
-  background-color: #253E68;
 }
 
 <div
@@ -364,7 +354,6 @@ exports[`Tag Colors renders indigo light 1`] = `
   padding: 0px 8px;
   height: 28px;
   background: #415F94;
-  background-color: #415F94;
 }
 
 <div
@@ -398,7 +387,6 @@ exports[`Tag Colors renders indigo primary 1`] = `
   padding: 0px 8px;
   height: 28px;
   background: #2D4979;
-  background-color: #2D4979;
 }
 
 <div
@@ -432,7 +420,6 @@ exports[`Tag Colors renders red dark 1`] = `
   padding: 0px 8px;
   height: 28px;
   background: #8A1A1F;
-  background-color: #8A1A1F;
 }
 
 <div
@@ -466,7 +453,6 @@ exports[`Tag Colors renders red light 1`] = `
   padding: 0px 8px;
   height: 28px;
   background: #D1595F;
-  background-color: #D1595F;
 }
 
 <div
@@ -500,7 +486,6 @@ exports[`Tag Colors renders red primary 1`] = `
   padding: 0px 8px;
   height: 28px;
   background: #A62B31;
-  background-color: #A62B31;
 }
 
 <div
@@ -534,7 +519,6 @@ exports[`Tag Colors renders yellow dark 1`] = `
   padding: 0px 8px;
   height: 28px;
   background: #DA9C03;
-  background-color: #DA9C03;
 }
 
 <div
@@ -568,7 +552,6 @@ exports[`Tag Colors renders yellow light 1`] = `
   padding: 0px 8px;
   height: 28px;
   background: #FFD15F;
-  background-color: #FFD15F;
 }
 
 <div
@@ -602,7 +585,6 @@ exports[`Tag Colors renders yellow primary 1`] = `
   padding: 0px 8px;
   height: 28px;
   background: #FDBE21;
-  background-color: #FDBE21;
 }
 
 <div

diff --git a/src/__tests__/__snapshots__/Text.js.snap b/src/__tests__/__snapshots__/Text.js.snap
@@ -119,27 +119,6 @@ exports[`Text types renders "form" properly 1`] = `
 </span>
 `;
 
-exports[`Text types renders "hero" properly 1`] = `
-.c0 {
-  color: #0A162A;
-  font-family: HKGrotesk;
-  font-weight: 400px;
-  font-size: 22px;
-  -webkit-letter-spacing: 0.5px;
-  -moz-letter-spacing: 0.5px;
-  -ms-letter-spacing: 0.5px;
-  letter-spacing: 0.5px;
-  line-height: 32px;
-}
-
-<span
-  className="c0"
-  type="hero"
->
-  Hello
-</span>
-`;
-
 exports[`Text types renders "overline" properly 1`] = `
 .c0 {
   color: #0A162A;
@@ -167,12 +146,12 @@ exports[`Text types renders "quote" properly 1`] = `
   color: #0A162A;
   font-family: HKGrotesk;
   font-weight: 300px;
-  font-size: 28px;
+  font-size: 22px;
   -webkit-letter-spacing: 0.5px;
   -moz-letter-spacing: 0.5px;
   -ms-letter-spacing: 0.5px;
   letter-spacing: 0.5px;
-  line-height: 40px;
+  line-height: 33px;
 }
 
 <span
@@ -189,10 +168,10 @@ exports[`Text types renders "subtitle" properly 1`] = `
   font-family: HKGrotesk;
   font-weight: 400px;
   font-size: 20px;
-  -webkit-letter-spacing: 0.5px;
-  -moz-letter-spacing: 0.5px;
-  -ms-letter-spacing: 0.5px;
-  letter-spacing: 0.5px;
+  -webkit-letter-spacing: 1px;
+  -moz-letter-spacing: 1px;
+  -ms-letter-spacing: 1px;
+  letter-spacing: 1px;
   line-height: 28px;
 }
 

diff --git a/src/components/Tag/Tag.js b/src/components/Tag/Tag.js
@@ -25,7 +25,7 @@ const TagBase = styled.div`
     height: 28px;
 
     // color
-    background: ${(props) => props.backgroundColor};
+    background: ${(props) => props.background};
 
     ${COMMON};
     ${COLOR};
@@ -45,7 +45,7 @@ const Tag = ({
 
   return (
     <TagBase
-      backgroundColor={backgroundColor}
+      background={backgroundColor}
       textColor={textColor}
       theme={propTheme}
       {...props}

diff --git a/src/components/Text/Text.js b/src/components/Text/Text.js
@@ -31,7 +31,6 @@ Text.propTypes = {
   theme: PropTypes.object,
   type: PropTypes.oneOf([
     'body',
-    'hero',
     'caption',
     'overline',
     'button',