Skip to content

Commit 312f6f3

Browse files
akademyakademy
committed
Irritating changes.
1 parent c47315d commit 312f6f3

File tree

9 files changed

+74
-77
lines changed

9 files changed

+74
-77
lines changed

‎src/__test-utils__/helpers.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,12 @@ import { render, RenderResult } from "@testing-library/react";
44
import { ThemeProviderProps } from "@mui/material/styles/ThemeProvider";
55

66
export const renderWithProviders = (
7-
ui: React.ReactNode,
7+
children: React.ReactNode,
88
themeOptions?: ThemeProviderProps,
99
): RenderResult => {
10-
const Wrapper = ({ children }: { children: React.ReactNode }) => {
11-
return (
12-
<ThemeProvider theme={DiamondTheme} {...themeOptions} >
13-
{children}
14-
</ThemeProvider>
15-
);
16-
};
17-
18-
return render(ui, { wrapper: Wrapper });
10+
return render(
11+
<ThemeProvider theme={DiamondTheme} {...themeOptions}>
12+
{children}
13+
</ThemeProvider>
14+
);
1915
};

‎src/components/controls/ImageColorSchemeSwitch.test.tsx‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -60,23 +60,18 @@ describe("ImageColorSchemeSwitch", () => {
6060
});
6161

6262
it("should have alternate src", () => {
63-
64-
renderWithProviders(
65-
<ImageColorSchemeSwitch image={{ ...testVals }} />,
66-
{ defaultMode: "dark" },
67-
);
63+
renderWithProviders(<ImageColorSchemeSwitch image={{ ...testVals }} />, {
64+
defaultMode: "dark",
65+
});
6866
const img = screen.getByTestId("image-dark");
6967
expect(img).toHaveAttribute("src", testVals.srcDark);
7068
});
71-
69+
7270
it("should have src when no srcDark set but dark mode selected", () => {
73-
74-
renderWithProviders(
75-
<ImageColorSchemeSwitch image={{ ...testVals }} />,
76-
{ defaultMode: "dark" },
77-
);
71+
renderWithProviders(<ImageColorSchemeSwitch image={{ ...testVals }} />, {
72+
defaultMode: "dark",
73+
});
7874
const img = screen.getByRole("img");
7975
expect(img).toHaveAttribute("src", testVals.src);
8076
});
81-
8277
});

‎src/components/controls/ImageColorSchemeSwitch.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ type ImageColorSchemeSwitchType = {
99
height?: string;
1010
};
1111

12-
interface ImageColorSchemeSwitchProps {
12+
interface ImageColorSchemeSwitchProps {
1313
image: ImageColorSchemeSwitchType;
1414
style?: React.CSSProperties;
1515
}
@@ -30,7 +30,10 @@ const ImageLight = styled("img")(({ theme }) => [
3030
}),
3131
]);
3232

33-
const ImageColorSchemeSwitch = ({ image, style }: ImageColorSchemeSwitchProps) => (
33+
const ImageColorSchemeSwitch = ({
34+
image,
35+
style,
36+
}: ImageColorSchemeSwitchProps) =>
3437
image.srcDark ? (
3538
<>
3639
<ImageLight
@@ -58,8 +61,7 @@ const ImageColorSchemeSwitch = ({ image, style }: ImageColorSchemeSwitchProps) =
5861
height={image.height}
5962
style={style}
6063
/>
61-
)
62-
);
64+
);
6365

6466
export { ImageColorSchemeSwitch };
6567
export type { ImageColorSchemeSwitchProps, ImageColorSchemeSwitchType };

