feat: Brand color hover on links images & testUpdate (nodejs#221)

Ahmad Awais ⚡️ · web-flow · commit b7101860df97 · 2019-04-04T14:52:20.000+05:00
* style: Brand color hover on links

* refactor: Consistent anchor link styles

* revert: Formatting

* fix: No margin left on first author

* refactor: Index is more descriptive

* style: Hover scale

* refactor: Tests should update snapshots

* fix: Tests with Updated Jest Snapshots

* refactor: Jest snapshots
diff --git a/package.json b/package.json
@@ -46,8 +46,9 @@
     "format": "prettier --write '**/*.{ts,tsx,js}'",
     "format-check": "prettier --check '**/*.{ts,tsx,js}'",
     "jest": "jest",
-    "snapshot": "jest --updateSnapshot",
+    "jestUpdate": "jest --updateSnapshot",
     "test": "yarn format-check && yarn tslint && yarn jest",
+    "testUpdate": "yarn format-check && yarn tslint && yarn jestUpdate",
     "tslint": "tslint --project ./tsconfig.json",
     "serve": "yarn run build && clear && gatsby serve"
   },
diff --git a/src/components/author.tsx b/src/components/author.tsx
@@ -7,6 +7,10 @@ const list = css`
 
 const link = css`
   margin-left: 0.5rem;
+
+  &:hover img {
+    transform: scale(1.1);
+  }
 `;
 
 const img = css`
@@ -15,22 +19,28 @@ const img = css`
   margin-top: 5px;
   border-radius: 100%;
   border: 1px solid var(--brand-light);
+  transition: all 0.2s ease-in-out;
 `;
 
 type Props = {
+  index: Number;
   username: string;
   size: string;
 };
 
