Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update footer design #2495

Merged
merged 3 commits into from
May 24, 2021
Merged

Update footer design #2495

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ce259fb
Update footer design
julieg18 May 21, 2021
59000fd
Lower repetition in LayoutFooter links/SocialIcons
julieg18 May 23, 2021
6558e06
Split LayoutFooter into multiple functions
julieg18 May 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file removed src/components/IconSet/icons/chat.png
View file
Open in desktop
Binary file not shown.
Binary file removed src/components/IconSet/icons/discord.png
View file
Open in desktop
Binary file not shown.
Binary file removed src/components/IconSet/icons/github.png
View file
Open in desktop
Binary file not shown.
5 changes: 0 additions & 5 deletions src/components/IconSet/icons/index.ts
View file
Open in desktop

This file was deleted.

Binary file removed src/components/IconSet/icons/iterative.png
View file
Open in desktop
Binary file not shown.
Binary file removed src/components/IconSet/icons/twitter.png
View file
Open in desktop
Binary file not shown.
26 changes: 0 additions & 26 deletions src/components/IconSet/index.tsx
View file
Open in desktop

This file was deleted.

7 changes: 0 additions & 7 deletions src/components/IconSet/styles.module.css
View file
Open in desktop

This file was deleted.

304 changes: 197 additions & 107 deletions src/components/LayoutFooter/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,127 +1,217 @@
import React from 'react'
import cn from 'classnames'
import includes from 'lodash/includes'

import { LayoutModifiers, ILayoutModifiable } from '../MainLayout'
import LayoutWidthContainer from '../LayoutWidthContainer'
import Link from '../Link'
import IconSet from '../IconSet'

import SocialIcon, { ISocialIcon } from '../SocialIcon'
import ShowOnly from '../ShowOnly'
import { getFirstPage } from '../../utils/shared/sidebar'

import { ReactComponent as LogoSVG } from '../../../static/img/logo-white.svg'
import { ReactComponent as LogoSVG } from '../../../static/img/logo.svg'
import { ReactComponent as GithubSVG } from '../SocialIcon/github.svg'
import { ReactComponent as TwitterSVG } from '../SocialIcon/twitter.svg'
import { ReactComponent as DiscordSVG } from '../SocialIcon/discord.svg'
import { ReactComponent as CmlSVG } from '../../../static/img/cml-icon.svg'
import { ReactComponent as StudioSVG } from '../../../static/img/studio-icon.svg'
import { ReactComponent as IterativeSVG } from '../../../static/img/iterative-icon.svg'

import styles from './styles.module.css'

const docsPage = getFirstPage()

