feat(extension): add midnight pre-launch settings banner LW-10398 #1156
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| .card { | ||
| background-image: var(--midnight-pre-launch-banner-image); | ||
| background-size: cover; | ||
| background-position: center right; | ||
| padding: 30px 20px 30px 20px; | ||
| } | ||
|
|
||
| .heading { | ||
| color: white; | ||
| font-size: 18px; | ||
| line-height: 24px; | ||
| margin-bottom: 10px; | ||
| font-weight: 700; | ||
| } | ||
|
|
||
| .description { | ||
| color: #A9A9A9; | ||
| font-size: 16px; | ||
| line-height: 24px; | ||
| font-weight: 500; | ||
| margin-bottom: 30px; | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import React from 'react'; | ||
| import type { Meta } from '@storybook/react'; | ||
| import { action } from '@storybook/addon-actions'; | ||
|
|
||
| import { Box } from '@lace/ui'; | ||
|
|
||
| import { MidnightPreLaunchSettingsBanner } from './index'; | ||
| import MidnightPreLaunchBannerImage from '../../assets/images/midnight-launch-event-sidebar-banner.png'; | ||
|
|
||
| export default { | ||
| title: 'Midnight/MidnightPreLaunchSettingsBanner' | ||
| } as Meta<typeof MidnightPreLaunchSettingsBanner>; | ||
|
|
||
| export const Overview = (): JSX.Element => ( | ||
| <> | ||
| <Box w="$312"> | ||
| <MidnightPreLaunchSettingsBanner | ||
| bannerImageUrl={MidnightPreLaunchBannerImage} | ||
| onCtaButtonClick={action('onCtaButtonClick')} | ||
| /> | ||
| </Box> | ||
| <Box w="$342"> | ||
| <MidnightPreLaunchSettingsBanner | ||
| bannerImageUrl={MidnightPreLaunchBannerImage} | ||
| onCtaButtonClick={action('onCtaButtonClick')} | ||
| /> | ||
| </Box> | ||
| <Box w="$420"> | ||
| <MidnightPreLaunchSettingsBanner | ||
| bannerImageUrl={MidnightPreLaunchBannerImage} | ||
| onCtaButtonClick={action('onCtaButtonClick')} | ||
| /> | ||
| </Box> | ||
| </> | ||
| ); |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import React from 'react'; | ||
| import { Button, Card } from '@lace/ui'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import styles from './MidnightPreLaunchSettingsBanner.module.scss'; | ||
|
|
||
| export const MidnightPreLaunchSettingsBanner = ({ | ||
| bannerImageUrl, | ||
|
There was a problem hiding this comment. I have mixed feelings about When I look at place where it is used I see this weird looking import I would recommend removing this prop, or making this component generic like There was a problem hiding this comment. The more I think about it, the more I like the idea of making this component generic one, especially that it's implementation is in There was a problem hiding this comment. @pczeglik-iohk I had to introduce the prop because the image must be used as CSS background (so that the rounded corners of the banner are correctly respected) AND unfortunately our core package doesn't correctly bundle css images (the path is simply retained and then wrong when component is imported in the extension) - I can move the image to the extension package but then what should be shown in the core storybook (it also acts as an example)? There was a problem hiding this comment. I agree with @DominikGuzei I think the issue is on the way we have of working and exporting images from There was a problem hiding this comment. @pczeglik-iohk sure, i can turn this into a generic component BUT it doesn't really make sense since the design is quite special in that it looks the same in light/dark theme (font colors). I'm not sure if it's the best case for a generic component tbh. |
||
| onCtaButtonClick | ||
| }: { | ||
| bannerImageUrl: string; | ||
| onCtaButtonClick?: () => void; | ||
| }): React.ReactElement => { | ||
| const { t } = useTranslation(); | ||
| return ( | ||
| <Card.Outlined | ||
| className={styles.card} | ||
| style={{ '--midnight-pre-launch-banner-image': `url(${bannerImageUrl})` } as React.CSSProperties} | ||
|
There was a problem hiding this comment. That was the only way I found to provide a background image via CSS variable to the component (since it didn't work to include the background-image in the compiled core component) |
||
| > | ||
| <div className={styles.heading}>{t('core.MidnightPreLaunchSettingsBanner.heading')}</div> | ||
| <div className={styles.description}>{t('core.MidnightPreLaunchSettingsBanner.description')}</div> | ||
| <Button.CallToAction | ||
| label={t('core.MidnightPreLaunchSettingsBanner.ctaButtonLabel')} | ||
| onClick={onCtaButtonClick} | ||
| w="$fill" | ||
| /> | ||
| </Card.Outlined> | ||
| ); | ||
| }; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { MidnightPreLaunchSettingsBanner } from './MidnightPreLaunchSettingsBanner'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please note that i tried to use
@lace/uitypography here instead of defining it all in CSS which turned out to be more trouble than good as this text is not standard (e.g: it looks the same in both themes) and i ran into override issues when trying to change the color via css then.