From b0fbcf26c146f4f510c460e83df406483ed50725 Mon Sep 17 00:00:00 2001 From: Michael Pande Date: Tue, 23 Apr 2024 16:04:20 +0200 Subject: [PATCH] Pxweb2 164 presentation page (#125) PXWEB2-164 a basic version of the "whole" website with some of our building blocks, --- .../pxweb2/public/locales/en/translation.json | 11 +- .../pxweb2/public/locales/no/translation.json | 124 ++++ apps/pxweb2/public/theme/variables.css | 2 +- apps/pxweb2/src/@types/resources.d.ts | 5 + apps/pxweb2/src/app/app.module.scss | 22 + .../src/app/{app.spec.tsx => app.spec.jsx} | 7 + apps/pxweb2/src/app/app.tsx | 570 ++++++++++-------- .../components/Content/Content.module.scss | 18 + .../src/app/components/Content/Content.tsx | 14 + .../app/components/Header/Header.module.scss | 35 ++ .../src/app/components/Header/Header.tsx | 35 ++ .../NavigationBar/NavigationBar.module.scss | 13 + .../NavigationBar/NavigationBar.tsx | 38 ++ .../NavigationRail/NavigationRail.module.scss | 42 ++ .../NavigationRail/NavigationRail.tsx | 57 ++ apps/pxweb2/src/styles.scss | 30 +- libs/pxweb2-ui/src/index.ts | 3 +- .../src/lib/components/Button/Button.spec.tsx | 2 +- .../src/lib/components/Icon/Icons.tsx | 4 + 19 files changed, 757 insertions(+), 275 deletions(-) rename apps/pxweb2/src/app/{app.spec.tsx => app.spec.jsx} (60%) create mode 100644 apps/pxweb2/src/app/components/Content/Content.module.scss create mode 100644 apps/pxweb2/src/app/components/Content/Content.tsx create mode 100644 apps/pxweb2/src/app/components/Header/Header.module.scss create mode 100644 apps/pxweb2/src/app/components/Header/Header.tsx create mode 100644 apps/pxweb2/src/app/components/NavigationBar/NavigationBar.module.scss create mode 100644 apps/pxweb2/src/app/components/NavigationBar/NavigationBar.tsx create mode 100644 apps/pxweb2/src/app/components/NavigationRail/NavigationRail.module.scss create mode 100644 apps/pxweb2/src/app/components/NavigationRail/NavigationRail.tsx diff --git a/apps/pxweb2/public/locales/en/translation.json b/apps/pxweb2/public/locales/en/translation.json index 53e6952e..6447324c 100644 --- a/apps/pxweb2/public/locales/en/translation.json +++ b/apps/pxweb2/public/locales/en/translation.json @@ -34,16 +34,21 @@ "welcome_trans_test": "Welcome to the <1>app 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" } } }, diff --git a/apps/pxweb2/public/locales/no/translation.json b/apps/pxweb2/public/locales/no/translation.json index 06f469ce..2a043bcd 100644 --- a/apps/pxweb2/public/locales/no/translation.json +++ b/apps/pxweb2/public/locales/no/translation.json @@ -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 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..." + } + } } } diff --git a/apps/pxweb2/public/theme/variables.css b/apps/pxweb2/public/theme/variables.css index dda6252c..9b8c13a2 100644 --- a/apps/pxweb2/public/theme/variables.css +++ b/apps/pxweb2/public/theme/variables.css @@ -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 { diff --git a/apps/pxweb2/src/@types/resources.d.ts b/apps/pxweb2/src/@types/resources.d.ts index 4e633fde..b845ab9d 100644 --- a/apps/pxweb2/src/@types/resources.d.ts +++ b/apps/pxweb2/src/@types/resources.d.ts @@ -35,6 +35,11 @@ interface Resources { "welcome_trans_test": "Welcome to the <1>app for PxWeb 2.0!" }, "presentation_page": { + "header": { + "searchbutton": "Search", + "languagebutton": "languages", + "statistics": "Statistikkbanken" + }, "sidemenu": { "hide": "Hide menu", "selection": { diff --git a/apps/pxweb2/src/app/app.module.scss b/apps/pxweb2/src/app/app.module.scss index 02b9265f..fd48110e 100644 --- a/apps/pxweb2/src/app/app.module.scss +++ b/apps/pxweb2/src/app/app.module.scss @@ -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; } diff --git a/apps/pxweb2/src/app/app.spec.tsx b/apps/pxweb2/src/app/app.spec.jsx similarity index 60% rename from apps/pxweb2/src/app/app.spec.tsx rename to apps/pxweb2/src/app/app.spec.jsx index 6f2c6642..436ef1a3 100644 --- a/apps/pxweb2/src/app/app.spec.tsx +++ b/apps/pxweb2/src/app/app.spec.jsx @@ -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', () => { diff --git a/apps/pxweb2/src/app/app.tsx b/apps/pxweb2/src/app/app.tsx index 3b3c3acc..898365be 100644 --- a/apps/pxweb2/src/app/app.tsx +++ b/apps/pxweb2/src/app/app.tsx @@ -1,7 +1,7 @@ import { useTranslation, Trans } from 'react-i18next'; import cl from 'clsx'; -import classes from './app.module.scss'; +import styles from './app.module.scss'; import { Button, Heading, @@ -13,13 +13,17 @@ import { Select, SelectOption, PxTable, - Search, + Search, } from '@pxweb2/pxweb2-ui'; import useLocalizeDocumentAttributes from '../i18n/useLocalizeDocumentAttributes'; //import { NumberFormatter } from '../i18n/formatters'; import { TableService } from '@pxweb2/pxweb2-api-client'; -import { mapTableMetadataResponse } from '../mappers/TableMetadataResponseMapper'; +import { mapTableMetadataResponse } from '../mappers/TableMetadataResponseMapper'; import { useState } from 'react'; +import { Header } from './components/Header/Header'; +import NavigationRail from './components/NavigationRail/NavigationRail'; +import { Content } from './components/Content/Content'; +import NavigationBar from './components/NavigationBar/NavigationBar'; function test(event: React.MouseEvent) { event.preventDefault(); @@ -28,7 +32,7 @@ function test(event: React.MouseEvent) { function testSubmit() { console.log('test submit'); } -function selectedOptionChanged(selectedItem: SelectOption) { +function selectedOptionChanged(selectedItem: SelectOption) { console.log('Selected option: ' + selectedItem.label); } @@ -39,7 +43,11 @@ export function App() { const [errorMsg, setErrorMsg] = useState(''); const [pxTable, setPxTable] = useState(null); - const options: SelectOption[] = [{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2'}, { label: 'Option 3', value: '3'}]; + const options: SelectOption[] = [ + { label: 'Option 1', value: '1' }, + { label: 'Option 2', value: '2' }, + { label: 'Option 3', value: '3' }, + ]; const locales = { en: { title: 'English' }, @@ -56,269 +64,317 @@ export function App() { const getTable = (id: string) => { TableService.getMetadataById(id, i18n.resolvedLanguage) - .then((tableMetadataResponse) => - { - const pxTab: PxTable = mapTableMetadataResponse(tableMetadataResponse); - setPxTable(pxTab); setErrorMsg('') - } - ) - .catch((error) => - { - setErrorMsg('Could not get table: ' + id); setPxTable(null) - } - ); + .then((tableMetadataResponse) => { + const pxTab: PxTable = mapTableMetadataResponse(tableMetadataResponse); + setPxTable(pxTab); + setErrorMsg(''); + }) + .catch((error) => { + setErrorMsg('Could not get table: ' + id); + setPxTable(null); + }); }; return ( <> -
    - {Object.keys(locales).map((locale) => ( -
  • - -
    • - ))} -
- - {t('common.title')} - -
- {t('start_page.header')} - - BodyShort: This component will be used for text with not more than 80 - characters. - - - BodyLong: This is a story about Little Red Ridinghood. One day she went - into the wood to visit her grandmother. The day after too, She visited - her every day, every week, every month, every year. She never saw a - wolf, no even a little fox. - - -
- - {/* +
+
+ +
+
+ +
+ +
    + {Object.keys(locales).map((locale) => ( +
  • + +
    • + ))} +
+ + {t('common.title')} + +
+ {t('start_page.header')} + + BodyShort: This component will be used for text with not more than + 80 characters. + + + BodyLong: This is a story about Little Red Ridinghood. One day she + went into the wood to visit her grandmother. The day after too, She + visited her every day, every week, every month, every year. She + never saw a wolf, no even a little fox. + + +
+ + {/* setTableid(e.target.value.trim())} /> */} -   - { errorMsg.length > 0 && {errorMsg} - } -
-
- -
- {pxTable && ( -
-

- -
    - {pxTable.variables.map((variable) => ( -

  • {variable.label}

    - {variable.mandatory && Mandatory} -

      Values:

      - {variable.values.map((value) => ( -
    • {value.label} -
        - {value.notes?.map((note) => ( -
      • {note.text}
        • - ))} -
      -
      • - ))} -
    -

      CodeLists:

      - {variable.codeLists?.map((codelist) => ( -
    1. {codelist.label}
      2. - ))} -
    -

      Notes:

      - {variable.notes?.map((note) => ( -
    • {note.text}
      • - ))} -
    -
    • - ))} -
-
- )} -
-
- -
- -
- +   + {errorMsg.length > 0 && ( + + {errorMsg} + + )} +
+
+ +
+ {pxTable && ( +
+

+ +
    + {pxTable.variables.map((variable) => ( +
  • +

    {variable.label}

    + {variable.mandatory && ( + + Mandatory + + )} +
      +

      Values:

      + {variable.values.map((value) => ( +
    • + {value.label} +
        + {value.notes?.map((note) => ( +
      • {note.text}
        • + ))} +
      +
      • + ))} +
    +
      +

      CodeLists:

      + {variable.codeLists?.map((codelist) => ( +
    1. {codelist.label}
      2. + ))} +
    +
      +

      Notes:

      + {variable.notes?.map((note) => ( +
    • {note.text}
      • + ))} +
    +
    • + ))} +
+
+ )} +
+
+ +
+ +
+ +
+
+ + Mandatory + +   + + Mandatory + +   +
+
+ +
+ +
+ +
+ +
+
+ +
+ +
+ +   + +

+ {t('date.simple_date', { + value: new Date('2024-01-25'), + })} +

+

+ {t('date.simple_date_with_time', { + value: new Date('2024-01-25 12:34:56'), + })} +

+

+ + "Welcome to the app for PxWeb 2.0!" + +

+ + Example of getting a translation from a nested translation + key:  + {t('presentation_page.sidemenu.edit.customize.pivot.title')} + + {/*

Test custom number formatter: {NumberFormatter(2000.6666666, 2)}

+ */}{' '} +

+ Simple number:{' '} + {t('number.simple_number', { + value: 2000.066666666, + })} +

+

+ Simple number with custom decimals:{' '} + {t('number.simple_number', { + value: 2000.00007, + minimumFractionDigits: customMinDecimals, + maximumFractionDigits: customMaxDecimals, + roundingMode: customRoundingMode, + })} +

+

+ Simple number with 0 decimals:{' '} + {t('number.simple_number_with_zero_decimal', { + value: 2000.044444444, + })} +

+

+ Simple number with 1 decimal:{' '} + {t('number.simple_number_with_one_decimal', { + value: 2000.044444444, + })} +

+

+ Simple number with 2 decimals:{' '} + {t('number.simple_number_with_two_decimals', { + value: 2000.044444444, + })} +

+

+ Simple number with 3 decimals:{' '} + {t('number.simple_number_with_three_decimals', { + value: 2000.044444444, + })} +

+

+ Simple number with 4 decimals:{' '} + {t('number.simple_number_with_four_decimals', { + value: 2000.044444444, + })} +

+

+ Simple number with 5 decimals:{' '} + {t('number.simple_number_with_five_decimals', { + value: 2000.044447444, + })} +

+

+ Round test:{' '} + {t('number.simple_number_with_one_decimal', { + value: 2.23, + })} +

+

+ {' '} + {t('number.simple_number_with_one_decimal', { + value: 2.25, + })} +

+

+ {' '} + {t('number.simple_number_with_one_decimal', { + value: 2.28, + })} +

+

+ {' '} + {t('number.simple_number_with_one_decimal', { + value: -2.23, + })} +

+

+ {' '} + {t('number.simple_number_with_one_decimal', { + value: -2.25, + })} +

+

+ {' '} + {t('number.simple_number_with_one_decimal', { + value: -2.28, + })} +

+
Breakpoint test
+
-
- - Mandatory - -   - - Mandatory - -   -
-
- -
- -
- -
- -
-
- - -
- -
- -   - -

- {t('date.simple_date', { - value: new Date('2024-01-25'), - })} -

-

- {t('date.simple_date_with_time', { - value: new Date('2024-01-25 12:34:56'), - })} -

-

- - "Welcome to the app for PxWeb 2.0!" - -

- - Example of getting a translation from a nested translation key:  - {t('presentation_page.sidemenu.edit.customize.pivot.title')} - - {/*

Test custom number formatter: {NumberFormatter(2000.6666666, 2)}

- */}{' '} -

- Simple number:{' '} - {t('number.simple_number', { - value: 2000.066666666, - })} -

-

- Simple number with custom decimals:{' '} - {t('number.simple_number', { - value: 2000.00007, - minimumFractionDigits: customMinDecimals, - maximumFractionDigits: customMaxDecimals, - roundingMode: customRoundingMode, - })} -

-

- Simple number with 0 decimals:{' '} - {t('number.simple_number_with_zero_decimal', { - value: 2000.044444444, - })} -

-

- Simple number with 1 decimal:{' '} - {t('number.simple_number_with_one_decimal', { - value: 2000.044444444, - })} -

-

- Simple number with 2 decimals:{' '} - {t('number.simple_number_with_two_decimals', { - value: 2000.044444444, - })} -

-

- Simple number with 3 decimals:{' '} - {t('number.simple_number_with_three_decimals', { - value: 2000.044444444, - })} -

-

- Simple number with 4 decimals:{' '} - {t('number.simple_number_with_four_decimals', { - value: 2000.044444444, - })} -

-

- Simple number with 5 decimals:{' '} - {t('number.simple_number_with_five_decimals', { - value: 2000.044447444, - })} -

-

- Round test:{' '} - {t('number.simple_number_with_one_decimal', { - value: 2.23, - })} -

-

- {' '} - {t('number.simple_number_with_one_decimal', { - value: 2.25, - })} -

-

- {' '} - {t('number.simple_number_with_one_decimal', { - value: 2.28, - })} -

-

- {' '} - {t('number.simple_number_with_one_decimal', { - value: -2.23, - })} -

-

- {' '} - {t('number.simple_number_with_one_decimal', { - value: -2.25, - })} -

-

- {' '} - {t('number.simple_number_with_one_decimal', { - value: -2.28, - })} -

-
Breakpoint test
); } diff --git a/apps/pxweb2/src/app/components/Content/Content.module.scss b/apps/pxweb2/src/app/components/Content/Content.module.scss new file mode 100644 index 00000000..3d33fe7b --- /dev/null +++ b/apps/pxweb2/src/app/components/Content/Content.module.scss @@ -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); +} diff --git a/apps/pxweb2/src/app/components/Content/Content.tsx b/apps/pxweb2/src/app/components/Content/Content.tsx new file mode 100644 index 00000000..c167ffae --- /dev/null +++ b/apps/pxweb2/src/app/components/Content/Content.tsx @@ -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 = ({ children }) => { + return ( +
+
{children}
+
+ ); +}; diff --git a/apps/pxweb2/src/app/components/Header/Header.module.scss b/apps/pxweb2/src/app/components/Header/Header.module.scss new file mode 100644 index 00000000..9975cff9 --- /dev/null +++ b/apps/pxweb2/src/app/components/Header/Header.module.scss @@ -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; + } + } +} diff --git a/apps/pxweb2/src/app/components/Header/Header.tsx b/apps/pxweb2/src/app/components/Header/Header.tsx new file mode 100644 index 00000000..5ee9bcd3 --- /dev/null +++ b/apps/pxweb2/src/app/components/Header/Header.tsx @@ -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 ( +
+
+ PXWEB2 +
+
+
+ + + +
+
+
+
+
+ ); +}; diff --git a/apps/pxweb2/src/app/components/NavigationBar/NavigationBar.module.scss b/apps/pxweb2/src/app/components/NavigationBar/NavigationBar.module.scss new file mode 100644 index 00000000..009b727d --- /dev/null +++ b/apps/pxweb2/src/app/components/NavigationBar/NavigationBar.module.scss @@ -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); +} diff --git a/apps/pxweb2/src/app/components/NavigationBar/NavigationBar.tsx b/apps/pxweb2/src/app/components/NavigationBar/NavigationBar.tsx new file mode 100644 index 00000000..2ba8fb64 --- /dev/null +++ b/apps/pxweb2/src/app/components/NavigationBar/NavigationBar.tsx @@ -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 ( +
+ + + + + +
+ ); +}; +export default NavigationBar; diff --git a/apps/pxweb2/src/app/components/NavigationRail/NavigationRail.module.scss b/apps/pxweb2/src/app/components/NavigationRail/NavigationRail.module.scss new file mode 100644 index 00000000..4c35bed6 --- /dev/null +++ b/apps/pxweb2/src/app/components/NavigationRail/NavigationRail.module.scss @@ -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; + } +} diff --git a/apps/pxweb2/src/app/components/NavigationRail/NavigationRail.tsx b/apps/pxweb2/src/app/components/NavigationRail/NavigationRail.tsx new file mode 100644 index 00000000..4cab236f --- /dev/null +++ b/apps/pxweb2/src/app/components/NavigationRail/NavigationRail.tsx @@ -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 = ({ label, selected, icon }) => { + return ( + + ); +}; + +export const NavigationRail: React.FC = () => { + const { t } = useTranslation(); + return ( +
+ + + + + +
+ ); +}; +export default NavigationRail; diff --git a/apps/pxweb2/src/styles.scss b/apps/pxweb2/src/styles.scss index 5639c309..343ebdbb 100644 --- a/apps/pxweb2/src/styles.scss +++ b/apps/pxweb2/src/styles.scss @@ -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"); - } \ No newline at end of file + font-family: 'PxWeb-font-700'; + src: url('/fonts/PxWeb-font-700.ttf') format('truetype'); +} diff --git a/libs/pxweb2-ui/src/index.ts b/libs/pxweb2-ui/src/index.ts index d16ac52f..35020584 100644 --- a/libs/pxweb2-ui/src/index.ts +++ b/libs/pxweb2-ui/src/index.ts @@ -6,6 +6,7 @@ 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'; @@ -13,4 +14,4 @@ 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'; \ No newline at end of file +export * from './lib/shared-types/vartypeEnum'; diff --git a/libs/pxweb2-ui/src/lib/components/Button/Button.spec.tsx b/libs/pxweb2-ui/src/lib/components/Button/Button.spec.tsx index 30973ef7..b8a6f415 100644 --- a/libs/pxweb2-ui/src/lib/components/Button/Button.spec.tsx +++ b/libs/pxweb2-ui/src/lib/components/Button/Button.spec.tsx @@ -4,7 +4,7 @@ import Button from './Button'; describe('Button', () => { it('should render successfully', () => { - const { baseElement } = render(