ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2025-01-10 22:02:13 +05:30
Code Issues Packages Projects Releases Wiki Activity

Prepare footer for new item

Browse Source
This commit is contained in:
ErickSkrauch 2020-07-09 02:50:40 +03:00
parent cfb0c8d9e3
commit 70070ef516
3 changed files with 32 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/app/components/footerMenu/FooterMenu.story.tsx
View File

@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react';
import FooterMenu from './FooterMenu'; import FooterMenu from './FooterMenu';
const PreviewWrapper: ComponentType<{ style?: CSSProperties }> = ({ style, children }) => ( const PreviewWrapper: ComponentType<{ style?: CSSProperties }> = ({ style, children }) => (
<div style={{ padding: '25px', ...style }}>{children}</div> <div style={{ padding: '25px', width: 320, boxSizing: 'border-box', ...style }}>{children}</div>
); );
storiesOf('Components', module).add('FooterMenu', () => ( storiesOf('Components', module).add('FooterMenu', () => (

37
packages/app/components/footerMenu/FooterMenu.tsx
View File

@ -20,18 +20,33 @@ const FooterMenu: ComponentType = () => {
return ( return (
<div className={styles.footerMenu} data-testid="footer"> <div className={styles.footerMenu} data-testid="footer">
<Link to="/rules" className={styles.footerItem}> <div className={styles.row}>
<Message key="rules" defaultMessage="Rules" /> <Link to="/rules" className={styles.footerItem}>
</Link> <Message key="rules" defaultMessage="Rules" />
<ContactLink className={styles.footerItem}> </Link>
<Message key="contactUs" defaultMessage="Contact Us" />
</ContactLink>
<Link to="/dev" className={styles.footerItem}>
<Message key="forDevelopers" defaultMessage="For developers" />
</Link>
<div className={styles.langTriggerContainer}> {'ꞏ'}
<a href="#" className={styles.langTrigger} onClick={onLanguageSwitcherClick}>
<ContactLink className={styles.footerItem}>
<Message key="contactUs" defaultMessage="Contact Us" />
</ContactLink>
</div>
<div className={styles.row}>
<Link to="/dev" className={styles.footerItem}>
<Message key="forDevelopers" defaultMessage="For developers" />
</Link>
{'ꞏ'}
{/* TODO: on click open the source code popup */}
<a href="#" className={styles.footerItem}>
<Message key="sourceCode" defaultMessage="Source code" />
</a>
</div>
<div className={styles.row}>
<a href="#" className={styles.footerItem} onClick={onLanguageSwitcherClick}>
<span className={styles.langTriggerIcon} /> <span className={styles.langTriggerIcon} />
<Message key="siteLanguage" defaultMessage="Site language" /> <Message key="siteLanguage" defaultMessage="Site language" />
</a> </a>

18
packages/app/components/footerMenu/footerMenu.scss
View File

@ -7,23 +7,15 @@
line-height: 12px; line-height: 12px;
} }
.row {
margin-bottom: 2px;
}
.footerItem { .footerItem {
display: inline-block; display: inline-block;
margin: 2px 5px 2px 0; margin: 2px 2px;
color: #666; color: #666;
border-bottom-color: #666; border-bottom-color: #666;
&:last-of-type {
margin-right: 0;
}
}
.langTriggerContainer {
margin-top: 1px;
}
.langTrigger {
composes: footerItem;
} }
.langTriggerIcon { .langTriggerIcon {