fix: answered MR responses

Author: eriviere

example/src/components/Callout/Callout.jsx

@@ -17,7 +17,7 @@ const CalloutExample = () => (
         </Callout>
       </Col>
       <Col n="12" spacing="py-2w">
-        <Callout>
+        <Callout icon={null}>
           <CalloutTitle>Mise en avant</CalloutTitle>
           <CalloutText>Callout text that might be short and concise.</CalloutText>
         </Callout>

src/components/interface/Callout/Callout.d.ts

@@ -5,7 +5,11 @@ export type CalloutColorFamily = 'green-tilleul-verveine' | 'green-bourgeon' | '
 export type CalloutChildren = React.ReactNode[] | React.ReactNode;
 
 export interface CalloutProps {
+  /**
+   * @deprecated The method should not be used
+   */
   hasInfoIcon?: boolean;
+  icon?: Nullable<string>;
   colorFamily?: CalloutColorFamily;
   /**
      * first color is color of the border, second is background

src/components/interface/Callout/Callout.js

@@ -25,7 +25,7 @@ const Callout = ({
   const [color, backgroundColor] = colors;
   const calloutRef = useRef();
   const _className = classNames('fr-callout', className, {
-    [`fr-fi-${icon}`]: icon,
+    [icon]: icon,
     [`fr-callout--${colorFamily}`]: colorFamily,
   });
 
@@ -52,15 +52,18 @@ const Callout = ({
 };
 
 Callout.defaultProps = {
-  icon: 'information-line',
+  icon: 'fr-fi-information-line',
   hasInfoIcon: true,
   className: '',
   colors: [],
   colorFamily: '',
 };
 
 Callout.propTypes = {
-  icon: PropTypes.string,
+  icon: PropTypes.oneOfType([
+    PropTypes.oneOf([null]),
+    PropTypes.string,
+  ]),
   hasInfoIcon: PropTypes.bool,
   colorFamily: PropTypes.oneOf([...colorFamilies, '']),
   /**

src/components/interface/Callout/Callout.stories.tsx

@@ -39,14 +39,24 @@ ButtonCallout.storyName = 'Mise en avant avec bouton';
 
 export const WithoutIconCallout = Template.bind({});
 WithoutIconCallout.args = {
-  hasInfoIcon: false,
+  icon: null,
   children: [
     <CalloutTitle as="h3">Callout title</CalloutTitle>,
     <CalloutText>Callout text that might be short and concise.</CalloutText>,
   ],
 };
 WithoutIconCallout.storyName = 'Mise en avant sans icone';
 
+export const DifferentIconCallout = Template.bind({});
+DifferentIconCallout.args = {
+  icon: 'fr-fi-lock-line',
+  children: [
+    <CalloutTitle as="h3">Callout title</CalloutTitle>,
+    <CalloutText>Callout text that might be short and concise.</CalloutText>,
+  ],
+};
+DifferentIconCallout.storyName = 'Mise en avant avec une autre icone';
+
 export const ColoredCallout = Template.bind({});
 ColoredCallout.args = {
   colors: ['#f13d3d', '#ffb0b0'],