Skip to content

Commit

Permalink
feat(pdc-frontend): integrate ui package
Browse files Browse the repository at this point in the history
  • Loading branch information
@AliKdhim87
AliKdhim87 committed Oct 3, 2023
1 parent 07e63e0 commit d2b7b14
Show file tree
Hide file tree
Showing 6 changed files with 161 additions and 30 deletions.
1 change: 1 addition & 0 deletions apps/pdc-frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
},
"dependencies": {
"@frameless/samenwerkende-catalogi": "0.0.0-semantically-released",
"@frameless/ui": "0.0.0-semantically-released",
"@tanstack/react-query": "4.29.12",
"@utrecht/component-library-css": "1.0.0-alpha.539",
"@utrecht/component-library-react": "1.0.0-alpha.348",
Expand Down
65 changes: 35 additions & 30 deletions apps/pdc-frontend/src/app/[locale]/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { dir } from 'i18next';
import type { Metadata } from 'next';
import React from 'react';
import { QueryClientProvider } from '@/client';
import { Page, PageContent, PageHeader, SkipLink, Surface } from '@/components';
import { Navigation, Page, PageContent, PageHeader, SkipLink, Surface } from '@/components';
import { ClientLanguageSwitcher } from '@/components/ClientLanguageSwitcher';
import '@utrecht/component-library-css';
import '../../styles/globals.css';
Expand All @@ -17,6 +17,32 @@ import 'react-loading-skeleton/dist/skeleton.css';
import { useTranslation } from '../i18n/index';
import { languages } from '../i18n/settings';

import '@frameless/ui/dist/bundle.css';

// eslint-disable-next-line no-unused-vars
const getNavListData = (t: (text: string) => string) => [
{
title: t('navigation.list.0.title'),
link: t('navigation.list.0.link'),
},
{
title: t('navigation.list.1.title'),
link: t('navigation.list.1.link'),
},
{
title: t('navigation.list.2.title'),
link: t('navigation.list.2.link'),
},
{
title: t('navigation.list.3.title'),
link: t('navigation.list.3.link'),
},
{
title: t('navigation.list.4.title'),
link: t('navigation.list.4.link'),
},
];

const escapeComment = (data: any) => String(data).replace(/--/g, '-\u200B-');

const HTMLComment = ({ data }: any) => (
Expand Down Expand Up @@ -200,35 +226,14 @@ const RootLayout = async ({ children, params: { locale } }: LayoutProps) => {
</div>
</div>
</PageHeader>
<nav className="utrecht-topnav" id="menu">
<ul className="utrecht-topnav__list">
<li className="utrecht-topnav__item">
<a className="utrecht-topnav__link" href="https://www.utrecht.nl/wonen-en-leven">
Wonen en leven
</a>
</li>
<li className="utrecht-topnav__item">
<a className="utrecht-topnav__link" href="https://www.utrecht.nl/zorg-en-onderwijs">
Zorg en onderwijs
</a>
</li>
<li className="utrecht-topnav__item">
<a className="utrecht-topnav__link" href="https://www.utrecht.nl/werk-en-inkomen">
Werk en inkomen
</a>
</li>
<li className="utrecht-topnav__item">
<a className="utrecht-topnav__link" href="https://www.utrecht.nl/ondernemen">
Ondernemen
</a>
</li>
<li className="utrecht-topnav__item">
<a className="utrecht-topnav__link" href="https://www.utrecht.nl/bestuur-en-organisatie">
Bestuur en organisatie
</a>
</li>
</ul>
</nav>
<Navigation
list={getNavListData(t)}
mobileBreakpoint={768}
toggleButton={{
openText: 'Menu',
closeText: 'Sluiten',
}}
/>
<PageContent className="utrecht-page-content--modifier" style={{ position: 'relative' }}>
<Main id="main">{children}</Main>
</PageContent>
Expand Down
24 changes: 24 additions & 0 deletions apps/pdc-frontend/src/app/i18n/locales/en/layout.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,5 +88,29 @@
"title": "Contact us via WhatsApp"
}
]
},
"navigation": {
"list": [
{
"title": "Living and Life",
"link": "https://www.utrecht.nl/wonen-en-leven"
},
{
"title": "Health and Education",
"link": "https://www.utrecht.nl/zorg-en-onderwijs"
},
{
"title": "Work and Income",
"link": "https://www.utrecht.nl/werk-en-inkomen"
},
{
"title": "Business",
"link": "https://www.utrecht.nl/ondernemen"
},
{
"title": "Government and Organization",
"link": "https://www.utrecht.nl/bestuur-en-organisatie"
}
]
}
}
24 changes: 24 additions & 0 deletions apps/pdc-frontend/src/app/i18n/locales/nl/layout.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,5 +88,29 @@
"title": "Neem contact op via WhatsApp"
}
]
},
"navigation": {
"list": [
{
"title": "Wonen en leven",
"link": "https://www.utrecht.nl/wonen-en-leven"
},
{
"title": "Zorg en onderwijs",
"link": "https://www.utrecht.nl/zorg-en-onderwijs"
},
{
"title": "Werk en inkomen",
"link": "https://www.utrecht.nl/werk-en-inkomen"
},
{
"title": "Ondernemen",
"link": "https://www.utrecht.nl/ondernemen"
},
{
"title": "Bestuur en organisatie",
"link": "https://www.utrecht.nl/bestuur-en-organisatie"
}
]
}
}
1 change: 1 addition & 0 deletions apps/pdc-frontend/src/components/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@
export * from '@utrecht/component-library-react/dist/css-module';
export * from '@utrecht/web-component-library-react';
export { PageTitle } from './Page-title';
export * from '@frameless/ui';
76 changes: 76 additions & 0 deletions apps/pdc-frontend/src/styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,82 @@ body {
--utrecht-link-list-marker-background-image: url("https://pki.utrecht.nl/Loket/base/files/getImageAction.do?key=kl_pijltje-wit-SVG");
--utrecht-list-social-margin-block-start: 24px;

/* --- navigation tokens start --- */

/* nav */
--utrecht-navigation-border-block-start-width: 0;
--utrecht-navigation-border-block-start-color: transparent;

/* nav-list */

--utrecht-navigation-list-padding-inline-start: 0;
--utrecht-navigation-list-padding-inline-end: 0;
--utrecht-navigation-list-padding-block-start: 0;
--utrecht-navigation-list-padding-block-end: 0;
--utrecht-navigation-list-mobile-padding-inline-start: 16px;
--utrecht-navigation-list-mobile-padding-inline-end: 8px;
--utrecht-navigation-list-mobile-padding-block-start: 8px;
--utrecht-navigation-list-mobile-padding-block-end: 8px;
--utrecht-navigation-list-mobile-background-color: var(--utrecht-color-white);

/* nav-item */

/* --utrecht-navigation-item-padding-inline-start: 0;
--utrecht-navigation-item-padding-inline-end: 0;
*/

/* nav-item-mobile */
--utrecht-navigation-item-mobile-padding-block-start: 8px;
--utrecht-navigation-item-mobile-padding-block-end: 8px;
--utrecht-navigation-item-mobile-padding-inline-start: 4px;
--utrecht-navigation-item-mobile-padding-inline-end: 4px;
--utrecht-navigation-item-icon-color: var(--utrecht-color-grey-80);
--utrecht-navigation-item-icon-margin-inline-end: 8px;

/* link */
--utrecht-navigation-link-padding-block-start: 16px;
--utrecht-navigation-link-padding-block-end: 16px;
--utrecht-navigation-link-padding-inline-start: 8px;
--utrecht-navigation-link-padding-inline-end: 8px;
--utrecht-navigation-link-background-color: var(--utrecht-color-grey-15);
--utrecht-navigation-link-border-color: var(--utrecht-color-grey-40);
--utrecht-navigation-link-border-inline-end-width: 1px;
--utrecht-navigation-link-color: var(--utrecht-color-white);
--utrecht-navigation-link-justify-content: center;
--utrecht-navigation-link-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);

