Skip to content

Commit f3a029b

Browse files
mikesurowiecmikesurowiec
committed
feat: add SupportSection
1 parent 34dcba5 commit f3a029b

14 files changed

Lines changed: 316 additions & 15 deletions

‎components/Contribution.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { GitPullRequestIcon } from '@primer/octicons-react'
2+
import { useMainContext } from 'components/context/MainContext'
3+
import { useTranslation } from 'components/hooks/useTranslation'
4+
5+
export const Contribution = () => {
6+
const { relativePath } = useMainContext()
7+
const { t } = useTranslation('contribution_cta')
8+
9+
const contribution_href = relativePath
10+
? `https://github.com/github/docs/edit/main/content/${relativePath}`
11+
: 'https://github.com/github/docs'
12+
13+
return (
14+
<div className="f5 contribution">
15+
<h2 className="f4">{t`title`}</h2>
16+
<p className="color-text-secondary f6">{t`body`}</p>
17+
<a className="btn btn-outline" href={contribution_href}>
18+
<GitPullRequestIcon size={16} className="color-text-tertiary" />
19+
{t`button`}
20+
</a>
21+
<p className="color-text-secondary f6 mt-2">
22+
{t`or`}{' '}
23+
<a href="https://github.com/github/docs/blob/main/CONTRIBUTING.md" target="_blank">
24+
{t`to_guidelines`}
25+
</a>
26+
</p>
27+
</div>
28+
)
29+
}

‎components/DefaultLayout.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import Head from 'next/head'
22

33
// import { Sidebar } from 'components/Sidebar'
4-
// import { SmallFooter } from 'components/SmallFooter'
5-
// import { ScrollButton } from 'components/ScrollButton'
6-
// import { SupportSection } from 'components/SupportSection'
74
// import { Header } from 'components/Header'
5+
import { SmallFooter } from 'components/SmallFooter'
6+
import { ScrollButton } from 'components/ScrollButton'
7+
import { SupportSection } from 'components/SupportSection'
88
import { DeprecationBanner } from 'components/DeprecationBanner'
99
import { useMainContext } from 'components/context/MainContext'
1010

@@ -26,9 +26,9 @@ export const DefaultLayout = (props: Props) => {
2626

2727
{props.children}
2828

29-
{/* <SupportSection />
29+
<SupportSection />
3030
<SmallFooter />
31-
<ScrollButton /> */}
31+
<ScrollButton />
3232
</main>
3333
</div>
3434
)

‎components/DeprecationBanner.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { useMainContext } from './context/MainContext'
2-
import { useCurrentVersion } from './useCurrentVersion'
1+
import { useMainContext } from 'components/context/MainContext'
2+
import { useVersion } from 'components/hooks/useVersion'
33

