-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Vega
committed
Aug 16, 2024
1 parent
5d8e00b
commit 531fb5f
Showing
6 changed files
with
52 additions
and
221 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
52 changes: 32 additions & 20 deletions
52
libs/react-components/src/lib/components/Alert/Alert.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<typeof Alert>; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof 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: { | ||
| icon: 'info', | ||
| titleText: 'Alert title', | ||
| descriptionText: 'Alert description', | ||
| state: 'active', | ||
| }, | ||
| } satisfies Meta<typeof Alert>; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof meta>; | ||
|
|
||
| export const Basic: Story = {}; | ||
|
|
||
| export const Basic: Story = {}; | ||
| export const ActionElements: Story = { | ||
| render: (args) => { | ||
| return ( | ||
| <Alert {...args}> | ||
| <div slot="action-items"> | ||
| <IconButton icon="close" /> | ||
| </div> | ||
| </Alert> | ||
| ); | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<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; | ||
| } | ||
|
|
||
| const Alert: React.FC<AlertProps> = (props) => { | ||
| 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}>×</span> | ||
| <p className={styles.header}>{header}</p> | ||
| <div className={styles.spacer}></div> | ||
| <p className={styles.textDisclaimer}>{text2}</p> | ||
| </div> | ||
| </div> | ||
| )} | ||
| <div className={styles.alertWrapper}> | ||
| <AlertComponent {...props}></AlertComponent> | ||
| </div> | ||
|
|
||
|
|
||
| ); | ||
| }; | ||
|
|
||
| Alert.displayName = 'Alert'; | ||
|
|
||
| export default Alert; | ||
| export default Alert; |
118 changes: 3 additions & 115 deletions
118
libs/react-components/src/lib/components/Alert/styles.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| } | ||
| .alertWrapper { | ||
| position: relative; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters