Skip to content

Commit ccc5f31

Browse files
Matthew Wilcoxsonakademy
Matthew Wilcoxson
authored and
akademy
committed
On Footer, fix movement on hover when only links. Add ability to centre links. Align links with copyright.
Make alignment easier in Storyboard view by adding transparent color.
1 parent bc4b1aa commit ccc5f31

File tree

4 files changed

+95
-57
lines changed

4 files changed

+95
-57
lines changed

‎.storybook/ThemeSwapper.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const ThemeSwapper = ({ context, children }: ThemeSwapperProps) => {
2929
}, [context.globals.themeMode]);
3030

3131
return (
32-
<div style={{ backgroundColor: mode === "light" ? "#fafafa" : "#050505" }}>
32+
<div style={{ backgroundColor: mode === "light" ? "#fafafaaa" : "#000a" }}>
3333
{children}
3434
</div>
3535
);

‎changelog.md‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,19 @@
1-
Changelog
2-
=========
1+
SciReactUI Changelog
2+
====================
33

4-
[0.0.3] - 2024-01-27
4+
[vNext] - date
5+
--------------------
6+
7+
### Fixed
8+
- Stopped flicker between themes when starting an app in dark mode.
9+
- Footer links stopped from moving on hover when only showing links.
10+
- Footer links now correctly center horizontally.
11+
12+
### Changed
13+
- Footer links now align with copyright when there is no logo.
14+
15+
16+
[v0.0.3] - 2024-01-27
517
--------------------
618

719
### Fixed
@@ -11,14 +23,14 @@ Changelog
1123
- Return key now submits VisitInput (but that can be turned off).
1224

1325

14-
[0.0.2] - 2024-01-20
26+
[v0.0.2] - 2024-01-20
1527
--------------------
1628

1729
### Fixed
1830
- Not importing correctly in some external projects.
1931

2032

21-
[0.0.1] - 2024-12-19
33+
[v0.0.1] - 2024-12-19
2234
--------------------
2335
### Added
2436
- Components added:

‎src/components/Footer.stories.tsx‎

Lines changed: 42 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -11,26 +11,28 @@ const meta: Meta<typeof Footer> = {
1111
export default meta;
1212
type Story = StoryObj<typeof meta>;
1313

14+
const footerLinks = [
15+
<FooterLinks key="footer-links">
16+
<FooterLink href="#TheMoon" key="the-moon">
17+
The Moon
18+
</FooterLink>
19+
<FooterLink href="#Phobos" key="phobos">
20+
Phobos
21+
</FooterLink>
22+
<FooterLink href="#Ganymede" key="ganymede">
23+
Ganymede
24+
</FooterLink>
25+
<FooterLink href="#Titan" key="titan">
26+
Titan
27+
</FooterLink>
28+
</FooterLinks>,
29+
];
30+
1431
export const All: Story = {
1532
args: {
1633
logo: "theme",
1734
copyright: "Company",
18-
children: [
19-
<FooterLinks key="footer-links">
20-
<FooterLink href="#TheMoon" key="the-moon">
21-
The Moon
22-
</FooterLink>
23-
<FooterLink href="#Phobos" key="phobos">
24-
Phobos
25-
</FooterLink>
26-
<FooterLink href="#Ganymede" key="ganymede">
27-
Ganymede
28-
</FooterLink>
29-
<FooterLink href="#Titan" key="titan">
30-
Titan
31-
</FooterLink>
32-
</FooterLinks>,
33-
],
35+
children: footerLinks,
3436
},
3537
};
3638

@@ -54,31 +56,40 @@ export const CopyrightAndLogo: Story = {
5456
},
5557
};
5658

