Merge pull request #170 from BouyguesTelecom/fix/Alert

display is true by default
BouyguesTelecom · Oct 29, 2024 · 0b6b711 · 0b6b711
2 parents 76b4623 + 3585c05
commit 0b6b711
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 7 deletions.
diff --git a/examples/react-template/screens/Alert.tsx b/examples/react-template/screens/Alert.tsx
@@ -59,6 +59,13 @@ export const AlertScreen = (): JSX.Element => {
 
   return (
     <Section>
+      <Alert
+        banner
+        status={StatusState.INFO}
+        title="Banner Alert"
+        description="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.."
+      />
+
     <ToasterAlertProvider>
       <ToasterAlertView />
       <Container>
@@ -69,7 +76,6 @@ export const AlertScreen = (): JSX.Element => {
                 <Title level={TitleLevels.TWO}>StatusState : {status}</Title>
                 <Spacer size={10}/>
                 <Alert
-                  display
                   status={status}
                   title={status}
                   description="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.."

diff --git a/packages/react/components/alert/Alert.native.tsx b/packages/react/components/alert/Alert.native.tsx
@@ -55,12 +55,13 @@ const showToast: ToasterShowContext = (params: ToasterStatusProps) => {
  * @param display {Boolean} Display Alert component
  */
 const Alert = ({
+  banner,
   status,
   iconName,
   title,
   description,
   onClick,
-  display,
+  display = true,
   ...others
 }: AlertProps): JSX.Element => {
   const { color, backgroundColor } = getStatusStyle(status)
@@ -72,10 +73,11 @@ const Alert = ({
       paddingTop: 10,
       borderColor: status !== undefined ? color : backgroundColor,
       paddingBottom: 10,
-      borderWidth: 1,
+      borderWidth: banner? 0 : 1,
       backgroundColor: backgroundColor,
-      borderRadius: 6,
+      borderRadius: banner? 0 : 6,
       alignItems: "baseline",
+      textAlign: banner? 'center' : 'left',
       paddingLeft: 12,
       paddingRight: 12,
     },

diff --git a/packages/react/components/alert/Alert.tsx b/packages/react/components/alert/Alert.tsx
@@ -101,21 +101,22 @@ const ToasterAlert: React.FC<{ props: ToasterStatusProps }> = ({ props, ...other
  * @param testId {string} Test Id for Test Integration
  */
 const Alert = ({
+  banner,
   status,
   className,
   iconName,
   title,
   description,
   onClick,
-  display,
+  display = true,
   testId,
   ...others
 }: AlertProps): JSX.Element => {
   const { styled } = useTrilogyContext()
 
   const classes = hashClass(
     styled,
-    clsx("alert", has("body"), status && is(getStatusClassName(status)), className)
+    clsx("alert", has("body"), status && is(getStatusClassName(status)), banner && is('banner'), className)
   )
 
   const iconAlert = React.useMemo(() => {

diff --git a/packages/react/components/alert/AlertProps.ts b/packages/react/components/alert/AlertProps.ts
@@ -35,4 +35,5 @@ export interface AlertProps extends StatusProps, Clickable, Accessibility {
   className?: string
   display?: boolean
   toaster?: boolean
+  banner?: boolean
 }
diff --git a/packages/styles/framework/src/elements/_alert.scss b/packages/styles/framework/src/elements/_alert.scss
@@ -18,6 +18,14 @@ a.alert {
   box-shadow: none;
   padding: $spacing-4;
 
+  &.is-banner {
+
+    text-align: center;
+    border-radius: 0;
+    border: none !important;
+
+  }
+
   .text:first-child,
   .title:first-child {
     line-height: normal;

diff --git a/packages/styles/framework/src/elements/_paragraph.scss b/packages/styles/framework/src/elements/_paragraph.scss
@@ -13,7 +13,9 @@ $text-levels-mobile: (
 
 
 .text {
-        @each $text-level in $text-levels {
+  line-height: $text-20;
+
+  @each $text-level in $text-levels {
             $i: index($text-levels, $text-level);
             $font-size: nth($text-level, 1);
             $line-height: nth($text-level, 2);