Skip to content

Commit

Permalink
fixup! fixup! fixup! fixup! Feat(web-react): Introduce Footer compone…
Browse files Browse the repository at this point in the history 
…nt #DS-1368
  • Loading branch information
@pavelklibani
pavelklibani committed Sep 26, 2024
1 parent f50e128 commit e118dc5
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 56 deletions.
34 changes: 17 additions & 17 deletions packages/web-react/docs/stories/examples/FooterContent.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { Button } from '../../../src/components/Button';
import { ButtonLink } from '../../../src/components/ButtonLink';
import { Container } from '../../../src/components/Container';
import { Divider } from '../../../src/components/Divider';
import { Flex } from '../../../src/components/Flex';
Expand Down Expand Up @@ -264,7 +264,7 @@ export const FooterCompositions = (args: FooterCompositionsProps) => {
)}

{/* Divider */}
{showDividers && numberOfLinkColumns > 0 && <Divider UNSAFE_className="my-900" />}
{showDividers && numberOfLinkColumns > 0 && <Divider marginY="space-900" />}

{/* Grid with product logo, social media links and language switch */}
<Grid
Expand All @@ -285,34 +285,34 @@ export const FooterCompositions = (args: FooterCompositionsProps) => {
{showSocialMediaButtons && (
<Flex elementType="ul" alignmentX={showLanguageSwitch ? 'center' : 'right'} alignmentY="center">
<li>
<Button elementType="a" size="medium" color="secondary" isSquare>
<ButtonLink size="medium" color="secondary" isSquare>
<span className="accessibility-hidden">Facebook</span>
<Icon name="logo-facebook" />
</Button>
</ButtonLink>
</li>
<li>
<Button elementType="a" size="medium" color="secondary" isSquare>
<ButtonLink size="medium" color="secondary" isSquare>
<span className="accessibility-hidden">X</span>
<Icon name="logo-x" />
</Button>
</ButtonLink>
</li>
<li>
<Button elementType="a" size="medium" color="secondary" isSquare>
<ButtonLink size="medium" color="secondary" isSquare>
<span className="accessibility-hidden">YouTube</span>
<Icon name="logo-youtube" />
</Button>
</ButtonLink>
</li>
<li>
<Button elementType="a" size="medium" color="secondary" isSquare>
<ButtonLink size="medium" color="secondary" isSquare>
<span className="accessibility-hidden">Google</span>
<Icon name="logo-google" />
</Button>
</ButtonLink>
</li>
<li>
<Button elementType="a" size="medium" color="secondary" isSquare>
<ButtonLink size="medium" color="secondary" isSquare>
<span className="accessibility-hidden">LinkedIn</span>
<Icon name="logo-linkedin" />
</Button>
</ButtonLink>
</li>
</Flex>
)}
Expand All @@ -329,7 +329,7 @@ export const FooterCompositions = (args: FooterCompositionsProps) => {
</Grid>

{/* Divider */}
{showDividers && showSecondaryLinks && <Divider UNSAFE_className="my-900" />}
{showDividers && showSecondaryLinks && <Divider marginY="space-900" />}

{/* Flex with secondary links */}
{showSecondaryLinks && (
Expand All @@ -342,22 +342,22 @@ export const FooterCompositions = (args: FooterCompositionsProps) => {
isWrapping
>
<li>
<Link href="https://www.example.com" UNSAFE_className="link-secondary">
<Link href="https://www.example.com" color="secondary">
Legal notice
</Link>
</li>
<li>
<Link href="https://www.example.com" UNSAFE_className="link-secondary">
<Link href="https://www.example.com" color="secondary">
Terms of service
</Link>
</li>
<li>
<Link href="https://www.example.com" UNSAFE_className="link-secondary">
<Link href="https://www.example.com" color="secondary">
Privacy policy
</Link>
</li>
<li>
<Link href="https://www.example.com" UNSAFE_className="link-secondary">
<Link href="https://www.example.com" color="secondary">
Manage cookies
</Link>
</li>
Expand Down
32 changes: 16 additions & 16 deletions packages/web-react/src/components/Footer/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,16 +90,16 @@ Use the [Product Logo][product-logo] component to display the logo of your produ

### Social Media Links

Use the secondary [Button][button] component to create social media links inside a [Flex][flex] container.
Use the secondary [ButtonLink][buttonlink] component to create social media links inside a [Flex][flex] container.

```jsx
<Flex elementType="ul" alignmentX="center" alignmentY="center">
{/* Repeat the `<li>` block for each social media link. */}
<li>
<Button elementType="a" size="medium" color="secondary" isSquare>
<ButtonLink size="medium" color="secondary" isSquare>
<span className="accessibility-hidden">Facebook</span>
<Icon name="logo-facebook" />
</Button>
</ButtonLink>
</li>
<Flex>
```
Expand Down Expand Up @@ -161,7 +161,7 @@ This section is optional and consists of a [Flex][flex] layout with secondary li
</Grid>

{/* Divider */}
<Divider UNSAFE_className="my-900" />
<Divider marginY="space-900" />

{/* Grid with product logo, social media links and language switch */}
<Grid
Expand All @@ -180,22 +180,22 @@ This section is optional and consists of a [Flex][flex] layout with secondary li
{/* Flex with social media links */}
<Flex elementType="ul" alignmentX="center" alignmentY="center">
<li>
<Button elementType="a" size="medium" color="secondary" isSquare>
<ButtonLinkLink size="medium" color="secondary" isSquare>
<span className="accessibility-hidden">Facebook</span>
<Icon name="logo-facebook" />
</Button>
</ButtonLink>
</li>
<li>
<Button elementType="a" size="medium" color="secondary" isSquare>
<ButtonLinkLink size="medium" color="secondary" isSquare>
<span className="accessibility-hidden">X</span>
<Icon name="logo-x" />
</Button>
</ButtonLink>
</li>
<li>
<Button elementType="a" size="medium" color="secondary" isSquare>
<ButtonLinkLink size="medium" color="secondary" isSquare>
<span className="accessibility-hidden">YouTube</span>
<Icon name="logo-youtube" />
</Button>
</ButtonLink>
</li>
</Flex>

Expand All @@ -209,7 +209,7 @@ This section is optional and consists of a [Flex][flex] layout with secondary li
</Grid>

{/* Divider */}
<Divider UNSAFE_className="my-900" />
<Divider marginY="space-900" />

{/* Flex with secondary links */}
<nav aria-label="Secondary links">
Expand All @@ -221,22 +221,22 @@ This section is optional and consists of a [Flex][flex] layout with secondary li
isWrapping
>
<li>
<Link href="https://www.example.com" UNSAFE_className="link-secondary">
<Link href="https://www.example.com" color="secondary">
Legal notice
</Link>
</li>
<li>
<Link href="https://www.example.com" UNSAFE_className="link-secondary">
<Link href="https://www.example.com" color="secondary">
Terms of service
</Link>
</li>
<li>
<Link href="https://www.example.com" UNSAFE_className="link-secondary">
<Link href="https://www.example.com" color="secondary">
Privacy policy
</Link>
</li>
<li>
<Link href="https://www.example.com" UNSAFE_className="link-secondary">
<Link href="https://www.example.com" color="secondary">
Manage cookies
</Link>
</li>
Expand All @@ -246,7 +246,7 @@ This section is optional and consists of a [Flex][flex] layout with secondary li
</Footer>
```

[button]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Button/README.md
[buttonlink]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/ButtonLink/README.md
[divider]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Divider/README.md
[flex]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Flex/README.md
[grid]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Grid/README.md
Expand Down
34 changes: 17 additions & 17 deletions packages/web-react/src/components/Footer/demo/FooterDefault.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { Button } from '../../Button';
import { ButtonLink } from '../../ButtonLink';
import { Container } from '../../Container';
import { Divider } from '../../Divider';
import { Flex } from '../../Flex';
Expand Down Expand Up @@ -86,7 +86,7 @@ const FooterDefault = () => {
</Grid>

{/* Divider */}
<Divider UNSAFE_className="my-900" />
<Divider marginY="space-900" />

{/* Grid with product logo, social media links and language switch */}
<Grid
Expand All @@ -105,34 +105,34 @@ const FooterDefault = () => {
{/* Flex with social media links */}
<Flex elementType="ul" alignmentX="center" alignmentY="center">
<li>
<Button elementType="a" size="medium" color="secondary" isSquare>
<ButtonLink size="medium" color="secondary" isSquare>
<span className="accessibility-hidden">Facebook</span>
<Icon name="logo-facebook" />
</Button>
</ButtonLink>
</li>
<li>
<Button elementType="a" size="medium" color="secondary" isSquare>
<ButtonLink size="medium" color="secondary" isSquare>
<span className="accessibility-hidden">X</span>
<Icon name="logo-x" />
</Button>
</ButtonLink>
</li>
<li>
<Button elementType="a" size="medium" color="secondary" isSquare>
<ButtonLink size="medium" color="secondary" isSquare>
<span className="accessibility-hidden">YouTube</span>
<Icon name="logo-youtube" />
</Button>
</ButtonLink>
</li>
<li>
<Button elementType="a" size="medium" color="secondary" isSquare>
<ButtonLink size="medium" color="secondary" isSquare>
<span className="accessibility-hidden">Google</span>
<Icon name="logo-google" />
</Button>
</ButtonLink>
</li>
<li>
<Button elementType="a" size="medium" color="secondary" isSquare>
<ButtonLink size="medium" color="secondary" isSquare>
<span className="accessibility-hidden">LinkedIn</span>
<Icon name="logo-linkedin" />
</Button>
</ButtonLink>
</li>
</Flex>

Expand All @@ -146,7 +146,7 @@ const FooterDefault = () => {
</Grid>

{/* Divider */}
<Divider UNSAFE_className="my-900" />
<Divider marginY="space-900" />

{/* Flex with secondary links */}
<nav aria-label="Secondary links">
Expand All @@ -158,22 +158,22 @@ const FooterDefault = () => {
isWrapping
>
<li>
<Link href="https://www.example.com" UNSAFE_className="link-secondary">
<Link href="https://www.example.com" color="secondary">
Legal notice
</Link>
</li>
<li>
<Link href="https://www.example.com" UNSAFE_className="link-secondary">
<Link href="https://www.example.com" color="secondary">
Terms of service
</Link>
</li>
<li>
<Link href="https://www.example.com" UNSAFE_className="link-secondary">
<Link href="https://www.example.com" color="secondary">
Privacy policy
</Link>
</li>
<li>
<Link href="https://www.example.com" UNSAFE_className="link-secondary">
<Link href="https://www.example.com" color="secondary">
Manage cookies
</Link>
</li>
Expand Down
12 changes: 6 additions & 6 deletions packages/web-react/src/components/Footer/demo/FooterNested.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ const FooterNested = () => {
</Grid>

{/* Divider */}
<Divider UNSAFE_className="my-900" />
<Divider marginY="space-900" />

{/* Product logo */}
<div className="text-center">
Expand All @@ -89,7 +89,7 @@ const FooterNested = () => {
</div>

{/* Divider */}
<Divider UNSAFE_className="my-900" />
<Divider marginY="space-900" />

{/* Flex with secondary links */}
<nav aria-label="Secondary links">
Expand All @@ -101,22 +101,22 @@ const FooterNested = () => {
isWrapping
>
<li>
<Link href="https://www.example.com" UNSAFE_className="link-secondary">
<Link href="https://www.example.com" color="secondary">
Legal notice
</Link>
</li>
<li>
<Link href="https://www.example.com" UNSAFE_className="link-secondary">
<Link href="https://www.example.com" color="secondary">
Terms of service
</Link>
</li>
<li>
<Link href="https://www.example.com" UNSAFE_className="link-secondary">
<Link href="https://www.example.com" color="secondary">
Privacy policy
</Link>
</li>
<li>
<Link href="https://www.example.com" UNSAFE_className="link-secondary">
<Link href="https://www.example.com" color="secondary">
Manage cookies
</Link>
</li>
Expand Down

0 comments on commit e118dc5

Please sign in to comment.