Skip to content

Commit

Permalink
feat: adds footer component (#59)
Browse files Browse the repository at this point in the history 
* feat: adds footer component

* feat: adds the default footer

* fix: delete unesed code

* feat: adds footerbrand

* feat: adds footer with social media icons

* fix: deleted unused imports

* fix: improve the responsive

* feat: adds the section footer sitemap links

* style: title standardization

* style: chenge the name component from
LinkBox to LinkGroup

* feat: adds the component footer iconContent

* style: change the icon footer at the page

* style: adds the display name

* feat: adds the footer stories

* fix: typo

* refactor: improvement the footer  Icon

* refatore: change the copyright name

* refactore: deleted the component footerCol

* refactore: refreshing page without footer
 col component

* refactore: refreshing the story page
 without component footerCol

* refactore: improvement at the FooterLink
 component

* refactore: add className in the FooterBrand

* feat: add footer svg

* fix: delete unused component

* feat: add the  components in stories to
the full page

* fix: redundancy

* refactor:  improve the handling of the
href and add the accessibility label

* fix: typo

* refactor: add label acessibility

* refactor: improve the href

* fix: typo

* style: cleaning up lines and spaces

* fix: delete not used aria-label

* fix: fix the footer copyright
  • Loading branch information
@mouracamila
mouracamila authored May 5, 2022
1 parent 39c2d91 commit 7799f15
Show file tree
Hide file tree
Showing 13 changed files with 664 additions and 1 deletion.
2 changes: 1 addition & 1 deletion .storybook/preview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export const decorators = [
<MemoryRouter initialEntries={['/']}>
<Style />
<div className="flex h-screen items-center justify-center">
<div>
<div className="flex w-full items-center justify-center">
<Story />
</div>
</div>
Expand Down
52 changes: 52 additions & 0 deletions public/images/footer-dark.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
50 changes: 50 additions & 0 deletions public/images/footer-light.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
198 changes: 198 additions & 0 deletions src/docs/pages/FooterPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,198 @@
import { FC } from 'react';
import { CodeExample, DemoPage } from './DemoPage';
import { Footer } from '../../lib/components/Footer';
import { BsDribbble, BsFacebook, BsGithub, BsInstagram, BsTwitter } from 'react-icons/bs';

const FooterPage: FC = () => {
const examples: CodeExample[] = [
{
title: 'Default Footer',
code: (
<Footer>
<Footer.Copyright href="#" by="Flowbite™" year={2022} />
<Footer.LinkGroup className="mt-3 flex-wrap items-center text-sm sm:mt-0">
<Footer.Link href="#">About</Footer.Link>
<Footer.Link href="#">Privacy Policy</Footer.Link>
<Footer.Link href="#">Licensing</Footer.Link>
<Footer.Link href="#">Contact</Footer.Link>
</Footer.LinkGroup>
</Footer>
),
},
{
title: 'Footer with logo',
code: (
<Footer className="flex flex-col">
<div className="w-full justify-between sm:flex sm:items-center sm:justify-between">
<Footer.Brand
href="https://flowbite.com"
src="https://flowbite.com/docs/images/logo.svg"
alt="Flowbite Logo"
name="Flowbite"
/>

<Footer.LinkGroup className="mt-3 flex-wrap items-center text-sm sm:mt-0">
<Footer.Link href="#">About</Footer.Link>
<Footer.Link href="#">Privacy Policy</Footer.Link>
<Footer.Link href="#">Licensing</Footer.Link>
<Footer.Link href="#">Contact</Footer.Link>
</Footer.LinkGroup>
</div>
<hr className="my-6 w-full border-gray-200 p-1 dark:border-gray-700 sm:mx-auto lg:my-8" />
<Footer.Copyright href="#" by="Flowbite™" year={2022} />
</Footer>
),
},
{
title: 'Footer with social media icons',
code: (
<Footer className="flex flex-col">
<div className="grid w-full justify-between sm:flex sm:justify-between md:flex md:grid-cols-1">
<div>
<Footer.Brand
href="https://flowbite.com"
src="https://flowbite.com/docs/images/logo.svg"
alt="Flowbite Logo"
name="Flowbite"
className="m-6"
/>
</div>
<div className="grid grid-cols-2 gap-8 sm:mt-4 sm:grid-cols-3 sm:gap-6">
<div>
<h2 className="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white">About</h2>
<Footer.LinkGroup className="flex-col">
<Footer.Link className="mb-4" href="#">
Flowbite
</Footer.Link>
<Footer.Link className="mb-4" href="#">
Tailwind CSS
</Footer.Link>
</Footer.LinkGroup>
</div>
<div>
<h2 className="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white">Follow us</h2>
<Footer.LinkGroup className="flex-col">
<Footer.Link className="mb-4" href="#">
Gihub
</Footer.Link>
<Footer.Link className="mb-4" href="#">
Discord
</Footer.Link>
</Footer.LinkGroup>
</div>
<div>
<h2 className="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white">Legal</h2>
<Footer.LinkGroup className="flex-col">
<Footer.Link className="mb-4" href="#">
Privacy Policy
</Footer.Link>
<Footer.Link className="mb-4" href="#">
Terms &amp; Conditions
</Footer.Link>
</Footer.LinkGroup>
</div>
</div>
</div>
<hr className="my-6 w-full border-gray-200 p-1 dark:border-gray-700 sm:mx-auto lg:my-8" />
<div className="w-full sm:flex sm:items-center sm:justify-between">
<Footer.Copyright href="#" by="Flowbite™" year={2022} />
<div className="mt-4 flex space-x-6 sm:mt-0 sm:justify-center">
<Footer.Icon href="#" className="text-gray-400 hover:text-gray-900" icon={BsFacebook} />
<Footer.Icon href="#" className="text-gray-400 hover:text-gray-900" icon={BsInstagram} />
<Footer.Icon href="#" className="text-gray-400 hover:text-gray-900" icon={BsTwitter} />
<Footer.Icon href="#" className="text-gray-400 hover:text-gray-900" icon={BsGithub} />
<Footer.Icon href="#" className="text-gray-400 hover:text-gray-900" icon={BsDribbble} />
</div>
</div>
</Footer>
),
},
{
title: 'Footer sitemap links',
code: (
<Footer className="flex flex-col bg-gray-800">
<div className="grid grid-cols-2 gap-8 py-8 px-6 md:grid-cols-4">
<div>
<h2 className="mb-6 text-sm font-semibold uppercase text-gray-400">Company</h2>
<Footer.LinkGroup className="flex-col">
<Footer.Link className="mb-4 text-gray-300" href="#">
About
</Footer.Link>
<Footer.Link className="mb-4 text-gray-300" href="#">
Careers
</Footer.Link>
<Footer.Link className="mb-4 text-gray-300" href="#">
Brand Center
</Footer.Link>
<Footer.Link className="mb-4 text-gray-300" href="#">
Blog
</Footer.Link>
</Footer.LinkGroup>
</div>
<div>
<h2 className="mb-6 text-sm font-semibold uppercase text-gray-400">Download</h2>
<Footer.LinkGroup className="flex-col">
<Footer.Link className="mb-4 text-gray-300" href="#">
Discord Server
</Footer.Link>
<Footer.Link className="mb-4 text-gray-300" href="#">
Twitter
</Footer.Link>
<Footer.Link className="mb-4 text-gray-300" href="#">
Facebook
</Footer.Link>
<Footer.Link className="mb-4 text-gray-300" href="#">
Contact Us
</Footer.Link>
</Footer.LinkGroup>
</div>
<div>
<h2 className="mb-6 text-sm font-semibold uppercase text-gray-400">Legal</h2>
<Footer.LinkGroup className="flex-col">
<Footer.Link className="mb-4 text-gray-300" href="#">
Privacy Policy
</Footer.Link>
<Footer.Link className="mb-4 text-gray-300" href="#">
Licensing
</Footer.Link>
<Footer.Link className="mb-4 text-gray-300" href="#">
Terms &amp; Conditions
</Footer.Link>
</Footer.LinkGroup>
</div>
<div>
<h2 className="mb-6 text-sm font-semibold uppercase text-gray-400">Download</h2>
<Footer.LinkGroup className="flex-col">
<Footer.Link className="mb-4 text-gray-300" href="#">
iOS
</Footer.Link>
<Footer.Link className="mb-4 text-gray-300" href="#">
Android
</Footer.Link>
<Footer.Link className="mb-4 text-gray-300" href="#">
Windows
</Footer.Link>
<Footer.Link className="mb-4 text-gray-300" href="#">
MacOS
</Footer.Link>
</Footer.LinkGroup>
</div>
</div>
<hr className="my-6 w-full border-gray-200 p-1 dark:border-gray-700 sm:mx-auto lg:my-8" />
<div className="w-full sm:flex sm:items-center sm:justify-between">
<Footer.Copyright className="text-gray-300" href="#" by="Flowbite™" year={2022} />
<div className="mt-4 flex space-x-6 sm:mt-0 sm:justify-center">
<Footer.Icon href="#" className="text-gray-400 hover:text-white" icon={BsFacebook} />
<Footer.Icon href="#" className="text-gray-400 hover:text-white" icon={BsInstagram} />
<Footer.Icon href="#" className="text-gray-400 hover:text-white" icon={BsTwitter} />
<Footer.Icon href="#" className="text-gray-400 hover:text-white" icon={BsGithub} />
<Footer.Icon href="#" className="text-gray-400 hover:text-white" icon={BsDribbble} />
</div>
</div>
</Footer>
),
},
];
return <DemoPage examples={examples} />;
};
export default FooterPage;
13 changes: 13 additions & 0 deletions src/docs/routes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
HiTable,
HiUser,
HiOutlineChevronDoubleRight,
HiMinus,
} from 'react-icons/hi';
import { AiOutlineLoading3Quarters } from 'react-icons/ai';

Expand All @@ -36,6 +37,7 @@ import CarouselPage from './pages/CarouselPage';
import DashboardPage from './pages/DashboardPage';
import DropdownPage from './pages/DropdownPage';
import FormsPage from './pages/FormsPage';
import FooterPage from './pages/FooterPage';
import ListGroupPage from './pages/ListGroupPage';
import ModalPage from './pages/ModalPage';
import NavbarPage from './pages/NavbarPage';
Expand Down Expand Up @@ -191,6 +193,17 @@ export const routes: RouteProps[] = [
images: { light: 'forms-light.svg', dark: 'forms-dark.svg' },
},
},
{
title: 'Footer',
icon: HiMinus,
href: '/footer',
component: <FooterPage />,
group: false,
card: {
className: 'w-40',
images: { light: 'footer-light.svg', dark: 'footer-dark.svg' },
},
},
{
title: 'List group',
icon: HiClipboardList,
Expand Down
Loading

0 comments on commit 7799f15

Please sign in to comment.