From 07620e5d4b1ed54bae2266d936af5306bfbe2d8b Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscilawebdev@gmail.com>
Date: Sun, 5 Apr 2020 20:25:38 +0200
Subject: [PATCH] feat(flag): Added Germany flag (#454)

---
 src/App/__snapshots__/App.test.tsx.snap       | 116 ++++++++++--------
 src/components/Footer/Footer.tsx              |   1 +
 .../Footer/__snapshots__/Footer.test.tsx.snap |  54 ++++----
 src/components/Icon/Icon.tsx                  |   3 +
 src/components/Icon/img/germany.svg           |   1 +
 5 files changed, 105 insertions(+), 70 deletions(-)
 create mode 100644 src/components/Icon/img/germany.svg

diff --git a/src/App/__snapshots__/App.test.tsx.snap b/src/App/__snapshots__/App.test.tsx.snap
index cc240d3..d77e7be 100644
--- a/src/App/__snapshots__/App.test.tsx.snap
+++ b/src/App/__snapshots__/App.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<App /> should display the Header component  1`] = `
-.emotion-78 {
+.emotion-81 {
   background-color: #fff;
 }
 
@@ -153,7 +153,7 @@ exports[`<App /> should display the Header component  1`] = `
   }
 }
 
-.emotion-76 {
+.emotion-79 {
   background: #f9f9f9;
   border-top: 1px solid #e3e3e3;
   color: #999999;
@@ -161,7 +161,7 @@ exports[`<App /> should display the Header component  1`] = `
   padding: 20px;
 }
 
-.emotion-74 {
+.emotion-77 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -178,7 +178,7 @@ exports[`<App /> should display the Header component  1`] = `
 }
 
 @media (min-width:768px) {
-  .emotion-74 {
+  .emotion-77 {
     min-width: 400px;
     max-width: 800px;
     margin: auto;
@@ -190,12 +190,12 @@ exports[`<App /> should display the Header component  1`] = `
 }
 
 @media (min-width:1024px) {
-  .emotion-74 {
+  .emotion-77 {
     max-width: 1240px;
   }
 }
 
-.emotion-65 {
+.emotion-68 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -204,7 +204,7 @@ exports[`<App /> should display the Header component  1`] = `
 }
 
 @media (min-width:768px) {
-  .emotion-65 {
+  .emotion-68 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -217,12 +217,12 @@ exports[`<App /> should display the Header component  1`] = `
   padding: 0 5px;
 }
 
-.emotion-63 {
+.emotion-66 {
   position: relative;
   height: 18px;
 }
 
-.emotion-63:hover .emotion-62 {
+.emotion-66:hover .emotion-65 {
   visibility: visible;
 }
 
@@ -235,7 +235,7 @@ exports[`<App /> should display the Header component  1`] = `
   padding: 0 10px;
 }
 
-.emotion-61 {
+.emotion-64 {
   position: absolute;
   background: #d3dddd;
   padding: 1px 4px;
@@ -253,7 +253,7 @@ exports[`<App /> should display the Header component  1`] = `
   top: -2px;
 }
 
-.emotion-61:before {
+.emotion-64:before {
   content: '';
   position: absolute;
   top: 29%;
@@ -275,7 +275,7 @@ exports[`<App /> should display the Header component  1`] = `
   padding: 0 5px;
 }
 
-.emotion-72 {
+.emotion-75 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -288,7 +288,7 @@ exports[`<App /> should display the Header component  1`] = `
 }
 
 @media (min-width:768px) {
-  .emotion-72 {
+  .emotion-75 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -296,7 +296,7 @@ exports[`<App /> should display the Header component  1`] = `
   }
 }
 
-.emotion-70 {
+.emotion-73 {
   box-sizing: initial;
   display: inline-block;
   cursor: pointer;
@@ -305,7 +305,7 @@ exports[`<App /> should display the Header component  1`] = `
   padding: 0 5px;
 }
 
-.emotion-67 {
+.emotion-70 {
   width: 100%;
   height: auto;
 }
@@ -358,7 +358,7 @@ exports[`<App /> should display the Header component  1`] = `
 }
 
 <div
-  class="MuiBox-root MuiBox-root-219 emotion-78 emotion-79"
+  class="MuiBox-root MuiBox-root-219 emotion-81 emotion-82"
 >
   <header
     class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic emotion-24 emotion-25 MuiAppBar-colorPrimary"
@@ -610,13 +610,13 @@ exports[`<App /> should display the Header component  1`] = `
     </div>
   </div>
   <div
-    class="emotion-76 emotion-77"
+    class="emotion-79 emotion-80"
   >
     <div
-      class="emotion-74 emotion-75"
+      class="emotion-77 emotion-78"
     >
       <div
-        class="emotion-65 emotion-66"
+        class="emotion-68 emotion-69"
       >
         Made with 
         <span
@@ -626,7 +626,7 @@ exports[`<App /> should display the Header component  1`] = `
         </span>
          on
         <span
-          class="emotion-63 emotion-64"
+          class="emotion-66 emotion-67"
         >
           <svg
             class="emotion-40 emotion-41 emotion-42"
@@ -639,7 +639,7 @@ exports[`<App /> should display the Header component  1`] = `
             />
           </svg>
           <span
-            class="emotion-61 emotion-62"
+            class="emotion-64 emotion-65"
           >
             <svg
               class="emotion-43 emotion-44 emotion-42"
@@ -701,20 +701,30 @@ exports[`<App /> should display the Header component  1`] = `
                 xlink:href="[object Object]#austria"
               />
             </svg>
+            <svg
+              class="emotion-43 emotion-44 emotion-42"
+            >
+              <title>
+                Germany
+              </title>
+              <use
+                xlink:href="[object Object]#germany"
+              />
+            </svg>
           </span>
         </span>
       </div>
       <div
-        class="emotion-72 emotion-73"
+        class="emotion-75 emotion-76"
       >
         Powered by
         <span
-          class="emotion-43 emotion-70 emotion-71"
+          class="emotion-43 emotion-73 emotion-74"
           title="Verdaccio"
         >
           <img
             alt="Verdaccio"
-            class="emotion-67 emotion-68"
+            class="emotion-70 emotion-71"
             src="[object Object]"
           />
         </span>
@@ -726,7 +736,7 @@ exports[`<App /> should display the Header component  1`] = `
 `;
 
 exports[`<App /> should display the Loading component at the beginning  1`] = `
-.emotion-68 {
+.emotion-71 {
   background-color: #fff;
 }
 
@@ -878,7 +888,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
   }
 }
 
-.emotion-66 {
+.emotion-69 {
   background: #f9f9f9;
   border-top: 1px solid #e3e3e3;
   color: #999999;
@@ -886,7 +896,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
   padding: 20px;
 }
 
-.emotion-64 {
+.emotion-67 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -903,7 +913,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
 }
 
 @media (min-width:768px) {
-  .emotion-64 {
+  .emotion-67 {
     min-width: 400px;
     max-width: 800px;
     margin: auto;
@@ -915,12 +925,12 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
 }
 
 @media (min-width:1024px) {
-  .emotion-64 {
+  .emotion-67 {
     max-width: 1240px;
   }
 }
 
-.emotion-55 {
+.emotion-58 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -929,7 +939,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
 }
 
 @media (min-width:768px) {
-  .emotion-55 {
+  .emotion-58 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -942,12 +952,12 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
   padding: 0 5px;
 }
 
-.emotion-53 {
+.emotion-56 {
   position: relative;
   height: 18px;
 }
 
-.emotion-53:hover .emotion-52 {
+.emotion-56:hover .emotion-55 {
   visibility: visible;
 }
 
@@ -960,7 +970,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
   padding: 0 10px;
 }
 
-.emotion-51 {
+.emotion-54 {
   position: absolute;
   background: #d3dddd;
   padding: 1px 4px;
@@ -978,7 +988,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
   top: -2px;
 }
 
-.emotion-51:before {
+.emotion-54:before {
   content: '';
   position: absolute;
   top: 29%;
@@ -1000,7 +1010,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
   padding: 0 5px;
 }
 
-.emotion-62 {
+.emotion-65 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1013,7 +1023,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
 }
 
 @media (min-width:768px) {
-  .emotion-62 {
+  .emotion-65 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -1021,7 +1031,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
   }
 }
 
-.emotion-60 {
+.emotion-63 {
   box-sizing: initial;
   display: inline-block;
   cursor: pointer;
@@ -1030,13 +1040,13 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
   padding: 0 5px;
 }
 
-.emotion-57 {
+.emotion-60 {
   width: 100%;
   height: auto;
 }
 
 <div
-  class="MuiBox-root MuiBox-root-2 emotion-68 emotion-69"
+  class="MuiBox-root MuiBox-root-2 emotion-71 emotion-72"
   style="display: none;"
 >
   <header
@@ -1248,13 +1258,13 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
     class="MuiBox-root MuiBox-root-195 emotion-26 emotion-27"
   />
   <div
-    class="emotion-66 emotion-67"
+    class="emotion-69 emotion-70"
   >
     <div
-      class="emotion-64 emotion-65"
+      class="emotion-67 emotion-68"
     >
       <div
-        class="emotion-55 emotion-56"
+        class="emotion-58 emotion-59"
       >
         Made with 
         <span
@@ -1264,7 +1274,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
         </span>
          on
         <span
-          class="emotion-53 emotion-54"
+          class="emotion-56 emotion-57"
         >
           <svg
             class="emotion-30 emotion-31 emotion-32"
@@ -1277,7 +1287,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
             />
           </svg>
           <span
-            class="emotion-51 emotion-52"
+            class="emotion-54 emotion-55"
           >
             <svg
               class="emotion-33 emotion-34 emotion-32"
@@ -1339,20 +1349,30 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
                 xlink:href="[object Object]#austria"
               />
             </svg>
+            <svg
+              class="emotion-33 emotion-34 emotion-32"
+            >
+              <title>
+                Germany
+              </title>
+              <use
+                xlink:href="[object Object]#germany"
+              />
+            </svg>
           </span>
         </span>
       </div>
       <div
-        class="emotion-62 emotion-63"
+        class="emotion-65 emotion-66"
       >
         Powered by
         <span
-          class="emotion-33 emotion-60 emotion-61"
+          class="emotion-33 emotion-63 emotion-64"
           title="Verdaccio"
         >
           <img
             alt="Verdaccio"
-            class="emotion-57 emotion-58"
+            class="emotion-60 emotion-61"
             src="[object Object]"
           />
         </span>
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index e53ac21..8cf7b29 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -22,6 +22,7 @@ const Footer: React.FC = () => {
               <Flag name="brazil" size="md" />
               <Flag name="china" size="md" />
               <Flag name="austria" size="md" />
+              <Flag name="germany" size="md" />
             </Flags>
           </ToolTip>
         </Left>
diff --git a/src/components/Footer/__snapshots__/Footer.test.tsx.snap b/src/components/Footer/__snapshots__/Footer.test.tsx.snap
index 101bbcd..54d7325 100644
--- a/src/components/Footer/__snapshots__/Footer.test.tsx.snap
+++ b/src/components/Footer/__snapshots__/Footer.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Footer /> component should load the initial state of Footer component 1`] = `
-.emotion-38 {
+.emotion-41 {
   background: #f9f9f9;
   border-top: 1px solid #e3e3e3;
   color: #999999;
@@ -9,7 +9,7 @@ exports[`<Footer /> component should load the initial state of Footer component
   padding: 20px;
 }
 
-.emotion-36 {
+.emotion-39 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -26,7 +26,7 @@ exports[`<Footer /> component should load the initial state of Footer component
 }
 
 @media (min-width:768px) {
-  .emotion-36 {
+  .emotion-39 {
     min-width: 400px;
     max-width: 800px;
     margin: auto;
@@ -38,12 +38,12 @@ exports[`<Footer /> component should load the initial state of Footer component
 }
 
 @media (min-width:1024px) {
-  .emotion-36 {
+  .emotion-39 {
     max-width: 1240px;
   }
 }
 
-.emotion-27 {
+.emotion-30 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -52,7 +52,7 @@ exports[`<Footer /> component should load the initial state of Footer component
 }
 
 @media (min-width:768px) {
-  .emotion-27 {
+  .emotion-30 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -65,12 +65,12 @@ exports[`<Footer /> component should load the initial state of Footer component
   padding: 0 5px;
 }
 
-.emotion-25 {
+.emotion-28 {
   position: relative;
   height: 18px;
 }
 
-.emotion-25:hover .emotion-24 {
+.emotion-28:hover .emotion-27 {
   visibility: visible;
 }
 
@@ -83,7 +83,7 @@ exports[`<Footer /> component should load the initial state of Footer component
   padding: 0 10px;
 }
 
-.emotion-23 {
+.emotion-26 {
   position: absolute;
   background: #d3dddd;
   padding: 1px 4px;
@@ -101,7 +101,7 @@ exports[`<Footer /> component should load the initial state of Footer component
   top: -2px;
 }
 
-.emotion-23:before {
+.emotion-26:before {
   content: '';
   position: absolute;
   top: 29%;
@@ -123,7 +123,7 @@ exports[`<Footer /> component should load the initial state of Footer component
   padding: 0 5px;
 }
 
-.emotion-34 {
+.emotion-37 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -136,7 +136,7 @@ exports[`<Footer /> component should load the initial state of Footer component
 }
 
 @media (min-width:768px) {
-  .emotion-34 {
+  .emotion-37 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -144,7 +144,7 @@ exports[`<Footer /> component should load the initial state of Footer component
   }
 }
 
-.emotion-32 {
+.emotion-35 {
   box-sizing: initial;
   display: inline-block;
   cursor: pointer;
@@ -153,19 +153,19 @@ exports[`<Footer /> component should load the initial state of Footer component
   padding: 0 5px;
 }
 
-.emotion-29 {
+.emotion-32 {
   width: 100%;
   height: auto;
 }
 
 <div
-  class="emotion-38 emotion-39"
+  class="emotion-41 emotion-42"
 >
   <div
-    class="emotion-36 emotion-37"
+    class="emotion-39 emotion-40"
   >
     <div
-      class="emotion-27 emotion-28"
+      class="emotion-30 emotion-31"
     >
       Made with 
       <span
@@ -175,7 +175,7 @@ exports[`<Footer /> component should load the initial state of Footer component
       </span>
        on
       <span
-        class="emotion-25 emotion-26"
+        class="emotion-28 emotion-29"
       >
         <svg
           class="emotion-2 emotion-3 emotion-4"
@@ -188,7 +188,7 @@ exports[`<Footer /> component should load the initial state of Footer component
           />
         </svg>
         <span
-          class="emotion-23 emotion-24"
+          class="emotion-26 emotion-27"
         >
           <svg
             class="emotion-5 emotion-6 emotion-4"
@@ -250,20 +250,30 @@ exports[`<Footer /> component should load the initial state of Footer component
               xlink:href="[object Object]#austria"
             />
           </svg>
+          <svg
+            class="emotion-5 emotion-6 emotion-4"
+          >
+            <title>
+              Germany
+            </title>
+            <use
+              xlink:href="[object Object]#germany"
+            />
+          </svg>
         </span>
       </span>
     </div>
     <div
-      class="emotion-34 emotion-35"
+      class="emotion-37 emotion-38"
     >
       Powered by
       <span
-        class="emotion-5 emotion-32 emotion-33"
+        class="emotion-5 emotion-35 emotion-36"
         title="Verdaccio"
       >
         <img
           alt="Verdaccio"
-          class="emotion-29 emotion-30"
+          class="emotion-32 emotion-33"
           src="[object Object]"
         />
       </span>
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index 9bc503e..975c0c4 100644
--- a/src/components/Icon/Icon.tsx
+++ b/src/components/Icon/Icon.tsx
@@ -6,6 +6,7 @@ import { Svg, Img, ImgWrapper } from './styles';
 import brazil from './img/brazil.svg';
 import china from './img/china.svg';
 import india from './img/india.svg';
+import germany from './img/germany.svg';
 import nicaragua from './img/nicaragua.svg';
 import pakistan from './img/pakistan.svg';
 import austria from './img/austria.svg';
@@ -25,6 +26,7 @@ export interface IconsMap {
   nicaragua: string;
   pakistan: string;
   austria: string;
+  germany: string;
   india: string;
   earth: string;
   verdaccio: string;
@@ -51,6 +53,7 @@ export const Icons: IconsMap = {
   license,
   time,
   version,
+  germany,
 };
 
 export interface Props {
diff --git a/src/components/Icon/img/germany.svg b/src/components/Icon/img/germany.svg
new file mode 100644
index 0000000..f772397
--- /dev/null
+++ b/src/components/Icon/img/germany.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="germany"><path d="M473.655 88.276H38.345C17.167 88.276 0 105.443 0 126.621v73.471h512v-73.471c0-21.178-17.167-38.345-38.345-38.345z" fill="#464655"/><path d="M0 385.379c0 21.177 17.167 38.345 38.345 38.345h435.31c21.177 0 38.345-17.167 38.345-38.345v-73.471H0v73.471z" fill="#ffe15a"/><path fill="#ff4b55" d="M0 200.09h512V311.9H0z"/></svg>