@axa-fr/design-system-slash-react 2.0.6-alpha.5 → 2.0.6-alpha.7

package/dist/utilities/helpers/getClassName.d.ts

@@ -0,0 +1,20 @@
+type getClassNameParams = {
+    baseClassName: string;
+    modifiers?: Array<string | boolean | undefined>;
+    className?: string;
+};
+/**
+ * Generates a CSS class string from a base class name, optional modifiers, and an additional class name.
+ *
+ * @param {string} params.baseClassName - The base class name (required).
+ * @param {Array<string|boolean|undefined>} [params.modifiers] - List of modifiers to append as `${baseClassName}--{modifier}`. Falsy values are ignored.
+ * @param {string} [params.className] - Additional class name(s) to append to the final string.
+ * @returns {string} The concatenated CSS class string, separated by spaces.
+ *
+ * @example
+ * const isLarge = false;
+ * getClassName({ baseClassName: 'af-button', modifiers: ['primary', isLarge && 'large'], className: 'custom-class' })
+ * // Returns: 'af-button af-button--primary custom-class'
+ */
+export declare const getClassName: ({ baseClassName, modifiers, className, }: getClassNameParams) => string;
+export {};

package/dist/utilities/helpers/getClassName.js

@@ -0,0 +1,24 @@
+/**
+ * Generates a CSS class string from a base class name, optional modifiers, and an additional class name.
+ *
+ * @param {string} params.baseClassName - The base class name (required).
+ * @param {Array<string|boolean|undefined>} [params.modifiers] - List of modifiers to append as `${baseClassName}--{modifier}`. Falsy values are ignored.
+ * @param {string} [params.className] - Additional class name(s) to append to the final string.
+ * @returns {string} The concatenated CSS class string, separated by spaces.
+ *
+ * @example
+ * const isLarge = false;
+ * getClassName({ baseClassName: 'af-button', modifiers: ['primary', isLarge && 'large'], className: 'custom-class' })
+ * // Returns: 'af-button af-button--primary custom-class'
+ */
+export const getClassName = ({ baseClassName, modifiers = [], className = "", }) => {
+    const parsedModifiers = modifiers
+        .filter(Boolean)
+        .map((modifier) => `${baseClassName}--${modifier}`);
+    const classList = [
+        baseClassName,
+        ...parsedModifiers,
+        ...className.split(" "),
+    ].filter(Boolean);
+    return Array.from(new Set(classList)).join(" ");
+};

package/dist/utilities/helpers/getComponentClassName.d.ts

@@ -1,4 +1,5 @@
 /**
+ * @deprecated This function is deprecated and will be removed in a future release. Use getClassName instead.
  * Generates a component class name string based on provided class names and modifiers.
  *
  * @param {string} [className] - The base class name.
@@ -12,5 +13,8 @@ type getComponentClassNameWithUserClassnameParams = {
     classModifier?: string;
     componentClassName: string;
 };
+/**
+ * @deprecated This function is deprecated and will be removed in a future release. Use getClassName instead.
+ */
 export declare const getComponentClassNameWithUserClassname: ({ componentClassName, userClassName, classModifier, }: getComponentClassNameWithUserClassnameParams) => string;
 export {};

package/dist/utilities/helpers/getComponentClassName.js

@@ -12,6 +12,7 @@ const listClassModifier = (classModifier) => {
     return classModifier.split(" ");
 };
 /**
+ * @deprecated This function is deprecated and will be removed in a future release. Use getClassName instead.
  * Generates a component class name string based on provided class names and modifiers.
  *
  * @param {string} [className] - The base class name.
@@ -34,6 +35,9 @@ export const getComponentClassName = (className, classModifier, defaultClassName
     });
     return classNames(classNameToUse, modifiersObject);
 };
+/**
+ * @deprecated This function is deprecated and will be removed in a future release. Use getClassName instead.
+ */
 export const getComponentClassNameWithUserClassname = ({ componentClassName, userClassName, classModifier, }) => {
     // Fail fast, when no className or componentClassName we don't want to loop on modifier
     if (!componentClassName) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "2.0.6-alpha.5",
+  "version": "2.0.6-alpha.7",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -47,7 +47,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-slash-css": "2.0.6-alpha.5",
+    "@axa-fr/design-system-slash-css": "2.0.6-alpha.7",
     "@material-symbols/svg-400": ">= 0.19.0",
     "@material-symbols/svg-700": ">= 0.19.0",
     "react": ">= 18"