diff --git a/package.json b/package.json index a984977..db6737c 100644 --- a/package.json +++ b/package.json @@ -37,25 +37,23 @@ "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", - "@mui/material": "^5.14.8", "@mui/icons-material": "^5.14.8", + "@mui/material": "^5.14.8", + "color": "^4.2.3", "evt": "^2.5.2", "github-pages-plugin-for-type-route": "^0.1.1", - "gitlanding": "^1.0.0", + "gitlanding": "^1.0.9", + "i18nifty": "^2.0.0", "memoizee": "^0.4.15", "onyxia-ui": "^1.0.0", "powerhooks": "^1.0.0", + "react": "18.2.0", + "react-dom": "18.2.0", "tsafe": "^1.6.4", "tss-react": "^4.9.0", - "type-route": "^1.0.1", - "i18nifty": "^2.0.0", - "react": "18.2.0", - "react-dom": "18.2.0" + "type-route": "^1.0.1" }, "devDependencies": { - "@types/node": "18.11.7", - "@types/react": "18.0.24", - "@types/react-dom": "18.0.8", "@storybook/addon-actions": "^6.3.7", "@storybook/addon-essentials": "^6.3.7", "@storybook/addon-events": "6.2.9", @@ -63,15 +61,19 @@ "@storybook/node-logger": "^6.3.7", "@storybook/preset-create-react-app": "^3.2.0", "@storybook/react": "^6.3.7", + "@types/color": "^3.0.6", "@types/memoizee": "^0.4.6", + "@types/node": "18.11.7", + "@types/react": "18.0.24", + "@types/react-dom": "18.0.8", "circular-dependency-plugin": "^5.2.0", "eslint-config-prettier": "^8.3.0", + "eslint-plugin-tss-unused-classes": "^0.0.4", "prettier": "^2.3.0", "react-app-rewired": "^2.2.1", "react-scripts": "5.0.1", "ts-node": "^10.1.0", - "typescript": "^4.8.4", - "eslint-plugin-tss-unused-classes": "^0.0.4" + "typescript": "^4.8.4" }, "eslintConfig": { "plugins": [ diff --git a/src/ui/App.tsx b/src/ui/App.tsx index 4b67dca..debac0c 100644 --- a/src/ui/App.tsx +++ b/src/ui/App.tsx @@ -21,6 +21,7 @@ import { Evt } from "evt"; import { breakpointsValues } from "onyxia-ui"; import { declareComponentKeys } from "i18nifty"; import { GlFooter } from "gitlanding/GlFooter"; +import { GlobalStyles } from "tss-react"; /* spell-checker: disable */ export const App = memo(() => { @@ -58,6 +59,13 @@ export const App = memo(() => { return ( <> + - + })} + /> ({ return {}; })(), + "marginBottom": theme.spacing(5), "maxWidth": 700, }, "articleImage": { diff --git a/src/ui/pages/LogoCarousel.tsx b/src/ui/pages/LogoCarousel.tsx index 8392609..7290d0b 100644 --- a/src/ui/pages/LogoCarousel.tsx +++ b/src/ui/pages/LogoCarousel.tsx @@ -1,4 +1,5 @@ import { useMemo } from "react"; +import Color from "color"; import logoExpertiseFranceMonochromeDarkPng from "ui/assets/img/Logo_ExpertiseFrance_monochrome_dark.png"; import logoExpertiseFranceMonochromeLightPng from "ui/assets/img/Logo_ExpertiseFrance_monochrome_light.png"; import logoInseeMonochromeLightPng from "ui/assets/img/Logo_Insee_monochrome_light.png"; @@ -20,15 +21,16 @@ const getLogos = (isDark: boolean) => [ { src: isDark ? logoStatisticNorwayMonochromeDarkPng : logoStatisticNorwayMonochromeLightPng, alt: "Logo Statistic Norway" }, ] as const; -type Props= { +type Props = { className?: string; + testimonialSectionId: string; }; export function LogoCarousel( props: Props ) { - const { className } = props; + const { className, testimonialSectionId } = props; const { classes, theme, cx, css } = useStyles(); @@ -85,7 +87,12 @@ export function LogoCarousel( {renderGroup(false)} {renderGroup(true)}
- +
); @@ -96,47 +103,50 @@ const useStyles = tss .withName({ LogoCarousel }) .withNestedSelectors<"overlay">() .create(({ theme, classes }) => ({ - root: { - ...theme.spacing.topBottom("padding", 4), - overflow: "hidden", - display: "flex", - alignItems: "center", - maskImage: - "linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%)", - position: "relative", - [`&:hover .${classes.overlay}`]: { + root: { + ...theme.spacing.topBottom("padding", 5), + overflow: "hidden", display: "flex", - } - }, - overlay: { - position: "absolute", - top: 0, - left: 0, - right: 0, - bottom: 0, - display: "none", - alignItems: "center", - justifyContent: "center", - //backgroundColor: theme.colors.useCases.surfaces.background, - backdropFilter: "blur(10px)", - }, - group: { - justifyContent: "space-around", - display: "flex", - gap: theme.spacing(7), - animation: `${keyframes({ - "from": { - transform: "translateX(0)", - }, - "to": { - transform: "translateX(-100%)", - }, - })} 30s linear infinite`, - flexShrink: 0, - minWidth: "100%", - }, - logo: { - height: "auto", - objectFit: "contain", - }, -})); + alignItems: "center", + maskImage: + "linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%)", + position: "relative", + [`&:hover .${classes.overlay}`]: { + display: "flex", + } + }, + overlay: { + position: "absolute", + top: 0, + left: 0, + right: 0, + bottom: 0, + display: "none", + alignItems: "center", + justifyContent: "center", + backgroundColor: new Color(theme.colors.useCases.surfaces.background,) + .rgb() + .alpha(0.8) + .string(), + backdropFilter: "blur(5px)", + }, + group: { + justifyContent: "space-around", + display: "flex", + gap: theme.spacing(7), + animation: `${keyframes({ + "from": { + transform: "translateX(0)", + }, + "to": { + transform: "translateX(-100%)", + }, + })} 30s linear infinite`, + flexShrink: 0, + minWidth: "100%", + }, + logo: { + height: "auto", + objectFit: "contain", + }, + })); diff --git a/yarn.lock b/yarn.lock index bf30f61..cd3b41b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3443,6 +3443,25 @@ dependencies: "@types/node" "*" +"@types/color-convert@*": + version "2.0.3" + resolved "https://registry.yarnpkg.com/@types/color-convert/-/color-convert-2.0.3.tgz#e93f5c991eda87a945058b47044f5f0008b0dce9" + integrity sha512-2Q6wzrNiuEvYxVQqhh7sXM2mhIhvZR/Paq4FdsQkOMgWsCIkKvSGj8Le1/XalulrmgOzPMqNa0ix+ePY4hTrfg== + dependencies: + "@types/color-name" "*" + +"@types/color-name@*": + version "1.1.4" + resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.4.tgz#e002611ff627347818d440a05e81650e9a4053b8" + integrity sha512-hulKeREDdLFesGQjl96+4aoJSHY5b2GRjagzzcqCfIrWhe5vkCqIvrLbqzBaI1q94Vg8DNJZZqTR5ocdWmWclg== + +"@types/color@^3.0.6": + version "3.0.6" + resolved "https://registry.yarnpkg.com/@types/color/-/color-3.0.6.tgz#29c27a99d4de2975e1676712679a0bd7f646a3fb" + integrity sha512-NMiNcZFRUAiUUCCf7zkAelY8eV3aKqfbzyFQlXpPIEeoNDbsEHGpb854V3gzTsGKYj830I5zPuOwU/TP5/cW6A== + dependencies: + "@types/color-convert" "*" + "@types/connect-history-api-fallback@^1.3.5": version "1.3.5" resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.5.tgz#d1f7a8a09d0ed5a57aee5ae9c18ab9b803205dae" @@ -5654,7 +5673,7 @@ color-name@^1.0.0, color-name@^1.1.4, color-name@~1.1.4: resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== -color-string@^1.5.4: +color-string@^1.5.4, color-string@^1.9.0: version "1.9.1" resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4" integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg== @@ -5675,6 +5694,14 @@ color@3.1.3: color-convert "^1.9.1" color-string "^1.5.4" +color@^4.2.3: + version "4.2.3" + resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a" + integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A== + dependencies: + color-convert "^2.0.1" + color-string "^1.9.0" + colord@^2.9.1: version "2.9.3" resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43" @@ -7285,6 +7312,15 @@ evt@^2.5.2: run-exclusive "^2.2.19" tsafe "^1.6.4" +evt@^2.5.7: + version "2.5.7" + resolved "https://registry.yarnpkg.com/evt/-/evt-2.5.7.tgz#55c5f8ff910f4b7531bfac91e963d4cb3231f253" + integrity sha512-dr7Wd16ry5F8WNU1xXLKpFpO3HsoAGg8zC48e08vDdzMzGWCP9/QFGt1PQptEEDh8SwYP3EL8M+d/Gb0kgUp6g== + dependencies: + minimal-polyfills "^2.2.3" + run-exclusive "^2.2.19" + tsafe "^1.6.6" + exec-sh@^0.3.2: version "0.3.6" resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.6.tgz#ff264f9e325519a60cb5e273692943483cca63bc" @@ -7937,22 +7973,22 @@ github-slugger@^1.0.0: resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-1.5.0.tgz#17891bbc73232051474d68bd867a34625c955f7d" integrity sha512-wIh+gKBI9Nshz2o46B0B3f5k/W+WI9ZAv6y5Dn5WJ5SK1t0TnDimB4WE5rmTD05ZAIn8HALCZVmCsvj0w0v0lw== -gitlanding@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/gitlanding/-/gitlanding-1.0.0.tgz#337cba3a323613916d95306cabd3c5999b91853e" - integrity sha512-cHal1M9hVlnFabSD6F9ZKg9ThmQQtZzu0avmVEPnO+3pdk0sLLc1OP0n/puaV2y8rYA1wR5iqNuAxKwGJq1jlQ== +gitlanding@^1.0.9: + version "1.0.9" + resolved "https://registry.yarnpkg.com/gitlanding/-/gitlanding-1.0.9.tgz#1ffa9067c6b8ee7b920c6a187bbcf90f7dc7796a" + integrity sha512-Ct0GhhPr3vgGOzXaeEsDuNmsEiuCeNfy1829+57jgxrW40/TLDK3V8PqfjnJeOUjzMMkVbLApJlkzTqlTdq33w== dependencies: "@mui/icons-material" "^5.5.0" embla-carousel-react "^7.0.3" framer-motion "^4.1.17" memoizee "^0.4.15" - powerhooks "^1.0.0" + powerhooks "^1.0.3" react-github-btn "^1.2.0" react-markdown "^5.0.3" react-svg "^15.0.4" react-syntax-highlighter "^15.5.0" - tsafe "^1.6.4" - tss-react "^4.9.0" + tsafe "^1.6.5" + tss-react "^4.9.2" typeface-work-sans "^1.1.13" glob-parent@^3.1.0: @@ -12023,6 +12059,15 @@ powerhooks@^1.0.1: memoizee "^0.4.15" tsafe "^1.6.4" +powerhooks@^1.0.3: + version "1.0.13" + resolved "https://registry.yarnpkg.com/powerhooks/-/powerhooks-1.0.13.tgz#4642d7c16bdc31d444403f18e0fac26bf7e96ad6" + integrity sha512-nDDYfklVEWcYLkKVtVxxb0UA5pUkkmAHOxWOAveTZT6LJDZelcc8cDsuoQO1zjQkkAFO3l4COyJ/8v2tJGOOEQ== + dependencies: + evt "^2.5.7" + memoizee "^0.4.15" + tsafe "^1.7.2" + prelude-ls@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" @@ -14326,6 +14371,11 @@ tsafe@^1.6.4: resolved "https://registry.yarnpkg.com/tsafe/-/tsafe-1.6.4.tgz#048a114761714538c72f16abd25bb247d4e3780e" integrity sha512-l4Z54QFGHO8GF0gBpb3yPGHjkIkIirl8rwW+lMBmtEMzOJeRs8BdjkDEx6nU8Ak9PQVp/KNDtECxTja8MMIDoA== +tsafe@^1.6.5, tsafe@^1.6.6, tsafe@^1.7.2: + version "1.7.2" + resolved "https://registry.yarnpkg.com/tsafe/-/tsafe-1.7.2.tgz#0f63d414876287ad01b135f832722f93e22da374" + integrity sha512-dAPfQLhCfCRre5qs+Z5Q2a7s2CV7RxffZUmvj7puGaePYjECzWREJFd3w4XSFe/T5tbxgowfItA/JSSZ6Ma3dA== + tsconfig-paths@^3.14.1: version "3.14.1" resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz#ba0734599e8ea36c862798e920bcf163277b137a" @@ -14355,6 +14405,15 @@ tss-react@^4.9.0: "@emotion/serialize" "*" "@emotion/utils" "*" +tss-react@^4.9.2: + version "4.9.13" + resolved "https://registry.yarnpkg.com/tss-react/-/tss-react-4.9.13.tgz#e6ac0bfea3977e58b5ef5a261cd0b035e6bd8254" + integrity sha512-Gu19qqPH8/SAyKVIgDE5qHygirEDnNIQcXhiEc+l4Q9T7C1sfvUnbVWs+yBpmN26/wyk4FTOupjYS2wq4vH0yA== + dependencies: + "@emotion/cache" "*" + "@emotion/serialize" "*" + "@emotion/utils" "*" + tsutils@^3.21.0: version "3.21.0" resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"