Skip to content

Commit a641620

Browse files
PalkePalke
authored
Update Footer.js (carbon-design-system#893)
* Update Footer.js * feat: enable SPA and follow tracking guidance * fix: change initial SPA setting * vercel nudge * vercel nudge 2
1 parent c20ed76 commit a641620

File tree

3 files changed

+163
-8
lines changed

3 files changed

+163
-8
lines changed

‎gatsby-browser.js

+7
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,10 @@ if (process.env.NODE_ENV !== 'production') {
88
// import with "$font-prefix: /design/language/fonts"
99
require('./src/styles/plex-variants-production.scss');
1010
}
11+
12+
export const onRouteUpdate = ({ location }) => {
13+
if (window && window.digitalData && window.createPageviewTagForSPA) {
14+
window.digitalData.page.pageInfo.pageID = location.pathname;
15+
window.createPageviewTagForSPA();
16+
}
17+
}

‎gatsby-ssr.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import React from 'react';
22

3-
export const onRenderBody = ({ setPostBodyComponents }) => {
3+
export const onRenderBody = ({ setHeadComponents }) => {
44
if (process.env.NODE_ENV !== `production`) {
55
return null;
66
}
77

88
const script = `
99
if(!window) window = {};
10+
window.idaPageIsSPA = true;
1011
window.digitalData = {
1112
page: {
1213
category: {
@@ -21,15 +22,14 @@ export const onRenderBody = ({ setPostBodyComponents }) => {
2122
},
2223
},
2324
},
24-
}
25-
`;
25+
}`;
2626

27-
return setPostBodyComponents([
27+
return setHeadComponents([
2828
<script key="digital-data" dangerouslySetInnerHTML={{ __html: script }} />,
2929
<script
30-
defer
30+
async="async"
3131
key="core-metrics"
32-
src="https://1.www.s81c.com/common/stats/ida_stats.js"
32+
src="https://1.www.s81c.com/common/stats/ibm-common.js"
3333
type="text/javascript"
3434
/>,
3535
]);

‎src/gatsby-theme-carbon/components/Footer.js

+150-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,153 @@
1-
import React from 'react';
2-
import Footer from 'gatsby-theme-carbon/src/components/Footer';
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
import { useStaticQuery, graphql } from "gatsby";
4+
import { Row, Grid, Column } from "gatsby-theme-carbon/src/components/Grid";
5+
import {
6+
footer,
7+
grid,
8+
nav,
9+
listItem,
10+
logo,
11+
content,
12+
} from "gatsby-theme-carbon/src/components/Footer/Footer.module.scss";
13+
14+
const Footer = ({ Content, links, Logo }) => {
15+
const { firstCol, secondCol } = links;
16+
const { site } = useStaticQuery(graphql`
17+
query BUILD_TIME_QUERY_SHADOWED {
18+
site {
19+
buildTime(formatString: "DD MMMM YYYY")
20+
}
21+
}
22+
`);
23+
return (
24+
<footer className={footer}>
25+
<Grid className={grid}>
26+
<Row>
27+
<Column colLg={2} colMd={2}>
28+
<ul className={nav}>
29+
{firstCol &&
30+
firstCol.map((link, i) => (
31+
<li key={i} className={listItem}>
32+
<a href={link.href} aria-label={link.linkText}>
33+
{link.linkText}
34+
</a>
35+
</li>
36+
))}
37+
<li data-autoid="dds--privacy-cp" className={listItem} />
38+
</ul>
39+
</Column>
40+
<Column colLg={2} colMd={2}>
41+
<ul className={nav}>
42+
{secondCol &&
43+
secondCol.map((link, i) => (
44+
<li key={i} className={listItem}>
45+
<a href={link.href} aria-label={link.linkText}>
46+
{link.linkText}
47+
</a>
48+
</li>
49+
))}
50+
</ul>
51+
</Column>
52+
<Column
53+
className={content}
54+
colLg={4}
55+
colMd={4}
56+
colSm={3}
57+
offsetLg={2}
58+
>
59+
<Content buildTime={site.buildTime} />
60+
</Column>
61+
</Row>
62+
<Row>
63+
<Column colLg={3}>
64+
<Logo />
65+
</Column>
66+
</Row>
67+
</Grid>
68+
</footer>
69+
);
70+
};
71+
72+
const IBMLogo = () => (
73+
<svg
74+
className={logo}
75+
width="81"
76+
height="32"
77+
xmlns="http://www.w3.org/2000/svg"
78+
>
79+
<g fillRule="evenodd">
80+
<path d="M0 32h15.689v-2.038H0zM0 27.721h15.689v-2.038H0zM4.483 23.442h6.724v-2.037H4.483zM4.483 19.164h6.724v-2.038H4.483zM4.483 14.885h6.724v-2.037H4.483zM4.482 10.606h6.724V8.568H4.482zM0 6.327h15.689V4.29H0zM0 2.049h15.689V.011H0zM17.93 29.963V32h16.504a8.521 8.521 0 0 0 5.54-2.037H17.93zM17.93 25.683v2.038h23.914a8.535 8.535 0 0 0 .85-2.038H17.93zM22.412 23.442h6.724v-2.037h-6.724zM40.124 17.126H22.412v2.038H41.77a8.62 8.62 0 0 0-1.645-2.038M22.413 12.848v2.036h17.786a8.612 8.612 0 0 0 1.644-2.037h-19.43zM42.693 6.327a8.447 8.447 0 0 0-.85-2.037H17.93v2.037h24.763zM39.974 2.049a8.521 8.521 0 0 0-5.54-2.037H17.93v2.037h22.044zM22.412 10.606h6.724V8.568h-6.724zM35.453 10.606h7.29a8.603 8.603 0 0 0 .248-2.038h-7.538v2.038zM35.453 21.405v2.037h7.538c0-.703-.09-1.384-.248-2.037h-7.29zM57.457 0H44.825v2.038h13.34zM44.826 32h11.21v-2.038h-11.21zM44.826 27.72h11.21v-2.038h-11.21zM49.309 23.439h6.727v-2.038h-6.727zM49.309 19.159h6.727v-2.038h-6.727zM69.488 32h11.21v-2.038h-11.21zM69.488 27.72h11.21v-2.038h-11.21zM69.488 23.439h6.726v-2.038h-6.726zM69.487 19.159h6.726v-2.038h-6.726zM69.488 14.879h6.726V12.84H63.606l-.707 2.038h5.903l.686-1.94zM61.916 12.84H49.31v2.039h6.726v-1.94l.686 1.94h5.903zM76.213 8.56H65.091l-.707 2.038h11.83zM68.06 0l-.706 2.038h13.344V0zM62.757 32l.72-2.038h-1.432zM61.254 27.72h3.015l.72-2.038h-4.455zM59.743 23.44h6.037l.72-2.039h-7.476zM58.232 19.159h9.06l.719-2.038h-10.5zM49.309 10.598h11.83l-.707-2.038H49.309zM65.868 6.318h14.83V4.28H66.576zM58.947 4.28H44.826v2.038h14.828z" />
81+
</g>
82+
</svg>
83+
);
84+
85+
const DefaultContent = () => (
86+
<p>
87+
Shadow this content by importing the theme Footer and supplying your own
88+
props.
89+
</p>
90+
);
91+
92+
Footer.defaultProps = {
93+
links: {
94+
firstCol: [
95+
{ href: "https://www.ibm.com/design", linkText: "Sample" },
96+
{ href: "https://www.ibm.com/design", linkText: "Links" },
97+
{
98+
href: "https://www.ibm.com/design",
99+
linkText: "Column",
100+
},
101+
{ href: "https://www.ibm.com/design", linkText: "One" },
102+
],
103+
secondCol: [
104+
{
105+
href: "https://www.ibm.com/design",
106+
linkText: "Dribbble",
107+
},
108+
{
109+
href: "https://www.ibm.com/design",
110+
linkText: "Medium",
111+
},
112+
{
113+
href: "https://www.ibm.com/design",
114+
linkText: "Twitter",
115+
},
116+
],
117+
},
118+
Content: DefaultContent,
119+
Logo: IBMLogo,
120+
};
121+
122+
Footer.propTypes = {
123+
/**
124+
* Specify the first and second columns of your links
125+
*/
126+
links: PropTypes.exact({
127+
firstCol: PropTypes.arrayOf(
128+
PropTypes.shape({
129+
href: PropTypes.string,
130+
linkText: PropTypes.string,
131+
})
132+
),
133+
secondCol: PropTypes.arrayOf(
134+
PropTypes.shape({
135+
href: PropTypes.string,
136+
linkText: PropTypes.string,
137+
})
138+
),
139+
}),
140+
141+
/**
142+
* Specify the first and second columns of your links
143+
*/
144+
Content: PropTypes.elementType,
145+
146+
/**
147+
* Provide a logo to be rendered in the bottom left corner
148+
*/
149+
Logo: PropTypes.elementType,
150+
};
3151

4152
const currentYear = new Date().getFullYear();
5153

0 commit comments

Comments
 (0)