sombochea/verdaccio-ui
1
0
Fork 1
mirror of https://github.com/SomboChea/ui synced 2024-11-05 06:04:28 +07:00
Code Issues Releases Wiki Activity

feat(flag): Added Germany flag (#454)

Browse Source
This commit is contained in:
Priscila Oliveira 2020-04-05 20:25:38 +02:00 committed by GitHub
parent d29aa05cc6
commit 07620e5d4b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 105 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
src/App/__snapshots__/App.test.tsx.snap
View File

@ -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>

1
src/components/Footer/Footer.tsx
View File

@ -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>

54
src/components/Footer/__snapshots__/Footer.test.tsx.snap
View File

@ -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>

3
src/components/Icon/Icon.tsx
View File

@ -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 {

1
src/components/Icon/img/germany.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 407 B