Make the logo rotate on the Storybook

Author: garronej

package.json

@@ -107,7 +107,7 @@
         "remixicon": "^3.2.0",
         "storybook-dark-mode": "^1.1.2",
         "ts-node": "^10.9.1",
-        "tss-react": "^4.7.1",
+        "tss-react": "^4.8.4",
         "type-route": "^1.0.1",
         "typescript": "^4.9.1-beta",
         "vitest": "^0.24.3"

stories/RotatingLogo.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { memo, useState } from "react";
+import { useConstCallback } from "powerhooks";
+import { keyframes, createMakeAndWithStyles } from "tss-react";
+import keycloakifyLogoHeroMovingPngUrl from "./assets/logo-in.png";
+import keycloakifyLogoHeroStillPngUrl from "./assets/logo-out.png";
+
+const { makeStyles } = createMakeAndWithStyles({
+    "useTheme": () => ({})
+});
+
+export type Props = {
+    style?: React.CSSProperties;
+    id?: string;
+    onLoad?: () => void;
+};
+
+export const RotatingLogo = memo((props: Props) => {
+    const { id, style, onLoad: onLoadProp } = props;
+
+    const [isImageLoaded, setIsImageLoaded] = useState(false);
+
+    const onLoad = useConstCallback(() => {
+        setIsImageLoaded(true);
+        onLoadProp?.();
+    });
+
+    const { classes } = useStyles({
+        isImageLoaded
+    });
+    return (
+        <div id={id} className={classes.root} style={style}>
+            <img
+                className={classes.rotatingImg}
+                onLoad={onLoad}
+                src={keycloakifyLogoHeroMovingPngUrl}
+                alt={"Rotating react logo"}
+            />
+            <img
+                className={classes.stillImg}
+                src={keycloakifyLogoHeroStillPngUrl}
+                alt={"keyhole"}
+            />
+        </div>
+    );
+});
+
+const useStyles = makeStyles<{ isImageLoaded: boolean }>({
+    "name": { RotatingLogo }
+})((_theme, { isImageLoaded }) => ({
+    "root": {
+        "position": "relative"
+    },
+    "rotatingImg": {
+        "animation": `${keyframes({
+            "from": {
+                "transform": "rotate(0deg)"
+            },
+            "to": {
+                "transform": "rotate(360deg)"
+            }
+        })} infinite 20s linear`,
+        "width": isImageLoaded ? "100%" : undefined,
+        "height": isImageLoaded ? "auto" : undefined
+    },
+    "stillImg": {
+        "position": "absolute",
+        "top": "0",
+        "left": "0",
+        "width": isImageLoaded ? "100%" : undefined,
+        "height": isImageLoaded ? "auto" : undefined
+    }
+}));

stories/assets/logo-in.png

@@ -1,5 +1,6 @@
 import { Meta } from "@storybook/addon-docs";
 import { useDarkMode } from "storybook-dark-mode";
+import { RotatingLogo } from "./RotatingLogo";
 
 <Meta
     title="🇫🇷 Introduction" 
@@ -14,10 +15,15 @@ import { useDarkMode } from "storybook-dark-mode";
     }}
 />
 
-<div style={{ "margin": "0 auto", "maxWidth": "600px", "textAlign": "center" }}>
-    <img src="repo-card.png" />  
-    🇫🇷 <i><a href="https://www.systeme-de-design.gouv.fr/">French State Design System</a> React integration</i> 🇫🇷 
+<div style={{ "margin": "0 auto", "maxWidth": "700px", "textAlign": "center" }}>
+<div style={{ "display": "flex", "justifyContent": "center" }}>
+<RotatingLogo style={{ "width": 250 }} />
+</div>
+<br/>
+🇫🇷 <i><a href="https://www.systeme-de-design.gouv.fr/">French State Design System</a> React integration</i> 🇫🇷 
 
 This website documents the React components featured by [@codegouvfr/react-dsfr](https://github.com/codegouvfr/react-dsfr).  
 🏁 If you're just getting started heads over to the 👉 [Guides](https://react-dsfr.etalab.studio/) 👈.
+
+
 </div>

stories/assets/logo-out.png

@@ -11827,10 +11827,10 @@ tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e"
   integrity sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==
 
-tss-react@^4.7.1:
-  version "4.7.1"
-  resolved "https://registry.yarnpkg.com/tss-react/-/tss-react-4.7.1.tgz#52f973924e6e4468fb67b4ed73881d8fb139d5d0"
-  integrity sha512-xlKTTkN232rK16nBPlyvfesVBDbyk17oo+clEB3Wm77VyrBChAakYJ8NcqmzXHzW6QbvyqiSS6AR2Zzd/Ul1ew==
+tss-react@^4.8.4:
+  version "4.8.4"
+  resolved "https://registry.yarnpkg.com/tss-react/-/tss-react-4.8.4.tgz#0a5fb97bc5e1613d98ec69e3ec9bce8a5987976f"
+  integrity sha512-OaCOc7Gfx4TcNsiLczZ1CZC2dkzyUx8Q/NoTO0n7pxk+cAxKQJrDV7x2nl+fB05bnjlbNkR8/jHLmoCaUwzEtg==
   dependencies:
     "@emotion/cache" "*"
     "@emotion/serialize" "*"