diff --git a/src/components/_common/alternativeAudience/AlternativeAudience.tsx b/src/components/_common/alternativeAudience/AlternativeAudience.tsx index 0cc14d60e..29f983831 100644 --- a/src/components/_common/alternativeAudience/AlternativeAudience.tsx +++ b/src/components/_common/alternativeAudience/AlternativeAudience.tsx @@ -3,8 +3,6 @@ import { BodyLong } from '@navikt/ds-react'; import { AlternativeAudience as AlternativeAudienceType, Audience, - AudienceOptions, - getAudience, } from 'types/component-props/_mixins'; import { usePageContentProps } from 'store/pageContext'; import { Language, translator } from 'translations'; @@ -71,50 +69,11 @@ export const AlternativeAudience = () => { const { showProductName } = config; const { alternativeAudience } = data; - const getAudienceLabel = translator('audience', language); - const getProviderAudienceLabel = translator('providerAudience', language); const getStringPart = translator('stringParts', language); const getRelatedString = translator('related', language); - const getProviderTypes = (audience: AudienceOptions) => { - if (audience._selected !== Audience.PROVIDER) { - return []; - } - return audience[audience._selected].provider_audience; - }; - - const buildAudienceAffirmation = (addPeriod: boolean) => { - const { audience: currentAudience } = data; - const currentAudienceKey = getAudience(currentAudience); - - if (!currentAudience || !currentAudienceKey || currentAudienceKey === 'person') { - return ''; - } - - const currentAudienceLabel = getAudienceLabel(currentAudienceKey); - const providerTypes = getProviderTypes(currentAudience) || []; - const providerTypesString = joinWithConjunction( - providerTypes.map((type) => getProviderAudienceLabel(type)), - language - ); - - const forString = `${getStringPart('for').charAt(0).toUpperCase()}${getStringPart( - 'for' - ).slice(1)}`; - - return `${forString} ${providerTypesString || currentAudienceLabel}${ - addPeriod ? '.' : '' - } `; - }; - if (!alternativeAudience) { - return ( -
- - {buildAudienceAffirmation(false)} - -
- ); + return null; } const productName = @@ -124,7 +83,6 @@ export const AlternativeAudience = () => { return (
- {buildAudienceAffirmation(true)} {getRelatedString('relatedAudience').replace('{name}', productName)}{' '} {audienceLinks.map((link, index) => ( diff --git a/src/components/_common/headers/general-page-header/GeneralPageHeader.module.scss b/src/components/_common/headers/general-page-header/GeneralPageHeader.module.scss index 0d012a10a..be3f1b0be 100644 --- a/src/components/_common/headers/general-page-header/GeneralPageHeader.module.scss +++ b/src/components/_common/headers/general-page-header/GeneralPageHeader.module.scss @@ -41,6 +41,7 @@ margin-top: var(--a-spacing-3); font-variant: all-small-caps; color: var(--a-text-subtle); + white-space: pre-wrap; } .ingress:global(.navds-body-long) { diff --git a/src/components/_common/headers/general-page-header/GeneralPageHeader.tsx b/src/components/_common/headers/general-page-header/GeneralPageHeader.tsx index 46493ed44..1d4d9511c 100644 --- a/src/components/_common/headers/general-page-header/GeneralPageHeader.tsx +++ b/src/components/_common/headers/general-page-header/GeneralPageHeader.tsx @@ -1,4 +1,4 @@ -import { BodyLong, BodyShort, Heading } from '@navikt/ds-react'; +import { BodyLong, Heading } from '@navikt/ds-react'; import { PagePropsForPageHeader, getContentTagline, @@ -6,6 +6,7 @@ import { import { Illustration } from 'components/_common/illustration/Illustration'; import { ContentProps, ContentType } from 'types/content-props/_content-common'; import { classNames } from 'utils/classnames'; +import { GeneralPageHeaderTagLine } from './GeneralPageHeaderTagLine'; import style from './GeneralPageHeader.module.scss'; @@ -26,11 +27,7 @@ export const GeneralPageHeader = (props: Props) => { return (
- {tagLine && ( - - {tagLine} - - )} + {tagLine && } { + const { data, language } = usePageContentProps(); + + const getAudienceLabel = translator('audience', language); + const getProviderAudienceLabel = translator('providerAudience', language); + const getStringPart = translator('stringParts', language); + + const getProviderTypes = (audience: AudienceOptions) => { + if (audience._selected !== Audience.PROVIDER) { + return []; + } + return audience[audience._selected].provider_audience; + }; + + const buildAudienceAffirmation = () => { + const { audience: currentAudience } = data; + const currentAudienceKey = getAudience(currentAudience); + + if (!currentAudience || !currentAudienceKey || currentAudienceKey === 'person') { + return ''; + } + + const currentAudienceLabel = getAudienceLabel(currentAudienceKey); + const providerTypes = getProviderTypes(currentAudience) || []; + const providerTypesString = joinWithConjunction( + providerTypes.map((type) => getProviderAudienceLabel(type)), + language + ); + + const forString = `${getStringPart('for').charAt(0).toUpperCase()}${getStringPart( + 'for' + ).slice(1)}`; + + return ` — ${forString} ${providerTypesString || currentAudienceLabel}`; + }; + + return ( + + {props.tagLine} + {buildAudienceAffirmation()} + + ); +}; diff --git a/src/translations/nn.ts b/src/translations/nn.ts index beaab66fb..16c08842a 100644 --- a/src/translations/nn.ts +++ b/src/translations/nn.ts @@ -152,13 +152,13 @@ export const translationsBundleNn: PartialTranslations = { }, situations: { person: 'Dette kan du ha rett til', - employer: 'For arbeidsgjevarar', + employer: 'Kva arbeidsgjevarar må vita', provider: 'For samarbeidspartnarar', }, guides: { person: 'Slik gjer du det', - employer: 'For arbeidsgjevarar', - provider: 'For samarbeidspartnarar', + employer: 'Slik gjer du det', + provider: 'Slik gjer du det', }, publishingCalendar: { event: 'Hending',