const LayoutFooter: React.FC<Required<ILayoutModifiable>> = ({ modifiers }) => (
interface IFooterLinkData {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm pretty new to TypeScript, please let me know if my typescript code can be improved!

href: string
text: string
icon?: JSX.Element
target?: '_blank'
}

interface IFooterListData {
header: string
links: Array<IFooterLinkData>
}

const footerListsData: Array<IFooterListData> = [
{
header: 'Product',
links: [
{
href: '/',
text: 'Overview'
},
{
href: '/features',
text: 'Features'
}
]
},
{
header: 'Help',
links: [
{ href: '/support', text: 'Support' },
{ href: '/doc/start', text: 'Get started' },
{ href: '/community', text: 'Community' },
{ href: docsPage, text: 'Documentation' }
]
},
{
header: 'Community',
links: [
{
href: 'https://twitter.com/DVCorg',
text: 'Twitter',
icon: <TwitterSVG className={styles.icon} />,
target: '_blank'
},
{
href: 'https://github.com/iterative/dvc',
text: 'Github',
icon: <GithubSVG className={styles.icon} />,
target: '_blank'
},
{
href: '/chat',
text: 'Discord',
icon: <DiscordSVG className={styles.icon} />
}
]
},
{
header: 'Company',
links: [
{
href: '/blog',
text: 'Blog'
},
{
href: '/doc/user-guide/privacy',
text: 'Privacy Policy'
},
{
href: 'https://iterative.ai/about#career',
text: 'Career',
target: '_blank'
}
]
},
{
header: 'Other Tools',
links: [
{
href: '/',
text: 'DVC',
icon: <LogoSVG className={styles.productIcon} />
},
{
href: 'https://cml.dev/',
text: 'CML',
icon: <CmlSVG className={styles.productIcon} />,
target: '_blank'
},
{
href: 'https://studio.iterative.ai/',
text: 'Studio',
icon: <StudioSVG className={styles.productIcon} />,
target: '_blank'
}
]
}
]

const footerSocialIconsData: Array<ISocialIcon> = [
{
site: 'github',
label: 'DVC Github Page',
url: 'https://github.com/iterative/dvc'
},
{
site: 'twitter',
label: 'DVC Twitter',
url: 'https://twitter.com/DVCorg'
},
{
site: 'youtube',
label: 'DVC.org Youtube Channel',
url: 'https://www.youtube.com/channel/UC37rp97Go-xIX3aNFVHhXfQ'
},
{
site: 'linkedinNoBg',
label: 'Iterative LinkedIn',
url: 'https://www.linkedin.com/company/iterative-ai'
},
{
site: 'discord',
label: 'DVC Discord chat',
url: 'https://www.dvc.org/chat'
}
]

const FooterLists: React.FC = () => (
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should I move these functions(FooterLists and FooterSocialIcons) to a folder inside LayoutFooter?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds like a sensible refactor, but not necessary before merge at least.

<div className={styles.columns}>
{footerListsData.map(({ header, links }, index) => (
<div className={styles.column} key={index}>
<h2 className={styles.heading}>{header}</h2>
<ul className={styles.links}>
{links.map(({ text, target, href, icon }, i) => (
<li className={styles.linkItem} key={i}>
<Link target={target} href={href} className={styles.link}>
{icon}
{text}
</Link>
</li>
))}
</ul>
</div>
))}
</div>
)

const FooterSocialIcons: React.FC = () => (
<div className={styles.socialIcons}>
{footerSocialIconsData.map(({ site, label, url }, index) => (
<SocialIcon
key={index}
site={site}
label={label}
url={url}
className={cn(styles.link, styles.socialIcon)}
/>
))}
</div>
)

const LayoutFooter: React.FC = () => (
<footer className={styles.wrapper}>
<LayoutWidthContainer
className={cn(styles.container)}
wide={includes(modifiers, LayoutModifiers.Wide)}
>
<LayoutWidthContainer className={cn(styles.container)} wide>
<div className={styles.top}>
<Link className={styles.logo} href="/" title="dvc.org">
<LogoSVG />
</Link>
</div>
<div className={styles.columns}>
<div className={styles.column}>
<h2 className={styles.heading}>Product</h2>
<ul className={styles.links}>
<li className={styles.linkItem}>
<Link href="/" className={styles.link}>
Overview
</Link>
</li>
<li className={styles.linkItem}>
<Link href="/features" className={styles.link}>
Features
</Link>
</li>
</ul>
</div>
<div className={styles.column}>
<h2 className={styles.heading}>Help</h2>
<ul className={styles.links}>
<li className={styles.linkItem}>
<Link href="/support" className={styles.link}>
Support
</Link>
</li>
<li className={styles.linkItem}>
<Link href="/doc/start" className={styles.link}>
Get started
</Link>
</li>
<li className={styles.linkItem}>
<Link href="/community" className={styles.link}>
Community
</Link>
</li>
<li className={styles.linkItem}>
<Link href={docsPage} className={styles.link}>
Documentation
</Link>
</li>
</ul>
</div>
<div className={styles.column}>
<h2 className={styles.heading}>Company</h2>
<ul className={styles.links}>
<li className={styles.linkItem}>
<Link href="/blog" className={styles.link}>
Blog
</Link>
</li>
<li className={styles.linkItem}>
<Link
href="https://iterative.ai/"
className={styles.link}
target="_blank"
>
<IconSet className={styles.icon} name="iterative" />
Iterative.ai
</Link>
</li>
<li className={styles.linkItem}>
<Link href="/doc/user-guide/privacy" className={styles.link}>
Privacy Policy
</Link>
</li>
</ul>
</div>
<div className={styles.column}>
<h2 className={styles.heading}>Social</h2>
<ul className={styles.links}>
<li className={styles.linkItem}>
<Link
href="https://twitter.com/DVCorg"
className={styles.link}
target="_blank"
>
<IconSet className={styles.icon} name="twitter" />
Twitter
</Link>
</li>
<li className={styles.linkItem}>
<Link
href="https://github.com/iterative/dvc"
className={styles.link}
target="_blank"
>
<IconSet className={styles.icon} name="github" />
GitHub
</Link>
</li>
<li className={styles.linkItem}>
<Link href="/chat" className={styles.link}>
<IconSet className={styles.icon} name="discord" />
Discord
</Link>
</li>
</ul>
</div>
<FooterLists />
<div className={styles.bottomRow}>
<p className={styles.companyLabel}>
By{' '}
<Link
className={styles.companyName}
href="https://iterative.ai/"
target="_blank"
>
<IterativeSVG className={styles.companyLogo} />
iterative.ai
</Link>
<span className={styles.companyDescription}>
<ShowOnly as="span" on="desktop">
{' '}
- an open platform to operationalize AI
</ShowOnly>
<ShowOnly as="span" on="mobile">
{' '}
An open platform to operationalize AI
</ShowOnly>
</span>
</p>
<FooterSocialIcons />
</div>
</LayoutWidthContainer>
</footer>
Expand Down
Loading