umwd-components 0.1.123 → 0.1.126

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/cjs/components/Page.js +9 -9
  2. package/dist/cjs/components/ScrollLink.js +2 -0
  3. package/dist/cjs/components/ScrollNavbar.js +22 -31
  4. package/dist/esm/components/Page.js +9 -9
  5. package/dist/esm/components/ScrollLink.js +2 -0
  6. package/dist/esm/components/ScrollNavbar.js +23 -32
  7. package/package.json +1 -1
  8. package/src/app/page.js +16 -16
  9. package/src/components/Page.js +9 -9
  10. package/src/components/ScrollLink.tsx +2 -0
  11. package/src/components/ScrollNavbar.tsx +27 -39
  12. package/src/components/custom/Footer.tsx +5 -1
  13. package/src/stories/ScrollNavbar.stories.js +0 -3
  14. package/src/stories/Stack.stories.js +1 -0
package/dist/cjs/components/Page.js CHANGED
@@ -21,46 +21,46 @@ var material = require('@mui/material');
21
21
  var ContactForm = require('./ContactForm.js');
22
22
  var PersonaliaSection = require('./PersonaliaSection.js');
23
23
 
24
- function blockRenderer(block) {
24
+ function blockRenderer(block, index) {
25
25
  switch (block.__component) {
26
26
  case "layout.hero-section":
27
27
  return /*#__PURE__*/React.createElement(HeroSection.HeroSection, {
28
- key: block.id,
28
+ key: index,
29
29
  data: block
30
30
  });
31
31
  case "layout.features-section":
32
32
  return /*#__PURE__*/React.createElement(FeaturesSection.FeatureSection, {
33
- key: block.id,
33
+ key: index,
34
34
  data: block
35
35
  });
36
36
  case "layout.contact-section":
37
37
  return /*#__PURE__*/React.createElement(ContactForm.default, {
38
- key: block.id,
38
+ key: index,
39
39
  data: block
40
40
  });
41
41
  case "layout.text-image-section":
42
42
  return /*#__PURE__*/React.createElement(TextImageSection.default, {
43
- key: block.id,
43
+ key: index,
44
44
  data: block
45
45
  });
46
46
  case "layout.icon-section":
47
47
  return /*#__PURE__*/React.createElement(IconSection.IconSection, {
48
- key: block.id,
48
+ key: index,
49
49
  data: block
50
50
  });
51
51
  case "layout.fleet-section":
52
52
  return /*#__PURE__*/React.createElement(FleetSection.FleetSection, {
53
- key: block.id,
53
+ key: index,
54
54
  data: block
55
55
  });
56
56
  case "layout.columns-section":
57
57
  return /*#__PURE__*/React.createElement(ColumnsSection.ColumnsSection, {
58
- key: block.id,
58
+ key: index,
59
59
  data: block
60
60
  });
61
61
  case "layout.personalia-section":
62
62
  return /*#__PURE__*/React.createElement(PersonaliaSection.PersonaliaSection, {
63
- key: block.id,
63
+ key: index,
64
64
  data: block
65
65
  });
66
66
  default:
package/dist/cjs/components/ScrollLink.js CHANGED
@@ -25,7 +25,9 @@ const ScrollLink = _ref => {
25
25
  e.preventDefault();
26
26
  //remove everything before the hash
27
27
  const targetId = e.currentTarget.href.replace(/.*\#/, "");
28
+ console.log("targetId", targetId);
28
29
  const elem = document.getElementById(targetId);
30
+ console.log("elem", elem);
29
31
  window.scrollTo({
30
32
  top: elem === null || elem === void 0 ? void 0 : elem.getBoundingClientRect().top,
31
33
  behavior: "smooth"
package/dist/cjs/components/ScrollNavbar.js CHANGED
@@ -20,7 +20,6 @@ var ScrollLink = require('./ScrollLink.js');
20
20
  /* TODO: combine these, and use conf/setting to manipulate how to display */
21
21
 
22
22
  function ScrollNavbar(_ref) {
23
- var _tabs$;
24
23
  let {
25
24
  data
26
25
  } = _ref;
@@ -33,19 +32,13 @@ function ScrollNavbar(_ref) {
33
32
  minHeight
34
33
  } = data;
35
34
  const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
36
- const [currentTab, setCurrentTab] = React.useState(tabs ? (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.name : "");
35
+ const [currentTab, setCurrentTab] = React.useState(0);
37
36
  const handleOpenMobileMenu = () => {
38
37
  setMobileNavOpen(true);
39
38
  };
40
39
  const handleCloseMobileMenu = () => {
41
40
  setMobileNavOpen(false);
42
41
  };
43
-
44
- /* const router = useRouter(); */
45
-
46
- const handleChange = (event, newValue) => {
47
- setCurrentTab(newValue);
48
- };
49
42
  const theme = material.useTheme();
50
43
  return /*#__PURE__*/React.createElement(material.AppBar, {
51
44
  position: "sticky",
@@ -63,7 +56,7 @@ function ScrollNavbar(_ref) {
63
56
  }
64
57
  }
65
58
  }, /*#__PURE__*/React.createElement(ScrollLink.default, {
66
- href: "home"
59
+ href: "#home"
67
60
  }, /*#__PURE__*/React.createElement(material.Box, {
68
61
  sx: {
69
62
  display: {
@@ -73,7 +66,7 @@ function ScrollNavbar(_ref) {
73
66
  cursor: "pointer",
74
67
  alignItems: "center"
75
68
  }
76
- }, /*#__PURE__*/React.createElement(Image, {
69
+ }, logo.url !== undefined && /*#__PURE__*/React.createElement(Image, {
77
70
  src: logo.url,
78
71
  width: logo.width,
79
72
  height: logo.height,
@@ -106,11 +99,8 @@ function ScrollNavbar(_ref) {
106
99
  }, pages.map(page => {
107
100
  return /*#__PURE__*/React.createElement(ScrollLink.default, {
108
101
  key: page.name,
109
- href: page.slug
110
- }, /*#__PURE__*/React.createElement(material.Button
111
- /* onClick={() => {
112
- router.push(page.url);
113
- }} */, {
102
+ href: "#".concat(page.slug)
103
+ }, /*#__PURE__*/React.createElement(material.Button, {
114
104
  sx: {
115
105
  my: 2,
116
106
  color: "primary.contrastText",
@@ -127,25 +117,25 @@ function ScrollNavbar(_ref) {
127
117
  }
128
118
  }, /*#__PURE__*/React.createElement(material.Tabs, {
129
119
  value: currentTab,
130
- onChange: (event, newValue) => handleChange(event, newValue),
131
120
  "aria-label": "wrapped label tabs example",
132
121
  textColor: "secondary",
133
122
  indicatorColor: "secondary",
134
123
  variant: "fullWidth"
135
- }, tabs.length > 0 && tabs.map(tab => {
136
- return /*#__PURE__*/React.createElement(ScrollLink.default, {
124
+ }, tabs.length > 0 && tabs.map((tab, index) => {
125
+ return /*#__PURE__*/React.createElement(material.Box, {
137
126
  key: tab.name,
138
- href: tab.slug
127
+ onClick: e => setCurrentTab(index)
128
+ }, /*#__PURE__*/React.createElement(ScrollLink.default, {
129
+ key: tab.name,
130
+ href: "#".concat(tab.slug),
131
+ style: {
132
+ display: "block",
133
+ height: "100%"
134
+ }
139
135
  }, /*#__PURE__*/React.createElement(material.Tab, {
140
- value: tab.name,
136
+ value: index,
141
137
  label: tab.name
142
- /* onClick={() => {
143
- router.push(tab.url);
144
- }} */,
145
- sx: {
146
- p: 1
147
- }
148
- }));
138
+ })));
149
139
  }))), /*#__PURE__*/React.createElement(Link, {
150
140
  href: "/",
151
141
  style: {
@@ -160,7 +150,7 @@ function ScrollNavbar(_ref) {
160
150
  },
161
151
  alignItems: "center"
162
152
  }
163
- }, logo.url !== undefined && /*#__PURE__*/React.createElement(material.Box, {
153
+ }, (logo === null || logo === void 0 ? void 0 : logo.url) !== undefined && /*#__PURE__*/React.createElement(material.Box, {
164
154
  sx: {
165
155
  display: "flex",
166
156
  mr: 1
@@ -278,9 +268,10 @@ function ScrollNavbar(_ref) {
278
268
  color: "primary.contrastText"
279
269
  }
280
270
  }))))), pages && pages.length > 0 && /*#__PURE__*/React.createElement(material.List, null, pages.map(page => {
281
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScrollLink.default, {
282
- key: page.name,
283
- href: page.slug
271
+ return /*#__PURE__*/React.createElement(React.Fragment, {
272
+ key: page.name
273
+ }, /*#__PURE__*/React.createElement(ScrollLink.default, {
274
+ href: "#".concat(page.slug)
284
275
  }, /*#__PURE__*/React.createElement(material.ListItem
285
276
  /* onClick={() => {
286
277
  router.push(page.url);
package/dist/esm/components/Page.js CHANGED
@@ -17,46 +17,46 @@ import { Box } from '@mui/material';
17
17
  import ContactForm from './ContactForm.js';
18
18
  import { PersonaliaSection } from './PersonaliaSection.js';
19
19
 
20
- function blockRenderer(block) {
20
+ function blockRenderer(block, index) {
21
21
  switch (block.__component) {
22
22
  case "layout.hero-section":
23
23
  return /*#__PURE__*/React__default.createElement(HeroSection, {
24
- key: block.id,
24
+ key: index,
25
25
  data: block
26
26
  });
27
27
  case "layout.features-section":
28
28
  return /*#__PURE__*/React__default.createElement(FeatureSection, {
29
- key: block.id,
29
+ key: index,
30
30
  data: block
31
31
  });
32
32
  case "layout.contact-section":
33
33
  return /*#__PURE__*/React__default.createElement(ContactForm, {
34
- key: block.id,
34
+ key: index,
35
35
  data: block
36
36
  });
37
37
  case "layout.text-image-section":
38
38
  return /*#__PURE__*/React__default.createElement(TextImageSection, {
39
- key: block.id,
39
+ key: index,
40
40
  data: block
41
41
  });
42
42
  case "layout.icon-section":
43
43
  return /*#__PURE__*/React__default.createElement(IconSection, {
44
- key: block.id,
44
+ key: index,
45
45
  data: block
46
46
  });
47
47
  case "layout.fleet-section":
48
48
  return /*#__PURE__*/React__default.createElement(FleetSection, {
49
- key: block.id,
49
+ key: index,
50
50
  data: block
51
51
  });
52
52
  case "layout.columns-section":
53
53
  return /*#__PURE__*/React__default.createElement(ColumnsSection, {
54
- key: block.id,
54
+ key: index,
55
55
  data: block
56
56
  });
57
57
  case "layout.personalia-section":
58
58
  return /*#__PURE__*/React__default.createElement(PersonaliaSection, {
59
- key: block.id,
59
+ key: index,
60
60
  data: block
61
61
  });
62
62
  default:
package/dist/esm/components/ScrollLink.js CHANGED
@@ -21,7 +21,9 @@ const ScrollLink = _ref => {
21
21
  e.preventDefault();
22
22
  //remove everything before the hash
23
23
  const targetId = e.currentTarget.href.replace(/.*\#/, "");
24
+ console.log("targetId", targetId);
24
25
  const elem = document.getElementById(targetId);
26
+ console.log("elem", elem);
25
27
  window.scrollTo({
26
28
  top: elem === null || elem === void 0 ? void 0 : elem.getBoundingClientRect().top,
27
29
  behavior: "smooth"
package/dist/esm/components/ScrollNavbar.js CHANGED
@@ -5,7 +5,7 @@
5
5
  * @license MIT
6
6
  */
7
7
 
8
- import React__default, { useState } from 'react';
8
+ import React__default, { useState, Fragment } from 'react';
9
9
  import Link from 'next/link';
10
10
  import Image from 'next/image';
11
11
  import { useTheme, AppBar, Container, Toolbar, Box, Typography, Button, Tabs, Tab, Dialog, List, ListItem, ListItemText, Divider } from '@mui/material';
@@ -16,7 +16,6 @@ import ScrollLink from './ScrollLink.js';
16
16
  /* TODO: combine these, and use conf/setting to manipulate how to display */
17
17
 
18
18
  function ScrollNavbar(_ref) {
19
- var _tabs$;
20
19
  let {
21
20
  data
22
21
  } = _ref;
@@ -29,19 +28,13 @@ function ScrollNavbar(_ref) {
29
28
  minHeight
30
29
  } = data;
31
30
  const [mobileNavOpen, setMobileNavOpen] = useState(false);
32
- const [currentTab, setCurrentTab] = useState(tabs ? (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.name : "");
31
+ const [currentTab, setCurrentTab] = useState(0);
33
32
  const handleOpenMobileMenu = () => {
34
33
  setMobileNavOpen(true);
35
34
  };
36
35
  const handleCloseMobileMenu = () => {
37
36
  setMobileNavOpen(false);
38
37
  };
39
-
40
- /* const router = useRouter(); */
41
-
42
- const handleChange = (event, newValue) => {
43
- setCurrentTab(newValue);
44
- };
45
38
  const theme = useTheme();
46
39
  return /*#__PURE__*/React__default.createElement(AppBar, {
47
40
  position: "sticky",
@@ -59,7 +52,7 @@ function ScrollNavbar(_ref) {
59
52
  }
60
53
  }
61
54
  }, /*#__PURE__*/React__default.createElement(ScrollLink, {
62
- href: "home"
55
+ href: "#home"
63
56
  }, /*#__PURE__*/React__default.createElement(Box, {
64
57
  sx: {
65
58
  display: {
@@ -69,7 +62,7 @@ function ScrollNavbar(_ref) {
69
62
  cursor: "pointer",
70
63
  alignItems: "center"
71
64
  }
72
- }, /*#__PURE__*/React__default.createElement(Image, {
65
+ }, logo.url !== undefined && /*#__PURE__*/React__default.createElement(Image, {
73
66
  src: logo.url,
74
67
  width: logo.width,
75
68
  height: logo.height,
@@ -102,11 +95,8 @@ function ScrollNavbar(_ref) {
102
95
  }, pages.map(page => {
103
96
  return /*#__PURE__*/React__default.createElement(ScrollLink, {
104
97
  key: page.name,
105
- href: page.slug
106
- }, /*#__PURE__*/React__default.createElement(Button
107
- /* onClick={() => {
108
- router.push(page.url);
109
- }} */, {
98
+ href: "#".concat(page.slug)
99
+ }, /*#__PURE__*/React__default.createElement(Button, {
110
100
  sx: {
111
101
  my: 2,
112
102
  color: "primary.contrastText",
@@ -123,25 +113,25 @@ function ScrollNavbar(_ref) {
123
113
  }
124
114
  }, /*#__PURE__*/React__default.createElement(Tabs, {
125
115
  value: currentTab,
126
- onChange: (event, newValue) => handleChange(event, newValue),
127
116
  "aria-label": "wrapped label tabs example",
128
117
  textColor: "secondary",
129
118
  indicatorColor: "secondary",
130
119
  variant: "fullWidth"
131
- }, tabs.length > 0 && tabs.map(tab => {
132
- return /*#__PURE__*/React__default.createElement(ScrollLink, {
120
+ }, tabs.length > 0 && tabs.map((tab, index) => {
121
+ return /*#__PURE__*/React__default.createElement(Box, {
133
122
  key: tab.name,
134
- href: tab.slug
123
+ onClick: e => setCurrentTab(index)
124
+ }, /*#__PURE__*/React__default.createElement(ScrollLink, {
125
+ key: tab.name,
126
+ href: "#".concat(tab.slug),
127
+ style: {
128
+ display: "block",
129
+ height: "100%"
130
+ }
135
131
  }, /*#__PURE__*/React__default.createElement(Tab, {
136
- value: tab.name,
132
+ value: index,
137
133
  label: tab.name
138
- /* onClick={() => {
139
- router.push(tab.url);
140
- }} */,
141
- sx: {
142
- p: 1
143
- }
144
- }));
134
+ })));
145
135
  }))), /*#__PURE__*/React__default.createElement(Link, {
146
136
  href: "/",
147
137
  style: {
@@ -156,7 +146,7 @@ function ScrollNavbar(_ref) {
156
146
  },
157
147
  alignItems: "center"
158
148
  }
159
- }, logo.url !== undefined && /*#__PURE__*/React__default.createElement(Box, {
149
+ }, (logo === null || logo === void 0 ? void 0 : logo.url) !== undefined && /*#__PURE__*/React__default.createElement(Box, {
160
150
  sx: {
161
151
  display: "flex",
162
152
  mr: 1
@@ -274,9 +264,10 @@ function ScrollNavbar(_ref) {
274
264
  color: "primary.contrastText"
275
265
  }
276
266
  }))))), pages && pages.length > 0 && /*#__PURE__*/React__default.createElement(List, null, pages.map(page => {
277
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ScrollLink, {
278
- key: page.name,
279
- href: page.slug
267
+ return /*#__PURE__*/React__default.createElement(Fragment, {
268
+ key: page.name
269
+ }, /*#__PURE__*/React__default.createElement(ScrollLink, {
270
+ href: "#".concat(page.slug)
280
271
  }, /*#__PURE__*/React__default.createElement(ListItem
281
272
  /* onClick={() => {
282
273
  router.push(page.url);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.123",
3
+ "version": "0.1.126",
4
4
  "description": "UMWD Component library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
package/src/app/page.js CHANGED
@@ -11,7 +11,7 @@ export default async function Home() {
11
11
  {/* TODO, create and extract BGcomponent */}
12
12
  {/* <Box sx={{}}> */}
13
13
 
14
- {pages &&
14
+ {/* {pages &&
15
15
  pages.data.length > 0 &&
16
16
  pages.data.map((page) => {
17
17
  console.dir(page, { depth: 10 });
@@ -56,20 +56,20 @@ export default async function Home() {
56
56
 
57
57
  return (
58
58
  <Fragment key={page.id}>
59
- {/* <Image
60
- alt="Background"
61
- style={{
62
- position: "fixed",
63
- inset: 0,
64
- objectFit: "cover",
65
- width: "100%",
66
- height: "100%",
67
- zIndex: -1,
68
- }}
69
- height={darkBG.height || 1080}
70
- src={darkBG.src}
71
- width={darkBG.width || 1920}
72
- /> */}
59
+ //<Image
60
+ // alt="Background"
61
+ // style={{
62
+ // position: "fixed",
63
+ // inset: 0,
64
+ // objectFit: "cover",
65
+ // width: "100%",
66
+ // height: "100%",
67
+ // zIndex: -1,
68
+ // }}
69
+ // height={darkBG.height || 1080}
70
+ // src={darkBG.src}
71
+ // width={darkBG.width || 1920}
72
+ ///>
73
73
  {page.title !== "HOME" && (
74
74
  <Container maxWidth="lg">
75
75
  <Typography
@@ -93,7 +93,7 @@ export default async function Home() {
93
93
  />
94
94
  </Fragment>
95
95
  );
96
- })}
96
+ })} */}
97
97
  </main>
98
98
  );
99
99
  }
package/src/components/Page.js CHANGED
@@ -12,24 +12,24 @@ import { Box } from "@mui/material";
12
12
  import ContactForm from "./ContactForm.tsx";
13
13
  import { PersonaliaSection } from "./PersonaliaSection.tsx";
14
14
 
15
- function blockRenderer(block) {
15
+ function blockRenderer(block, index) {
16
16
  switch (block.__component) {
17
17
  case "layout.hero-section":
18
- return <HeroSection key={block.id} data={block} />;
18
+ return <HeroSection key={index} data={block} />;
19
19
  case "layout.features-section":
20
- return <FeatureSection key={block.id} data={block} />;
20
+ return <FeatureSection key={index} data={block} />;
21
21
  case "layout.contact-section":
22
- return <ContactForm key={block.id} data={block} />;
22
+ return <ContactForm key={index} data={block} />;
23
23
  case "layout.text-image-section":
24
- return <TextImageSection key={block.id} data={block} />;
24
+ return <TextImageSection key={index} data={block} />;
25
25
  case "layout.icon-section":
26
- return <IconSection key={block.id} data={block} />;
26
+ return <IconSection key={index} data={block} />;
27
27
  case "layout.fleet-section":
28
- return <FleetSection key={block.id} data={block} />;
28
+ return <FleetSection key={index} data={block} />;
29
29
  case "layout.columns-section":
30
- return <ColumnsSection key={block.id} data={block} />;
30
+ return <ColumnsSection key={index} data={block} />;
31
31
  case "layout.personalia-section":
32
- return <PersonaliaSection key={block.id} data={block} />;
32
+ return <PersonaliaSection key={index} data={block} />;
33
33
 
34
34
  default:
35
35
  return null;
package/src/components/ScrollLink.tsx CHANGED
@@ -15,7 +15,9 @@ const ScrollLink = ({ children, ...props }: ScrollLinkProps) => {
15
15
  e.preventDefault();
16
16
  //remove everything before the hash
17
17
  const targetId = e.currentTarget.href.replace(/.*\#/, "");
18
+ console.log("targetId", targetId);
18
19
  const elem = document.getElementById(targetId);
20
+ console.log("elem", elem);
19
21
  window.scrollTo({
20
22
  top: elem?.getBoundingClientRect().top,
21
23
  behavior: "smooth",
package/src/components/ScrollNavbar.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  "use client";
2
2
 
3
- import React, { useState } from "react";
3
+ import React, { Fragment, useState } from "react";
4
4
  import Link from "next/link";
5
5
  import Image from "next/image";
6
6
  import {
@@ -21,7 +21,6 @@ import {
21
21
  } from "@mui/material";
22
22
  import CloseIcon from "@mui/icons-material/Close";
23
23
  import MoreVertIcon from "@mui/icons-material/MoreVert";
24
- /* import { useRouter } from "next/router"; */
25
24
  import ScrollLink from "./ScrollLink.tsx";
26
25
 
27
26
  interface ImageProps {
@@ -61,7 +60,7 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
61
60
  const { site_title, logo, pages, tabs, maxWidth, minHeight } = data;
62
61
 
63
62
  const [mobileNavOpen, setMobileNavOpen] = useState(false);
64
- const [currentTab, setCurrentTab] = useState(tabs ? tabs[0]?.name : "");
63
+ const [currentTab, setCurrentTab] = useState(0);
65
64
 
66
65
  const handleOpenMobileMenu = () => {
67
66
  setMobileNavOpen(true);
@@ -71,12 +70,6 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
71
70
  setMobileNavOpen(false);
72
71
  };
73
72
 
74
- /* const router = useRouter(); */
75
-
76
- const handleChange = (event: React.SyntheticEvent, newValue: string) => {
77
- setCurrentTab(newValue);
78
- };
79
-
80
73
  const theme = useTheme();
81
74
 
82
75
  return (
@@ -95,8 +88,7 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
95
88
  }}
96
89
  >
97
90
  {/* logo and site title for big screens */}
98
- {/* <Link href="/" style={{ textDecoration: "none", color: "unset" }}> */}
99
- <ScrollLink href={"home"}>
91
+ <ScrollLink href={`#home`}>
100
92
  <Box
101
93
  sx={{
102
94
  display: { xs: "none", md: "flex" },
@@ -104,13 +96,15 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
104
96
  alignItems: "center",
105
97
  }}
106
98
  >
107
- <Image
108
- src={logo.url}
109
- width={logo.width}
110
- height={logo.height}
111
- alt={logo.alternativeText || "site logo"}
112
- style={{ maxHeight: "50px" }}
113
- />
99
+ {logo.url !== undefined && (
100
+ <Image
101
+ src={logo.url}
102
+ width={logo.width}
103
+ height={logo.height}
104
+ alt={logo.alternativeText || "site logo"}
105
+ style={{ maxHeight: "50px" }}
106
+ />
107
+ )}
114
108
  {site_title !== undefined && (
115
109
  <Typography
116
110
  variant="h6"
@@ -126,7 +120,6 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
126
120
  )}
127
121
  </Box>
128
122
  </ScrollLink>
129
- {/* </Link> */}
130
123
 
131
124
  <Box sx={{ display: "block", width: "30px" }}></Box>
132
125
 
@@ -141,11 +134,8 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
141
134
  >
142
135
  {pages.map((page: Page) => {
143
136
  return (
144
- <ScrollLink key={page.name} href={page.slug}>
137
+ <ScrollLink key={page.name} href={`#${page.slug}`}>
145
138
  <Button
146
- /* onClick={() => {
147
- router.push(page.url);
148
- }} */
149
139
  sx={{
150
140
  my: 2,
151
141
  color: "primary.contrastText",
@@ -170,25 +160,23 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
170
160
  >
171
161
  <Tabs
172
162
  value={currentTab}
173
- onChange={(event, newValue) => handleChange(event, newValue)}
174
163
  aria-label="wrapped label tabs example"
175
164
  textColor="secondary"
176
165
  indicatorColor="secondary"
177
166
  variant="fullWidth"
178
167
  >
179
168
  {tabs.length > 0 &&
180
- tabs.map((tab: TabInfo) => {
169
+ tabs.map((tab: TabInfo, index: number) => {
181
170
  return (
182
- <ScrollLink key={tab.name} href={tab.slug}>
183
- <Tab
184
- value={tab.name}
185
- label={tab.name}
186
- /* onClick={() => {
187
- router.push(tab.url);
188
- }} */
189
- sx={{ p: 1 }}
190
- />
191
- </ScrollLink>
171
+ <Box key={tab.name} onClick={(e) => setCurrentTab(index)}>
172
+ <ScrollLink
173
+ key={tab.name}
174
+ href={`#${tab.slug}`}
175
+ style={{ display: "block", height: "100%" }}
176
+ >
177
+ <Tab value={index} label={tab.name} />
178
+ </ScrollLink>
179
+ </Box>
192
180
  );
193
181
  })}
194
182
  </Tabs>
@@ -200,7 +188,7 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
200
188
  <Box
201
189
  sx={{ display: { xs: "flex", md: "none" }, alignItems: "center" }}
202
190
  >
203
- {logo.url !== undefined && (
191
+ {logo?.url !== undefined && (
204
192
  <Box sx={{ display: "flex", mr: 1 }}>
205
193
  <img
206
194
  src={logo.url}
@@ -314,8 +302,8 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
314
302
  <List>
315
303
  {pages.map((page: Page) => {
316
304
  return (
317
- <>
318
- <ScrollLink key={page.name} href={page.slug}>
305
+ <Fragment key={page.name}>
306
+ <ScrollLink href={`#${page.slug}`}>
319
307
  <ListItem
320
308
  /* onClick={() => {
321
309
  router.push(page.url);
@@ -326,7 +314,7 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
326
314
  </ListItem>
327
315
  </ScrollLink>
328
316
  <Divider />
329
- </>
317
+ </Fragment>
330
318
  );
331
319
  })}
332
320
  </List>
package/src/components/custom/Footer.tsx CHANGED
@@ -37,7 +37,11 @@ export function Footer({ data }: Readonly<FooterProps>) {
37
37
  <div className="flex items-center space-x-4">
38
38
  {socialLink.map((link) => {
39
39
  return (
40
- <Link className="text-white hover:text-gray-300" href={link.url}>
40
+ <Link
41
+ className="text-white hover:text-gray-300"
42
+ href={link.url}
43
+ key={link.id}
44
+ >
41
45
  {selectSocialIcon(link.url)}
42
46
  <span className="sr-only">Visit us at {link.text}</span>
43
47
  </Link>
package/src/stories/ScrollNavbar.stories.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import ScrollNavbar from "../components/ScrollNavbar.tsx";
2
2
  import React from "react";
3
- import thumbnail from "../../public/placeholders/thumbnail_100X100.png";
4
3
  import logoText from "../../public/logo_text.png";
5
4
 
6
5
  export default {
@@ -9,8 +8,6 @@ export default {
9
8
  };
10
9
 
11
10
  const Template = ({ ...args }) => {
12
- console.log(thumbnail);
13
-
14
11
  return <ScrollNavbar {...args} />;
15
12
  };
16
13
 
package/src/stories/Stack.stories.js CHANGED
@@ -10,6 +10,7 @@ const Template = ({ numberOfChildren, ...args }) => (
10
10
  <Stack {...args}>
11
11
  {[...Array(numberOfChildren).keys()].map((n) => (
12
12
  <div
13
+ key={n}
13
14
  style={{
14
15
  width: "50px",
15
16
  height: "50px",