57-
export const WithOneLink: Story = {
59+
export const LinksAndCopyright: Story = {
5860
args: {
5961
copyright: "Company",
60-
children: [
61-
<FooterLinks key="footer-links">
62-
<FooterLink href="#" key="first-footer-link">
63-
Link one
64-
</FooterLink>
65-
</FooterLinks>,
66-
],
62+
children: footerLinks,
6763
},
6864
};
6965

70-
export const WithTwoLinks: Story = {
66+
export const LinksOnly: Story = {
67+
args: {
68+
children: footerLinks,
69+
},
70+
};
71+
72+
export const LinksOnlyCentred: Story = {
7173
args: {
72-
copyright: "Company",
7374
children: [
74-
<FooterLinks key="footer-links">
75-
<FooterLink href="#" key="first-footer-link">
76-
Link one
75+
<FooterLinks
76+
key="footer-links"
77+
style={{ float: "unset", textAlign: "center" }}
78+
>
79+
<FooterLink href="#TheMoon" key="the-moon">
80+
The Moon
7781
</FooterLink>
78-
<FooterLink href="#" key="second-footer-link">
79-
Link two
82+
<FooterLink href="#Phobos" key="phobos">
83+
Phobos
84+
</FooterLink>
85+
<FooterLink href="#Ganymede" key="ganymede">
86+
Ganymede
87+
</FooterLink>
88+
<FooterLink href="#Titan" key="titan">
89+
Titan
8090
</FooterLink>
8191
</FooterLinks>,
8292
],
8393
},
8494
};
95+
LinksOnlyCentred.storyName = "Links Only, Centred";

‎src/components/Footer.tsx‎

Lines changed: 35 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
ImageColorSchemeSwitchType,
88
} from "./ImageColorSchemeSwitch";
99

10-
interface FooterLinksProps {
10+
interface FooterLinksProps extends React.HTMLProps<HTMLDivElement> {
1111
children: React.ReactElement<LinkProps> | React.ReactElement<LinkProps>[];
1212
}
1313

@@ -18,7 +18,7 @@ interface FooterProps extends React.HTMLProps<HTMLDivElement> {
1818
children?: React.ReactElement | React.ReactElement[];
1919
}
2020

21-
const FooterLinks = ({ children }: FooterLinksProps) => {
21+
const FooterLinks = ({ children, ...props }: FooterLinksProps) => {
2222
return (
2323
<div
2424
style={{
@@ -29,6 +29,7 @@ const FooterLinks = ({ children }: FooterLinksProps) => {
2929
display: "flex",
3030
flexWrap: "wrap",
3131
}}
32+
{...props}
3233
>
3334
{children}
3435
</div>
@@ -48,7 +49,11 @@ const FooterLink = ({ children, ...props }: LinkProps) => {
4849
textDecoration: "none",
4950
color: theme.palette.primary.contrastText,
5051
marginLeft: "1.5rem",
52+
marginBottom: "4px",
53+
paddingBottom: "4px",
54+
lineHeight: 1,
5155
cursor: "pointer",
56+
borderBottom: "solid transparent 4px",
5257
}}
5358
{...props}
5459
>
@@ -80,35 +85,45 @@ const Footer = ({ logo, copyright, children, ...props }: FooterProps) => {
8085
>
8186
<Grid container>
8287
<Grid
83-
size={{ xs: 6, md: 8 }}
88+
size={logo || copyright ? { xs: 6, md: 8 } : { xs: 12, md: 12 }}
8489
style={{
8590
alignContent: "center",
8691
}}
8792
>
88-
{children}
89-
</Grid>
90-
<Grid size={{ xs: 6, md: 4 }}>
9193
<div
9294
style={{
93-
float: "right",
9495
paddingTop: "10px",
95-
paddingRight: "15px",
96-
textAlign: "right",
96+
paddingLeft: "15px",
9797
}}
9898
>
99-
{logo && <ImageColorSchemeSwitch image={logo} />}
100-
{copyright ? (
101-
<Typography
102-
style={{
103-
margin: 0,
104-
color: theme.palette.primary.contrastText,
105-
}}
106-
>
107-
{`Copyright © ${new Date().getFullYear()} ${copyright}`}
108-
</Typography>
109-
) : null}
99+
{children}
110100
</div>
111101
</Grid>
102+
103+
{(logo || copyright) && (
104+
<Grid size={{ xs: 6, md: 4 }}>
105+
<div
106+
style={{
107+
float: "right",
108+
paddingTop: "10px",
109+
paddingRight: "15px",
110+
textAlign: "right",
111+
}}
112+
>
113+
{logo && <ImageColorSchemeSwitch image={logo} />}
114+
{copyright && (
115+
<Typography
116+
style={{
117+
margin: "0 0 10px 0",
118+
color: theme.palette.primary.contrastText,
119+
}}
120+
>
121+
{`Copyright © ${new Date().getFullYear()} ${copyright}`}
122+
</Typography>
123+
)}
124+
</div>
125+
</Grid>
126+
)}
112127
</Grid>
113128
</footer>
114129
);

0 commit comments

Comments
 (0)