Skip to content

Commit

Permalink
Pxweb2 164 presentation page (#125)
Browse files Browse the repository at this point in the history
PXWEB2-164 a basic version of the "whole" website with some of our building blocks,
michaelpande authored Apr 23, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent f83571f commit b0fbcf2
Showing 19 changed files with 757 additions and 275 deletions.
11 changes: 8 additions & 3 deletions apps/pxweb2/public/locales/en/translation.json
Original file line number Diff line number Diff line change
@@ -34,16 +34,21 @@
"welcome_trans_test": "Welcome to the <1>app</1> for PxWeb 2.0!"
},
"presentation_page": {
"header": {
"searchbutton": "Search",
"languagebutton": "languages",
"statistics": "Statistikkbanken"
},
"sidemenu": {
"hide": "Hide menu",
"selection": {
"title": "Filter",
"variablebox": {
"search":{
"search": {
"placeholder": "Search",
"label": "Search",
"arialabelicontext" : "Search icon",
"ariallabelclearbuttontext" : "Clear search icon"
"arialabelicontext": "Search icon",
"ariallabelclearbuttontext": "Clear search icon"
}
}
},
124 changes: 124 additions & 0 deletions apps/pxweb2/public/locales/no/translation.json
Original file line number Diff line number Diff line change
@@ -5,6 +5,24 @@
"title": "PxWeb 2.0",
"logo": "PxWeb 2.0"
},
"footer": {
"contact": {
"title": "Kontakt",
"description": "Beskrivelsestekst..."
},
"about": {
"title": "Om",
"description": "Beskrivelsestekst..."
},
"accessibility": {
"title": "Tilgjengelighet",
"description": "Beskrivelsestekst..."
},
"version": {
"title": "Versjon",
"description": "Beskrivelsestekst..."
}
},
"generic_buttons": {
"ok": "OK",
"cancel": "Avbryt",
@@ -14,5 +32,111 @@
"start_page": {
"header": "Velkommen til appen!",
"welcome_trans_test": "Velkommen til <1>appen</1> for PxWeb 2.0!"
},
"presentation_page": {
"header": {
"searchbutton": "Søk",
"languagebutton": "språk",
"statistics": "Statistikkbanken"
},
"sidemenu": {
"hide": "Skjul meny",
"selection": {
"title": "Filter",
"variablebox": {
"search": {
"placeholder": "Søk",
"label": "Søk",
"arialabelicontext": "Søkeikon",
"ariallabelclearbuttontext": "Fjern søkeikon"
}
}
},
"view": {
"title": "Vis",
"table": {
"title": "Tabell"
},
"graph": {
"title": "Graf"
}
},
"edit": {
"title": "Rediger",
"customize": {
"title": "Tilpass",
"pivot": {
"title": "Pivot"
},
"rearrange": {
"title": "Omorganiser tabell",
"description": "Beskrivelsestekst..."
},
"change_order": {
"title": "Endre rekkefølge",
"description": "Beskrivelsestekst..."
}
},
"calculate": {
"title": "Beregn",
"sum": {
"title": "Sum",
"description": "Beskrivelsestekst..."
}
},
"hide_display": {
"title": "Skjul/vis"
}
},
"save": {
"title": "Lagre",
"file": {
"title": "Lagre som fil",
"excel": "Excel (xlsx)"
},
"imagefile": {
"title": "Lagre som graf",
"png": "Diagram (png)"
},
"link": {
"title": "Lagre som lenke",
"description": "Beskrivelsestekst..."
},
"api": {
"title": "API",
"description": "Beskrivelsestekst..."
}
},
"help": {
"title": "Hjelp"
}
},
"main_content": {
"last_updated": "Sist oppdatert",
"show_details": "Vis detaljer",
"about_table": {
"title": "Om tabellen",
"footnotes": {
"title": "Noter",
"show_all_footnotes": "Vis alle noter for tabellen"
},
"information": {
"title": "Informasjon",
"description": "Tabellen er en del av statistikken {{statistics}}"
},
"definition": {
"title": "Definisjoner",
"description": "Beskrivelsestekst..."
},
"metadata": {
"title": "Metadata",
"description": "Beskrivelsestekst..."
}
},
"related": {
"title": "Relatert",
"description": "Beskrivelsestekst..."
}
}
}
}
2 changes: 1 addition & 1 deletion apps/pxweb2/public/theme/variables.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Do not edit directly
* Generated on Wed, 17 Apr 2024 13:00:42 GMT
* Generated on Tue, 23 Apr 2024 08:54:01 GMT
*/

:root {
5 changes: 5 additions & 0 deletions apps/pxweb2/src/@types/resources.d.ts
Original file line number Diff line number Diff line change
@@ -35,6 +35,11 @@ interface Resources {
"welcome_trans_test": "Welcome to the <1>app</1> for PxWeb 2.0!"
},
"presentation_page": {
"header": {
"searchbutton": "Search",
"languagebutton": "languages",
"statistics": "Statistikkbanken"
},
"sidemenu": {
"hide": "Hide menu",
"selection": {
22 changes: 22 additions & 0 deletions apps/pxweb2/src/app/app.module.scss
Original file line number Diff line number Diff line change
@@ -5,9 +5,31 @@
width: 100%;
}

.main {
display: flex;
width: 100%;
}

.desktopNavigation {
display: none;
@media (min-width: fixed.$breakpoints-medium-min-width) {
display: block;
}
}

.mobileNavigation {
display: none;
position: fixed;
bottom: 0;
@media (max-width: fixed.$breakpoints-small-max-width) {
display: block;
}
}

@media (min-width: fixed.$breakpoints-xsmall-min-width) and (max-width: fixed.$breakpoints-xsmall-max-width) {
.breakpoints {
max-width: 100px;

color: white;
background-color: black;
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
import { render } from '@testing-library/react';

import App from './app';
window.PxWeb2Config = {
language: {
supportedLanguages: ['en', 'no', 'ar', 'sv'],
defaultLanguage: 'en',
fallbackLanguage: 'en',
},
};

describe('App', () => {
it('should render successfully', () => {
570 changes: 313 additions & 257 deletions apps/pxweb2/src/app/app.tsx

Large diffs are not rendered by default.

18 changes: 18 additions & 0 deletions apps/pxweb2/src/app/components/Content/Content.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
@use '$ui/style-dictionary/dist/scss/fixed-variables.scss' as fixed;

.contentWrapper {
@media (min-width: fixed.$breakpoints-medium-min-width) {
background-color: var(--px-color-background-subtle);
}

border-top-left-radius: var(--px-border-radius-xlarge);
}

.content {
margin: fixed.$spacing-6;
@media (min-width: fixed.$breakpoints-medium-min-width) {
padding: fixed.$spacing-12;
}
background-color: var(--px-color-background-default);
border-radius: var(--px-border-radius-xlarge);
}
14 changes: 14 additions & 0 deletions apps/pxweb2/src/app/components/Content/Content.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from 'react';
import styles from './Content.module.scss';

export interface ContentProps {
children: React.ReactNode;
}

export const Content: React.FC<ContentProps> = ({ children }) => {
return (
<div className={styles.contentWrapper}>
<div className={styles.content}>{children}</div>
</div>
);
};
35 changes: 35 additions & 0 deletions apps/pxweb2/src/app/components/Header/Header.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
@use '$ui/style-dictionary/dist/scss/fixed-variables.scss' as fixed;

.header {
width: 100%;
background-color: white;
display: flex;
align-items: center;
justify-content: space-between;
height: 88px;
padding-left: fixed.$spacing-4;
padding-right: 0;

.headerRight {
display: flex;
}

.desktopMenu {
display: none;
}

.mobileMenu {
display: block;
}

@media (min-width: fixed.$breakpoints-medium-min-width) {
padding-left: fixed.$spacing-6;
padding-right: fixed.$spacing-12;
.desktopMenu {
display: flex;
}
.mobileMenu {
display: none;
}
}
}
35 changes: 35 additions & 0 deletions apps/pxweb2/src/app/components/Header/Header.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from 'react';
import styles from './Header.module.scss';
import { Button, Heading } from '@pxweb2/pxweb2-ui';
import { getConfig } from '../../util/config/getConfig';
import { useTranslation } from 'react-i18next';

export const Header: React.FC = () => {
const { t } = useTranslation();
const config = getConfig();
return (
<div className={styles.header}>
<div>
<Heading size="medium">PXWEB2</Heading>
</div>
<div className={styles.headerRight}>
<div className={styles.desktopMenu}>
<Button variant="tertiary" icon="House">
{t('presentation_page.header.statistics')}
</Button>
<Button variant="tertiary" icon="Globe">
{config.language.supportedLanguages.length +
' ' +
t('presentation_page.header.languagebutton')}
</Button>
<Button variant="secondary" size="medium" icon="MagnifyingGlass">
{t('presentation_page.header.searchbutton')}
</Button>
</div>
<div className={styles.mobileMenu}>
<Button variant="tertiary" icon="Menu" />
</div>
</div>
</div>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
@use '$ui/style-dictionary/dist/scss/fixed-variables.scss' as fixed;

.navigationBar {
height: 80px;
margin: 0;
padding: 16px;
padding-bottom: 32px;
width: 100vw;
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--px-color-background-default);
}
38 changes: 38 additions & 0 deletions apps/pxweb2/src/app/components/NavigationBar/NavigationBar.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from 'react';
import styles from './NavigationBar.module.scss';
import { useTranslation } from 'react-i18next';
import { Item } from '../NavigationRail/NavigationRail';

export const NavigationBar: React.FC = () => {
const { t } = useTranslation();
return (
<div className={styles.navigationBar}>
<Item
label={t('presentation_page.sidemenu.selection.title')}
selected={true}
icon={'Controls'}
/>
<Item
label={t('presentation_page.sidemenu.view.title')}
selected={false}
icon={'BarChart'}
/>
<Item
label={t('presentation_page.sidemenu.edit.title')}
selected={false}
icon={'ArrowsUpDown'}
/>
<Item
label={t('presentation_page.sidemenu.save.title')}
selected={false}
icon={'FloppyDisk'}
/>
<Item
label={t('presentation_page.sidemenu.help.title')}
selected={false}
icon={'QuestionMarkCircle'}
/>
</div>
);
};
export default NavigationBar;
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
@use '$ui/style-dictionary/dist/scss/fixed-variables.scss' as fixed;

.navigationRail {
padding-top: 8px;
height: 100vh;
margin: 0;
width: 120px;
min-width: 120px;
display: flex;
flex-direction: column;
align-items: center;
}

.item {
margin-top: fixed.$spacing-6;
width: 80px;
display: flex;
flex-direction: column;
align-items: center;
border: 0;
background: none;

> .icon {
width: fixed.$spacing-14;
display: flex;
align-items: center;
justify-content: center;
border-radius: 99px;
padding-top: fixed.$spacing-1;
padding-bottom: fixed.$spacing-1;
}

&:hover {
> .icon {
background-color: var(--px-color-surface-subtle-hover);
}
}

> .selected {
background-color: var(--px-color-surface-subtle-active) !important;
}
}
57 changes: 57 additions & 0 deletions apps/pxweb2/src/app/components/NavigationRail/NavigationRail.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import React from 'react';
import cl from 'clsx';
import styles from './NavigationRail.module.scss';
import { useTranslation } from 'react-i18next';
import { Icon, IconProps, Label } from '@pxweb2/pxweb2-ui';

interface ItemProps {
label: string;
selected: boolean;
icon: IconProps['iconName'];
}
export const Item: React.FC<ItemProps> = ({ label, selected, icon }) => {
return (
<button className={styles.item}>
<div className={cl(styles.icon, { [styles.selected]: selected })}>
<Icon iconName={icon} />
</div>
<div>
<Label>{label}</Label>
</div>
</button>
);
};

export const NavigationRail: React.FC = () => {
const { t } = useTranslation();
return (
<div className={styles.navigationRail}>
<Item
label={t('presentation_page.sidemenu.selection.title')}
selected={true}
icon={'Controls'}
/>
<Item
label={t('presentation_page.sidemenu.view.title')}
selected={false}
icon={'BarChart'}
/>
<Item
label={t('presentation_page.sidemenu.edit.title')}
selected={false}
icon={'ArrowsUpDown'}
/>
<Item
label={t('presentation_page.sidemenu.save.title')}
selected={false}
icon={'FloppyDisk'}
/>
<Item
label={t('presentation_page.sidemenu.help.title')}
selected={false}
icon={'QuestionMarkCircle'}
/>
</div>
);
};
export default NavigationRail;
30 changes: 18 additions & 12 deletions apps/pxweb2/src/styles.scss
Original file line number Diff line number Diff line change
@@ -1,15 +1,21 @@
html,
body {
padding: 0;
margin: 0;
* {
box-sizing: border-box;
}
}

@font-face {
font-family: "PxWeb-font-400";
src:
url("/fonts/PxWeb-font-400.ttf") format("truetype");
}
font-family: 'PxWeb-font-400';
src: url('/fonts/PxWeb-font-400.ttf') format('truetype');
}
@font-face {
font-family: "PxWeb-font-500";
src:
url("/fonts/PxWeb-font-500.ttf") format("truetype");
}
font-family: 'PxWeb-font-500';
src: url('/fonts/PxWeb-font-500.ttf') format('truetype');
}
@font-face {
font-family: "PxWeb-font-700";
src:
url("/fonts/PxWeb-font-700.ttf") format("truetype");
}
font-family: 'PxWeb-font-700';
src: url('/fonts/PxWeb-font-700.ttf') format('truetype');
}
3 changes: 2 additions & 1 deletion libs/pxweb2-ui/src/index.ts
Original file line number Diff line number Diff line change
@@ -6,11 +6,12 @@ export * from './lib/components/Select/Select';
export * from './lib/components/Typography/Ingress/Ingress';
export * from './lib/components/Typography/Heading/Heading';
export * from './lib/components/Typography/BodyLong/BodyLong';
export * from './lib/components/Icon/Icon';
export * from './lib/components/Search/Search';
export * from './lib/shared-types/codelist';
export * from './lib/shared-types/codelistType';
export * from './lib/shared-types/note';
export * from './lib/shared-types/pxTable';
export * from './lib/shared-types/value';
export * from './lib/shared-types/variable';
export * from './lib/shared-types/vartypeEnum';
export * from './lib/shared-types/vartypeEnum';
2 changes: 1 addition & 1 deletion libs/pxweb2-ui/src/lib/components/Button/Button.spec.tsx
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@ import Button from './Button';

describe('Button', () => {
it('should render successfully', () => {
const { baseElement } = render(<Button />);
const { baseElement } = render(<Button variant="primary" />);
expect(baseElement).toBeTruthy();
});
});
4 changes: 4 additions & 0 deletions libs/pxweb2-ui/src/lib/components/Icon/Icons.tsx
Original file line number Diff line number Diff line change
@@ -58,3 +58,7 @@ export const ArrowsRightLeft = <path fillRule="evenodd" clipRule="evenodd" d="M1
export const ArrowsSquarePath = <path fillRule="evenodd" clipRule="evenodd" d="M9.03034 4.03035C9.32324 3.73746 9.32324 3.26258 9.03035 2.96969C8.73746 2.67679 8.26258 2.67679 7.96969 2.96968L5.46965 5.46969C5.32899 5.61034 5.24997 5.80111 5.24997 6.00003C5.24997 6.19894 5.32899 6.38971 5.46965 6.53036L7.96967 9.03036C8.26257 9.32325 8.73744 9.32325 9.03033 9.03036C9.32322 8.73746 9.32322 8.26259 9.03033 7.9697L7.8106 6.74998H16C17.7949 6.74998 19.25 8.20506 19.25 9.99998V11.5C19.25 11.9142 19.5858 12.25 20 12.25C20.4142 12.25 20.75 11.9142 20.75 11.5V9.99998C20.75 7.37663 18.6234 5.24998 16 5.24998H7.81069L9.03034 4.03035ZM4.75 12.5C4.75 12.0858 4.41421 11.75 4 11.75C3.58579 11.75 3.25 12.0858 3.25 12.5V14C3.25 16.6233 5.37665 18.75 8 18.75H16.1893L14.9697 19.9697C14.6768 20.2626 14.6768 20.7374 14.9697 21.0303C15.2626 21.3232 15.7374 21.3232 16.0303 21.0303L18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L16.0303 14.9697C15.7375 14.6768 15.2626 14.6768 14.9697 14.9697C14.6768 15.2626 14.6768 15.7374 14.9697 16.0303L16.1893 17.25H8C6.20508 17.25 4.75 15.7949 4.75 14V12.5Z" />;
export const ArrowsCirclePath = <path fillRule="evenodd" clipRule="evenodd" d="M5.25379 7.25C6.7482 5.13154 9.21313 3.75 12.0001 3.75C16.5564 3.75 20.2501 7.44365 20.2501 12C20.2501 12.4142 20.5859 12.75 21.0001 12.75C21.4143 12.75 21.7501 12.4142 21.7501 12C21.7501 6.61522 17.3849 2.25 12.0001 2.25C8.83948 2.25 6.03079 3.75425 4.25 6.08333V3.5C4.25 3.08579 3.91421 2.75 3.5 2.75C3.08579 2.75 2.75 3.08579 2.75 3.5V8C2.75 8.41421 3.08579 8.75 3.5 8.75H8C8.41421 8.75 8.75 8.41421 8.75 8C8.75 7.58579 8.41421 7.25 8 7.25H5.25379ZM16 15.25C15.5858 15.25 15.25 15.5858 15.25 16C15.25 16.4142 15.5858 16.75 16 16.75H18.7463C17.2518 18.8685 14.787 20.25 12 20.25C7.44365 20.25 3.75 16.5563 3.75 12C3.75 11.5858 3.41421 11.25 3 11.25C2.58579 11.25 2.25 11.5858 2.25 12C2.25 17.3848 6.61522 21.75 12 21.75C15.1605 21.75 17.9693 20.2458 19.75 17.9168V20.5C19.75 20.9142 20.0858 21.25 20.5 21.25C20.9142 21.25 21.25 20.9142 21.25 20.5V16C21.25 15.5858 20.9142 15.25 20.5 15.25H16Z" />;
export const ArrowCirclePath = <path fillRule="evenodd" clipRule="evenodd" d="M5.25365 7.25C6.74781 5.1318 9.21302 3.75 12 3.75C16.5563 3.75 20.25 7.44365 20.25 12C20.25 16.5563 16.5563 20.25 12 20.25C7.44365 20.25 3.75 16.5563 3.75 12C3.75 11.5858 3.41421 11.25 3 11.25C2.58579 11.25 2.25 11.5858 2.25 12C2.25 17.3848 6.61522 21.75 12 21.75C17.3848 21.75 21.75 17.3848 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25C8.83941 2.25 6.03099 3.75399 4.25 6.08327V3.5C4.25 3.08579 3.91421 2.75 3.5 2.75C3.08579 2.75 2.75 3.08579 2.75 3.5V8C2.75 8.41421 3.08579 8.75 3.5 8.75H8C8.41421 8.75 8.75 8.41421 8.75 8C8.75 7.58579 8.41421 7.25 8 7.25H5.25365Z" />;
export const House = <path fillRule="evenodd" clipRule="evenodd" d="M12.4939 2.43557C12.2111 2.18814 11.7889 2.18814 11.5061 2.43557L3.50612 9.43557C3.34336 9.57798 3.25 9.78373 3.25 10V21C3.25 21.4142 3.58579 21.75 4 21.75H9C9.41421 21.75 9.75 21.4142 9.75 21V16C9.75 14.7574 10.7574 13.75 12 13.75C13.2426 13.75 14.25 14.7574 14.25 16V21C14.25 21.4142 14.5858 21.75 15 21.75H20C20.4142 21.75 20.75 21.4142 20.75 21V10C20.75 9.78373 20.6566 9.57798 20.4939 9.43557L12.4939 2.43557ZM8.25 16C8.25 13.9289 9.92893 12.25 12 12.25C14.0711 12.25 15.75 13.9289 15.75 16V20.25H19.25V10.3403L12 3.99658L4.75 10.3403V20.25H8.25V16Z"/>;
// The following icons fails if stroke and g-tag is not included. Unless other colors are required, the stroke and g-tag can be included
export const Globe = <g width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#274247" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/><path d="M2 12H22" stroke="#274247" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/><path d="M12 2C14.5013 4.73835 15.9228 8.29203 16 12C15.9228 15.708 14.5013 19.2616 12 22C9.49872 19.2616 8.07725 15.708 8 12C8.07725 8.29203 9.49872 4.73835 12 2Z" stroke="#274247" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></g>;
export const Menu = <g width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 12H21" strokeWidth="2" strokeLinecap="round" stroke="black" strokeLinejoin="round"/><path d="M3 6H21" strokeWidth="2" strokeLinecap="round" stroke="black" strokeLinejoin="round"/><path d="M3 18H21" strokeWidth="2" strokeLinecap="round" stroke="black" strokeLinejoin="round"/></g>;

0 comments on commit b0fbcf2

Please sign in to comment.