-
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
32e929c
commit b3defb1
Showing
9 changed files
with
151 additions
and
12 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
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"}} |
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 {} |