Skip to content

Commit

Permalink
style: flowbitify footer
Browse files Browse the repository at this point in the history
  • Loading branch information
Luqmaan Essop committed Jan 26, 2024
1 parent 3e2c5ac commit 47136bc
Show file tree
Hide file tree
Showing 2 changed files with 229 additions and 34 deletions.
48 changes: 42 additions & 6 deletions packages/ui/src/components/Organisms/Footer.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,48 @@ export const Footer = {
{
locale: Locale.En,
items: [
{ title: 'About', target: '/about' as Url },
{ title: 'Blog', target: '/blog' as Url },
{ title: 'Jobs', target: '/jobs' as Url },
{ title: 'Press', target: '/press' as Url },
{ title: 'Accessibility', target: '/accessibility' as Url },
{ title: 'Partners', target: '/partners' as Url },
{
id: '1',
title: 'About',
target: '/about' as Url,
},
{
id: '2',
title: 'Blog',
target: '/blog' as Url,
},
{
id: '3',
title: 'Jobs',
target: '/jobs' as Url,
},
{
id: '4',
title: 'Press',
target: '/press' as Url,
},
{
id: '5',
title: 'Accessibility',
target: '/accessibility' as Url,
},
{
id: '6',
title: 'Partners',
target: '/partners' as Url,
},
{
id: '7',
title: 'Drupal',
target: '/drupal' as Url,
parent: '0',
},
{
id: '8',
title: 'Gatsby',
target: '/gatsby' as Url,
parent: '0',
},
].map((item, index) => ({
...item,
id: index.toString(),
Expand Down
215 changes: 187 additions & 28 deletions packages/ui/src/components/Organisms/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,36 +19,195 @@ export function Footer() {
const intl = useIntl();
const items = buildNavigationTree(useFooterNavigation(intl.locale));
return (
<footer className="bg-white">
<div className="mx-auto max-w-7xl overflow-hidden py-20 px-6 sm:py-24 lg:px-8">
<nav
className="-mb-6 columns-2 sm:flex sm:justify-center sm:space-x-12"
aria-label="Footer"
>
{items.filter(isTruthy).map((item) => (
<div key={item.title} className="pb-6">
<Link
href={item.target}
className="text-sm leading-6 text-gray-600 hover:text-gray-900"
<footer
id="footer"
className={'relative z-10 bg-gray-100 text-gray-500 py-4 lg:py-16 px-4'}

Check warning on line 24 in packages/ui/src/components/Organisms/Footer.tsx

View workflow job for this annotation

GitHub Actions / Test 

Classnames 'py-4, px-4' could be replaced by the 'p-4' shorthand!
>
<h2 className={'sr-only'}>Footer</h2>

Check warning on line 26 in packages/ui/src/components/Organisms/Footer.tsx

View workflow job for this annotation

GitHub Actions / Test 

Strings not allowed in JSX files: "Footer"
<div className="container mx-auto pb-8">
<div className="lg:px-6 flex flex-wrap justify-between">
<div className={'w-full mb-8 md:mb-0 md:w-1/4'}>
<a href="/" className={'mb-4 block'}>
<svg
width="168"
height="14"
viewBox="0 0 168 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
{item.title}
</Link>
<mask
id="mask0_176_129733"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="168"
height="14"
>
<path d="M167.999 0H0V14H167.999V0Z" fill="white" />
</mask>
<g mask="url(#mask0_176_129733)">
<path
d="M165.267 13.4665C166.124 13.1115 166.793 12.6068 167.276 11.9537C167.758 11.3007 168 10.5279 168 9.63681C168 8.99092 167.864 8.45054 167.591 8.01709C167.318 7.58365 166.934 7.22149 166.439 6.93063C165.943 6.63976 165.372 6.4045 164.725 6.22343C164.078 6.04235 163.385 5.89406 162.65 5.77715C162.167 5.70015 161.723 5.61175 161.317 5.5148C160.911 5.41784 160.558 5.29522 160.26 5.14694C159.962 4.99866 159.729 4.81758 159.565 4.60371C159.4 4.38984 159.318 4.14175 159.318 3.85659C159.318 3.50726 159.445 3.2107 159.699 2.96403C159.952 2.71879 160.295 2.53059 160.726 2.40226C161.157 2.27394 161.653 2.20835 162.212 2.20835C162.733 2.20835 163.227 2.27679 163.697 2.41224C164.166 2.5477 164.609 2.75159 165.02 3.02249C165.432 3.29339 165.798 3.62418 166.115 4.012L167.658 2.28677C167.303 1.80913 166.864 1.39849 166.345 1.05488C165.824 0.712681 165.225 0.450333 164.546 0.269255C163.867 0.0881779 163.108 -0.00164795 162.271 -0.00164795C161.484 -0.00164795 160.757 0.0924553 160.091 0.279236C159.424 0.467443 158.836 0.735494 158.329 1.08339C157.821 1.43271 157.427 1.85618 157.149 2.35379C156.87 2.85139 156.73 3.41031 156.73 4.03053C156.73 4.65076 156.841 5.14837 157.063 5.60177C157.285 6.05375 157.612 6.4487 158.044 6.78519C158.475 7.12168 159.001 7.39544 159.624 7.60931C160.246 7.82318 160.957 7.99428 161.757 8.1226C162.1 8.17393 162.443 8.23239 162.784 8.29655C163.127 8.36214 163.456 8.43913 163.774 8.52896C164.092 8.62021 164.374 8.73285 164.621 8.8683C164.869 9.00375 165.065 9.16629 165.212 9.35307C165.358 9.54128 165.431 9.76371 165.431 10.0218C165.431 10.4096 165.281 10.7361 164.983 11.0013C164.684 11.2665 164.304 11.4661 163.84 11.603C163.377 11.7384 162.885 11.8069 162.364 11.8069C161.463 11.8069 160.623 11.6301 159.841 11.2736C159.06 10.9186 158.283 10.3069 157.509 9.44147L156.043 11.4191C156.538 11.988 157.093 12.4599 157.709 12.8349C158.325 13.2099 159.01 13.4979 159.766 13.6975C160.52 13.8971 161.349 13.9984 162.251 13.9984C163.406 13.9984 164.413 13.8201 165.27 13.4651M143.663 2.49922H147.737C148.434 2.49922 149 2.63182 149.431 2.89702C149.862 3.16222 150.078 3.56002 150.078 4.08899C150.078 4.42548 149.986 4.71635 149.802 4.96159C149.619 5.20682 149.361 5.39788 149.031 5.53333C148.7 5.66879 148.332 5.73723 147.926 5.73723H143.661V2.50064L143.663 2.49922ZM143.663 7.90873H148.137C148.581 7.90873 149.007 7.97004 149.413 8.09266C149.819 8.21528 150.149 8.40634 150.403 8.66441C150.656 8.9239 150.784 9.2661 150.784 9.69242C150.784 10.0931 150.679 10.4324 150.47 10.7104C150.26 10.9885 149.966 11.1952 149.585 11.3307C149.204 11.4661 148.754 11.5346 148.233 11.5346H143.663V7.90873ZM148.233 13.803C148.892 13.803 149.524 13.7289 150.127 13.5806C150.731 13.4323 151.27 13.2028 151.746 12.8919C152.222 12.5811 152.596 12.1676 152.869 11.6515C153.142 11.1353 153.277 10.508 153.277 9.77083C153.277 9.11211 153.135 8.53894 152.849 8.05416C152.563 7.56939 152.18 7.17444 151.697 6.87074C151.214 6.56704 150.68 6.35032 150.098 6.22057L150.04 6.60839C150.865 6.38882 151.494 6.02096 151.925 5.50339C152.356 4.98725 152.572 4.3599 152.572 3.62275C152.572 2.88561 152.394 2.28535 152.038 1.78061C151.683 1.27588 151.156 0.892333 150.457 0.627133C149.759 0.361933 148.896 0.229333 147.867 0.229333H141.24V13.8059H148.228L148.233 13.803ZM135.12 10.8174L134.511 8.62591H127.39L126.514 10.8174H135.12ZM126.361 13.803L129.998 5.48486C130.099 5.22679 130.209 4.96159 130.322 4.68926C130.437 4.41835 130.55 4.13319 130.665 3.83662C130.78 3.53863 130.886 3.24491 130.988 2.95405C131.089 2.66319 131.184 2.3823 131.274 2.10997L130.703 2.12993C130.778 2.36234 130.868 2.62469 130.969 2.91555C131.07 3.20642 131.179 3.50441 131.292 3.80811C131.407 4.11181 131.518 4.40695 131.625 4.69068C131.733 4.97442 131.838 5.22108 131.939 5.42782L135.595 13.8044H138.203L132.281 0.232184H129.786L123.845 13.8059H126.358L126.361 13.803ZM121.176 13.803V11.4761H114.532V0.232184H112.057V13.8059H121.176V13.803ZM91.2451 5.7358H83.267V7.98572H91.2451V5.7358ZM92.2924 13.803V11.5146H84.4473V2.5206H92.2168V0.232184H82.0097V13.8059H92.2924V13.803ZM76.7689 5.7358H68.7909V7.98572H76.7689V5.7358ZM77.8162 13.803V11.5146H69.9712V2.5206H77.7406V0.232184H67.5335V13.8059H77.8162V13.803ZM63.8637 13.803V11.4561H54.1327L54.9896 12.1149L63.6523 1.97737V0.232184H52.3419V2.61756H61.3868L60.53 1.91891L51.8462 12.0407V13.8059H63.8623L63.8637 13.803ZM46.2302 10.8174L45.6211 8.62591H38.5L37.6235 10.8174H46.2302ZM37.4709 13.803L41.1085 5.48486C41.2107 5.22679 41.3185 4.96159 41.4319 4.68926C41.5453 4.41693 41.6601 4.13319 41.7749 3.83662C41.8897 3.53863 41.9976 3.24491 42.0984 2.95405C42.1992 2.66319 42.2944 2.3823 42.384 2.10997L41.8127 2.12993C41.8883 2.36234 41.9779 2.62469 42.0788 2.91555C42.1796 3.20642 42.2888 3.50441 42.4022 3.80811C42.517 4.11181 42.6276 4.40695 42.7354 4.69068C42.8432 4.97442 42.9483 5.22108 43.0491 5.42782L46.7049 13.8044H49.3133L43.3907 0.232184H40.8956L34.9548 13.8059H37.4681L37.4709 13.803ZM19.8556 13.803V8.59027C19.8556 7.43964 19.8303 6.3988 19.7799 5.46775C19.7295 4.5367 19.6273 3.60564 19.4747 2.67602L19.2087 3.56857L23.6906 13.8073H25.543L30.0977 3.56715L29.8316 2.67459C29.679 3.63131 29.5768 4.57804 29.5264 5.5148C29.476 6.45298 29.4508 7.47671 29.4508 8.58884V13.8044H31.9067V0.232184H29.2058L24.042 11.7313L25.2797 11.7513L20.1356 0.232184H17.3969V13.8059H19.8528L19.8556 13.803ZM11.2754 10.8174L10.6664 8.62591H3.54238L2.66589 10.8174H11.2726H11.2754ZM2.51607 13.803L6.15367 5.48486C6.25588 5.22679 6.36369 4.96159 6.4771 4.68926C6.59191 4.41835 6.70533 4.13319 6.82014 3.83662C6.93495 3.53863 7.04136 3.24491 7.14357 2.95405C7.24579 2.66319 7.3396 2.3823 7.4292 2.10997L6.85794 2.12993C6.93355 2.36234 7.02316 2.62469 7.12397 2.91555C7.22618 3.20642 7.33399 3.50441 7.44741 3.80811C7.56222 4.11181 7.67283 4.40695 7.78064 4.69068C7.88845 4.97442 7.99347 5.22108 8.09428 5.42782L11.7501 13.8044H14.3586L8.43591 0.232184H5.94084L0 13.8059H2.51327L2.51607 13.803Z"
fill="#1D1D1B"
/>
</g>
<mask
id="mask1_176_129733"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="168"
height="14"
>
<path d="M168 0H0V14H168V0Z" fill="white" />
</mask>
<g mask="url(#mask1_176_129733)">
<path
d="M108.051 11.5175H95.9463V13.8059H108.051V11.5175Z"
fill="#1D1D1B"
/>
</g>
</svg>
</a>
<div className={'text-base text-gray-500 mb-4'}>
<p>meta description</p>

Check warning on line 73 in packages/ui/src/components/Organisms/Footer.tsx

View workflow job for this annotation

GitHub Actions / Test 

Strings not allowed in JSX files: "meta description"
</div>
))}
</nav>
<p className="mt-10 text-center text-xs leading-5 text-gray-500">
&copy;{' '}
{intl.formatMessage(
{
defaultMessage: '{year} {company_name}. All rights reserved.',
id: 'qA8qQH',
},
{
year: 2020,
company_name: 'Company name, Inc',
},
)}
</p>
<div className="sm:flex sm:items-center sm:justify-between">
<div className="flex mt-4 space-x-6 sm:justify-center sm:mt-0">
<a
href="#"
className="text-gray-400 hover:text-blue-600 dark:hover:text-white"
>
<svg
className="w-5 h-5"
fill="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
fillRule="evenodd"
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
clipRule="evenodd"
/>
</svg>
</a>
<a
href="#"
className="text-gray-400 hover:text-blue-600 dark:hover:text-white"
>
<svg
className="w-5 h-5"
fill="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
<a
href="#"
className="text-gray-400 hover:text-blue-600 dark:hover:text-white"
>
<svg
className="w-5 h-5"
fill="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
fillRule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clipRule="evenodd"
/>
</svg>
</a>
<a
href="#"
className="text-gray-400 hover:text-blue-600 dark:hover:text-white"
>
<svg
className="w-5 h-5"
fill="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
fillRule="evenodd"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"
clipRule="evenodd"
/>
</svg>
</a>
</div>
</div>
</div>
<ul
className={'md:ml-[5.625rem] flex flex-wrap justify-between grow'}
aria-label="Footer Primary"
>
{items.map((item, key) => (
<>
<li
key={key + 'header'}
className={
'block mb-3 lg:mr-5 last:mr-0 md:mb-0 md:text-left w-1/2 lg:w-auto'
}
>
{item.target ? (
<Link
href={item.target!}
className={
'text-gray-900 block hover:text-blue-600 transition-all font-bold text-[0.875rem] leading-[1.313rem] uppercase mb-4'
}
>
{item.title}
</Link>
) : (
<span
className={
'block transition-all font-bold text-[0.875rem] leading-[1.313rem] uppercase mb-4'
}
>
{item.title}
</span>
)}
{item.children.length > 0
? item.children.map((child) => (
<Link
key={child.target}
href={child.target}
className="block transition-all text-base mb-4 hover:text-blue-600"
>
{child.title}
</Link>
))
: null}
</li>
</>
))}
</ul>
</div>
</div>
<div
className={
'container mx-auto w-full border-t border-t-gray-200 text-center'
}
>
<div className={'text-base'}>
<p className="mt-10 text-center text-xs leading-5 text-gray-500">

Check warning on line 197 in packages/ui/src/components/Organisms/Footer.tsx

View workflow job for this annotation

GitHub Actions / Test 

Strings not allowed in JSX files: "&copy;"
&copy;{' '}
{intl.formatMessage(
{
defaultMessage: '{year} {company_name}. All rights reserved.',
id: 'qA8qQH',
},
{
year: 2024,
company_name: 'Company name, Inc',
},
)}
</p>
</div>
</div>
</footer>
);
Expand Down

0 comments on commit 47136bc

Please sign in to comment.