44
export const DeprecationBanner = () => {
55
const { data, enterpriseServerReleases } = useMainContext()
6-
const { currentVersion } = useCurrentVersion()
6+
const { currentVersion } = useVersion()
77

88
if (!currentVersion.includes(enterpriseServerReleases.oldestSupported)) {
99
return null
@@ -17,8 +17,7 @@ export const DeprecationBanner = () => {
1717
<div className="deprecation-banner border rounded-1 mb-2 color-bg-warning p-3 color-border-warning f5">
1818
<p>
1919
<b>
20-
<span dangerouslySetInnerHTML={{ __html: message }} />
21-
{' '}
20+
<span dangerouslySetInnerHTML={{ __html: message }} />{' '}
2221
<span
2322
data-date={enterpriseServerReleases.nextDeprecationDate}
2423
data-format="%B %d, %Y"
@@ -27,8 +26,7 @@ export const DeprecationBanner = () => {
2726
{enterpriseServerReleases.nextDeprecationDate}
2827
</span>
2928
.
30-
</b>
31-
{' '}
29+
</b>{' '}
3230
<span
3331
dangerouslySetInnerHTML={{
3432
__html: data.reusables.enterprise_deprecation.deprecation_details,

‎components/Helpfulness.tsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { ThumbsdownIcon, ThumbsupIcon } from '@primer/octicons-react'
2+
import { useTranslation } from 'components/hooks/useTranslation'
3+
4+
export const Helpfulness = () => {
5+
const { t } = useTranslation('helpfulness')
6+
7+
return (
8+
<form className="js-helpfulness f5">
9+
<h2 data-help-start data-help-yes data-help-no className="mb-1 f4">
10+
{t`able_to_find`}
11+
</h2>
12+
<p className="f6">
13+
<a href="/github/site-policy/github-privacy-statement">Privacy policy</a>
14+
</p>
15+
<p className="radio-group" data-help-start data-help-yes data-help-no>
16+
<input
17+
hidden
18+
id="helpfulness-yes"
19+
type="radio"
20+
name="helpfulness-vote"
21+
value="Yes"
22+
aria-label={t('yes')}
23+
/>
24+
<label className="btn x-radio-label" htmlFor="helpfulness-yes">
25+
<ThumbsupIcon size={24} className="color-text-tertiary" />
26+
</label>
27+
<input
28+
hidden
29+
id="helpfulness-no"
30+
type="radio"
31+
name="helpfulness-vote"
32+
value="No"
33+
aria-label={t`no`}
34+
/>
35+
<label className="btn x-radio-label" htmlFor="helpfulness-no">
36+
<ThumbsdownIcon size={24} className="color-text-tertiary" />
37+
</label>
38+
</p>
39+
<p className="color-text-secondary f6" hidden data-help-yes>
40+
{t('yes_feedback')}
41+
</p>
42+
<p className="color-text-secondary f6" hidden data-help-no>
43+
{t('no_feedback')}
44+
</p>
45+
<input type="text" className="d-none" name="helpfulness-token" aria-hidden="true" />
46+
<p hidden data-help-no>
47+
<label className="d-block mb-1 f6" htmlFor="helpfulness-comment">
48+
<span>{t('comment_label')}</span>
49+
<span className="text-normal color-text-tertiary float-right ml-1">{t('optional')}</span>
50+
</label>
51+
<textarea
52+
className="form-control input-sm width-full"
53+
name="helpfulness-comment"
54+
id="helpfulness-comment"
55+
></textarea>
56+
</p>
57+
<p>
58+
<label className="d-block mb-1 f6" htmlFor="helpfulness-email" hidden data-help-no>
59+
{t('email_label')}
60+
<span className="text-normal color-text-tertiary float-right ml-1">{t('optional')}</span>
61+
</label>
62+
<input
63+
type="email"
64+
className="form-control input-sm width-full"
65+
name="helpfulness-email"
66+
id="helpfulness-email"
67+
placeholder={t('email_placeholder')}
68+
hidden
69+
data-help-yes
70+
data-help-no
71+
/>
72+
</p>
73+
<p className="text-right" hidden data-help-yes data-help-no>
74+
<button type="submit" className="btn btn-sm">
75+
{t('send')}
76+
</button>
77+
</p>
78+
<p className="color-text-secondary f6" hidden data-help-end>
79+
{t('feedback')}
80+
</p>
81+
</form>
82+
)
83+
}

‎components/ScrollButton.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { ChevronUpIcon } from '@primer/octicons-react'
2+
3+
export const ScrollButton = () => {
4+
return (
5+
<button className="arrow-for-scrolling-top" id="js-scroll-top">
6+
<ChevronUpIcon />
7+
</button>
8+
)
9+
}

‎components/SmallFooter.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { MarkGithubIcon } from "@primer/octicons-react";
2+
import { useTranslation } from "components/hooks/useTranslation";
3+
4+
export const SmallFooter = () => {
5+
const { t } = useTranslation('footer')
6+
return (
7+
<footer className="py-6 text-small">
8+
<div className="container-xl d-flex px-3 px-md-6">
9+
<ul className="d-flex list-style-none flex-wrap flex-justify-center flex-xl-justify-start">
10+
<li className="d-flex mr-xl-3 color-text-secondary">
11+
<MarkGithubIcon className="mr-2 mr-xl-3" size={20} />
12+
<span>&copy; {new Date().getFullYear()} GitHub, Inc.</span>
13+
</li>
14+
<li className="ml-3">
15+
<a href="/github/site-policy/github-terms-of-service">
16+
{t`terms`}
17+
</a>
18+
</li>
19+
<li className="ml-3">
20+
<a href="/github/site-policy/github-privacy-statement">
21+
{t`privacy`}{" "}
22+
</a>
23+
</li>
24+
<li className="ml-3">
25+
<a href="https://github.com/security">
26+
{t`product.links.security`}
27+
</a>
28+
</li>
29+
<li className="ml-3">
30+
<a href="https://www.githubstatus.com/">
31+
{t`support.links.status`}
32+
</a>
33+
</li>
34+
<li className="ml-3">
35+
<a href="/">{t`support.links.help`}</a>
36+
</li>
37+
<li className="ml-3">
38+
<a href="https://support.github.com">
39+
{t`support.links.contact_github`}
40+
</a>
41+
</li>
42+
<li className="ml-3">
43+
<a href="https://github.com/pricing">
44+
{t`product.links.pricing`}
45+
</a>
46+
</li>
47+
<li className="ml-3">
48+
<a href="/developers">{t`platform.links.developer_api`}</a>
49+
</li>
50+
<li className="ml-3">
51+
<a href="https://services.github.com/">
52+
{t`support.links.training`}
53+
</a>
54+
</li>
55+
<li className="ml-3">
56+
<a href="https://github.com/about">{t`company.links.about`}</a>
57+
</li>
58+
</ul>
59+
</div>
60+
</footer>
61+
);
62+
};

‎components/Support.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { PeopleIcon, CommentDiscussionIcon } from '@primer/octicons-react'
2+
3+
import { useTranslation } from 'components/hooks/useTranslation'
4+
import { useVersion } from 'components/hooks/useVersion'
5+
6+
export const Support = () => {
7+
const { isEnterprise } = useVersion()
8+
const { t } = useTranslation('support')
9+
10+
return (
11+
<div>
12+
<h3 className="mb-2 f4">{t`still_need_help`}</h3>
13+
<a id="ask-community" href="https://github.community" className="btn btn-outline mr-4 mt-2">
14+
<PeopleIcon size={16} className="color-text-tertiary" />
15+
{t`ask_community`}
16+
</a>
17+
<a
18+
id="contact-us"
19+
href={
20+
isEnterprise
21+
? 'https://enterprise.github.com/support'
22+
: 'https://support.github.com/contact'
23+
}
24+
className="btn btn-outline mt-2"
25+
>
26+
<CommentDiscussionIcon size={16} className="color-text-tertiary" />
27+
{t`contact_support`}
28+
</a>
29+
</div>
30+
)
31+
}

‎components/SupportSection.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Helpfulness } from 'components/Helpfulness'
2+
import { Contribution } from 'components/Contribution'
3+
import { Support } from 'components/Support'
4+
import { useMainContext } from './context/MainContext'
5+
import { useVersion } from 'components/hooks/useVersion'
6+
7+
export const SupportSection = () => {
8+
const { currentVersion } = useVersion()
9+
const { enterpriseServerReleases } = useMainContext()
10+
11+
const isDeprecated =
12+
enterpriseServerReleases.isOldestReleaseDeprecated &&
13+
currentVersion.includes(enterpriseServerReleases.oldestSupported)
14+
15+
return (
16+
<section className="mt-lg-9 py-7 px-3 px-md-6 no-print color-bg-tertiary">
17+
<div className="container-xl gutter-lg-spacious clearfix">
18+
<div className="col-12 col-lg-6 col-xl-4 mb-6 mb-xl-0 float-left">
19+
{!isDeprecated && <Helpfulness />}
20+
</div>
21+
<div className="col-12 col-lg-6 col-xl-4 mb-6 mb-xl-0 float-left">
22+
{!isDeprecated && <Contribution />}
23+
</div>
24+
<div className="col-12 col-lg-12 col-xl-4 float-left">
25+
<Support />
26+
</div>
27+
</div>
28+
</section>
29+
)
30+
}

‎components/context/MainContext.tsx‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,37 @@ type ProductT = {
88
id: string
99
name: string
1010
}
11+
12+
type FooterSectionT = {
13+
heading: string
14+
links: Record<string, string>
15+
}
1116
type DataT = {
12-
ui: Record<string, Record<string, string>>
17+
ui: {
18+
footer: {
19+
all_rights_reserved: string
20+
terms: string
21+
privacy: string
22+
security: string
23+
product: FooterSectionT
24+
platform: FooterSectionT
25+
support: FooterSectionT
26+
company: FooterSectionT
27+
}
28+
helpfulness: {
29+
able_to_find: string
30+
yes: string
31+
no: string
32+
yes_feedback: string
33+
no_feedback: string
34+
comment_label: string
35+
optional: string
36+
email_label: string
37+
email_placeholder: string
38+
send: string
39+
feedback: string
40+
}
41+
}
1342
reusables: {
1443
enterprise_deprecation: {
1544
version_was_deprecated: string

‎components/hooks/useTranslation.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { useMainContext } from 'components/context/MainContext'
2+
import get from 'lodash/get'
3+
4+
// The idea of this component is to mimic a popular i18n library (i18next)
5+
// so that we can set ourselves up to transition to it (or a similar library) in the future
6+
export const useTranslation = (translationGroup: string) => {
7+
const { data } = useMainContext()
8+
9+
return {
10+
t: (strings: TemplateStringsArray | string, ...values: Array<any>) => {
11+
const key = typeof strings === 'string' ? strings : String.raw(strings, ...values)
12+
return get((data.ui as any)[translationGroup], key)
13+
},
14+
}
15+
}

0 commit comments

Comments
 (0)