/* link-mobile */
--utrecht-navigation-link-mobile-text-align: start;
--utrecht-navigation-link-mobile-background-color: var(--utrecht-color-white);
--utrecht-navigation-link-mobile-color: var(--utrecht-color-blue-35);
--utrecht-navigation-link-mobile-justify-content: flex-start;
--utrecht-navigation-link-mobile-padding-inline-start: 8px;
--utrecht-navigation-link-mobile-padding-inline-end: 0;
--utrecht-navigation-link-mobile-padding-block-start: 8px;
--utrecht-navigation-link-mobile-padding-block-end: 8px;
--utrecht-navigation-link-mobile-hover-background-color: var(--utrecht-color-white);
--utrecht-navigation-link-mobile-hover-color: var(--utrecht-color-blue-35);
--utrecht-navigation-link-mobile-transition-duration: 0.3s;
--utrecht-navigation-link-mobile-transition-timing-function: ease-in-out;
--utrecht-navigation-mobile-hover-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);

/* link-focus */
--utrecht-navigation-link-focus-color: var(--utrecht-color-black);
--utrecht-navigation-link-focus-declaration-thickness: 1.5px;

/* link-active */
--utrecht-navigation-link-active-color: var(--utrecht-color-white);

/* link-hover */
--utrecht-navigation-link-hover-color: var(--utrecht-color-white);
--utrecht-navigation-link-hover-decoration-thickness: 1.5px;
--utrecht-navigation-link-hover-background-color: var(--utrecht-color-black);

/* active focus */
--utrecht-navigation-link-active-focus-color: var(--utrecht-color-black);

/* --- navigation tokens end --- */

margin-block: 0;
margin-inline: 0;
padding-block: 0;
Expand Down

0 comments on commit d2b7b14

Please sign in to comment.