Skip to content

Commit 4b7e643

Browse files
davidornelas11davidornelas11
authored
Merge pull request #1532 from ASU/uds-1981
docs(component-header-footer): update readme and example
2 parents b42a744 + 243178c commit 4b7e643

File tree

3 files changed

+259
-222
lines changed

3 files changed

+259
-222
lines changed

‎packages/component-header-footer/README.md‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,13 @@
11
# ASU Header
2-
ASU Web Standards-based implementation of global header.
2+
ASU Web Standards-based implementation of global header and footer.
33

44
## CLI Commands
55

66
``` bash
77
# add component-footer
8-
yarn add @asu/component-header
9-
10-
11-
# run storybook
12-
yarn storybook
13-
14-
# build for production with minification
15-
yarn build
16-
17-
# run tests
18-
yarn test
8+
yarn add @asu/component-header-footer
9+
# or if you use npm
10+
npm install @asu/component-header-footer
1911

2012
```
2113

@@ -29,13 +21,13 @@ yarn test
2921

3022
### Default import
3123
```JAVASCRIPT
32-
import { ASUHeader } from '@asu/component-header@dev'
24+
import { ASUHeader, ASUFooter } from '@asu/component-header-footer'
3325
```
3426

3527
### Aliased import
3628
```JAVASCRIPT
37-
import { ASUHeader as Header } from '@asu/component-header@dev'
29+
import { ASUHeader as Header, ASUFooter as Footer } from '@asu/component-header-footer'
3830
```
3931

4032
### Import for use in HTML page
41-
You can find an example of how to set `ASUHeader` props [here](/packages/component-header/examples/global-header.html)
33+
You can find an example of how to set `ASUHeader` props for use in a browser [here](/packages/component-header/examples/global-header.html)

‎packages/component-header-footer/examples/global-header.html‎

Lines changed: 176 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@
1111
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
1212
<!-- *************************************************************** -->
1313
<!-- include bundled scripts from packages -->
14-
<script src="../dist/vendor.umd.js"></script>
15-
<script src="../dist/asuHeader.umd.js"></script>
14+
<script src="../dist/asuHeaderFooter.umd.js"></script>
1615
</head>
1716

1817
<body>
@@ -23,130 +22,131 @@ <h1 style='text-align: center ; font-family: Arial'>
2322
Scroll section
2423
</h1>
2524
</div>
25+
<div id="footer-container"></div>
2626