‎src/components/controls/Logo.stories.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@ const meta: Meta<typeof Logo> = {
88
parameters: {
99
docs: {
1010
description: {
11-
component:
12-
"Show the logo associated with the theme",
11+
component: "Show the logo associated with the theme",
1312
},
1413
},
1514
},
@@ -23,8 +22,7 @@ export const TheLogo: Story = {
2322
parameters: {
2423
docs: {
2524
description: {
26-
story:
27-
"The normally sized logo",
25+
story: "The normally sized logo",
2826
},
2927
},
3028
},
@@ -35,8 +33,7 @@ export const TheShortLogo: Story = {
3533
parameters: {
3634
docs: {
3735
description: {
38-
story:
39-
"The shorter image.",
36+
story: "The shorter image.",
4037
},
4138
},
4239
},

‎src/components/controls/Logo.test.tsx‎

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import "@testing-library/jest-dom";
22
import { screen } from "@testing-library/react";
3-
import {createTheme, Theme} from "@mui/material/styles";
3+
import { createTheme, Theme } from "@mui/material/styles";
44

55
import { renderWithProviders } from "../../__test-utils__/helpers";
6-
import {BaseThemeOptions} from "../../themes/BaseTheme";
6+
import { BaseThemeOptions } from "../../themes/BaseTheme";
77

88
import { Logo } from "./Logo";
99

1010
describe("Logo", () => {
11-
1211
const src = "a/test/src";
1312
const TestTheme: Theme = createTheme({
1413
...BaseThemeOptions,
@@ -19,41 +18,40 @@ describe("Logo", () => {
1918
},
2019
short: {
2120
src: src + "/short",
22-
alt: "alt"
21+
alt: "alt",
2322
},
2423
},
2524
});
26-
27-
function render( logo:any ) {
28-
renderWithProviders(logo, {theme:TestTheme} );
25+
26+
function render(logo: React.ReactNode) {
27+
renderWithProviders(logo, { theme: TestTheme });
2928
}
30-
29+
3130
it("should render without errors", () => {
32-
render(<Logo />)
31+
render(<Logo />);
3332
});
3433

3534
it("should have am img", () => {
36-
render(<Logo /> );
35+
render(<Logo />);
3736
const img = screen.getByRole("img");
38-
37+
3938
expect(img).toBeInTheDocument();
40-
expect(img).toHaveAttribute("src", src)
39+
expect(img).toHaveAttribute("src", src);
4140
});
42-
41+
4342
it("should have an img when short", () => {
4443
render(<Logo short={true} />);
45-
44+
4645
const img = screen.getByRole("img");
4746
expect(img).toBeInTheDocument();
48-
expect(img).toHaveAttribute("src", src + "/short")
47+
expect(img).toHaveAttribute("src", src + "/short");
4948
});
50-
49+
5150
it("should have a margin", () => {
52-
render(<Logo style={{margin:"10px"}} />);
53-
51+
render(<Logo style={{ margin: "10px" }} />);
52+
5453
const img = screen.getByRole("img");
5554
expect(img).toBeInTheDocument();
56-
expect(img).toHaveAttribute("style", "margin: 10px;")
55+
expect(img).toHaveAttribute("style", "margin: 10px;");
5756
});
58-
5957
});

‎src/components/controls/Logo.tsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
1-
import {BoxProps, styled, useTheme} from "@mui/material";
2-
import {ImageColorSchemeSwitch, ImageColorSchemeSwitchType} from "./ImageColorSchemeSwitch";
1+
import { BoxProps, useTheme } from "@mui/material";
2+
import {
3+
ImageColorSchemeSwitch
4+
} from "./ImageColorSchemeSwitch";
35
import React from "react";
46

57
interface LogoProps extends BoxProps {
6-
short?: boolean,
7-
style?: React.CSSProperties;
8+
short?: boolean;
9+
style?: React.CSSProperties;
810
}
911

10-
const Logo = ({ short=false, style } :LogoProps) => {
11-
12-
const theme = useTheme();
13-
const logo = (short !== undefined && short) ? theme.logos?.short : theme.logos?.normal
14-
15-
return ( logo && <ImageColorSchemeSwitch style={style} image={logo}/> )
12+
const Logo = ({ short = false, style }: LogoProps) => {
13+
const theme = useTheme();
14+
const logo =
15+
short !== undefined && short ? theme.logos?.short : theme.logos?.normal;
16+
17+
return logo && <ImageColorSchemeSwitch style={style} image={logo} />;
1618
};
1719

18-
export { Logo };
20+
export { Logo };

‎src/components/navigation/Footer.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
ImageColorSchemeSwitch,
1515
ImageColorSchemeSwitchType,
1616
} from "../controls/ImageColorSchemeSwitch";
17-
import {Logo} from "../controls/Logo";
17+
import { Logo } from "../controls/Logo";
1818

1919
interface FooterLinksProps extends React.HTMLProps<HTMLDivElement> {
2020
children: React.ReactElement<LinkProps> | React.ReactElement<LinkProps>[];
@@ -108,9 +108,7 @@ const Footer = ({ logo, copyright, children, ...props }: FooterProps) => {
108108
<BoxStyled role="contentinfo" {...props}>
109109
<Grid container>
110110
<Grid
111-
size={
112-
logo || copyright ? { xs: 6, md: 8 } : { xs: 12, md: 12 }
113-
}
111+
size={logo || copyright ? { xs: 6, md: 8 } : { xs: 12, md: 12 }}
114112
style={{
115113
alignContent: "center",
116114
}}
@@ -135,7 +133,12 @@ const Footer = ({ logo, copyright, children, ...props }: FooterProps) => {
135133
textAlign: "right",
136134
}}
137135
>
138-
{logo && (logo=="theme" ? <Logo short={true} /> : <ImageColorSchemeSwitch image={logo} />)}
136+
{logo &&
137+
(logo == "theme" ? (
138+
<Logo short={true} />
139+
) : (
140+
<ImageColorSchemeSwitch image={logo} />
141+
))}
139142
{copyright && (
140143
<Typography
141144
style={{

‎src/components/navigation/Navbar.stories.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import logoImageLight from "../../public/generic/logo-light.svg";
77
import { ColourSchemeButton } from "../controls/ColourSchemeButton";
88
import { User } from "../controls/User";
99
import { MockLink } from "../../utils/MockLink";
10-
import {Logo} from "../controls/Logo";
10+
import { Logo } from "../controls/Logo";
1111

1212
const meta: Meta<typeof Navbar> = {
1313
title: "SciReactUI/Navigation/Navbar",
@@ -176,10 +176,10 @@ export const WithNonThemeLogo: Story = {
176176
},
177177
};
178178

179-
180179
export const WithThemeLogoAsChild: Story = {
181180
args: {
182-
children: (<>
181+
children: (
182+
<>
183183
<NavLinks key="links">
184184
<NavLink href="#" key="first">
185185
First
@@ -188,14 +188,15 @@ export const WithThemeLogoAsChild: Story = {
188188
Second
189189
</NavLink>
190190
</NavLinks>
191-
<Logo style={{marginRight:"100px", transform: "rotateX(180deg)"}} />
191+
<Logo style={{ marginRight: "100px", transform: "rotateX(180deg)" }} />
192192
</>
193-
)
193+
),
194194
},
195195
parameters: {
196196
docs: {
197197
description: {
198-
story: "You can pass the logo in as a child instead of part of the Navbar for full control.",
198+
story:
199+
"You can pass the logo in as a child instead of part of the Navbar for full control.",
199200
},
200201
},
201202
},

‎src/components/navigation/Navbar.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818
ImageColorSchemeSwitch,
1919
ImageColorSchemeSwitchType,
2020
} from "../controls/ImageColorSchemeSwitch";
21-
import {Logo} from "../controls/Logo";
21+
import { Logo } from "../controls/Logo";
2222

2323
interface NavLinksProps {
2424
children: React.ReactElement<LinkProps> | React.ReactElement<LinkProps>[];
@@ -166,7 +166,6 @@ const Navbar = ({
166166
containerWidth,
167167
...props
168168
}: NavbarProps) => {
169-
const theme = useTheme();
170169

171170
return (
172171
<BoxStyled role="banner" {...props}>
@@ -198,7 +197,11 @@ const Navbar = ({
198197
marginRight: { xs: "0", md: "50px" },
199198
}}
200199
>
201-
{logo == "theme" ? <Logo /> : <ImageColorSchemeSwitch image={logo} />}
200+
{logo == "theme" ? (
201+
<Logo />
202+
) : (
203+
<ImageColorSchemeSwitch image={logo} />
204+
)}
202205
</Box>
203206
</Link>
204207
)}

0 commit comments

Comments
 (0)