Skip to content

Commit b3f7495

Browse files
committed
Make the logo rotate on the Storybook
1 parent d4b0850 commit b3f7495

File tree

6 files changed

+87
-8
lines changed

6 files changed

+87
-8
lines changed

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@
107107
"remixicon": "^3.2.0",
108108
"storybook-dark-mode": "^1.1.2",
109109
"ts-node": "^10.9.1",
110-
"tss-react": "^4.7.1",
110+
"tss-react": "^4.8.4",
111111
"type-route": "^1.0.1",
112112
"typescript": "^4.9.1-beta",
113113
"vitest": "^0.24.3"

stories/RotatingLogo.tsx

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import React from "react";
2+
import { memo, useState } from "react";
3+
import { useConstCallback } from "powerhooks";
4+
import { keyframes, createMakeAndWithStyles } from "tss-react";
5+
import keycloakifyLogoHeroMovingPngUrl from "./assets/logo-in.png";
6+
import keycloakifyLogoHeroStillPngUrl from "./assets/logo-out.png";
7+
8+
const { makeStyles } = createMakeAndWithStyles({
9+
"useTheme": () => ({})
10+
});
11+
12+
export type Props = {
13+
style?: React.CSSProperties;
14+
id?: string;
15+
onLoad?: () => void;
16+
};
17+
18+
export const RotatingLogo = memo((props: Props) => {
19+
const { id, style, onLoad: onLoadProp } = props;
20+
21+
const [isImageLoaded, setIsImageLoaded] = useState(false);
22+
23+
const onLoad = useConstCallback(() => {
24+
setIsImageLoaded(true);
25+
onLoadProp?.();
26+
});
27+
28+
const { classes } = useStyles({
29+
isImageLoaded
30+
});
31+
return (
32+
<div id={id} className={classes.root} style={style}>
33+
<img
34+
className={classes.rotatingImg}
35+
onLoad={onLoad}
36+
src={keycloakifyLogoHeroMovingPngUrl}
37+
alt={"Rotating react logo"}
38+
/>
39+
<img
40+
className={classes.stillImg}
41+
src={keycloakifyLogoHeroStillPngUrl}
42+
alt={"keyhole"}
43+
/>
44+
</div>
45+
);
46+
});
47+
48+
const useStyles = makeStyles<{ isImageLoaded: boolean }>({
49+
"name": { RotatingLogo }
50+
})((_theme, { isImageLoaded }) => ({
51+
"root": {
52+
"position": "relative"
53+
},
54+
"rotatingImg": {
55+
"animation": `${keyframes({
56+
"from": {
57+
"transform": "rotate(0deg)"
58+
},
59+
"to": {
60+
"transform": "rotate(360deg)"
61+
}
62+
})} infinite 20s linear`,
63+
"width": isImageLoaded ? "100%" : undefined,
64+
"height": isImageLoaded ? "auto" : undefined
65+
},
66+
"stillImg": {
67+
"position": "absolute",
68+
"top": "0",
69+
"left": "0",
70+
"width": isImageLoaded ? "100%" : undefined,
71+
"height": isImageLoaded ? "auto" : undefined
72+
}
73+
}));

stories/assets/logo-in.png

46.4 KB
Loading

stories/assets/logo-out.png

118 KB
Loading

stories/intro.stories.mdx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Meta } from "@storybook/addon-docs";
22
import { useDarkMode } from "storybook-dark-mode";
3+
import { RotatingLogo } from "./RotatingLogo";
34

45
<Meta
56
title="🇫🇷 Introduction"
@@ -14,10 +15,15 @@ import { useDarkMode } from "storybook-dark-mode";
1415
}}
1516
/>
1617

17-
<div style={{ "margin": "0 auto", "maxWidth": "600px", "textAlign": "center" }}>
18-
<img src="repo-card.png" />
19-
🇫🇷 <i><a href="https://www.systeme-de-design.gouv.fr/">French State Design System</a> React integration</i> 🇫🇷
18+
<div style={{ "margin": "0 auto", "maxWidth": "700px", "textAlign": "center" }}>
19+
<div style={{ "display": "flex", "justifyContent": "center" }}>
20+
<RotatingLogo style={{ "width": 250 }} />
21+
</div>
22+
<br/>
23+
🇫🇷 <i><a href="https://www.systeme-de-design.gouv.fr/">French State Design System</a> React integration</i> 🇫🇷
2024

2125
This website documents the React components featured by [@codegouvfr/react-dsfr](https://github.com/codegouvfr/react-dsfr).
2226
🏁 If you're just getting started heads over to the 👉 [Guides](https://react-dsfr.etalab.studio/) 👈.
27+
28+
2329
</div>

yarn.lock

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11827,10 +11827,10 @@ tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0:
1182711827
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e"
1182811828
integrity sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==
1182911829

11830-
tss-react@^4.7.1:
11831-
version "4.7.1"
11832-
resolved "https://registry.yarnpkg.com/tss-react/-/tss-react-4.7.1.tgz#52f973924e6e4468fb67b4ed73881d8fb139d5d0"
11833-
integrity sha512-xlKTTkN232rK16nBPlyvfesVBDbyk17oo+clEB3Wm77VyrBChAakYJ8NcqmzXHzW6QbvyqiSS6AR2Zzd/Ul1ew==
11830+
tss-react@^4.8.4:
11831+
version "4.8.4"
11832+
resolved "https://registry.yarnpkg.com/tss-react/-/tss-react-4.8.4.tgz#0a5fb97bc5e1613d98ec69e3ec9bce8a5987976f"
11833+
integrity sha512-OaCOc7Gfx4TcNsiLczZ1CZC2dkzyUx8Q/NoTO0n7pxk+cAxKQJrDV7x2nl+fB05bnjlbNkR8/jHLmoCaUwzEtg==
1183411834
dependencies:
1183511835
"@emotion/cache" "*"
1183611836
"@emotion/serialize" "*"

0 commit comments

Comments
 (0)