sombochea/verdaccio-ui
1
0
Fork 1
mirror of https://github.com/SomboChea/ui synced 2024-11-24 06:54:27 +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 // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<App /> should display the Header component 1`] = ` exports[`<App /> should display the Header component 1`] = `
.emotion-78 { .emotion-81 {
background-color: #fff; background-color: #fff;
} }
@ -153,7 +153,7 @@ exports[`<App /> should display the Header component 1`] = `
} }
} }
.emotion-76 { .emotion-79 {
background: #f9f9f9; background: #f9f9f9;
border-top: 1px solid #e3e3e3; border-top: 1px solid #e3e3e3;
color: #999999; color: #999999;
@ -161,7 +161,7 @@ exports[`<App /> should display the Header component 1`] = `
padding: 20px; padding: 20px;
} }
.emotion-74 { .emotion-77 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
@ -178,7 +178,7 @@ exports[`<App /> should display the Header component 1`] = `
} }
@media (min-width:768px) { @media (min-width:768px) {
.emotion-74 { .emotion-77 {
min-width: 400px; min-width: 400px;
max-width: 800px; max-width: 800px;
margin: auto; margin: auto;
@ -190,12 +190,12 @@ exports[`<App /> should display the Header component 1`] = `
} }
@media (min-width:1024px) { @media (min-width:1024px) {
.emotion-74 { .emotion-77 {
max-width: 1240px; max-width: 1240px;
} }
} }
.emotion-65 { .emotion-68 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
@ -204,7 +204,7 @@ exports[`<App /> should display the Header component 1`] = `
} }
@media (min-width:768px) { @media (min-width:768px) {
.emotion-65 { .emotion-68 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
@ -217,12 +217,12 @@ exports[`<App /> should display the Header component 1`] = `
padding: 0 5px; padding: 0 5px;
} }
.emotion-63 { .emotion-66 {
position: relative; position: relative;
height: 18px; height: 18px;
} }
.emotion-63:hover .emotion-62 { .emotion-66:hover .emotion-65 {
visibility: visible; visibility: visible;
} }
@ -235,7 +235,7 @@ exports[`<App /> should display the Header component 1`] = `
padding: 0 10px; padding: 0 10px;
} }
.emotion-61 { .emotion-64 {
position: absolute; position: absolute;
background: #d3dddd; background: #d3dddd;
padding: 1px 4px; padding: 1px 4px;
@ -253,7 +253,7 @@ exports[`<App /> should display the Header component 1`] = `
top: -2px; top: -2px;
} }
.emotion-61:before { .emotion-64:before {
content: ''; content: '';
position: absolute; position: absolute;
top: 29%; top: 29%;
@ -275,7 +275,7 @@ exports[`<App /> should display the Header component 1`] = `
padding: 0 5px; padding: 0 5px;
} }
.emotion-72 { .emotion-75 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
@ -288,7 +288,7 @@ exports[`<App /> should display the Header component 1`] = `
} }
@media (min-width:768px) { @media (min-width:768px) {
.emotion-72 { .emotion-75 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
@ -296,7 +296,7 @@ exports[`<App /> should display the Header component 1`] = `
} }
} }
.emotion-70 { .emotion-73 {
box-sizing: initial; box-sizing: initial;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
@ -305,7 +305,7 @@ exports[`<App /> should display the Header component 1`] = `
padding: 0 5px; padding: 0 5px;
} }
.emotion-67 { .emotion-70 {
width: 100%; width: 100%;
height: auto; height: auto;
} }
@ -358,7 +358,7 @@ exports[`<App /> should display the Header component 1`] = `
} }
<div <div
class="MuiBox-root MuiBox-root-219 emotion-78 emotion-79" class="MuiBox-root MuiBox-root-219 emotion-81 emotion-82"
> >
<header <header
class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic emotion-24 emotion-25 MuiAppBar-colorPrimary" 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> </div>
<div <div
class="emotion-76 emotion-77" class="emotion-79 emotion-80"
> >
<div <div
class="emotion-74 emotion-75" class="emotion-77 emotion-78"
> >
<div <div
class="emotion-65 emotion-66" class="emotion-68 emotion-69"
> >
Made with Made with
<span <span
@ -626,7 +626,7 @@ exports[`<App /> should display the Header component 1`] = `
</span> </span>
on on
<span <span
class="emotion-63 emotion-64" class="emotion-66 emotion-67"
> >
<svg <svg
class="emotion-40 emotion-41 emotion-42" class="emotion-40 emotion-41 emotion-42"
@ -639,7 +639,7 @@ exports[`<App /> should display the Header component 1`] = `
/> />
</svg> </svg>
<span <span
class="emotion-61 emotion-62" class="emotion-64 emotion-65"
> >
<svg <svg
class="emotion-43 emotion-44 emotion-42" class="emotion-43 emotion-44 emotion-42"
@ -701,20 +701,30 @@ exports[`<App /> should display the Header component 1`] = `
xlink:href="[object Object]#austria" xlink:href="[object Object]#austria"
/> />
</svg> </svg>
<svg
class="emotion-43 emotion-44 emotion-42"
>
<title>
Germany
</title>
<use
xlink:href="[object Object]#germany"
/>
</svg>
</span> </span>
</span> </span>
</div> </div>
<div <div
class="emotion-72 emotion-73" class="emotion-75 emotion-76"
> >
Powered by Powered by
<span <span
class="emotion-43 emotion-70 emotion-71" class="emotion-43 emotion-73 emotion-74"
title="Verdaccio" title="Verdaccio"
> >
<img <img
alt="Verdaccio" alt="Verdaccio"
class="emotion-67 emotion-68" class="emotion-70 emotion-71"
src="[object Object]" src="[object Object]"
/> />
</span> </span>
@ -726,7 +736,7 @@ exports[`<App /> should display the Header component 1`] = `
`; `;
exports[`<App /> should display the Loading component at the beginning 1`] = ` exports[`<App /> should display the Loading component at the beginning 1`] = `
.emotion-68 { .emotion-71 {
background-color: #fff; background-color: #fff;
} }
@ -878,7 +888,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
} }
} }
.emotion-66 { .emotion-69 {
background: #f9f9f9; background: #f9f9f9;
border-top: 1px solid #e3e3e3; border-top: 1px solid #e3e3e3;
color: #999999; color: #999999;
@ -886,7 +896,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
padding: 20px; padding: 20px;
} }
.emotion-64 { .emotion-67 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
@ -903,7 +913,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
} }
@media (min-width:768px) { @media (min-width:768px) {
.emotion-64 { .emotion-67 {
min-width: 400px; min-width: 400px;
max-width: 800px; max-width: 800px;
margin: auto; margin: auto;
@ -915,12 +925,12 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
} }
@media (min-width:1024px) { @media (min-width:1024px) {
.emotion-64 { .emotion-67 {
max-width: 1240px; max-width: 1240px;
} }
} }
.emotion-55 { .emotion-58 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-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) { @media (min-width:768px) {
.emotion-55 { .emotion-58 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
@ -942,12 +952,12 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
padding: 0 5px; padding: 0 5px;
} }
.emotion-53 { .emotion-56 {
position: relative; position: relative;
height: 18px; height: 18px;
} }
.emotion-53:hover .emotion-52 { .emotion-56:hover .emotion-55 {
visibility: visible; visibility: visible;
} }
@ -960,7 +970,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
padding: 0 10px; padding: 0 10px;
} }
.emotion-51 { .emotion-54 {
position: absolute; position: absolute;
background: #d3dddd; background: #d3dddd;
padding: 1px 4px; padding: 1px 4px;
@ -978,7 +988,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
top: -2px; top: -2px;
} }
.emotion-51:before { .emotion-54:before {
content: ''; content: '';
position: absolute; position: absolute;
top: 29%; top: 29%;
@ -1000,7 +1010,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
padding: 0 5px; padding: 0 5px;
} }
.emotion-62 { .emotion-65 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-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) { @media (min-width:768px) {
.emotion-62 { .emotion-65 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; 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; box-sizing: initial;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
@ -1030,13 +1040,13 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
padding: 0 5px; padding: 0 5px;
} }
.emotion-57 { .emotion-60 {
width: 100%; width: 100%;
height: auto; height: auto;
} }
<div <div
class="MuiBox-root MuiBox-root-2 emotion-68 emotion-69" class="MuiBox-root MuiBox-root-2 emotion-71 emotion-72"
style="display: none;" style="display: none;"
> >
<header <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" class="MuiBox-root MuiBox-root-195 emotion-26 emotion-27"
/> />
<div <div
class="emotion-66 emotion-67" class="emotion-69 emotion-70"
> >
<div <div
class="emotion-64 emotion-65" class="emotion-67 emotion-68"
> >
<div <div
class="emotion-55 emotion-56" class="emotion-58 emotion-59"
> >
Made with Made with
<span <span
@ -1264,7 +1274,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
</span> </span>
on on
<span <span
class="emotion-53 emotion-54" class="emotion-56 emotion-57"
> >
<svg <svg
class="emotion-30 emotion-31 emotion-32" class="emotion-30 emotion-31 emotion-32"
@ -1277,7 +1287,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
/> />
</svg> </svg>
<span <span
class="emotion-51 emotion-52" class="emotion-54 emotion-55"
> >
<svg <svg
class="emotion-33 emotion-34 emotion-32" 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" xlink:href="[object Object]#austria"
/> />
</svg> </svg>
<svg
class="emotion-33 emotion-34 emotion-32"
>
<title>
Germany
</title>
<use
xlink:href="[object Object]#germany"
/>
</svg>
</span> </span>
</span> </span>
</div> </div>
<div <div
class="emotion-62 emotion-63" class="emotion-65 emotion-66"
> >
Powered by Powered by
<span <span
class="emotion-33 emotion-60 emotion-61" class="emotion-33 emotion-63 emotion-64"
title="Verdaccio" title="Verdaccio"
> >
<img <img
alt="Verdaccio" alt="Verdaccio"
class="emotion-57 emotion-58" class="emotion-60 emotion-61"
src="[object Object]" src="[object Object]"
/> />
</span> </span>

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

@ -22,6 +22,7 @@ const Footer: React.FC = () => {
<Flag name="brazil" size="md" /> <Flag name="brazil" size="md" />
<Flag name="china" size="md" /> <Flag name="china" size="md" />
<Flag name="austria" size="md" /> <Flag name="austria" size="md" />
<Flag name="germany" size="md" />
</Flags> </Flags>
</ToolTip> </ToolTip>
</Left> </Left>

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

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Footer /> component should load the initial state of Footer component 1`] = ` exports[`<Footer /> component should load the initial state of Footer component 1`] = `
.emotion-38 { .emotion-41 {
background: #f9f9f9; background: #f9f9f9;
border-top: 1px solid #e3e3e3; border-top: 1px solid #e3e3e3;
color: #999999; color: #999999;
@ -9,7 +9,7 @@ exports[`<Footer /> component should load the initial state of Footer component
padding: 20px; padding: 20px;
} }
.emotion-36 { .emotion-39 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
@ -26,7 +26,7 @@ exports[`<Footer /> component should load the initial state of Footer component
} }
@media (min-width:768px) { @media (min-width:768px) {
.emotion-36 { .emotion-39 {
min-width: 400px; min-width: 400px;
max-width: 800px; max-width: 800px;
margin: auto; margin: auto;
@ -38,12 +38,12 @@ exports[`<Footer /> component should load the initial state of Footer component
} }
@media (min-width:1024px) { @media (min-width:1024px) {
.emotion-36 { .emotion-39 {
max-width: 1240px; max-width: 1240px;
} }
} }
.emotion-27 { .emotion-30 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-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) { @media (min-width:768px) {
.emotion-27 { .emotion-30 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
@ -65,12 +65,12 @@ exports[`<Footer /> component should load the initial state of Footer component
padding: 0 5px; padding: 0 5px;
} }
.emotion-25 { .emotion-28 {
position: relative; position: relative;
height: 18px; height: 18px;
} }
.emotion-25:hover .emotion-24 { .emotion-28:hover .emotion-27 {
visibility: visible; visibility: visible;
} }
@ -83,7 +83,7 @@ exports[`<Footer /> component should load the initial state of Footer component
padding: 0 10px; padding: 0 10px;
} }
.emotion-23 { .emotion-26 {
position: absolute; position: absolute;
background: #d3dddd; background: #d3dddd;
padding: 1px 4px; padding: 1px 4px;
@ -101,7 +101,7 @@ exports[`<Footer /> component should load the initial state of Footer component
top: -2px; top: -2px;
} }
.emotion-23:before { .emotion-26:before {
content: ''; content: '';
position: absolute; position: absolute;
top: 29%; top: 29%;
@ -123,7 +123,7 @@ exports[`<Footer /> component should load the initial state of Footer component
padding: 0 5px; padding: 0 5px;
} }
.emotion-34 { .emotion-37 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-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) { @media (min-width:768px) {
.emotion-34 { .emotion-37 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; 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; box-sizing: initial;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
@ -153,19 +153,19 @@ exports[`<Footer /> component should load the initial state of Footer component
padding: 0 5px; padding: 0 5px;
} }
.emotion-29 { .emotion-32 {
width: 100%; width: 100%;
height: auto; height: auto;
} }
<div <div
class="emotion-38 emotion-39" class="emotion-41 emotion-42"
> >
<div <div
class="emotion-36 emotion-37" class="emotion-39 emotion-40"
> >
<div <div
class="emotion-27 emotion-28" class="emotion-30 emotion-31"
> >
Made with Made with
<span <span
@ -175,7 +175,7 @@ exports[`<Footer /> component should load the initial state of Footer component
</span> </span>
on on
<span <span
class="emotion-25 emotion-26" class="emotion-28 emotion-29"
> >
<svg <svg
class="emotion-2 emotion-3 emotion-4" class="emotion-2 emotion-3 emotion-4"
@ -188,7 +188,7 @@ exports[`<Footer /> component should load the initial state of Footer component
/> />
</svg> </svg>
<span <span
class="emotion-23 emotion-24" class="emotion-26 emotion-27"
> >
<svg <svg
class="emotion-5 emotion-6 emotion-4" 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" xlink:href="[object Object]#austria"
/> />
</svg> </svg>
<svg
class="emotion-5 emotion-6 emotion-4"
>
<title>
Germany
</title>
<use
xlink:href="[object Object]#germany"
/>
</svg>
</span> </span>
</span> </span>
</div> </div>
<div <div
class="emotion-34 emotion-35" class="emotion-37 emotion-38"
> >
Powered by Powered by
<span <span
class="emotion-5 emotion-32 emotion-33" class="emotion-5 emotion-35 emotion-36"
title="Verdaccio" title="Verdaccio"
> >
<img <img
alt="Verdaccio" alt="Verdaccio"
class="emotion-29 emotion-30" class="emotion-32 emotion-33"
src="[object Object]" src="[object Object]"
/> />
</span> </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 brazil from './img/brazil.svg';
import china from './img/china.svg'; import china from './img/china.svg';
import india from './img/india.svg'; import india from './img/india.svg';
import germany from './img/germany.svg';
import nicaragua from './img/nicaragua.svg'; import nicaragua from './img/nicaragua.svg';
import pakistan from './img/pakistan.svg'; import pakistan from './img/pakistan.svg';
import austria from './img/austria.svg'; import austria from './img/austria.svg';
@ -25,6 +26,7 @@ export interface IconsMap {
nicaragua: string; nicaragua: string;
pakistan: string; pakistan: string;
austria: string; austria: string;
germany: string;
india: string; india: string;
earth: string; earth: string;
verdaccio: string; verdaccio: string;
@ -51,6 +53,7 @@ export const Icons: IconsMap = {
license, license,
time, time,
version, version,
germany,
}; };
export interface Props { 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