alert MAT disclaimer

libs/react-components/src/lib/components/Alert/Alert.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Alert from './index';
+
+const meta = {
+    title: 'Components/Alert',
+    component: Alert,
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+    parameters: {
+      // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+      layout: 'fullscreen',
+    },
+    args: {
+      text1: 'Translations are provided by machine translation. In the event of any discrepancy, inconsistency or inconsistency between the translation provided and the English version, the English version shall prevail.',
+      label: 'Learn more',
+      header:'Machine assisted translation',
+      text2:'Machine-assisted translations of any material into languages ​​other than English are intended solely for the convenience of users who do not read English and are not legally binding. Any person relying on such information does so at his or her own risk. No automated translation is perfect or intended to replace human translators. Teradata makes no promises or warranties as to the accuracy of the machine-assisted translations provided. Teradata accepts no responsibility and will not be liable for any damages or problems that may result from the use of such translations. Users are reminded to use the content in English.'
+    },
+  } satisfies Meta<typeof Alert>;
+
+  export default meta;
+  type Story = StoryObj<typeof meta>;
+
+  export const Basic: Story = {};

libs/react-components/src/lib/components/Alert/index.tsx

@@ -0,0 +1,79 @@
+import React,  { useState }  from 'react';
+import world from '../../assets/world-icon.svg';
+import close from '../../assets/close.svg';
+import styles from './styles.module.scss';
+
+interface AlertProps {
+  /**
+   * Content to be displayed in the Alert 
+   */
+  text1: string;
+  /**
+   * The label of the link
+   */
+  label: string;
+  header: string;
+  text2: string;
+}
+
+const Alert: React.FC<AlertProps> = ({text1, label, header, text2}) => {
+    const [visible, setVisible] = useState(true);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    const handleClose = () => {
+        setVisible(false);
+    };
+    const handleLearnMoreClick = () => {
+        setIsModalOpen(true);
+      };
+
+      const handleModalClose = () => {
+        setIsModalOpen(false);
+      };
+    if (!visible) {
+        return null;  
+    }
+
+  return (
+    <div className={styles.disclaimer}>
+        <div className={styles.img}>
+            <img src={world} alt="Imagen" height="24px" width="24px" />
+        </div>
+        <div className={styles.content}>
+            <p>{text1}</p>
+        </div>    
+        <div className={styles.linkContainer}>
+            <button 
+                type="button" 
+                className={styles.info}
+                onClick={handleLearnMoreClick}
+            >
+                {label}
+            </button>
+            <button 
+                type="button"
+                className={styles.close}
+                onClick={handleClose}
+            >
+                <img src={close} alt="Close" height="24px" width="24px" />
+            </button>
+        </div>
+        {isModalOpen && (
+        <div className={styles.modal}>
+            <div className={styles.modalContent}>
+                <span className={styles.modalClose} onClick={handleModalClose}>&times;</span>
+                <p className={styles.header}>{header}</p>
+                <div className={styles.spacer}></div>
+                <p className={styles.textDisclaimer}>{text2}</p>
+            </div>
+        </div>
+        )}
+    </div>
+
+
+  );
+};
+
+Alert.displayName = 'Alert';
+
+export default Alert;

libs/react-components/src/lib/components/Alert/styles.module.scss

@@ -0,0 +1,115 @@
+
+.disclaimer {
+    display: flex;
+    width: 100%; 
+    max-width: 1440px;
+    min-height: 64px;
+    background: var(--primary-bg-color);
+    padding: 10px;
+}
+
+.img {
+    padding-top: 20px;
+    margin-left: 24px;
+    margin-right: 24px;
+}
+
+.content {
+    align-self: stretch;
+    color: var(--cv-theme-on-primary-container);
+    font-feature-settings: 'liga' off, 'clig' off;
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;  
+}
+.linkContainer {
+    padding: 0 16px 0 16px;
+    display: flex;
+    align-items: center;  
+}
+.info{
+    color: var(--link-color);
+    text-align: center;
+    font-feature-settings: 'liga' off, 'clig' off;
+    /* Button */
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; 
+    text-decoration: none;
+    white-space: nowrap; 
+    margin-right: 16px;  
+}
+
+.close {
+    display: flex;  
+    align-items: center;  
+}
+
+button{
+    background: none;
+    border: none;
+    cursor: pointer;
+}
+
+
+/*modal*/
+.modal {
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: var(--modal-bg-color);
+  }
+
+  .modalContent {
+    background-color: var(--modal-content-bg);
+    margin: 15% auto;
+    padding: 20px;
+    border-radius: 8px;
+    width: 80%;
+    max-width: 500px;
+    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
+  }
+
+  .modalClose {
+    color: var(--modal-close-color);
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .modalClose:hover,
+  .modalClose:focus {
+    color: var(--modal-close-hover);
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .spacer {
+    border: var(--spacer-color) 1px solid;
+    }
+
+   .header{
+        font-family: Inter;
+        font-style: normal;
+        font-weight: 600;
+        font-size: 20px;
+        line-height: 28px ;
+        letter-spacing: .15px;
+        color: var(--header-text-color);
+   } 
+
+   .textDisclaimer{
+        font-family: Inter;
+        font-style: normal;
+        font-size: 14px;
+        line-height: 18px;
+        letter-spacing: .5px;
+        color: var(--text-disclaimer-color);
+   }

libs/react-components/src/lib/styles.scss

@@ -88,6 +88,18 @@ $dark-colors: map-merge($dark-colors, map-get(covalent-tokens.$tokens, 'dark'));
   --td-web-typography-headline3-font-weight: 600;
   --td-web-typography-headline3-letter-spacing: -0.24px;
   --td-web-typography-headline3-line-height: 34px;
+
+  //Alert mat disclaimer
+  --primary-bg-color: #DEEAFA;
+  --cv-theme-on-primary-container: #00115A;
+  --link-color: #001D33;
+  --modal-bg-color: rgba(0, 0, 0, 0.4);
+  --modal-content-bg: #fff;
+  --modal-close-color: #aaa;
+  --modal-close-hover: black;
+  --header-text-color: rgba(0, 0, 0, .87);
+  --text-disclaimer-color: rgba(0, 0, 0, .87);
+  --spacer-color: #e6e6e6;
 }
 
 // Dark theme class