fix(alert): stop to set font-weight of ghost button to 400 in alert

AxaFrance · Jan 20, 2025 · 9b10d16 · 9b10d16
1 parent c950411
commit 9b10d16
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 17 deletions.
diff --git a/client/look-and-feel/css/src/Alert/Alert.scss b/client/look-and-feel/css/src/Alert/Alert.scss
@@ -1,3 +1,5 @@
+@use "../common/common.scss" as common;
+
 .af-alert {
   display: flex;
   padding: 1rem;
@@ -80,6 +82,9 @@
 
   .af-alert-client__content {
     width: 100%;
+    font-size: common.rem(18);
+    font-weight: 400;
+    line-height: common.rem(22.5);
 
     .af-alert__action {
       display: flex;
@@ -88,15 +93,10 @@
     }
 
     .af-alert__title {
+      margin: 0;
       padding-bottom: 0.25rem;
       font-weight: 600;
       line-height: 1.5rem;
     }
   }
-
-  * {
-    margin: 0;
-    font-size: 1.125rem;
-    font-weight: 400;
-  }
 }
diff --git a/client/look-and-feel/css/src/Alert/Alert.stories.ts b/client/look-and-feel/css/src/Alert/Alert.stories.ts
@@ -1,4 +1,5 @@
 import type { Args, Meta, StoryObj } from "@storybook/html";
+import "../Button/Button.scss";
 import "../Link/Link.scss";
 import "./Alert.scss";
 
@@ -84,7 +85,7 @@ export const Default: StoryObj = {
     title: "My Alert title",
     type: "information",
     children: `Vestibulum nunc neque, sodales non luctus in, dictum vitae nisl. Curabitur vitae massa non nisl lacinia tempus. Pellentesque id nulla tortor.
-      <p class="af-alert__action"><a class="af-link  af-link--openInNewTab" href="https://fakelink.com" target="_blank" rel="noopener noreferrer">Plus de détails<svg data-src="/@fs/Users/a770ml/Documents/DEV/GITHUB%20AXAFRANCE/design-system/node_modules/@material-symbols/svg-400/outlined/open_in_new.svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="injected-svg" viewBox="0 -960 960 960" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h279v60H180v600h600v-279h60v279q0 24-18 42t-42 18H180Zm202-219-42-43 398-398H519v-60h321v321h-60v-218L382-339Z"></path></svg></a></p>
+      <div class="af-alert__action"><a class="af-link  af-link--openInNewTab" href="https://fakelink.com" target="_blank" rel="noopener noreferrer">Plus de détails<svg data-src="/@fs/Users/a770ml/Documents/DEV/GITHUB%20AXAFRANCE/design-system/node_modules/@material-symbols/svg-400/outlined/open_in_new.svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="injected-svg" viewBox="0 -960 960 960" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h279v60H180v600h600v-279h60v279q0 24-18 42t-42 18H180Zm202-219-42-43 398-398H519v-60h321v321h-60v-218L382-339Z"></path></svg></a></div>
       `,
   },
 };
@@ -96,7 +97,7 @@ export const WithButtonAction: StoryObj = {
     title: "My Alert title",
     type: "information",
     children: `Vestibulum nunc neque, sodales non luctus in, dictum vitae nisl. Curabitur vitae massa non nisl lacinia tempus. Pellentesque id nulla tortor.
-      <p class="af-alert__action"><button class="af-btn-client af-btn-client--ghost" type="button">Button Ghost</button></p>
+      <div class="af-alert__action"><button class="af-btn-client af-btn-client--ghost" type="button">Button Ghost</button></div>
       `,
   },
 };
diff --git a/client/look-and-feel/react/src/Alert/Alert.tsx b/client/look-and-feel/react/src/Alert/Alert.tsx
@@ -1,18 +1,18 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Alert/Alert.scss";
+import checkCircleOutline from "@material-symbols/svg-400/outlined/check_circle.svg";
+import errorIcon from "@material-symbols/svg-400/outlined/emergency_home.svg";
+import errorOutline from "@material-symbols/svg-400/outlined/error.svg";
+import infoIcon from "@material-symbols/svg-400/outlined/info.svg";
+import wbIncandescentOutlined from "@material-symbols/svg-400/outlined/wb_incandescent.svg";
 import {
   ComponentPropsWithoutRef,
   PropsWithChildren,
   ReactElement,
   useMemo,
 } from "react";
-import wbIncandescentOutlined from "@material-symbols/svg-400/outlined/wb_incandescent.svg";
-import infoIcon from "@material-symbols/svg-400/outlined/info.svg";
-import errorIcon from "@material-symbols/svg-400/outlined/emergency_home.svg";
-import errorOutline from "@material-symbols/svg-400/outlined/error.svg";
-import checkCircleOutline from "@material-symbols/svg-400/outlined/check_circle.svg";
-import "@axa-fr/design-system-look-and-feel-css/dist/Alert/Alert.scss";
-import { Svg } from "../Svg";
-import { Link } from "../Link/Link";
 import { ButtonClient } from "../Button/Button";
+import { Link } from "../Link/Link";
+import { Svg } from "../Svg";
 
 type Headings = "h2" | "h3" | "h4" | "h5" | "h6";
 
@@ -65,7 +65,7 @@ export const Alert = ({
       <div className="af-alert-client__content">
         {title && <Heading className="af-alert__title">{title}</Heading>}
         {children}
-        {action && <p className="af-alert__action">{action}</p>}
+        {action && <div className="af-alert__action">{action}</div>}
       </div>
     </div>
   );