2727
<script>
28-
const navTree =[
29-
{
30-
href: "/",
31-
text: "Home",
32-
type: "icon-home",
33-
selected: true,
34-
class: "test-class",
35-
},
36-
{
37-
text: "Degree programs",
38-
href: "#",
39-
items: [
40-
[
41-
{
42-
href: "https://www.asu.edu/?feature=newsevents",
43-
text: "Mauris viverra, sem nec",
44-
},
45-
{
46-
href: "https://www.asu.edu/?feature=academics",
47-
text: "Academics",
48-
},
49-
{
50-
href: "https://www.asu.edu/?feature=research",
51-
text: "Research",
52-
},
53-
{
54-
href: "https://www.asu.edu/?feature=athletics",
55-
text: "Athletics",
56-
},
57-
{
58-
href: "https://www.asu.edu/?feature=alumni",
59-
text: "Alumni",
60-
},
61-
{
62-
href: "https://www.asu.edu/?feature=giving",
63-
text: "Giving",
64-
},
65-
{
66-
href: "https://www.asu.edu/?feature=president",
67-
text: "President",
68-
},
69-
{
70-
href: "https://www.asu.edu/about",
71-
text: "About ASU",
72-
},
73-
],
28+
const navTree = [
29+
{
30+
href: "/",
31+
text: "Home",
32+
type: "icon-home",
33+
selected: true,
34+
class: "test-class",
35+
},
36+
{
37+
text: "Degree programs",
38+
href: "#",
39+
items: [
40+
[
41+
{
42+
href: "https://www.asu.edu/?feature=newsevents",
43+
text: "Mauris viverra, sem nec",
44+
},
45+
{
46+
href: "https://www.asu.edu/?feature=academics",
47+
text: "Academics",
48+
},
49+
{
50+
href: "https://www.asu.edu/?feature=research",
51+
text: "Research",
52+
},
53+
{
54+
href: "https://www.asu.edu/?feature=athletics",
55+
text: "Athletics",
56+
},
57+
{
58+
href: "https://www.asu.edu/?feature=alumni",
59+
text: "Alumni",
60+
},
61+
{
62+
href: "https://www.asu.edu/?feature=giving",
63+
text: "Giving",
64+
},
65+
{
66+
href: "https://www.asu.edu/?feature=president",
67+
text: "President",
68+
},
69+
{
70+
href: "https://www.asu.edu/about",
71+
text: "About ASU",
72+
},
7473
],
75-
},
74+
],
75+
},
7676

77-
{
78-
text: "People",
79-
href: "#",
80-
},
81-
{
82-
text: "My ASU",
83-
href: "#",
84-
},
85-
{
86-
text: "Two Column 1",
87-
href: "/",
88-
items: [
89-
[
90-
{
91-
type: "heading",
92-
text: "Column 1",
93-
},
94-
{
95-
href: "https://www.asu.edu/",
96-
text: "Pellentesque ornare",
97-
},
98-
{
99-
href: "https://www.asu.edu/",
100-
text: "Curabitur viverra arcu nisl",
101-
},
102-
{
103-
href: "https://www.asu.edu/?feature=athletics",
104-
text: "Aenean pharetra",
105-
},
106-
{
107-
href: "https://www.asu.edu/?feature=alumni",
108-
text: "Pellentesque",
109-
},
110-
{
111-
href: "https://www.asu.edu/?feature=giving",
112-
text: "Donec sagittis nulla",
113-
},
114-
{
115-
href: "https://www.asu.edu/?feature=president",
116-
text: "Quisque fringilla",
117-
},
118-
{
119-
href: "https://www.asu.edu/about",
120-
text: "Integer vel gravida lectus",
121-
},
122-
],
123-
[
124-
{
125-
href: "https://www.asu.edu/?feature=newsevents",
126-
type: "heading",
127-
text: "Ut quis",
128-
},
129-
{
130-
href: "https://www.asu.edu/?feature=academics",
131-
text: "Nunc in libero odio",
132-
},
133-
{
134-
href: "https://www.asu.edu/?feature=research",
135-
text: "Maecenas quam elit",
136-
},
137-
{
138-
href: "https://www.asu.edu/?feature=academics",
139-
text: "Ut at vehicula neque",
140-
},
141-
{
142-
href: "https://www.asu.edu/?feature=athletics",
143-
type: "button",
144-
text: "Sed molestie",
145-
},
146-
],
77+
{
78+
text: "People",
79+
href: "#",
80+
},
81+
{
82+
text: "My ASU",
83+
href: "#",
84+
},
85+
{
86+
text: "Two Column 1",
87+
href: "/",
88+
items: [
89+
[
90+
{
91+
type: "heading",
92+
text: "Column 1",
93+
},
94+
{
95+
href: "https://www.asu.edu/",
96+
text: "Pellentesque ornare",
97+
},
98+
{
99+
href: "https://www.asu.edu/",
100+
text: "Curabitur viverra arcu nisl",
101+
},
102+
{
103+
href: "https://www.asu.edu/?feature=athletics",
104+
text: "Aenean pharetra",
105+
},
106+
{
107+
href: "https://www.asu.edu/?feature=alumni",
108+
text: "Pellentesque",
109+
},
110+
{
111+
href: "https://www.asu.edu/?feature=giving",
112+
text: "Donec sagittis nulla",
113+
},
114+
{
115+
href: "https://www.asu.edu/?feature=president",
116+
text: "Quisque fringilla",
117+
},
118+
{
119+
href: "https://www.asu.edu/about",
120+
text: "Integer vel gravida lectus",
121+
},
147122
],
148-
},
149-
{
123+
[
124+
{
125+
href: "https://www.asu.edu/?feature=newsevents",
126+
type: "heading",
127+
text: "Ut quis",
128+
},
129+
{
130+
href: "https://www.asu.edu/?feature=academics",
131+
text: "Nunc in libero odio",
132+
},
133+
{
134+
href: "https://www.asu.edu/?feature=research",
135+
text: "Maecenas quam elit",
136+
},
137+
{
138+
href: "https://www.asu.edu/?feature=academics",
139+
text: "Ut at vehicula neque",
140+
},
141+
{
142+
href: "https://www.asu.edu/?feature=athletics",
143+
type: "button",
144+
text: "Sed molestie",
145+
},
146+
],
147+
],
148+
},
149+
{
150150
text: "Mega Menu (5 Col)",
151151
href: "#",
152152
buttons: [
@@ -310,7 +310,7 @@ <h1 style='text-align: center ; font-family: Arial'>
310310
],
311311
},
312312
];
313-
AsuHeader.initGlobalHeader({
313+
AsuHeaderFooter.initGlobalHeader({
314314
targetSelector: "#header-container",
315315
props: {
316316
loggedIn: false,
@@ -338,7 +338,60 @@ <h1 style='text-align: center ; font-family: Arial'>
338338
site: "subdomain",
339339
},
340340
});
341+
AsuHeaderFooter.initASUFooter({
342+
targetSelector: "#footer-container",
343+
props: {
344+
social: {
345+
logoUrl: "https://asu.github.io/asu-unity-stack/@asu/component-header-footer/assets/endorsedLogo-DPPmUtP1.png",
346+
unitLogo: "https://asu.github.io/asu-unity-stack/@asu/component-header-footer/assets/endorsedLogo-DPPmUtP1.png",
347+
mediaLinks: {
348+
facebook: "https://facebook.com",
349+
twitter: "https://twitter.com/?lang=en",
350+
instagram: "https://instagram.com",
351+
linkedIn: "https://www.linkedin.com/",
352+
youtube: "https://www.youtube.com/",
353+
},
354+
},
355+
contact: {
356+
title: "Complete Name of College, School or Unit Title Should Go Here",
357+
contactLink: "#",
358+
contributionLink: "#",
359+
columns: [
360+
{
361+
title: "Column One",
362+
links: [
363+
{
364+
url: "#",
365+
title: "link",
366+
text: "Biological and Health Systems Computing",
367+
},
368+
{
369+
url: "#",
370+
title: "link",
371+
text: "Informatics and Decision Systems Electrical",
372+
},
373+
{
374+
url: "#",
375+
title: "link",
376+
text: "Computer and Energy Matter",
377+
},
378+
{
379+
url: "#",
380+
title: "link",
381+
text: "Transport and Energy Sustainability and the Built Environment",
382+
},
383+
{
384+
url: "#",
385+
title: "link",
386+
text: "The Polytechnic School",
387+
},
388+
],
389+
},
390+
],
391+
}
392+
},
393+
});
341394
</script>
342-
</body>
395+
</body>
343396

344397
</html>

0 commit comments

Comments
 (0)