-const Author = ({ username, size = '64' }: Props) => {
+const Author = ({ index, username, size = '64' }: Props) => {
   if (!username) {
     return null;
   }
 
+  // Clean up username and build links.
   username = username.trim();
   const githubLink = `https://github.com/${username}`;
   const githubImgLink = `https://github.com/${username}.png?size=${size}`;
 
+  // If it's the first author then no margin left.
+  const mleft = index === 0 ? { marginLeft: 0 } : {};
+
   return (
     <li css={list}>
       <a
@@ -40,6 +50,7 @@ const Author = ({ username, size = '64' }: Props) => {
         key={username}
         target="_blank"
         rel="noopener noreferrer"
+        style={mleft}
       >
         <img
           css={img}
diff --git a/src/components/authors-list.tsx b/src/components/authors-list.tsx
@@ -11,6 +11,10 @@ const list = css`
   text-transform: uppercase;
   padding-left: 0;
 
+  li:first-child a {
+    margin-left: 0 !important;
+  }
+
   h5 {
     display: flex;
     flex-wrap: wrap;
@@ -34,7 +38,10 @@ const AuthorsList = ({ authors }: Props) => {
     <ul css={list}>
       <h5>Contributors</h5>
       {authors.map(
-        author => author && <Author username={author} key={author} size="60" />
+        (author, i) =>
+          author && (
+            <Author index={i} username={author} key={author} size="60" />
+          )
       )}
     </ul>
   );
diff --git a/src/components/layout.css b/src/components/layout.css
@@ -418,6 +418,13 @@ main {
   color: var(--gray9);
   font-weight: 600;
   text-decoration: underline;
+  text-decoration-color: var(--gray4);
+  transition: all ease-out 0.2s;
+}
+
+.article-reader a:hover {
+  color: var(--brand-light);
+  text-decoration: none;
 }
 
 .article-reader h1,
@@ -549,8 +556,14 @@ details,
 }
 .toc a {
   font-family: var(--sans-serif);
+  text-decoration: underline;
+  text-decoration-color: var(--gray4);
+  transition: all ease-out 0.2s;
+}
+
+.toc a:hover {
+  color: var(--brand-light);
   text-decoration: none;
-  border-bottom: 1px dotted var(--gray3);
 }
 
 .toc li p {
@@ -583,4 +596,4 @@ details,
 .sticky-sentinel--bottom {
   height: 40px;
   bottom: 0;
-}
+}
diff --git a/test/components/__snapshots__/author.test.tsx.snap b/test/components/__snapshots__/author.test.tsx.snap
@@ -17,15 +17,20 @@ exports[`Author component renders correctly 1`] = `
     css={
       Object {
         "map": undefined,
-        "name": "tubh1u",
+        "name": "1uax1e8",
         "next": undefined,
         "styles": "
   margin-left: 0.5rem;
+
+  &:hover img {
+    transform: scale(1.1);
+  }
 ",
       }
     }
     href="https://github.com/test-author"
     rel="noopener noreferrer"
+    style={Object {}}
     target="_blank"
     title="test-author"
   >
@@ -35,14 +40,15 @@ exports[`Author component renders correctly 1`] = `
       css={
         Object {
           "map": undefined,
-          "name": "nm77gf",
+          "name": "bq2cf",
           "next": undefined,
           "styles": "
   height: 30px;
   width: 30px;
   margin-top: 5px;
   border-radius: 100%;
   border: 1px solid var(--brand-light);
+  transition: all 0.2s ease-in-out;
 ",
         }
       }
diff --git a/test/components/__snapshots__/authors-list.test.tsx.snap b/test/components/__snapshots__/authors-list.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`AuthorsList component renders correctly 1`] = `
   css={
     Object {
       "map": undefined,
-      "name": "irphdi",
+      "name": "1bgkbt8",
       "next": undefined,
       "styles": "
   display: flex;
@@ -16,6 +16,10 @@ exports[`AuthorsList component renders correctly 1`] = `
   text-transform: uppercase;
   padding-left: 0;
 
+  li:first-child a {
+    margin-left: 0 !important;
+  }
+
   h5 {
     display: flex;
     flex-wrap: wrap;
@@ -47,15 +51,24 @@ exports[`AuthorsList component renders correctly 1`] = `
       css={
         Object {
           "map": undefined,
-          "name": "tubh1u",
+          "name": "1uax1e8",
           "next": undefined,
           "styles": "
   margin-left: 0.5rem;
+
+  &:hover img {
+    transform: scale(1.1);
+  }
 ",
         }
       }
       href="https://github.com/test-author"
       rel="noopener noreferrer"
+      style={
+        Object {
+          "marginLeft": 0,
+        }
+      }
       target="_blank"
       title="test-author"
     >
@@ -65,14 +78,15 @@ exports[`AuthorsList component renders correctly 1`] = `
         css={
           Object {
             "map": undefined,
-            "name": "nm77gf",
+            "name": "bq2cf",
             "next": undefined,
             "styles": "
   height: 30px;
   width: 30px;
   margin-top: 5px;
   border-radius: 100%;
   border: 1px solid var(--brand-light);
+  transition: all 0.2s ease-in-out;
 ",
           }
         }
@@ -96,15 +110,20 @@ exports[`AuthorsList component renders correctly 1`] = `
       css={
         Object {
           "map": undefined,
-          "name": "tubh1u",
+          "name": "1uax1e8",
           "next": undefined,
           "styles": "
   margin-left: 0.5rem;
+
+  &:hover img {
+    transform: scale(1.1);
+  }
 ",
         }
       }
       href="https://github.com/another-test-author"
       rel="noopener noreferrer"
+      style={Object {}}
       target="_blank"
       title="another-test-author"
     >
@@ -114,14 +133,15 @@ exports[`AuthorsList component renders correctly 1`] = `
         css={
           Object {
             "map": undefined,
-            "name": "nm77gf",
+            "name": "bq2cf",
             "next": undefined,
             "styles": "
   height: 30px;
   width: 30px;
   margin-top: 5px;
   border-radius: 100%;
   border: 1px solid var(--brand-light);
+  transition: all 0.2s ease-in-out;
 ",
           }
         }
