Skip to content

Commit 81ecc47

Browse files
bragejahrenidaame
bragejahren
and
idaame
authored
Minimumsoppsett for Sanity (#1123)
* Lagt inn minimumsoppsett for Sanity. * Lagt til nødvendige hjelpefunksjoner for flettefelter samt komponenten TekstBlock * Liten justering i flettefeltTilTekst * fjern støtte for Ingress, som ikke trengs lenger * fjern støtte for h1 og h2 formattering fra sanity, alt er nå styrt i koden * forbedre uthenting av tekster så vi kun kaller funksjon 1 gang * fjern frittstående ord fra sanity som vi ikke bruker enda * flytt rundt på kode så interne funksjoner ligger under parent --------- Co-authored-by: Ida Merete Enholm <[email protected]>
1 parent c8dc05d commit 81ecc47

File tree

12 files changed

+741
-39
lines changed

12 files changed

+741
-39
lines changed

‎package.json

+5
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,9 @@
102102
"@navikt/familie-typer": "^8.0.2",
103103
"@navikt/fnrvalidator": "^1.3.3",
104104
"@navikt/nav-dekoratoren-moduler": "^2.1.6",
105+
"@portabletext/react": "^3.0.7",
106+
"@portabletext/toolkit": "^2.0.8",
107+
"@sanity/client": "^6.4.9",
105108
"@sentry/react": "^7.105.0",
106109
"amplitude-js": "^8.21.9",
107110
"axios": "^1.6.2",
@@ -120,6 +123,7 @@
120123
"mustache-express": "^1.3.2",
121124
"node-jose": "^2.2.0",
122125
"openid-client": "^5.6.1",
126+
"ramda": "^0.29.0",
123127
"react": "^18.2.0",
124128
"react-collapse": "^5.1.1",
125129
"react-cookie": "^7.0.1",
@@ -141,6 +145,7 @@
141145
"@babel/preset-react": "^7.23.3",
142146
"@babel/preset-typescript": "^7.23.3",
143147
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
148+
"@portabletext/types": "^2.0.6",
144149
"@sentry/webpack-plugin": "^2.14.1",
145150
"@testing-library/dom": "^9.3.3",
146151
"@testing-library/jest-dom": "^6.4.2",

‎src/frontend/App.tsx

+31-26
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { AppNavigationProvider } from './context/AppNavigationContext';
1111
import { EøsProvider } from './context/EøsContext';
1212
import { useFeatureToggles } from './context/FeatureToggleContext';
1313
import { RoutesProvider } from './context/RoutesContext';
14+
import { SanityProvider } from './context/SanityContext';
1415
import { StegProvider } from './context/StegContext';
1516
import { GlobalStyle } from './Theme';
1617
import { EFeatureToggle } from './typer/feature-toggles';
@@ -20,32 +21,36 @@ function App() {
2021
const { toggles } = useFeatureToggles();
2122

2223
return (
23-
<AppProvider>
24-
<EøsProvider>
25-
<RoutesProvider>
26-
<Router
27-
basename={
28-
toggles[EFeatureToggle.KOMBINER_SOKNADER] ? basePath : routerBasePath()
29-
}
30-
>
31-
<StegProvider>
32-
<GlobalStyle />
33-
{process.env.NODE_ENV !== 'production' && (
34-
<FamilieAlert variant={'warning'} inline={false}>
35-
{`Denne siden er under utvikling. `}
36-
<a href="https://www.nav.no/no/person/familie/barnetrygd-og-kontantstotte/barnetrygd">
37-
Klikk her for å gå til våre sider for barnetrygd
38-
</a>
39-
</FamilieAlert>
40-
)}
41-
<AppNavigationProvider>
42-
<AppContainer />
43-
</AppNavigationProvider>
44-
</StegProvider>
45-
</Router>
46-
</RoutesProvider>
47-
</EøsProvider>
48-
</AppProvider>
24+
<SanityProvider>
25+
<AppProvider>
26+
<EøsProvider>
27+
<RoutesProvider>
28+
<Router
29+
basename={
30+
toggles[EFeatureToggle.KOMBINER_SOKNADER]
31+
? basePath
32+
: routerBasePath()
33+
}
34+
>
35+
<StegProvider>
36+
<GlobalStyle />
37+
{process.env.NODE_ENV !== 'production' && (
38+
<FamilieAlert variant={'warning'} inline={false}>
39+
{`Denne siden er under utvikling. `}
40+
<a href="https://www.nav.no/no/person/familie/barnetrygd-og-kontantstotte/barnetrygd">
41+
Klikk her for å gå til våre sider for barnetrygd
42+
</a>
43+
</FamilieAlert>
44+
)}
45+
<AppNavigationProvider>
46+
<AppContainer />
47+
</AppNavigationProvider>
48+
</StegProvider>
49+
</Router>
50+
</RoutesProvider>
51+
</EøsProvider>
52+
</AppProvider>
53+
</SanityProvider>
4954
);
5055
}
5156

‎src/frontend/components/Felleskomponenter/Sanity/TekstBlock.tsx

+117
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
import React, { ReactNode } from 'react';
2+
3+
import { PortableText } from '@portabletext/react';
4+
import styled from 'styled-components';
5+
6+
import { BodyLong, BodyShort, Detail, Heading, Label } from '@navikt/ds-react';
7+
import { useSprakContext } from '@navikt/familie-sprakvelger';
8+
9+
import { useApp } from '../../../context/AppContext';
10+
import { FlettefeltVerdier, LocaleRecordBlock, Typografi } from '../../../typer/sanity/sanity';
11+
12+
const StyledLabel = styled(Label)`
13+
display: block;
14+
`;
15+
16+
interface Props {
17+
typografi?: Typografi;
18+
style?: React.CSSProperties;
19+
children?: ReactNode;
20+
}
21+
22+
const StyledBodyLong = styled(BodyLong)`
23+
:empty {
24+
height: 1.625rem;
25+
}
26+
`;
27+
28+
export function TypografiWrapper({ typografi, style, children }: Props) {
29+
switch (typografi) {
30+
case Typografi.StegHeadingH1:
31+
return (
32+
<Heading level={'1'} size={'xsmall'} style={style}>
33+
{children}
34+
</Heading>
35+
);
36+
case Typografi.ModalHeadingH1:
37+
return (
38+
<Heading level={'1'} size={'large'} style={style}>
39+
{children}
40+
</Heading>
41+
);
42+
case Typografi.ForsideHeadingH1:
43+
return (
44+
<Heading level={'1'} size={'xlarge'} style={style}>
45+
{children}
46+
</Heading>
47+
);
48+
case Typografi.HeadingH2:
49+
return (
50+
<Heading level={'2'} size={'xsmall'} spacing style={style}>
51+
{children}
52+
</Heading>
53+
);
54+
case Typografi.BodyLong:
55+
return <StyledBodyLong style={style}>{children}</StyledBodyLong>;
56+
case Typografi.BodyShort:
57+
return <BodyShort style={style}>{children}</BodyShort>;
58+
case Typografi.Label:
59+
return (
60+
<StyledLabel spacing style={style}>
61+
{children}
62+
</StyledLabel>
63+
);
64+
case Typografi.Detail:
65+
return <Detail style={style}>{children}</Detail>;
66+
case undefined:
67+
return <div style={style}>{children}</div>;
68+
}
69+
}
70+
71+
const TekstBlock: React.FC<{
72+
block: LocaleRecordBlock | undefined;
73+
flettefelter?: FlettefeltVerdier;
74+
typografi?: Typografi;
75+
}> = ({ block, flettefelter, typografi }) => {
76+
const [valgtLocale] = useSprakContext();
77+
const { flettefeltTilTekst } = useApp();
78+
79+
return block ? (
80+
<PortableText
81+
value={block[valgtLocale]}
82+
components={{
83+
block: ({ children }) => (
84+
<TypografiWrapper typografi={typografi} style={{ minHeight: '1rem' }}>
85+
{children}
86+
</TypografiWrapper>
87+
),
88+
marks: {
89+
flettefelt: props => {
90+
if (props?.value?.flettefeltVerdi) {
91+
return (
92+
<span>
93+
{flettefeltTilTekst(props.value.flettefeltVerdi, flettefelter)}
94+
</span>
95+
);
96+
} else {
97+
throw new Error(`Fant ikke flettefeltVerdi`);
98+
}
99+
},
100+
link: props => {
101+
return (
102+
<a
103+
target={props.value.blank ? '_blank' : '_self'}
104+
rel={'noopener noreferrer'}
105+
href={encodeURI(props.value.href)}
106+
>
107+
{props.text}
108+
</a>
109+
);
110+
},
111+
},
112+
}}
113+
/>
114+
) : null;
115+
};
116+
117+
export default TekstBlock;

‎src/frontend/components/SøknadsSteg/Forside/BekreftelseOgStartSoknad.tsx

+18-6
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,11 @@ import {
1515
} from '@navikt/ds-react';
1616
import { AGreen500, ANavRed, AOrange500 } from '@navikt/ds-tokens/dist/tokens';
1717

18+
import { useApp } from '../../../context/AppContext';
1819
import { useFeatureToggles } from '../../../context/FeatureToggleContext';
1920
import { EFeatureToggle } from '../../../typer/feature-toggles';
2021
import { ESøknadstype } from '../../../typer/kontrakt/generelle';
22+
import { ESanitySteg } from '../../../typer/sanity/sanity';
2123
import SpråkTekst from '../../Felleskomponenter/SpråkTekst/SpråkTekst';
2224

2325
import { BekreftelseStatus, useBekreftelseOgStartSoknad } from './useBekreftelseOgStartSoknad';
@@ -56,6 +58,11 @@ const BekreftelseOgStartSoknad: React.FC = () => {
5658
settSøknadstypeFeil,
5759
} = useBekreftelseOgStartSoknad();
5860

61+
const { tekster: teksterFunksjon, plainTekst } = useApp();
62+
const tekster = teksterFunksjon();
63+
const forsidetekster = tekster[ESanitySteg.FORSIDE];
64+
const fellestekster = tekster[ESanitySteg.FELLES];
65+
5966
return (
6067
<FormContainer onSubmit={event => onStartSøknad(event)}>
6168
{toggles[EFeatureToggle.KOMBINER_SOKNADER] && (
@@ -65,17 +72,22 @@ const BekreftelseOgStartSoknad: React.FC = () => {
6572
barnetrygd.
6673
</Alert>
6774
<RadioGroup
68-
legend={
69-
'Vil du søke om utvidet barnetrygd i tillegg til ordinær barnetrygd?'
70-
} // TODO: Skal hente tekst fra Sanity
75+
legend={plainTekst(forsidetekster.soekerDuUtvidet.sporsmal)}
7176
onChange={(value: ESøknadstype) => {
7277
settSøknadstype(value);
7378
settSøknadstypeFeil(false);
7479
}}
75-
error={søknadstypeFeil && 'Du må velge søknadstype'} // TODO: Skal hente tekst fra Sanity
80+
error={
81+
søknadstypeFeil &&
82+
plainTekst(forsidetekster.soekerDuUtvidet.feilmelding)
83+
}
7684
>
77-
<Radio value={ESøknadstype.UTVIDET}>Ja</Radio>
78-
<Radio value={ESøknadstype.ORDINÆR}>Nei</Radio>
85+
<Radio value={ESøknadstype.UTVIDET}>
86+
{plainTekst(fellestekster.frittståendeOrd.ja)}
87+
</Radio>
88+
<Radio value={ESøknadstype.ORDINÆR}>
89+
{plainTekst(fellestekster.frittståendeOrd.nei)}
90+
</Radio>
7991
</RadioGroup>
8092
</VStack>
8193
)}

0 commit comments

Comments
 (0)