-
Notifications
You must be signed in to change notification settings - Fork 61
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into feat/payment-use-quantity-field
- Loading branch information
Showing
49 changed files
with
1,432 additions
and
283 deletions.
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
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
85 changes: 85 additions & 0 deletions
85
apps/web/layouts/organization/standalone/components/Header.css.ts
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,85 @@ | ||
| import { style } from '@vanilla-extract/css' | ||
|
|
||
| import { themeUtils } from '@island.is/island-ui/theme' | ||
|
|
||
| export const gridContainer = style({ | ||
| display: 'grid', | ||
| maxWidth: '1342px', | ||
| margin: '0 auto', | ||
| ...themeUtils.responsiveStyle({ | ||
| lg: { | ||
| gridTemplateRows: '315px', | ||
| gridTemplateColumns: '65fr 35fr', | ||
| }, | ||
| }), | ||
| }) | ||
|
|
||
| export const gridContainerSubpage = style({ | ||
| ...themeUtils.responsiveStyle({ | ||
| lg: { | ||
| gridTemplateRows: 'auto', | ||
| gridTemplateColumns: '100fr', | ||
| }, | ||
| }), | ||
| }) | ||
|
|
||
| export const gridContainerWidth = style({ | ||
| maxWidth: '1342px', | ||
| margin: '0 auto', | ||
| }) | ||
|
|
||
| export const textContainer = style({ | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| justifyContent: 'center', | ||
| textAlign: 'center', | ||
| ...themeUtils.responsiveStyle({ | ||
| xs: { | ||
| order: 1, | ||
| paddingTop: '32px', | ||
| paddingBottom: '20px', | ||
| }, | ||
| lg: { | ||
| order: 0, | ||
| }, | ||
| }), | ||
| }) | ||
|
|
||
| export const textContainerNoTitle = style({ | ||
| order: 0, | ||
| }) | ||
|
|
||
| export const textContainerSubpage = style({ | ||
| minHeight: '20px', | ||
| }) | ||
|
|
||
| export const textInnerContainer = style({ | ||
| paddingLeft: '16px', | ||
| paddingRight: '16px', | ||
| ...themeUtils.responsiveStyle({ | ||
| lg: { | ||
| height: '100%', | ||
| maxWidth: '100%', | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| }, | ||
| }), | ||
| }) | ||
|
|
||
| export const headerImage = style({ | ||
| width: '100%', | ||
| order: 1, | ||
| ...themeUtils.responsiveStyle({ | ||
| xs: { | ||
| maxHeight: '200px', | ||
| }, | ||
| lg: { | ||
| maxHeight: '100%', | ||
| }, | ||
| }), | ||
| }) | ||
|
|
||
| export const title = style({ | ||
| zIndex: 0, | ||
| }) |
95 changes: 95 additions & 0 deletions
95
apps/web/layouts/organization/standalone/components/Header.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 |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| import { useEffect, useState } from 'react' | ||
| import { useWindowSize } from 'react-use' | ||
| import cn from 'classnames' | ||
|
|
||
| import { ResponsiveSpace, Text, TextProps } from '@island.is/island-ui/core' | ||
| import { theme } from '@island.is/island-ui/theme' | ||
|
|
||
| import * as styles from './Header.css' | ||
|
|
||
| export interface HeaderProps { | ||
| fullWidth?: boolean | ||
| image?: string | ||
| background?: string | ||
| mobileBackground?: string | null | ||
| underTitle?: string | ||
| titleSectionPaddingLeft?: ResponsiveSpace | ||
| titleColor?: TextProps['color'] | ||
| imagePadding?: string | ||
| imageIsFullHeight?: boolean | ||
| imageObjectFit?: 'contain' | 'cover' | ||
| imageObjectPosition?: 'left' | 'center' | 'right' | ||
| className?: string | ||
| isFrontpage?: boolean | ||
| } | ||
|
|
||
| export const Header: React.FC<React.PropsWithChildren<HeaderProps>> = ({ | ||
| fullWidth, | ||
| image, | ||
| background, | ||
| mobileBackground, | ||
| underTitle, | ||
| titleColor = 'dark400', | ||
| imagePadding = '20px', | ||
| imageIsFullHeight = true, | ||
| imageObjectFit = 'contain', | ||
| imageObjectPosition = 'center', | ||
| className, | ||
| isFrontpage = false, | ||
| }) => { | ||
| const { width } = useWindowSize() | ||
| const imageProvided = !!image | ||
|
|
||
| const [isMobile, setIsMobile] = useState(false) | ||
|
|
||
| useEffect(() => { | ||
| setIsMobile(width < theme.breakpoints.lg) | ||
| }, [width]) | ||
| return ( | ||
| <div | ||
| className={cn({ [styles.gridContainerWidth]: !fullWidth })} | ||
| style={{ | ||
| background: isMobile ? mobileBackground || background : background, | ||
| }} | ||
| > | ||
| <div | ||
| className={cn( | ||
| { | ||
| [styles.gridContainer]: !className, | ||
| [styles.gridContainerSubpage]: !isFrontpage, | ||
| }, | ||
| className, | ||
| )} | ||
| > | ||
| <div | ||
| className={cn({ | ||
| [styles.textContainerNoTitle]: isFrontpage && !underTitle, | ||
| [styles.textContainer]: isFrontpage && underTitle, | ||
| [styles.textContainerSubpage]: !isFrontpage, | ||
| })} | ||
| > | ||
| {underTitle && isFrontpage && ( | ||
| <div className={cn(styles.textInnerContainer)}> | ||
| <Text variant="h1" as="h1" color={titleColor}> | ||
| {underTitle} | ||
| </Text> | ||
| </div> | ||
| )} | ||
| </div> | ||
| {imageProvided && isFrontpage && ( | ||
| <img | ||
| style={{ | ||
| padding: imagePadding, | ||
| objectFit: imageObjectFit, | ||
| objectPosition: imageObjectPosition, | ||
| height: imageIsFullHeight ? '100%' : undefined, | ||
| }} | ||
| className={styles.headerImage} | ||
| src={image} | ||
| alt="" | ||
| /> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
28 changes: 28 additions & 0 deletions
28
apps/web/layouts/organization/standalone/components/MobileMenu.css.ts
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,28 @@ | ||
| import { style } from '@vanilla-extract/css' | ||
|
|
||
| import { theme } from '@island.is/island-ui/theme' | ||
|
|
||
| export const container = style({ | ||
| overflowY: 'auto', | ||
| overflowX: 'hidden', | ||
| width: '80%', | ||
| height: '100%', | ||
| maxWidth: '305px', | ||
| marginLeft: 'auto', | ||
| background: theme.color.white, | ||
| padding: '37px 24px', | ||
| boxShadow: '-5px 4px 10px 4px rgba(0, 0, 0, 0.2)', | ||
| }) | ||
|
|
||
| export const icon = style({ | ||
| marginRight: '20px', | ||
| }) | ||
|
|
||
| export const mobileContent = style({ | ||
| marginTop: '40px', | ||
| }) | ||
|
|
||
| export const links = style({ | ||
| paddingLeft: '10px', | ||
| paddingRight: '10px', | ||
| }) |
Oops, something went wrong.