Skip to content

Commit

Permalink
feat(components): footer: navigation changes
Browse files Browse the repository at this point in the history 
breaking

navigation prop changed to only include navigation component
  • Loading branch information
@Mostafatalaat770
Mostafatalaat770 committed Sep 28, 2022
1 parent 0a9d7a8 commit bfaeec5
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 34 deletions.
9 changes: 9 additions & 0 deletions src/components/molecules/Footer/Footer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,15 @@ $color-button-stroke: var(--main-black);
footer {
background: var(--main-black);

.navigation {
width: 100%;
display: flex;
justify-content: space-evenly;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
}

.outer {
display: flex;
justify-content: center;
Expand Down
98 changes: 75 additions & 23 deletions src/components/molecules/Footer/Footer.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Meta, Story } from '@storybook/react';
import { Navigation } from '../../atoms';
import { Footer, FooterProps } from './Footer';

export default {
Expand All @@ -17,29 +18,80 @@ Primary.args = {
alt=""
/>
),
navigation: {
title: 'Navigation',
NavigationElements: [
<a key={1} href="#how-it-works">
How it works
</a>,
<a key={2} href="#how-it-works">
How it works
</a>,
<a key={3} href="#how-it-works">
How it works
</a>,
<a key={4} href="#how-it-works">
How it works
</a>,
<a key={5} href="#how-it-works">
How it works
</a>,
<a key={6} href="#how-it-works">
How it works
</a>,
],
},
navigation: (
<div className="navigation">
<div>
<p>Test</p>
<Navigation>
<a key={1} href="#how-it-works">
How it works
</a>
<a key={2} href="#how-it-works">
How it works
</a>
<a key={3} href="#how-it-works">
How it works
</a>
<a key={4} href="#how-it-works">
How it works
</a>
<a key={5} href="#how-it-works">
How it works
</a>
<a key={6} href="#how-it-works">
How it works
</a>
</Navigation>
</div>
<div>
<p>Test</p>
<Navigation>
<a key={1} href="#how-it-works">
How it works
</a>
<a key={2} href="#how-it-works">
How it works
</a>
<a key={3} href="#how-it-works">
How it works
</a>
<a key={4} href="#how-it-works">
How it works
</a>
<a key={5} href="#how-it-works">
How it works
</a>
<a key={6} href="#how-it-works">
How it works
</a>
</Navigation>
</div>{' '}
<div>
<p>Test</p>
<Navigation>
<a key={1} href="#how-it-works">
How it works
</a>
<a key={2} href="#how-it-works">
How it works
</a>
<a key={3} href="#how-it-works">
How it works
</a>
<a key={4} href="#how-it-works">
How it works
</a>
<a key={5} href="#how-it-works">
How it works
</a>
<a key={6} href="#how-it-works">
How it works
</a>
</Navigation>
</div>
</div>
),

sideText: 'A space for creators to BONUZ your fans with exclusive content',
buttons: [{ text: 'Contact us' }, { text: 'Privacy policy', outline: true }],
privacyPolicy: { text: 'Privacy policy', link: 'https://bonuz.market' },
Expand Down
14 changes: 3 additions & 11 deletions src/components/molecules/Footer/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { FC } from 'react';
import {
FormArrowButton,
Button,
Navigation,
Input,
SocialList,
SocialListProps,
Expand All @@ -12,13 +11,9 @@ import {
import { StatusTextProps } from '../../atoms/StatusText/StatusText';
import './Footer.scss';

type NavigationProps = {
title: string;
NavigationElements: React.ReactElement[];
};
type FooterProps = {
logo: React.ReactElement;
navigation: NavigationProps;
navigation: React.ReactElement;
sideText: string;
buttons?: { text: string; outline?: boolean; link?: string }[];
privacyPolicy?: { text: string; link: string };
Expand Down Expand Up @@ -64,10 +59,7 @@ const Footer: FC<React.PropsWithChildren<FooterProps>> = ({
)}
</div>
</div>
<div className="col">
<p>{navigation.title}</p>
<Navigation>{navigation.NavigationElements}</Navigation>
</div>
<div className="col">{navigation}</div>
<div className="col">
<SocialList {...socialMediaLinks} />
<div className="form">
Expand Down Expand Up @@ -104,5 +96,5 @@ const Footer: FC<React.PropsWithChildren<FooterProps>> = ({
/**
* EXPORTS
*/
export type { NavigationProps, FooterProps };
export type { FooterProps };
export { Footer };

1 comment on commit bfaeec5

@vercel
Copy link

@vercel vercel bot commented on bfaeec5 Sep 28, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

bonuz-ui – ./

bonuz-ui-bonuz.vercel.app
bonuz-ui-git-master-bonuz.vercel.app
bonuz-ui.vercel.app

Please sign in to comment.