-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat(web-react): Add minimalistic footer demo #DS-1574
- Loading branch information
1 parent
195179a
commit b175add
Showing
13 changed files
with
197 additions
and
14 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
export const PADDING_BOTTOM = 'space-1200'; | ||
export const PADDING_TOP = 'space-1400'; |
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
80 changes: 80 additions & 0 deletions
80
packages/web-react/src/components/Footer/demo/FooterMinimalistic.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,80 @@ | ||
import React from 'react'; | ||
import { Container } from '../../Container'; | ||
import { Flex } from '../../Flex'; | ||
import { Grid, GridItem } from '../../Grid'; | ||
import { Link } from '../../Link'; | ||
import { ProductLogo } from '../../ProductLogo'; | ||
import { defaultSvgLogo } from '../../ProductLogo/demo/ProductLogoDefault'; | ||
import { Select } from '../../Select'; | ||
import Footer from '../Footer'; | ||
|
||
const FooterMinimalistic = () => { | ||
return ( | ||
<Footer paddingBottom="space-900" paddingTop="space-900"> | ||
<Container> | ||
{/* Grid with product logo, social media links and language switch */} | ||
<Grid | ||
cols={{ mobile: 1, desktop: 12 }} | ||
alignmentX={{ mobile: 'center', desktop: 'stretch' }} | ||
alignmentY="center" | ||
spacingY="space-1100" | ||
> | ||
{/* Product logo */} | ||
<GridItem columnStart={{ desktop: 1 }} columnEnd={{ desktop: 4 }}> | ||
<div className="text-desktop-left"> | ||
<Link href="https://www.example.com"> | ||
<ProductLogo>{defaultSvgLogo}</ProductLogo> | ||
</Link> | ||
</div> | ||
</GridItem> | ||
|
||
{/* Flex with secondary links */} | ||
<GridItem columnStart={{ desktop: 4 }} columnEnd={{ desktop: 10 }}> | ||
<nav className="text-center" aria-label="Secondary links"> | ||
<Flex | ||
elementType="ul" | ||
direction={{ mobile: 'column', tablet: 'row' }} | ||
alignmentX={{ mobile: 'stretch', tablet: 'center' }} | ||
spacingX={{ mobile: 'space-600', tablet: 'space-900' }} | ||
isWrapping | ||
> | ||
<li> | ||
<Link href="https://www.example.com" color="secondary"> | ||
Legal notice | ||
</Link> | ||
</li> | ||
<li> | ||
<Link href="https://www.example.com" color="secondary"> | ||
Terms of service | ||
</Link> | ||
</li> | ||
<li> | ||
<Link href="https://www.example.com" color="secondary"> | ||
Privacy policy | ||
</Link> | ||
</li> | ||
<li> | ||
<Link href="https://www.example.com" color="secondary"> | ||
Manage cookies | ||
</Link> | ||
</li> | ||
</Flex> | ||
</nav> | ||
</GridItem> | ||
|
||
{/* Language switch */} | ||
<GridItem columnStart={{ desktop: 11 }} columnEnd={{ desktop: 13 }}> | ||
<div className="text-desktop-right"> | ||
<Select id="select-language" name="selectLanguage" label="Language" isLabelHidden isFluid> | ||
<option value="en">English</option> | ||
<option value="cs">Čeština</option> | ||
</Select> | ||
</div> | ||
</GridItem> | ||
</Grid> | ||
</Container> | ||
</Footer> | ||
); | ||
}; | ||
|
||
export default FooterMinimalistic; |
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 |
---|---|---|
@@ -1 +1 @@ | ||
{{> web-react/demo}} | ||
{{> web-react/demo title="Footer" parentPageName="Components"}} |
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
24 changes: 24 additions & 0 deletions
24
packages/web-react/src/components/Footer/useFooterStyleProps.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,24 @@ | ||
import classNames from 'classnames'; | ||
import { SpiritFooterProps } from '../../types'; | ||
|
||
export interface UseFooterStyleProps { | ||
classProps: string; | ||
} | ||
|
||
export function useFooterStyleProps(props: Partial<SpiritFooterProps>): UseFooterStyleProps { | ||
const { backgroundColor, paddingBottom, paddingTop } = props; | ||
|
||
const footerBackgroundColor = backgroundColor ? `bg-${backgroundColor}` : ''; | ||
const footerPaddingBottom = paddingBottom ? paddingBottom.replace('space-', 'pb-') : ''; | ||
const footerPaddingTop = paddingTop ? paddingTop.replace('space-', 'pt-') : ''; | ||
|
||
const classProps = classNames({ | ||
[footerBackgroundColor]: backgroundColor, | ||
[footerPaddingBottom]: paddingBottom, | ||
[footerPaddingTop]: paddingTop, | ||
}); | ||
|
||
return { | ||
classProps, | ||
}; | ||
} |
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,3 +1,9 @@ | ||
import { ChildrenProps, StyleProps, TransferProps } from './shared'; | ||
import { BackgroundColorsDictionaryType, ChildrenProps, SpaceToken, StyleProps, TransferProps } from './shared'; | ||
|
||
export interface SpiritFooterProps extends ChildrenProps, StyleProps, TransferProps {} | ||
export interface FooterStyleProps { | ||
paddingTop?: SpaceToken; | ||
paddingBottom?: SpaceToken; | ||
backgroundColor?: BackgroundColorsDictionaryType; | ||
} | ||
|
||
export interface SpiritFooterProps extends FooterStyleProps, ChildrenProps, StyleProps, TransferProps {} |
Binary file modified
BIN
+13.1 KB
(120%)
tests/e2e/demo-components-compare.spec.ts-snapshots/footer-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.