-
Notifications
You must be signed in to change notification settings - Fork 48
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add news AssetModal components for picture, video and swiper Modal
- Loading branch information
1 parent
5a750ab
commit c5f33d7
Showing
9 changed files
with
338 additions
and
1 deletion.
There are no files selected for viewing
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
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
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 |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| import React from 'react' | ||
| import { Box } from '@welcome-ui/box' | ||
| import { Text } from '@welcome-ui/text' | ||
| import styled from '@xstyled/styled-components' | ||
|
|
||
| import { Iframe } from './styles' | ||
|
|
||
| type AssetWithTitleProps = { | ||
| children: React.ReactNode | ||
| subtitle?: JSX.Element | ||
| title: JSX.Element | ||
| } | ||
|
|
||
| const titleBlockMobile = '4rem' | ||
| const titleBlockDesktop = '6rem' | ||
|
|
||
| const Wrapper = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| > img { | ||
| width: auto; | ||
| max-width: fit-content; | ||
| max-height: calc(100vh - 2 * 5rem - ${titleBlockMobile}); | ||
| flex-shrink: 0; | ||
| @media (min-width: md) { | ||
| max-height: calc(100vh - 2 * 5rem - ${titleBlockDesktop}); | ||
| } | ||
| } | ||
| ${Iframe} { | ||
| background-color: dark-900; | ||
| max-height: calc(100vh - 2 * 5rem - ${titleBlockMobile}); | ||
| @media (min-width: md) { | ||
| max-height: calc(100vh - 2 * 5rem - ${titleBlockDesktop}); | ||
| } | ||
| } | ||
| ` | ||
|
|
||
| export const AssetWithTitle: React.FC<AssetWithTitleProps> = ({ children, subtitle, title }) => { | ||
| return ( | ||
| <Wrapper> | ||
| {children} | ||
| <Box | ||
| backgroundColor="light-900" | ||
| display="flex" | ||
| flexDirection="column" | ||
| flexShrink={0} | ||
| gap="xxs" | ||
| h={{ _: titleBlockMobile, md: titleBlockDesktop }} | ||
| justifyContent="center" | ||
| px={{ _: 'md', md: 'xl' }} | ||
| w="100%" | ||
| > | ||
| {subtitle && <Text variant="subtitle-sm">{subtitle}</Text>} | ||
| <Text lines={1} m="0" variant="h4"> | ||
| {title} | ||
| </Text> | ||
| </Box> | ||
| </Wrapper> | ||
| ) | ||
| } |
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 |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import React from 'react' | ||
| import * as Ariakit from '@ariakit/react' | ||
| import { Button } from '@welcome-ui/button' | ||
| import { Icons } from '@welcome-ui/icons.font' | ||
| import styled, { system } from '@xstyled/styled-components' | ||
|
|
||
| import * as S from '../styles' | ||
|
|
||
| export const CloseButton = styled(Button)` | ||
| position: absolute; | ||
| right: xl; | ||
| top: xl; | ||
| /* Hack for secondary variant on dark mode */ | ||
| color: dark-900; | ||
| border-color: light-900; | ||
| background-color: light-900; | ||
| &:hover { | ||
| background-color: light-700; | ||
| } | ||
| ${system} | ||
| ` | ||
|
|
||
| export const Backdrop = React.forwardRef<HTMLDivElement>((props, ref) => { | ||
| return ( | ||
| <S.Backdrop backgroundColor="rgba(0, 0, 0, 0.9)" {...props} ref={ref}> | ||
| <Ariakit.DialogDismiss | ||
| render={ | ||
| <CloseButton shape="circle" variant="secondary"> | ||
| <Icons.Cross /> | ||
| </CloseButton> | ||
| } | ||
| /> | ||
| </S.Backdrop> | ||
| ) | ||
| }) |
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 |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import React from 'react' | ||
| import { Box } from '@welcome-ui/box' | ||
|
|
||
| import * as S from './styles' | ||
|
|
||
| type IframeProps = { | ||
| children: React.ReactHTMLElement<HTMLIFrameElement> | ||
| } | ||
|
|
||
| export const Iframe = ({ children }: IframeProps) => { | ||
| return ( | ||
| <S.Iframe> | ||
| <Box h="100%" margin="0 auto" style={{ aspectRatio: 16 / 9 }}> | ||
| {children} | ||
| </Box> | ||
| </S.Iframe> | ||
| ) | ||
| } |
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 |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { AssetWithTitle } from './AssetWithTitle' | ||
| import { Backdrop } from './Backdrop' | ||
| import { Iframe } from './Iframe' | ||
| import { Content, Dialog } from './styles' | ||
|
|
||
| // Nested exports | ||
| export const Assets = Object.assign(Dialog, { | ||
| AssetWithTitle, | ||
| Backdrop, | ||
| Content, | ||
| Iframe, | ||
| }) |
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 |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import styled, { th } from '@xstyled/styled-components' | ||
|
|
||
| const contentWidthDesktop = 'calc(100vw - 2 * 2rem);' | ||
| const contentWidthMobile = 'calc(100vw - 2 * 1rem);' | ||
| const contentHeight = 'calc(100vh - 2 * 5rem);' | ||
|
|
||
| export const Iframe = styled.div` | ||
| width: ${contentWidthMobile}; | ||
| max-height: ${contentHeight}; | ||
| flex: 1; | ||
| max-width: 1600; | ||
| @media (min-width: md) { | ||
| aspect-ratio: 16 / 9; | ||
| width: ${contentWidthDesktop}; | ||
| } | ||
| iframe { | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| ` | ||
|
|
||
| export const Content = styled.div` | ||
| display: block; | ||
| transition: margin-top 250ms ease-in-out; | ||
| > img, | ||
| > div { | ||
| max-width: ${contentWidthMobile}; | ||
| max-height: ${contentHeight}; | ||
| @media (min-width: md) { | ||
| max-width: ${contentWidthDesktop}; | ||
| } | ||
| } | ||
| ` | ||
|
|
||
| export const Dialog = styled.div` | ||
| ${th('modals.default')}; | ||
| position: fixed; | ||
| inset: 0; | ||
| margin: auto; | ||
| display: flex; | ||
| height: fit-content; | ||
| width: fit-content; | ||
| flex-direction: column; | ||
| opacity: 0; | ||
| transition: opacity 250ms ease-in-out; | ||
| &[data-enter] { | ||
| opacity: 1; | ||
| ${Content} { | ||
| margin-top: 0; | ||
| } | ||
| } | ||
| ` |
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
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