@centreon/ui 26.12.13 → 26.12.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "26.12.13",
+  "version": "26.12.15",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -48,7 +48,6 @@
   "exports": {
     ".": "./src/index.ts",
     "./components": "./src/components/index.ts",
-    "./fonts/*": "./src/fonts/*",
     "./test/testRenderer": "./test/testRenderer.tsx",
     "./tailwindcss": "./src/ThemeProvider/tailwindcss.css"
   },
@@ -129,6 +128,7 @@
     "@centreon/ui-context": "workspace:*"
   },
   "dependencies": {
+    "@fontsource/roboto": "^5.3.0",
     "@lexical/html": "^0.27.0",
     "@lexical/link": "^0.27.0",
     "@lexical/list": "^0.27.0",

package/public/README.md

@@ -1,39 +1 @@
 > The assets in `public` are served as-is.
-
-
----
-
-### `public/fonts` → `@centreon/ui/fonts` alias
-
-The `ThemeProvider` specifies the `@font-face` for MUI.
-It imports the fonts using the `@centreon/ui/fonts` alias, but does not bundle them.
-
-
-
-#### ⚠️ **note** 
-When the `@centreon/ui` package is used as non-build dependency, then the `@centreon/ui/fonts` alias need to be added in the webpack config, and configured to handle the asset types.
-```js
-// webpack.config.js
-
-// alias
-resolve: {
-  alias: {
-    '@centreon/ui/fonts': path.resolve(
-      './node_modules/@centreon/ui/public/fonts'
-    )
-  }
-}
-
-// asset types
-module: {
-  rules: [
-    {
-      generator: {
-          filename: '[name][ext]'
-      },
-      test: /\.(woff|woff2|eot|ttf|otf)$/i,
-      type: 'asset/resource'
-    }
-  ]
-}
-```

package/src/ActionsList/index.tsx

@@ -16,6 +16,8 @@ import { useStyles } from './ActionsList.styles';
 import type { ActionVariants } from './models';
 
 interface ActionsType {
+  // A stable id for analytics and tests; the label stays the fallback.
+  dataTestId?: string;
   Icon?: OverridableComponent<SvgIconTypeMap<object, 'svg'>> & {
     muiName: string;
   };
@@ -52,16 +54,16 @@ const ActionsList = ({
           return <Divider key={`divider_${idx}`} />;
         }
 
-        const { label, Icon, onClick, variant, secondaryLabel } =
+        const { dataTestId, label, Icon, onClick, variant, secondaryLabel } =
           action as ActionsType;
 
         return (
           <MenuItem
             aria-label={label}
             className={classes.item}
-            data-testid={label}
+            data-testid={dataTestId ?? label}
             data-variant={variant}
-            id={label}
+            id={dataTestId ?? label}
             key={label}
             onClick={onClick}
           >

package/src/ThemeProvider/index.tsx

@@ -14,15 +14,15 @@ import { GlobalStyles } from '@mui/system';
 
 import { ThemeMode, userAtom } from '@centreon/ui-context';
 
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
 import { useAtomValue } from 'jotai';
 import { equals, mergeDeepRight } from 'ramda';
 import { type ReactNode, useMemo } from 'react';
 import type { CSSInterpolation } from 'tss-react';
 
-import RobotoBoldWoff2 from '../fonts/roboto-bold-webfont.woff2';
-import RobotoLightWoff2 from '../fonts/roboto-light-webfont.woff2';
-import RobotoMediumWoff2 from '../fonts/roboto-medium-webfont.woff2';
-import RobotoRegularWoff2 from '../fonts/roboto-regular-webfont.woff2';
 import { getPalette } from './palettes';
 
 declare module '@mui/styles/defaultTheme' {
@@ -149,30 +149,6 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     },
     MuiCssBaseline: {
       styleOverrides: (theme) => `
-        @font-face {
-          font-family: 'Roboto';
-          font-style: normal;
-          font-weight: 300;
-          src: local('Roboto'), local('Roboto-Light'), url(${RobotoLightWoff2}) format('woff2');
-        }
-        @font-face {
-          font-family: 'Roboto';
-          font-style: normal;
-          font-weight: 400;
-          src: local('Roboto'), local('Roboto-Regular'), url(${RobotoRegularWoff2}) format('woff2');
-        }
-        @font-face {
-          font-family: 'Roboto';
-          font-style: normal;
-          font-weight: 500;
-          src: local('Roboto'), local('Roboto-Medium'), url(${RobotoMediumWoff2}) format('woff2');
-        }
-        @font-face {
-          font-family: 'Roboto';
-          font-style: normal;
-          font-weight: 700;
-          src: local('Roboto'), local('Roboto-Bold'), url(${RobotoBoldWoff2}) format('woff2');
-        }
         body {
           background-color: ${theme.palette.background.paper};
         }