diff --git a/libs/react-components/src/lib/assets/close.svg b/libs/react-components/src/lib/assets/close.svg deleted file mode 100644 index ce765b6..0000000 --- a/libs/react-components/src/lib/assets/close.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/libs/react-components/src/lib/assets/world-icon.svg b/libs/react-components/src/lib/assets/world-icon.svg deleted file mode 100644 index b0ce009..0000000 --- a/libs/react-components/src/lib/assets/world-icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/libs/react-components/src/lib/components/Alert/Alert.stories.tsx b/libs/react-components/src/lib/components/Alert/Alert.stories.tsx index 66779eb..13b8356 100644 --- a/libs/react-components/src/lib/components/Alert/Alert.stories.tsx +++ b/libs/react-components/src/lib/components/Alert/Alert.stories.tsx @@ -1,25 +1,37 @@ import type { Meta, StoryObj } from '@storybook/react'; - import Alert from './index'; +import IconButton from '../IconButton'; 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; - - export default meta; - type Story = StoryObj; + 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: { + icon: 'info', + titleText: 'Alert title', + descriptionText: 'Alert description', + state: 'active', + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Basic: Story = {}; - export const Basic: Story = {}; \ No newline at end of file +export const ActionElements: Story = { + render: (args) => { + return ( + +
+ +
+ + ); + }, +}; \ No newline at end of file diff --git a/libs/react-components/src/lib/components/Alert/index.tsx b/libs/react-components/src/lib/components/Alert/index.tsx index 0d79696..ac5d932 100644 --- a/libs/react-components/src/lib/components/Alert/index.tsx +++ b/libs/react-components/src/lib/components/Alert/index.tsx @@ -1,79 +1,28 @@ -import React, { useState } from 'react'; -import world from '../../assets/world-icon.svg'; -import close from '../../assets/close.svg'; +import { CovalentAlert } from '@covalent/components/alert'; +import { createComponent } from '@lit/react'; +import React from 'react'; +import '@covalent/components/icon'; 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; + icon: string; + titleText: string; + descriptionText: string; + state: string; } +const AlertComponent = createComponent({ + tagName: 'cv-alert', + elementClass: CovalentAlert as never, + react: React, +}); -const Alert: React.FC = ({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; - } - +const Alert: React.FC = (props) => { return ( -
-
- Imagen -
-
-

{text1}

-
-
- - -
- {isModalOpen && ( -
-
- × -

{header}

-
-

{text2}

-
-
- )} +
+
- - ); }; Alert.displayName = 'Alert'; - -export default Alert; +export default Alert; \ No newline at end of file diff --git a/libs/react-components/src/lib/components/Alert/styles.module.scss b/libs/react-components/src/lib/components/Alert/styles.module.scss index ac53635..2d94012 100644 --- a/libs/react-components/src/lib/components/Alert/styles.module.scss +++ b/libs/react-components/src/lib/components/Alert/styles.module.scss @@ -1,115 +1,3 @@ - -.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); - } \ No newline at end of file +.alertWrapper { + position: relative; +} \ No newline at end of file diff --git a/libs/react-components/src/lib/styles.scss b/libs/react-components/src/lib/styles.scss index ee909e7..4e8c09b 100644 --- a/libs/react-components/src/lib/styles.scss +++ b/libs/react-components/src/lib/styles.scss @@ -88,18 +88,6 @@ $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